Главная / Документы / HTML / Книга 1

[Добавить сайт в избранное]  

[предыдущая]            [следующая]

Основные структуры HTML 3.2 документа (с примерами)

Обязательная структура документа

Начнем с самого простого HTML документа, содержащего только простой текст Hello world. В HTML файле содержимому обязательно должен предшествовать раздел HEAD, который минимально может состоять из двух конструкций. Тогда код HTML можно представить так:

Пример hello.html: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> 
<TITLE>Hello</TITLE> 
Hello world

На самом же деле, в точности, этот документ имеет следующую структуру:

Пример hello2.html: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> 
<HTML> 
<HEAD> 
<TITLE>Hello</TITLE> 
</HEAD> 
<BODY> 
Hello world 
</BODY> 
</HTML>

То есть, за исключением первой строки, весь файл есть HTML элемент который содержит HEAD элемент, (включающий TITLE элемент) и BODY элемент, с простым текстом в качестве содержимого.

Таким образом, при отсутствии тегов HTML, HEAD, и TITLE броузер сам вставит их в нужные места. Поэтому Ваш документ всегда будет содержать HEAD и BODY.

Рекомендуемая структура документа

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

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

Если Вы стремитесь к тому, чтобы люди отыскали Ваш документ по соответствующим связям, важность предоставления информации о его происхождении становится очевидной. Когда пользователь найдет Ваш документ с помощью, например, поискового ресурса AltaVista, он, вероятнее всего, захочет узнать, к какому виду относится документ. Поэтому каждый файл HTML должен предоставлять самую основную информацию (или связи к информации) о его происхождении и природе. Например, в собрании книгоподобных документов, разделенных на малые файлы, каждый файл должен содержать, по крайней мере, связь к "первой странице" "книги" (Home page).

О происхождении документа должна быть представлена, по крайней мере, следующая информация:

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

Пример skel.html: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> 
<HTML> 
<HEAD>
<TITLE>A sample HTML document</TITLE>
<LINK REV="made" HREF="mailto:jukka.korpela@hut.fi">
</HEAD>
<BODY>
<H1>A sample HTML document</H1>
This is a sample HTML document examplifying a suggested way of presenting basic origin information.
<HR>
<P>
<A HREF="http://www.hut.fi/~jkorpela/">Jukka Korpela</A>, 
<a href="mailto:Jukka.Korpela@hut.fi">Jukka.Korpela@hut.fi</a>
<BR>
This document belongs to the context of
<a href="index.html">Learning HTML 3.2 by ../../examples</a>
<BR>
The URL for this document is
<KBD>
http://www.hut.fi/~jkorpela/HTML3.2/skel.html
</KBD>
<BR>
Created: December 5, 1996
</BODY>
</HTML>

Информация о документе - раздел HEAD

Как уже упоминалось, есть две обязательные структуры в HTML 3.2, и они должны быть написаны в следующем порядке:

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

Формально элемент TITLE является (по крайней мере, если следовать этому буквально) частью элемента HEAD, тогда как объявление !DOCTYPE предшествует всем конструкциям HTML.

Необязательно, но элемент HEAD может содержать следующие элементы в добавление к элементу TITLE:

Организация содержания - заголовки (headings), абзацы (paragraphs), списки (lists) и т.п.

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

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

Рекомендуемый подход для написания HTML документа:

  1. Записать заголовок для всего документа и для него использовать H1 элемент с атрибутом ALIGN=CENTER.

  2. Разделить документ на главные части, записать соответствующие названия для них, используя H1 с ALIGN=LEFT. При этом и в дальнейшем старайтесь избегать деления на более, чем семь частей.

  3. Если необходимо, разделите главную часть на меньшие части с заголовками H2, и, если необходимо, разделите каждую из этих подчастей на части уровня ниже этого с заголовками H3. Избегайте использования заголовков H4 и, в особенности, заголовков H5 и H6, так как они выводятся на экран маленьким шрифтом, отчего документ становится трудночитаемым. (Если Вы все-таки хотите использовать H4, попробуйте разделить документ на еще меньшие части.)

  4. Если у Вас есть раздел, скажем, с заголовком H2 включающий заголовки H3, избегайте вставки текста между заголовком H2 и первым заголовком H3. Вставка такого текста может быть допустима, если только он содержит очень короткие заметки, такие как: общая ориентировочная информация, некоторые пометки о разделе или девиз. Длинный "бездомный" текст создает неудобство для читателя, который не знаем Ваших намерений. Поэтому используйте подразделы с заголовками соответствующего уровня и с текстом типа "Вводные замечания", "Всеобщее" или "Итоги".

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

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

  7. Добавьте связи и, если это требуется, изображения или другой иллюстративный материал.

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

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

