Web дизайн\Учебник по HTML\Приложение. Краткий справочник по командам XHTML и CSS

Web дизайн\Учебник по HTML

Приложение

Краткий справочник по командам XHTML и CSS

Элементы веб-документа
Стили и скрипты
Общая разметка
Изображения, гиперссылки, Java и плагины
Создание таблиц
Создание наборов фреймов
Создание форм
CSS

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

Элементы веб-документа

Эти элементы нужны для того, чтобы нормально оформить документ. Их атрибуты не менее важны, чем они сами.

Объявления DTD

Любая качественно оформленная веб-страница должна начинаться с объявления DTD, чтобы анализирующая ее программа знала, с чем имеет дело.

Объявление Strict DTD используется, если вы намереваетесь написать документ в полном соответствии с требованиями стандарта XHTML 1.0. Выглядит оно следующим образом:

<!DOCTYPE html PUBLIC "V/W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtmll-strict.dtd">

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

 <!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0 

Transitional//EN"
"DTD/xhtml 1-transitional.dtd">

Frameset DTD указывается, если страница построена на основе фреймов:

 <!DOCTYPE html PUBLIC "\//W3C//OTO XHTML 
 1.0 Frameset//EN" 
"DTO/xhtml 1 - frameset. dtd ">

Элемент <html>

Это контейнер первого уровня. Все, из чего состоит страница, должно быть помещено между открывающим и закрывающим тегами этого элемента. У <html> могут быть атрибуты lang и xml ns, определяющие пространство имен XML (в данном случае XHTML).

 <html xmlns="http://www.w3.org/1999/xhtml" lang=="en">

Элемент <head>

Этот элемент также является контейнером, внутри него могут располагаться другие элементы, имеющие отношение к заголовку документа: <title>, <meta>, <base>.

Собственно, обязательным является только <title>. У элемента <head> также может быть атрибут lang.

Например:

<head>
 ...элементы заголовка
</head>

Элемент <title>

Элемент <title> используется для определения текста, который будет появляться при загрузке страниццв заголовке окна браузера. Его же можно использовать для | создания закладок на определенные страницы, а также и в других ситуациях, когда можно документу сопоставить его название. Он должен располагаться внутри контейнера <head>. У данного элемента тоже может быть атрибут Lang.

Например:

<head>
<titlе>Пример заголовка</titlе>
</head>

Элемент <meta />

Это необязательный элемент. Предназначен для передачи браузеру и другим приложениям дополнительных сведений о документе, называемых метадан ними. У него могут быть атрибуты content, а также либо name, либо http-equiv. Оба последних сосуществовать в одном элементе ие могут.

Элемент <meta> используется с разными целями, особенно его любят вставлять графические веб-редакторы.

Примеры:

<meta name="keywords" 
content="PC.hardware.repair,laptop.newsfeed" />
<meta http-equiv="refresh" content="30";
url="http://www.fakenews.com/newpage.html" />

Элемент <base />

Еще один необязательный, но очень удобный элемент. С его помощью указывается базовый URL, чтобы в ссылках, встречающихся в документе, можно было применять относительный URL. Например, если базовый адрес http://www.fakecorp.coni/ products/, а в ссылке написано href = "productl. html", то в результате получим http:/ /www.fakecorp.com/products/productl.html, и этот URL не будет зависеть от того, где реально расположен документ, в котором встретилась относительная ссылка. У элемента <base /> могут быть атрибуты href и/или target. Последний используется для указания целевого фрейма.

Примеры:

<base href="http://www.fakecorp.com/people/bob/" />
<base target="main_viewer" />

Элемент <body>

Это очень важный контейнер. В нем содержится все, что есть на HTML-странице, но не вошло в контейнер <head>. У него, как и у многих других элементов, может быть атрибут lang.

Например:

<body> .
<h1>Hello World</h1>
  ...содержимое страницы... 
</body>

Элемент «комментарий»

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

Например:

<!-- Этот комментарий уместился на одной строке -->
<!•- А это комментарий не уместился на одной строке,
но в этом нет ничего страшного :-) -->

Стили и скрипты

Хотя таблицы стилей и скрипты могут показаться чуть более сложными предметами, чем обычная HTML-разметка, но тем не менее они иногда располагаются в разделе <head> документа и имеют атрибуты, которые могут применяться почти ко всем элементам XHTML.

Элемент <script>

В этом элементе содержится исходный код скрипта на каком-либо языке программирования. Это означает, что браузер не должен пытаться воспринимать эти символы как XHTML. Вместо этого ему следует опознать скрипт и обратиться к обработчику скриптов, который зачастую встроен в браузер. У элемента <scri pt> может быть атрибут type, иногда для большей совместимости используется lang.

Например:

<script type="text/javascript"> 
 ...команды JavaScript...
