Реферат: Основные структуры HTML 3.2 документа

Элемент 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	поднятый, немного больший	поднятый	обычный текст

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

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

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

• компьютерный вывод (подсказки, обычный вывод или сообщения об ошибках) в пределах SAMP элементов
• общие термины, описывающие ввод пользователя - внутри VAR элементов
• действительный пользовательский ввод в пределах KBD элементов
• цитируемый компьютерный программный код (источник), реализуемый в пределах CODE элементов.

Во всех подходах должны приниматься во внимание принципы деления в пределах строки и использования пробелов и символов табуляции, что может требовать вставки 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 (&amplt&ampgt) {

  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 (&amplt&ampgt) {</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>

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

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

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

Во-первых, сформируйте правильную структуру Вашего документа. Затем, если необходимо, пересмотрите размещение документа. Учтите, что различные броузеры используют различные размещения, и даже одни и те же броузеры могут показывать одни и те же документы по-разному в разных средах. Например, когда пользователь меняет размер окна своего 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 документу, который объясняет это сокращение и дает информацию о нем. Отображение текста связи возможно по-разному - текст связи может быть подчеркнут, окрашен или выделен в тексте каким-то другим образом. Пользователь (читатель) может узнать, как связи отображены в каждом отдельном окружении.

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

• Избегайте чрезмерного связывания. Если каждое слово в Вашем документе - связь - читатель не знает какая же связь полезна.
• Когда Вы используете сокращение или технический термин, который не объясняется в Вашем документе, попытайтесь найти пригодный, дающий объяснения документ, на который можно установить связь. Делать ли это в каждом случае, зависит от обстоятельств.
• Когда упоминается лицо или организация, желательно установить связи на личную домашнюю страницу или домашнюю страницу организации (если это возможно).
• Когда Вы ссылаетесь на документ, укажите связь к нему, если информация доступна на Web (или, по крайней мере, приведите библиографическую справку о нем).
• Если у Вас есть информация, которую Вы хотите сделать доступной через Web, но которая менее важна (для большинства читателей, по крайней мере), чем Ваш главный документ, создайте отдельный HTML файл (или группу файлов), и введите раздел в главном документе, например, Дополнительная информация, проставив соответствующие связи.
• Если Вам требуется указать связи из одной точки к нескольким документам (например, когда Вы упоминаете компьютерную программу, Вам надо привязать к ней краткое описание, полное руководство, FTP сайт - для загрузки и т.д.), создайте небольшой файл, содержащий эти связи с соответствующими объяснениями и дайте связь на него.
• Попытайтесь сделать текст связи коротким, но емким.
• Пользователи обычно ожидают, что получат больше информации по теме, где есть связь. Если этого не происходит, предоставьте им соответствующие объяснения. В частности, когда Вы создаете связь с FTP, давая URL указание на место расположения двоичного файла, сделайте это четко в тексте, чтобы было понятно, что означает выбор этой связи.
• Связывайтесь только с действительно нужной информацией. Пытайтесь установить связь с короткими, написанными ясным языком документами, которые содержат дальнейшие связи к более детальной, технической информации. Например, в документах, написанных для обширной аудитории, избегайте связывания со стандартами ISO или RFC документами.

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

Поддержка изображений в 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, чтобы создать связь к нему. Последний способ более предпочтителен, особенно для больших формул. Если пользователю хочется читать текст не отвлекаясь, то взглянуть на формулу (изображение) он сможет, когда захочет. Более того, он сможет посмотреть ее в отдельном окне экрана.