Разметка текста - выделение шрифта, цитирование, код и т.п.

Логическая разметка в сравнении с физической

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

Предпочтение должно отдаваться логической разметке. Используйте физическую разметку только, если это действительно соответствует требованиям представления текста. Например, для сильного выделения используйте элемент STRONG, а не B, в предположении, что различные Web броузеры реализуют подчеркивания лучшим образом для того окружения, в котором они установлены.

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

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

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

 This has some <B>bold and <I></B>italic text</I>.

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

Пример nest.html: 

This is <I>italic text which contains <U>underlined text</U> 
within in </I> whereas <U>this is normal underlined text</U>.

Броузеры с ограниченным набором шрифтов могут иметь трудности в представлении разметки текста.

Элементы фразы (логическая разметка текста)

Для выделениятекста существует два фразовых элемента - EM и STRONG, где STRONG используется для более сильного выделения.

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

К сожалению, не существует "де-выделяющего" элемента фразы, обозначающего менее важный текст. Если Вам действительно это необходимо, можно использовать элемент SMALL. Однако, если менее важный текст объемен, лучше его вынести в отдельный документ, связь с которым указать в главном документе. Лицо, которое последует по таким связям, заинтересовавшись текстом, вероятно, предпочтет увидеть нормальный текст, и поэтому нет необходимости в каком-либо "де-подчеркивании"

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

Элемент VAR показывает, что часть текста (обычно слово) является переменной, т.е. текстом, который может быть заменен различными выражениями.

Следующие фразовые элементы задают различные виды ссылок или цитирования:

CITE

цитирование (название книги, или статьи, или - эквивалент)

CODE

код программы или - эквивалент (например, HTML)

SAMP

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

KBD

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

Смотрите также замечания и примеры по вопросам отображения разметки.

Шрифтовые элементы (font elements) - физическая разметка текста

Шрифтовые элементы это:

TT

"телетайпный" текст, т.е. текст одного размера

I

курсив

B

выделение

U

подчеркивание

STRIKE

зачеркнутый текст

BIG

большой шрифт

SMALL

малый шрифт

SUB

подстрочный текст

SUP

надстрочный текст.

Заметим: SUB и SUP могут быть отнесены к разметке фразового уровня, как упоминалось выше; SMALL может быть использован для де-подчеркивания.

Элементы FONT и BASEFONT предлагают много возможностей для задания размеров шрифта по сравнению с BIG и SMALL. Однако избегайте чрезмерного использования физической разметки.

Отображение разметки

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

Например, некоторые броузеры (возьмем Internet Explorer) отображают TT (и CODE) как шрифт, значительно меньший, чем обычный текст, и эта диспропорция сохраняется, когда изменяются размеры шрифта. Более того, Internet Explorer воспроизводит VAR как моноширинный (monospaced) шрифт, в то время как большинство графических броузеров использует курсив (italic). С другой стороны, в Netscape, размеры шрифта можно специально устанавливать, а по умолчанию для TT и VAR используются одни и те же шрифты, однако "одни и те же" означает технический размер в точках - на практике моноширинные шрифты выглядят больше, чем нормальный пропорциональный шрифт!

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

В следующей таблице сделана попытка дать представление о диапазоне возможностей броузеров. Она представляет отображение элементов разметки в Netscape Navigator, Microsoft Internet Explorer и Lynx. Заметим, что существуют вариации даже в пределах каждой из этих программ - в зависимости от версии, платформы, конфигурации системы или собственной пользовательской конфигурации, - такой разброс соответствует действительности. Таким образом, данные таблицы могут быть, но не обязательно имеют место в действительности.

элемент

Netscape

Internet Explorer

Lynx

EM

курсив

