Основы программирования на JavaScript

         

Атрибут id заменяет атрибут name


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" />.



Атрибут lang


Атрибут lang применим почти к любому элементу XHTML. Он определяет язык содержимого внутри элемента.

Если в каком-то элементе используется атрибут lang, то необходимо добавить атрибут xml: lang, например: <div lang="fr" xml:lang="fr">Bonjour, madam!</div>.



Атрибуты языка


Недействительны в элементах base, br, frame, frameset, hr, iframe, param, и script.

АтрибутЗначениеОписание
dirltr | rtlЗадает направление текста
langкод_языкаЗадает код языка



Атрибуты клавиатуры


АтрибутЗначениеОписание
accesskeyсимволЗадает клавиатурное сокращение для доступа к элементу
tabindexчислоЗадает порядок элемента при переходе по клавише табуляции



Атрибуты событий XHTML


Новым в HTML 4.0 была возможность для событий HTML запускать в браузере действия, такие как запуск сценария JavaScript, когда пользователь щелкал на элементе HTML. Ниже представлен список атрибутов, которые можно вставлять в теги HTML для определения действий событий.

Более подробно об использовании этих событий в программировании можно узнать в руководстве по JavaScript и руководстве по DHTML.



Базовые атрибуты


Недействительны в элементах base, head, html, meta, param, script, style и title.

АтрибутЗначениеОписание
classправило_класса или правило_стиляКласс элемента
idимя_idУникальный id элемента
styleопределение_стиляВстроенное определение стиля
titleтекст_подсказкиТекст для вывода подсказки



Что делать дальше?


Следующий шаг состоит в изучении CSS и JavaScript.



Что необходимо знать


Для понимания изложенного материала необходимо знать язык HTML и основы создания Web-страниц.



Что содержится в данном руководстве


Данное руководство рассматривает:

Почему необходимо использовать XHTMLСинтаксис XHTMLКак преобразовать сайт на XHTMLПроверка XHTML Модуляризация XHTML



Что такое XHTML?


XHTML является сокращением от английского EXtensible HyperText Markup Language, что означает "Расширяемый язык разметки гипертекста".

XHTML предназначен для замены HTML.

XHTML почти совпадает с HTML 4.01.

XHTML является более строгой и четкой версией языка HTML.

XHTML является языком HTML, определенным как приложение XML.

XHTML одобрен в качестве Рекомендации консорциумом W3C.



CSS


CSS используется для управления стилем и компоновкой Web-страниц.

При использовании CSS все форматирование можно вынести из документа HTML и сохранить в отдельном файле.

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

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



Добавить определение DOCTYPE


В качестве первой строки каждой страницы добавляют следующее объявление 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), но оно немного слишком "строгое" на начальном этапе, и ему труднее соответствовать.



Дополнительные правила синтаксиса XHTML


Имена атрибутов должны записываться в нижнем регистре Значения атрибутов должны заключаться в кавычки Минимизация атрибутов запрещена Атрибут id заменяет атрибут name DTD XHTML определяет обязательные элементы



DTD XHTML


Стандарт XHTML определяет три определения типа документа (Document Type Definitions – DTD).

Наиболее распространенным является XHTML Transitional (Переходный).



Имена атрибутов должны записываться в нижнем регистре


Неправильно:

<table WIDTH="100%">

Правильно:

<table width="100%">



Имена тегов и атрибутов записать в нижнем регистре


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



Элемент <!DOCTYPE> является обязательным


Документ XHTML состоит из трех основных частей:

Тип документа DOCTYPE

Заголовок (Head)

Тело (Body)

Базовая структура документа имеет следующий вид:

<!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>

Объявление DOCTYPE всегда должно присутствовать в первой строке документа XHTML.



Элементы XHTML должны быть правильно вложены


В HTML некоторые элементы могут вкладываться друг в друга некорректно, например как в случае: <b><i>Этот текст жирный и наклонный</b></i>

В XHTML все элементы должны правильно вкладываться друг в друга, например: <b><i>Этот текст жирный и наклонный</i></b>

Примечание: Достаточно часто при создании вложенных списков забывают о том, что внутренний список должен находится между тегами <li> и </li>.

Неправильно:

<ul> <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>.



Элементы XHTML должны записываться в нижнем регистре


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