</script>

Обычно контейнер <script> прячут от браузера, чтобы не возникало проблем со старыми обозревателями, которые могут попытаться прочитать команды скрипта как команды XHTML.

Например:

<script type="text/javascript">
«!---
команды скрипта
// -->
</script>

Элемент <noscript>

В тех документах, в которых имеется элемент <script>, можно указать элемент <noscript>, в котором содержится текст и разметка, которая показывается только не поддерживающими скрипты браузерами.

Например:

<noscript>
Требуется поддержка JavaScript. 
Пожалуйста, обратитесь
<а href="index2.html">сюда</а>.
</noscript>

Элемент <style>

Контейнер <style> должен располагаться в секции <head>. В нем хранятся определения стилей и классов. Возможный атрибут — type.

Например:

<style type="text/css">
...Определения CSS,.. 
</style>

Стили, скрипты и универсальные атрибуты

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

ПРИМЕЧАНИЕ

Элементы, расположенные внутри <head> (<meta> и др.), а также сами <script> и <style> не имеют этих атрибутов.

class

Атрибут class применяется для того, чтобы присваивать определенные классы стилей элементам разметки страницы. Сами эти классы определяются внутри <style>. (А есть еще <di v>, с помощью которого один и тот же стиль можно применять сразу к нескольким элементам. Об этом мы поговорим далее.)

Примеры:

<р class="intro">текст абзаца</р> 
<div class="centerbold "> 
 ...текст и разметка. ..

Атрибут id используется для определения уникального идентификатора элемента. Чаще всего это делается для того, чтобы на элемент можно было сослаться из скрипта.

Например:

<р id="paral">
<текст абзаца</р>

style

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

Например:

 <р style="font-family: Arial">
  текст абзаца</р>

dir

Атрибут di г задает направление написания текста. Его можно использовать только н контейнерных элементах, но не во <frame> или <frameset>. Возможные значения: Иг (слева направо) и rtl (справа налево).

Например:

 <р dir="rtl">текст абзаца</р>

lang

С помощью атрибута lang можно указать язык, на котором написан текст внутри данного контейнера. Это может помочь браузеру правильно отобразить символы. Значениями атрибута должны быть двухбуквенные обозначения национальных языков.

Например:

<р lang="fr">текст абзаца на французском языке</р>

Общая разметка

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

Форматирование блоков

Есть ряд элементов, которые определяют некие блоки, отрывки текста, такие как абзацы, цитаты, заголовки и пр.

Среди них есть набор контейнеров, представляющих собой вариации на тему элемента <р>, задающего абзац. Абзац выделяется наличием пустого места на странице перед его началом и после его конца.

Например:

 <р>Это - текст абзаца.</р>

Ниже показаны элементы, работающие по тому же принципу, что и <р>.

<рге>. Элемент <рге> определяет форматирование, в точности повторяющее то, что задано в исходном коде.
<blockquote>. Считается, что текст, находящийся внутри этого контейнера, выглядит как цитата.
<address>. Такой стиль называется «информация об авторе». Многие браузеры отображают такой текст курсивом.
<di v>. Контейнер <di v> часто используется для того, чтобы применить один стиль ко всем входящим в него элементам. У него может быть атрибут а 1 ign, позволяющий разместить элементы в соответствии с такими значениями: center, left, right, justify. (Обратите внимание, al ign не входит в стандарт Strict XHTML.) Вокруг разметки, включенной в <div>, как и вокруг абзаца, браузер оставляет пустое место, однако в отличие от <р> в <di v> может входить несколько элементов блокового уровня.
<h1>. . .<h6>. С помощью этих элементов можно задать шесть уровней заголовков в тексте. По правилам хорошего тона, их нужно использовать только в стро гой очередности, не пропуская ни один уровень. Как и вокруг абзацев, вокруг заголовков можно тоже заметить пустое пространство.

Существуют еще два элемента, позволяющие как-то разбить текст. Они не явля ются контейнерами, а называются «пустыми» элементами. Это означает, что внутри них не может быть никакого текста и разметки.

<bг />. Разрыв строки. Распознается браузером как перевод каретки.
<br />. Горизонтальная линия. С помощью атрибутов этого элемента можно менять ширину, длину и вид линии.

Наконец, следует упомянуть еще один элемент — контейнер <span>, используемый для того, чтобы можно было применить один и тот же стиль ко всем содержащимся в нем элементам. <span> отличается от <di v> только лишь тем, что не оставляет пустого места вокруг себя. Поэтому следующий пример не приведет к разрыву абзаца:

<р>Этот текст<sраn class="bold">
Написан жирным шрифтом</sрап>,
а этот - нет.
</р>

Форматирование текста

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

Физические стили

Элементами, определяющими физические стили, являются:

<b> — жирный;
<i> — курсив;
<tt> — моноширинный шрифт, как на печатающей машинке;
<u> — подчеркивание;
<big> — увеличенный размер;
<small > — уменьшенный размер;
<sub> — нижний индекс;
<sup> — верхний индекс.

Например:

<р>Этот текст написан <i>курсивом</i>, 
этот - <b>жирным</b>.
этот выделен <tt_>моноширинным шрифтом</tt>,
 а этот - <u>подчеркнут</u>.</р>

Логические стили

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

Список логических элементов:

<ет> — выделенный;
<strong> — особо выделенный;
<cite> — цитата или ссылка на внешний источник;
<code> — вставка исходного программного кода;
<dfn> — определение;
<samp> — пример, часто выглядит как <code>;
<kbd> — нечто подлежащее вводу с клавиатуры;
<var> — переменная или значение;
<q> — цитированный текст в кавычках;
<abbr> — аббревиатура;
<acronym> — акроним.

Особенно интересен логический стиль <q>. Он в большинстве браузеров окружает текст кавычками. А если указать в атрибуте lang какой-нибудь язык, в котором эти кавычки обычно выглядят не так, как в английском, то они действительно будут перерисованы!

Эти два логических стиля используются, когда нужно напомнить самому себе о том, что данный кусок текста должен быть (или уже) вставлен или удален. Часто применяется при создании сайта группой дизайнеров. Среди атрибутов этих элементов могут быть datetime, cite и title. В datetime можно указать дату и время удаления/ вставки. В cite ставится ссылка на URL, по которому содержится пояснение к данному отрывку. Используя атрибут title, можно вставить пояснения прямо в тег.

Например:

<р>Важная информация для 
<ins datetime="2001-12-05T09:00:00-05:00" 
title="Изменить после голосования">Совета директоров
</ins>
<del>
Президента компании
</del>: акционеры вами недовольны.</р>

Списки

Списки являются элементами блокового уровня, контейнерами, содержащими определенные пункты, определяемые с помощью элемента <li>. Чтобы изменить стиль списка, нужно изменить контейнер, в котором содержатся все <l i>.

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

Например:

<оl> 
<li>ПерВЫЙ ПУНКТ<li> 
<li>Второй пункт</li> 
<li>Третий пункт</li>

Соответственно, маркированный список отличается тем, что перед каждым пунктом ставится маркер.

Если вы работаете с переходным DTD, то можете смело использовать атрибуты start, value и type для настройки упорядоченных списков. (В стандарт XHTML 1.0 они не вошли.) Значения type следующие:

<оl type="A"> — прописные буквы;
<ol type="a"> — строчные буквы;
<оltype="I"> — большие римские цифры;
<ol type="i"> — маленькие римские цифры;
<ol type="l"> — арабские цифры (по умолчанию).

Что касается неупорядоченных списков, то в них с помощью type можно изменять вид маркера:

<ul type="disc"> — кружок;
<ul type="square"> — квадратик;
<ul type="circle"> — кольцо.

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

Например:

<ol start="10">

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

Например:

<li value="1 ">#!</li>
<li>#2</li>
</ol>

Есть еще третий, менее распространенный тип списка, задаваемый элементом <dl>. Это список определений. Соответственно, внутри списка один из элементов (<dt>) является контейнером для термина, а другой (<dd>) — для описания этого термина. Никто не обязывает вас использовать их исключительно вместе друг с другом, однако наиболее ценен такой список именно тогда, когда он состоит из этих двух частей. В списке определений (словаре, если хотите) перед пунктами не ставятся ни номера, ни маркеры.

Например:

<dl>
<dt>TepMHH l</dt>
<dd>описание термина l</dd>
<dt>Термин 2</dt>
 <dd>0писание термина 2
</dd>

Изображения, гиперссылки, Java и плагины

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

Вставка изображений

Для вставки изображений используется элемент <img />. При этом указывается абсолютный или относительный путь к графическому файлу в подходящем формате (GIF, JPEG, некоторые браузеры работают с PNG). Для этого нужен атрибут
src.

Например:

<img src="imagel.gif" />

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

Например:

<img src="chartl.jpg" аlt=
"Таблица продаж за первый квартал"
 longdesc="/img_desc/ chartl.html" />

У <img /> также может быть атрибут align, позволяющий задать расположение картинки относительно окружающего текста. Изображение становится «плавающим», если в качестве значения align указать left или right. Текст при этом как бы обтекает графику.

Еще следует упомянуть об атрибутах height и width. Они применяются для масштабирования изображения. Значения задаются в пикселах. Обычно этот прием используется для того, чтобы оконечный браузер мог быстрее загрузить страницу с изображением.

Например:

 <img src="chartl.jpg" alt="chart #1" align=
