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

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

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

Документ HTML представляет из себя набор вложенных элементов. Элементы представляют из себя контейнеры, в которых размещаются:

Каждый контейнер начинается последовательностью типа < имя_элемента список_атрибутов > и заканчивается последовательностью типа < /имя_элемента >. Первая последовательность называется тагом начала элемента, а вторая последовательность называется тагом конца элемента. Инструкции управления изображением также являются тагами -- тагами начала. Исторически сложилось так, что ряд элементов потеряли в процессе развития языка свои таги конца и, таким образом, превратились в инструкции управления отображением. Сам документ является также элементом, который может иметь две формы:

Обычный документ представляет из себя два контейнера head и body:
< HTML >
< head >
.....
< /head >
< body атрибуты_тела_документа >
......
< /body >
< /HTML >
Документ-фрейм имеет несколько другой вид. Собственно -- это контейнер для других HTML-документов(см. раздел "Фреймы").

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

Здесь сведены в таблицу наиболее часто используемые элементы:

Таблица.1 - Наиболее часто используемые элементы

Форма записи элемента Назначение
< 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 можно свести в следующую таблицу:

Таблица.2 - Атрибуты

Атрибут Значения Действие
ALIGN LEFT Значение 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.

Фреймы

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

Фреймы могут быть вложенными, с изменяемыми границами, с вертикальными или горизонтальными линейками, а также в документ-фрейм можно включить альтернативу для работы с программами просмотра, которые не поддерживают фреймы.

Конструкции языка HTML для построения форм

<FORM атрибуты>...</FORM>

использование: предназначен для получения информации от клиента и определяет начало и конец формы.

атрибуты:

  • Обязательные
    ACTION - определяет URI (Universal Resource Identifier-адрес или место расположения документа) CGI-скрипта
    METHOD - определяет метод передачи информации скрипту. Возможные значения GET или POST.

  • Необязательные
    [ENCTYPE] - определяет тип MIME декодирования информации (значение этого атрибута по умолчанию - "application/x-www-form-urlencoded").
    [SCRIPT] - используется для передачи URI скрипта. Язык скрипта и интерфейс пользователя при этом не являются частью спецификации HTML 3.0

Важно: Формы не могут быть вложенными!

Для реализации формы используются следующие теги.

<INPUT>

использование: предназначен для создания различных по своей функциональности полей ввода.

атрибуты:

  • Обязательные:

    TYPE - определяет тип поля формы.

      Допустимые значения:
      TEXT - позволяет символьный ввод.
      PASSWORD - предназначено для "скрытого" ввода символов (вводимые символы не отображаются).
      CHECKBOX - поле, позволяющее два состояния ("есть", "нет"). Должен применяться с атрибутами NAME и VALUE
      RADIO - поле, позволяющее выбор "один из всех"
      SUBMIT - кнопка инициирующая передачу информации из формы обрабатывающему скрипту, определенному в ACTION в соответствии с методом, определенным атрибутом METHOD.
      RESET - кнопка, сбрасывающая все введенные ранее значения.
      IMAGE - поле позволяющее воспроизвести событие SUBMIT при помощи вашего изображения, при этом возвращается два значения: name.x = координата Х и name.y = координата Y, где Х и Y координаты положения курсора мыши на изображении в момент щелчка.
      HIDDEN - поле создающее неотображаемое значение.
      RANGE - определяет поле позволяющее ввести цифровое значение с определенными допустимыми верхним и нижним пределами.
      Используется вместе с атрибутами MAX и MIN определяющими область допустимых значений (например: TYPE=RANGE MIN=1 MAX=10).

    NAME - значение этого атрибута определяет идентификатор поля.
    VALUE - значение этого атрибута определяет что будет передано в качестве значения по умолчанию для данного поля при инициации формы.
    SRC - определяет URI файла изображения. Используется только с типом поля IMAGE.
    [CHECKED] - позволяет установить начальное значение поля типа CHECKBOX.
    SIZE - определяет размер поля.
    [MAXLENGTH] - определяет максимальное количество символов, допустимое для ввода в поле.
    [ALIGN] - позволяет позиционирование
      Допустимые значения:
    • по вертикали
      TOP - выравнивание по верху.
      MIDDLE - выравнивание по середине.
      BOTTOM выравнивание по низу.
      Эти значения используются только с TYPE=IMAGE.
    • по горизонтали
      [LEFT] - выравнивание слева
      [RIGHT] - выравнивание справа

    [DISABLED] - определяет поле как "read only" - только для чтения. Значение в поле не может быть изменено пользователем.
    [ERROR] - определяет сообщение об ошибке, объясняющее, почему введенное значение в поле не верно.

<TEXTAREA атрибуты>...</TEXTAREA>

использование: предназначен для определения области ввода текста. Размер поля определяется атрибутами.

атрибуты:

NAME - значение этого атрибута определяет идентификатор поля. Возвращается при инициации формы.
ROWS - определяет количество строк в текстовой области.
COLS - определяет количество столбцов в текстовой области.
[VALUE] - задает значение по умолчанию.
[DISABLED] - определяет поле как "read only" - только для чтения. Значение в поле не может быть изменено пользователем.
[ERROR] - определяет сообщение об ошибке, объясняющее, почему введенное значение в поле не верно.

<SELECT атрибуты>
<OPTION > значение1
...
<OPTION > значениеN
</SELECT>

использование: предназначен для определения области выбора из нескольких значений (меню).

Атрибуты:

NAME - значение этого атрибута определяет идентификатор поля. Возвращается при инициации формы.
[SIZE] - определяет количество видимых возможных значений.
[MULTIPLE] - определяет возможность множественного выбора.
[DISABLED] - определяет меню как "read only" - только для чтения. Значения в меню не может быть выбрано пользователем и показывается серым цветом.

<OPTION атрибуты> значение

использование: используется только с <SELECT> для определения пунктов меню.

атрибуты:

SELECTED - определяет значение по умолчанию
VALUE - определяет возвращаемое значение

Примечание: в [ ] даны необязательные атрибуты

Возможности HTML в настоящее время ипользуются и там, где это первоначально не предполагалось, например в электронной почте.

Электронная почта была одним из первых приложений Internet. В середине 60-х годов она стала ключом к совместной работе ученых и продолжает оставаться одним из основных приложений Internet. Миллионы людей чаще ипользуют Internet для пересылки почты, чем для просмотра Web-страниц.

Поэтому не удивительно, что HTML проложила себе путь к сообщениям электронной почты. HTML дает те же преимущества электронной почте, что и Web-графики, наличие гиперссылок, возможность добавления видео ряда, звука и приложений - вот далеко не полный перечень новых возможностей.

Если обычная электронная почта позволяет передать только текст, то электронная почта с использованием HTML дает возможность дополнить текстовые сообщения графикой, а также применить другие способы представления информации. Иногда рисунок, звуковой фрагмент или видеоклип может заменить тысячу слов, не правда ли?

Гиперссылки позволяют связать сообщения электронной почты с Web-страницами или с информацией из intranet. Интеграция приложений дает возможность включать в сообщения электронной почты даже динамические электронные таблицы и другие данные.

[назад] [содержание] [вперед]