Язык Гипертекстовой Разметки HTML


Основные элементы HTML документа

Общая структура документа Управление отображением Встроенная графика Гипертекстовые ссылки HTML формы Фреймы

Общая структура документа

Документ HTML представляет из себя набор вложенных элементов. Элементы представляют из себя контейнеры, в которых размещаются: Каждый контейнер начинается последовательностью типа < имя_элемента список_атрибутов > и заканчивается последовательностью типа < /имя_элемента >. Первая последовательность называется тагом начала элемента, а вторая последовательность называется тагом конца элемента. Инструкции управления изображением также являются тагами -- тагами начала. Исторически сложилось так, что ряд элементов потеряли в процессе развития языка свои таги конца и, таким образом, превратились в инструкции управления отображением. Сам документ является также элементом, который может иметь две формы: Обычный документ представляет из себя два контейнера HEAD и BODY:
< HTML >
< HEAD >
.....
< /HEAD >
< BODY атрибуты_тела_документа >
......
< /BODY >
< /HTML >
Документ-фрейм имеет несколько другой вид. Собственно -- это контейнер для других HTML-документов(см. раздел "Фреймы").

Управление отображением

Здесь сведены в таблицу наиболее часто используемые элементы:
Форма записи элементаНазначение
< P >Начать новый параграф
< BR >Принудительный перевод строки
< HR >Горизонтальная черта
Списки
< UL > ... < /UL >Ненумерованный список
< OL > ... < /OL >Нумерованный список
< DL > ... < /DL >Cписок определений
< LI >Элемент нумереванного или ненумерованного списка
< DT >Термин, определяемый в списке определений
< DD >определение термина в списке определений
Выделение текста
< B >...< /B >Жирный шрифт
< I > ... < /I >Курсив
< U > ... < /U >Подчеркивание
< PRE > ... < /PRE >Отмена форматирования
< FONT SIZE=атрибут_размера COLOR=атрибут_цвета > ... < /FONT >Управление шрифтом
Заголовки
< Hx > ... < /Hx >Уровень заголовка. Символ "х" принемает значение от 1-7

Встроенная графика

Встраивание графики в текст происходит при помощи использования тага IMG:
< IMG SRC=адрес_картинки ALIGN=атрибут_выравнивания BORDER=ширина_рамки ISMAP USEMAP=имя_стека_ссылок HSPACE=горизонтальный_отступ VSPACE=вертикальный отступ >

Атрибуты тага IMG можно свести в следующую таблицу:
Атрибуты
АтрибутЗначенияДействие
ALIGNLEFTЗначение LEFT позволяет организовать обтекание текста справа от картинки
RIGHTОбтекание текста слева от картинки
ТОР, BOTTOM, CENTER Выравнивают картинку относительно текущей строки текста.
BORDERЗначение этого атрибута определяет толщину рамки вокруг картинки
SRCЗадает адрес файла картинки
ISMAPКартинка - стек гипертекстовых ссылок программы imagemap
USEMAPСтек гипертекстовых ссылок, который не требует использование программы imagemap
HSPACEГоризонтальный зазор между картинкой и техтом, ее обтекающим
VSPACEВертикальный зазор между картинкой и текстом


Гипертекстовые ссылки

Гипертекстовая ссылка имеет вид:

< A HREF=адрес_ресурса TARGET=имя_окна > идентификатор ссылки < /A >

Представленная выше ссылка - это обычная текстовая гипертекстовая ссылка, но бывают еще стеки гипертекстовых графических ссылок. В этом случае для навигации используется графическая картинка:

< A HREF=адрес_ресурса TARGET=имя_окна > < IMG SRC=картинка ISMAP USEMAP=карта > идентификатор ссылки < /A >

В случае атрибута ISMAP используется программа imagemap, а в случае USEMAP используется карта ссылок описанная в елементе MAP. Элемент MAP имеет вид:

< MAP NAME=map >
< AREA SHAPE="RECT" COORDS="x1,y1,x2,y2" HREF=ссылка > ......
< /MAP >

Приведем пример такого стека:

Каждая иконка связана с разделом данной страницы гипертекстовой ссылкой:

Примечание:Если программа просмотра не поддерживает Элемент MAP, то настройте свой сервер для работы через imagemap с описанием икон из элемента MAP.

Формы

Формы предназначены для передачи параметров и данным прикладным программам. Синтаксис формы имеет следующий вид:

< FORM METHOD=метод ACTION=адрес_программы >
элементы формы
< /FORM >
Элементы формы -- это поля ввода INPUT, кнопки, меню и области ввода. Ниже приведен пример формы:


Заполните анкету:

Фамилия:
Имя:
Отчество:
Пол: муж./жен.
Образование:



Фреймы

Собственно вся эта страница -- это фрейм. Структура документа, который является контейнером для других документов выглядит следующим образом:
< HTML >
< HEAD > < FRAMESET COLS=распределение места_под_колонки ROWS=распределение места_под_строки 7gt
< FRAME SRC=имя_файла NAME=имя_окна >
...... < /FRAMESET >
< /HTML >
Фреймы могут быть вложенными, с изменяемыми границами, с вертикальными или горизонтальными линейками, а также в документ-фрейм можно включить альтернативу для работы с программами просмотра, которые не поддерживают фреймы.