"left"   height="330" width="200" />

Вставка гиперссылок

Гиперссылки создаются с помощью особого элемента под названием «якорь» (<а>). Однако сам по себе якорь не означает почти ничего. Сама гиперссылка задается атрибутом href, значением которого может быть относительный или абсолютный адрес. Якорь является контейнерным элементом, — это значит, что между его открывающим и закрывающим тегами может располагаться любой текст со своей разметкой, изображение или даже мультимедийный элемент. Единственное ограничение заключается в невозможности создания вложенных ссылок. То есть один <а> внутрь другого вы поместить не можете.

Примеры:

<а href="http://www.w3.org">Посетите сайт W3C
</a>
<а href="products/productl.html">
<img src="productl.jpg" alt="Фрукт-продукт №1"  />
</а>

У якоря также может быть атрибут name, с его помощью создаются поименованные секции внутри документа. К ней затем можно обратиться с помощью значка #, вставленного перед URL

ПРИМЕЧАНИЕ

Атрибут name не входит в стандарт XHTML 1.0, поэтому лучше всего использовать переходный DTD, а также одновременно name и id в одном и том же якоре.

Итак, давайте создадим поименованную секцию:

<а name="answerl" id="answerl"><h2>Ответ:
Потому что оно синее. </h2>
</a> А теперь создадим ссылку на нее: 
<а href="#answerT'>Bonpoc: Почему небо синее?
</а>

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

<а href="http://www.fakecorp.com/questions.
html#answerl">
Bonpoc: Почему небо синее?</а>

Обратите внимание на то, что гиперссылки могут быть самых разных видов. В частности, могут указываться различные протоколы, например ftp://. Ссылка на документ, который браузер не может открыть самостоятельно, приведет либо к запуску вспомогательного приложения, либо к тому, что обозреватель спросит у пользователя, что делать дальше.

У <а> может быть и еще один интересный атрибут под названием target. С его помощью можно указать целевой фрейм либо вообще целевой объект, в котором будет открыта ссылка. Эти объекты могут быть следующими:

_blank — ссылка будет загружена в новое окно обозревателя;
_top — загружает ссылку в текущее окно, независимо от наличия фреймов;
_parent — загружает ссылку в родительский фрейм;
_sel f — загружает ссылку в текущий фрейм.

Пример:

<а href="productl.html" tаrgеt="_blank">
Ссылка будет открыта в новом окне.</а>

Карты ссылок

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

Как это сделать? Для этого существует атрибут элемента <img /> под названием usemap. В нем указывается ссылка на некий поименованный объект, часть страт цы, в которой определена карта ссылок.

Например:

<img src="banner.gif" usemap="#banner_map" аlt=
"навигационный баннер" border="0" />

ПРИМЕЧАНИЕ

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

Атрибут usemap сообщает браузеру о том, что где-то рядом должно быть определение карты ссылок. Оно создается с помощью <тар>, в котором отдельными элементами <агеа /> задаются «горячие области». У <тар> имеется атрибут name — идентификатор карты ссылок.

Итак, поговорим об элементе <агеа />. Он задает не только расположение и размеры области (атрибут coords), можно указать и ее форму (атрибут shape). Конечно же, должен присутствовать атрибут href — собственно ссылка на URL. У shape могут быть следующие значения:

rect — прямоугольник, требуются четыре координаты, задающие отступ слева, верхний отступ, правый и нижний;
ci rcl e — зона в форме окружности, нужны три координаты: х центра, у центра, а также радиус.;
polygon — многоугольник, каждая вершина задается парой координат (х, у).

Например:

<map name="banner_map">
<area shape="rect" coords=
"0. 0.100, 100" href ="index.html" аlt="Индекс"  />
<area shape="rect" coords=
" 100. 0.200. 100" href="products.html" alt="Products" />
<area shape="rect" coords=
"200. 0.300. 100" href ="about. html" alt="0 
 компании" />
</map>

Если вы хотите создать серверную карту ссылок, можно использовать атрибут ismap="ismap" элемента <img />. Затем поместить последний внутрь якоря, ссылающегося на файл карты на сервере.

Например:

<а href="/maps/topbanner.map">
<img src="topbanner.gif" ismap=
"ismap" аlt="Баннер" />

Мультимедийные элементы

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

Для этого существует элемент <embed> (который, правда, не входит в стандарт XHTML 1.0, то есть нужно применять DTD для XHTML Transitional). Он загружает специальный плагин, который обеспечивает выполнение дополнительных функций Netscape-совместимыми браузерами. В зависимости от типа подгружаемых данных, у <embed> могут быть несколько разных атрибутов. Наиболее часто встречаются следующие: src, width, pluginspage и в некоторых случаях autoplay. Нужно смотреть документацию по конкретным плагинам (а также главу 13).

