Язык XHTML является более строгой и четкой версией языка разметки HTML.
В данном руководстве рассмотрены различия между HTML и XHTML, а также показано, как преобразовать Web-сайт на использование XHTML.
Язык XHTML является более строгой и четкой версией языка HTML.
Для понимания изложенного материала необходимо знать язык HTML и основы создания Web-страниц.
XHTML является сокращением от английского EXtensible
XHTML предназначен для замены HTML.
XHTML почти совпадает с HTML 4.01.
XHTML является более строгой и четкой версией языка HTML.
XHTML является языком HTML, определенным как приложение XML.
XHTML одобрен в качестве Рекомендации консорциумом W3C.
XHTML 1.0 был одобрен как Рекомендация W3C 26 января 2000 г..
W3C определяет XHTML как последнюю версию HTML. XHTML будет постепенно заменять HTML.
Язык XHTML совместим с HTML 4.01.
Все новые браузеры поддерживают XHTML.
XHTML является переработкой HTML 4.01 в соответствии с XML, и может сразу использоваться существующими браузерами при соблюдении нескольких простых правил.
Данное руководство рассматривает:
XHTML является объединением HTML и XML (
XHTML состоит из всех элементов HTML 4.01, объединенных с синтаксисом XML.
В настоящее время многие страницы в Интернет содержат "плохой" код HTML.
Следующий код HTML будет нормально работать при просмотре в браузере, даже хотя он не полностью следует правилам HTML:
<html> <head> <title>Это плохой код HTML</title> <body> <h1>Плохой код HTML </body>
XML является языком разметки, в котором каждый элемент должен быть правильно размечен, что приводит к "грамматически-правильным" ("well-formed") документам.
Язык XML предназначен для описания данных, а язык HTML создан для представления данных.
На современном рынке представлены различные технологии браузеров, одни браузеры предназначены для использования Интернет на компьютерах, другие для использования Интернет на мобильных телефонах и c помощью карманных
Объединяя сильные стороны HTML и XML, мы получаем язык разметки, который будет полезен сегодня и в будущем -- XHTML.
Страницы XHTML можно читать с помощью любых устройств, которые поддерживают XML. Пока весь мир не перейдет на использование поддерживающих XML браузеров, XHTML предоставляет возможность сейчас писать "синтаксически-правильные" документы, которые можно использовать во всех браузерах.
XHTML можно начать использовать просто строго следуя правилам HTML.
XHTML не очень существенно отличается от стандарта HTML 4.01.
Поэтому хорошим началом будет приведение кода к стандарту 4.01.
Кроме того, необходимо писать код HTML символами нижнего регистра, и никогда не пропускать завершающие теги (такие как </p> ).
Вот собственно и все. Удачного кодирования!
Элементы XHTML должны быть правильно вложены
Элементы XHTML всегда должны быть замкнутыми
Элементы XHTML должны записываться в нижнем регистре
Документы XHTML должны иметь один корневой элемент
В HTML некоторые элементы могут вкладываться друг в друга некорректно, например как в случае: <b><i>Этот текст жирный и наклонный</b></i>
В XHTML все элементы должны правильно вкладываться друг в друга, например: <b><i>Этот текст жирный и наклонный</i></b>
Примечание: Достаточно часто при создании вложенных списков забывают о том, что внутренний список должен находится между тегами <li> и </li>.
Неправильно:
<ul>
<li>Кофе</li>
<li>Чай</li>
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
<li>Молоко</li>
</ul>
Правильно:
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
Обратите внимание, что в примере "правильного" кода вставлен тег </li> после тега </ul>.
Непустые элементы должны иметь замыкающий тег.
Неправильно:
<p>Это -- параграф <p>Это -- еще один параграф
Правильно:
<p>Это -- параграф </p> <p>Это -- еще один параграф </p>
Пустые элементы должны иметь замыкающий тег или начальный тег должен заканчиваться символами />.
Неправильно:
Разрыв строки: <br> Горизонтальная линия: <hr> Изображение: <img src="happy.gif" alt="Веселое лицо ">
Правильно:
Разрыв строки: <br /> Горизонтальная линия: <hr /> Изображение: <img src="happy.gif" alt="Веселое лицо " />
Спецификация XHTML определяет, что имена и атрибуты тегов должны записываться в нижнем регистре.
Неправильно:
<BODY> <P>Параграф </P> </BODY>
Правильно:
<body> <p>Параграф </p> </body>
Все элементы XHTML должны быть вложены в корневой элемент <html>. Все другие элементы могут иметь вложенные элементы (потомков). Вложенные элементы должны быть парными и правильно вкладываться в свой родительский элемент. Общая структура документа имеет следующий вид:
<html> <head> ... </head> <body> ... </body> </html>
При записи документа XHTML требуется использовать четкий синтаксис HTML.
id заменяет атрибут nameНеправильно:
<table WIDTH="100%">
Правильно:
<table width="100%">
Неправильно:
<table width=100%>
Правильно:
<table width="100%">
Неправильно:
<input checked> <input readonly> <input disabled> <option selected> <frame noresize>
Правильно:
<input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />
Ниже представлен список минимизированных атрибутов HTML и их запись в XHTML.
| HTML | XHTML |
|---|---|
compact |
compact="compact" |
|
|
readonly |
readonly="readonly" |
disabled |
disabled="disabled" |
selected |
selected="selected" |
|
|
ismap |
ismap="ismap" |
nohref |
nohref="nohref" |
noshade |
noshade="noshade" |
nowrap |
nowrap="nowrap" |
multiple |
multiple="multiple" |
noresize |
noresize="noresize" |
HTML 4.01 определяет атрибут name для элементов a, applet, frame, iframe, img, и map. В XHTML атрибут name исключен. Вместо него используется атрибут id.
Неправильно:
<img src="picture.gif" name="рис. 1" />
Правильно:
<img src="picture.gif" id="рис. 1" />
Примечание: Для взаимодействия со старыми браузерами в течение некоторого времени необходимо будет использовать оба атрибута name и id, с одинаковыми значениями атрибутов, например: <img src="picture.gif" id="рис. 1" name="рис. 1" />.
Для совместимости XHTML с современными браузерами, необходимо добавить дополнительный пробел перед символом "/".
Атрибут lang применим почти к любому элементу XHTML. Он определяет язык содержимого внутри элемента.
Если в каком-то элементе используется атрибут lang, то необходимо добавить атрибут xml:lang, например: <div lang="fr" xml:lang="fr">Bonjour, madam!</div>.
Все документы XHTML должны иметь объявление DOCTYPE. Также должны присутствовать элементы html, head и body, а внутри элемента head должен присутствовать элемент title.
Шаблон минимального документа XHTML имеет следующий вид:
<!DOCTYPE Здесь определяется тип документа> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Здесь задается заголовок </title> </head> <body> </body> </html>
Примечание: Объявление DOCTYPE не является частью самого документа XHTML. Это объявление не является элементом XHTML и не должно иметь закрывающий тег.
Примечание: Атрибут xmlns в теге <html> является в XHTML обязательным. Однако программа проверки (<html>, даже если он не был включен.
В следующем разделе представлена дополнительная информация об
Стандарт XHTML определяет три
Наиболее распространенным является XHTML Transitional (Переходный).
Документ XHTML состоит из трех основных частей:
Тип документа DOCTYPE
Заголовок (Head)
Тело (Body)
Базовая структура документа имеет следующий вид:
<!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
Объявление DOCTYPE всегда должно присутствовать в первой строке документа XHTML.
Это простой (минимальный) документ XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>простой документ </title> </head> <body> <p>простой параграф </p> </body> </html>
Объявление DOCTYPE определяет тип документа:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Оставшаяся часть документа выглядит как HTML:
<html> <head> <title>простой документ </title> </head> <body> <p> простой параграф </p> </body> </html>
В настоящее время имеется три типа документов XHTML:
XHTML 1.0 определяет три типа документов XML, которые соответствуют трем DTD: Strict, Transitional, и Frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Это определение DTD используется, когда требуется получить действительно четкую разметку, не имеющую в представлении никакого беспорядка. Оно используется вместе с каскадными таблицами стилей.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Используйте это определение, когда надо воспользоваться средствами представления HTML, и когда необходимо обеспечить поддержку для браузеров, которые не понимают каскадные таблицы стилей.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Укажите это определение, когда будут использоваться фреймы HTML, чтобы разделить окно браузера на два или большее количество фреймов.
Чтобы преобразовать Web-сайт с языка HTML на XHTML, необходимо знать правила синтаксиса XHTML, которые были рассмотрены выше. Затем необходимо выполнить следующие действия (в указанном порядке):
В качестве первой строки каждой страницы добавляют следующее объявление DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Лучше использовать сначала переходное определение DTD (Transitional). Можно выбрать и строгое определение DTD (Strict), но оно немного слишком "строгое" на начальном этапе, и ему труднее соответствовать.
Web-cтраницы должны иметь объявление DOCTYPE, если желательно, чтобы они были определены как правильные согласно XHTML.
Надо помнить, однако, что более новые браузеры (такие как Internet Explorer 6) могут обрабатывать документ по-разному, в зависимости от объявления <!DOCTYPE>. Если браузер читает документ с DOCTYPE, то он может интерпретировать документ как "правильный". Плохо сформированный XHTML может выводиться иначе, чем при отсутствии DOCTYPE.
Так как XHTML различает регистр символов, и поскольку XHTML допускает имена тегов и атрибутов HTML только в нижнем регистре, то необходимо выполнить глобальный поиск и замену всех тегов в верхнем регистре тегами, записанными в нижнем регистре. Аналогичную процедуру необходимо выполнить также для имен атрибутов.
Так как рекомендация W3C для XTML 1.0 говорит, что значения всех атрибутов должны быть заключены в кавычки, то необходимо проверить все Web-страницы, чтобы значения всех атрибутов были правильно заключены в кавычки. Это трудоемкая работа, поэтому рекомендуется в будущем никогда не забывать использовать кавычки для значений атрибутов.
В XHTML пустые теги не разрешены. Теги <hr> и <br> должны быть заменены соответственно на <hr /> и <br />.
Это создает проблему с браузером Netscape, который неправильно интерпретирует тег <br/>. Но к счастью, по неизвестной причине, замена его на <br /> прекрасно работает. В этом случае также необходимо выполнить глобальный поиск и замену соответствующих тегов.
Некоторые другие теги (такие как тег <img> ) страдают от такой же проблемы. В данном случае можно не использовать тег замыкания </img>, а добавить /> в конце тега.
После выполнения всех преобразований все имеющиеся страницы проверяются согласно официальному DTD W3C с помощью следующей ссылки на XHTML Validator (http://validator.w3.org/check/referer). Возможные не выявленные на начальном этапе ошибки надо будет отредактировать вручную. Наиболее распространенной ошибкой бывает отсутствие в списках тегов замыкающего </li>.
Имеются ли какие-либо специальные инструментальные средства для преобразования? Да, можно использовать утилиту TIDY.
Бесплатная утилита Дейва Рагетта HTML TIDY (http://www.w3.org/People/Raggett/tidy/) предназначена для проверки кода HTML. Она также отлично справляется с трудночитаемыми разметками документов, созданными специальными редакторами HTML и инструментальными средствами конвертации, и может помочь определить места кода, требующие дополнительного внимания, чтобы сделать Web-страницы более доступными для людей с физическими недостатками.
Документ XHTML проверяется согласно
Документ XHTML проверяют на соответствие
Strict DTD содержит элементы и атрибуты, которые не были исключены и не связаны с фреймами:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Transitional DTD содержит все из Strict DTD плюс исключенные элементы и атрибуты: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" Frameset DTD содержит все из Transitional DTD плюс фреймы: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
Простой документ XHTML имеет следующий вид:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>простой документ </title> </head> <body> <p>простой параграф </p> </body> </html>
Модель модуляризации XHTML определяет модули XHTML.
XHTML является простым, но большим языком. XHTML содержит большинство функций, которые могут понадобиться Web-разработчику.
Для некоторых целей XHTML является слишком большим и сложным, а для других целей он слишком прост.
Разделяя XHTML на модули, консорциум W3C создал небольшие и строго определенные множества элементов XHTML, которые можно использовать отдельно для простых устройств, а также в соединении с другими стандартами XML в больших и более сложных приложениях.
Используя модульность XHTML, разработчики приложений могут:
Консорциум W3C разделил определение XHTML на 28 модулей:
| Имя модуля | Описание |
|---|---|
модуль Applet |
Определяет исключенный элемент applet |
модуль Base |
Определяет элемент base |
модуль Basic Forms |
Определяет базовые элементы форм |
модуль Basic Tables |
Определяет базовые элементы таблиц |
модуль Bi-directional Text |
Определяет элемент bdo |
модуль Client |
Определяет элементы карт-изображений на стороне браузера |
модуль Edit |
Определяет элементы редактирования del и ins |
модуль Forms |
Определяет все элементы, используемые в формах |
модуль Frames |
Определяет элементы, связанные с фреймами |
модуль Hypertext |
Определяет элемент a |
модуль Iframe |
Определяет элемент iframe |
модуль Image |
Определяет элемент img |
модуль |
Определяет атрибуты событий, такие как onblur и |
модуль |
Определяет исключенные элементы и атрибуты |
модуль Link |
Определяет элемент link |
модуль List |
Определяет элементы списка li, ul, dd, dt, и dl |
модуль Metainformation |
Определяет элемент meta |
модуль Name |
Определяет исключенный атрибут name |
модуль Object |
Определяет элементы object и param |
модуль Presentation |
Определяет элементы представления, такие как b и i |
модуль Scripting |
Определяет элементы script и noscript |
модуль Server |
Определяет элементы карт-изображений на сервере |
модуль Structure |
Определяет элементы html, head, title и body |
модуль Style Attribute |
Определяет атрибут style |
модуль Style Sheet |
Определяет элемент style |
модуль Tables |
Определяет элементы, используемые в таблицах |
модуль Target |
Определяет атрибут target |
модуль Text |
Определяет элементы контейнера текста, такие как p и h1 |
Исключенные элементы не должны использоваться в XHTML.
Теги XHTML могут иметь атрибуты. Атрибуты каждого тега перечислены в описании тега. Здесь представлены базовые атрибуты и
Недействительны в элементах base, head, html, meta, param, script, style и title.
| Атрибут | Значение | Описание |
|---|---|---|
class |
правило_класса или правило_стиля | Класс элемента |
id |
имя_id | Уникальный id элемента |
style |
определение_стиля | Встроенное определение стиля |
title |
текст_подсказки | Текст для вывода подсказки |
Недействительны в элементах base, br, frame, frameset, hr, iframe, param, и script.
| Атрибут | Значение | Описание |
|---|---|---|
dir |
ltr | rtl | Задает направление текста |
lang |
код_языка | Задает код языка |
| Атрибут | Значение | Описание |
|---|---|---|
accesskey |
символ | Задает клавиатурное сокращение для доступа к элементу |
tabindex |
число | Задает порядок элемента при переходе по клавише табуляции |
Новым в HTML 4.0 была возможность для событий HTML запускать в браузере действия, такие как запуск сценария JavaScript, когда пользователь щелкал на элементе HTML. Ниже представлен список атрибутов, которые можно вставлять в теги HTML для определения действий событий.
Более подробно об использовании этих событий в программировании можно узнать в руководстве по JavaScript и руководстве по
Действительны только в элементах body и frameset
| Атрибут | Значение | Описание |
|---|---|---|
onload |
сценарий | Сценарий, который выполняется при загрузке документа |
onunload |
сценарий | Сценарий, который выполняется при выгрузке документа |
Действительны только в элементах форм.
| Атрибут | Значение | Описание |
|---|---|---|
|
сценарий | Сценарий, который выполняется при изменении элемента |
onsubmit |
сценарий | Сценарий, который выполняется при отправке формы |
onreset |
сценарий | Сценарий, который выполняется при сбросе формы |
onselect |
сценарий | Сценарий, который выполняется при выборе элемента |
onblur |
сценарий | Сценарий, который выполняется, когда элемент теряет фокус |
onfocus |
сценарий | Сценарий, который выполняется, когда элемент получает фокус |
Недействительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.
| Атрибут | Значение | Описание |
|---|---|---|
onkeydown |
сценарий | Действие после нажатия клавиши |
onkeypress |
сценарий | Действие после нажатия и отпускания клавиши |
onkeyup |
сценарий | Действие после отпускания клавиши |
Недействительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.
| Атрибут | Значение | Описание |
|---|---|---|
onclick |
сценарий | Что делать при щелчке мыши |
|
сценарий | Что делать при двойном щелчке мыши |
onmousedown |
сценарий | Что делать при нажатии кнопки мыши |
onmousemove |
сценарий | Что делать при перемещении указателя мыши |
onmouseover |
сценарий | Что делать при перемещении указателя мыши над элементом |
onmouseout |
сценарий | Что делать при смещении указателя мыши с элемента |
onmouseup |
сценарий | Что делать при отпукании нажатой кнопки мыши |
В данном руководстве было показано, как создавать более строгие и четкие страницы HTML.
Главное заключается в том, что все элементы XHTML должны быть правильно вложены, документы XHTML должны быть синтаксически правильными, все имена тегов должны быть записаны в нижнем регистре, и все элементы XHTML должны быть закрыты.
Важно также то, что все документы XHTML должны иметь объявление DOCTYPE, и что должны присутствовать элементы html, head, title, и body.
Дополнительную информацию о XHTML можно найти в любом справочном руководстве по XHTML.
Следующий шаг состоит в изучении CSS и JavaScript.
CSS используется для управления стилем и компоновкой Web-страниц.
При использовании CSS все форматирование можно вынести из документа HTML и сохранить в отдельном файле.
CSS предоставляет полный контроль над компоновкой, не создавая путаницу в содержимом документа.
Познакомиться с каскадными таблицами стилей можно в любом руководстве по CSS.
Язык JavaScript может сделать Web-сайт более динамичным.
Статичный Web-сайт вполне подходит для вывода простого содержимого, но динамичный Web-сайт может реагировать на события и позволяет организовать взаимодействие с пользователем.
JavaScript является наиболее популярным языком сценариев в Интернет, и он работает со всеми основными браузерами.
Более подробно познакомиться с JavaScript можно с помощью любого руководства по JavaScript.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.