Основные элементы языка HTML
В форму вставляются элементы управления, которые показывают поля для ввода информации пользователями (например, текстовые поля, флажки, кнопки). Вид поля ввода определяется значением атрибута type. Описание типов элементов, включаемых в форму, приведено в табл. 1.4. Контейнеры. Они используются только для логического деления IITML-документа на части и никаких действий браузера нс вызывают… Читать ещё >
Основные элементы языка HTML (реферат, курсовая, диплом, контрольная)
Заголовок HTML-документа используется для размещения информации, относящейся ко всему документу в целом. Он нс является обязательным элементом разметки. Элемент разметки title служит для именования документа в web-сети. Например:
Моя страница.
Основными элементами, включаемыми в заголовок head, являются: title — название документа; meta — метаинформация, связанная с документом; link — общие ссылки для данного документа; style — описатели стилей или ссылки на внешние ресурсы со стилями; script — скрипты или ссылки на внешние ресурсы со скриптами.
Тело документа, показываемое в окне браузера, задается с помощью тэга элемент. Оно может включать следующие основные элементы: иерархически упорядоченные контейнеры; заголовки (от h1 до h6); блоки (параграфы, списки, формы, таблицы, картинки и т. п.); текст; рисунки и гипертекстовые ссылки.
В тэге body могут быть заданы атрибуты. Описание некоторых основных атрибутов body показано в табл. 1.2.
Например, атрибут background определяет фон, на котором отображается текст документа. Если источником для фона HTML-документа является графический файл, например image. gif, то в открывающем тэге тела body появляется соответствующий атрибут:
Таблица 1.2.
Некоторые атрибуты HTML
Атрибут | Описание |
marginheight. | Определяет высоту отступа (в пикселях) верхнего и нижнего полей документа. |
marginwidth. | Определяет ширину (в пикселях) левого и правого полей документа. |
background. | Определяет изображение для заливки фона; значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. |
bgcolor. | Определяет цвет фона документа. |
text. | Определяет цвет текста в документе. |
link. | Определяет цвет гиперссылок в документе. |
alink. | Определяет цвет подсветки гиперссылок в момент нажатия. |
vllnk. | Определяет цвет гиперссылок на документы, которые были ранее просмотрены. |
В элемент body включаются элементы управления разметкой, некоторые из которых показаны в табл. 1.3.
Таблица 1.3.
Некоторые элементы управления разметкой
Тэги. | Описание элементов. | Атрибуты. | Описание атрибутов. |
от. до. . | Заголовки задают начало раздела документа. В HTML определено 6 уровней заголовков: от hi до h6. Текст, окруженный тэгами. . , получается большим, это основной заголовок. Если текст окружен тэгами, то он выглядит несколько меньше (подзаголовок); и так далее до | ||
Тэг применяется для разделения текста на параграфы. Позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. | align. | Возможные значения атрибута: justify, left, right, center. | |
Принудительный перевод строки. Используется для остановки в указанной точке обтекания объекта текстом и затем продолжения текста за объектом. | clear. | Возможные значения атрибута; left, right, all. |
Контейнеры. Они используются только для логического деления IITML-документа на части и никаких действий браузера нс вызывают. В элементах-контейнерах (между начальным и закрывающим тэгами) размещают другие элементы, которыми надо управлять совместно.
Контейнеры создаются с помощью тэгов div и span. С помощью тэга div создается блочный контейнер, который начинается с новой строки, и следующий за ним элемент также будет начинаться с новой строки. А с помощью тэга создается строчный элемент, который размещается в той же самой строке, что и окружающий его текст.
Основными атрибутами контейнеров являются id и class. Следует помнить, что строчные контейнеры могут включать только другие строчные контейнеры, а блочные контейнеры могут включать как строчные, так и блочные контейнеры.
Списки. Они являются одним из часто используемых способов структурирования текстов. Имеются следующие виды списков: ненумерованные (тэг.
- ) и нумерованные (тэг
- первый элемент списка
- второй элемент списка
- •
- — стандартные маркеры списков первого уровня (по умолчанию);
- •
- — маркеры в виде кругов;
- •
- — квадратные маркеры.
- • method — задает HTTP-метод отправки данных формы на сервер (Get или Post).
- • action — задает адрес ресурса сервера, которому будут передаваться данные; это может быть серверный скрипт или шаблон webстраницы; если не задан, то данные будут передаваться на тот же адрес, по которому была получена страница с данной формой.
- • maxlength — ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено;
- • size — определяет размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера;
- • maxlength — если его значение больше, чем size, браузер будет прокручивать данные в окне;
- • value — обеспечивает начальное значение поля ввода
- ).
Ненумерованный список записывается в виде последовательности:
Можно задавать любой тип маркера в произвольном месте списка. Ниже перечислены тэги с атрибутами стандартных маркеров:
Нумерованные списки создаются с помощью тэга.
. В строках таблицы обычно описываются элементы (ячейки) с данными с помощью тэгов- вместе с атрибутом type. Такие списки могут использовать в качестве маркеров обычные числа, строчные и прописные буквы, а также строчные и прописные римские цифры.
Комментарии используются для пояснения документа и нс отображаются браузерами. В HTML они начинаются с символа «» .
Для записи в wcb-страницс гипертекстовых ссылок используется тэг. В ссылке может задаваться несколько атрибутов, главным из которых является href. Простую ссылку можно записать в виде.
Пример гипертекстовой ссылки.
Значением атрибута href является URL-адрес документа, на который браузер будет выполнять переход.
Изображения включаются в web-страницу с помощью тэга , использующего обязательный атрибут src, значением которого является имя выводимого графического файла. Пример вставки изображения:
Изображения, включенные в web-страницу, могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Пользователь браузера может щелкнуть по изображению и перейти к другой странице. Для обозначения изображения как гипертекстовой метки используется тот же тэг, что и для текста, но между и вставляется тэг изображения . Тэг
также имеет несколько необязательных атрибутов: alt, align, usemap, hspace, vspace, border, width, height.
Таблицы включаются в web-страницы с помощью элемента table. В содержании данного элемента задаются строки таблицы с помощью тэга.
Состав команды.
Должность| ct>ИO | |
|---|---|
| Иванов A.П. | программист |
| Петров B.A. | проектировщик |
В браузере описание таблицы будет показываться следующим образом:
Рис. 1.7. Показ таблицы в браузере.
Таблицы рекомендуется использовать только для отображения табличных данных, а не для задания структуры web-документа. Для задания структуры документа рекомендуется использовать CSS-стили, как будет описано далее.
Формы HTML-страницы используются для ввода пользователем исходных данных и их передачи для обработай на сервер. Такие формы задаются с помощью тэга, который использует следующие основные атрибуты (например, см. рис. 1.4):
В форму вставляются элементы управления, которые показывают поля для ввода информации пользователями (например, текстовые поля, флажки, кнопки). Вид поля ввода определяется значением атрибута type. Описание типов элементов, включаемых в форму, приведено в табл. 1.4.
Таблица 1.4.
Основные элементы управления, включаемые в HTML-форму
Тип элемента | Описание | ||
text. | Используется, если необходимо ввести небольшое количество текста (одну или несколько строк). Кроме того, задается атрибут name для определения наименования переменной поля. Имеет еще три дополнительных атрибута: | ||
checkbox. | Применяется для создания флажков, у которых пользователь может задать состояние «выбран/невыбран». Должны быть заданы атрибуты name и value. В некоторых случаях необходимо инициализировать данный флажок, как уже выбранный. В этих случаях тэг должен содержать атрибут checked. | ||
radio. | Применяется в случае, когда требуется организовать выбор одного из нескольких возможных значений (альтернатив). Должны быть также указаны атрибуты name и value. | ||
image. | При щелчке мышью по изображению браузер сохраняет координаты соответствующей точки экрана. Далее он обрабатывает введенную в форму информацию. Должны быть указаны атрибуты name и src. Атрибут src содержит URI файла-источника изображения. Атрибут align является дополнительным и используется аналогично тому же атрибуту тэга | ||
password. | Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены. | ||
button. | Используется для размещения кнопок на web-странице. Имеет атрибуты name и value. | ||
File. | Элемент управления для запуска диалогового окна выбора файла. Для задания имени файла по умолчанию можно использовать атрибут value. | ||
submit. | Используется как элемент интерфейса для завершения ввода данных. Может содержать два дополнительных атрибута: name и value. | ||
reset. | Используется как элемент интерфейса для сброса всех введенных в поля формы данных. Дополнительно может содержать атрибут value, определяющий надпись на изображении кнопки. | ||
hidden. | Позволяет включить в отправляемую форму не показываемые пользователю значения атрибутов name и value. Они пересылаются между сервером и браузером так же, как и значения любых других полей. | ||
Тэг используется для создания текстового поля из нескольких строк. Он использует следующие атрибуты: cols (число колонок, содержащихся в текстовой области), name и rows (количество видимых строк текстовой области).
Тэг используют для определения списка пунктов, задаваемых тагами. Он поддерживает три необязательных атрибута: name, multiple — позволяет выбрать более чем одно значение; name — определяет наименование объекта; size — определяет число видимых пользователю пунктов списка. В тэге задаются элементы, которые могут иметь атрибут selected — для первоначального выбора значения элемента по умолчанию, и атрибут value — указывает на значение, возвращаемое формой после выбора пользователем данного пункта. Например:
Ваш выбор:
" optionvalue="Вариант 1">Вариант 1.
" option value==Вариант 2″ >Вариант 2″ /option>
" option value="Dfhbfyn 3">Вариант 3″ /option>
" option selected>Dfhbfyn 4″ /option>
" /select>