Например:

<embed name="Moviel" src="moviel.mov" width="240"
 height="120" piuginspage=
"http://www.apple.com/quicktime/download/">
</embed>

Java-апплеты

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

Вставляются апплеты с помощью элемента <object>, входящего в стандарт XHTML Наряду с ним, впрочем, популярен и устаревший ныне Netscape-элемент <applet>. Что же касается <object>, то он должен иметь атрибут classid, ссылающийся на файл с апплетом. Может быть и другой атрибут — codebase, если требуется указать полный URL Java-апплета.

Например:

<object codetype="application/java"
 codebase="http://www.fakecorp.coin/applets/" 
classid="java:myapplet.class"
 standby="HfleT загрузка..." width=400 height=350>
</object>

Создание таблиц

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

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

width — устанавливает относительную ширину (в процентах) таблицы относительно окна браузера, можно указать и абсолютное значение в пикселах;
Border — определяет ширину окружающей таблицу рамки (в пикселах);
Cel I spaci ng — межклеточное расстояние;
Cel I paddi ng — внутриклеточный отступ;
Rules — определяет, какие из внутренних линий таблицы будут видны (значения: none, groups, rows, cols или all);
Frames — определяет, какие части внешней рамки таблицы будут видны (значения: above, below, hsides, Ihs, rhs, vsides, box или border).

Еще один атрибут, align, может задавать расположение таблицы относительно окружающего текста (тогда таблица будет называться «плавающей»), однако он не входит в стандарт XHTML. Его значениями могут быть right и left.

Например:

<table border="1" cellpadding="5"
cellspacing="5" width="50%">
</table>

Еще у элемента <table> может быть атрибут summary, особенно широко используе-
мый различными нестандартными браузерами.

Например:

<table summary="B этой таблице показано, 
что объем продаж за первый квартал текущего года 
в северном регионе составил 500 единиц, в западном
он составил 400 единиц, в восточном - 600 единиц, 
а в южном - 300. ">

Внутри контейнера <table> располагаются различные элементы, составляющие таблицу. Среди них может быть необязательный элемент <capt1 оп>, в котором указывается текст заголовка.

Например:

<table>
<сарtion>
<b>Объемы продаж в регионах за первый квартал
текущего года</b>
</сарtion>
</table>

Далее следуют контейнеры строк <tr>, контейнеры заголовков столбцов или строк <th>, а также контейнеры ячеек <td>.

Например:

<table>
<сарtion><b>0бъемы продаж в регионах по
 кварталам текущего года</b>
</caption>

<tr><th>Becнa</th><td>500</td>
<td>300</td><td>200</td></tr>
<tr><th>Лето</th><td>600</td>
<td>400</td><td>650</td></tr>
</table>

Как строки таблицы, так и ячейки могут иметь параметры val ign и align. Первый применяется для вертикального выравнивания данных в ячейке и может иметь значения top, middle и bottom. Второй, соответственно, применяется для горизонтального выравнивания данных и может иметь значения left, center и right. Значения, указанные для конкретных ячеек (<td> или <th>) перекрывают значения, установленные для целой строки (<tr>).

Например:

<table border»" 1">
<tr valign="top">
<td><img src="imagel.gif" /></td>
<td valign="bottom"><img src="image2.gif"  />
</td>
<td><img src="image3.gif" /></td>
</tr>
</table>

Ячейки можно «растягивать» в разных направлениях, точнее, объединять их с другими. Для этого используются атрибуты rowspan и colspan.

Например:

<table>
<tr><th>Студент</th>
<th colsраn="2">0ценки</th>
</th> <tr><td>Миша</td><td>100</td>
<td>90</td></tr> <tr><td>Caша</td>
<td>85</td><td>100</td></tr> <tr>
<td>Taня</td>
<td colspan="2">95</td></tr>
</table>

ПРИМЕЧАНИЕ

У строк и отдельных ячеек может быть атрибут bgcolor, с его помощью можно задать цвет заднего фона (в шестнадцатеричном формате или указав название). Так, например, значению в шестнадматеричном формате #FFFFFF будет соответствовать название white (белый). Имейте в виду, что этот атрибут не вошел в стандарт XHTML, а значит, может применяться только с переходным DTD.

Кроме всех перечисленных элементов, в контейнер <tab1e> могут входить еще три: <thead>, <tfoot> и <tbody>. Особенно интересный эффект получается при просмотре таблицы с такими элементами в браузере, который их может нормально интерпретировать. В этом случае пользователь заметит, что при прокручивании длинной таблицы (<tbody>) вниз ее заголовок (<thead>) и основание (<tfoot>) остаются неподвижными. Спецификация XHTML требует, чтоб в исходном коде контейнер <tfoot> следовал сразу за <thead>. Это нужно для того, чтобы браузер мог корректно обработать эти элементы. Вместе с тем такое их расположение может привести к тому, что поменяется порядок секций при просмотре в каких-нибудь старых браузерах.

Например:

<table>
<thead>
 Данные заголовка
</t_head>
<tfoot> .
Данные основания
</tfoot>
<tbody>
Данные тела таблицы
</tbody>
</table>

Создание наборов фреймов

С помощью элементов <frameset> и <frame> можно сделать так, что в одном и том же окне браузера будут отображаться сразу несколько HTML-документов. Кроме того, с помощью атрибута target можно задавать целевой фрейм для тех или иных ссылок.

Для начала нужно указать в начале документа особый DTD, соответствующий стандарту наборов фреймов. После этого должен следовать элемент <frameset>, который чем-то напоминает <body> обычных документов. У него может быть два атрибута: rows и col s. Каждый <frameset> определяет либо строку, либо столбец фреймов. Если вам нужно вложить одно в другое, следует использовать несколько элементов <f rameset>. Значения атрибутов rows и col s могут указываться либо в пикселах, либо в процентах. Одним из стандартных значений является *, которая означает «оставшаяся часть окна».

Например:

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 
1.0 Frameset/EN"
"http://www.w3.org/TR/xhtmll/DTD/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>Frameset</title>
</head>
<frameset cols="150.*">
</frameset>
</html>

Внутри каждого <frameset> могут быть элементы <frame> и <noframe>. Яричем там будет столько <f rame>, сколько столбцов или строк вы определили для данного <frameset> (если только вы не вкладываете их один в другой, о чем будет сказано далее). Но на всю страницу может быть не более одного элемента <nof rames>. Последний позволяет задать альтернативный текст или разметку для браузеров, не поддерживающих фреймы.

У элемента <frame> должен быть атрибут src, определяющий URL страницы, которая будет выводиться в данном фрейме. Может быть еще необязательный атрибут id — идентификатор, на который можно сослаться как на обозначение целевого объекта.

ПРИМЕЧАНИЕ

Хотя id — это вполне стандартный атрибут с точки зрения XHTML, но для совместимости со старыми браузерами следует вставлять еще и атрибут name.

Как я уже говорил, содержимое элемента <nof rame> будет выведено только теми браузерами, которые ничего не знают о фреймах.

Например:

frameset cols="150.*">
<frame src="index.html" />
<frame src="viewer.html" name="main_viewer" id=
"main_viewer"   />
<noframes>
<р>Если ваш браузер не поддерживает фреймы, 
перейдите напрямую к
<а href="/articles/index.html">
списку статей</а>
direktly.</р>
</noframes> .
</frameset>

У элемента <frame> может быть еще ряд дополнительных атрибутов:

noresize="noresize" — запрещает изменение размера фрейма пользователем;
frameborder — значения — 1 или 0 (например, frameborder="l"); в первом случае у фрейма будет граница, во втором — нет;
scrolling — значения — yes, no или auto; этот параметр задает режим прокрутки: разрешено (всегда видна полоса прокрутки), запрещено или «прокрутка по требованию»;
marginwidth — изменяет правый и левый отступы во фреймах; единицы измерения — пикселы;
marginheight — изменяет верхний и нижний отступы во фреймах; единицы измерения — пикселы;
longdesc — позволяет указать ссылку (то есть URL) на HTML-документ, содержащий описание содержимого фрейма; пользователи нестандартных браузеров будут вам благодарны, если вы вставите этот атрибут.

Существует возможность создания вложенных наборов фреймов. Таким образом можно, например, организовать две строки фреймов в одной колонке или что-нибудь в этом роде. Это делается просто: заменяем один из элементов <frame> на второй <frameset>.

Например:

<frameset rows="150,*">
<frame src="topbanner.html" />
<frameset cols="25*.75r>
<frame src="leftcol.html" 
name="left_col" id="left_col"   />
<frame src-"default.htmV 
name="viewer" id="viewer"   />
</frameset>
</frameset>

Атрибут target элемента <а>, как уже говорилось, применяется для задания целевого фрейма. Скажем, в предыдущем примере ссылка на 1 eftcol .html могла бы выглядеть так:

<а href="newpage.html" tагдеt="viеwеr">
Щелкните здесь, чтобы увидеть новую страницу</а>

При этом документ newpage.html загрузится во фрейм под именем viewer.

Создание форм

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

Элемент <form>

Главный элемент данной спецификации — это контейнер <form>. Его атрибутами являются method и action. Значениями первого могут быть get или post. Метод get означает, что данные формы будут в явном виде добавлены к URL обрабатывающего их скрипта. Это накладывает серьезные ограничения на их размер. Метод post отсылает данные отдельно, а значит, никаких практических ограничений на размер быть не может.

Вторым атрибутом является action, значение которого представляет собой URL скрипта, который будет обрабатывать данные. Обычно скрипты хранятся в каталоге bin или cgi -bin на сервере.

Например:

<form method="post" action=
"http://www.fakecom.net/cgi-bin/ survey.pl">
</form>

Кроме этих двух основных атрибутов, у <f orm> могут быть следующие параметры:

enctype — позволяет указать разновидность (MIME) содержимого передаваемых данных;
name и id — идентификатор формы (нужен скриптам или таблицам стилей, при этом id входит в стандарт XHTML, a name требуется исключительно для совместимости со старым ПО);
accept — типы данных (через запятую), поддерживаемые сервером; используются имена MIME;
accept-charset — поддерживаемые сервером кодировки.

Элемент <textarea> позволяет пользователю вводить несколько строк данных. Это контейнер, в нем можно задать текст, который будет в текстовом поле по умолчанию. У него могут быть атрибуты rows и cols, определяющие размеры поля, а также атрибут name —идентификатор.

Например:

<textarea name="comments" rows="4" cols="40">
Введите комментарии, касающиеся нашего сайта.
Не забудьте оставить свой e-mail!
</textarea>

Еще один возможный атрибут — readonly. С его помощью можно сделать текстовое поле неизменяемым.

Элемент <input />

У этого элемента может быть атрибут type, с его помощью определяется тип элемента управления.

Его значения:

text — поле ввода (то же самое, что текстовое поле, но меньше по размеру);
password — то же самое, что text, но вместо букв показываются звездочки;
checkbox — флажок, который можно установить и снять;
radio — переключатель, можно выбрать только один из нескольких;
hidden — скрытое поле, которое пользователь не может изменить;
reset — кнопка очистки формы;
submit — кнопка подтверждения формы.

У элемента <input /> может быть атрибут name, используемый для определения уникального идентификатора. Атрибут value — начальное значение (а также текст на кнопках очистки и подтверждения формы).

СОВЕТ

Если значением type является text или password, то можно в состав атрибутов <input /> включить size (размер поля) и maxlength (максимальная длина строки).

Например:

<form method="post" action="cgi-bin/form.pi">
<pre>
Имя:<input type="text" name="name"
 length="40"         />
Выберите свой приз:
<input type="checkbox" name="car" />Новая машина
<input type="checkbox" name="cash" />Деньги
<input type="checkbox" name="land" />Квартира
Хотите узнать больше о наших рассылках?
<input type="radio" name="subs" value-
"yes" checked="checked" />Да
<input type="radio" name="subs"
 value="no"   />Нет
<hr />
<input type="submit" value-''Подтвердить" />
<input type="reset" уа!ие="0чистить" />
</pre>
</form>

Обратите внимание: все флажки (checkbox) имеют разные значения name, в то время как вся группа переключателей имеет один и тот же идентификатор. Также обратите внимание на атрибут checked. Он позволяет задать начальное значение флажка или исходное положение переключателей.

Элемент <select>

Элемент <sel ect> применяется для создания выпадающих и прокручиваемых меню. Ему требуется параметр name. С помощью size можно определить число пунктов, одновременно показываемых на экране. <select> является контейнером, содержащим несколько элементов <opti оп>. Последние должны иметь уникальные значения, которые при выборе того или иного пункта присваиваются переменной, имеющей имя, указанное в <select>. С помощью атрибута selected="selected" указывается пункт, выбранный по умолчанию.

Например:

Ваше хобби
<select name="hobby">
<option sеlected="sеlected">Поедание пищи</орtion>
<option>Домино</option>
<орtion>Программирование</орtion>
<орtion>Кулинария</орtion>
</select>

Если установить параметр size элемента <select>, то можно выпадающее меню превратить в прокручиваемое. Другой параметр, multiple="multiple", позволяет выбирать одновременно более одного пункта.

Наконец, можно группировать пункты с помощью <optgroup>. У этого элемента может быть атрибут label — метка группы внутри <select>. Элементы <optgroup> используются некоторыми браузерами для организации управления <select>.

Например:

<р>Ваше хобби:</р>
<select name="hobby" size="15" multiple="multiple">
<option value="none" selected-"selected">Отсутствует
</option>
<optgroup label="indoors">
<орtion>Поедание пищи</орtion>
<орtion>Сидение перед компьютером
</орtion>
<орtion>Искусство и ремесла
</орtion>
</optgroup>
<optgroup label="outdoors">
<орtion>Поедание пищи на свежем B03духе
</option>
<option>noxoдыi</option>
<орtion>Велопрогулки</орtion>
</optgroup>
<optgroup label="sports">
<орtion>Поедание пищи на скорость
</орtion>
<орtion>Баскетбол</орtion>
<орtion>Плавание</орtion>
</optgroup>
</select>

