- •«Разметка html – документов»
- •Содержание
- •Структура html-документа
- •Заголовок документа
- •Тело документа
- •Заголовки внутри документа
- •Параграфы
- •Принудительное разбиение строк
- •Комментарии
- •Оформление нтмl-документов
- •Горизонтальные разделители
- •Простые списки
- •Нумерованные списки
- •Списки с определениями
- •Вложенные списки
- •Добавление бегущей строки
- •Унифицированный адрес ресурсов
- •Ссылки на фрагменты документов
- •Ссылки на части одного документа
- •Посылка электронной почты
- •Преформатированный текст
- •Форматирование символов
- •Использование тэгов форматирования
- •Специальные символы
- •Использование графических изображений
- •Встроенные изображения, звуки и анимация
- •Ссылки на изображения, звуки и анимацию
- •Таблицы
- •Простейшая однострочная таблица
- •Приемы ускорения создания таблиц
- •Создание строки надписей
- •Включение названия
- •Выравнивание текста внутри клеток
- •Пустые клетки
- •Перекрытие текстом нескольких строк или столбцов
- •Средства таблиц
- •Задания к лабораторной работе
- •Содержание отчета по лабораторной работе
- •Приложение б Константы для представления цветов
- •Продолжение приложения б
- •Издательство «нефтегазовый университет»
- •625000, Г. Тюмень, ул. Володарского, 38
- •625039. Г.Тюмень. Ул. Киевская, 52
Задания к лабораторной работе
Согласовать тему WEB – страницы с преподавателем.
Открыть неформатирующий редактор БЛОКНОТ.
Создать набор тэгов (см. стр.4), задающий структуру WEB – документа.
Сохранить файл с расширением .htm.
Открыть сохраненный файл браузером. БЛОКНОТ можно не закрывать. Удобно будет работать, имея на Рабочем Столе два открытых окна – БЛОКНОТ и браузер.
Далее ход работы должен быть следующим: последовательно добавлять информацию в заголовок и тело документа, открытого в БЛОКНОТЕ, сохранять файл и обновлять содержимое окна браузера.
В результате выполнения лабораторной работы должен быть создан WEB – документ, показывающий как можно больше возможностей языка HTML:
Заголовки;
Работу со шрифтами и графикой;
Списки маркированные и нумерованные;
Таблицы;
Гипертекстовые ссылки: абсолютные и относительные, ссылки на другие документы, ссылки на части этого же документа.
Оформить отчёт.
Содержание отчета по лабораторной работе
Название работы.
Цель работы.
HTML – код разработанной страницы.
КОНТРОЛЬНЫЕ ВОПРОСЫ
Что такое URL?
В каком формате записывается URL?
Чем абсолютная ссылка отличается от относительной?
Какова структура WEB – документа?
Каково назначение заголовка (HEAD) WEB – документа?
Какие форматы графических файлов наиболее предпочтительны для WEB – документов?
Какие требования обычно предъявляются к WEB – страницами?
РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА
http://books.net-soft.ru/html.htm - учебник HTML.
ПриложениеA
Основные тэги языка HTML
Структурные Тэги
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Весь документ |
<html> |
нет |
</html> |
|
Заголовок документа |
<head> |
нет |
</head> |
|
Название документа |
<title> |
нет |
</title> |
|
Комментарии |
<!-- |
нет |
--> |
|
Тело документа |
<body> |
background=«filename» bgcolor-«XXXXXX» text=«XXXXXX» Iink=«XXXXXX» vlink-«XXXXXX» |
</body> |
Базовые тэги для текста
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Разрыв строки |
<br> |
clear=left rightjnone |
нет |
|
Параграф |
<р> |
aligiv=left center right |
</р> |
|
Выделенный шрифт |
<b> |
нет |
</b> |
|
Наклонный шрифт |
<i> |
нет |
</i> |
|
Подчеркнутый шрифт |
<u> |
нет |
</u> |
|
Шрифт «пишущей машинки» |
<tt> |
нет |
</tt> |
|
Заголовок |
<h1-6> |
align=left|center|right |
</h1-6> |
|
++Х |
Увеличивает значение на 1 |
++ somevar увеличивает значение somevar на 1 |
|
Х++ |
Возвращает значение, затем увеличивает его на 1 |
somevar++ Возвращает значение somevar, затем увеличивает его на 1 |
|
--Х |
Уменьшает значение на 1 |
--somevar Уменьшает значение somevar на 1 |
|
X-- |
Возвращает значение, затем уменьшает его на 1 |
somevar— Возвращает значение somevar, затем уменьшает его на 1 |
Списки
|
Функция |
Тэг |
Атрибуты |
|
|
Неупорядоченный список |
<ul> |
type=disc|circle|square |
</ul> |
|
Упорядоченный список |
<ol> |
type=I|A|l|a|I|start=XX |
</ol> |
|
Элемент списка |
<li> |
type=disc|circle|square I|A|la||I|start=XX |
нет |
|
Список определений |
<dl> |
нет |
</dI> |
|
Элемент списка определений |
<dt> |
нет |
нет |
|
Определение |
<dd> |
нет |
нет |
Ссылки
|
Функция |
Тэг |
Атрибуты |
Парный Тэг- |
|
Ссылка |
<а> |
href=«filename» target=«windowname» |
</а> |
|
Закладка |
<а> |
Name=«markname» |
нет |
Графические изображения
|
Функция |
Тэг |
Атрибуты |
Парный Тэг- |
|
Графическое изображение |
<img> |
src=«filename» align=left right width-XXX height=XXX alt=«text» ISMAP USEMAP=«#mapname» |
нет |
Изображения-карты (imagemap)
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Определение карты |
<тар> |
nате=«mapnsme» |
</тар> |
|
Определение области |
<аrеа> |
shape=«rect|сirc1e |роly | point» |
нет |
Метатэги
|
Функция |
Тэг |
Атрибуты |
|
<META> для сервера
|
http-equiv=«refresh» content= «seconds, filename»
|
нет |
|
<META> для содержания |
name=«keywords/description/author/ generator/abstract/expiration» content=«your information» |
нет |
Таблицы
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Таблица |
|
border=X width=X cellspacing=X ceIlpadding=X bgcolor=«XXXXXX» |
|
|
Ряд таблицы |
<tr> |
align=Ieft|center|right valign=top|middle|bottom bgcoIor=«XXXXX» |
</tr> |
|
Ячейка
|
<td> |
align=left|center|right valign=top|middle|bottom width=X nowrap colspan=X rowspan=X bgcolor=«XXXXXX» |
</td> |
|
Заголовок таблицы |
<th> |
align-left|center|right valign=top|middle| bottom width=X nowrap colspan=X rowspan=X bgcolor=«XXXXXX» |
</th> |
|
Заголовок |
<caption> |
align=left|center|right valign=top|middle|bottom |
</caption> |
Фреймы
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Набор фреймов |
<frameset> |
cols=«XX|XX%|*» rows=«XX]XX% *» |
</frameset> |
|
Определение фрейма |
<frame> |
src=«filename» name=«framename» noresize scroll=auto|yes|no marginwidth=«XX» marginheight=«XX» |
нет |
|
База фрейма |
<base> |
target=«framename»| «_self»| «_top»| «_parent» |
нет .'-' |
|
Нет поддержки фреймов |
<noframes> |
нет |
</nofrarnes> |
Формы
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Форма |
<form> |
method=get|put action=«programname» |
</form> |
|
Поле ввода |
<input> |
name=«variablename» type=text|password| checkbox|radio|submit|reset| image |
нет
|
|
Список выбора |
<select> |
name=«variablename» size=XX multiple |
</select> |
|
Опция выбора |
<option> |
none |
нет |
|
Много строчный текст |
<textarea> |
name=«variablename» rows=XX cols=XX |
</textarea> |
Таблицы стилей
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Определение стиля |
<style> |
type=«texiycss» |
</style> |
|
Связь с CSS-файлом |
<link> |
rel=stylesheet type=«text/css» href=«URL»
|
нет |
|
Элемент <SPAN>
|
<span> |
style=«property:value;» |
</span> |
Часто используемые символы
|
Название |
Символ |
НТМL-эквивалент |
|
Амперсанд |
& |
&аmр; |
|
Знак «цент» |
С |
Scent; |
|
Знак «копирайт» |
© |
&сору; |
|
Знак «градус» |
0 |
° |
|
Больше чем |
> |
> |
|
Меньше чем |
< |
< |
|
Неразбивающий пробел |
|
|