Древообразная структура HTML — КиберПедия 

Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...

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

Древообразная структура HTML

2021-01-31 112
Древообразная структура HTML 0.00 из 5.00 0 оценок
Заказать работу

Прежде чем мы начнем детально, кирпичик за кирпичиком, разбирать тонкости HTML, я позволю себе немного отклониться в сторону, и рассмотреть базовые концепции не менее известного языка разметки – XML. Причина этого проста. XML появился позже и, стало быть, он больше соответствует требованиям современного мира. Нам будет проще понять тенденцию развития HTML, который, между прочим, сейчас от XML практически неотличим. HTML даже имеет свое новое имя, чтобы подчеркнуть степень своего родства с XML – это XHTML.

Основная идея, которую хотелось бы рассмотреть, это то, что XML, как и HTML – это дерево. Они имеют древообразную структуру с одним корневым элементом и множеством других, ответвляющихся от него. Точно так же как дерево имеет корень, ствол и листья – веб-документ имеет свои различные типы узлов – элементы, текстовые узлы, узлы комментариев и другие. Рассмотрим их более детально.

Ниже приведен список типов узлов XML.

1. Document – Документ

2. DocumentFragment – Фрагмент Документа

3. DocumentType – Тип Документа

4. ProcessingInstruction – Исполняемая Инструкция

5. EntityReference – Ссылка на сущность

6. Element – Элемент

7. Attr – Атрибут

8. Text – Текст

9. CDATASection – Необрабатываемая Секция

10. Comment – Комментарий

11. Entity – Сущность

12. Notation – Нотация

Всего существует 12 типов узлов. Мы не будем рассматривать их все, а ограничимся только лишь самыми значимыми из них – это Document, DocumentType, Element, Attr, Text, Comment и EntityReference. Рассмотрим примеры этих узлов.

Document – это узел, который объединяет в себе все остальные узлы XML-дерева. Он является корневым узлом документа. Узел Document не может содержать внутри себя другой узел Document, и он никак не выражается символьным представлением в XML и HTML, в отличие от остальных узлов. Другими словами, не смотря на то, что этот узел вполне реален, и является основой всех остальных узлов, проявляет он себя неявно, в виде логической группы других узлов, о которых мы сейчас и поговорим.

Рассмотрим пример самого простого узла типа Element.

Узел типа Element

<div />

div – это имя элемента. Обратите внимание, что, например, div и DIV – это разные элементы, точно также как Div, DiV и т.д. Согласно спецификации XML, имя элемента чувствительно к регистру символов. Как показано в примере, XML элемент может быть представлен в виде его имени, выделенного угловыми скобками. Косая черта перед закрывающей скобкой означает, что это одиночный элемент, который не содержит дочерние узлы. Этот же элемент может быть представлен в следующем виде:

Узел типа Element

<div></div>

Такая запись элемента означает то же самое, что и предыдущий пример, с той лишь разницей, что здесь явно присутствует как открывающая составляющая элемента <div> так и закрывающая – </div>. Согласно спецификации XML все элементы документа должны быть закрыты, в то время как спецификация HTML (но не XHTML!) допускает существование незакрытых элементов.

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

Неправильный элемент

<div></DIV>

Элемент может содержать внутри себя другие узлы, как например текст или другие элементы. Пример элемента, внутри которого содержится текст, приведен ниже.

Узел типа Text внутри элемента div

<div>Lorem ipsum</div>

Здесь «Lorem ipsum*» это текст, а точнее текстовый узел, или узел типа Text. Текстовый узел в XML и HTML выражается в виде самой обычной строки текста.

Рассмотрим следующий пример:

Элемент и атрибут

<div class=”box”>Lorem ipsum</div>

В этом примере, помимо дочернего текстового узла, элемент div также имеет атрибут.

class – это имя атрибута, а «box» – его значение.

По аналогии с именем элемента, имя атрибута также чувствительно к регистру символов. Значение атрибута всегда приводится в кавычках после знака равенства. Таковы требования XML. В HTML знаки кавычек были необязательны. Однако это правило не относится к XHTML документам, где символы кавычек обязательны, как и в XML.

Напомню, что XHTML полностью подчиняется правилам XML. Следующий пример считается неправильным, потому, что в нем значение атрибута не взято в кавычки:

Неправильный атрибут

<div class=box>Lorem ipsum</div>

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

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

Иерархия узлов