Неправильно:

<BODY> <P>Параграф </P> </BODY>

Правильно:

<body> <p>Параграф </p> </body>



Элементы XHTML всегда должны быть замкнутыми


Непустые элементы должны иметь замыкающий тег.

Неправильно:

<p>Это -- параграф <p>Это -- еще один параграф

Правильно:

<p>Это -- параграф </p> <p>Это -- еще один параграф </p>



Как переходить к использованию XHTML


XHTML не очень существенно отличается от стандарта HTML 4.01.

Поэтому хорошим началом будет приведение кода к стандарту 4.01.

Кроме того, необходимо писать код HTML символами нижнего регистра, и никогда не пропускать завершающие теги (такие как </p>).

Вот собственно и все. Удачного кодирования!



Минимизация атрибутов запрещена


Неправильно:

<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.

HTMLXHTML
compactcompact="compact"

checked

declare

checked="checked"

declare="declare"

readonlyreadonly="readonly"
disableddisabled="disabled"
selectedselected="selected"
deferdefer="defer"
ismapismap="ismap"
nohrefnohref="nohref"
=""
nowrapnowrap="nowrap"
multiplemultiple="multiple"
noresizenoresize="noresize"



Модуляризация XHTML


Модель модуляризации XHTML определяет модули XHTML.



Наиболее важные различия


Элементы XHTML должны быть правильно вложены

Элементы XHTML всегда должны быть замкнутыми

Элементы XHTML должны записываться в нижнем регистре

Документы XHTML должны иметь один корневой элемент



Определения трех типов документов


DTD определяет синтаксис Web-страницы на SGML.DTD используется приложениями SGML, такими как HTML, для определения правил, которые применяют при разметке документов определенного типа, включая множество объявлений элементов и сущностей. XHTML задан в определении типа документа SGML или 'DTD'.DTD XHTML описывает точным, понятным для компьютера языком допустимый синтаксис и грамматику разметки XHTML.

В настоящее время имеется три типа документов XHTML:

STRICTTRANSITIONALFRAMESET

XHTML 1.0 определяет три типа документов XML, которые соответствуют трем DTD: Strict, Transitional, и Frameset.



Преобразование сайта на XHTML


Чтобы преобразовать Web-сайт с языка HTML на XHTML, необходимо знать правила синтаксиса XHTML, которые были рассмотрены выше. Затем необходимо выполнить следующие действия (в указанном порядке):



Преобразование Web-сайта на использование XHTML


XHTML является переработкой HTML 4.01 в соответствии с XML, и может сразу использоваться существующими браузерами при соблюдении нескольких простых правил.



Пример 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 проверяется согласно Определению типа документа.



Проверка XHTML в соответствии с DTD


Документ XHTML проверяют на соответствие определению типа документа (DTD). Прежде чем можно будет проверить файл XHTML, необходимо добавить в качестве первой строки правильный DTD.

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>



Пустые элементы должны быть замкнуты


Пустые элементы должны иметь замыкающий тег или начальный тег должен заканчиваться символами />.

Неправильно:

Разрыв строки: <br> Горизонтальная линия: <hr> Изображение: <img src="happy.gif" alt="Веселое лицо ">

Правильно:

Разрыв строки: <br /> Горизонтальная линия: <hr /> Изображение: <img src="happy.gif" alt="Веселое лицо " />



Пустые теги: <hr> , <br> и <img>


В XHTML пустые теги не разрешены. Теги <hr> и <br> должны быть заменены соответственно на <hr /> и <br />.

Это создает проблему с браузером Netscape, который неправильно интерпретирует тег <br/>. Но к счастью, по неизвестной причине, замена его на <br /> прекрасно работает. В этом случае также необходимо выполнить глобальный поиск и замену соответствующих тегов.

Некоторые другие теги (такие как тег <img>) страдают от такой же проблему. В данном случае можно не использовать тег замыкания </img>, а добавить /> в конце тега.



Различия между XHTML и HTML


XHTML можно начать использовать просто строго следуя правилам HTML.



Синтаксис XHTML


При записи документа XHTML требуется использовать четкий синтаксис HTML.



События элементов формы


Действительны только в элементах форм.

