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

Базовые теги, позволяющие описать структуру и содержание тела html документа, а, также дополнительные теги, появившиеся в версии HTML5 представлены в таблице 2.1.

Таблица 2.1.

Базовые теги HTML

Теги

Назначение

Пример

Описание результата

6 уровней заголовковот h1 до h6

<h1>заголовок 1</h1> <h2>заголовок 2</h2>

заголовок 1 заголовок 2

<p></p>

разделение текста на абзацы

<p> Это первый абзац </p> <p> Это второй абзац </p>

Это первый абзац Это второй абзац

<a></a>

вывод гипер-сылок

<a href="2.html"> Перейти на второй документ </a>

Перейти на второй документ

<img>

вывод изображений

Будет выведено изображение, находящееся в файле с именем image.gif. При отсутствии изображения появится соответствующий альтернативный текст

Начало и конец нумерованного списка

<ol>

<li>первый пункт</li>

<li>второй пункт</li>

</ol>

<ul>

<li>первый пункт</li>

<li>второй пункт</li>

</ul>

1. первый пункт

2. второй пункт

· первый пункт

· второй пункт

Начало и конец маркированного списка

Начало и конец пункта списка любого типа

Начало и конец таблицы

<tr>

<td >

1 столбец 1 строки

</td>

<td >

2 столбец 1 строки

</td>

</tr>

<tr>

Colspan используем

если нужно

объединять столбцы

</td>

</tr></table>

Начало и конец строки таблицы

Начало и конец столбца таблицы в пределах строки

Разделение страницы на блоки

<div id="header"> Header </div>

Область заголовка описывается блоком с идентификатором header, внутри которого может быть любое наполнение

В версии HTML5 появилось несколько новых тегов, которые помогают автоматически распознавать структуру документа. Вместо <div class="header"> стоит писать просто <header>. Аналогичным образом можно использовать теги <article>, <aside>, <footer>, <nav>, которые заменяют привычный <div>. Эти теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующие код. Машины или роботы не понимают <div class="header">, но обнаружив тег <header>, робот воспринимает его именно как шапку сайта или раздела.

Открывающие теги могут содержать атрибуты. С их помощью можно менять свойства объекта, которому соответствует тег. Порядок следования атрибутов в теге не важен. Разделителем атрибутов также является пробел. Атрибуты записываются внутри открывающего тега через пробел от его имени в виде отдельного ключевого слова или ключевого слова, знака “=” и параметра (значения атрибута). Атрибут меняет свойство элемента, работающее по умолчанию. Он действует от открывающего тега, в котором он задан, до закрывающего или только внутри тега, если тег не имеет парного.

Оформление документа

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

Ниже приведен пример простой страницы, размеченной с использованием блоков и встроенных стилей.

<!DOCTYPE html> <html> <head> <style> div#container { width: 73%; border: none; margin: auto; } header, footer { padding: 1em; color: white; background-color: #007196; clear: left; text-align: center; } nav { float: right; max-width: 160px; height: 134px; padding: 1em; border: solid #333 } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { padding: 1em; } </style> </head> <body> <div class="container"> <header> <h1>Заголовок страницы</h1> </header> <nav> <h1>Меню</h1> <ul> <li><a href="#">Выбор 1</a></li> <li><a href="#">Выбор 2</a></li> <li><a href="#">Выбор 3</a></li> </ul> </nav> <article> <h1>Article</h1> <p>Здесь может быть текст статьи: <img src="https://cdn.bitdegree.org/learn/pom-laptop.png" style="height: 50px;"> </p> </article> <footer> Это «подвал» страницы </footer> </div> </body> </html>

/*—стиль для блока div с идентификатором container, ширина – 73% от ширины экрана, рамка отсутствует, за счет отступа (margin auto – выравнивание блока по центру --*/ /*—стиль для header и footer – заголовок и подвал страницы. Отступ текста от края блока – 1em - текущий размер шрифта, для увеличения или уменьшения можно брать любые пропорции от текущего:2em,0.5em: clear: left - отменяет обтекание с левого края элемента, все другие элементы на этой стороне будут располагаться под текущим элементом--*/ /*—для блока меню (nav) float:right – прижимает к правому краю, остальные элементы обтекают его по левой стороне--*/ /*—стиль только для маркированного списка внутри блока nav, list-style-type: none - задает отсутствие маркеров--*/ /*—стиль только для гиперссылок внутри элементов списка внутри блока nav. Стиль ссылок задается по умолчанию--*/ <!—Начало блока документа--> <!—Начало блока заголовка --> <!—Конец блока заголовка--> <!—Начало блока меню --> <!—Начало списка пунктов меню --> <!—Конец списка пунктов меню --> <!—Конец блока меню --> <!—Начало блока статей --> <!—Конец блока статей --> <!—Начало блока подвала --> <!—Конец блока подвала --> <!—Конец блока документа-->

