Использование языка HTML для описания cтруктуры веб-страниц
В предыдущем разделе был приведен пример структурирования документа MS Word, используемого для упрощения восприятия текста. Подобное использование структуры принято и при верстке веб-страниц.
В окне браузера вы видите документ с абсолютно таким же содержимым, как и на скриншоте программы Word предыдущей главы. Для описания структуры веб-документа необходимо добавить немного кода к тексту, который вы хотите отобразить на экране.
Ниже на странице приведен код на языке HTML. Не волнуйтесь по поводу того, что вы не понимаете его назначения. Сразу после этого мы подробно знакомить вас с ним. Обратите внимание, что HTML-теги выделены синим цветом, а их содержание, выводимый на экран, — черным.
HTML
<html>
<body>
<h1> Это основной заголовок </h1>
<p> Этот текст может быть введением к тексту, помещенному далее на странице. В случае если текст достаточно длинный, он может быть разделен на несколько разделов с подзаголовками. </p>
<h2> Это подзаголовок </h2>
<p> Часто при написании длинных статей используют подзаголовки, помогающие читателям следить за структурой всего написанного. Иногда используются и подзаголовки более низкого уровня. </p>
<h2> Еще один подзаголовок </h2>
<p> Вот еще один пример подзаголовка. </p>
</body>
</html>HTML-код (выделен синим цветом) состоит из символов, помещенных между двух угловых скобок. Все это называется HTML-элементами. Элементы, как правило, состоят из двух тегов: открывающего и закрывающего. (Внутри закрывающего тега также имеется косая черта, иначе называемая слеш.) Каждый HTML-элемент сообщает браузеру какую-либо информацию о тексте, помещенном между открывающим и закрывающим тегами.
Теперь давайте более детально рассмотрим код, с которым вы познакомились. Этот код содержит несколько различных элементов. У каждого из них имеются открывающий и закрывающий теги.
Элементы аналогичны контейнерам. Они обобщают какую-либо информацию о тексте, расположенном между открывающим и закрывающим тегами.
Термины «тег» и «элемент» зачастую используются как синонимы. Однако, строго говоря, элемент включает в себя и открывающий тег, и закрывающий, а также любой контент, расположенный между ними.
Символы в скобках означают, для каких целей можно использовать данный тег. Например, тегом <р> (от англ. paragraph — абзац.) обозначается абзац текста.
Отличием закрывающего тега является наличие слеша / после символа <.
Атрибуты предоставляют дополнительную информацию о содержимом HTML-элементов. Они располагаются в открывающем теге элемента и состоят из двухчастен: имени и значения, разделенных знаком «равно».
Язык HTML.5 допускает написание значений атрибутов заглавными буквами без кавычек, но делать это не рекомендуется.
Имя атрибута определяет, какого рода дополнительную информацию о содержимом элемента вы намереваетесь сообщить, в то время как значение — это собственно информация или настройка элемента, изменяемая атрибутом. Значение следует заключить в двойные кавычки. У разных атрибутов могут быть различные значения.
Выше в качестве примера приводился атрибут lang, используемый, для обозначения языка текста данного элемента. Значение атрибута из примера устанавливает русский язык.
Большинство атрибутов могут быть использованы только с определенными элементами. Несмотря на это некоторые атрибуты (например, lang) допускается ставить в любом элементе.
Большинство значений атрибутов могут быть либо предопределенными, либо установленными в соответствии с принятыми стандартами. По мере изучения атрибутов вы также узнаете и о доступных для них значениях. Так, значением атрибута lang может быть сокращенное обозначение языка содержимого элемента. Браузеры должны распознавать это сокращение.
| Cтруктурирование документов Microsoft Word | Элементы body, head и title |