Лекция 2 - XHTML

XHTML (eXtensible Hypertext Markup Language) — расширенный язык разметки гипертекста. В отличие от предыдущих версий языка разметки гипертекста, XHTML четко отделяет структуру документа от его форматирования, позволяет организовывать документы, делать их содержание более доступным, сохраняя при этом совместимость содержимого с более старыми и более новыми версиями стандартов.

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

Инструменты создания XHTML-документов

Для создания XHTML-документов можно использовать любой, самый простой текстовый редактор, такой как, например, Notepad (Блокнот). Кроме того, для того, чтобы тестировать и совершенствовать свои работы, нужно иметь броузер. Помимо упомянутых элементарных средств, есть и специализированные программы для подготовки и редактирования XHTML-документов, а также программы для проектирования и подготовки мультимедийных аксессуаров. Иметь подключение к Интернет, хотя и полезно, вовсе не обязательно для создания XHTML-документов.

При создании документа наиболее эффективным оказывается ступенчатый подход — сначала написать содержимое, затем разметить его. После того, как содержимое документа определено, уже гораздо легче сделать один проход, чтобы основательно и результативно расставить XHTML-теги, размечая текст. Если действовать по-другому, разметка может отвлечь от содержания.

Прежде чем публиковать новый документ в Интернет, нужно протестировать его, просмотрев, как он выглядит в броузере. Рекомендуется иметь несколько броузеров, работающих на разных компьютерах, чтобы добиться уверенности в том, что великолепная презентация в одном броузере не превратится в кошмар на другом. Самые популярные в настоящее время броузеры и, следовательно, непременные участники тестирования — это Microsoft Internet Explorer, Netscape Navigator и Opera последних версий.

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

XHTML-документ должен быть одинаково интерпретирован броузерами на различных компьютерных платформах. Так как различные платформы предъявляют разные требования к имени файла, то стандартом оформления имени файла для Internet будет набор правил, подходящих для всех платформ:

в имени файла разрешено использовать следующий набор символов: a-z,A-Z, "_", 0-9,
длина имени файла должна быть не более 8 символов,
расширение файла должно быть "htm",
первый символ имени должен быть буквой,
рекомендуется в названии файлов использовать только строчные символы.

Как правило, первый документ ресурса, с которого начинается просмотр (стартовая страница), называется index.htm или default.htm.

Правила синтаксиса XHTML

Как уже говорилось выше, XHTML состоит из специальных встроенных в язык инструкций — тегов, которые не воспроизводятся броузером, но указывают ему, как надо отобразить содержимое документа. Тэги ограничены и отделены от основного текста знаками <>. Например, в записи

<p>В этом разделе дано описание правил языка разметки XHTML1.0</p>

элементы <p> и </p> — теги, причем первый из них открывающий, а второй закрывающий, который отличается от первого наличием перед названием тега косой черты. В тексте тег p размечает абзац. В нашей записи он показывает, где начинается абзац (открывающий тег) и где он заканчивается (закрывающий тег). Текст, заключенный в теги <p> и </p>, броузер отобразит в соответствии со стандартными правилами форматирования абзаца, установленными разработчиками данного броузера.

Иногда тег представляет собой пустой элемент, в который нельзя ничего поместить. Например, тег br переводит на новую строку следующий за ним текст. Такой тег ничего не ограничивает. Поэтому его запись имеет элементы как открывающего, так и закрывающего тега: <br />. О том, что тег является пустым, мы всегда будем упоминать специально. Если же не оговорено иначе, то подразумеваются теги обычного вида с открывающей и закрывающей частями.

Тегам можно назначать свойства, которые записываются в элементах, называемых атрибутами. У некоторых тегов есть обязательные атрибуты, которые необходимо всегда вставлять в тег. Например, нужно вставить изображение в документ. Для этого используется тег <img />. Обязательным атрибутом этого тега, без которого тег не имеет смысла и не может быть интерпретирован броузером, является атрибут, содержащий адрес, где находится файл с изображением. Этот атрибут имеет имя src. В итоге, должна появиться такая строка:

Сформулируем теперь четыре основных правила употребления тегов, которые отличают язык XHTML от языка HTML:

