Теги xhtml со сценарием

Стили и сценарии

В этой главе:

Элемент STYLE
Атрибуты STYLE, CLASS и ID
Элементы SCRIPT и NOSCRIPT
Динамические атрибуты

Хотя ни таблицы стилей, ни какие-либо языки сценариев не входят в спецификацию XHTML, мы рассмотрим здесь способы их подключения. То, что будет сказано в этой главе о таблицах стилей, следует относить, в первую очередь, к каскадным таблицам стилей – CSS, подробно рассматриваемых в третьей части настоящего издания. В свою очередь, работа со сценариями, а так же язык сценариев JavaScript, будут рассмотрены в четвертой части. Здесь же мы рассмотрим лишь средства, имеющиеся у языка разметки XHTML для взаимодействия с этими ныне повсеместно применяемыми технологиями – элементами STYLE и SCRIPT, а так же атрибутами STYLE, ONCLICK и др.

Элемент STYLE

Для встраивания стилевой разметки непосредственно в документы HTML и XHTML применяется элемент STYLE. Этот элемент всегда должен находиться в части HEAD документа, как показано в листинге 2.38.

Листинг 2.38. Элемент STYLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Документ со стилями</title> <style type="text/css"> определение таблицы стилей </style> </head> <body> Документ, на который распространяется действие стилей, определенных в STYLE </body> </html>

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

<style type="text/css"></style>

Как мы видим, у элемента STYLE имеется атрибут TYPE, при помощи которого определяется, какой именно стилевой язык применяется (CSS – не единственный язык стилей, хотя и самый распространенный). Альтернативный вариант указания языка стилей – использование элемента META:

<meta http-equiv="Content-Style-Type" content="text/css" />

В таком случае явно указывается, что в данном документе все стили имеют тип CSS. Раз уж мы сослались на другой элемент, то нелишним будет напомнить, что для подключения стилей может использоваться и элемент LINK:

<link rel="Stylesheet" href="default.css" type=”text/css” />

Опять-таки, мы видим, что атрибут TYPE, указывающий на тип языка стилей, применяется и в этом случае.

Второй собственный атрибут элемента STYLE – это MEDIA, указывающий на то, для какого типа представления документа определенный стиль следует применять. Дело в том, что существуют несколько типов представления документа – от дисплея ПК или телевизора до обычного принтера или устройства Брайля. Соответственно, и атрибут MEDIA может принимать целый ряд значений:

all (общее) – задает оформление для всех видов устройств доступа к Интернету;
aural (звуковое) – для синтезаторов речи;
braille (Брайля) – для интерактивных осязательных устройств;
embossed (рельефное) – для печатающих устройств на основе таблиц Брайля;
handheld (блокнотное) – для карманных компьютеров, монохромных дисплеев и подобных устройств;
print (печатное) – для обычных страничных принтеров;
projection (проекционное) – для проекторов и печати на пленках;
screen (экранное) – для обычных компьютеров с цветными дисплеями;
tty (строчное) – для устройств вроде телетайпа или пейджера;
tv (телевизионное) – для отображения на цветных устройствах с низким разрешением и звуковым сопровождением.

При всем изобилии вариантов, особенно важно выделить screen и print, так как именно для просмотра на компьютерах и печати на принтерах создается большинство web-страниц. Например, если ваши страницы выглядят на экране как светлый текст на темном фоне, то имеет смысл задать обратное представление для печати.

ПРИМЕЧАНИЕ
На самом деле, современные браузеры самостоятельно «оптимизируют» страницы для вывода на печать, так что в случае белых букв на черном фоне, при печати и так все будет выведено наоборот. Однако для более предсказуемых результатов бывает полезно определять специальные стили для печати.

Кроме собственных атрибутов, у элемента STYLE имеются и общие, а именно LANG, DIR и TITLE. Последний в данном случае может быть использован лишь для написания каких-либо комментариев к коду, поскольку никак не обрабатывается браузерами.

Свойства STYLE

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо (может содержать только код на языке стилей).
Уникальный: нет.

Атрибуты STYLE, CLASS и ID

Если элемент STYLE задает стиль для всего документа, т.е. всех элементов, находящихся в части BODY, то действие одноименного атрибута локализовано лишь тем элементов, в котором он определен. При этом атрибут STYLE определен почти для всех элементов XHTML – исключение составляют лишь пустые элементы BASE, BASEFONT и PARAM, а также те элементы, которые должны находиться вне тела документа, т.е. HEAD, HTML, META и TITLE. Ну и, разумеется, сам элемент STYLE по той же причине одноименного атрибута тоже не имеет, равно как и другой элемент, применяемый для внедрения «не-HTML» кода, т.е. SCRIPT.

В типичном случае атрибут STYLE применяется в такой ситуации, когда надо выделить какой-либо единичный элемент на странице:

<em style="color: red">красный текст!</em>

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

<style type="text/css"></style> ... <em class="hot">красный текст!</em> ... <em class="hot">тоже красный текст!</em>

Более того, если даже выделяемый элемент заведомо уникален на данной странице, то все равно лучше избегать использования элемента STYLE для его выделения. Возможно, что в этом случае вместо CLASS следует воспользоваться другим атрибутом идентификации – ID:

<style type="text/css"></style> ... <em id="hot">Уникальный красный текст!</em> ...

Преимущество такого подхода будет в том, что если применить внешнюю таблицу стилей (например, подключенную при помощи элемента LINK), то использование ID вместо внедренного атрибутом STYLE стиля позволит изменить, в случае надобности, оформление выделенного таким образом текста сразу на всех страницах, использующих данные стиль.

Подобно STYLE, атрибуты CLASS и ID имеются практически у всех элементов, а если быть точнее, то CLASS отсутствует лишь у тех же элементов, что и STYLE, а ID отсутствует только у BASE, HEAD, HTML, META, SCRIPT, STYLE и TITLE.

Элементы SCRIPT и NOSCRIPT

Для включения небольших программ – сценариев (или «скриптов») – на языках программирования, например, JavaScript, используют элемент SCRIPT:

Единственное отличие – в двух косых чертах перед закрывающим тегом HTML-комментария. Эти две черты тоже являются комментарием, на сей раз – самого языка JavaScript и призваны предотвратить возникновение ошибки, связанной с попыткой интерпретации символов «—>».

ПРИМЕЧАНИЕ
На самом деле, поскольку вероятность встретить пользователя с Netscape 1.0 или MSIE 2.0, не выше, чем повстречать слона на Северном полюсе, а все остальные браузеры, включая даже самые примитивные (и не поддерживающие сценарии) типа Lynx, все равно распознают теги SCRIPT, то надобность в скрытии кода сценария практически равна нулю.
Единственное исключение — это показ какого-либо содержимого, которое надо отобразить в любом случае, даже если у пользователя отключена обработка скриптов JavaScript.

Важное отличие элемента SCRIPT от STYLE состоит в том, что элемент SCRIPT может находиться в любом месте документа, а не только в его заголовке. Связано это с тем, что при помощи сценариев можно не только управлять страницами, но и создавать их содержимое. Именно поэтому и существует еще один элемент – NOSCRIPT, который следует располагать непосредственно за SCRIPT в тех случаях, когда без выполнения сценария может потеряться какая-либо важная информация. Пример такого использования показан в листинге 2.39 (см. также Stylesscript.html).

Листинг 2.39. Элемент SCRIPT и альтернативный вывод

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Документ со сценарием</title> </head> <body> <script type="text/javascript"> Программа на языке JavaScript, выводящая в документ то или иное приветствие в зависимости от времени суток... </script> <noscript>Здравствуйте!</noscript> ... </body> </html>

В данном случае, если сценарии не поддерживаются (или их обработка отключена в программе посетителя), то вместо специфического приветствия, создаваемого сценарием, будет показано универсальное, определенное в NOSCRIPT. Разумеется, в том случае, если сценарии поддерживаются, то содержимое этого контейнера выведено на экран не будет.

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

