Путеводитель по строгому HTML 4.01

Лекция 4 ( продолжение )

Соответствие стандартам

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

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

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

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

Таким образом, нужно заранее предупреждать браузер о том, какую версию HTML вы используете.

Для этого нужно добавить одну строку в самом верху вашего HTML-файла. Она называется определением типа документа.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

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

Задав строку вверху вашего документа, то есть определив тип документа, вы говорите браузеру, что пишите на HTML 4.01. Это хорошо, потому что браузер будет работать по правилам верстки и отображения для HTML 4.01 и не будет использовать режим обратной совместимости.

Если вы сообщаете браузеру, что используете стандарт HTML 4.01, а на самом деле его не придерживаетесь, то браузер поймет, что вы пишите не на HTML 4.01, и вернется к режиму обратной совместимости. У вас снова появятся проблемы, связанные с тем, что различные браузеры будут по-разному показывать ваши веб-страницы. Единственный способ получить предсказуемый результат – сказать браузеру, что вы используете HTML 4.01 и на самом деле его использовать.

Для того чтобы узнать, что вы не допускаете ошибок при написании вашего кода, нужно его проверить с помощью бесплатной сервисной программы, которая называется валидатором. Программу предоставляет Консорциум Всемирной паутины (W3C) – та же организация, которая предложила и ввести стандарты.

Работа программы заключается в следующем: сначала определяется тип документа, а затем на предмет корректности и отсутствия ошибок проверяется HTML-код. При этом также проверяется правильность названий тегов, их вложенности. Кроме того, программа отслеживает, чтобы ваши строчные элементы находились внутри блочных. (со с.256).

W3C-валидатор находится по ссылке http://validator.w3.org

Существует три способа проверки вашего HTML

1) Если страница находится в Сети, то в разделе Validate by URL вы можете просто напечатать URL-адрес, нажать кнопку Check, и сервисная программа сама найдет ваш код и проверит его.

2) В разделе Validate by File Upload вы можете загрузить файл с вашего компьютера на удаленный (нажав кнопку Choose file или Browse), и сервисная программа проверит его.

3) В разделе Validate by Direct Input вы можете скопировать свой код и вставить его в приведенное окно. Затем нажать кнопку Check и сервисная программа проверит ваш код.

При проверки ваших веб-страниц валидатор может выдавать ошибки, указывая, в какой строке содержится ошибка. Проверяя документ lounge. html будет выдана ошибка о необходимости использовать параметр alt в теге < img>.

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

Браузер просто считывает данные. Он, конечно может предположить, что читает русский или английский алфавит, но, что если это не так? Знание кодировки символов избавляет браузер от необходимости делать какие-то предположения. Поэтому лучше указать браузеру, какие символы вы будете использовать, прежде чем будете проверять вашу веб-страницу на соответствие веб-стандартам и выявлять ошибки.

Для этого в HTML-код нужно добавить одну строку – это будет тег < meta>. Его нужно поместить внутрь элемента < head> перед элементом < title>.

< meta http - equiv =” Content - Type ” content =” text / html ; charset = windows -1251”>

Windows-1251 – это стандартная 8-битная кодировка для всех русских версий Microsoft Windows. Если вы пишите на каком-то другом языке или пользуетесь другой операционной системой, ищите соответствующую информацию о кодировке символов на сайте http://www.w3.org/International/O-charset.ru.php.

В самом начале кода мы теперь должны указывать тег < doctype> с информацией о версии HTML, а далее в элементе < head> указывать информацию о кодировке в теге < meta>. Заметьте, что в типе документа мы указывали HTML 4.01 Transitional. Что это означает?

Существует два DOCTYPE, один – для языка, переходящего в HTML 4.01, и другой, более строгий DOCTYPE, - для него самого.

Представьте, что у вас есть сайт с сотнями веб-страниц и все они написаны не на стандарте HTML. Вы хотите усовершенствовать свой сайт и довести HTML до стандарта 4.01, но в ваших страницах многое унаследовано со времен версий 2.0 и 3.2. В этом случае можно использовать HTML 4.01 Transitional DOCTYPE – это позволит успешно пройти процедуру валидации для ваших страниц, и все-таки разрешит оставить кое-что из «раннего» HTML. Таким образом, вы сможете удостовериться, что в вашей разметке нет явных ошибок (например, опечаток, несоответствующих тегов и т.д.), но вам не придется менять весь свой код, чтобы станица была признана валидной.

Затем, когда вы удалите весь «ранний» HTML, вы подготовите все для того, чтобы тип ваших документов считался «строгим», что гарантирует полное соответствие стандартам вашего сайта.

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

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

(мы убрали слово Transitional и использовали новый URL, определяющий строгую версию HTML 4.01)