Все названия тегов должны быть записаны в нижнем регистре, за исключением специального тега !DOCTYPE. Так, например, нельзя писать <BODY>, а надо писать <body>.
Все теги должны быть закрыты. В случае, если элемент не имеет закрывающего тега (например, img или br), надо добавлять косую черту в конце тега <img /> и <br />.
Вложенность тегов должна быть корректной. Например, нельзя писать <em><p>текст</em></p>, а надо писать <p><em>текст</em></p>
Значения всех атрибутов должны быть заключены в кавычки. Например, нельзя писать <a href=page.htm>, а надо писать <a href=”page.htm”>.

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

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

Переводы строк в XHTML-документе игнорируются, серии пробелов воспринимаются как один пробел. Другими словами, при построении визуального представления XHTML-страницы броузер не будет отображать переводы строк, а любую последовательность пробелов представит как один. Чтобы внедрить перевод строки в визуальное представление используется тег <br />, а для создания дополнительных пробелов используют средства разметки, о которых будет сказано ниже.

Структура минимального документа на XHTML

Согласно спецификациям HTML и XHTML тег !DOCTYPE (что означает "объявление типа документа") сообщает броузеру, какая именно версия (X)HTML использована в документе, и в соответствии с каким стандартом нужно вывести этот документ на экран. Этот тег должен всегда находиться в первой строке каждой страницы. Его запись для XHTML 1.0 выглядит следующим образом:

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

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

Если воспользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забыть про него, броузер перейдет в "загадочный" режим. При работе в «загадочном» режиме броузер будет исходить из предположения о том, что код страницы написан с ошибками или с отступлением от стандартов. В этом режиме броузер попытается разобрать документ по правилам обратной совместимости и выведет его на экран, как его вывел бы броузер более ранней версии. В этом случае часть информации и форматирования может отобразиться в искаженном виде или вообще отсутствовать.

В качестве переходной версии стандарта, в том случае, если страница написана на языке HTML, но нет уверенности, что она строго соответствует правилам XHTML, следует использовать тег !DOCTYPE следующего вида.

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

Специальный вид тега !DOCTYPE предназначен также для определения документа с фреймами (о таких документах речь пойдет в отдельном разделе):

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

Итак, в первой строчке любого XHTML-документа описывается язык, на котором написан весь нижеследующий документ. Сам документ ограничивается тегом <html> в начале и соответствующим закрывающим тегом </html> в конце. Этот тег также называют корневым. Все остальные элементы содержатся внутри границ этого тега. У тега <html> есть обязательные атрибуты.

Атрибут xmlns унаследован от XML и описывает пространство имен этого языка. Пространство имен XML — это совокупность абстрактных имен, применяемых в качестве типов элементов и имен атрибутов в XML-документах. Значением атрибута является URI (универсальный идентификатор ресурса), который указывает на файл описаний элементов пространства имен. Законченная запись атрибута пространства имен XHTML примет следующий вид:

xmlns=”http://www.w3.org/1999/xhtml”

Два следующих атрибута определяют основной язык (уже не язык разметки, а «человеческий» язык), на котором написана большая часть текстового содержимого документа. Атрибут xml:lang используется для совместимости с XML, а атрибут lang используется для совместимости с HTML. В качестве значений этих атрибутов используются два символа — код названия языка. Например, если вы создаете документ на русском языке, то эти символы — ru, на английском — en, на французском — fr и т.д. Перечень всех двухбуквенных кодов для различных языков можно найти в Интернет.

Теги в разделе body

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

Абзац представляет собой неразрывный текстовый блок, выделенный в общей структуре документа. Как уже было сказано выше, абзац в XHTML-документе оформляется тегом p.

Заголовок в структуре XHTML является элементом, необходимым для выделения композиционных частей внутри документа. Как правило, в одном документе присутствуют основные заголовки, заголовки второго и третьего уровня и т.д. В системе XHTML-заголовков шесть уровней. Если даже используются не все они, то начинать нужно всегда с заголовка первого уровня. Например:

<h1>Глава 1. Основы XHTML</h1>

<h2>§1 Основные понятия</h2>

<p>Описание параграфа

</p>

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

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

Тег strong определяет более сильное, чем em, выделение, и чаще отображается жирным шрифтом.

Тег sup — выделение фрагмента текста как верхнего индекса.

Тег sub — выделение фрагмента текста как нижнего индекса.

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

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

Тег cite ограничивает ссылку на источник (несетевой — научную публикацию, статью, книгу), откуда взята опубликованная информация. Содержимое тега cite оформляется курсивом.

