Meta

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

Пример:

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

Спецификация HTML не определяет каких-либо конкретных имен свойств, записываемых в тэге <meta>. Однако есть несколько часто применяемых свойств, например, description, keywords, author, robots и др.:

Все тэги, которые допустимо использовать в разделе <body> документа HTML, могут иметь параметры class, id, lang, language, style и title. Использование этих параметров полезно, прежде всего, при стилевом оформлении документов.

В современном HTML, помимо тэгов языка и их содержимого, в исходном HTML-коде также записываются коды сценариев (JavaScript или VBScript).

Некоторые HTML-тэги, которые могут появляться в разделе body, называют тэгами уровня блока (block level), в то время как другие последовательными (inline) тэгами или, называя по-другому, тэгами уровня текста (text level), хотя такое разделение тэгов по уровням в известной степени условно.

Различие уровней HTML-тэгов заключается в следующем: тэги уровня блока могут содержать последовательные тэги и другие тэги уровня блока, тогда как последовательные тэги содержат только данные и другие последовательные тэги. Блоковые тэги описывают более крупные структуры документов, по сравнению с последовательными тэгами.

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

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

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

Под физическом стилем понимается прямое указание браузеру на модификацию текущего шрифта. Тэги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера.

Все, что находится между метками <b> и </b>, будет написано жирным шрифтом. В большинстве случаев рекомендуется вместо тэга <b> использовать тэг логического форматирования <strong>.

Это <Ь>полужирный</Ь> шрифт

Текст между тэгами <i> и </i> будет написан наклонным шрифтом. Для большинства случаев вместо этого тэга рекомендуется использовать тэги <em>, <dfn>, <var> или <cite>, поскольку последние лучше отражают назначение выделяемого текста.

Текст, размещенный между тэгами <tt> и </tt>, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа. Для большинства случаев вместо этого тэга лучше использовать тэги <code>, <samp> или <kbd>.

Тэг <u> отображает текст подчеркнутым. Отмененный тэг. Вместо него рекомендуется использовать тэги <strong> или <cite>.

Тэг <font>… </font>, позволяет явно указать параметры шрифта для фрагмента страницы. Этот тэг имеет атрибуты face, который определяет имя шрифта, size- размер шрифта и color- цвет шрифта. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт.

<font face="Verdana", "Arial", "Helvetica"> Этот текст написан заданным шрифтом </font> Размер шрифта указывается в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер обычного шрифта соответствует значению 3.

<font size^'5'^Размер 5</font><br /> Цвет шрифта может задаваться с помощью стандартных имен или в формате #RRGGBB. Пример:

<font со1ог="дгееп">Зеленый<^ ont> <br />

<font со1ог="#ЕЕ0000">Красный</^п^ <br /> Тэг <basefont> используется для указания размера, типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны для всего документа, однако могут в нужных местах переопределяться с помощью тэга <font>. После закрывающего тэга </font> действие тэга <basefont> восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут неоднократно переопределяться в документе, т. е. тэг <basefont> может появляться в документе любое количество раз. Для тэга <basefont> не существует закрывающего тэга. В качестве параметров могут использоваться те же параметры, что и для тэга <font>.

<basefont color = "green"> Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а также тэг <basefont> отнесены к отмененным. Их дальнейшее применение не рекомендуется.

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

При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.

