Пример 5.3. Использование keywords

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " https://www.w3.org/TR/html4/strict.dtd" >

< html>

< head>

< title> HTML < /title>

< meta name=" keywords" content=" HTML, META, метатег, тег, поисковая система" >

< meta http-equiv=" content-type" content=" text/html; charset=utf-8" >

< /head>

< body>

< p>... < /p>

< /body>

< /html>

Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.

Блочные элементы

Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

< blockquote>

Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

< div>

Тег < div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Также с помощью тега < div> можно выравнивать текст внутри этого контейнера с помощью атрибута align.

< h1>,..., < h6>

Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.

< hr>

Рисует горизонтальную линию, которая по своему виду зависит от используемых атрибутов. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

< p>

Определяет параграф (абзац) текста.

< pre>

Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег < pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.

Следующие теги не должны размещаться внутри контейнера < pre>: < big>, < img>, < small>, < sub> и < sup>.

Строчные элементы

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

< a>

Тег < a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег < a> устанавливает ссылку или якорь.

< b>

Определяет жирное начертание шрифта.

< big>

Тег < big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега < big> увеличивает текст на одну условную единицу.

< br>

Тег < br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа < p>, использование тега < br> не добавляет пустой отступ перед строкой.

< em>

Тег < em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

< i>

Устанавливает курсивное начертание шрифта.

< img>

Тег < img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег < img> в контейнер < a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=" 0" в тег < img>.

< small>

Тег < small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег < big>, но действует с точностью до наоборот.

< span>

Универсальный тег, предназначенный для определения строчного элемента внутри документа.

< strong>

Тег < strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

< sub>

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H₂O.

< sup>

Отображает шрифт в виде верхнего индекса. По своему действию похож на < sub>, но текст отображается выше базовой линии текста — м².

Разница между блочными и строчными элементами следующая.

• Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.

• Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.

Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.

Универсальные элементы

Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы.

< del>

Тег < del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере < del> как перечеркнутый.

< ins>

Тег < ins> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом < del>. Браузеры помечают содержимое контейнера < ins> подчеркиванием текста.

Теги для списков

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

< ol>

Тег < ol> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.

< ul>

Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.

< li>

Тег < li> определяет отдельный элемент списка. Внешний тег < ul> или < ol> устанавливает тип списка — маркированный или нумерованный.

< dd>, < dt>, < dl>

Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера < dl>, куда входит тег < dt> создающий термин и тег < dd> задающий определение этого термина. Закрывающий тег < /dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Теги для таблиц

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных.

< table>

Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов < tr> и < td>.

< td>

Предназначен для создания одной ячейки таблицы. Тег < td> должен размещаться внутри контейнера < tr>, который в свою очередь располагается внутри тега < table>.

< th>

Тег < th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

< tr>

Тег < tr> служит контейнером для создания строки таблицы.

Теги для фреймов

Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега < frame>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо также использовать вложенную структуру элементов, это позволяет дробить фреймы на мелкие области.

< frame>

Тег < frame> определяет свойства отдельного фрейма, на которые делится окно браузера.

< frameset>

Тег < frameset> заменяет собой элемент < body> на веб-странице и формирует структуру фреймов.

< iframe>

Тег < iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

Значения атрибутов тегов

Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Далее рассмотрим основные типы значений.

Цвет

Размер

Адрес

Цвет

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