<script src="JavaScriptProgram.js" type="text/javascript"></script>

В этом случае при помощи SRC указывается, что сценарий находится не внутри контейнера SCRIPT, а в отдельном файле. А атрибут TYPE традиционно определяет, что за тип файла следует загрузить. Помимо TYPE, указывающего на тип языка сценария, существует атрибут LANGUAGE, используемый для этих же целей. Более того, при помощи этого атрибута можно еще указать и версию языка:

<script language="JavaScript1.3"> ... программа на языке JavaScript версии 1.3... </script>

Такое использование было актуальным, когда разные браузеры работали с разными версиями языка, зачастую несовместимыми друг с другом. В настоящее время этот аспект не столь актуален, а потому данный атрибут был исключен из XHTML 1.1.

Помимо уже рассмотренных атрибутов, для элемента SCRIPT определены DEFER и CHARSET, а Microsoft предлагает так же атрибуты FOR и EVENT. Все они собраны в таблице 2.42.

Таблица 2.42 Атрибуты элемента SCRIPT

Атрибут	Примечание	Описание
src	—	Указывает на URI файла, содержащего текст сценария
type	Обязательный	Указывает на используемый язык сценариев
language	Устаревший	Указывает на то, какой язык сценариев используется. Допустимые значения зависят от конкретной программы. Для рассматриваемых в этой книге браузеров по умолчанию принимается как JavaScript
defer	—	Указывает, что данный скрипт не производит запись в документ. Например, если в JavaScript-программе нет выражений вроде document.write()
charset	Только совместно с SRC	Указывает на то, какой набор символов используется в подключаемом файле сценария
for	Только MSIE	Определяет элемент (через его ID), для которого предназначается сценарий
event	Только MSIE	Определяет событие, для которого предназначается сценарий

Если не рассматривать патентованные атрибуты FOR и EVENT, которые, по сути, являются динамическими атрибутами наоборот, то больше рассматривать пока нечего: подробнее о сценариях будет рассказано в соответствующем разделе книги. Что касается использования динамических атрибутов (ONCLICK и т.п.), то приведу здесь две идентичных с точки зрения результата версии кода. Итак, стандартный вариант (с атрибутом):

<p onclick="alert('Hello!');">Щелкните для приветствия</p>

А вариант с использованием FOR и EVENT будет выглядеть так:

<p id="p1">Щелкните для приветствия</p> <script type="text/javascript" for="p1" event="onclick()"> alert('Hello!'); </script>
Очевидно, что хоть какой-то смысл в использовании предлагаемого Microsoft подхода может быть в том случае, когда требуется использовать большой по объему код, хотя даже в таком случае правильнее будет определить функцию, которая будет вызываться динамическим атрибутом:

<p onclick=»my_func();»>Щелкните для приветствия</p>
<script type=»text/javascript»>
function my_func() {
…большой код на JavaScript…
}
</script>

ПРИМЕЧАНИЕ
На самом деле, данные атрибуты были введены лишь для того, чтобы автоматические программы-генераторы (например, FrontPage или PowerPoint), могли без особых проблем работать со сценариями.

Свойства SCRIPT

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо (может содержать только код на языке сценариев).
Уникальный: нет.

Динамические атрибуты

Продолжая тему сценариев, нельзя не упомянуть о динамических атрибутах элементов XHTML. К таковым, в первую очередь, относятся определенные практически для всех встречающихся в теле документа элементов атрибуты ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN и ONKEYUP. Кроме того, для ссылок и элементов форм предусмотрены атрибуты ONFOCUS и ONBLUR, а для некоторых – еще ONCHANGE и ONSELECT. Кроме того, формы имеют дополнительные динамические атрибуты ONSUBMIT и ONRESET, а сами документы, включая фреймсодержащие (т.е. элементы BODY и FRAME), обладают атрибутами ONLOAD, ONUNLOAD и ONBEFOREUNLOAD. Рассмотрим подробнее все данные атрибуты, для чего обратимся к таблице 2.43.

Таблица 2.43. Динамические атрибуты

Атрибут	Событие	Для каких элементов
onclick	Щелчок мышкой	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
ondblclick	Двойной щелчок мышкой	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmousedown	Нажата клавиша мышки	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmouseup	Отпущена клавиша мышки	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmouseover	Указатель мышки попадает в область элемента	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmousemove	Указатель мышки перемещается по области элемента	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmouseout	Указатель мышки покидает область элемента	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onkeypress	Нажата и отпущена клавиша на клавиатуре	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onkeydown	Нажата клавиша на клавиатуре	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onkeyup	Отпущена клавиша на клавиатуре	Все элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onfocus	Получение фокуса ввода	Только A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
onblur	Потеря фокуса ввода	Только A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
onchange	Изменение текста в элементе ввода	Только INPUT (типа File, Text и Password), SELECT, TEXTAREA
onselect	Выделение текста в элементе ввода	Только INPUT (типа File, Text, Password) и TEXTAREA
onsubmit	Запрос на отправку формы	Только FORM
onreset	Запрос на сброс формы	Только FORM
onload	Завершение загрузки документа	Только BODY и FRAMESET
onunload	Покидание страницы	Только BODY и FRAMESET
onbeforeunload	Запрос на покидание страницы (только MSIE и Mozilla 1.7 и выше)	Только BODY

Чтобы лучше понять, как данные атрибуты работают на практике, обратимся к примеру, приведенному в листинге 2.40 (см. так же файл StylesMouse.html).

Листинг 2.40. Динамические атрибуты для взаимодействия с мышью

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Мышка</title> </head> <body> <p onclick="this.style.color='red';" ondblclick="this.style.color='green';"> Сделайте обычный и двойной щелчки мышкой </p> <p onmousedown="this.style.color='red';" onmouseup="this.style.color='green';"> Сначала нажмите, а затем отпустите клавишу мышки </p> <p onmouseover="this.style.color='red';" onmouseout="this.style.color='green';"> Подведите, а затем отведите указатель мышки </p> </body> </html>

В каждом из трех абзацев определено по два динамических атрибута, причем во всех случаях, первый заданный атрибут, при помощи кода на языке JavaScript, меняет цвет параграфа на красный, а второй – на зеленый. Так, в первом абзаце данного примера определены атрибуты ONCLICK и ONDBLCLICK, в результате чего при одинарном щелчке по области, занимаемой абзацем в браузере, цвет текста сменится на красный, а при двойном щелчке – на зеленый. Во втором абзаце текст краснеет в момент нажатия клавиши мышки и зеленеет после того, как клавиша будет отпущена. Ну а в третьем для покраснения достаточно просто подвести указатель мышки к абзацу, а для «позеленения» – отвести.

Подобно тому, как работают атрибуты для отслеживания нажатий на клавишу мышки, а именно – ONCLICK, ONMOUSEDOWN и ONMOUSEUP, действуют и их клавиатурные собраться – атрибуты ONKEYPRESS, ONKEYDOWN и ONKEYUP. Например, если в первом абзаце из листинга 2.40 вместо атрибута ONCLICK написать ONKEYPRESS, то абзац, должен будет изменить свой цвет при нажатии на любую кнопку на клавиатуре:

<p onkeypress="this.style.color='red';">...</p>

К сожалению, здесь мы сталкиваемся с такой проблемой, как идентификация активного элемента: если когда мы щелкаем мышкой по элементу, то ясно, что щелчок относится к нему, то при нажатии кнопки на клавиатуре не всегда ясно, к какому элементу нажатие относится. Так, если речь идет об элементах, которые могут иметь фокус ввода – а это все элементы форм и ссылки, то событие получит тот элемент, который в момент нажатия имеет фокус ввода. Для всех других элементов браузер Opera определяет элемент по тому, где расположен указатель мышки. Что касается MSIE и Mozilla, то они в таких случаях данные атрибуты попросту игнорируют. Проверить работу этих атрибутов в различных браузерах вы можете, используя файл keys.html. В частности, во всех браузерах «клавиатурные» атрибуты будут работать с элементами форм:

<form> <input type="text" size="60" value="Текст" onkeydown="this.style.color='red';" onkeyup="this.style.color='green';"> </form>

Поскольку фокус ввода могут получать не только формы, но и ссылки (характерным признаком таких элементов является наличие атрибута TABINDEX), то данные события будут обрабатываться и ими:

<a href="http://www.snkey.net" onkeypress="alert('Hello!');">Hello!</a>

Если взглянуть на таблицу 2.43, то можно отметить, что для данного набора элементов (т.е. формы и ссылки) определены дополнительные динамические атрибуты – ONFOCUS и ONBLUR. Как раз они отвечают за возможность обработки событий, связанных с получением и потерей фокуса ввода. Например, можно изменять состояние элемента формы при получении им фокуса ввода, тем самым дополнительно выделяя его на странице:

<input type="text" value="Текст" onfocus="this.style.color='red';" onblur="this.style.color='green';">

Здесь мы определили, что, получая фокус ввода, текст в строке станет красным, а после того, как пользователь перейдет к другому полю – зеленым. Пример такой формы можно посмотреть в файле focus.html.

Для еще более ограниченного круга элементов, а именно – для текстовых полей форм определены еще два атрибута – ONCHANGE и ONSELECT. Первый определяет обработчик события для того случая, когда пользователь изменяет значение текста. Кстати, этот атрибут имеется еще и у элемента SELECT – ведь в списке тоже можно изменить значение, правда, не вводя (или удаляя) какие-либо символы, а выбрав иной вариант. Что касается ONSELECT, то он используется в тех случаях, когда требуется выполнить действие в ответ на выделение пользователем текста (например, для его последующего копирования в буфер обмена):

<input type="password" onselect="this.value=''">

В данном случае в ответ на попытку пользователя выделить содержимое строки пароля, все оно будет удалено (никогда так не делайте на практике!).

Наконец, для самого элемента FORM, определены два собственных атрибута – ONSUBMIT и ONRESET, которые мы уже рассматривали в контексте форм (см. файл Formsformevents.html). Что касается оставшихся трех динамических атрибутов, связанных с загрузкой и выгрузкой документа, то, хотя они уже и упоминались в контексте BODY, рассмотрим их работу здесь, обратившись к листингу 2.41.

Листинг 2.41. Атрибуты загрузки и выгрузки документа

<html> <head> <title>Вход и выход</title> </head> <body onload="alert('Пришли!');" onbeforeunload="return 'А может, останемся?';" onunload="alert('Ушли!');"> ... </body> </html>

Если вы откроете такой файл (in-out.html) в браузере, то сразу же получите сообщение «Пришли!». При выходе с этой странице (в том числе путем закрытия окна браузера), вы сначала получите предупреждение о том, что покидать ее, возможно и не следует (рис. 2.28).

Рис. 2.28. Запрос на уход со страницы с обработкой «запроса на выход»

Впрочем, такой запрос покажут не все, а только MSIE или Mozilla версии не ниже 1.7 (и, соответственно, Netscape 7.2 и Firefox 0.9), поскольку за его поддержку отвечает нестандартный атрибут ONBEFOREUNLOAD. Использование такого атрибута может быть оправдано лишь в случае, когда подобный подход позволит подстраховать посетителя страницы, например, от потери данных, введенных в объемную форму до ее отправки. Если вы выберите «Отмену», то новый документ не загрузится (или же окно браузера не закроется), в противном случае, «на прощание», сработает последний определенный в BODY атрибут – ONUNLOAD, показав, в нашем случае, сообщение «Ушли!».

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

2011-06-06 // Есть вопросы, предложения, замечания? Вы можете
обсудить это на форуме
!

« Графика, мультимедиа и внедренные объекты
|
Введение в CSS »

Техподдержка / Связаться с нами
Copyright © 1999-2020 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.

Источник

Выбор категорий продуктов

Все страницы сайта eCommerce содержат раздел ссылок для поиска информации о программном обеспечении, содержащейся в таблице Products базы данных eCommerce.mdb.

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

Файл menu.inc

Меню поиска сделано доступным на всех страницах с помощью файла INCLUDE, который можно импортировать и поместить в разделе, расположенном вдоль левого края страницы. Этот файл menu.inc содержит код, позволяющий посетителю выбрать категорию продукта или ввести ключевое слово для поиска. Реальный поиск и вывод подходящих продуктов происходит, однако, на странице search.php. Поэтому выбор категории или ключевого слова включает ссылку на страницу search.php, и искомое значение передается на эту страницу в строке запроса.

Сначала мы рассмотрим, как создать варианты выбора категорий продуктов для поиска, а затем рассмотрим поиск по ключевым словам. Оба эти метода содержатся в файле menu.inc, который импортируется на все страницы сайта eCommerce. После отдельного рассмотрения кодирования этих методов поиска будет представлена вся страница menu.inc.

Создание ссылок на категории

Множество ссылок на страницу search.php, через которые передается выбранная категория, основывается на типе продукта. ItemType является одним из полей таблицы Products. Поэтому эти типы необходимо извлечь из таблицы, а затем форматировать как ссылки на страницу search.php. Следующий код в файле menu.inc делает варианты выбора доступными на всех страницах.

<span class="head4">Категории программ:</span>
<table>
<?php

//Создание соединения с данными 
		
  $conn = odbc_connect
  ('Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:inetpubwwwrootPHPTutorialEcommercedatabasesecommerce.mdb','','');
		
//Формирование оператора SQL SELECT 
		
  $sql = "SELECT DISTINCT ItemType FROM Products ORDER BY ItemType";
  
//Выполнение оператора SQL и создание множества записей 
		
  $rs = odbc_exec($conn, $sql);
  
//Цикл по множеству записей и вывод необходимых записей 

 while($row = odbc_fetch_array($rs)) 
	
	{
echo "<tr style="color:seagreen; line-height:8pt; font-size:9pt"
			onMouseOver="this.style.backgroundColor='lightgreen'; 
			this.style.color='darkgreen'; this.style.cursor='hand'"
			onMouseOut="this.style.backgroundColor='white'; 
			this.style.color='seagreen'"
			
			onClick="location.href='search.php?Category=$row[ItemType]'">
			
			<td>$row[ItemType]</td>
		</tr>";
		
		}

//Закрытие соединения с базой данных 

odbc_close($conn);

?>
</table>

Пример
I.3.

Здесь делается соединение с базой данных и извлекается множество записей из таблицы Products. Это множество записей содержит уникальные значения, которые находятся в поле ItemType, получаемые при использовании оператора SQL SELECT с параметром DISTINCT. Каждая запись в множестве записей $rs содержит одно значение – один из типов объектов в поле. Теперь необходимо просто выполнить итерации по множеству записей, форматируя ссылки для значений категорий.

Выделение строки таблицы и соединение

Значения ItemType выводятся в таблице, чтобы воспользоваться средствами таблицы стилей, которые предоставляют интересный метод присвоения ссылок ячейкам таблицы, а не самим значениям. Значения ItemType появляются в таблице в следующем виде и выделяются, когда указатель мыши перемещается по записям (вокруг таблицы показана граница, чтобы эффект был более заметен):

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

Эти действия по выделению и соединению создаются следующим кодом для строк таблицы. Особенно отметим, что код находится внутри тега <tr>, так что результат проявляется во всех ячейках строки (хотя в данном конкретном случае в строке имеется только одна ячейка).