курсив

подчеркнутый

DFN

обычный текст

курсив

обычный (одноразмерный)

CODE

одноразмерный

малый одноразмерный

обычный (одноразмерный)

SAMP

одноразмерный

малый одноразмерный

обычный (одноразмерный)

KBD

одноразмерный

малый одноразмерный

обычный (одноразмерный)

VAR

курсив

малый одноразмерный

обычный (одноразмерный)

CITE

курсив

курсив

подчеркнутый

TT

одноразмерный

малый одноразмерный

обычный (одноразмерный)

I

курсив

курсив

подчеркнутый

B

усиленный

усиленный

подчеркнутый

U

обычный текст

подчеркнутый

подчеркнутый

STRIKE

зачеркивание

зачеркивание

текст между [DEL: и :DEL]

BIG

больший, чем обычный

больший, чем обычный

обычный текст

SMALL

меньший, чем обычный

немного меньший, чем обычный

обычный текст

SUB

опущенный, немного меньший

опущенный

обычный текст

SUP

поднятый, немного больший

поднятый

обычный текст

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

Представление взаимодействия с компьютером

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

Во всех подходах должны приниматься во внимание принципы деления в пределах строки и использования пробелов и символов табуляции, что может требовать вставки BR элементов или использования PRE элементов. Заметим, что логическая разметка разрешена в PRE элементах (хотя это, возможно, не самое лучшее ее использование).

Следующий пример иллюстрирует подход в контексте введения в язык программирования Perl.

Пример interact.html: 

<P>The following Perl script prints out its input so that each line begins 
with a running line number:</P> 
<PRE>
<CODE>
#!/usr/bin/perl 
$line = 1; 
while (&lt;&gt;) {
  print $line++, " ", $_; } 
</CODE>
</PRE> 
<P>The scalar variable <CODE>$line</CODE> is of 
course the line counter.<P> 
<P>The loop construct is of the form<BR> 
<CODE>while (&lt;&gt;) {</CODE><BR> 
<VAR>process one line of input</VAR>
 <CODE>}</CODE><BR> 
</P> 
<P>Assuming that you have written this script (the simpler version 
of it) into a file named <KBD>lines</KBD>, you 
could test it using a command 
of the form<BR> <KBD>./lines</KBD> 
<VAR>datafile</VAR><BR> 
In particular, using the script as input to itself, you would do as follows 
(the details of
 system output vary from one system to another): 
</P> 
<PRE> 
<SAMP>lk-hp-23 perl 251 % </SAMP><KBD>./lines lines</KBD> 
<SAMP>1 #!/usr/bin/perl 
2 $line = 1; 
3 while (<>) { 
4 print $line++, " ", $_; } 
lk-hp-23 perl 252 % </SAMP> 
</PRE>

Замечания к примеру:

Управление размещением

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

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

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

В отдельных случаях Вам может понадобиться центрировать части текста, чтобы отличит их от обычного текста. Для этого можно использовать атрибут ALIGN=CENTER в таких элементах, как P или DIV (или отдельный элемент CENTER).

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

Что касается вопросов формата, таких как перевод строки или предотвращение перевода строки, смотрите Деление на строки и использование пробелов и символов табуляции. Выше также обсуждались и вопросы шрифтов.

Связи

Связи (часто называемые гиперсвязями) являются особенностью, которая оправдывает наличие части HT в аббревиатуре HTML (HyperText Markup Language - Язык разметки гипертекста).

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

Связь - это прямое соединение отдельных точек в документе с другими точками в том же самом или других документах. В HTML терминологии точки часто называют anchors (якорь).

Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая целью (target) связи, часто является началом документа.

В простейших случаях Вы создаете связь от одной точки Вашего документа к другому документу (Вашему собственному или написанному кем-то еще). У Вас есть возможность решить, какие слова будут действовать, как видимое представление связи, т.е. фразы, которые отличаются от остального документа, и, кроме того, Вам необходимо знать Web адрес - URL (Uniforme Resource Locator, униформный локатор ресурса) этого документа. В этом случае Вы сможете объединить информацию с помощью соответствующего A-элемента. Например: 

I work at <A HREF="http://www.hut.fi/english.html">HUT</a>.