При просмотре этого файла браузером (если предварительно сохранить его в формате html) Вы сможете увидеть такой результат:

Рис. 2.1. Результат просмотра документа из листинга 2.1 в браузере[2]

Формы HTML

Важнейшей особенностью языка разметки web-страниц является возможность организации пользовательского интерфейса. То есть, современный сайт должен не только предоставлять пользователю актуальную, важную и удобно читаемую информацию, но и получать от него ответную реакцию. Для этого служит группа тегов, которые обычно объединяются внутри тегов <form> и </form>

Итак, тег <form> выделяет фрагмент документа как форму и определяет границы использования других тегов, размещаемых в форме. Атрибуты тега <form> определяют, какой файл или программа будут обрабатывать полученную из формы информацию, а также, каким методом будет осуществлен HTTP-запрос. Обычно это методы GET или POST (см. первый раздел).

Например:

< form method=POST action=mailto:yourname@your.email.address>

Основной тег, который может использоваться внутри формы – это тег <input></input>.

Тег <input> используют для определения области внутри формы, куда вводятся данные. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута type. Рассмотрим основные из этих типов.

Атрибут type=”text”. Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег <INPUT>, и атрибут type устанавливается в значение “text”. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут name для определения имени этого поля ввода, для дальнейшей обработки полученного из него значения. Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется maxlength, он ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. Вторым атрибутом является size, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение maxlength больше, чем size, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут value, обеспечивающий значение поля ввода по умолчанию.

<p>

ваше имя: <input name="FIO" size=35 value="Фамилия И.О.">

</p>

Результат:

Атрибут type=”checkbox” используется для создания независимых флажков. При этом указываются также атрибуты name, и value. В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <input> должен содержать атрибут checked

< p>

Язык 1:<input name="язык1" type="checkbox" value="HTML">

</p>

<p>

Язык 2:<input name="язык2" type="checkbox" value="JScript" checked >

</p>

Результат:

Атрибут type=”radio” применяют, когда требуется организовать выбор одного из нескольких возможных значений. Для этого в теге <input> должны быть указаны атрибуты name и value. Но атрибут name должен содержать одно и тоже значение для всех вариантов выбора.

< p>

Пол мужской: <input name="пол" type="radio" value="мужской">

</p>

<p>

Пол женский: <input name="пол" type="radio" value="женский">

</p>

Результат:

Атрибут type=”image”. используют, если пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. В этом случае нужно использовать атрибуты name и src. Name указывает наименование поля ввода формы. Атрибут src содержит URI файла-источника изображения.

<br>выберите точку<input type="image" name="point" src="image.gif">

Атрибут type=”password”. Применяют для ввода пароля. Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.

<p>

введите логин:<input name="login">

</p>

<p>

Введите пароль:<input type="password" name="pass">

</p>

Результат:

Атрибут type= " reset ". Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей.

Результат:

Атрибут type="submit" используется для организации подтверждения отправки формы. Браузер выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Важно в этом случае использовать атрибут name, так как с событием нажатия на этот элемент часто связывают начало программной обработки данных формы.

<p>

</p>

Далее рассмотрим еще несколько тегов, которые могут входить в блок формы.

Тег <textarea>.

В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег <textarea> для создания текстового поля из нескольких строк. Данный тег использует три атрибута: cols, name и rows. Атрибут cols указывает (число символов) число колонок, содержащихся в текстовой области, атрибут name определяет наименование поля, атрибут rows задает количество видимых строк текстовой области.

<p>

Введите сюда Ваш отзыв:

</textarea>

</p>

Результат:

Тег <select>.

Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег select. Для определения списка пунктов используют тег <option>. Тег <select> поддерживает три необязательных атрибута: multiple, name и size. Атрибут multiple позволяет выбрать более чем одно наименование из списка, атрибут name определяет наименование объекта, атрибут size определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута size=1, то браузер выводит на экран список в виде выпадающего меню. В случае size > 1 браузер представляет на экране обычный список.

Тег <option> используется только внутри тега <select>. Он поддерживает два дополнительных атрибута: selected и value. Атрибут selected используется для первоначального выбора значения элемента по умолчанию. атрибут value указывает на значение, возвращаемое формой после выбора пользователем данного пункта.

<p>выбор:

<option value="вариант 1">вариант 1</option>

<option value="вариант 2">вариант 2</option>

<option value="вариант 3"> вариант 3</option>

<option value="вариант 4" selected>вариант 4</option>

</select>

</p>

Результат: