Основные структуры 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).
О происхождении документа должна быть представлена, по крайней мере, следующая информация:
Автор документа, имеющий уникальное имя. При этом должна быть задана
связь с домашней страницей автора. Если у документа несколько авторов,
определите их всех, а также роль каждого из них; например, ведущего
автора, редактора, действующего спонсора, а также лиц, формально
отвечающих за документ.
Дата
создания документа или его последней модификации, или и та и другая.
Представляемая дата должна быть понятна во всем мире; в частности,
название месяца лучше писать словом, а не цифрой.
Контекст документа и его статус, например: часть
официальной документации компании об одном из ее продуктов, или часть
личной информации о хобби автора, или что-то другое.
Адрес (URL) документа. Такая информация зачастую чрезмерна, однако она
может быть очень полезной, когда кому-то нужна копия именно того
документа, который он нашел. Лучше не полагаться на броузер (и
пользователя), добавляющих такую информацию, когда сделана копия
документа.
Следующий пример представляет один из способов заполнения такой информации. Изучите подходящие для названных целей частные рекомендации,
прежде чем адаптировать их или же посмотрите другой заслуживающий внимания стиль.
<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, и они должны быть написаны в следующем порядке:
структура
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
(в которой Вы теоретически должны иметь фрагмент HTML 3.2 Final вместо HTML
3.2)
элемент TITLE, например
<TITLE>Introduction to General Absurdity</TITLE>
Большинство броузеров не заметит, если Вы опустите это, но этого требуют спецификации HTML 3.2. Также есть и более важная причина для того, чтобы
включить их:
!DOCTYPE - объявление, которое является определением типа
документа (document type definition - DTD) в метаязыке SGML, и которое при
обработке документа понятно типовому броузеру SGML. Более того, задание версии
HTML, использованное в документе, полезно изучающим код HTML, и, наконец,
это также может быть необходимо броузерам и редакторам WWW.
Организация
содержания - заголовки (headings), абзацы (paragraphs), списки (lists) и т.п.
Как правило, Ваш документ состоит из частей, которые, в свою очередь, тоже делятся на части и т.д. В HTML такое разделение делается с использованием заголовков
различного уровня. Части самого нижнего уровня в этой иерархии состоят из одного или нескольких абзацев. В дополнение к простым абзацам
и некоторым специальным видам абзацев HTML 3.2 поддерживает списки и таблицы, которые можно представить, как подобные абзацам.
Внутренняя структура абзацев и подобных им элементов состоит из тегов текстового уровня, которые мы приводим далее.
Теги для выражения главных структурных особенностей, так называемые теги
блокового уровня, представляют собой следующее:
Разделить документ на главные части, записать соответствующие
названия для них, используя H1 с ALIGN=LEFT. При этом и в дальнейшем
старайтесь избегать деления на более, чем семь частей.
Если необходимо, разделите главную часть на меньшие части с
заголовками H2, и, если необходимо, разделите каждую из этих подчастей на
части уровня ниже этого с заголовками H3. Избегайте использования
заголовков H4 и, в особенности, заголовков H5 и H6, так как они выводятся
на экран маленьким шрифтом, отчего документ становится трудночитаемым.
(Если Вы все-таки хотите использовать H4, попробуйте разделить документ на
еще меньшие части.)
Если у Вас есть раздел, скажем, с заголовком H2 включающий
заголовки H3, избегайте вставки текста между заголовком H2 и первым
заголовком H3. Вставка такого текста может быть допустима, если только он
содержит очень короткие заметки, такие как: общая ориентировочная
информация, некоторые пометки о разделе или девиз. Длинный
"бездомный" текст создает неудобство для читателя, который не
знаем Ваших намерений. Поэтому используйте подразделы с заголовками
соответствующего уровня и с текстом типа "Вводные замечания",
"Всеобщее" или "Итоги".
Для списков образов, где важен порядок и его
необходимо точно реализовать, и таких, как последовательность команд,
которая должна строго соблюдаться, используйте элемент OL.
Заметим, что элемент абзаца P
не может быть вложенным, т.е. Вы не можете использовать элемент P для создания подабзаца. Но различные списковые элементы эффективно реализуют наполненную
образами структуру, которая по существу соответствует подабзацному делению. Более того, списковые элементы могут быть вложенными.
Разметка
текста - выделение шрифта, цитирование, код и т.п.
Логическая разметка в сравнении с физической
Существует два главных класса текстовой разметки: логическая и физическая. Логическая разметка показывает роль текстового сегмента, например,
большую значимость по сравнению с обычным текстом или то, что данный сегмент является цитатой. Физическая разметка связана с представлением текста в
специальной манере, например, с использованием шрифтов или специального вида подчеркивания.
Таблица
стилей также будет полезна для использования. Например, кому-то захочется все программные коды представлять на желтом фоне и большим шрифтом, в то время
как кто-то другой предпочтет совсем другие методы для выделения их в обычном тексте. Такие операции будут выполняться много проще, если постоянно будет
использоваться логическая разметка.
В дополнение к большей гибкости при представлении текста различными броузерами логическая разметка имеет следующее преимущество по сравнению с
физической: все большее количество компьютерных программ извлекают информацию из 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>.
Броузеры с ограниченным набором шрифтов могут иметь трудности в представлении разметки текста.
Избегайте выделения слишком больших частей текста, так как подчеркивая все, Вы не подчеркиваете ничего! (Вошедший в поговорку студент, который подчеркивает
все в своей книге, не понимает самой идеи подчеркивания.)
К сожалению, не существует "де-выделяющего" элемента фразы, обозначающего
менее важный текст. Если Вам действительно это необходимо, можно использовать элемент SMALL.
Однако, если менее важный текст объемен, лучше его вынести в отдельный документ, связь с которым указать в главном документе. Лицо, которое последует
по таким связям, заинтересовавшись текстом, вероятно, предпочтет увидеть нормальный текст, и поэтому нет необходимости в каком-либо
"де-подчеркивании"
Элемент DFN
также может рассматриваться, как специальный вид подчеркивания, однако, логически он обозначает, что этот термин имеет определение. Это, в принципе,
очень полезный элемент, однако, к сожалению многие броузеры, включая Netscape, поддерживают его не эффективно.
Элемент VAR
показывает, что часть текста (обычно слово) является переменной, т.е. текстом, который может быть заменен различными выражениями.
Следующие фразовые элементы задают различные виды ссылок или цитирования:
CITE
цитирование (название книги, или статьи, или - эквивалент)
CODE
код программы или - эквивалент (например, HTML)
SAMP
служебные сообщения компьютера (вывод из программы, скрипты, команды и т.п.)
KBD
текст, который должен печататься на клавиатуре пользователя; обычно используется для инструкций.
Смотрите также замечания
и примеры по вопросам отображения разметки.
Шрифтовые элементы (font elements) - физическая разметка текста
Шрифтовые элементы это:
TT
"телетайпный" текст, т.е. текст одного размера
I
курсив
B
выделение
U
подчеркивание
STRIKE
зачеркнутый текст
BIG
большой шрифт
SMALL
малый шрифт
SUB
подстрочный текст
SUP
надстрочный текст.
Заметим: SUB и SUP могут быть отнесены к разметке фразового уровня, как упоминалось выше; SMALL может быть использован для де-подчеркивания.
У Вас может появиться желание взглянуть на отдельный файл, чтобы получить визуальное представление
о различных элементах разметки на Вашем броузере. Однако не думайте, что отображение, которое Вы увидите, является универсальным или верным.
Таким образом, избегайте связываться с размерами шрифта; используйте фразовую разметку и другие структурные элементы и позвольте
пользователям, если им не нравятся размеры шрифта в Вашем тексте, определять шрифты в их собственных броузерах как им нравится.
В следующей таблице сделана попытка дать представление о диапазоне возможностей броузеров. Она представляет отображение элементов разметки в
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
поднятый, немного больший
поднятый
обычный текст
Данные таблицы относятся к невложенным элементам. Вложенность
текстовых элементов может повысить наглядность отображения.
Представление взаимодействия с компьютером
Для представления взаимодействия человека с компьютером на текстовой или другой основе могут использоваться следующие подходы:
компьютерный вывод (подсказки, обычный вывод или сообщения об
ошибках) в пределах SAMP
элементов
общие термины, описывающие ввод пользователя - внутри VAR
элементов
действительный пользовательский ввод в пределах KBD
элементов
цитируемый компьютерный программный код (источник), реализуемый в
пределах CODE
элементов.
Во-первых, сформируйте правильную структуру Вашего документа. Затем, если необходимо, пересмотрите размещение документа. Учтите, что различные броузеры
используют различные размещения, и даже одни и те же броузеры могут показывать одни и те же документы по-разному в разных средах. Например, когда пользователь
меняет размер окна своего Netscape, размещение может радикально измениться.
Таким образом, на Web нет такого понятия, как конкретное размещение документа. Как автор Вы не можете жестко задавать размещение,
а только некоторым образом воздействовать на него. Следующие замечания и информация относятся к свойствам HTML, ориентированным на обеспечение
размещения документа. Читайте материал, помня об этом.
В отдельных случаях Вам может понадобиться центрировать части текста, чтобы отличит их от обычного текста. Для этого можно использовать
атрибут ALIGN=CENTER в таких элементах, как P
или DIV
(или отдельный элемент CENTER).
Связи (часто называемые гиперсвязями) являются особенностью, которая оправдывает наличие части HT в аббревиатуре HTML (HyperText
Markup Language - Язык разметки гипертекста).
Связь - это прямое соединение отдельных точек в документе с другими точками в том же самом или других документах. В 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 документу, который объясняет это сокращение и дает информацию о нем.
Отображение текста связи возможно по-разному - текст связи может быть подчеркнут, окрашен или выделен в тексте каким-то другим образом. Пользователь
(читатель) может узнать, как связи отображены в каждом отдельном окружении.
Хотя технически связи создать легко, часто происходит не правильное использование их. Вот некоторые практические советы:
Избегайте чрезмерного связывания. Если каждое слово в Вашем
документе - связь - читатель не знает какая же связь полезна.
Когда Вы используете сокращение или технический термин, который не
объясняется в Вашем документе, попытайтесь найти пригодный, дающий
объяснения документ, на который можно установить связь. Делать ли это в
каждом случае, зависит от обстоятельств.
Когда упоминается лицо или организация, желательно установить
связи на личную домашнюю страницу или домашнюю страницу организации (если
это возможно).
Когда Вы ссылаетесь на документ, укажите связь к нему, если
информация доступна на Web (или, по крайней мере, приведите
библиографическую справку о нем).
Если у Вас есть информация, которую Вы хотите сделать доступной
через Web, но которая менее важна (для большинства читателей, по крайней
мере), чем Ваш главный документ, создайте отдельный HTML файл (или группу
файлов), и введите раздел в главном документе, например, Дополнительная
информация, проставив соответствующие связи.
Если Вам требуется указать связи из одной точки к нескольким
документам (например, когда Вы упоминаете компьютерную программу, Вам надо
привязать к ней краткое описание, полное руководство, FTP сайт - для
загрузки и т.д.), создайте небольшой файл, содержащий эти связи с
соответствующими объяснениями и дайте связь на него.
Попытайтесь сделать текст связи коротким, но емким.
Пользователи обычно ожидают, что получат больше информации по
теме, где есть связь. Если этого не происходит, предоставьте им
соответствующие объяснения. В частности, когда Вы создаете связь с FTP,
давая URL указание на место расположения двоичного файла, сделайте это
четко в тексте, чтобы было понятно, что означает выбор этой связи.
Связывайтесь только с действительно нужной информацией. Пытайтесь
установить связь с короткими, написанными ясным языком документами,
которые содержат дальнейшие связи к более детальной, технической
информации. Например, в документах, написанных для обширной аудитории, избегайте
связывания со стандартами ISO или RFC документами.
Изображения,
формулы и т.п.
Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим
материалом не является частью HTML. В частности, HTML спецификации не объявляют каких-либо требований или ограничений на графические форматы, поддерживаемые
Web броузерами.
В обоих случаях пользователь увидит изображение, если только броузер поддерживает специальный графический
формат. Наиболее поддерживаемые форматы - 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
<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.