Это выводится броузером в следующем виде:

I work at HUT.

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

Хотя технически связи создать легко, часто происходит не правильное использование их. Вот некоторые практические советы:

Изображения, формулы и т.п.

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

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

В обоих случаях пользователь увидит изображение, если только броузер поддерживает специальный графический формат. Наиболее поддерживаемые форматы - GIF и JPEG. Зачастую - это единственные форматы, поддерживаемые для вставляемых изображений. Для связанных образов поддержка форматов обычно шире (она может включать, например, PostScript, PDF, PNG) и может расширяться инсталляцией новых просмотровщиков и расширений, прилагаемых к броузерам. Существует вариант, когда связанные образы так воплощаются на броузере, что броузер ничего не знает о графическом формате файлов, но знает, как запустить отдельную программу, которая покажет эти изображения.

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

Ссылка на графические объекты обычно допускается без специальных разрешений. Но при использовании авторских рисунков, фотографий и т.п. - автор должен упоминаться. (Смотрите Законы Web FAQ.) Однако, некоторые изображения настолько просты, что копирайт просто не нужен. Кроме того, есть большое количество коллекций изображений и среди них - коллекции общего пользования.

Для иллюстрации связывания с изображением и внедрения изображений давайте рассмотрим GIF изображение, которое расположено по адресу - http://www.hut.fi/~lsarakon/sae.gif. Обратимся к нему следующим образом:

Пример sae.html: 

<A HREF="http://www.hut.fi/~lsarakon/">Liisa Sarakontu</A> has drawn 
<A HREF="http://www.hut.fi/~lsarakon/sae.gif">a picture of Siamese
algae eater</A>.

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

Пример sae-2.html: 

The Siamese algae eater (<I>Crossocheilus siamensis</I>) is often mixed up with
 another algae eating fish, the "false Siamensis" 
(<I>Garra taeniata</I> or <I>Epalzeorhynchus sp.</I>). Below you 
can see drawings of them by 
<A HREF="http://www.hut.fi/~lsarakon/">Liisa Sarakontu</A>. 
<P> 
<IMG SRC="http://www.hut.fi/~lsarakon/sae.gif" ALT="[Picture of Siamese algae 
eater]"> 
<P> 
<IMG SRC="http://www.hut.fi/~lsarakon/false.gif" ALT='[Picture of "false 
Siamensis"]'>

Проблема правильного использования графических изображений в HTML документе очень трудна и многоаспектна, но мы попытаемся рассказать и об этом. Читателям, которые знают финский, предлагаем прочитать документ Kuvien kдytцstд viestinnдssд yleensд ja Webissд erityisesti.

В HTML 3.2 нет общей поддержки представления математических формул. Так как работа по этому вопросу находится в стадии развития, для ознакомления посмотрите документ W3C по Математической разметке. При необходимости Вы можете использовать некоторое программное обеспечение (например, TeX), чтобы оформить формулы, как изображение, например, в формате PostScript, и, используя тег IMG, вставить его в Ваш документ, или тег A, чтобы создать связь к нему. Последний способ более предпочтителен, особенно для больших формул. Если пользователю хочется читать текст не отвлекаясь, то взглянуть на формулу (изображение) он сможет, когда захочет. Более того, он сможет посмотреть ее в отдельном окне экрана.

Таблицы - tables (Нет в HTML 2.0!)

 

Концепция таблиц в HTML 3.2

Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. Таблицы - важнейшее улучшение в HTML 3.2 по сравнению с HTML 2.0. С другой стороны конструкция таблиц HTML 3.2 является всего лишь подмножеством Табличной модели HTML3 (RFC 1942).

D HTML табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании HTML соответствует всей таблице.

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

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

Для представления таблиц используются нескольких видов тегов HTML:

Основные табличные структуры

Давайте начнем с очень простого примера. Он связан с представлением таблицы чисел 2 на 2 (единичная матрицa) без каких либо заголовков. Код HTML выглядит следующим образом:

Пример table1.html: 

<TABLE> 
<TR> <TD> 1 </TD> <TD> 0 </TD> </TR> 
<TR> <TD> 0 </TD> <TD> 1 </TD> </TR> 
</TABLE>

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

1

0

0

1