Тег q используется для выделения фрагмента текста, который представляет собой цитату из документа, не принадлежащего автору страницы. С помощью необязательного атрибута cite может быть указан URI страницы, на которой размещен цитируемый документ. Тег q может использоваться для вставки в текст XHTML-документа небольших цитат.

Тег blockquote используется для оформления длинных цитат. Броузер выносит содержимое этого тега на отдельные строки, обрамляет отступами и выравнивает по центру. Тег blockquote также может иметь атрибут cite.

Тег samp используется для выделения примеров, пояснений к основному тексту. Отображается моноширинным шрифтом.

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

Тег abbr - сокращение, аббревиатура. Выделяется курсивом.

Тег acronym - сокращение устоявшихся словосочетаний по наиболее звучащим или по первым буквам, например, Co, Ltd, GmbH.

Тег address используется для указания контактных координат и информации об авторе документа. Содержимое этого тега оформляется курсивом на отдельной строке.

Тег pre используется для отображения исходного текста XHTML-документа без разметки и форматирования. Этот тег используется, в первую очередь, для отображения примеров исходного кода в справочных руководствах по языкам разметки. Внутри тега pre не могут содержаться теги img, object, big, small, sub, sup.

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

Тег b — выделение фрагмента текста жирным шрифтом.

Тег i — выделение фрагмента текста курсивом.

Тег tt — выделение фрагмента текста моноширинным шрифтом (шрифтом пишущей машинки).

Тег big — выделение фрагмента текста шрифтом большего размера по сравнению с окружающим текстом.

Тег small — выделение фрагмента текста шрифтом меньшего размера по сравнению с окружающим текстом.

Специальный тег hr (не имеющий закрывающего) задает горизонтальную разделительную линию в XHTML-документе.

Тег br (также не имеющий закрывающего) эквивалентен символу разрыва строки. Вся информация, помещенная после этого тега начинается с новой строчки.

В самом общем смысле для выделения текстовых блоков и внутритекстовых элементов существуют теги div (выделяет раздел в текстовой информации) и span (выделяет фразу в тексте).

В некоторых текстах встречаются специальные символы, такие как ©, ± и т.д. К специальным символам XHTML относятся также знаки «большк» > и «меньше» <. Дело в том, что с этих знаков начинаются инструкции языка XHTML — они не могут быть использованы в тексте документа «просто так». Для отображения на экране специальных символов используют языковую конструкцию, которая начинается знаком «&», последним идет символ «;», а между этими ограничителями находится определенная последовательность букв, которая задает тот или иной специальный символ. Например, для вывода угловых скобок используются последовательности < (для <) и > (для >), например:

<p> В XHTML-документе, чтобы начать следующее предложение с новой строки, перед ним необходимо написать инструкцию < br / > .

</p>

Коды наиболее распространенных специальных символов собраны в приложении 3.

Далее будем рассматривать элементы разметки текстовой информации, которые размещаются в документе в блоке body.

Ссылки

Ссылка — это элемент документа, выбор которого позволяет выполнить переход: 1) к документу, опубликованному в Интернет; 2) к документу, расположенному на том же компьютере или в той же локальной сети, что и документ, содержащий ссылку; 3) к другому фрагменту текста в пределах одного и того же документа. Ссылки первого вида называются внешними, а второго и третьего — локальными ссылками.

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

Для вставки ссылки в документ используется тег a. У этого тега есть обязательный атрибут href, значением которого является адрес документа (или места в документе), на который осуществляется переход по ссылке. Каждый документ на компьютере, в локальной сети или в Интернет имеет свой адрес.

Для начала рассмотрим, как устроены внешние ссылки, т.е. ссылки на страницы, опубликованные в Интернет. Адресом таких страниц является универсальный указатель ресурса, или URL (Uniform Resource Location), он же URI (Uniform Resource Identifier). URI записывается следующим образом: сначала указывается протокол, затем адрес сервера, после этого через косую черту указывается путь к файлу на этом сервере. Например, в строчке http://www.narod.ru/index.htm название протокола — это элемент http://, адрес сервера — www.narod.ru, а index.htm – путь к файлу на этом сервере (если путь не указать, то, по умолчанию, загрузится первая страница ресурса). Полный URI и используется в качестве значения атрибута href. Например, ссылка

<a href=”http://www.uspu.ru”> Перейти на сайт УрГПУ</a>

позволит пользователю попасть на сайт Уральского государственного педагогического университета, а ссылка