Тэги вида <hi> (где i - цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня - самый крупный, шестого уровня самый мелкий. Тэги заголовка являются элементами уровня блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения их размера.

Пара тэгов <p> и </p> описывает абзац. Все, что заключено между ними, воспринимается как один абзац. Закрывающий тэг в HTML 4.0 </p> не обязателен, однако в XHTML его следует использовать.

Тэги <hi> и <p> могут содержать дополнительный атрибут align(табл. 2.2), например:

<h1 align="center"> Выравнивание заголовка по центру </h1>

<p align="right"> Абзац с выравниванием по правому краю </p>

Таблица 2.2. Значения параметра align
Значение параметра align Действие
left	Выравнивание текста по левой границе
center	Выравнивание по центру
right	Выравнивание по правой границе
justify	Выравнивание по ширине

Использование атрибута align в XHTML также не рекомендуется.

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

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тэг <hr/> описывает горизонтальную линию между параграфами. Тэг может дополнительно включать ряд атрибутов(табл. 2.3).

Таблица 2.3. Атрибуты тэга <hr> Параметр тэга Назначение

<hr/>
align	Выравнивает по краю или центру; имеет значения left, center, right
width	Устанавливает длину линии в пикселах или процентах от ширины страницы
size	Устанавливает толщину линии в пикселах
noshade	Отменяет рельефность линии
color	Указывает цвет линии. Используется формат RGB или стандартное имя

Все перечисленные атрибуты тэга <hr/> в XHTML являются устаревшими. Пример:

<hr align="center" width="50%" noshade /> Бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тэг-контейнер <pre>, определяющий предварительно форматированный (преформатированный) текст. Текст, размеченный тэгом <pre>, будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения будет использоваться моноширинный шрифт. Пример:

<pre> один два три

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

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

Тэги логического форматирования обозначают структурные типы текстовых фрагментов, такие, например, как программный код (тэг <code>), цитата (тэг <cite>), аббревиатура (тэг <abbr>) и т. д.

Самые распространенные логические стили:

<em> … </em> - от английского emphasis - акцент. Используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.

Пример выделения <em> отдельных слов</єш> текста

<strong> … </strong> - от английского strong emphasis - сильный акцент. Используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом.

Этот фрагмент <strong> очень важен </strong>

<code> … </code> - рекомендуется использовать для фрагментов исходных текстов. Отмечает текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом. Пример:

<code>Response.Write("Hello, World!")</code>

<samp> … </samp> - от английского sample - образец. Отмечает текст как образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. Для выделения используется моноширинный шрифт.

Результат работы программы: <samp>Hello, World!</samp>

<kbd> … </kbd> От английского keyboard - клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры. Обычно отображается моноширинным шрифтом.

Введите с клавиатуры:

<kbd>Hello, World!</kbd>

<var> … </var> От английского variable - переменная. Рекомендуется использовать для написания имен переменных. Обычно такой текст отображается курсивом.

Объявите переменную <var>a</var> Использование логического форматирования предпочтительнее, так как с применением принципа отделения структуры документа от его представления можно гибко управлять визуализацией документа, используя, например, таблицы стилей. Эта технология позволяет, в частности, создавать представления одного и того же документа для полнофункционального PC-браузера, браузера карманного компьютера, сотового телефона и т.п., а также позволяет пользователю самостоятельно выбирать схему цветового и шрифтового оформления документа. Кроме того, использование логического форматирования позволяет вставлять документы с одного сайта в другой, применяя к ним новое оформление.

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

(Фрагмент документа)

</div> В этом примере фрагмент HTML-документа обрамляется тэгами <div> и </div> для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тэга <div> уровня текста является элемент <span>.

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

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

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

Некоторые специальные символы не входят в базовую часть таблицы кодов ASCII. К ним относятся буквы алфавитов части европейских языков, математические и некоторые другие символы. В таких случаях следует включать нужные символы в HTML-документ при помощи специальных кодов. Эти коды состоят из символа амперсанда (&) и следующим за ним именем символа или его десятичным или шестнадцатеричным значением. Заканчиваться специальный символ должен знаком "точка с запятой".

В спецификации HTML приводятся целые таблицы со специальными символами и их значениями. На сегодняшний день браузеры распознают лишь небольшое количество специальных символов (табл. 2.4).

Таблица 2.4. Спецсимволы HTML
Запись специального символа Назначение
&lt	<
&gt	>
&nbsp	Неразрывный пробел
&copy	©
&amp	&
&quot	"

Все символами могут быть также заданы своими кодами. Например, символ неразрывного пробела имеет код 160. Он может записываться в десятичном виде как  .

Списки являются одним из наиболее часто употребляемых форм представления данных.

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

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

Для создания маркированного списка необходимо использовать тэг-контейнер <ul> … </ul>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать тэги абзаца <p> или принудительного перевода строки <br>.

Каждый новый элемент списка следует располагать внутри тэгов <li>.. ,</li>. Пример:

<ul>

<^>Иванов</^>

<^>Петров</^>

<^>Сидоров</^>

</ul> Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными.

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

<ol>

<^>Иванов</^>

<^>Петров</^>

<^>Сидоров</^>

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

Для создания списка определений используются тэги <dl> … </dl>.

Вместо меток <li> в списках определений используются метки <dt> (от английского definition term - определяемый термин) и <dd> (от английского definition definition - определение определения).

Пример

<dl>

<dd> Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'.

</dd>

^^HTML-документ </dt>

<dd>Текстовый файл с расширением *.html </dd>

</dl> Как правило, текст определяемого термина должен располагаться в одной строке. Текст, содержащий определение термина, выводится, начиная со следующей строки (или через строку для некоторых браузеров) после определения термина с отступом вправо.

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

Ссылка состоит из двух частей. Первая из них - это то, что отображается на Web-странице; она называется указателем ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). При щелчке мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом.

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

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