Таким образом, теги TABLE заключают в себе табличные строки, каждая из которых обрамляется тегами TR, и табличные ячейки, обрамляемые тегами TD. Это согласуется с логической структурой таблицы, как множеством строк, состоящих из ячеек. Вы можете сократить табличную структуру, опустив конечные теги TD и TR, однако утратите до некоторой степени ясность представления: 

<TABLE> 
<TR> <TD> 1 <TD> 0 
<TR> <TD> 0 <TD> 1 
</TABLE>

Более того, хотя удаление конечных тегов допустимо в HTML 3.2, отдельные броузеры (включая Netscape) не смогут без них правильно представить таблицу.

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

Дополнительные свойства; типичная таблица с текстовыми ячейками

Есть несколько элементов, которые Вы можете добавить к вышерассмотренной простой табличной модели:

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

Пример table2.html: 

<P>An illustration of the use of the TABLE element in HTML.</P> 
<TABLE BORDER=1> 
<CAPTION>Finnish, English, and scientific names for some animals</CAPTION> 
<TR><TH>Finnish name</TH><TH>English name</TH><TH>Scientific name</TH></TR> 
<TR><TD>hirvi</TD><TD>elk</TD><TD><I>Alces alces</I></TD></TR> 
<TR><TD>orava</TD><TD>squirrel</TD><TD><I>Sciurus vulgaris</I></TD></TR> 
<TR><TD>susi</TD><TD>wolf</TD><TD><I>Canis lupus</I></TD></TR> 
</TABLE>

Заметьте, что некоторые табличные элементы в примере содержат разметку текста; в данном случае есть специфические причины для использования элемента I.

Параллельные тексты

Если у Вас есть логически параллельный текст, например, документ на нескольких языках, или несколько вариантов одного текста, элементы TABLE, по-видимому, наилучший способ его представления. (Использование элемента PRE - возможно, но требует утомительного форматирования, в результате которого формируется текст с одноразмерным шрифтом.)

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

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

Нижеследующий пример представляет фрагмент текста из Библии в трех вариантах и переводах:

Пример table3.html: 

<TABLE> 
<CAPTION><STRONG>The beginning of Genesis 
in three languages</STRONG></CAPTION> 
<TR ALIGN=LEFT VALIGN=TOP> 
<TH><TH>Latin (Vulgate)</TH><TH>English 
(King James version)</TH> 
<TH>Finnish (1992 version)</TH> 
</TR><TR ALIGN=LEFT VALIGN=TOP> 
<TH>1</TH> 
<TD>In principio creavit Deus caelum et terram.</TD> 
<TD>In the beginning God created the heaven and the earth.</TD> 
<TD>Alussa Jumala loi taivaan ja maan.</TD> 
</TR><TR ALIGN=LEFT VALIGN=TOP> 
<TH>2</TH> 
<TD>Terra autem erat inanis et vacua et tenebrae super faciem 
abyssi et spiritus Dei ferebatur super aquas.</TD> 
<TD>And the earth was without form, and void; 
and darkness was upon the face of the deep. 
And the Spirit of God moved upon the face of the waters.</TD> 
<TD>Maa oli autio ja tyhjд, pimeys peitti syvyydet, 
ja Jumalan henki liikkui vetten yllд. </TD> 
</TR><TR ALIGN=LEFT VALIGN=TOP> 
<TH>3</TH> 
<TD>Dixitque Deus "Fiat lux" et facta est lux.</TD> 
<TD>And God said, Let there be light: and there was light.</TD> 
<TD>Jumala sanoi: "Tulkoon valo!" Ja valo tuli.</TD> 
</TR>
</TABLE>

Заметим, что атрибуты ALIGN и VALIGN могут существенно влиять на качество отображения. Броузеры не могут определять тип таблиц по их содержанию, поэтому автор документа может подправить формат документа с помощью средств выравнивания.

Использование таблиц для представления дефинитивных списков

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

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

Пример table4.html: 

<TABLE> 
<CAPTION>The first three letters of the Greek alphabet</CAPTION> 
<TR><TH ALIGN=LEFT>alpha</TH> 
<TD> the first letter of the Greek alphabet </TD> </TR> 
<TR><TH ALIGN=LEFT>beta</TH> 
<TD> the second letter of the Greek alphabet </TD> </TR> 
<TR><TH ALIGN=LEFT>gamma</TH> 
<TD> the third letter of the Greek alphabet. </TD> </TR> 
</TABLE>