<a href=”http://ya.ru”>Поиск!</a>

ведет на первую страницу поисковой системы Яndex.

Рассмотрим теперь случай, когда имеются две странички — назовем их firstpage.htm и secondpage.htm, — и требуется создать ссылку, ведущую с одной странички на другую. Как и в случае с внешними ссылками, элемент текста выделяется тэгом <а>. Однако, в обязательном атрибуте href, указывается относительный путь ко второй страничке из первой. Если оба файла лежат в одной папке, то ссылка в документе firstpage.htm выглядит так:

<a href=”secondpage.htm”>Посмотрите на мою вторую страничку</a>

А если документы находятся в разных папках? Пусть наш файл secondpage.htm находится в папке folder1, а папка folder1 находится на том же уровне файловой системы, что и текущая папка, в которой у нас расположен firstpage.htm. Ссылка примет следующий вид:

<a href=”\..\folder1\secondpage.htm”> Посмотрите мою вторую страничку</a>

Иначе говоря, для того, чтобы подняться на один уровень вверх по файловой системе, в пути следует писать \.., а для того, чтобы перейти внутрь папки, достаточно указать ее имя. Обратим внимание на то, что при указании путей в локальных ссылках используется косая черта “\” (в соответствии с соглашениями операционной системы MS Windows), а при указании URL — косая черта “/” (в соответствии с протоколами Интернет).

А если нужно сделать ссылку на файл, который расположен не на Web-сервере, а в локальной сети? Пользуются следующей нотацией:

<a href=”file:\\имя_компьютера\название_папки\документ.htm”>

Итак, чтобы создать ссылку на другую страницу, Internet-ресурс и т.д. необходимо использовать тег а с обязательным атрибутом href:

<a href=”URL или путь к документу, на который необходимо сделать ссылку”>

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

Для того, чтобы создать ссылку на определенную часть документа, необходимо расположить там закладку и присвоить этой закладке уникальное имя. Для этих целей тоже используется тег a, однако без атрибута href. Для идентификации закладки предназначены атрибуты name и id тега a. Например, выделим заголовок статьи:

<a id=”math” name=”math”><h1>Математика в школе</h1></a>

Теперь, чтобы создать в документе ссылку, указывающую на эту статью, достаточно вставить следующий код:

<a href=”#math”>

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

Для того, чтобы создать ссылку на известную закладку другого XHTML-документа, в тег a необходимо добавить ещё один элемент — относительный путь, либо соответствующий URL:

<a href=”firstpage.htm#math”>

Ссылка из файла secondpage.htm на статью в файле firstpage.htm

</a>

Кроме этого, тег a имеет необязательный атрибут target. Значением атрибута является название окна броузера. Существует несколько предопределенных имен, например:

<a href=”first.htm” target=”_blank”>По этой ссылке страница firstpage.htm откроется в новом окне броузера.

Тег a не может содержать в себе других тегов

Изображения

Кроме текста, внутри XHTML-документа можно размещать графические изображения. Поддерживаются три формата графических файлов: GIF (Graphics Interface Format), JPEG (Joint Photographic Experts Group) и PNG (Portable Network Graphics).

Для вставки изображения в XHTML-документ предназначен тег <img />, с обязательным атрибутом src, в котором указывают адрес файла с изображением. Например,

Обратите внимание, что у тега <img />нет закрывающего.

Для тега <img /> можно записать следующие атрибуты.

Атрибут alt предназначен для отображения альтернативной текстовой информации об изображении. Эта информация появляется во всплывающей подсказке. К тому же подобная информация будет отображена в окне броузера, если в силу каких-либо причин пользователь не сможет увидеть само изображение. В подобных случаях благодаря этому атрибуту пользователи смогут понять предназначение рисунка. Например,

Атрибуты width и height указывают на размер изображения. С их помощью броузер может зарезервировать пространство для изображения на странице, даже если само изображение ещё не загружено. Всегда следует указывать фактическую длину и ширину, а если необходимо, то масштабировать изображение в графическом редакторе, чтобы изображение имело заданные размеры.

Карты ссылок

Ссылкой в документе может быть не только фраза, но и изображение. Например, если записать в тело страницы следующий код,

то выбирая на странице вашу фотографию пользователь перейдет по ссылке на вашу личную страничку.

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

Элементом, который определяет коллекцию чувствительных областей в графическом изображении, является тег <map>. Между его начальным и конечным тэгами содержится один или более тегов <area>, определяющих навигационные области карты. Атрибут name - единственный и обязательный параметр. Он определяет имя навигационной карты, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.

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