<a href="example.html">Указатель ссылки</a> В качестве ссылки можно использовать графическое изображение. По принципу действия графические ссылки ничем не отличаются от текстовых. Они не подчеркиваются и не выделяются цветом, а для их выделения браузеры обычно вокруг такого изображения рисуют рамку.

</a> Второй частью ссылки является URL-адрес - адрес Web-страницы, которая будет загружена при щелчке мышью на указателе. Указание адреса может быть относительным или абсолютным.

Тэг <a> имеет единственный параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным, например,http://www.server. com/home/index.htm. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </a>. Указатель ссылки может быть относительным или абсолютным.

Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка.

Например, если браузер загрузил страницу, находящуюся по адресуhttp://www.mysite.com/page, то относительный указатель /picture подразумевает адресhttp://www.mysite.com/page/picture, т. е. подкаталог, расположенный на том же компьютере.

Относительный указатель работает по-другому, если в HTML-документе используется тэг <base>. Он содержит URL-адрес, относительно которого в документе построена адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг <base> отсутствует, то адресация строится относительно адреса текущего документа.

Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

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

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

<a href="http://www.othersite.com/home/index.html"> Документ на другом сайте </a> В этом случае соответствующая ссылка называется абсолютной.

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

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

Пример. Пусть необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге).

1. Необходимо создать следующий анкер в файле 2.html:

2. <а name="AAA">Переход закончен</а> Слова "Переход закончен" при этом никак не будут выделены в тексте документа.

3. В файле 1.html (или в любом другом) можно определить переход на этот анкер:

4. <а Ьге£="2.Ь'Ьт1#ААА">Переход к анкеру ААА</а> Переход к этому анкеру можно определить и внутри самого документа 2.html - достаточно только включить в него следующий тэг:

<а Ьге£="#ЛЛА">Переход к анкеру ААА</а> Это удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа.

Рекомендуется задавать имена анкеров латинскими буквами. Большинство браузеров отличают большие буквы от маленьких.

В ХТИМЬ использование внутренних ссылок считается устаревшим инструментом.

Возможны ссылки и на другие виды ресурсов:

<а Ьге£="^р:// server/directory/fi1e.ext"> Загрузить файл </а>

<а href="mai1to:user@mai1.box"> Послать письмо </а> Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке То: ("Куда") окна почтовой программы будет указаноuser@mail.box.

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

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

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

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