Числовые таблицы

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

Для числовых таблиц соответствующее выравнивание обычно важно для формирования легко читаемого представления.

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

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

Однако, отображение может получиться неудовлетворительным, если цифры используют пропорциональные шрифты, где размеры цифр существенно отличаются. Возможно, но очень утомительно, исправить это укладыванием данных в каждую ячейку с использованием элемента TT. (Заметьте, что внутри элемента TT запрещено использование элемента TABLE!)

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

Пример table5.html: 

Measurement results: 
<PRE> 
time    temperature  pressure 
12:00       26         12.8 
12:15       22.5        9.8 
12:30       11          1.65 
12:45        3.3        0.03 
13:00        0.05       0.002 
</PRE> 
<TABLE> 
<CAPTION>Measurement results</CAPTION> 
<TR><TH>time</TH><TH>temperature</TH><TH>pressure</TH></TR> 
<TR ALIGN=RIGHT><TD>12:00 </TD><TD>26.00 </TD><TD>12.800 </TD></TR> 
<TR ALIGN=RIGHT><TD>12:15 </TD><TD>22.50 </TD><TD> 9.810 </TD></TR> 
<TR ALIGN=RIGHT><TD>12:30 </TD><TD>11.00 </TD><TD> 1.650 </TD></TR> 
<TR ALIGN=RIGHT><TD>12:45 </TD><TD> 3.30 </TD><TD> 0.030 </TD></TR> 
<TR ALIGN=RIGHT><TD>13:00 </TD><TD> 0.05 </TD><TD> 0.002 </TD></TR> 
</TABLE>

Использование таблиц для представления меню

Часто требуется представить большой набор относительно малых образов. Например, у нас есть документ о различных странах и мы хотим создать меню из имен стран, чтобы использовать его, как индекс. И индекс должен использовать обычные связи, например
<A HREF="af.html">Afghanistan</A>.

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

Один из возможных вариантов - это отформатировать меню вручную и заключить его в элемент PRE. Если образами меню является связанный текст, то сначала надо отформатировать его как текст, затем добавить теги якоря (A). Для ясности следующий пример представлен без связей:

Пример menu1.html: 

<PRE> 
Afghanistan       Albania       Algeria
American Samoa    Andorra       Angola
Anguilla          Antarctica    Antigua and Barbuda
Arctic Ocean      Argentina     Armenia
</PRE>

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

Пример menu2.html: 

<BASE HREF="http://www.odci.gov/cia/publications/95fact/"> 
<P> 
<A HREF="af.html">Afghanistan</A>, 
<A HREF="al.html">Albania</A>, 
<A HREF="ag.html">Algeria</A>, 
<A HREF="aq.html">American Samoa</A>, 
<A HREF="an.html">Andorra</A>, 
<A HREF="ao.html">Angola</A>, 
<A HREF="av.html">Anguilla</A>, 
<A HREF="ay.html">Antarctica</A>, 
<A HREF="ac.html">Antigua and Barbuda</A>, 
<A HREF="xq.html">Arctic Ocean</A>, 
<A HREF="ar.html">Argentina</A>, 
<A HREF="am.html">Armenia</A> </P>

Также можно обеспечить перевод строки с помощью элемента BR. Или, если Вам кажется, что образы недостаточно различимы в представлении, попробуйте ввести перед каждым образом специальный символ, подобный * (используя при этом пробел, как разделитель).

Однако, представление должно быть таким, чтобы все образы занимали одно и то же пространство. Поэтому можно либо использовать элемент PRE, либо затратить усилия на конструирование подходящего элемента TABLE. Например:

Пример menu3.html: 