<tr style="color:seagreen; line-height:8pt; font-size:9pt"
  onMouseOver="this.style.backgroundColor='lightgreen';this.style.color='darkgreen';
    this.style.cursor='hand'"
  onMouseOut="this.style.backgroundColor='white';this.style.color='seagreen'"
  onClick="location.href='search.php?Category=$row[ItemType]'"
  >
  <td>$row[ItemType]</td>
</tr>

Свойства таблицы стилей используются для создания начального вида строк в ячейках. Свойство color задает цвет текста, выводимого в ячейках, свойство line-height задает высоту текста (и соответственно высоту самой ячейки), а свойство font-size задает размер шрифта текста.

Кроме этих статических свойств необходимо добавить свойства, которые изменяются, когда посетитель взаимодействует с ячейками. Мы хотим, чтобы «что-то происходило», когда посетитель перемещает курсор над ячейками, смещается с ячеек и щелкает в ячейке. Описанные события являются фактически событиями сценариев, которые в языке JavaScript называются onMouseOver, onMouseOut и onClick. Поэтому эти события можно использовать для включения изменений в стилях оформления ячеек таблицы.

Теги XHTML со сценарием

Процедуры JavaScript добавляются в теги <tr> для задания различных стилей и для включения ссылок, когда посетитель выполняет одно из трех указанных выше действий. Эти события и действия перечислены в следующей таблице.

Событие	Действие
onmouseover	this.style.backgroundColor=’lightgreen’ this.style.color=’darkgreen’ this.style.cursor=’hand'»
onmouseout	this.style.backgroundColor=’white’ this.style.color=’seagreen’
onclick	location.href=’search.php…’

Событие

Действие

onmouseover

this.style.backgroundColor=’lightgreen’

this.style.color=’darkgreen’

this.style.cursor=’hand'»

onmouseout

this.style.backgroundColor=’white’

this.style.color=’seagreen’

onclick

location.href=’search.php…’

Когда мышь перемещается поверх строки таблицы, включается событие onmouseover и выполняются три оператора JavaScript. Цвет фона (свойство backgroundColor ) строки задается как светло-зеленый ( lightgreen ), цвет текста (свойство color ) задается как темно-зеленый ( darkgreen ), а форма курсора (свойство cursor ) задается в форме ладони. Когда курсор мыши смещается со строки таблицы, включается событие onmouseout и свойства возвращаются к своим исходным значениям.

Общий формат выполнения команд JavaScript внутри тега HTML имеет вид

EventName = "statement1 [; statement2] [; statement3]..."

То есть за именем onmouseover, onmouseout, onclick или другим таким именем события, для которого будет применяться действие, следует знак равенства и в кавычках список операторов, которые будут выполнены, когда произойдет событие. Несколько операторов разделяются точкой с запятой.

Операторы, используемые для задания свойств, имеют следующий формат,

this.style.property='value'

где style является указанием на задание таблицы стилей, property является формальным именем задаваемого свойства, а значение value (заключенное в кавычки) является конкретным значением для задания этого свойства. Специальное ключевое слово self является ссылкой на себя объекта XHTML, содержащего это задание свойства, в данном случае тег <tr>.

Когда происходит событие onClick, создается ссылка на страницу search.php. Соединение происходит при задании свойству location.href (не тега <tr>, а текущего окна) имени страницы, на которую указывает ссылка. Это задание свойства приводит к замене URL в поле адреса браузера другим URL, в данном случае адресом страницы search.php.

Передача строк запроса

Когда делается ссылка из категории продуктов (в действительности из строки таблицы) на страницу search.php, то принимающая страница должна знать, какая категория продуктов была выбрана, чтобы создать список подходящих продуктов этой категории. Эта информация передается на страницу search.php через строку запроса, присоединенную к URL ссылки. Для каждой категории в списке меню (для каждой строки таблицы), значением строки запроса будет то же самое значение ItemType, которое выводится в ячейке таблицы:

onClick="location.href='search.php?Category=$row[ItemType]'"

Когда происходит щелчок на строке таблицы, создается URL в виде

search.php?Category=ItemType

Все строки таблицы содержат различные типы объектов, и это конкретное значение ItemValue присоединяется к URL этой строки. Одна из пар имя/значение

?Category=Business Office
?Category=Database
?Category=Desktop Publishing
?Category=Graphics
?Category=Operating Systems
?Category=Web Development

посылается на страницу search.php, информируя эту страницу о разыскиваемом типе для выполнения поиска программных продуктов, попадающих в эту категорию.

Источник

XHTML — Introduction

XHTML stands for EXtensible HyperText Markup Language. It is the next step in the evolution of the internet. The XHTML 1.0 is the first document type in the XHTML family.

XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and stricter version of HTML 4.01. If you already know HTML, then you need to give little attention to learn this latest version of HTML.

XHTML was developed by World Wide Web Consortium (W3C) to help web developers make the transition from HTML to XML. By migrating to XHTML today, web developers can enter the XML world with all of its benefits, while still remaining confident in the backward and future compatibility of the content.

Why Use XHTML?

Developers who migrate their content to XHTML 1.0 get the following benefits −

XHTML documents are XML conforming as they are readily viewed, edited, and validated with standard XML tools.
XHTML documents can be written to operate better than they did before in existing browsers as well as in new browsers.
XHTML documents can utilize applications such as scripts and applets that rely upon either the HTML Document Object Model or the XML Document Object Model.
XHTML gives you a more consistent, well-structured format so that your webpages can be easily parsed and processed by present and future web browsers.
You can easily maintain, edit, convert and format your document in the long run.
Since XHTML is an official standard of the W3C, your website becomes more compatible with many browsers and it is rendered more accurately.
XHTML combines strength of HTML and XML. Also, XHTML pages can be rendered by all XML enabled browsers.
XHTML defines quality standard for your webpages and if you follow that, then your web pages are counted as quality web pages. The W3C certifies those pages with their quality stamp.

Web developers and web browser designers are constantly discovering new ways to express their ideas through new markup languages. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules. These modules permit the combination of existing and new features at the time of developing content and designing new user agents.

Basic Understanding

Before we proceed further, let us have a quick view on what are HTML, XML, and SGML.

What is SGML?

This is Standard Generalized Markup Language (SGML) application conforming to International Standard ISO 8879. HTML is widely regarded as the standard publishing language of the World Wide Web.

This is a language for describing markup languages, particularly those used in electronic document exchange, document management, and document publishing. HTML is an example of a language defined in SGML.

What is XML?

XML stands for EXtensible Markup Language. XML is a markup language much like HTML and it was designed to describe data. XML tags are not predefined. You must define your own tags according to your needs.

XHTML — Syntax

XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements are valid in XHTML as well. But when you write an XHTML document, you need to pay a bit extra attention to make your HTML document compliant to XHTML.

Here are the important points to remember while writing a new XHTML document or converting existing HTML document into XHTML document −

Write a DOCTYPE declaration at the start of the XHTML document.
Write all XHTML tags and attributes in lower case only.
Close all XHTML tags properly.
Nest all the tags properly.
Quote all the attribute values.
Forbid Attribute minimization.
Replace the name attribute with the id attribute.
Deprecate the language attribute of the script tag.

Here is the detail explanation of the above XHTML rules −

DOCTYPE Declaration

All XHTML documents must have a DOCTYPE declaration at the start. There are three types of DOCTYPE declarations, which are discussed in detail in XHTML Doctypes chapter. Here is an example of using DOCTYPE −

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

Case Sensitivity

XHTML is case sensitive markup language. All the XHTML tags and attributes need to be written in lower case only.

<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>

<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>

In the example, Href and anchor tag A are not in lower case, so it is incorrect.

Closing the Tags

Each and every XHTML tag should have an equivalent closing tag, even empty elements should also have closing tags. Here is an example showing valid and invalid ways of using tags −

<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.

<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >

The following syntax shows the correct way of writing above tags in XHTML. Difference is that, here we have closed both the tags properly.

<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>

<!-- This is also valid now -->
<img src="/images/xhtml.gif" />

Attribute Quotes

All the values of XHTML attributes must be quoted. Otherwise, your XHTML document is assumed as an invalid document. Here is the example showing syntax −

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />

Attribute Minimization

XHTML does not allow attribute minimization. It means you need to explicitly state the attribute and its value. The following example shows the difference −

<!-- This is invalid in XHTML -->
<option selected>

<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">

Here is a list of the minimized attributes in HTML and the way you need to write them in XHTML −

HTML Style	XHTML Style
compact	compact=»compact»
checked	checked=»checked»
declare	declare=»declare»
readonly	readonly=»readonly»
disabled	disabled=»disabled»
selected	selected=»selected»
defer	defer=»defer»
ismap	ismap=»ismap»
nohref	nohref=»nohref»
noshade	noshade=»noshade»
nowrap	nowrap=»nowrap»
multiple	multiple=»multiple»
noresize	noresize=»noresize»

The id Attribute

The id attribute replaces the name attribute. Instead of using name = «name», XHTML prefers to use id = «id». The following example shows how −

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />

The language Attribute

The language attribute of the script tag is deprecated. The following example shows this difference −

<!-- This is invalid in XHTML -->

<script language="JavaScript" type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

<!-- Correct XHTML way of writing this is as follows -->

<script type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

Nested Tags

You must nest all the XHTML tags properly. Otherwise your document is assumed as an incorrect XHTML document. The following example shows the syntax −

<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>

<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>

Element Prohibitions

The following elements are not allowed to have any other element inside them. This prohibition applies to all depths of nesting. Means, it includes all the descending elements.

Element	Prohibition
<a>	Must not contain other <a> elements.
<pre>	Must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup> elements.
<button>	Must not contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> elements.
<label>	Must not contain other <label> elements.
<form>	Must not contain other <form> elements.

A Minimal XHTML Document

The following example shows you a minimum content of an XHTML 1.0 document −

<?xml version="1.0" encoding="UTF-8"?>

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

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
   <head>
      <title>Every document must have a title</title>
   </head>
	
   <body>
      ...your content goes here...
   </body>
</html>

HTML Versus XHTML

Due to the fact that XHTML is an XML application, certain practices that were perfectly legal in SGML-based HTML 4 must be changed. You already have seen XHTML syntax in previous chapter, so differences between XHTML and HTML are very obvious. Following is the comparison between XHTML and HTML.

XHTML Documents Must be Well-Formed

Well-formedness is a new concept introduced by XML. Essentially, this means all the elements must have closing tags and you must nest them properly.

CORRECT: Nested Elements

<p>Here is an emphasized <em>paragraph</em>.</p>

INCORRECT: Overlapping Elements

<p>Here is an emphasized <em>paragraph.</p></em>

Elements and Attributes Must be in Lower Case

XHTML documents must use lower case for all HTML elements and attribute names. This difference is necessary because XHTML document is assumed to be an XML document and XML is case-sensitive. For example, <li> and <LI> are different tags.

End Tags are Required for all Elements

In HTML, certain elements are permitted to omit the end tag. But XML does not allow end tags to be omitted.

CORRECT: Terminated Elements

<p>Here is a paragraph.</p><p>here is another paragraph.</p>
<br><hr/>

INCORRECT: Unterminated Elements

<p>Here is a paragraph.<p>here is another paragraph.
<br><hr>

Attribute Values Must Always be Quoted

All attribute values including numeric values, must be quoted.

CORRECT: Quoted Attribute Values

<td rowspan="3">

INCORRECT: Unquoted Attribute Values

<td rowspan=3>

Attribute Minimization

XML does not support attribute minimization. Attribute-value pairs must be written in full. Attribute names such as compact and checked cannot occur in elements without their value being specified.

CORRECT: Non Minimized Attributes

<dl compact="compact">

INCORRECT: Minimized Attributes

<dl compact>

Whitespace Handling in Attribute Values

When a browser processes attributes, it does the following −

Strips leading and trailing whitespace.
Maps sequences of one or more white space characters (including line breaks) to a single inter-word space.

Script and Style Elements

In XHTML, the script and style elements should not have “<” and “&” characters directly, if they exist; then they are treated as the start of markup. The entities such as “<” and “&” are recognized as entity references by the XML processor for displaying “<” and “&” characters respectively.

Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities.

<script type="text/JavaScript">
   <![CDATA[
      ... unescaped VB or Java Script here... ...
   ]]>
</script>

An alternative is to use external script and style documents.

The Elements with id and name Attributes

XHTML recommends the replacement of name attribute with id attribute. Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and it will be removed in a subsequent versions of XHTML.

Attributes with Pre-defined Value Sets

HTML and XHTML both have some attributes that have pre-defined and limited sets of values. For example, type attribute of the input element. In HTML and XML, these are called enumerated attributes. Under HTML 4, the interpretation of these values was case-insensitive, so a value of TEXT was equivalent to a value of text.

Under XHTML, the interpretation of these values is case-sensitive so all of these values are defined in lower-case.

Entity References as Hex Values

HTML and XML both permit references to characters by using hexadecimal value. In HTML these references could be made using either &#Xnn; or &#xnn; and they are valid but in XHTML documents, you must use the lower-case version only such as &#xnn;.

The <html> Element is a Must

All XHTML elements must be nested within the <html> root element. All other elements can have sub elements which must be in pairs and correctly nested within their parent element. The basic document structure is −

<!DOCTYPE html....>

<html>
   <head> ... </head>
   <body> ... </body>
</html>

XHTML — Doctypes

The XHTML standard defines three Document Type Definitions (DTDs). The most commonly used and easy one is the XHTML Transitional document.

XHTML 1.0 document type definitions correspond to three DTDs −

Strict
Transitional
Frameset

There are few XHTML elements and attributes, which are available in one DTD but not available in another DTD. Therefore, while writing your XHTML document, you must select your XHTML elements or attributes carefully. However, XHTML validator helps you to identify valid and invalid elements and attributes.

Please check XHTML Validations for more detail on this.

XHTML 1.0 Strict

If you are planning to use Cascading Style Sheet (CSS) strictly and avoiding to write most of the XHTML attributes, then it is recommended to use this DTD. A document conforming to this DTD is of the best quality.

If you want to use XHTML 1.0 Strict DTD then you need to include the following line at the top of your XHTML document.

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

XHTML 1.0 Transitional

If you are planning to use many XHTML attributes as well as few Cascading Style Sheet properties, then you should adopt this DTD and you should write your XHTML document accordingly.

If you want to use XHTML 1.0 Transitional DTD, then you need to include the following line at the top of your XHTML document.

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

XHTML 1.0 Frameset

You can use this when you want to use HTML Frames to partition the browser window into two or more frames.

If you want to use XHTML 1.0 Frameset DTD, then you need to include following line at the top of your XHTML document.

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

Note − No matter what DTD you are using to write your XHTML document; if it is a valid XHTML document, then your document is considered as a good quality document.

XHTML — Attributes

There are a few XHTML/HTML attributes which are standard and associated to all the XHTML/HTML tags. These attributes are listed here with brief description −

Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.

Attribute	Value	Description
class	class_rule or style_rule	The class of the element.
Id	id_name	A unique id for the element.
style	style_definition	An inline style definition.
Title	tooltip_text	A text to display in a mouse tip.

Language Attributes

The lang attribute indicates the language being used for the enclosed content. The language is identified using the ISO standard language abbreviations, such as fr for French, en for English, and so on. More codes and their formats are described at www.ietf.org.

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Attribute	Value	Description
dir	ltr \| rtl	Sets the text direction.
lang	language_code	Sets the language code.