Атрибут shape определяет форму навигационной области. Он может принимать следующие значения: rect - прямоугольник; circle - окружность; poly - многоугольник. В зависимости от выбранной формы меняется способ задания ее координат в атрибуте coords. Способы задания координат для разных типов областей выглядят следующим образом:

shape="rect" coords="левый x, верхний y, правый x, нижний y";
shape ="circle" coords ="центр x, центр y, радиус";
shape ="poly" coords ="x1,y1,x2,y2,x3,y3,..."

Кроме границы области в теге <area> нужно указать атрибуты ссылки: href - определяет область как гипертекстовую ссылку и target - определяет окно на которое указывает гипертекстовая ссылка. Можно ещё указать атрибут alt, который определяет альтернативный текст-подсказку для данной области.

В случае, если область не является гипертекстовой ссылкой, атрибуты href и target не указываются. Вместо них пишется атрибут с единственным допустимым значением: nohref=”nohref”.

Пример:

<map name="image">
<area href="01.html" shape="rect" coords="0,0,70,140" alt="левая часть" />

Применить созданную карту к изображению можно вызвав ее по имени с помощью атрибута usemap тега img следующим образом:

Списки

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

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

Исходныйкод

Захват экрана

<ul>

<li>Наташа</li>

</ul>

В упорядоченном списке, в отличие от неупорядоченного, последовательность элементов определяется.

Исходный код

Захват экрана

<ol>

<li>Первый</li>

<li>Второй</li>

<li>Третий</li>

<li>Четвертый</li>

</ol>

Список определений используется редко. Список определений служит для выделения некоторых элементов, сопровождаемых пояснением. Например:

Исходный код

Захват экрана

<dl>

<dt>XHTML</dt>

<dd>Расширяемый язык разметки гипер-текста</dd>

<dd>Язык описания каскадных листов стилей</dd>

</dl>

Для создания вложенных списков следует пользоваться сочетанием обычных упорядоченных и неупорядоченных списков.

Таблицы

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

<tr>

</tr>

<tr>

</tr>

</table>

В этой таблице мы определили две строки, каждая из которых содержит три ячейки. В атрибутах мы задали свойства таблицы: border — толщина рамки, width — ширина таблицы. Все значения заданы в пикселах. Кроме того, у тега table можно указать следующие атрибуты:

cellspacing=”2” cellpadding=”2”,

которые определяют расстояние в пикселах (в примере — 2 пиксела) между ячейками в первом случае и между ячейкой и её содержимым во втором; rules=”all”, который описывает, какие линии отображать в таблице между ячейками. В приведенном примере атрибут устанавливает отображение всех линий в таблице. Также этот атрибут может принимать значения rows — отобразить только вертикальные линии, cols — только горизонтальные линии,groups — отображать линии между группами строк и столбцов (по поводу группировки см. ниже) и none — не отображать никаких внутренних линий.

Атрибуте frame описывает отображение внешних границ таблицы. Возможные значения: void, above, below, hsides, vsides, box, border (подробнее см. приложение 1)

Aтрибут summary содержит краткую информацию о предназначении и содержании таблицы, невидимую на экране браузера. Атрибут имеет вид summary="текст".

Пример использования атрибутов:

<tr>

<td>Весна</td>

<td>Осень</td>

</tr>

<tr>

</tr>

</table>

Тег описания ячейки td тоже обладает собственными атрибутами.

Атрибуты colspan и rowspan растягивают ячейку на указанное количество столбцов вправо или, соответственно, на указанное количество строк вниз. Например,

<tr>

</tr>

<tr>

</tr>

</table>

Атрибуты align и valign устанавливают выравнивание содержимого ячейки по горизонтали и по вертикали соответственно. Атрибут align по умолчанию имеет значение left (выравнивание по левому краю), но может принимать другие значения: right (по правому), center (по центру), justify(по ширине), char (по специальному символу, обычно по десятичной запятой). Возможные значения атрибута valign: top (по верхнему краю), middle (по середине, принимается по умолчанию), bottom (по нижнему краю).

Атрибут char задаёт символ, относительно которого текст в ячейке будет выравниваться (этот атрибут имеет смысл задавать только в том случае, когда значение атрибута align равно ”char”). По умолчанию текст будет выравниваться относительно точки. Это значит, что первые точки в каждой ячейке столбца выстроятся в одну линию по вертикали.