<BASE HREF="http://www.odci.gov/cia/publications/95fact/"> 
<TABLE><TR> 
<TD WIDTH=150><A HREF="af.html">Afghanistan</A></TD> 
<TD WIDTH=150><A HREF="al.html">Albania</A></TD> 
<TD WIDTH=150><A HREF="ag.html">Algeria</A></TD> 
<TD WIDTH=150><A HREF="aq.html">American Samoa</A></TD> </TR><TR> 
<TD WIDTH=150><A HREF="an.html">Andorra</A></TD> 
<TD WIDTH=150><A HREF="ao.html">Angola</A></TD> 
<TD WIDTH=150><A HREF="av.html">Anguilla</A></TD> 
<TD WIDTH=150><A HREF="ay.html">Antarctica</A></TD> </TR><TR> 
<TD WIDTH=150><A HREF="ac.html">Antigua and Barbuda</A></TD> 
<TD WIDTH=150><A HREF="xq.html">Arctic Ocean</A></TD> 
<TD WIDTH=150><A HREF="ar.html">Argentina</A></TD> 
<TD WIDTH=150><A HREF="am.html">Armenia</A></TD> 
</TR>
</TABLE>

Заметим, что это решение не совсем идеальное. Оно использует структуру TABLE, в которой разделение на строки сделано только для целей компоновки, а добавление новых образов потребует полной реструктуризации таблицы. Как правило, необходимо вставить атрибут WIDTH, чтобы сохранить ширину табличных столбцов - такой спецификации свойственна независимость от технической реализации, если размеры задаются в пикселях.

Табличные элементы, занимающие несколько строк или столбцов

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

    neut. masc.  fem. 
nom. id    is    ea 
acc. id    eum   eam 
gen. eius  eius  eius 
dat. ei    ei    ei 
abl. eo    eo    ea

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

Пример span.html: 

<TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3> 
<CAPTION>Declination of <I>is</I> in singular</CAPTION> 
<TR><TH></TH><TH>neuter</TH><TH>masc.</TH><TH>fem.</TH></TR> 
<TR><TH>nom.</TH><TD ROWSPAN=2 VALIGN=MIDDLE><I>id</I></TD> 
<TD><I>is</I></TD><TD><I>ea</I></TD></TR> 
<TR><TH>acc.</TH><TD><I>eum</I></TD><TD><I>eam</I></TD></TR> 
<TR><TH>gen.</TH><TD COLSPAN=3 ALIGN=CENTER><I>eius</I></TD></TR> 
<TR><TH>dat.</TH><TD COLSPAN=3 ALIGN=CENTER><I>ei</I></TD></TR> 
<TR><TH>abl.</TH><TD COLSPAN=2 ALIGN=CENTER><I>eo</I></TD> 
<TD><I>ea</I></TD></TR> 
</TABLE>

В данном примере первая ячейка специфицируется с ROWSPAN=2, что в действительности означает, что две смежные ячейки в одном и том же столбце объединяются в одну ячейку. Заметим, что когда Вы пишете код HTML для следующей строки (второй элемент TR), вы просто пропускаете элемент ячейки, соответствующий месту, которое уже взято для использования.

Вложенные таблицы

Таблицы могут быть вложенными, так как элементы TD и TH могут содержать и блоковый элемент и табличный. Во вложенных таблицах легко сделать ошибки, однако их использование все же оправданно.

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

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

Пример nt.html: 

<TITLE>tbl</TITLE> 
<TABLE ALIGN=CENTER> 
<CAPTION>Declination of <I>is</I></CAPTION> 
<TR><TD> 
<TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3> 
<CAPTION>Singular</CAPTION> 
<TR><TH></TH><TH>neuter</TH><TH>masc.</TH><TH>fem.</TH></TR> 
<TR><TH>nom.</TH><TD ROWSPAN=2 VALIGN=MIDDLE><I>id</I></TD> 
<TD><I>is</I></TD><TD><I>ea</I></TD></TR> 
<TR><TH>acc.</TH><TD><I>eum</I></TD><TD><I>eam</I></TD></TR> 
<TR><TH>gen.</TH><TD COLSPAN=3 ALIGN=CENTER><I>eius</I></TD></TR> 
<TR><TH>dat.</TH><TD COLSPAN=3 ALIGN=CENTER><I>ei</I></TD></TR> 
<TR><TH>abl.</TH><TD COLSPAN=2 ALIGN=CENTER><I>eo</I></TD> 
<TD><I>ea</I></TD></TR> 
</TABLE> 
</TD> 
<TD> 
<TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3> 
<CAPTION>Plurar</CAPTION> 
<TR><TH></TH><TH>neuter</TH><TH>masc.</TH><TH>fem.</TH></TR> 
<TR><TH>nom.</TD></TH><TD ROWSPAN=2 VALIGN=MIDDLE><I>ea</I></TD> 
<TD><I>ii (ei)</I></TD><TD><I>eae</I></TD></TR> 
<TR><TH>acc.</TH><TD><I>eos</I></TD><TD><I>eas</I></TD></TR> 
<TR><TH>gen.</TH><TD COLSPAN=2 ALIGN=CENTER><I>eorum</I></TD> 
<TD><I>earum</I></TD></TR> 
<TR><TH>dat.</TH><TD COLSPAN=3 ROWSPAN=3 ALIGN=CENTER VALIGN=MIDDLE> 
<I>iis (eis)</I></TD></TR> 
<TR><TH>abl.</TH></TR> 
</TABLE> 
</TD> 
</TABLE>