<div class=”box”><strong>Lorem ipsum</strong></div>

В этом примере четко отображена зависимость элементов между собой. Элемент div имеет атрибут class и содержит внутри себя элемент strong, который в свою очередь имеет в своем составе текстовый узел со значением «Lorem ipsum».

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

Неправильная структура узлов

<div class=”box”><strong>Lorem ipsum</div></strong>

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

Элементы, атрибуты и текст – самые часто встречаемые узлы в XML и XHTML документах. Теперь давайте рассмотрим вспомогательные типы узлов: DocumentType, Comment и EntityReference. Самый простой из них – это комментарий (Comment). Его предназначение очевидно. Это узел, который несет дополнительную информацию о документе и его содержимом. Пример узла комментария приведен ниже:

Узел типа Comment

<!-- Это узел типа Comment -->

Узел комментария начинается с символов «<!--» и заканчивается «-->». Все, что находится внутри этой комбинации символов, является значением этого узла.

Узел EntityReference мы не будем рассматривать во всех его подробностях, а остановимся лишь на тех аспектах, которые непосредственно связаны с XHTML. Все такие узлы начинаются со знака «&» и заканчиваются символом «;». Примеры таких узлов приведены ниже:

Узлы типа EntityReference

&amp;

&lt;

&nbsp;

&copy;

&#160;

&#x0d;

Для простоты такие узлы следует рассматривать исключительно с точки зрения заменяемых объектов. С их помощью, например, выводятся различные специальные символы, вроде знака авторского права «©» – &copy; или амперсанда «&» – &amp;. Спецификация XML определяет пять значений EntityReference – &amp;,&lt;, &gt;, &quot; и &apos;, которые соответствуют символам «&», «<», «>», «”» и «’». В свою очередь, спецификация XHTML дополняет этот список такими значениями как &nbsp; (неразрываемый символ пробела), &copy; (знак авторского права) и множеством других. Узлы EntityReference тесно связаны с текстовыми узлами. Ниже приведен пример использования такого узла в фрагменте XHTML-кода:

Фрагмент XHTML

<p>&copy; 2007 Company Name</p>

В браузере подобный фрагмент будет отображен следующим образом:

Пример отображения узла EntityReference с текстовым узлом

© 2007 Company Name

Вернемся к древообразной структуре документа. Как мы уже знаем, корневым узлом XML-дерева является Document. Согласно спецификации XML, его дочерними элементами могут быть такие узлы как DocumentType, Comment, ProcessingInstruction и Element. При этом, Element в данном случае, может быть только один, и называется он корневым элементом документа. Другими словами, может существовать только один дочерний узел типа Element у узла типа Document. Именно с корневого элемента удобнее всего рассматривать древообразную структуру документа, а не с узла Document. Рассмотрим пример простейшего XML-документа:

Простейший XML-документ

<root />

Здесь мы имеем один элемент root в документе, что не противоречит правилам XML.

Для того чтобы было понятно, что это именно XML-документ, а не произвольный текстовый файл, в начале такого документа принято добавлять заголовок следующего вида:

XML-документ с заголовком

<?xml version=”1.0”?>

<root />

Странная запись перед элементом root является ни чем иным как узлом типа ProcessingInstruction, который говорит о том, что мы имеем дело с XML-документом, отвечающим спецификации XML версии 1.0. Подробное рассмотрение узлов ProcessingInstruction выходит за рамки данной книги, поэтому мы не будем на этом останавливаться. Достаточно сказать, что такие узлы начинаются с комбинации символов «<?» и заканчиваются «?>».

Добавим комментарий и несколько вложенных узлов к нашему документу:

Пример XML-документа

<?xml version=”1.0”?>

<!-- Простейший XML-документ -->

<root>

<first-element>Первый текстовый фрагмент</first-element>

<second-element>Второй текстовый фрагмент</second-element>

</root>

Документ несколько преобразился. Теперь он имеет узел ProcessingInstruction, узел Comment, корневой элемент и несколько вложенных элементов и текстовых узлов. Согласно спецификации XML, количество вложенных внутри корневого элемента узлов можно увеличивать до бесконечности. А их последовательность также может быть произвольной. Но нужен ли кому-нибудь подобный беспорядок? Ведь любой документ, будь то веб-документ или любой другой документ, с которым нам обычно приходится иметь дело, всегда должен отвечать каким-то правилам. Например, после заголовка раздела книги не может идти ее аннотация, а после оглавления не может идти заключение. Сходным образом каждый веб-документ тоже подчиняется определенным правилам. Множество наборов таких правил определяет множество разных типов документов. Такой набор правил получил название DTD, что является аббревиатурой от Document Type Definition. Более подробно об этом термине мы поговорим в следующем разделе, который посвящен ознакомлению с языком описания схемы документа. Сейчас же рассмотрим следующий очень важный узел XML-дерева.