На Web-страницах в подавляющем большинстве случаев используется растровая графика в двух форматах: GIF и JPG. Эти два формата непосредственно поддерживаются популярными браузерами, а для использования большинства других графических форматов потребуются специальные средства.

Разработанный недавно формат PNG был призван заменить растровый формат GIF, однако, несмотря на его очевидные преимущества, должного распространения на настоящий момент не получил.

Для добавления изображения в HTML-документ необходимо перевести изображение в формате GIF (файл *.gif) или JPEG (файл *.jpg или *.jpeg). Для этого используется следующий тэг:

<img src="picture.gif" а^="Картинка"/> Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT необходим для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений. Современные браузеры будут также отображать альтернативный текст в качестве подсказки (tooltip) при помещении курсора мыши в область изображения.

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

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

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

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

Пример записи тэга <body> с указанием фонового цвета и фонового изображения:

<body background="texture.gif" bgcolor="gray"> Рекомендуется указывать цвет фона документа, если задается фоновое изображение, так как при загрузке документа прежде всего отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона документа будет определяться значением параметра bgcolor или устанавливаться по умолчанию. До загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомится с уже загруженным текстом. В какой-то момент проявляется фоновое изображение, изменяя гамму цветов документа. Чтобы предотвратить резкое изменение гаммы цветов, следует задавать значение цвета фона близким к цветам фонового изображения. Кроме того, пользователь может отключить загрузку изображений. В этом случае фоновое изображение также не будет загружено.

Цветовая гамма ИТМЬ-документа определяется атрибутами, размещенными внутри метки <Ьоёу>;

bgcolor	Определяет цвет фона документа.
text	Определяет цвет текста документа.
link	Определяет цвет непросмотренной гипертекстовой ссылки.
vlink	Определяет цвет просмотренной гипертекстовой ссылки
alink	Определяет цвет гиперссылки в момент, когда на нее указывает курсор мыши и нажата кнопка, то есть непосредственно перед переходом по ссылке.

Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Примеры:

bgcolor=#FFFFFF

Цвет фона. Насыщенность красным, зеленым и синим одинакова - FF (это шестнадцатиричное представление числа 255). Результат - белый цвет.

text=#000000

Цвет текста. Насыщенность красным, зеленым и синим одинакова - 00 (ноль). Результат

- черный цвет.

link=#FF0000

Цвет гипертекстовой ссылки. Насыщенность красным - FF (255), зеленым и синим - 00 (ноль). Результат - красный цвет.

Тэг <body> может включать атрибут background-^имя файла]", который задает изображение, служащее фоном для текста и других изображений. Фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).

Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ.

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы.

В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.

Описание таблиц должно располагаться внутри раздела документа <body>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <table> и завершаться тэгом </table>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается тэгом <tr> (Table Row) и завершается тэгом </tr>. Отдельная ячейка в строке обрамляется парой тэгов <td> и </td> (Table Data) или <th> и </th> (Table Header). Тэг <th> используется обычно для ячеек-заголовков таблицы, а <td> - для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <th> отображается полужирным шрифтом и располагается по центру (align="center", valign="middle"). Ячейки, определенные тэгом <td> по умолчанию отображают данные, выровненные влево (align="left") и посередине ( valign="middle") в вертикальном направлении.

Пример:

<html>

<body>

^1>Простейшая таблица </h1>

<сар^оп>Заголовок таблицы</сар^оп>

<tr>

<td> Первая строка, первая колонка </td>

<td> Первая строка, вторая колонка </td>

</tr>

<tr>

<td> Вторая строка, первая колонка </td>

<td> Вторая строка, вторая колонка </td>

</tr>

</table>

</body>

</html> Тэг <table> может включать несколько атрибутов(табл. 2.5).

Таблица 2.5. Атрибуты тэга <table>
align	Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align="left", align="center", аІі§п="гі§Ьі".
width	Ширина таблицы. Ее можно задать в пикселах (например, width="400") или в процентах от ширины страницы (например, width="80%").
border	Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, Ьо^ег="4"). Если атрибут не установлен, таблица показывается без рамки.
cellspacing	Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, се1^рас^="2").
cellpadding	Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, ce11padding="10").