Microsoft Proprietary Attributes

Microsoft introduced a number of new proprietary attributes with the Internet Explorer 4 and higher versions.

Attribute	Value	Description
accesskey	character	Sets a keyboard shortcut to access an element.
language	string	This attribute specifies the scripting language to be used with an associated script bound to the element, typically through an event handler attribute. Possible values might include JavaScript, jScript, VBS, and VBScript.
tabindex	number	Sets the tab order of an element.
contenteditable	boolean	Allows users to edit content rendered in Internet Explorer 5.5 or greater. Possible values are true or false.
disabled	boolean	Elements with the disabled attribute set may appear faded and will not respond to user input. Possible values are true or false.
hidefocus	on or off	This proprietary attribute, introduced with Internet Explorer 5.5, hides focus on an element’s content. Focus must be applied to the element using the tabindex attribute.
unselectable	on or off	Used to prevent content displayed in Internet Explorer 5.5 from being selected.

XHTML — Events

When users visit a website, they do things such as click on text, images and hyperlinks, hover-over things, etc. These are examples of what JavaScript calls events.

We can write our event handlers in JavaScript or VBScript and can specify these event handlers as a value of event tag attribute. The XHTML 1.0 has a similar set of events which is available in HTML 4.01 specification.

The <body> and <frameset> Level Events

There are only two attributes which can be used to trigger any JavaScript or VBScript code, when any event occurs at document level.

Attribute	Value	Description
onload	Script	Script runs when a XHTML document loads.
onunload	Script	Script runs when a XHTML document unloads.

Note − Here, the script refers to any function or piece of code of VBScript or JavaScript.

The <form> Level Events

There are following six attributes which can be used to trigger any JavaScript or VBScript code when any event occurs at form level.

Attribute	Value	Description
onchange	Script	Script executes when the element changes.
onsubmit	Script	Script executes when the form is submitted.
onreset	Script	Script executes when the form is reset.
onselect	Script	Script executes when the element is selected.
onblur	Script	Script executes when the element loses focus.
onfocus	Script	Script runs when the element gets focus.

Keyboard Events

The following three events are generated by keyboard. These events are not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Attribute	Value	Description
onkeydown	Script	Script executes on key press.
onkeypress	Script	Script executes on key press and release.
onkeyup	Script	Script executes key release.

Other Events

The following seven events are generated by mouse when it comes in contact with any HTML tag. These events are not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Attribute	Value	Description
onclick	Script	Script executes on a mouse click.
ondblclick	Script	Script executes on a mouse double-click.
onmousedown	Script	Script executes when mouse button is pressed.
onmousemove	Script	Script executes when mouse pointer moves.
onmouseout	Script	Script executes when mouse pointer moves out of an element.
onmouseover	Script	Script executes when mouse pointer moves over an element.
onmouseup	Script	Script executes when mouse button is released.

XHTML — Version 1.1

The W3C has helped move the internet content-development community from the days of malformed, non-standard mark-up into the well-formed, valid world of XML. In XHTML 1.0, this move was moderated by the goal of providing easy migration of existing HTML 4 (or earlier) based content to XHTML and XML.

The W3C has removed support for deprecated elements and attributes from the XHTML family. These elements and attributes had largely presentation-oriented functionality that is better handled via style sheets or client-specific default behavior.

Now the W3C’s HTML Working Group has defined an initial document type based solely upon modules which are XHTML 1.1. This document type is designed to be portable to a broad collection of client devices, and applicable to the majority of internet content.

Document Conformance

The XHTML 1.1 provides a definition of strictly conforming XHTML documents which MUST meet all the following criteria −

The document MUST conform to the constraints expressed in XHTML 1.1 Document Type Definition.
The root element of the document MUST be <html>.
The root element of the document MUST designate the XHTML namespace using the xmlns attribute.
The root element MAY also contain a schema location attribute as defined in the XML Schema.

There MUST be a DOCTYPE declaration in the document prior to the root element. If it is present, the public identifier included in the DOCTYPE declaration MUST refer the DTD found in XHTML 1.1 Document Type Definition.

Here is an example of an XHTML 1.1 document −

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
	
   <head>
      <title>This is the document title</title>
   </head>
	
   <body>
      <p>Moved to <a href="http://example.org/">example.org</a>.</p>
   </body>
	
</html>

Note − In this example, the XML declaration is included. An XML declaration such as the one above is not required in all XML documents. XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16.

XHTML 1.1 Modules

The XHTML 1.1 document type is made up of the following XHTML modules.

Structure Module − The Structure Module defines the major structural elements for XHTML. These elements effectively act as the basis for the content model of many XHTML family document types. The elements and attributes included in this module are − body, head, html, and title.

Text Module − This module defines all of the basic text container elements, attributes, and their content model − abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, and var.

Hypertext Module − The Hypertext Module provides the element that is used to define hypertext links to other resources. This module supports element a.

List Module − As its name suggests, the List Module provides list-oriented elements. Specifically, the List Module supports the following elements and attributes − dl, dt, dd, ol, ul, and li.

Object Module − The Object Module provides elements for general-purpose object inclusion. Specifically, the Object Module supports − object and param.

Presentation Module − This module defines elements, attributes, and a minimal content model for simple presentation-related markup − b, big, hr, i, small, sub, sup, and tt.

Edit Module − This module defines elements and attributes for use in editing-related markup − del and ins.

Bidirectional Text Module − The Bi-directional Text module defines an element that can be used to declare the bi-directional rules for the element’s content − bdo.

Forms Module − It provides all the form features found in HTML 4.0. Specifically, it supports − button, fieldset, form, input, label, legend, select, optgroup, option, and textarea.

Table Module − It supports the following elements, attributes, and content model − caption, col, colgroup, table, tbody, td, tfoot, th, thead, and tr.

Image Module − It provides basic image embedding and may be used in some implementations of client side image maps independently. It supports the element − img.

Client-side Image Map Module − It provides elements for client side image maps − area and map.

Server-side Image Map Module − It provides support for image-selection and transmission of selection coordinates. The Server-side Image Map Module supports − attribute ismap on img.

Intrinsic Events Module − It supports all the events discussed in XHTML Events.

Meta information Module − The Meta information Module defines an element that describes information within the declarative portion of a document. It includes element meta.

Scripting Module − It defines the elements used to contain information pertaining to executable scripts or the lack of support for executable scripts. Elements and attributes included in this module are − noscript and script.

Style Sheet Module − It defines an element to be used when declaring internal style sheets. The element and attribute defined by this module is − style.

Style Attribute Module (Deprecated) − It defines the style attribute.

Link Module − It defines an element that can be used to define links to external resources. It supports link element.

Base Module − It defines an element that can be used to define a base URI against which relative URIs in the document are resolved. The element and attribute included in this module is − base.

Ruby Annotation Module − XHTML also uses the Ruby Annotation module as defined in RUBY and supports − ruby, rbc, rtc, rb, rt, and rp.

Changes from XHTML 1.0 Strict

This section describes the differences between XHTML 1.1 and XHTML 1.0 Strict. XHTML 1.1 represents a departure from both HTML 4 and XHTML 1.0.

The most significant is the removal of features that were deprecated.
The changes can be summarized as follows −
On every element, the lang attribute has been removed in favor of the xml:lang attribute.
On the <a> and <map> elements, the name attribute has been removed in favor of the id attribute.
The ruby collection of elements has been added.

XHTML — Tips & Tricks

This chapter lists out various tips and tricks which you should be aware of while writing an XHTML document. These tips and tricks can help you create effective documents.

Tips for Designing XHTML Document

Here are some basic guidelines for designing XHTML documents −

Design for Serving and Engaging Your Audience

When you think of satisfying what your audience wants, you need to design effective and catchy documents to serve the purpose. Your document should be easy for finding required information and giving a familiar environment.