В таблице должна встречаться хотя бы одна строка и хотя бы одна ячейка в ней. Кроме обычных ячеек в таблице могут присутствовать ячейки с названиями колонок. Такие ячейки расположены в первой строке таблицы и отличаются от обычных только названием тега — th. Для тега th действуют все те же атрибуты, которые можно назначать для td. Может возникнуть вопрос, для чего нужен тег th, если его представление ничем не отличаются от тего td. Вспомним, что теги XHTML — это инструменты для логической, а не визуальной разметки страницы. Стандартный броузер выведет на экран содержимое тега th точно так же как и содержимое тега td. Но это не значит, что усилия, потраченные на то, чтобы специально обозначить первую строку таблицы пропадут зря. Эту логическую информацию сможет, например, эффективно использовать какая-нибудь программа, выполняющая расчеты по XHTML-документам.

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

Кроме того строки таблицы можно разбить на логические части. Тег thead — содержит строки заголовка, tbody — содержит строки тела (основную информацию) таблицы, tfoot — строки нижнего заголовка. Эти элементы являются группами строк и служат для логического разделения таблицы на части.

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

<dl>

<dt>XHTML</dt>

<dd>Расширяемый язык разметки гипер-текста</dd>

<dd>Язык описания каскадных листов стилей</dd>

</dl>

Фрэймы

Фреймы позволяют в одном окне броузера просматривать одновременно несколько XHTML-документов. Существует много споров о преимуществах и недостатках этой технологии. Рассмотрим её поподробнее.

Для реализации фреймов в XHTML используют специальное определение типа документа (DTD). Тег !DOCTYPE в документе с фреймами имеет следующий вид:

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

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

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

<head>

<title>Пример XHTML-документа с фреймами

</title>

</head>

<body>

<p>Если броузер не предназначен для отображения фреймов, то на экране появится этот абзац

</p>

</body>

</noframes>

</frameset>

</html>

Что же представляет собой структура этого web-документа? Объявление DTD, ограничение документа корневым тегом, метаинформационная часть в документе остались на том же месте. Затем следует тег frameset, который разбивает пространство окна броузера (в нашем случае вертикально, на две части). Затем следует описание этих двух частей с помощью тегов frame (обратите внимание, у этого тега нет закрывающего). Далее в границах тега noframes помещено тело документа, который загрузится в случае, если броузер не интерпретирует тег frameset.

Фреймом называется именованная область окна броузера, в которую может быть загружен отдельный документ. Для разбиения окна броузера на фреймы указывают размеры областей, в которых будут размещаться фреймы. В нашем примере окно броузера поделено вертикальной границей на две области. Область слева займет 20%, а размер правой области определится автоматически. Это разбиение задано атрибутом cols. Чтобы разбить окно броузера горизонтальными границами используется атрибут rows тега frameset. Значением атрибутов является набор размеров областей через запятую. Обозначение * употребляется для задания фрейма с автоматическим определением размеров занимаемой им области окна.

Атрибуты rows и cols могут быть также употреблены одновременно. Например, тег frameset в следующей записи задает разбиение окна броузера на четыре одинаковых квадрата:

<frameset rows=”50%,50%” cols=”50%,50%”>

Для каждой части пространства окна броезра, определяемой тегом frameset, должен быть создан собственный элемент разметки frame. У тега frame нет закрывающего.

В теге frame необходимо указать адрес документа, который отобразится во фрейме при первоначальной загрузке. Этот адрес указывается в уже знакомом нам атрибуте src. Документ, находящийся по этому адресу, создается в соответствии с обычным типом DTD Strict.

Кроме этого, фрейм имеет атрибут name, с помощью которого задается его имя. Такое имя внутри множества всех фреймов одного окна должно быть уникальным. Необходимо соблюдать правило, согласно которому значение атрибута name должно начинаться с буквы и не принимать значения _blank, _self, _parent и _top. Об использовании этих зарезервированных имен речь пойдет ниже.

Помимо рассмотренных выше, тег frame обладает еще атрибутами frameborder и noresize. Первый из этих атрибутов отвечает за отображение границ фрейма и, по умолчанию, принимает значение 1. Если границы отображать не нужно, то следует установить значение frameborder=”0”. Атрибут noresize может принимать единственное значение “noresize”, которое может быть задано для того, чтобы запретить пользователю изменять размеры фрейма.

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