Таблица может иметь заголовок (<caption> … </caption>), хотя заголовок не является обязательным. Тэг <caption> может включать атрибут align.

Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>. Метка <tr> может включать следующие атрибуты(табл. 2.6).

Таблица 2.6. Атрибуты тэга <tr>

align Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align-'left", align="center", align="right".

valign Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign="top", valign="middle", valign="bottom".

Каждая ячейка таблицы начинается с тэга <td> и заканчивается меткой </td>. Тэг <td> может включать следующие атрибуты(табл. 2.7).

Таблица 2.7. Атрибуты тэга <td>
nowrap	Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
colspan	Устанавливает размер ячейки по горизонтали. Например, со^рап="3" означает, что ячейка простирается на три колонки.
rowspan	Устанавливает размер ячейки по вертикали. Например, rowspan="2" означает, что ячейка занимает две строки.
align	Устанавливает выравнивание текста в ячейке. Допустимые значения: а^п="1ей", а^п="се^ег", а%п='^КГ.
valign	Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: уа^п-Чор", уаИ§п="ш1ёё1е", уа^п="Ьойош".
width	Устанавливает ширину ячейки в пикселах (например, width="200").
heigth	Устанавливает высоту ячейки в пикселах (например, heigth="40").

При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде - расположить таблицу так, чтобы она помещалась в окне просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры width (ширина таблицы) и height (высота таблицы) тэга <table>. Аналогичные параметры могут задаваться и для отдельных ячеек.

Одной из особенностей представления таблиц различными браузерами является отображение пустых ячеек. Согласно описанию языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных. Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тэгов <td> и </td> не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код   или код перевода строки <br>, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному.

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект   (non-breaking space - неразрывающий пробел).

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

Фреймы могут быть использованы в следующих случаях:

1. при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;

2. для расположения в определенном месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана;

3. для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.

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

Пример:

<frameset cols="15%, 85%"> frame src="LIST.htm">

frame scrolling=auto src="empty.htm" name="pages">

</frameset>

frame src = "toolbar.html" scrolling=noresize>

</frameset> Фреймы определяются в структуре, называемой frameset, которая используется для страниц, содержащих фреймы, вместо раздела body обычного документа. Контейнер из тэгов <frameset> и </frameset> обрамляет каждый блок определений фрейма. Внутри контейнера <frameset> могут содержаться только тэги <frame> и вложенные тэги <frameset>. Тэг <frame> определяет одиночный фрейм и не является контейнером. Необходимо записать столько тэгов <frame>, сколько отдельных фреймов определено при задании тэга <frameset>.

Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр target тэга <a>. Данный параметр определяет имя фрейма (задаваемого в параметре name тэга frame) или окна браузера, в которое будет загружаться документ, на который указывает данная ссылка. По умолчанию при отсутствии параметра target документ загружается в текущий фрейм.

<a href="test.htm" target="pages"> Поддержка фреймов имеется только в стандарте HTML 4.0, однако большинство современных браузеров распознавали фреймы и до появления HTML 4.0. В XHTML поддержка фреймов отсутствует.

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

В HTML-документе для задания формы используются тэги <form>.. .</form>, Документ может содержать несколько форм, но они не могут быть вложены одна в другую.

Тэг <form> имеет параметры action, method и enctype. Отдельные браузеры (Netscape, Internet Explorer) поддерживают дополнительные параметры, например, class, name, style и др.

В общем виде форма задается следующим образом:

<form action="url" method="метод передачи" enctype="MIME-™n"> содержание формы </form > Параметр action является единственным обязательным. Его значением является URL-адрес CGI-программы, которая будет обрабатывать информацию, извлеченную из данной формы.

⇐Xhtml dtd | Введение в технологии создания Интернет-узлов | Web⇒