АтрибутЗначениеОписание
onchangeсценарийСценарий, который выполняется при изменении элемента
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сценарийЧто делать при щелчке мыши
ondblclickсценарийЧто делать при двойном щелчке мыши
onmousedownсценарийЧто делать при нажатии кнопки мыши
onmousemoveсценарийЧто делать при перемещении указателя мыши
onmouseoverсценарийЧто делать при перемещении указателя мыши над элементом
onmouseoutсценарийЧто делать при смещении указателя мыши с элемента
onmouseupсценарийЧто делать при отпукании нажатой кнопки мыши



События окна


Действительны только в элементах body и frameset

АтрибутЗначениеОписание
onloadсценарийСценарий, который выполняется при загрузке документа
onunloadсценарийСценарий, который выполняется при выгрузке документа



Стандартные атрибуты XHTML


Теги XHTML могут иметь атрибуты. Атрибуты каждого тега перечислены в описании тега. Здесь представлены базовые атрибуты и атрибуты языка, которые являются стандартными для всех тегов (с небольшими исключениями).



Важное замечание о совместимости


Для совместимости XHTML с современными браузерами, необходимо добавить дополнительный пробел перед символом "/".



Все атрибуты заключают в кавычки


Так как рекомендация W3C для XTML 1.0 говорит, что значения всех атрибутов должны быть заключены в кавычки, то необходимо проверить все Web-страницы, чтобы значения всех атрибутов были правильно заключены в кавычки. Это трудоемкая работа, поэтому рекомендуется в будущем никогда не забывать использовать кавычки для значений атрибутов.



Все новые браузеры поддерживают XHTML


Язык XHTML совместим с HTML 4.01.

Все новые браузеры поддерживают XHTML.



Введение в XHTML


Язык XHTML является более строгой и четкой версией языка HTML.



XHTML 1.0 Frameset


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

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



XHTML 1.0 Strict


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

Это определение 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">

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



XHTML рекомендован консорциумом W3C


XHTML 1.0 был одобрен как Рекомендация W3C 26 января 2000 г..

W3C определяет XHTML как последнюю версию HTML. XHTML будет постепенно заменять HTML.



Зачем нужен XHTML?


XHTML является объединением HTML и XML (EXtensible Markup Language – Расширяемого языка разметки).

XHTML состоит из всех элементов HTML 4.01, объединенных с синтаксисом XML.



Зачем нужна модуляризация XHTML?


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

Для некоторых целей XHTML является слишком большим и сложным, а для других целей он слишком прост.

Разделяя XHTML на модули консорциум W3C создал небольшие и строго-определенные множества элементов XHTML, которые можно использовать отдельно для простых устройств, а также в соединении с другими стандартами XML в больших и более сложных приложениях.

Используя модульность XHTML разработчики приложений могут:

Выбирать элементы, которые будут поддерживаться устройством, используя стандартные строительные блоки XHTML.Добавлять в XHTML расширения, используя XML, и не нарушая стандарт XHTML.Упрощать XHTML для таких устройств, как карманные компьютеры-коммуникаторы, мобильные телефоны, ТВ устройства, и устройства бытовой техники.Расширять XHTML для сложных приложений, добавляя новые функции XML (такие как MathML, SVG, Voice and Multimedia).Определять профили XHTML, такие как XHTML Basic (подмножество XHTML для мобильных устройств).



Заключительные замечания по XHTML


В данном руководстве было показано, как создавать более строгие и четкие страницы HTML.

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

Важно также то, что все документы XHTML должны иметь объявление DOCTYPE, и что должны присутствовать элементы html, head, title, и body.

Дополнительную информацию о XHTML можно найти в любом справочном руководстве по XHTML.



Замечание о DOCTYPE


Web-cтраницы должны иметь объявление DOCTYPE, если желательно, чтобы они были определены как правильные согласно XHTML.

Надо помнить, однако, что более новые браузеры (такие как Internet Explorer 6) могут обрабатывать документ по-разному, в зависимости от объявления <!DOCTYPE>. Если браузер читает документ с DOCTYPE, то он может интерпретировать документ как "правильный". Плохо сформированный XHTML может выводиться иначе, чем при отсутствии DOCTYPE.



Значения атрибутов должны заключаться в кавычки


Неправильно:

<table width=100%>

Правильно:

<table width="100%">