Для того чтобы отличать один тип документа от другого, существует специальный узел типа DocumentType. Его запись весьма специфична. Ниже приведены допустимые конструкции таких узлов:

Конструкции узлов DocumentType

<!DOCTYPE имя_корневого_элемента [DTD]>

<!DOCTYPE имя_корневого_элемента SYSTEM URL>

<!DOCTYPE имя_корневого_элемента SYSTEM URL [DTD]>

<!DOCTYPE имя_корневого_элемента PUBLIC идентификатор URL>

<!DOCTYPE имя_корневого_элемента PUBLIC идентификатор URL [DTD]>

Здесь URL – это путь на внешний файл DTD, а DTD – непосредственное описание правил для документа, выделенное квадратными скобками.

Давайте добавим узел DocumentType в наш XML-документ:

Пример XML-документа с объявлением DOCTYPE

<?xml version=”1.0”?>

<!-- Простейший XML-документ -->

<!DOCTYPE root SYSTEM ”example.dtd”>

<root>

<first-element>Первый текстовый фрагмент</first-element>

<second-element>Второй текстовый фрагмент</second-element>

</root>

Под такой записью следует понимать, что данный XML-документ, соответствует (или точнее должен соответствовать, но об этом позже) набору правил, описанных в некотором файле example.dtd.

XHTML является подмножеством XML. XHTML – это XML документ, который соответствует некоторому набору правил описанных при помощи DTD.

Корневым элементом XHTML всегда является элемент с именем html, потому, что это описано в его DTD. DTD определяет структуру этого документа. Это было также сделано по причине максимальной поддержки совместимости XHTML с HTML, у которого html также является корневым элементом. Дело в том, что XHTML это на самом деле HTML перекочевавший в сторону XML. Он содержит в себе практически все, чем обладал HTML, но делает это в соответствии с более строгими правилами XML, среди которых уже рассмотренные нами обязательное заключение значений атрибутов в кавычки, чувствительность имен к регистру символов и другие.

Спецификация XHTML версии 1.0 предусматривает три вида документов. Это Strict, Transitional и Frameset. Каждому из этих типов соответствует свой DTD и каждый из них имеет свои особенности и свое предназначение.

Strict обычно используется для получения наиболее «прозрачной» и понятной структуры документа, не загрязняя его лишними тегами и атрибутами, относящимися к отображению. Предполагается, что все нужные для страницы правила отображения и позиционирования элементов должны быть описаны в CSS (Cascading Style Sheet – каскадная таблица стилей), в то время как в документе фигурирует только его логическая структура. Об этом мы еще будем говорить более подробно.

Transitional – в настоящий момент наиболее часто встречаемый вид XHTML. Идея его создания была в сохранении многих свойств HTML, а также в поддержке старых браузеров, которые понимают не все свойства CSS. Это своего рода переходный вид старого типа HTML-документов в новый. Со временем этот вид документов наверняка будет вытеснен документами Strict, или более новыми версиями XHTML.

Что касается Frameset, то из названия должно быть понятно, что этот вид XHTML предназначен для описания документов, содержащих набор фреймов – элементов frameset и frame, которые разделяют страницу на некие прямоугольные области (фреймы), внутри каждой из которых живет отдельный документ любого типа. По умолчанию, окно браузера можно считать одним фреймом, поскольку в него может быть загружен один (и только один) документ.

Объявления DOCTYPE для вышеперечисленных типов XHTML-документов приведены ниже.

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Если схематически представить древообразную структуру документа, точнее его часть, например для XHTML 1.0 Strict и XHTML 1.0 Frameset, то мы получим что-то наподобие таких вот рисунков, где пунктиром обозначены необязательные элементы:

Как видно из схемы, XHTML документ имеет один корневой элемент – html. Далее, в зависимости от типа документа, этот элемент содержит либо элементы head и body, либо элементы head и frameset. В свою очередь, элемент head имеет обязательный элемент title и необязательные элементы meta, style, и т.д. Структура документа должна строго соответствовать его типу, объявленному при помощи DOCTYPE.