При проверке валидатором того же документа по стандарту строгого HTML 4.01 выдается ошибка о том, что неправильно размещен тег < img>.

Элемент < img> вложен в элемент < body>. В более старых версиях HTML это допускалось, и переходный HTML 4.01 тоже считал это нормальным, но в современном стандарте строчные элементы должны находиться внутри блочных. Поэтому нужно строчный элемент < img> поместить внутрь блочного, например, < p>, и все станет на свои места. Однако, неправильно будет считать, что любые строчные элементы можно помещать в любые блочные. Например, в блочный элемент <blockquote> строчные элементы помещать нельзя.

Итак, для чего вообще нужно соответствовать стандартам?

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

Путеводитель по строгому HTML 4.01

Всегда начинайте вашу страницу с определения DOCTYPE, а сразу за ним указывайте <html>, который должен всегда быть корневым элементом вашей веб-страницы. Тег </html> всегда должен заканчивать вашу веб-страницу, а все остальное должно быть вложено в него.
Всегда используйте <head> и <body>, чтобы HTML-код был лучше.

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

В элементе <head> всегда помещайте элемент <title>. Это закон. Если вы этого не сделаете, то HTML будет признан не соответствующий стандартам. Элемент <head> - единственный, в который вы можете помещать элементы <title>, <meta> и <style>.
Наполняйте элемент <body> только полезными блочными элементами (<p>, <h1>, <h2> … <h6>, <blockquote>и т.д.). Строчные элементы и текст необходимо сначала поместить в другой блочный элемент, и только затем они смогут войти в состав элемента <body>.
Никогда не помещайте блочные элементы внутрь строчных.
Не помещайте блочные элементы внутрь элемента <p>. Абзацы предназначены для текстов, поэтому не нужно помещать в них блочные элементы. Однако любые строчные элементы можно использовать внутри абзацев.
Списки предназначены для перечисления пунктов, поэтому внутри элементов <ul> и <ol> разрешается использовать только элемент <li>.
Однако, внутрь элемента <li> разрешается помещать любой текст, а также строчные или блочные элементы.
Элемент <blockquote> требует, чтобы внутри его было не менее одного блочного элемента. Необходимо помещать текст и другие строчные элементы внутрь блочных, а затем уже эти блочные элементы добавлять в <blockquote>.
Будьте внимательны при вкладывании строчных элементов друг в друга. Никогда не вкладывайте элемент <a> внутрь другого элемента <a>, потому что это может сильно запутать пользователей. А также не предусмотрено способа вкладывать строчные элементы в такие пустые элеметы, как <img>.

Переходим к XHTML

XHTML – это язык разметки, за которым будущее и на котором уже сейчас можно создавать веб-станицы, потому что

1) строгий синтаксис XHTML позволяет экранным дикторам более легко представлять веб-содержимое для людей со слабым зрением;

2) писать на XHTML более перспективно, можно использовать преимущества самых последних разработок, к тому же повышается вероятность корректного отображения веб-станиц на мобильных устройствах и во множестве браузеров;

3) XHTML может быть прочитан теми существующими программами, которые уже знают, как читать XML;

4) XHTML дает нам все преимущества XML (что здорово помогает в хранении больших структурированных наборов документов) наряду с преимуществами HTML, такими как CSS для создания дизайна.

Список изменений, которые нужно внести, чтобы преобразовать HTML в XHTML

· Измените свой DOCTYPE на строгий XHTML. Можно также использовать переходный XHTML, если вы все еще пишите на переходном HTML.

· Добавьте атрибуты xmlns , lang , xml : lang в открывающий тег < html>.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd”>

<html xmlns=http://www.w3.org/1999/xhtml lang=”ru” xml:lang=”ru”> ( с .294)

Открывающий тег < html > должен быть первым после DOCTYPE, а закрывающий тег < html> - последним тегом документа.
Названия всех элементов должны быть написаны строчными буквами
Для каждого открывающего тега должен быть свой закрывающий. Или, если элемент пустой, тег должен заканчиваться пробелом и затем символами “/>” (например, < /br>, <img src=”lake.jpg” alt=”Озеро” />)
Значения всех атрибутов должны быть непустыми. Кроме того, их следует взять в двойные кавычки.

Существует традиционная версия XHTML 1.0, которая, по сути, представляет собой почти то же самое, что и традиционная версия HTML 4.01. Они обе допускают использование запрещенных элементов, а также добавление строчных элементов непосредственно в тело вашей страницы. Итак, если вы предпочитаете эту версию, не забудьте указать переходный XHTML 1.0 DOCTYPE вместо строгого DOCTYPE .

Дата добавления: 2020-12-12; просмотров: 104; Мы поможем в написании вашей работы!

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

Мы поможем в написании ваших работ!