Список определений
Списки определений являются особым видом списка. Каждый элемент списка состоит из двух частей. В первой части элемента списка записывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина.
<DL> - тэг-контейнер для списка определений.
<DT> - помечается определяемый термин.
<DD> - помечает абзац, раскрывающий значение термина.
Закрывающие тэги для тэгов <DD>, <DT> не обязательны.
В общем виде список определений выглядит следующим образом:
<DL> <DT>Термин <DD>Определение термина </DL>
В тексте после тэга <DT> не могут располагаться тэги абзаца <P> и заголовков <H1>-<H6>. Текст, определяемого термина должен располагаться в одной строке.
Например:
<HTML>
<BODY>
<CENTER>
<H3>Классификация типичных темпераментов человека, основанных на воззрениях Гиппократа </H3>
</CENTER>
<DL>
<DT>Флегматик
<DD>Пассивный, очень трудоспособный, медленно приспосабливающийся, настроение устойчивое, вялость эмоциональных реакций.
<DT>Сангвиник
<DD>Активный, энергичный, легко приспосабливающийся, живость и подвижность эмоциональных реакций.
<DT>Холерик
<DD>Активный, очень энергичный, настойчивый, порывистость и сила эмоциональных реакций, бурные волевые проявления.
<DT>Меланхолик
<DD>Пассивный, легко утомляющийся, тяжело приспосабливающийся, слабость волевых проявлений и преобладание подавленного настроения, неуверенность в себе.
</DL>
</BODY>
<
/HTML>
Вложенные списки
В HTML допустимо произвольное вложение различных типов списков.
Например:
<H3>Спутники некоторых планет</H3>
</CENTER>
<UL>
<LI>Земля
<OL>
<LI>Луна
</OL>
<LI>Марс
<OL>
<LI>Фобос
<LI>Деймос
</OL>
<LI>Уран
<OL>
<LI>Ариэль
<LI>Умбриэль
<LI>Титания
<LI>Обеон
<LI>Миранда
</OL>
<LI>Нептун
<OL>
<LI>Тритон
<LI>Нереида
</OL>
</UL>
Организация ссылок
Гипертекстовый документ – это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому.
Ссылка состоит из двух частей:
Указатель ссылки – то, что пользователь видит на Web-странице. Указателем ссылки может быть слово, группа слов или изображение. Внешний вид ссылки зависит от типа указателя, способа создания и установок браузера.
Адресная часть ссылки – дает указание адреса (URL-адрес) страницы, которую должен открыть браузер. Указание адреса может быть относительным или абсолютным. URL-адрес, не указывающий полный путь – это относительная ссылка. В этом случае определение местоположения файлов выполняется с учетом местоположения HTML-документа, в котором имеется такая ссылка. URL-адрес полностью определяющий компьютер, папку и файл называется абсолютной ссылкой.
<A> - используется для организации ссылок. Требует обязательного закрывающего тэга </A>.
Атрибут |
Назначение |
HREF=URL-адрес |
Ссылка на конкретный файл или сайт. |
TARGET=_blank |
Окно, в котором будет открыта ссылка. |
NAME=метка |
Внутренняя метка для перехода внутри текущего документа. |
TITLE=”текст подсказки” |
Текст во всплывающем окне подсказки. Кавычки ставятся в том случае, если текст подсказки содержит пробелы. |
Например:
<A HREF=URL-адрес>Текстовый указатель ссылки</A>
Правила описания URL-адреса:
Абсолютный адрес образуется следующим образом:
Протокол://имя-сервера/путь
Протокол идентифицирует метод обращения к объекту. Наиболее часто используются следующие протоколы:
http: Доступ к ресурсам сети с использованием HTTP-протокола.
ftp: Запрос файла с FTP-сервера.
mailto: Активизирует программу – почтовый клиент на компьютере пользователя для отправки электронной почты.
file: Доступ к файлу на локальном диске пользователя (не рекомендуется, т.к. ссылка будет нормально работать только на локальном компьютере).
Имя-сервера – это полное доменное имя сервера.
Путь – частичный или полный путь к документу. В полный путь обязательно включается название файла. Для адресации ко вложенной папке используется разделитель «/». Для перехода на уровень выше используется разделитель «../».
Например:
HREF=HTTP://www.rambler.ru/default.html
HREF=mailto:info@specialist.ru
Относительный адрес содержит только путь относительно текущей папки.
Например:
HREF=b.html (в этом случае файл b.html должен находиться в текущей папке)
TARGET
Определяет, в каком окне и каким образом открывается ссылка.
TARGET=_blank Открывает ссылку в новом окне.
TARGET=_self Открывает ссылку в том же окне (используется по умолчанию).
Например:
<A HREF=b.html TARGET=_bank>На главную страницу</A>
Внутренние ссылки
Эти ссылки адресуют внутрь документа. Часто используются для создания оглавления.
Для создания внутренней ссылки необходимо создать метку в конкретной позиции документа с помощью атрибута NAME элемента A.
Например:
<A Name=ATM></A>
Закрывающий тэг необязателен. Заглавные и строчные буквы не различаются.
В документе создается ссылка на метку с помощью атрибута HREF тэга A. При этом указывается имя метки, на которую осуществляется переход, описание имени начинается с символа #.
Например:
<A HREF=#ATM>К метке ATM</A>
Использование изображения в качестве ссылки
Изображения могут использоваться не только в качестве иллюстраций, но и для перехода по гипертекстовым связям. Для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тэга <A>.
Например:
<A HREF=my_doc.html><IMG SRC=winter.jpg></A>
Таблицы
Документ может содержать произвольное число таблиц, причем допускается вложение таблиц друг в друга.
<TABLE> - тэг объявления таблицы. </TABLE> - закрывающий тэг таблицы. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
<TR> - тэг начала новой строки в таблице, </TR> - тэг окончания строки в таблице.
<TD> - тэг начала новой ячейки в таблице, </TD> - закрывающий тэг ячейки.
<TH> - тэг ячейки заголовка, </TH> - закрывающий тэг ячейки заголовка. Содержимое этих ячеек отображается полужирным шрифтом и располагается по центру ячейки.
<CAPTION> - тэг заголовка таблицы. </CAPTION> - закрывающий тэг заголовка. Этот тэг должен располагаться после тэга <TABLE> до первого тэга <TR>.
Например:
<TABLE> <CAPTION>Времена года</CAPTION> <TR><TH>Время года</TH> <TH>Месяц</TH></TR> <TR><TD>Зима</TD> <TD>Декабрь<BR> Январь<BR> Февраль<BR></TD></TR> <TR><TD>Весна</TD> <TD>Март<BR> Апрель<BR> Май<BR></TD></TR> <TR><TD>Лето</TD> <TD>Июнь<BR> Июль<BR> Август<BR></TD></TR> <TR><TD>Осень</TD> <TD>Сентябрь<BR> Октябрь<BR> Ноябрь<BR></TD></TR> </TABLE>
Атрибут |
Назначение |
ALIGN=значение |
Определяет положение заголовка: ALIGN=TOP – заголовок над таблицей; ALIGN=BOTTOM – заголовок под таблицей; ALIGN=LEFT – горизонтальное выравнивание влево; ALIGN=RIGHT – горизонтальное выравнивание вправо; ALIGN=CENTER – горизонтальное выравнивание по центру. |
Например:
<CAPTION ALIGN=LEFT ALIGN=BOTTOM>Времена года</CAPTION>
Заголовок будет расположен под таблицей с выравниванием влево.
Атрибут |
Назначение |
BORDER=число |
Управляет изображением рамки вокруг каждой ячейки. По умолчанию рамки не рисуются. Число определяет толщину рамки в пикселях. |
CELLSPACING=число |
Определяет расстояние между смежными ячейками (рамками ячеек) как по горизонтали, так и по вертикали в пикселях. По умолчанию значение принимается равным двум. |
CELLPADDING=число |
Определяет размер свободного пространства (отступ) между рамкой и данными внутри ячейки. По умолчанию значение принимается равным 1. |
WIDTH=ширина |
Ширина таблицы. Значение ширины задается в пикселях или процентах от всего размера окна. |
HEIGHT=высота |
Высота таблицы. Значение высоты задается в пикселях или процентах от всего размера окна. |
ALIGN=значение |
Определяет горизонтальное расположение таблицы в области просмотра и вариант обтекания таблицы текстом. Допустимые значения: ALIGN=LEFT – выравнивание влево; ALIGN=RIGHT – выравнивание вправо. Чтобы расположить остальной текст ниже таблицы используется тег <BR CLEAR=ALL> |
BGCOLOR=цвет |
Цвет фона в таблице. |
BORDERCOLOR=цвет |
Цвет рамки. |
BORDERCOLORLIGHT=цвет |
Цвет левого и верхнего края рамки всей таблицы и правого и нижнего края каждой ячейки. |
BORDERCOLORDARK=цвет |
Цвет противоположных краев рамки. |
FRAME=значение |
Определяет прорисовку рамки вокруг таблицы. Возможные значения: BOX или BORDER – рамка со всех четырех сторон; ABOVE – рамка только с верхней стороны; BELOW – рамка только снизу; HSIDES – рамка сверху и снизу; VSIDES – рамка справа и слева; LHS – рамка слева; RHS – рамка справа; VOID – таблица без внешних рамок. |
RULES=значение |
Определяет прорисовку внутренних линий сетки таблицы. Возможны значения: ALL – рисуются все внутренние лини; GROUPS – рисуются только лини, разделяющие группы; ROWS – рисуются линии, разделяющие строки; COLS – рисуются линии, разделяющие столбцы; NONE – внутренние линии не рисуются. |
Например:
<TABLE BORDER=1 BGCOLOR=ANTIQUEWHITE WIDTH=40% ALIGN=LEFT>
<CAPTION ALIGN=TOP>Времена года</CAPTION>
<TR> <TH>Время года</TH> <TH>Месяц</TH> </TR>
<TR> <TD>Зима</TD> <TD>Декабрь<BR> Январь<BR>Февраль<BR></TD></TR>
<TR><TD>Весна</TD><TD>Март<BR>Апрель<BR>Май<BR></TD></TR>
<TR><TD>Лето</TD><TD>Июнь<BR>Июль<BR>Август<BR></TD></TR>
<TR><TD>Осень</TD><TD>Сентябрь<BR>Октябрь<BR>Ноябрь<BR></TD></TR>
</TABLE>
<BR><BR>
<H3>Последний вечер зимы</H3>
Меж зимою и весною<BR>Вечер - синею стеною,<BR>
Снегопад - крылом мохнатым слепит<BR>Засыпает он надежды,<BR>
Будет все вокруг - как прежде...<BR>
А весна в краю далеком - все спит.<BR>
Но я верю в то, что скоро<BR>Будет залит солнцем город.<BR>
И снега водою станут, уйдут,<BR>Унося зимы печали...<BR>
Из заморской дальней дали<BR>
Журавли весну на крыльях несут.<BR CLERAR=ALL>
Атрибут |
Назначение |
ALIGN=значение |
Горизонтальное выравнивание текста внутри строки или ячейки. Применяется в тэгах <TR>, <TD>, <TH>. Возможные варианты: LEFT, RIGHT, CENTER. |
VALIGN=значение |
Вертикальное выравнивание текста внутри строки или ячейки. Применяется в тэгах <TR>, <TD>, <TH>. Возможные варианты: TOP, MIDDLE, BOTTOM. |
NOWRAP |
Отключает возможность автоматического разбиения текста ячейки на строки. Применяется в тэгах <TR>, <TD>, <TH>. |
WIDTH=ширина |
Ширина ячейки. Применяется в тэгах <TD>, <TH>. Задается в пикселях. |
HEIGHT=высота |
Высота ячейки. Применяется в тэгах <TD>, <TH>. Задается в пикселях. |
COLSPAN=число_столбцов |
Объединение нескольких смежных ячеек по горизонтали в одну. |
ROWSPAN=число_строк |
Объединение нескольких смежных ячеек по вертикали в одну. |
BGCOLOR=цвет |
|
Например:
<
TABLE
BORDER=1 CELLPADDING=4>
<CAPTION>ОБЪЕМ ПРОДАЖ</CAPTION>
<TR><TH>Город</TH><TH>Вид товара</TH><TH>Сумма продаж</TH></TR>
<TR><TD ROWSPAN=3 ALIGN=CENTER>Москва </TD><TD>Велосипеды</TD>
<TD ALIGN=RIGHT>1750</TD></TR>
<TR><TD>Роликовые доски</TD>
<TD ALIGN=RIGHT>400</TD></TR>
<TR><TD>Мопеды</TD><TD ALIGN=RIGHT>1000</TD></TR>
<TR><TD ROWSPAN=2 ALIGN=CENTER>Санкт-Петербург</TD><TD>Велосипеды</TD>
<TD ALIGN=RIGHT>1600</TD></TR>
<TR><TD>Роликовые доски</TD><TD ALIGN=RIGHT>600</TD></TR>
<TR><TD ALIGN=CENTER>Череповец </TD><TD>Велосипеды</TD>
<TD ALIGN=RIGHT>2000</TD></TR>
<TR><TD ALIGN=CENTER COLSPAN=2>Итог по продажам</TD><TD ALIGN=RIGHT> <B>7350</B></TD></TR>
</TABLE>
Для выравнивания содержимого всех ячеек текущей строки достаточно задать требуемые параметры в тэге <TR>. Для выравнивания содержимого внутри одного столбца предусмотрены специальные тэги <COL> и <COLGROUP>. Эти тэги должны располагаться сразу же за описанием тэга <TABLE> перед первым появлением тэга <TR>.
Атрибут |
Назначение |
SPAN=число |
Определяет количество смежных столбцов, на которые распространяется действие выравнивания. Значение по умолчанию равно 1. |
ALIGN=значение |
Вариант выравнивания. Допустимые значения: LEFT; RIGHT; CENTER |
Атрибут |
Назначение |
SPAN=число |
Определяет количество смежных столбцов, на которые распространяется действие выравнивания. Значение по умолчанию равно 1. |
ALIGN=значение |
Вариант выравнивания. Допустимые значения: LEFT; RIGHT; CENTER. |
VALIGN=значение |
Выравнивание по вертикали. Возможные значения: TOP; MIDDLE; BOTTOM. |
Используя тэг COLGROUP можно преобразовать текст предыдущего примера следующим образом:
<TABLE BORDER=1 CELLPADDING=4>
<COLGROUP ALIGN=CENTER VALIGN=MIDDLE>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=RIGHT>
<CAPTION>ОБЪЕМ ПРОДАЖ</CAPTION>
<TR><TH>Город</TH><TH>Вид товара</TH><TH>Сумма продаж</TH></TR>
<TR><TD ROWSPAN=3>Москва</TD><TD>Велосипеды</TD><TD>1750</TD></TR>
<TR><TD>Роликовые доски</TD><TD>400</TD></TR>
<TR><TD>Мопеды</TD><TD>1000</TD></TR>
<TR><TD ROWSPAN=2>Санкт-Петербург</TD><TD>Велосипеды</TD><TD>1600</TD></TR>
<TR><TD>Роликовые доски</TD><TD>600</TD></TR>
<TR><TD>Череповец </TD><TD>Велосипеды</TD><TD>2000</TD></TR>
<TR><TD COLSPAN=2>Итог по продажам</TD><TD><B>7350</B></TD></TR>
</TABLE>
<TBODY> - выполняет логическую группировку данных. Может встречаться многократно в описании таблицы. Требует обязательного закрывающего тэга </TBODY>.
<THEAD> - тэг, используемый для описания верхнего колонтитула таблицы. Может встречаться в таблице не более одного раза. Часто используется при создании больших таблиц, выходящих за пределы одной страницы.
<TFOOD> - тэг, используемый для описания нижнего колонтитула таблицы. Может встречаться в таблице не более одного раза. Используется при создании больших таблиц, выходящих за пределы одной страницы.
Тэги <THEAD> и <TFOOD> не требуют обязательного закрывающего тэга.
Фреймы
Фреймы позволяют разбить окно просмотра на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами можно организовать взаимодействие, которое заключается с том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
Web-страницы, содержащие фреймы не содержат раздел BODY в своем HTML-коде. Этот раздел заменяется разделом FRAMESET.
Контейнер из тэгов <FRAMSET> и </FRAMESET> обрамляет каждый блок определений фрейма. Внутри контейнера <FRAMSET> могут содержаться только тэги <FRAME> и вложенные тэги <FRAMSET>.
Атрибут |
Назначение |
ROWS=«список_значений» |
Строки фреймов. Задается в пикселях, процентах или относительных единицах. |
COLS=«список_значений» |
Столбцы фреймов. Задается в пикселях, процентах или относительных единицах. |
BORDERCOLOR=цвет |
Цвет рамки |
BORDER=число |
Толщина рамки |
FRAMEBORDER= значение |
Вывод объемной рамки Может принимать значения - yes/no |
Если один из атрибутов ROWS или COLS опущен, то его значение принимается равным 100%.
Например:
Если необходимо разбить окно на два вертикальных фрейма шириной 40% и 60% от размеров окна и высотой 100%, то делается следующая запись тэга:
<FRAMESET COLS=40%,60%>
или
<FRAMESET COLS=40%,*>
При помощи (*) задаются значения в относительных единицах. (*) используется для пропорционального деления пространства в окне браузера. Каждая звездочка представляет собой одну часть целого. Складывая все значения чисел, стоящих у звездочек (если число опущено, то подразумевается единица), получим знаменатель дроби.
Например:
<FRAMESET ROWS=*,2*,3*>
Получим 1+2+3=6, т.е. знаменатель дроби равен 6. Окно будет разбито на три части, первая часть будет иметь высоту равную 1/6 от всей высоты окна, вторая – 2/3, третья – 3/6.
<FRAME> - определяет одиночный фрейм. Не имеет закрывающего тэга.
Атрибут |
Назначение |
SCR=URL-адрес |
Адрес HTML-документа, который будет загружен изначально в данный фрейм. |
NAME=имя_фрейма |
Определяет имя фрейма, которое используют для ссылки к данному фрейму из другого фрейма. |
MARGINWIDTH=значение |
Определяет ширину полей фрейма слева и справа. Размер указывают в пикселях. |
MARGINHEIGHT=значение |
Определяет ширину полей фрейма сверху и снизу. Размер указывают в пикселях. |
SCROLLING=значение |
Отображение полос прокрутки. Возможны значения YES, NO, AUTO. |
NORESIZE |
Запрещает изменение размеров фрейма. Не требует никаких параметров. |
<NOFRAME> - альтернативная информация для браузеров, которые не поддерживают фреймовую структуру HTML-документов. Браузеры с поддержкой фреймовой структуры проигнорируют всю информацию между этими тэгами. Закрывающий тэг обязателен.
Е
сли
необходимо создать вложенный фрейм, то
вместо тэга FRAME создаем еще одну структуру
FRAMESET и уже в ней описываем все необходимые
фреймы.
Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. По умолчанию, если данный атрибут отсутствует, документ будет загружаться в текущий фрейм.
В
документе, где описана структура фреймов,
даем имя фрейма:
Например:
<frameset cols=130,*>
<frame src=fr2.html>
<frame src=fr3.html name=right>
</frameset>
В файле fr2.html, где находятся ссылки на другие документы, в тэг <A> добавляем атрибут TARGET. Этот атрибут может иметь следующие значения:
_blank – загружает указанный файл в новое окно;
_self – загружает указанный файл в тот же фрейм, из которого вызвана ссылка;
_top – загружает указанный файл в целое окно с разрушением фреймовой сетки.
Например:
<body>
<h1 align=center>Оглавление</h1>
<a href=links.html target=_top>Ссылки</a><br>
<a href=poems.html target=right>Стихи</a><br>
<a href=tabl.html target=_blank>Таблица</a><br>
</body>
В последнее время наблюдается отказ от использования фреймовой структуры в пользу использования механизмов CSS (Каскадные таблицы стилей).
Оглавление
Основы HTML 2
1 Что такое HTML 2
2 Основные понятия HTML 2
3 Особенности показа документа 2
4 Структура документа 2
5 Атрибуты тэга <BODY> 3
6 Элементы блочной разметки 3
7 Форматирование текста 4
7.1 Логическое форматирование 4
7.2 Физическое форматирование 4
8 Изображения 6
9 Списки 7
9.1 Маркированный список 7
9.2 Нумерованный список 7
9.3 Список определений 8
9.4 Вложенные списки 8
10 Организация ссылок 9
11 Таблицы 10
12 Фреймы 13