Как мы уже говорили, правила определяющие структуру документа, описаны в DTD.

Понятие DTD

DTD (аббревиатура от Document Type Definition) – это язык описания структуры XML-документа. По своей сути этот язык предельно прост. Он описывает то, какие элементы могут входить в состав данного документа, какие из них могут иметь дочерние узлы, а какие нет, какие атрибуты может иметь тот или иной элемент и т.д. Детальное изучение DTD на данном этапе обучения не имеет смысла, достаточно будет поверхностно ознакомиться с этим языком.

Рассмотрим некоторые фрагменты DTD из http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd, который является сводом правил для документов XHTML 1.0 Strict.

Фрагмент DTD из xhtml1-strict.dtd

<!ELEMENT html (head, body)>

Этот фрагмент DTD говорит о том, что внутри элемента html должен быть один, и только один, элемент head и один элемент body, причем сначала должен идти head, а затем body.

Фрагмент DTD из xhtml1-strict.dtd

<!ELEMENT title (#PCDATA)>

Эта запись говорит, что внутри элемента title может быть только текст, и ничего больше. Никакие другие элементы внутри него не допускаются.

Фрагмент DTD из xhtml1-strict.dtd

<!ENTITY % heading "h1|h2|h3|h4|h5|h6">

<!ENTITY % lists "ul | ol | dl">

<!ENTITY % blocktext "pre | hr | blockquote | address">

<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

<!ENTITY % misc.inline "ins | del | script">

<!ENTITY % misc "noscript | %misc.inline;">

<!ENTITY % form.content "(%block; | %misc;)*">

<!ELEMENT form %form.content;>

А, например, этот фрагмент, или точнее несколько фрагментов, говорит о том, что элемент form не может иметь непосредственно дочерние элементы input, select, textarea и label*.

Необязательно понимать синтаксис DTD, важно понять его смысл. Думаю нетрудно оценить его роль и важность в создании веб-документов.

Наверняка сейчас у многих читателей возникает вопрос – а кто следит за соответствием того или иного документа его типу? Ответ вас не удивит – все тот же WWW-консорциум. Только он не следит, а помогает сделать документ правильным, предоставляя разработчикам средство проверки документов на соответствие их спецификации. Такое средство среди разработчиков называется «валидатором», от англ. valid, что означает «правильный», соответствующий своему типу. Наиболее известный онлайн-валидатор HTML-кода находится по адресу http://validator.w3.org

По некоторым причинам, в числе которых отсутствие типизации узлов и отличный от XML синтаксис, DTD постепенно уходит в прошлое, вытесняемый новым языком описания структуры документов. Его альтернативой с более широкими возможностями является XML Schema, который появился несколько позже и который имеет в своем арсенале более мощные средства определения типа документов. Его мы рассматривать не будем.

Объектная модель документа

Все, что мы рассмотрели о древообразной структуре XML и HTML до настоящего момента, именуется объектной моделью документа – Document Object Model (DOM).

Кроме описания логической структуры объектная модель документа также предоставляет объектно-ориентированный, платформенно-независимый программный интерфейс – API (Application Programming Interface), который позволяет программно управлять структурой, содержанием и отображением HTML-документов.

Изначально различные браузеры имели собственную модель DOM, не совместимую с остальными. Для того чтобы обеспечить взаимную и обратную совместимость, консорциум W3C классифицировал эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в одну общую группу, под названием W3C DOM.

Как вы уже наверняка заметили, каждый узел дерева имеет свой тип, имя и значение. Тип есть у всех узлов, а вот имя или значение для некоторых типов узлов не имеет смысла. Какое имя должен иметь текстовый узел? Или какое значение должно быть у элемента? Чтобы частично решить эту проблему, W3C предложили использовать предопределенные и постоянные имена для узлов типа Text, Comment, Document, DocumentFragment и CDATASection. Например, именем любого текстового узла является «#text», а любого комментария – «#comment». Что касается значений, то они для некоторых узлов остаются неопределенными, со значением null. Ниже приведена таблица всех двенадцати типов узлов, их имен и значений.

Таблица 1 – Типы узлов DOM, их имена и значения

Тип узла Имя узла Значение узла
Document #document null
DocumentFragment #document fragment null
DocumentType Имя DOCTYPE null
EntityReference Имя ссылки на сущность null
Element Имя элемента null
Attr Имя атрибута Значение атрибута
ProcessingInstruction Цель инструкции Содержимое узла
Comment #comment Текст комментария
Text #text Содержимое узла
CDATASection #cdata-section Содержимое узла
Entity Имя сущности null
Notation Имя нотации null

 

Программный интерфейс DOM представляет собой предопределенный набор объектов, их свойств и методов. Например, в JavaScript, объектом, который соответствует узлу типа документ, является document. Каждый объект узла имеет свойства nodeType, nodeName и nodeValue, с помощью которых можно узнать какого типа является данный узел, а также каково его имя и значение, соответственно. Манипулируя свойствами объектов-узлов можно не только определять их значения, но и изменять их. Причем каждое такое действие моментально повлияет на отображение этого объекта в браузере. Подобные манипуляции с объектной моделью документа также имеют название DHTML, сокращенно от Dynamic HTML.

Подводя итог вышесказанному, можно сделать вывод, что существует документ, структура которого подобна дереву. Это дерево состоит из узлов, которые взаимосвязаны между собой иерархической структурой. Структура дерева подчиняется некоторым правилам согласно типу документа. Таково логическое представление HTML. С другой стороны об HTML мы знаем как о некотором текстовом документе, содержащем смысловое наполнение и разметку в виде тегов. Возникает вопрос, каким же образом осуществляется переход между одной моделью в другую? Ответ состоит как минимум из двух утверждений. Во-первых, для веб-разработчика обе модели должны быть единым целым. Такой переход от одного к другому должен постоянно работать в сознании человека, работающего с HTML. Необходимо понимать, что HTML в виде текста и разметки это всего лишь его представление, проявление его логической древообразной структуры в структуру текстового файла. Во-вторых, существует программный переход от текстового представления HTML в его двойник – DOM, в виде структуры объектов. Такой переход делается каждый раз браузером, когда тот пытается обработать полученный документ и отобразить его. Этот процесс преобразования называется parsing. Существует и обратный переход от древообразной логической структуры документа в его текстовый эквивалент. Такое, например, происходит каждый раз при получении свойства innerHTML у элемента, только в этом случае мы видим не весь документ, а только его часть. Аналогичный процесс происходит при попытке сохранить на диске загруженный документ браузером Internet Explorer.

После того, как браузер обработал текстовый HTML-документ и построил DOM, он его отображает на экране. Однако не все узлы дерева имеют свое визуальное представление. Такие узлы как, например, Comment, не отображаются и отображаться не должны. Те же правила работают для узлов Document, DocumentType и для большинства узлов типа Attr. Что же касается Element, EntityReference и Text, то они могут отображаться в самых немыслимых формах, в зависимости от примененных к ним свойств отображения или так называемых стилей. Эти свойства отображения описываются при помощи CSS, и могут фигурировать как во внешнем CSS-файле, так и внутри HTML-документа в отдельной секции стилей или в качестве значения атрибута style. Согласно спецификациям HTML 4.01 и XHTML 1.0 Transitional существуют также специальные атрибуты, отвечающие исключительно за отображение элемента и его содержимого.

Сейчас мы подошли к очень серьезному вопросу – о границе разделения между содержанием HTML-документа и его отображением. Этот вопрос является камнем преткновения HTML-документов старого типа. Давайте рассмотрим эту тему более подробно.

Содержание и отображение

Для большинства людей вид документа, включая используемые в нем цвета, шрифты, отступы и пр. – является не менее значимым, чем текстовое содержание документа. Однако, как уже было сказано в самом начале этой главы, HTML должен отражать только семантическую структуру документа, и такой подход не предполагает включение в него какой бы то ни было информации об отображении. Напротив, все, что касается форматирования и отображения должно быть вынесено во вне, т.е. во внешний CSS-файл. HTML-код должен быть максимально «прозрачен» по своему содержанию, и не должен содержать элементы и атрибуты, ответственные за стиль отображения. Все это обусловлено требованиями спецификаций W3C, а также необходимостью соответствия стандартам доступности (accessibility).

С точки зрения семантики, главной целью HTML является необходимость отделить одни смысловые элементы от других, например, отделить заголовок от параграфа, гиперссылку от изображения. Помимо этого теги должны описывать характер содержащейся в них информации. Они несут в себе метаданные, т.е. информацию об информации. Значение одного и того же текстового фрагмента может быть иным в зависимости от того, какими тегами этот текст выделен. Например, текст внутри тега заголовка h1 и тот же текст внутри тега p будут иметь совершенно различный смысл. В первом случае это заголовок, а во втором – текст параграфа. Используя метаданные, любой человек, знающий HTML, сможет без труда определить, где в документе заголовок, где параграф, где элемент списка, а где ссылка на другой документ. И это вне зависимости от того, на каком языке этот документ составлен! И раз уж это настолько просто и очевидно, тоже самое сможет сделать и поисковый робот, а это, как уже обсуждалось выше, одно из немаловажных свойств современного HTML-кода.

Говоря об отображении, следует подчеркнуть, что практически каждый элемент имеет свой стиль отображения по умолчанию, который более-менее одинаков в различных браузерах. Например, элемент заголовка h1 обычно отображается крупным жирным шрифтом. Элемент strong – жирный шрифт нормального размера, а em – это курсив. Элемент a (гиперссылка) – как правило, это синий подчеркнутый текст. Помимо этого элементы также делятся на строчные и блочные. Они также могут характеризоваться наличием картинки фона, толщиной и цветом рамки, внутренними и внешними отступами, относительным или абсолютным позиционированием и т.д.

Любые свойства отображения элементов могут быть переопределены при помощи CSS. Это может быть сделано таким образом, что одни элементы становятся похожими на другие, приобретая самые различные формы. CSS-стили применимы к любому элементу, кроме элементов, которые не отображаются. К неотображаемым элементам относятся элементы head, meta, link, script, style, и другие. Некоторые элементы, как например ul, li и table, в дополнение к общим свойствам также имеют свои специфические, характерные только для них свойства.

С точки зрения CSS, каждый отображаемый элемент – это кирпичик, которому можно придать любую форму для того, чтобы он вписался в общий фасад строения документа. И это вне зависимости от того, какую смысловую нагрузку несет в себе тот или иной элемент. Визуальное пространство дизайна весьма обширно, и оно далеко не всегда созвучно строгой семантике HTML-кода внутри. Поэтому, отображение документа и его внутренняя структура – это две стороны одной медали. Вместе они составляют единое целое.

Теперь, несложно догадаться, что именно к CSS прилагаются основные усилия веб-разработчика при создании веб-страниц. Именно от CSS зависит выполнение основной задачи – правильное отображение документа в различных браузерах. В процессе разработки документа CSS-код становится все более сложным, в то время как HTML-код остается предельно простым.

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

Рассмотрим пример. Зачастую, при перечислении табличных данных следует поочередным образом подсвечивать строки для того, чтобы информация одной строки не сливалась с информацией другой строки. HTML позволяет определить цвет фона для строки таблицы при помощи атрибута bgcolor. Используя этот атрибут, получаем следующий фрагмент кода:

Определение цвета фона для строк таблицы с помощью атрибута bgcolor

<table>

<tr bgcolor="#FFFFEE">

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr bgcolor="#FFFFEE">

<td>cell 1</td>

<td>cell 2</td>

</tr>

...

</table>

Элемент table определяет таблицу. Элемент tr – это строка таблицы, и, соответственно, td – ячейка таблицы, в которой обычно находятся табличные данные. Наличие атрибута bgcolor в строке, означает, что вся строка будет подсвечена цветом, заданным в качестве значения этого атрибута.

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

И наконец, цвет фона строки, т.е. нечто, касающееся отображения, присутствует в HTML-коде страницы и противоречит современным требованиям документа. Для поисковых систем запись bgcolor=”#FFFFEE” не несет никакой смысловой нагрузки, для них это «мусор», информация, не имеющая никакой пользы.

Для того чтобы исправить ситуацию, информацию об отображении элемента следует вынести в CSS.

Правильная запись для подсветки строк таблицы

<table>

<tr class="odd">

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr class="odd">

<td>cell 1</td>

<td>cell 2</td>

</tr>

...

</table>

CSS с определением цвета фона для строки таблицы

tr.odd { background: #FFFFEE; }

Значение CSS свойства background, указанное после двоеточия – это и есть цвет подсветки. Запись tr.odd означает, что перечисленные свойства отображения будут применены ко всем элементам tr, у которых значение атрибута class равно «odd». В терминах CSS, эта запись называется селектором, а odd – классом элемента.

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

CSS с определением стилей для строки таблицы

tr.odd {

background: #FFFFEE;

color: #B60000;

}

Нужный цвет был добавлен при помощи свойства отображения CSS – color.

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

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

На смену таблицам пришли новые стандарты CSS и новые методы оптимизации HTML-кода для поисковых систем. Альтернативой ячейкам таблицы, как методу позиционирования элементов, сейчас служат элементы div, или любые другие элементы, в сочетании со свойствами форматирования CSS. CSS обладает набором средств, позволяющих манипулировать позицией элемента, достаточным для того, чтобы не использовать таблицы. Как следствие, различают так называемую «табличную» верстку, т.е. верстку с применением элемента table, и «бестабличную» – то есть верстка без применения элемента table. Очевидно, что бестабличная верстка имеет ряд преимуществ по сравнению с табличной, поскольку обладает всеми качествами, присущими современным веб-документам – это простота, доступность и гибкость при редактировании.

Возвращаясь к теме содержания и отображения, рассмотрим следующий пример. Допустим, у нас есть запись, которая повествует о некоей важной информации:

Фрагмент отображения выделенного текста

<strong>Некая важная информация</strong>

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

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

Фрагмент отображения текста красным цветом при помощи тега font

<strong><font color=”red”>Некая важная информация</font></strong>

На первый взгляд все отлично. Но по опыту предыдущего примера можно сказать, что здесь мы опять столкнулись с проблемой дальнейшего редактирования документа. И это еще не все. Подумайте, какую смысловую нагрузку несет в себе тег font, если его непосредственной задачей является изменение свойств шрифта? Правильно, с точки зрения семантики он смысла не несет, в отличие от strong. Именно поэтому тег font был запрещен консорциумом W3C в его последних спецификациях.

Альтернативным решением может послужить применение атрибута style. Этот атрибут позволяет задавать свойства отображения в HTML-коде непосредственно для элемента.

Фрагмент отображения текста красным цветом при помощи атрибута style

<strong style=”color:red”>Некая важная информация</strong>

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

Свойства отображения, заданные при помощи атрибута style имеют самый высокий приоритет, по сравнению со стилями, описанными в CSS, а также атрибутами характеризующими стиль элемента, такими как, например, bgcolor. Как следствие, свойство color:red будет невозможно переопределить во внешнем CSS-файле. То есть, если мы захотим изменить цвет отображаемого текста на какой-либо другой, то это можно будет сделать только непосредственно в HTML-коде, изменив значение атрибута style. Кроме этого, такая запись не несет семантической нагрузки и относится непосредственно к отображению, а не семантике документа.

В следующем примере мы попытаемся исправить ситуацию, соблюдая современные требования.

Фрагмент отображения текста красным цветом при помощи класса CSS

<strong class=”warning”>Некая важная информация</strong>

Фрагмент CSS

.warning {color:#f00}

Мы наконец-то вынесли все, что касается отображения в CSS, определив для этого класс warning. Да и имя класса выбрано в соответствии со смысловой нагрузкой того, к чему он относится. Он не назван «red» или «redtext», а именно «warning». Этим мы внесли дополнительный смысл в этот фрагмент HTML-кода. Теперь мы видим не просто абстрактный текст красного цвета, а именно предупреждение. И, разумеется, в дальнейшем у нас не возникнет проблем с изменениями стилей данного текста, аналогично тому, как это показано в первом примере.

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

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

Пример современного HTML

Чтобы полностью понять предоставленный здесь пример HTML-страницы, вам нужно обзавестись (если вы этого еще не сделали) несколькими версиями современных браузеров. Для этого подойдут браузеры Internet Explorer 6 и выше, последние версии браузеров Mozilla Firefox, Opera и Safari (этот браузер доступен только для Mac). Любые другие браузеры, которые поддерживают современные стандарты W3C тоже подойдут. Какое-нибудь мобильное устройство с доступом в Интернет и браузером также будет весьма полезным, например мобильный телефон или карманный компьютер.

Запустите один из перечисленных браузеров и откройте ссылку, приведенную ниже.

<Ссылка на пример современной HTML -страницы>

Если вы все сделали правильно, то вашему взору предстала страница, которую мы попытаемся исследовать.

То, что вы видите, это результат одновременной работы HTML и CSS. Откройте эту же ссылку в других бра


Поделиться с друзьями:

Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

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

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



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.205 с.