Обратите внимание на использование конечных тегов, например, </TD>. Согласно спецификациям HTML 3, такой же код с пропуском конечных тегов является эквивалентным, приведенному выше. Однако для Netscape это является ошибкой и представление вложенной таблицы будет неверным при отсутствии конечных тегов.

Шрифты в табличных элементах

У нас часто спрашивают: каким образом для данных в таблице можно задавать вид, размер и цвет шрифта?

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

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

Коротко по поводу вида, размера и цвета шрифта:

Вид шрифта

В HTML коде не устанавливается вообще. Можно только использовать элементы разметки, чтобы задать шрифт специфического вида (например курсив, одинакового размера, жирный). Это не может быть установлено глобально, т.е. если Вы хотите установить их во всех элементах таблицы, они должны появляться отдельно в каждом TH или TD элементе. (FACE атрибут элемента FONT является нестандартным, но он относительно безвреден. Однако в любом случае, он является "локальной" разметкой текстового уровня, поэтому необходимо устанавливать его для каждой ячейки таблицы отдельно.)

Размер шрифта

Локально (например, внутри ячейки таблицы) можно использовать SMALL, BIG или FONT SIZE=... Вы можете установить глобальный (по умолчанию) размер шрифта с помощью BASEFONT, но это обычно не действует на содержимое ячеек таблицы.

Цвет шрифта

Локально (например, в ячейке таблицы) можно использовать FONT COLOR=... Вы можете по умолчанию установить цвет текста глобально, для всего документа - с помощью BODY TEXT=... Но Вы не можете установить по умолчанию цвет для таблицы, отличный от цвета документа.

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

Таблицы стилей

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

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

Почти в то же время, когда HTML 3.2 Ссылочная спецификация стала общеизвестна, как W3C Рекомендация, с подобным же статусом была распространена рекомендация касательно таблиц стилей: Группа таблиц стилей, версия 1, сокращенно CSS1. Обе рекомендации самостоятельны в том смысле, что сочетание спецификаций таблиц стилей с HTML документами точно не определено. В частности, CSS1 упоминает атрибуты ID и CLASS для выбора специфичных частей текста, но этих атрибутов нет в HTML 3.2. Это же касается атрибутов STYLE и SPAN элементов.

Язык HTML 3.2 обеспечивает два способа обращения к таблицам стиля в HTML документах:

В обоих случаях Вы можете, например, определить видимое представление элементов H1 в Вашем документе, но не можете определить, чтобы некоторые Н1 элементы были представлены одним способом, а другие Н1 элементы (в том же самом документе) - другим. Однако, броузер, который поддерживает таблицу стилей, вероятно, поддерживает и некоторые механизмы (вне HTML 3.2) для отработки данной ситуации.

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

Согласованному со спецификациями HTML 3.2 броузеру не нужно поддерживать таблицы стилей каким-нибудь особенным способом (за исключением случая распознавания STYLE элемента и сокрытия его содержимого). Также в броузерах возрастает поддержка некоторых особенностей, объявленных в CSS1.

[предыдущая]            [следующая]
 Главная / Документы / HTML / Книга 1

[Добавить сайт в избранное]  
Webmaster

Copyright © 2001 Ильнур 

Хостинг от uCoz