CSS

В этом разделе я напомню некоторые таблицы из глав 10 и 14. В таблице П.1 показаны свойства текстовых стилей.

Таблица П.1. Свойства текстовых стилей

Свойство	Значения	Примеры
word-spacing	Число и ед. измерения	1pt, 4em, lin
letter-spacing	Число и ед. измерения	3pt, 0 0,1em, +1
line-height	Число и ед. измерения	14pt
text-decoration	Значение	underline, line-through, box, blink
text-transform	Значение	capitalize, lowercase, uppercase, none
text-indent	Число и ед. измерения либо проценты	lin, 5%, 3em
vertical-align	Значение либо проценты	baseline, sub, sup, top, middle, 50%
text-align	Значение	left, right, center, justify

В таблице П.2 показаны всевозможные свойства шрифтов.

Таблица П.2. Свойства шрифтов

Свойство	Значение	Примеры
font-family	Название шрифта	Helvetica, Serif, Symbol
font-size	Число/процент	12pt, +1, 120%
font-weight	Число/значение	normal, bold, bolder, 100, 900
font-style	Название стиля	italic, oblique, normal
font-variant	Название стиля	normal, small-caps
font	Комбинация	12pt Serif
color	Спово/16-ричное число	red, green, blue, #ff00aa

В таблице П.З вы найдете свойства фона.

Таблица П.З. Свойства фона

Свойство	Значение	Примеры
background-color	Название цвета или значение в формате RGB	white, #0000ff
background-image	url()	url(image.gif), url(http://www.fakecorp.com/bgnd.jpg)
background-repeat	Название режима	repeat, repeat-x, repeat-y, no-repeat
background-attachment	Название режима	scroll, fixed
background-position	Направление или процент	top, left, center, 20%, 65%
background	Комбинация	white url(image.gif) repeat-x fixed

Таблица П.4 представляет собой свод стилей блокового уровня (типа абзацев).

Таблица П.4. Свойства блоков

Свойство	Значение	Примеры
margin	Длина или проценты	lin, 5% 10%, 12pt lOpt 12pt lOpt
padding	Длина или проценты	lin, 5% 10%, 12pt lOpt 12pt lOpt
border	Ширина/стиль/цвет	medium dashed red, 2in grooved, blue
width	Длина или проценты	.5in, 10%
height	Длина или проценты	10tm,12pt
float	Направление	left, right, none
clear	Направление	left, right, none, both

В таблице П.5 показаны псевдоклассы для создания эффектов наведения с помощью CSS.

Таблица П.5. Псевдоклассы

Свойство	Объяснение
:link	Вид ссылки до того, как на ней щелкнули
: visited	Вид ссылки после того, как на ней щелкнули
: hover	Вид ссылки или объекта в тот момент, когда на них находится указатель
:focus	Вид ссылки или объекта во время ввода текста или при выделении
: active	Вид ссылки или объекта во время их выбора (при нажатой кнопке мыши или - клавише Enter)

Таблица П.6 несколько отличается от остальных. В ней представлены голосовые свойства CSS2, которые применяются в нетрадиционных браузерах.

Таблица П.6. Речевые элементы CSS2

Свойство	Значения	Описание
azimuth	left, center-left, center, center-right, right или угол (от -360° до 360°)	Позволяет задать угол, под которым находится воображаемый источник звука относительно слушателя
cue-after	url	Проигрывает звуковой файл, расположенный по указанному URL, после прочтения текста
cue-before	url	Проигрывает звуковой файл, расположенный по указанному URL, до прочтения текста
elevation	below, level, above или значение угла (от -90° до 90°)	Угол в вертикальной плоскости, под которым расположен воображаемый источник звука
pause-after	секунды или миллисекунды	Пауза после проговаривания элемента
pause-before	секунды или миллисекунды	Пауза перед проговариванием элемента
pause	секунды или миллисекунды	Пауза до и после проговаривания элемента
pitch	low, medium, high или частота (Гц)	Высота звучания голоса
pitch-range	0, 50 или другое число	Величина колебания частот: 0 — монотонно, 50 — нормально
play-during	url	Адрес звукового файла для фонового воспроизведения
speak	none, normal, spell-out	Манера произношения
speak-numeral	digits, continuous	Манера произнесения числительных: цифра за цифрой либо все число сразу
speak-punctuation	none, code	Значение «code» означает, что все знаки пунктуации нужно называть («точка», «запятая» и т. д.)
speak-rate	slow, medium, fast, число слов в минуту	Скорость речи
voice-family	male, female, Zervox, Princess, child	«Чьим» голосом говорить (как и шрифты, голоса должны быть установлены на компьютере пользователя)
volume	silent, soft, medium, loud	Громкость