Приведем пример разбиения окна броузера на области с использованием всех упомянутых нами атрибутов фреймов:

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

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

<head>

<title>Пример XHTML-документа с фреймами

</title>

</head>

<frameset rows=”40%,*” >

<frameset cols=”200,*”>

<frame name=”upperleft_fr” src=”first.htm” frameborder=”0” />

<frame name=”upperright_fr” src=”second.htm” frameborder=”0” />

</frameset>

<frame name=”lower_fr” src=”third.htm” noresize=”noresize” />

</frameset>

</html>

Итак, с помощью управляющего файла, содержащего тег frameset, мы можем описать структуру окна нашего ресурса и загрузить в различные области окна различные документы. Каждый из документов, загружаемых в окно, является гипертекстовым XHTML-документом и может содержать ссылки. Для того, чтобы указать, в какой из фреймов окна броузера требуется производить загрузку документа по ссылке, используется атрибут target тега a. В этом атрибуте указывается имя (значение атрибута name) того фрейма, в который должен быть загружен документ. Кроме этого, значениями атрибута target могут быть зарезервированные системные имена, имеющие следующее значение:

target=“_blank” — при нажатии на ссылку с таким значением атрибута создается новое окно броузера и документ, на который указывает ссылка, загружается в это окно;

target=”_self” — это значение применяется по умолчанию: новый документ загружается в том же окне, в котором находился просматриваемый документ со ссылкой;

target=”_top” — новый документ загружается в исходное окно броузера, в котором отсутствует фреймовая структура.

Фреймы используют обычно в случае, когда удобно или необходимо иметь перед глазами документ с набором ссылок для лучшего понимания и навигации в структуре организации набора документов. Во многих броузерах пользователь может запретить отображать фреймы, а некоторые броузеры вовсе их не поддерживают. Для таких случаев нужно указывать в теге noframes (он должен находится в пределах действия тега frameset) альтернативный вариант документа. Полезно поместить в него альтернативную панель навигационных ссылок.

Формы

Форма — это элемент веб-страницы, предназначенный для ввода информации. Формы используются для того, чтобы позволить пользователям вводить данные для их последующей обработки на web-сервере или в другой активной программной среде.

Основными элементами формы являются поля и кнопки. Поля предназначены для ввода данных пользователем, кнопки для выполнения определенных операций (например, таких как подтверждение ввода данных формы или восстановление установленных по умолчанию значений её полей). Сама форма реализуется с помощью тега form, а внутри конструкции <form>...</form> помещаются её элементы.

Для отправки на обработку введенных в форму пользовательских данных для тега form необходимо указать два параметра — action и method. Значение атрибут action указывает броузеру URI программы, которой предназначены данные из формы. Также можно переслать данные формы на указанный в этом атрибуте электронный адрес. В атрибут method записывают информацию о том, какой метод (множество допустимых методов определяется протоколом HTTP, на практике используются методы get и post) должен быть использован при передаче данных из формы. Этот параметр должен принимать значения post при передаче данных на электронную почту.

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

<form action=”mailto:my_name@mail.ru” method="post">...

</form>

<form action=”http://www.domain.com/cgi-bin/script.cgi” method="post">

...

</form>