For example, Academicians or medical practitioners are comfortable with journal-like document with long sentences, complex diagrams, specific terminologies, etc., whereas the document accessed by school-going children must be simple and informative.

Reuse Your Document

Reuse your previously created successful documents instead of starting from scratch each time you bag a new project.

Inside the XHTML Document

Here are some tips regarding elements inside the XHTML document −

The XML Declaration

An XML declaration is not required in all XHTML documents but XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16.

Empty Elements

They include a space before the trailing / and > of empty elements. For example, <br />, <hr />, and <img src=»/html/xhtml.gif» alt=»xhtml» />.

Embedded Style Sheets and Scripts

Use external style sheets if your style sheet uses “<”, “&”, “]]>”, or “—”.

Use external scripts if your script uses “<”, “&”, or “]]>”, or “—”.

Line Breaks within Attribute Values

Avoid line breaks and multiple whitespace characters within attribute values. These are handled inconsistently by different browsers.

Isindex Element

Do not include more than one isindex element in the document head. The isindex element is deprecated in favor of the input element.

The lang and xml:lang Attributes

Use both the lang and xml:lang attributes while specifying the language of an element. The value of the xml:lang attribute takes precedence.

Element Identifiers

XHTML 1.0 has deprecated the name attributes of a, applet, form, frame, iframe, img, and map elements. They will be removed from XHTML in subsequent versions. Therefore, start using id element for element identification.

Using Ampersands in Attribute Values

The ampersand character («&») should be presented as an entity reference &.

Example

<!-- This is invalid in XHTML -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.

<!-- Correct XHTML way of writing this is as follows -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user

Whitespace Characters in HTML and XML

Some characters that are legal in HTML documents are illegal in XML document. For example, in HTML, the form-feed character (U+000C) is treated as white space, in XHTML, due to XML’s definition of characters, it is illegal.

Named Character Reference &Apos;

The named character reference ‘ (the apostrophe, U+0027) was introduced in XML 1.0 but does not appear in HTML. Web developers should therefore use ' instead of ‘ to work as expected in HTML 4 Web Browsers.

XHTML — Validations

Every XHTML document is validated against a Document Type Definition. Before validating an XHTML file properly, a correct DTD must be added as the first or second line of the file.

Once you are ready to validate your XHTML document, you can use W3C Validator
to validate your document. This tool is very handy and helps you to fix the
problems with your document. This tool does not require any expertise to perform
validation.

The following statement in the text box shows you details. You need to give
complete URL of the page, which you want to validate and then click Validate
Page button.

Input your page address in the box below −

This validator checks the markup validity of web documents with various formats especially in HTML, XHTML, SMIL, MathML, etc.

There are other tools to perform different other validations.

RSS/Atom feeds Validator
CSS stylesheets Validator
Find Broken Links
Other validators and tools

XHTML — Summary

We assume you have understood all the concepts related to XHTML. Therefore, you should be able to write your HTML document into a well-formed XHTML document and get a cleaner version of your website.

Converting HTML to XHTML

You can convert your existing HTML website into XHTML website.

Let us go through some important steps. To convert your existing document, you must first decide which DTD you are going to adhere to, and include document type definition at the top of the document.

Make sure you have all other required elements. These include a root element <html> that indicates an XML namespace, a <head> element, a <title> element contained within the <head> element, and a <body> element.
Convert all element keywords and attribute names to lowercase.
Ensure that all attributes are in a name=»value» format.
Make sure that all container elements have closing tags.
Place a forward slash inside all standalone elements. For example, rewrite all <br> elements as <br />.
Designate client-side script code and style sheet code as CDATA sections.

XHTML Upcoming Versions

Still XHTML is being improved and its next version XHTML 1.1 has been drafted. We have discussed this in detail in XHTML Version 1.1 chapter.

XHTML Tags, Characters, and Entities

XHTML tags, characters, and entities are same as HTML, so if you already know HTML then you do not need to put extra effort to learn these subjects, especially for XHTML. We have listed out all HTML stuff along with XHTML tutorial also, because they are applicable to XHTML as well.

What is Next?

We have listed out various resources for XHTML and HTML so if you are interested and you have time in hand, then we recommend you to go through these resources to enhance your understanding on XHTML. Otherwise this tutorial must have given you enough knowledge to write your web pages using XHTML.

Your feedback on this tutorial is welcome at contact@tutorialspoint.com.

Источник

XHTML — Introduction

XHTML stands for EXtensible HyperText Markup Language. It is the next step in the evolution of the internet. The XHTML 1.0 is the first document type in the XHTML family.

Why Use XHTML?

Developers who migrate their content to XHTML 1.0 get the following benefits −

XHTML documents are XML conforming as they are readily viewed, edited, and validated with standard XML tools.
XHTML documents can be written to operate better than they did before in existing browsers as well as in new browsers.
XHTML documents can utilize applications such as scripts and applets that rely upon either the HTML Document Object Model or the XML Document Object Model.
XHTML gives you a more consistent, well-structured format so that your webpages can be easily parsed and processed by present and future web browsers.
You can easily maintain, edit, convert and format your document in the long run.
Since XHTML is an official standard of the W3C, your website becomes more compatible with many browsers and it is rendered more accurately.
XHTML combines strength of HTML and XML. Also, XHTML pages can be rendered by all XML enabled browsers.
XHTML defines quality standard for your webpages and if you follow that, then your web pages are counted as quality web pages. The W3C certifies those pages with their quality stamp.

Basic Understanding

Before we proceed further, let us have a quick view on what are HTML, XML, and SGML.

What is SGML?

This is Standard Generalized Markup Language (SGML) application conforming to International Standard ISO 8879. HTML is widely regarded as the standard publishing language of the World Wide Web.

What is XML?

XHTML — Syntax

Here are the important points to remember while writing a new XHTML document or converting existing HTML document into XHTML document −

Write a DOCTYPE declaration at the start of the XHTML document.
Write all XHTML tags and attributes in lower case only.
Close all XHTML tags properly.
Nest all the tags properly.
Quote all the attribute values.
Forbid Attribute minimization.
Replace the name attribute with the id attribute.
Deprecate the language attribute of the script tag.

Here is the detail explanation of the above XHTML rules −

DOCTYPE Declaration

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

Case Sensitivity

XHTML is case sensitive markup language. All the XHTML tags and attributes need to be written in lower case only.

<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>

<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>

In the example, Href and anchor tag A are not in lower case, so it is incorrect.

Closing the Tags

Each and every XHTML tag should have an equivalent closing tag, even empty elements should also have closing tags. Here is an example showing valid and invalid ways of using tags −

<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.

<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >

The following syntax shows the correct way of writing above tags in XHTML. Difference is that, here we have closed both the tags properly.

<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>

<!-- This is also valid now -->
<img src="/images/xhtml.gif" />

Attribute Quotes

All the values of XHTML attributes must be quoted. Otherwise, your XHTML document is assumed as an invalid document. Here is the example showing syntax −

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />

Attribute Minimization

XHTML does not allow attribute minimization. It means you need to explicitly state the attribute and its value. The following example shows the difference −

<!-- This is invalid in XHTML -->
<option selected>

<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">

Here is a list of the minimized attributes in HTML and the way you need to write them in XHTML −

HTML Style	XHTML Style
compact	compact=»compact»
checked	checked=»checked»
declare	declare=»declare»
readonly	readonly=»readonly»
disabled	disabled=»disabled»
selected	selected=»selected»
defer	defer=»defer»
ismap	ismap=»ismap»
nohref	nohref=»nohref»
noshade	noshade=»noshade»
nowrap	nowrap=»nowrap»
multiple	multiple=»multiple»
noresize	noresize=»noresize»

The id Attribute

The id attribute replaces the name attribute. Instead of using name = «name», XHTML prefers to use id = «id». The following example shows how −

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />

The language Attribute

The language attribute of the script tag is deprecated. The following example shows this difference −

<!-- This is invalid in XHTML -->

<script language="JavaScript" type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

<!-- Correct XHTML way of writing this is as follows -->

<script type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

Nested Tags

You must nest all the XHTML tags properly. Otherwise your document is assumed as an incorrect XHTML document. The following example shows the syntax −

<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>

<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>

Element Prohibitions

The following elements are not allowed to have any other element inside them. This prohibition applies to all depths of nesting. Means, it includes all the descending elements.

Element	Prohibition
<a>	Must not contain other <a> elements.
<pre>	Must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup> elements.
<button>	Must not contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> elements.
<label>	Must not contain other <label> elements.
<form>	Must not contain other <form> elements.

A Minimal XHTML Document

The following example shows you a minimum content of an XHTML 1.0 document −

<?xml version="1.0" encoding="UTF-8"?>

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

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
   <head>
      <title>Every document must have a title</title>
   </head>
	
   <body>
      ...your content goes here...
   </body>
</html>

HTML Versus XHTML

XHTML Documents Must be Well-Formed

Well-formedness is a new concept introduced by XML. Essentially, this means all the elements must have closing tags and you must nest them properly.

CORRECT: Nested Elements

<p>Here is an emphasized <em>paragraph</em>.</p>

INCORRECT: Overlapping Elements

<p>Here is an emphasized <em>paragraph.</p></em>

Elements and Attributes Must be in Lower Case

End Tags are Required for all Elements

In HTML, certain elements are permitted to omit the end tag. But XML does not allow end tags to be omitted.

CORRECT: Terminated Elements

<p>Here is a paragraph.</p><p>here is another paragraph.</p>
<br><hr/>

INCORRECT: Unterminated Elements

<p>Here is a paragraph.<p>here is another paragraph.
<br><hr>

Attribute Values Must Always be Quoted

All attribute values including numeric values, must be quoted.

CORRECT: Quoted Attribute Values

<td rowspan="3">

INCORRECT: Unquoted Attribute Values

<td rowspan=3>

Attribute Minimization

XML does not support attribute minimization. Attribute-value pairs must be written in full. Attribute names such as compact and checked cannot occur in elements without their value being specified.

CORRECT: Non Minimized Attributes

<dl compact="compact">

INCORRECT: Minimized Attributes

<dl compact>

Whitespace Handling in Attribute Values

When a browser processes attributes, it does the following −

Strips leading and trailing whitespace.
Maps sequences of one or more white space characters (including line breaks) to a single inter-word space.

Script and Style Elements

Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities.

<script type="text/JavaScript">
   <![CDATA[
      ... unescaped VB or Java Script here... ...
   ]]>
</script>

An alternative is to use external script and style documents.

The Elements with id and name Attributes

Attributes with Pre-defined Value Sets

Under XHTML, the interpretation of these values is case-sensitive so all of these values are defined in lower-case.

Entity References as Hex Values

The <html> Element is a Must

<!DOCTYPE html....>

<html>
   <head> ... </head>
   <body> ... </body>
</html>

XHTML — Doctypes

The XHTML standard defines three Document Type Definitions (DTDs). The most commonly used and easy one is the XHTML Transitional document.

XHTML 1.0 document type definitions correspond to three DTDs −

Strict
Transitional
Frameset

Please check XHTML Validations for more detail on this.

XHTML 1.0 Strict

If you want to use XHTML 1.0 Strict DTD then you need to include the following line at the top of your XHTML document.

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

XHTML 1.0 Transitional

If you are planning to use many XHTML attributes as well as few Cascading Style Sheet properties, then you should adopt this DTD and you should write your XHTML document accordingly.

If you want to use XHTML 1.0 Transitional DTD, then you need to include the following line at the top of your XHTML document.

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

XHTML 1.0 Frameset

You can use this when you want to use HTML Frames to partition the browser window into two or more frames.

If you want to use XHTML 1.0 Frameset DTD, then you need to include following line at the top of your XHTML document.

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

Note − No matter what DTD you are using to write your XHTML document; if it is a valid XHTML document, then your document is considered as a good quality document.

XHTML — Attributes

There are a few XHTML/HTML attributes which are standard and associated to all the XHTML/HTML tags. These attributes are listed here with brief description −

Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.

Attribute	Value	Description
class	class_rule or style_rule	The class of the element.
Id	id_name	A unique id for the element.
style	style_definition	An inline style definition.
Title	tooltip_text	A text to display in a mouse tip.

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Attribute	Value	Description
dir	ltr \| rtl	Sets the text direction.
lang	language_code	Sets the language code.

Microsoft Proprietary Attributes

Microsoft introduced a number of new proprietary attributes with the Internet Explorer 4 and higher versions.

Attribute	Value	Description
accesskey	character	Sets a keyboard shortcut to access an element.
language	string	This attribute specifies the scripting language to be used with an associated script bound to the element, typically through an event handler attribute. Possible values might include JavaScript, jScript, VBS, and VBScript.
tabindex	number	Sets the tab order of an element.
contenteditable	boolean	Allows users to edit content rendered in Internet Explorer 5.5 or greater. Possible values are true or false.
disabled	boolean	Elements with the disabled attribute set may appear faded and will not respond to user input. Possible values are true or false.
hidefocus	on or off	This proprietary attribute, introduced with Internet Explorer 5.5, hides focus on an element’s content. Focus must be applied to the element using the tabindex attribute.
unselectable	on or off	Used to prevent content displayed in Internet Explorer 5.5 from being selected.

XHTML — Events

When users visit a website, they do things such as click on text, images and hyperlinks, hover-over things, etc. These are examples of what JavaScript calls events.

The <body> and <frameset> Level Events

There are only two attributes which can be used to trigger any JavaScript or VBScript code, when any event occurs at document level.

Attribute	Value	Description
onload	Script	Script runs when a XHTML document loads.
onunload	Script	Script runs when a XHTML document unloads.

Note − Here, the script refers to any function or piece of code of VBScript or JavaScript.

The <form> Level Events

There are following six attributes which can be used to trigger any JavaScript or VBScript code when any event occurs at form level.

Attribute	Value	Description
onchange	Script	Script executes when the element changes.
onsubmit	Script	Script executes when the form is submitted.
onreset	Script	Script executes when the form is reset.
onselect	Script	Script executes when the element is selected.
onblur	Script	Script executes when the element loses focus.
onfocus	Script	Script runs when the element gets focus.

Keyboard Events

The following three events are generated by keyboard. These events are not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Attribute	Value	Description
onkeydown	Script	Script executes on key press.
onkeypress	Script	Script executes on key press and release.
onkeyup	Script	Script executes key release.

Other Events

Attribute	Value	Description
onclick	Script	Script executes on a mouse click.
ondblclick	Script	Script executes on a mouse double-click.
onmousedown	Script	Script executes when mouse button is pressed.
onmousemove	Script	Script executes when mouse pointer moves.
onmouseout	Script	Script executes when mouse pointer moves out of an element.
onmouseover	Script	Script executes when mouse pointer moves over an element.
onmouseup	Script	Script executes when mouse button is released.

XHTML — Version 1.1

Document Conformance

The XHTML 1.1 provides a definition of strictly conforming XHTML documents which MUST meet all the following criteria −

The document MUST conform to the constraints expressed in XHTML 1.1 Document Type Definition.
The root element of the document MUST be <html>.
The root element of the document MUST designate the XHTML namespace using the xmlns attribute.
The root element MAY also contain a schema location attribute as defined in the XML Schema.

Here is an example of an XHTML 1.1 document −

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
	
   <head>
      <title>This is the document title</title>
   </head>
	
   <body>
      <p>Moved to <a href="http://example.org/">example.org</a>.</p>
   </body>
	
</html>