Большинство элементов формы создаются при помощи тега input. Для определения типа элемента используется атрибут type этого тега. Среди основных значений, которые он может принимать, отметим следующие: text (текстовое окно), password (текстовое окно для ввода паролей), checkbox (флажок), radio (переключатель),submit (кнопка подтверждения), reset (кнопка возвращения всех элементов формы в начальное состояние. У тега input нет закрывающего. Рассмотрим его виды на примерах.

<form action=”mailto:my_name@mail.ru” method="post">

Исходный код:

<p>Введитеваше имя: <input type=”text” name=”fio” size=”20” maxlength=”100” />

</p>

<p> Введите название города, в котором вы проживаете:

</p>

<p> Введите пароль: <input type=”password” name=”pass” size=”20”/>

</p>

Захват экрана

<p> Отметьте ваш пол:

<input type=”radio” name=”sex” value=”male” /> мужской,

<input type=”radio” name=”sex” value=”female” checked=”checked” />

женский,

</p>

<!—После пояснения стоит элемент, который может принимать только два состояния: он либо включен, либо нет. Этот элемент называется флажок, в данном случае он носит имя newspaper и находится в отмеченном состоянии. Значение атрибута type установлено равным “checkbox” — это указывает на то, что элемент формы являетсяфлажком; атрибут name задает название, наличие атрибута checked заставит броузер выделить этот флажок при отображении. -->

<p>Отметьте поле, если хотите получать нашу электронную газету:

<input type=”checkbox” name=”newspaper” checked=”checked” />

</p>

<p> Нажмите на кнопку для отправки данных:

<input type=”submit” name=”fio” size=”20” value=”Отправить”/>

</p>

<p> Нажмите на кнопку чтобы очистить форму:

<input type=”reset” name=”reset” size=”20” value=”Всё удалить”/>

</p>

</form>

Вот как будет выглядеть продолжение этой формы:

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

Атрибут name содержит название поля, которое должно соответствовать имени переменной на сервере, в случае, если данные формы будет обрабатывать программа. Для указания имени рекомендуется использовать только латинские буквы.

В атрибуте value записывается текст, который отображается в поле по умолчанию. Для элементов checkbox (флажок), radio (переключатель) в том же смысле используют атрибут checked=”checked”. В незаполненной пользователем форме поля с этим атрибутом будут помечены по умолчанию.

Атрибут size принимает числовое значение, применяется для установки размеров при визуальном отображении элемента.

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

С помощью тега input с параметром type=”text” можно создавать однострочные поля. Это бывает неудобно, когда нужно дать пользователю возможность ввести довольно большой объем текста. В этом случае пользуются тегом textarea. Тег textarea нужен для создания многострочного текстового окна. Употребляется он с двумя атрибутами, описывающими его размеры: rows — количество видимых строк (высота), cols — количество отображаемых символов в каждой строке. Также для тега textarea указывается параметр name. Если в поле должен располагаться некоторый текст, который пользователь может редактировать, то он записывается в XHTML-документе между открывающим и закрывающим тегом textarea. Пример:

<textarea name=”details” rows=”6” cols=”50”> Пожалуйста, опишите здесь ваши пожелания </textarea>

Для создания выпадающего списка используется элемент select, между открывающим и закрывающим тегами которого помещаются теги option, каждый из которых соответствует элементу списка. У тега option нет закрывающей части. Пример выпадающего списка:

Исходный код:

<select name="education">

<option value="none" />без образования

<option value="middle" />среднее/незаконченное среднее

<option value="high" />высшее/незаконченное высшее

</select>

Захват экрана

Формы — практически единственный способ получения информации от пользователя. В основном, формы используются для анкетирования пользователей, получения обратной связи, в форумах и гостевых книгах, а также в более сложных web-приложениях.

Мультимедиа

В ХHTML существует возможность внедрения различных объектов в Web-страницы. Элемент object предназначен для работы с различными типами информации, такими, как Java-апплеты, встроенное видео, потоковые звук и изображение. В его синтаксисе используются два тега: object и param. Первый — для определения используемого объекта, а также основных параметров, связанных с объектом; второй — для установки специальных свойств объекта, определенного тегом object, во вложенных тегах param.

Тег object используется с несколькими атрибутами.

В атрибуте classid указывается уникальный идентификатор специального программного модуля, предназначенного для отображения или воспроизведения объекта на Web-странице. В атрибуте codebase записывается URI для загрузки специального модуля, в случае, если на компьютере пользователя этот специальный модуль отсутствует.В атрибуте codetype определяется тип мультимедиа-содержимого (Internet Media Type).

Если воспроизведение объекта не требует подключения специального модуля, то используются атрибуты data и type. В атрибуте data записывается адрес нахождения объекта (URI). Атрибут type определяет Internet Media Type содержимого объекта, заданного атрибутом data. Помимо этих атрибутов для тега object можно использовать id, height, width и некоторые другие. Полный список атрибутов смотрите в приложении 1.

Тег param устанавливает различные параметры встроенного объекта мультимедиа, в его атрибуте name определяется имя свойства объекта, которое нужно задать, а в атрибуте value записывается значение, которое должно быть присвоено свойству объекта, определенному в name. У этого тега нет закрывающего.

Рассмотрим несколько примеров использования тега object:

<object data="cougar.bmp" type="image/bmp">

</object>

<object data ="wavfile.wav">

</object>

</object>

</object>

<param name=”movie” value="dance.swf" />

<param name=”quality” value=”high” />

<param name=”bgcolor” value=”#ffffff” />

</object>

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