Изучение HTML 3.2 на примерах

Jukka Korpela. Перевод "АКДИ Экономика и жизнь".

Введение

Для кого?

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

О чем?

Мы рассматриваем вариант HTML 3.2, который на сегодня является наиболее рекомендуемой версией HTML - языка описания документов, используемого на Web. Эта версия также известна под кодовым названием Wilbur. Обращаем Ваше внимание на то, что HTML 3.2 не является расширением или вариантом HTML 3.0, который существует сам по себе (совпадение первых цифр номеров версий 3.0 и 3.2 обманчиво!). Если быть точнее, HTML 3.2 включает

Зачем Вам изучать HTML?

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

Почему HTML 3.2?

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML 3.2 вероятнее всего будут использоваться и в дальнейшем. Изучая HTML 3.2 и познавая его глубже, создавая документ в начале изучения HTML 3.2 и расширяя его насколько это возможно, Вы сможете создавать документы, которые могут быть просмотрены многими броузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, предоставляемый Netscape Navigator, Internet Explorer или некоторыми другими программами. Если это действительно служит Вашим целям и Вы хотите сформировать собственное мнение о названных программах, пользуйтесь им. Но работа с HTML 3.2 - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только когда это действительно необходимо.

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

Так как прежний стандарт - HTML 2.0 - поддерживается несколько шире, чем HTML 3.2, и HTML 3.2 является расширением HTML 2.0 с незначительными отличиями, Вы можете попробовать написать Ваш документ в HTML 2.0 (избегая при этом использования возможностей HTML 2.0, изъятых в HTML 3.2: элементов NEXTID и атрибутов URN и METHODS в A элементах). По этой причине, новые конструкции (теги, атрибуты тега или значения атрибутов), которые появились в HTML 3.2, отмечены в этом документе следующим образом: (Нет в HTML 2.0!). Но даже строго придерживаясь HTML 2.0, Вы не можете рассчитывать на абсолютно правильное воспроизведение Вашего документа разными броузерами из-за недостатков самих программ просмотра. Тестовый набор HTML (см. Osma Ahvenlampi) содержит большой документ RFC 1866 HTML 2.0 для тестирования броузера на соответствие HTML 2.0 спецификации.

Рамки этого документа

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

Мы не обсуждаем основные издания, связанные с обеспечением Web информацией. Информация и мнения о подобных изданиях можно найти, например, на странице Консорциума World Wide Web . Так же и World Wide Web FAQ является обширным, но понятным (хотя не вполне современным) сайтом; он содержит отдельные Авторские разделы на Web. Очень полезным документом, содержащим ответы на некоторые практические проблемы, является Проект Web "Авторская группа на Web для работы с FAQ". То же касается и вопросников для авторов на сайте WDG и HTML: часто встречающиеся проблемы. Одним из лучших основных ориентиров стиля является Стилевое руководство по онлайновому гипертексту от Tim Berners-Lee, главного создателя Web. В дополнение к информации по HTML, Вам необходимо знать, где поместить Ваши документ, чтобы сделать их доступными миру. Это может создать проблемы, как с установкой директорий, так и подходящей защитой для файлов. В отношении необходимой для Вашего сайта информации - проконсультируйтесь у Вашего провайдера Web услуг .

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

О версиях этого пособия

Это пособие существует и как подборка взаимосвязанных между собой небольших HTML-файлов, и как единственный HTML-файл. Последние (наиболее современные) копии находятся по адресу:

Чтобы распечатать текст на бумаге, Вы можете использовать файл Комментированная версия (сгенерированный программой Netscape из HTML версии), который также существует в сокращенном виде, как сжатый (с Unix утилитой сжатия).

Лучше посмотреть на...

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

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

Как изучать HTML 3.2

Получение общей начальной информации о HTML

Если Вы не знакомы с какой-нибудь версией HTML, Вы можете в начале прочитать введение в основные концепции и идеи HTML. Самым доходчивым является NCSA Beginner's Guide to HTML (Руководство по HTML для начинающих). Отметим, однако, что этот материал описывает HTML 2.0 и содержит некоторые спорные мысли. Он доступен по адресу http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.

Если Вы хотите посмотреть другие материалы, воспользуйтесь, например Yahoo! - смотрите компьютерную область: http://www.yahoo.com/Computers/, которая содержит World Wide Web section, a list of guides and tutorials on HTML (раздел World Wide Web, список руководств и обучающих материалов - на нескольких языках).

Обращаем Ваше внимание, что не все тексты по HTML представляют язык точно так, как это определено спецификациями HTML 3.2. Это объясняется тем, что язык HTML быстро развивается, и даже с определенными отклонениями в основной линии развития.

Систематическое изучение HTML 3.2

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

  1. Прочтите разделы Обязательная структура документа и Рекомендуемая структура документа. Вы можете, при желании, сравнить их содержание со Структурой HTML 3.2 документа на странице
    http://www.htmlhelp.com/reference/wilbur/,
    созданной Группой разработчиков Web.
  2. Практикуйтесь в создании HTML документа рекомендованной структуры, но не заходите слишком далеко. Храните этот документ под именем вроде template.html и используйте его в качестве основы для Ваших будущих HTML документов. Создайте его копию, добавьте некоторый понятный текст в тело документа и убедитесь, что документ читается Web броузером.
  3. Прочтите Основные структуры в HTML 3.2 с примерами этого пособия. Сосредоточтесь на изучении основных идей и их применении, не стараясь запоминать технические детали и, возможно, Вы получите удовольствие от этого.
  4. Изучите Общие замечания по синтаксису HTML в этом документе. Вам понадобиться эта информация, когда Вы будете писать на HTML. А вот подраздел заметки о разном Вы можете не читать.
  5. Практикуйтесь в создании Ваших собственных и полезных для Вас документов, используя теги, коль скоро Вы научились их применять.
  6. Просмотрите раздел сокращенных описаний этого документа для ознакомления с материалом, способствующим пониманию HTML 3.2, и следуйте связям, чтобы получить больше информации об элементах, которые представляются Вам потенциально полезными.
  7. После этого - мир открыт для дальнейшей практики и изучения. Однако будьте осторожны: происходит масса случаев неверного употребления HTML. Сумейте сделать так, чтобы Структура была с Вами!

Официальная HTML 3.2 спецификация

Если у Вас появились сомнения в отношении точности формы, значения и ограничений на теги HTML, Вам необходимо проконсультироваться с официальным документом по HTML, доступном на странице World Wide Web Consortium:
http://www.w3.org/pub/WWW/MarkUp/Wilbur/,
особенно с Рекомендациями W3C HTML 3.2 Ссылочные спецификации

Ссылочные спецификации содержат технический текст и относительно коротки. Могут быть также полезны консультации с прежней HTML 2.0 спецификацией (также известной как RFC 1866), так как текущие HTML 3.2 спецификации могут быть понятны иногда только при ознакомлении с HTML 2.0, как базовым документом.

Чтобы понимать спецификации точно, требуется некоторая "беглость" в чтении SGML (метаязык, используемый для формального описания синтаксиса HTML). Для этого можно посмотреть SGML страницу Консорциума, или Предварительное введение в SGML, или SGML Web страницу, особенно Букварь SGML фирмы SoftQuad. (Если Вы знаете финский язык, Вы можете начать с Hyvin lyhyt johdatus SGML:ддn).

В этих пособиях Вы увидите некоторые отрицательные внутренние несообразности в спецификации HTML 3.2.

Дополнительные источники информации

Существует большое количество доступно изложенной документации по HTML. Ниже приводим наиболее удачные источники информации по HTML 3.2:

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

Проверьте Ваш HTML

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

Общие замечания по синтаксису HTML

Набор символов

Формально, набор символов, используемых в HTML документе должен

В практической работе Вы должны использовать только ISO Latin 1 набор символов. Сейчас и в ближайшем будущем Вы можете твердо рассчитывать на его обширную поддержку приложениями. Поддержка ISO Latin 1 должна существовать во всех броузерах, однако иногда с этим существуют проблемы. Также Вы можете придерживаться ASCII набора символов, которые являются подмножеством ISO Latin 1, в особенности, если у Вас нет необходимости в написании символов с диакритическим знаком или символов, не входящих в английский алфавит (a - z).

Если Ваша клавиатура или текстовый редактор не позволяет Вам вводить (т.е. сразу печатать) некоторые ISO Latin 1 символы, например, ä или ñ, Вы можете использовать символьные escape последовательности.

Некоторые предупреждения для тех, кто создает документы на микрокомпьютерах:

См. также А.Дж. Флавелл Заметки по ISO 8859-1 в контексте Web.

Теги HTML

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

Примеры: 


<H1>

<H1 ALIGN=LEFT>

Элементы HTML

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


<H1>Foreword</H1>

В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги, например <HR>, являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен. Далее мы будем называть теги по их именам, опуская обязательные угловые скобки.

Aтрибуты

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

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Предпочтительно использование двойных кавычек, так как для глаза человека бывает трудно отличить одинарные кавычки от символов, подобных символам акцентирования.

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

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER". Ссылка на URL, например, HREF=foo.htm, допустима, однако, когда URL используется с атрибутами, он должен быть заковычен, например HREF="http://www.hut.fi/". Существуют некоторые броузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

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

Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть <UL COMPACT="COMPACT"> можно сократить до <UL COMPACT>. Некоторые агенты пользователей (программы просмотра пользователя, броузеры) даже требуют минимизации для некоторых атрибутов (COMPACT, ISMAP, CHECKED, NOWRAP, NOSHADE, NOHREF). Так что лучше использовать минимизированный синтаксис там, где это возможно.

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

Case чувствительность (чувствительность к выбору)

Что касается имен тегов, атрибутов и большинства значений атрибутов, HTML является case нечувствительным языком. Вы можете, например, написать TITLE, или Title, или title, или даже tItLE, если Вам нравится. (В этом документе используется написание на верхнем регистре. Это должно помочь читателю отличить HTML код от нормального текста.) Но существуют и case чувствительные конструкции языка, а именно:

Разделение на строки и использование пробелов и символов табуляции

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

Термин newlin (новая линия) используется, чтобы ТЕОРЕТИЧЕСКИ обозначить конец строки. SGML определяет, что строка (запись) должна начинаться стартовым символом (newline - перевод строки, LF, ASCII код 10) и заканчиваться символом конца записи (возврат каретки, CR, ASCII 13). На практике, HTML документы представляются и передаются с использованием newline представления, согласованного с данными компьютерными системами. Поэтому, броузеры HTML допускают поддержку любого из трех общепринятых представлений разделения строк, обозначаемых последовательностью CR LF, только CR, или только LF, и на основе такого допущения и выделяют ошибки представления начальных и конечных символов записи.

Таким образом, не имеет значения, как Вы разделите текст на строки, так как перевод строки эквивалентен пробелу. Заметим, однако, что Вы не должны в HTML разделять слово на две строки. Если Вы, например, разделили слово international на две строки, как это приведено ниже: 


inter-

national

это будет интерпретироваться, как 


inter- national
.

Таким образом, для логичного представления Вашего документа, Вы должны использовать такие теги HTML, как P или BR, чтобы при необходимости обеспечить перевод строки.

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

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

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

Что касается использования перевода строки в сочетании с тегами HTML, то есть специальные правила:

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

Классификация элементов

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

Элементы HTML можно классифицировать на три основные категории:

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

Правило "большого пальца", которое может помочь в запоминании того, какой элемент - блоковый, а какой - текстовый: блоковые элементы завершают абзац, текстовые - нет.

Заметьтe: часто блоковые элементы могут содержать как текстовые, так и другие блоковые элементы, например, блоки могут быть вложенными. Текстовые элементы также могут быть вложенными. Но текстовые элементы не могут включать блоковые элементы. Например, выражение
<CITE><H3>Origin of Species</H3></CITE>
неверно (так как CITE - текстовый элемент, а H3 - блоковый элемент) и к тому же нелогично (Вы не можете придать заголовку, как структуре, значение цитаты, так ведь?). Тогда как запись
<H3><CITE>Origin of Species</CITE></H3>
была бы правильной, хотя отдельные броузеры воспринимают это с трудом. Еще одни пример: не заголовок (headings) вставляется в атрибут NAME тега A, а наоборот. Так же было бы неверно иметь завершение абзаца (тег P) в пределах, например, элемента STRONG. Хотя некоторые броузеры понимают это, семантика этого сомнительна, и Вы должны были бы использовать отдельные начальные и конечные теги STRONG в пределах каждого абзаца (если Вы действительно желаете выделить такие большие порции текста!).

Разрешенная вложенность элементов

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

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

Заметки на память:

(Пояснения к списку)

HTML

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

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, DFN, DIV, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HTML, I, KBD, LI, P, PRE (с ограничениями), SAMP, SMALL, STRIKE, STRONG, SUB, SUP, TD, TH, TT, U, VAR.

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

DD, DIR, DL, DT, MENU, OL, TABLE, TR, UL.

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

AREA, BASE, BASEFONT, BR, HEAD, HR, IMG, INPUT, ISINDEX, LINK, MAP, META, OPTION, PARAM, SCRIPT, SELECT, STYLE, TEXTAREA, TITLE,

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

BLOCKQUOTE, BODY, CENTER, DD, DIV FORM HTML, LI (в пределах UL или OL), TD, TH.

Заметки о разном:
об escape последовательностях (символьных объектах), именах, цветовых атрибутах, ширине, пикселях, вертикальном выравнивании (VALIGN), непрерывных пробелах (&nbsp;), комментарии

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

Escape последовательности (символьные объекты)

Escape последовательности или, точнее, символьные объекты, представляют собой метод представления специальных символов. Например, escape последовательность &lt; обозначает символ "меньше чем" (<).

Некоторые символы, такие как <, используются в HTML в специальном значении, поэтому должен существовать способ их выражения, как символьных данных внутри самого документа или в URL. Принято использовать следующие нотации (соответствия):
символ обычное имя (имена) символа HTML запись символа (escape последовательность)
< символ "меньше чем", левая угловая скобка &lt;
> символ "больше чем", правая угловая скобка &gt;
& амперсанд &amp;
" двойные кавычки &quot;

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

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

В escape последовательности важен вариант написания символов, то есть различаются заглавные и строчные буквы. Например, амперсанд (&) не может быть представлен как &AMP (escape последовательность - неопределена). Escape последовательность &auml; и &Auml; - a умляут (a диерезис, написание a с двумя точками над ней) - обозначает два разных символа и дает д и Д. Escape последовательность написанная прописными буквами идентифицируется как &AUML;.

Необходимость в вышеупомянутых escape последовательностях проистекает из синтаксиса HTML. На самом деле escape последовательности существуют для всех символов в наборе ISO Latin 1. Возьмете себе на заметку следующее:

Есть и другие причины для использования escape последовательностей. Использование &auml; вместо д казалось бы может дать некоторую независимость символьного кода, однако на самом деле это не так - если броузер может вывести &auml; правильно, он может также верно вывести и документ, в котором прямым образом специфицирован символ д. Однако бывает так, что из-за ограничений клавиатуры невозможно прямым образом ввести некоторые специальные символы, и в таких случаях можно воспользоваться нотацией (последовательностью), подобной &auml;.

Некоторые броузеры поддерживают и другие escape последовательности, например, &trade;, &shy;, &cbsp;. Использование таких нотаций не рекомендуется. (Нотация &trade; представляет символ, который вообще не принадлежит к ISO Latin 1. Вместо этого можно использовать проверенную нотацию <SUP><SMALL>TM</SMALL></SUP>. Нотация &shy; задает "мягкий дефис", который имеет неопределенную семантику в HTML. Нотация &cbsp; установленная для "условного прерывающегося пробела", отсутствует в ISO Latin 1 и, возможно, такой символ скоро вообще не будет использоваться.)

Имена

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

и начинающуюся с буквы.

Концепция имени имеет место в описании атрибутов HTTP-EQUIV и NAME элемента META и в описании атрибута NAME элемента PARAM.

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

Цвета

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

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

Для спецификации цвета, как значения атрибута, существуют два варианта:

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

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

Цветовые имена и sRGB значения
Black (Черный) = "#000000" Green (Зеленый) = "#008000"
Silver (Серебро)= "#C0C0C0" Lime (Известь) = "#00FF00"
Gray (Серый) = "#808080" Olive (Оливковый) = "#808000"
White (Белый) = "#FFFFFF" Yellow (Желтый)= "#FFFF00"
Maroon (Темно-бордовый) = "#800000" Navy (Темно-синий) = "#000080"
Red (Красный) = "#FF0000" Blue (Синий) = "#0000FF"
Purple (Фиолетовый) = "#800080" Teal (Чирок) = "#008080"
Fuchsia (Фуксия) = "#FF00FF" Aqua (Аква) = "#00FFFF"

Эти цвета были первоначально отобраны, как 16 цветный стандарт, поддерживаемый Windows VGA палитрой.

См. также:

Атрибут WIDTH (ширина)

Значение атрибута WIDTH в тегах, например, HR или TABLE можно специфицировать двумя альтернативными путями:

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

Пиксели

Используемые в атрибутах значения пикселя определяют пиксели экрана. Физический размер пикселя определяется монитором пользователя.

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

Вертикальное выравнивание (VALIGN)

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

Чтобы позиционировать содержимое ячеек в верхней части, середине или нижней части ячейки таблицы соответственно, задаются следующие значения атрибута VALIGN: TOP (верх), MIDDLE (середина), BOTTOM (низ).

По умолчанию VALIGN=MIDDLE.

Непрерывный пробел (&nbsp;) (Non-breaking spaces)

Последовательность &nbsp; является escape нотацией для символа, который в других контекстах обычно называется непрерывным пробелом, или, для краткости, NBSP. Согласно ISO 8859, этот символ должен быть представлен, как обыкновенный пробел (пропуск, пустое место), однако такой, который не заменялся бы переводом строки (как это часто бывает с обыкновенным пробелом в текстовой обработке). То есть для того, чтобы два слова были на одной строке с некоторым расстоянием между ними, между этими словами должны появиться непрерывные пробелы. (Действительная ширина промежутка между словами может меняться, и нет необходимости привязываться к определенному количеству пробелов в файле HTML.)

Вопрос о том, надо предупреждать перевод строки, когда осуществляется вывод HTML документа, не имеет однозначного ответа. Спецификации HTML 2.0 говорят:

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

Более того, хотя HTML 3.2 Ссылочные спецификации не вносят ясности в этот вопрос, в разделе описания атрибута NOWRAP элементов TH и TD указывается, что знак &nbsp; должен действовать как непрерывный пробел, по крайней мере в пределах ячеек таблицы.

Если Вы используете непрерывные пробелы, используйте их вместо обычных пробелов, а не в дополнение к ним. Например, если Вы хотите предупредить перевод строки между version и 3, наберите version&nbsp;3 (но не version&nbsp; 3).

С другой стороны, в таблице в HTML 3.2 &nbsp; может иметь совершенно другое значение, которое может быть описано, как непустое пространство: когда таблица представлена с бордюром, ячейки без содержания (просто пробелы не учитываются) изображаются без бордюра, однако &nbsp; в разметке указывается!

Комментарии

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

Вы можете начать комментарии с четырехсимвольной последовательности <!-- (знак "меньше чем", восклицательный знак, два дефиса) и завершить его трехсимвольной последовательностью --> (два дефиса, знак "больше чем"). Например: <!-- Написано Юккой Корпела -->.

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

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

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

Основные структуры 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 3.2

Индексы и надписи

*A *ADDRESS *APPLET *AREA *B *BASE *BASEFONT *BIG *BLOCKQUOTE *BODY *BR *CAPTION *CENTER *CITE *CODE *DD *DFN *DIR *DIV *DL *DT *EM *FONT *FORM *H1 *H2 *H3 *H4 *H5 *H6 *HEAD *HR *HTML *I *IMG *INPUT *ISINDEX *KBD *LI *LINK *MAP *MENU *META *OL *OPTION *P *PARAM *PRE *SAMP *SCRIPT *SELECT *SMALL *STRIKE *STRONG *STYLE *SUB *SUP *TABLE *TD *TEXTAREA *TH *TITLE *TR *TT *U *UL *VAR

Структуры описания тега могут быть сведены к нижеследующему:

В представленном материале не обсуждаются элементы XMP, LISTING, и PLAINTEXT. Сейчас они устарели и не используются, вместо них должен использоваться элемент PRE.

A - якоря (anchors), гиперсвязи (hyperlinks), и т.д.

Цель

Чтобы установить гиперсвязи (hyperlinks) и "якоря" (anchors) для них, т.е. определить, какое слово или другая конструкция в документе обеспечивает связь с ресурсом (например, с файлом HTML), или специфицировать, что текущее место экрана может использоваться с данным именем, как флажок для таких связей (в том же или другом документе).

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

Типичное представление

A-элемент в программе из вида <A HREF="цель">текст якоря</A> преобразуется при выводе на экран так, что текст якоряпредставляется способом, выделяющим его из другого текста (например, подчеркиванием или подсветкой).

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

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

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

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

A-элементы, содержащие какие-либо атрибуты, не влияют на отображение документа (исключение составляет атрибут HREF).

Основной синтаксис

<A HREF="цель">текст якоря</A>

или

<A NAME="имя"></A>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NAME строка символов имя для связанного "конца" должно быть уникальным в пределах документа
HREF URL (униформный ресурсный локатор) сетевой адрес для связанного ресурса должен соответствовать другому HTML документу, PDF файлу, изображению и т.д.
REL строка указание связи вперед; ср. LINK с REL в принципе, может быть использован для определения, как работать с конкретным связанным ресурсом, когда выводится набор связанных ресурсов
REV строка указание обратной связи связь от документа A к документу B по выражению REV=relation - та же самая, что и связь от B к A по выражению REL=relation.
TITLE строка заголовок для связанного ресурса необязательно

Значение атрибута TITLE может быть использовано, например:

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Включает большинство HTML элементов.

Содержимое

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

Примеры

Пример A.html: 


<P>A hyperlink referring to a document in the same directory as the 

current one: 

<A HREF="ADDRESS.html">../../examples of using ADDRESS tag</A>. 

<P>A hyperlink referring to a document elsewhere: 

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

<P>A hyperlink in which the link text contains markup: 

<a href="http://www.iki.fi/oa/HTML/"><cite>The HTML test set</cite></a> 

<p>A hyperlink referring to a label in the same document: 

<A HREF="#final">final example</A>. 

<P>A hyperlink referring to a label in another document: 

<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP2.html#UR"> 

URL info in HTML Primer</A> 

<P>A link to an image: 

<A HREF="http://www.hut.fi/~jkorpela/perhe.jpg">a family picture</A>. 

<P><A NAME="final">Finally, this is just text to 

which you can refer with a hyperlink.</A>

Примечания

Смотрите общее обсуждение изображений, формул и т.д., которое содержит дополнительные примеры.

По поводу ISMAP смотрите примеры IMG.

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

Вам не нужно говорить "Нажми здесь" для того, чтобы дать информацию о Ваших университетских программах. Всего лишь укажите связь от слов, которые Вы могли бы сказать: "Наши выдающиеся университетские программы...". Связи к большим файлам или неизвестным форматам должны помечаться особым образом, например: "Наша волнующая боевая песня (400k .au)..."

Пренебрежение кавычками (quotes) и пропуск их в атрибуте HREF является достаточно распространенной ошибкой. Некоторые броузеры приспособлены к пониманию этого, другие - нет (связь может не работать совсем).

Вы не можете вложить A элемент, но можете записать его для использования с двойной целью - как HREF и как NAME атрибуты, например, <A NAME="foo" HREF="#bar">zap</A>

В NAME элементе имя может быть только текстовым элементом и является частью документа, а точнее - частью между начальным и конечным тегами. Большинство броузеров интерпретируют элемент A NAME так, что он производит локализацию (определение места) в документе, а именно - локализацию начального тега, оставляя позицию конечного тега неопределенной. (При этом, конечный тег </A> - обязателен!)

ADDRESS (АДРЕС) - информация об авторе информации

Цель

Предоставить контактную информацию об авторе текущего документа (т.е. документа, в котором находится элемент).

Типичное представление

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

Основной синтаксис

<ADDRESS>адресная информация<ADDRESS>

Возможные атрибуты

Никаких.

Допустимый контекст

Блоковый контейнер.

Содержимое

Текстовые элементы и P.

Примеры

Очень простая адресная информация, содержащая только E-mail адрес (адрес электронной почты) автора:

Пример ADDRESS-1.html: 


<ADDRESS> 

<P> 

Jukka.Korpela@hut.fi 

</P> 

</ADDRESS>

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

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


<ADDRESS> 

<P> 

<A HREF="http://www.hut.fi/~jkorpela/">Jukka Korpela</A> 

</P> 

</ADDRESS>

Подлиннее, более типичный пример:

Пример ADDRESS-3.html: 


<ADDRESS> 

<P> 

Jukka Korpela, M.S. (Math.<)BR> 

Helsinki University of Technology Computing Centre<BR> 

FIN-02150 Espoo<BR> 

Finland 

</P>

<P> 

Telephone International +358 9 451 4319 

</P>

<P> 

Electronic mail (Internet): 

<A HREF="mailto:Jukka.Korpela@hut.fi">Jukka.Korpela@hut.fi</A><BR>

WWW home page: 

<A HREF="http://www.hut.fi/%7Ejkorpela/">http://www.hut.fi/%7Ejkorpela/</A> 

</P> 

</ADDRESS>

Примечания

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

Некоторые броузеры, включая Netscape, не используют переход на новый абзац (выделение абзацев), когда отображают ADDRESS. Поэтому можно посоветовать использовать теги P вокруг адресной информации, хотя, в принципе, они не являются необходимыми. С тех пор, как P разрешено использовать в пределах ADDRESS, (но не наоборот!) используйте тот же стиль, что и в вышеприведенных примерах.

Когда записываете адресную информацию, желательно следовать применяемым стандартам. В частности, когда приводите телефонные номера, пожалуйста, следуйте рекомендациям CCITT под номером E.123.

Сам тег ADDRESS не создает связи, поэтому чтобы обеспечить связь, например, к авторской домашней странице или почтовую связь к адресу E-mail (адресу электронной почты), используйте обычный тег A с атрибутом HREF (в пределах структуры ADDRESS или вне ее). Смотри также: элементы META и LINK с атрибутом REV.

Не забудьте добавить теги BR для перевода строки.

APPLET - Java апплеты (Нет в HTML 2.0!)

Цель

Внедрение (вставка) Java апплетов в HTML документ.

Типичное отображение

Если броузер приспособлен к использованию Java апплетов, он может запустить апплет на исполнение. Если нет - он высвечивает содержимое (после элемента PARAM) апплета, или строку, специфицируемую в атрибуте ALT.

Основной синтаксис

<APPLET CODE="имя апплет-файла" WIDTH=m HEIGHT=n ALIGN=выравнивание> текстовое описание </APPLET>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
CODEBASE URL основной URL апплета; обычно задает директорию или папку, содержащую код апплета по умолчанию - URL документа
CODE строка имя файла, который содержит компилированный Applet - подкласс апплета обязателен; интерпретируется как родственный базе, специфицированной атрибутом CODEBASE; не может быть неограниченным
ALT строка текстовое описание, которое должно высвечиваться вместо апплета содержимое элемента; может быть использовано для тех же целей, но с большей гибкостью
NAME строка имя отдельного апплета такие имена позволяют апплетам находить (и связывать) друг друга в одном документе.
WIDTH целое предполагаемая ширина в пикселях, не учитывая окон или диалогов апплета обязателен
HEIGHT целое предполагаемая высота в пикселях, не учитывая окон или диалогов апплета обязателен
ALIGN TOP, MIDDLE, BOTTOM, LEFT, RIGHT позиционирует область высвечивания апплета на дисплее подобен атрибуту ALIGN элемента IMG
HSPACE целое ширина незаполненного пространства слева и справа от зоны высвечивания апплета в пикселях соответствует атрибуту HSPACE элемента IMG
VSPACE целое высота незаполненного пространства выше и ниже зоны высвечивания апплета в пикселях соответствует атрибуту VSPACE элемента IMG

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Включает большинство элементов HTML.

Содержимое

Ноль или более элементов PARAM, за которыми следует ноль или более элементов текста.

Назначение и использование элементов текста в содержимом точно не определено. В HTML 3.2 Ссылочной спецификации приводится следующее пояснение:

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

Заметьте, что текстовые элементы в содержимом и атрибут ALT в начальном теге - два способа вывести что-то вместо апплета. Здесь есть два отличия: значение ALT - простая строка, в то время как элементы могут содержать разметку текста; и атрибут ALT не дает эффекта, если броузер совсем не знает элемента APPLET, тогда как такие же броузеры должны обработать текстовые элементы в содержимом - они просто игнорируют начальный и конечный теги APPLET и PARAM.

Примеры

Простой пример: 


<APPLET CODE="Bubbles.class" WIDTH=500 HEIGHT=500 ALIGN=MIDDLE> 

Java applet that draws animated bubbles. 

</APPLET>

Более сложный пример, использующий PARAM элемент: 


<APPLET CODE="AudioItem" WIDTH=15 HEIGHT=15 ALIGN=TOP> 

<PARAM NAME=snd VALUE="Hello.au|Welcome.au"> 

Java applet that plays a welcoming sound. 

</APPLET>

Следующий пример, иллюстрирующий использование CODEBASE: 


<APPLET CODEBASE="applets/NervousText" 

   CODE="NervousText.class" 

   WIDTH=300 

   HEIGHT=50> 

<PARAM NAME=TEXT VALUE="Java is Cool!"> 

<IMG SRC="sorry.gif" ALT="This looks better with Java support"> 

</APPLET>

Примечания

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

AREA (ОБЛАСТЬ) - область в реагирующей на нажатие клавиши схеме (MAP) (Нет в HTML 2.0!)

Цель

Для определения области ("горячей зоны") в реагирующей на нажатие клавиши схеме.

Типичное представление

Видимого эффекта нет, но когда пользователь "кликнет" в специфицированной области, идет обращение к документу, упомянутому в элементе AREA.

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

Основной синтаксис

<AREA HREF="URL" COORDS="x1, y1, x2, y2">

Возможные атрибуты

имя атрибута возможные значения смысл примечания
SHAPE RECT, CIRCLE, POLY очертания области по умолчанию RECT
COORDS строка или форма, определяемая SHAPE координаты области обязателен, за исключением используемого по умолчанию SHAPE
HREF URL адрес документа действует, как гипертекстовая связь
NOHREF NOHREF означает, что этот регион не действует используется, когда Вы хотите вырезать дыру в "горячей" зоне
ALT строка текстовое описание области обязателен

Значения SHAPE и синтаксис и семантика COORDS для каждой формы следующие:

SHAPE значение форма области синтаксис COORDS значения COORDS
SHAPE=RECT прямоугольник COORDS="x1, y1, x2, y2" x и y задают координаты верхнего левого и нижнего правого углов
SHAPE=CIRCLE круг COORDS="x0, y0, r" x и y - координаты центра, r - радиус
SHAPE=POLY многоугольник COORDS="x1, y1, x2, y2, x3, y3, ..." x и y - координаты вершин

Значения x и y координат измеряются в пикселях от верхнего левого угла соответствующего образа. Это означает, что значение y возрастает вниз.

В альтернативном варианте x или y могут быть также определены в процентах, со знаком процентов, добавляемым к числу, причем проценты берутся соответственно относительной ширине или высоте образа. Пример: 


SHAPE=RECT COORDS="0, 0, 50%, 100%"

Примеры различных форм:
SHAPE=RECT COORDS="0, 0, 9, 9" прямоугольник 10 на 10 пикселей в верхнем левом углу изображения
SHAPE=CIRCLE COORDS="10, 10, 5" круг с радиусом в 5 пикселей и центром, расположенном в точке (10, 10)
SHAPE=POLY COORDS="10, 50, 15, 20, 20, 50" многоугольник (в данном случае, треугольник) с координатами вершин (10, 50), (15, 20) и (20, 50)

Допустимый контекст

MAP элемент.

Содержимое

Ничего.

Примеры 


<AREA HREF="guide.html" ALT="Guide" COORDS="0, 0, 118, 28">

Примечания

Если два или более региона перекрываются, регион, определенный первым в схеме (MAP) имеет преимущество перед последующими регионами. Это означает, что элементы AREA с атрибутом NOHREF должны устанавливаться прежде элементов с атрибутом HREF.

Проектная версия HTML 3.2 содержала DEFAULT, как возможное значение атрибута SHAPE, для использования при спецификации, когда пользователь отбирает точку, которая не принадлежит какой-нибудь области, специфицированной в другом элементе AREA. Это было удалено из окончательного варианта спецификаций. Тот же эффект можно получить используя SHAPE=RECT COORDS="0, 0, 100%, 100%". Такой элемент AREA должен быть последним в пределах элемента MAP.

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

B - жирный шрифт

Цель

Представить текст выделенным (жирным) шрифтом.

Типичное представление

Выделенное (жирным шрифтом). См. общие примечания к отображению разметки.

Основной синтаксис

<B>текст</B>

Возможные атрибуты

Никаких.

Допустимый контекст

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

Содержимое

Элементы текста. Заметим, что не разрешается перевод (прерывание) абзаца.

Примеры

Пример B-1.html: 


Compare <B>bolded text</B> with normal text.

Примечания

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

Смотрите общие примечания по разметке текста, где приведены дополнительные примеры.

BASE - базовый, основной URL

Цель

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

Например, у нас задан:
<BASE href="http://foo.com/index.html">
и элемент IMG:
<IMG SRC="images/bar.gif">
Это приведет к формированию следующего адреса изображения
http://foo.com/images/bar.gif

Типичное отображение

Никакое. Элемент BASE непосредственно не отображается в документе.

Основной синтаксис

<BASE HREF="URL">

Возможные атрибуты

имя атрибута возможные значения смысл примечания
HREF URL базовый URL обязателен

Допустимый контекст

Элемент заголовка (HEAD), в котором может быть только один элемент BASE.

Содержимое

Никакое.

Пример 


<BASE HREF="http://www.hut.fi/~jkorpela/">

То есть, связь
<A HREF="lists.html">list ../../examples</A>
эквивалентна
<A HREF="http://www.hut.fi/~jkorpela/lists.html">list ../../examples</A>

Примечания

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

При отсутствии элемента BASE в документе URL самого документа становится базовым в пределах документа. (Это не является необходимым, так как базовый URL может быть перекрыт HTTP заголовком соответствующего документа.)

Советуется заключать URL в кавычки, хотя это не всегда обязательно.

Не забывайте слэш "/". Все, что следует за последним слэшем в URL в элементе BASE интерпретируется, как принадлежащее части имени файла и игнорируется. Нижеследующее является эквивалентом элемента BASE в примере приведенном выше:
<BASE HREF="http://www.hut.fi/~jkorpela/foobar">
Несмотря на то, что следующие строки эквивалентны, первый вариант написания не совсем правильный:
<BASE HREF="http://www.hut.fi/~jkorpela">
 <BASE HREF="http://www.hut.fi/">

BASEFONT (БАЗОВЫЙ ШРИФТ) - размер базового шрифта (Нет в HTML 2.0!)

Цель

Спецификация размера основного шрифта (относительно других размеров).

Типичное отображение

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

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

Действительные размеры шрифта устанавливаются в зависимости от броузера. Смотрите примечания об отображении элемента FONT.

Основной синтаксис

<BASEFONT SIZE=n>

Возможные атрибуты

имя атрибута возможное значение смысл
SIZE строка размер шрифта (1 - 7)

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

Допустимый контекст

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

Содержимое

Никакое.

Примеры

Пример BASEFONT-1.html: 


<P>This is text with default font size (3).</P> 

<BASEFONT SIZE=5> 

<P>This is text with font size 5 with <FONT SIZE=1>some text</FONT> 

inserted with font size 1.</P>

Примечания

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

Используйте элемент FONT, а еще лучше SMALL или BIG, чтобы установить размер шрифта локально (заметим, что перевод абзаца не разрешен в пределах FONT.)

BASEFONT может быть глобальной копией для FONT с SIZE, также как BODY с TEXT - для FONT с COLOR.

BIG (БОЛЬШОЙ) - большой шрифт (Нет в HTML 2.0!)

Цель

Представление текста большим шрифтом.

Типичное представление

Больше, чем нормальный шрифт. Смотрите общие примечания по отображению разметки.

Основной синтаксис

<BIG>текст</BIG>

Возможные атрибуты

Никаких.

Допустимый контекст

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

Содержимое

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

Примеры

Пример BIG-1.html: 


That was a <BIG>big</BIG> mistake!

Примечания

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

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

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

Элемент FONT предоставляет множество вариантов для задания различных размеров шрифта.

BLOCKQUOTE (БЛОК ЦИТИРОВАНИЯ) - длинное цитирование

Цель

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

Типичное отображение

Как отдельный абзац (или последовательность абзацев). Часто с отступом (возможным как слева, так и справа). Часто - шрифтом, отличным от простого текста, обычно - курсивом.

Основной синтаксис

<BLOCKQUOTE>
текст цитаты
</BLOCKQUOTE>

Возможные атрибуты

Никаких.

Допустимый контекст

Контейнер блока.

Содержимое

Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.

Примеры

Пример BLOCKQUOTE.html: 


<P>The original context of the saying <I>O tempora, o mores</I> is the 

following:</P> 

<BLOCKQUOTE> 

<P> 

O tempora, o mores! 

Senatus haec intellegit. consul videt; hic tamen vivit. 

Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, 

notat et designat oculis ad caedem unum quemque nostrum. 

</P> 

<P ALIGN=RIGHT> 

<A HREF="http://www.dla.utexas.edu/depts/classics/documents/Cic.html">

 Cicero</A>, 

<A HREF="http://www.dla.utexas.edu/depts/classics/documents/cat1.html"> 

<CITE>Oratio in Catilinam Prima</CITE></A>, 2 

</P> 

</BLOCKQUOTE>

Примечания

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

BLOCKQUOTE - блоковый элемент, поэтому он используется для относительно длинных цитат. Что касается коротких цитат, их лучше представлять используя разметку текстового уровня. В особых случаях Вы можете использовать CODE, SAMP, KBD или CITE, однако лучше обратиться к специфицированию физического представления, например к использованию курсива или кавычек - согласно Вашим представлениям и требованиям языка, который Вы используете. (В HTML 3.2 не существует общего элемента текстового уровня для цитирования, главным образом потому, что правила цитирования в разных языках различны.)

Если важно, чтобы текст выводился так, как он написан (с разделением на строки и использованием знаков пробелов и табуляции), можно использовать PRE.

Когда описывается человеко-машинное взаимодействие, используйте специальные элементы CODE, SAMP и KBD для цитирования программного кода, листингов программ или ввода с клавиатуры.

Не используйте BLOCKQUOTE, чтобы получить отступы. Броузер может и не показывать их при представлении текста.

Хорош тоном считается специфицировать источник цитирования, иногда это даже требуется законом (копирайт). Поэтому, если это возможно, обеспечьте связь к источнику документа на Web в добавление к спецификации источника в тексте.

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

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

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

BODY (ТЕЛО) - тело документа

Цель

Основная структура документа HTML всегда состоит из заголовка и тела. Нет необходимости явно помещать тело в BODY элемент, однако делая так, можно специфицировать атрибуты, влияющие на представление документа в целом (например, установить фоновое изображение или цвет).

Типичное отображение

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

Основной синтаксис

<BODY>тело документа</BODY>

Возможные атрибуты (Нет в HTML 2.0!)

имя атрибута возможные значения смысл
BGCOLOR цветовая спецификация фоновый цвет документа
TEXT цветовая спецификация цвет для текста документа
LINK цветовая спецификация цвет для непосещенной гипертекстовой связи
VLINK цветовая спецификация цвет для посещенной гипертекстовой связи
ALINK цветовая спецификация цвет для активной гипертекстовой связи; используется для выделения текста связи на момент, когда пользователь нажал на связь
BACKGROUND URL URL фонового образа

Допустимый контекст

HTML элемент, который может быть либо подразумеваемым, либо явным. Только один элемент BODY разрешен в документе, и он должен находится после элемента HEAD (который тоже может быть как подразумеваемым, так и явным).

Содержимое

Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.

Примеры

Пример BODY-1.html: 


<BODY> 

<H1>Sample document</H1> 

<P> This is just a trivial sample document. Its body contains first a heading, 

then a paragraph, and nothing else. 

</P> 

</BODY>

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


<BODY 

BGCOLOR=AQUA 

TEXT="#848484" 

LINK=RED 

VLINK=PURPLE 

ALINK=GREEN 

> 

<H1>Sample document</H1> 

<P> This is also a trivial sample document. Its body contains first a heading, 

then a paragraph, and then a paragraph containing a link. However, the BODY 

element uses attributes to affect the visual rendering. 

</P> 

<P> This document was written by 

<A HREF="http://www.hut.fi/~jkorpela/">Jukka Korpela</A>. 

</P> 

</BODY>

Пример BODY-3.html: 


<BODY 

TEXT=BLUE 

LINK=RED 

VLINK=BLUE ALINK=PINK 

BACKGROUND="http://www.hut.fi/~jkorpela/HTML3.2/wave.gif" 

> 

<H1>Sample document</H1> 

<P> 

This document contains first a heading, then a paragraph, and then a 

paragraph containing a link. However, the BODY element uses 

attributes to affect the visual rendering, including a background image. 

</P> 

<P> 

This document was written by 

<A HREF="http://www.hut.fi/~jkorpela/">Jukka Korpela</A>. 

</P> 

</BODY>

Примечания

В документе разрешен только один элемент BODY.

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

Если Вы устанавливаете какие-то из атрибутов BGCOLOR, TEXT, LINK, VLINK или ALINK, то устанавливайте их все. Иначе, например, специфицированный Вами фоновый цвет может совпасть с пользовательским цветом для текста по умолчанию.

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

Цвет текста можно изменять локально с помощью элемента FONT с атрибутом COLOR. Однако цвет фона нельзя установить локально, поэтому если Вы хотите использовать отдельные фоновые образы, Вы должны создать отдельные HTML файлы (или использовать таблицы стилей).

В элемента BODY Вы можете задать как BGCOLOR, так и BACKGROUND. В этом случае обычно броузер отдает предпочтение BACKGROUND, но если изображение фона невозможно загрузить, будет использовано BGCOLOR.

BR - перевод строки

Цель

Выполниться перевод строки.

Типичное отображение

Перевод строки (но не абзаца).

Основной синтаксис

<BR>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
CLEAR LEFT, RIGHT, ALL, NONE управление текстовым потоком по умолчанию - NONE

Атрибут CLEAR может быть использован, чтобы передвинуть перемещаемый образ на другой край. <BR CLEAR=LEFT> передвинет образ к левому краю, <BR CLEAR=RIGHT> - к правому краю, в то время как <BR CLEAR=ALL> сделает то же самое и к левому и к правому краям одновременно.

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML.

Содержимое

Никакое.

Примеры

Типичный пример, где элемент BR использован для перевода некоторого текста на новую строку:

Пример BR-1.html: 


<P> 

You should always end the terminal session with the command 

<BR> 

logout 

<BR> 

or some other operation with the same effect. 

</P>

Примечания

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

Элементы BR могут быть использованы, чтобы смоделировать подабзацы, как объяснено в описании элемента P.

Элементы BR с атрибутом CLEAR используются при вставке в документ изображений (смотрите описание элемента IMG.)

Иногда, чтобы получить незаполненное пространство, многократно используют элементы BR. Однако это работает не во всех броузерах. Лучше для этого использовать элемент PRE.

CAPTION (ЗАГОЛОВОК) - заголовок для таблицы (Нет в HTML 2.0!)

Цель

Представить заголовок таблицы.

Типичное представление

Выше или под самой таблицей обычным шрифтом.

Обычно заголовок центрирован по горизонтали. (HTML 3.2 не предоставляет средство для изменения поведения броузера.)

Основной синтаксис

<CAPTION>текст</CAPTION>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
ALIGN TOP, BOTTOM размещение заголовка относительно таблицы (вверху или внизу таблицы) по умолчанию обычно TOP

Допустимый контекст

Элемент TABLE. Если элемент TR присутствует, элемент CAPTION должен следовать первым, до элемента TR.

Содержимое

Текстовые элементы.

Примеры 


<CAPTION>Summary of measurement results</CAPTION> 

<CAPTION><EM>Mean temperatures</EM></CAPTION>

Примечания

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

Смотрите обсуждение таблиц, которое также содержит дополнительные примеры.

Некоторые броузеры (например, Netscape) не отображают заголовок отлично от обычного текста. Поэтому в пределах элемента CAPTION желательно использовать элементы логической разметки, например, EM или STRONG.

CENTER (ЦЕНТР) - центрирование (Нет в HTML 2.0!)

Цель

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

Типичное отображение

Центрированное.

Основной синтаксис

<CENTER>
часть документа
</CENTER>

Возможные атрибуты

Никаких.

Допустимый контекст

Контейнер блока.

Содержимое

Заголовки, текстовые элементы, блоковые элементы, а также элементы ADDRESS.

Примеры

Пример CENTER.html: 


<P> 

This is a normal paragraph which will be rendered according to default 

alignments, which usually means left alignment. 

</P> 

<CENTER> 

<P> 

This is text which will be centered. 

</P> 

<P> 

This is a longer text paragraph which will be centered. It is so long that line 

breaks will most probably occur. Notice that the division into lines is usually 

not the same as in the HTML file. 

</P> 

</CENTER>

Примечания

Элемент CENTER эквивалентен DIV с ALIGN=CENTER. CENTER был введен Netscape прежде, чем в нем была добавлена поддержка элемента DIV. Это учтено в HTML 3.2 в расчете на широкое распространение дополнения.

Использование атрибута ALIGN в элементах P и заголовках - предпочтительнее использования элемента DIV.

Так как CENTER - блоковый элемент, он закрывает открытый элемент P (т.е. заставляет броузер вставлять тег </P>, когда это необходимо). Но программы просмотра не всегда явно отображают перевод абзаца до и после элемента CENTER. Поэтому если нужно выделить абзац, используйте элемент P с атрибутом ALIGN.

CITE - ссылки

Цель

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

Типичное отображение

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

Основной синтаксис

<CITE>текст</CITE>

Возможные атрибуты

Никаких.

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Не разрешается разделение на абзацы внутри содержимого.

Примеры

Простой пример для выделения названия книги:

Пример CITE-1.html: 


I learned this from <CITE>The Origin of Species</CITE>.

Примечания

Об основной природе CITE:

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

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

CODE (КОД) - программный код

Цель

Для представления программного кода.

Типичное отображение

Текстом одного размера (моноширинным - monospaced). Смотрите общие примечания по отображению разметки.

Основной синтаксис

<CODE>текст</CODE>

Возможные атрибуты

Никаких.

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Не разрешено разделение на абзацы.

Примеры

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

Пример CODE-1.html: 


Expressions like <CODE>a[i++] + b[i++]</CODE> should not be used,

since they cause undefined behavior.

Примечания

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

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

DD - определение данных

Цель

Обеспечить определение для термина в дефинитивном списке (элемент DL)

Типичное отображение

С отступом и представленное, как отдельная часть текста, прикрепленная к соответствующему дефинитивному термину.

Основной синтаксис

<DD>определение</DD>

Конечный тег </DD> всегда может быть опущен, что обычно и делается.

Возможные атрибуты

Никаких.

Допустимый контекст

DL элемент.

Содержимое

Блоковые элементы. Элементы заголовков и ADDRESS не допускаются. Но разрешены списки.

Примеры

Небольшой пример: 


<DD>See RFC 822.</DD>

Дополнительные примеры смотрите в описании элемента DL.

Примечания

Использование DD без DL элементов, чтобы получить отступ в тексте, не рекомендуется - это нарушает спецификации и часто не работает.

DFN - определение (Нет в HTML 2.0!)

Цель

Указывает, что данное слово имеет определение.

Типичное отображение

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

Смотрите также общие примечания по отображению разметки.

Основной синтаксис

<DFN>текст</DFN>

Возможные атрибуты

Никаких.

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзаца не разрешается.

Примеры

Пример DFN-1.html: 


<DFN>Ichthyology</DFN> is the branch of natural science which studies fish.

Примечания

Так как на сегодняшний день еще не обеспечена эффективная поддержка DFN, лучше представлять дефинитивные элементы, используя элементы EM или STRONG.

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

Смотрите также общие замечания к элементам фразы.

DIR - ненумерованный список в директории

Цель

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

Типичное отображение

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

Рекомендации говорят, что элемент DIR должен отображаться, как многостолбцовый список директорий.

Основной синтаксис

<DIR>
<LI> элемент списка 1
<LI> элемент списка 2
...
</DIR>

Возможные атрибуты

имя атрибута возможные значения смысл
COMPACT COMPACT сокращенное промежуточное пространство

Допустимый контекст

Блоковый контейнер.

Содержимое

LI элементы, которые не содержат блоковые элементы.

Примеры

Очень маленький список:

Пример DIR-1.html: 


<DIR> 

<LI>one 

<LI>two 

<LI>three 

</DIR>

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

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


<DIR> 

<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J<LI>K<LI>L<LI>M 

<LI>N<LI>O<LI>P<LI>Q<LI>R<LI>S<LI>T<LI>U<LI>V<LI>W<LI>X<LI>Y<LI>Z 

</DIR>

Смотрите также Примеры различных списковых элементов в HTML.

Примечания

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

DIV - разделитель документа (Нет в HTML 2.0!)

Цель

Для спецификации разделения документа так, что к различным частям документа могут быть применены различные выравнивания (влево, по центру, вправо).

Типичное отображение

Часть документа, выровненная согласно действию атрибута ALIGN элемента DIV.

Основной синтаксис

<DIV ALIGN=выравнивание>
раздел документа
</DIV>

Возможные атрибуты

имя атрибута возможные значения смысл
ALIGN LEFT, CENTER, RIGHT выравнивание текста в пределах элемента (влево, по центру, вправо)

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

Допустимый контекст

Блоковый контейнер.

Содержимое

Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.

Примеры

Пример DIV-1.html: 

 

<P> 

This is a normal paragraph which will be rendered according to default 

alignments, which usually means left alignment. 

</P> 

<DIV ALIGN=CENTER> 

<P> 

This is text which will be centered. 

</P>

<P> 

This is a longer text paragraph which will be centered. It is so long that 

line breaks will most probably occur. Notice that the division into lines 

is usually not the same as in the HTML file. 

</P> 

</DIV>

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

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


<DIV ALIGN=CENTER> 

Mieleni minun tekevi<BR> 

aivoni ajattelevi<BR> 

lдhteдni laulamahan<BR> 

saa'ani sanelemahan.<BR> 

<P ALIGN=RIGHT><CITE>Kalevala</CITE></P> 

</DIV>

Примечания

Использование атрибута ALIGN в элементах P и в заголовках обычно предпочтительнее использования DIV.

Так как DIV - блокоподобный элемент, он закрывает открытый элемент P (т.е. заставляет броузер вставить тег </P>, когда это необходимо). Но программы просмотра не всегда выделяют абзац до и после элементов DIV. Поэтому, если нужно явно отобразить перевод абзаца, используйте элемент P с атрибутом ALIGN.

DL - дефинитивные или описательные списки

Цель

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

Типичное отображение

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

Основной синтаксис

<DL>
<DT>термин 1<DD>определение термина 1
<DT>термин 2<DD>определение термина 2
...
</DL>

Возможные атрибуты

имя атрибута возможные значения смысл
COMPACT COMPACT более компактный стиль отображения

Допустимый контекст

Контейнер блока.

Содержимое

DT и DD элементы.

Элементы DL должны быть спарены с соответствующими элементами DD. Множество элементов DT может быть при единственном элементе DD. То есть несколько терминов могут иметь одно и тоже определение. Документ не должен содержать несколько последовательных элементов DD.

Примеры

Пример DL.html: 


<DL> 

<DT>Recursion, indirect 

<DD>See <I>indirect recursion</I>. 

<DT>Indirect recursion 

<DD>See <I>recursion, indirect</I>. 

</DL>

Смотрите также Примеры различных списковых элементов в HTML.

Примечания

Хотя элементы DL броузеры часто представляют в "некрасивом" виде, единственная причина для их использования вместо более распространенного элемента TABLE - то что некоторые программы просмотра все еще не поддерживают TABLE.

Смотрите также общие примечания к использованию списковых элементов.

DT - дефинитивный термин

Цель

Спецификация термина в дефинитивном списке (элемент DL).

Типичное отображение

Отлично от обычного текста. Представление термина средствами компоновки, другим шрифтом или и тем и другим вместе.

Основной синтаксис

<DT>термин</DT>

Конечный тег </DT> всегда может быть опущен, что обычно и делается.

Возможные атрибуты

Никаких.

Допустимый контекст

Элемент DL.

Содержимое

Текстовые элементы.

Примеры

Небольшой пример: 


<DT>Terminus technicus.</DT>

Для более детальных примеров смотрите описание элементов DL.

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

Цель

Подчеркнуть (выделить).

Типичное представление

Курсивом. Но если возможно, броузер может использовать и подчеркивание (так делает Lynx). Смотри общие примечания к отображению разметки.

Основной синтаксис

<EM>текст</EM>

Возможные атрибуты

Никаких.

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Не разрешено разделение на абзацы.

Примеры

Пример EM-1.html: 


The EM element is <EM>logical</EM> markup as opposite to 

<EM>physical</EM> markup such as the I element.

Примечания

Избегайте слишком частого использования подчеркиваний. Подчеркивание всего - равносильно отсутствию подчеркивания.

Для усиления подчеркивания можно использовать элемент STRONG.

Смотрите также общие замечания по фразовым элементам.

FONT (ШРИФТ) - размер и цвет шрифта (Нет в HTML 2.0!)

Цель

Специфицировать размеры шрифта (относительно к другим размерам), его цвет или и то и другое вместе.

Типичное отображение

Содержимое элемента FONT не всегда соответствует размеру и цвету шрифта, представленного броузером.

Установленный в HTML размер шрифта в действительности может быть уменьшен или увеличен программой просмотра, чтобы соответствовать размеру шрифта по умолчанию (3).

Основной синтаксис

<FONT SIZE=n>текст</FONT>

или

<FONT COLOR=цветовая спецификация>текст</FONT>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
SIZE строка размер шрифта; цифра в диапазоне 1 - 7 либо целое со знаком, например, "+1" или "-2" число со знаком добавляется к текущему базовому размеру шрифта, установленного в BASEFONT, чтобы получить номер размера в диапазоне 1 - 7
COLOR цветовая спецификация цвет содержимого элемента FONT  

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

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы.

Примеры

Пример FONT-1.html: Это - некоторый текст: 


<FONT SIZE=-1>including text which may appear in a smaller font</FONT>. 

<P>
Это - попытка представить текст более рельефно: жирным шрифтом, с подчеркиванием, шрифтом большого размера и красным цветом: 

<B><U><FONT SIZE=7 COLOR=RED>word</FONT></U></B>

Примечания

Избегайте использования элемента FONT по причинам, объясненным при обсуждении текстовой разметки. (Для пояснения такого отношения к FONT посмотрите и разъяснение Уоррена Стиила Что неверно в элементе <FONT>?.) Если Вам надо изменить размеры шрифта, воспользуйтесь лучше элементами SMALL или BIG.

Для установки размера шрифта на большей части документа используйте BASEFONT. (Заметим, что в пределах FONT не допускается выделение абзацев.)

Атрибуты в теге BODY могут быть использованы для установки цвета фона, цвета текстового шрифта или того и другого вместе. Не используйте цвет фона такой же, как и цвет текста!

Не на всех броузерах содержимое элемента FONT представляется так, что величины SIZE (1 - 7) соответствуют различным размерам шрифта. Приведем примеры реализации FONT на некоторых популярных броузерах:

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

Есть два способа задания размеров шрифта. Первый: в коде HTML мы указываем размеры шрифта числом в диапазоне 1 - 7, которое "заложено" в броузеры и аппаратным способом преобразуется в физические размеры, выраженные, например, в пикселях, точках или миллиметрах. Отображение обычно нелинейно - необязательно, например, шрифт размера 3 составляет половину шрифта размером 6. Второй способ, в котором размеры шрифта (в значении HTML) определены относительным значением атрибута SIZE, например, SIZE="+1" (что совершенно отлично от SIZE="1" или SIZE=1) означает текущий основной размер шрифта плюс один, и эта сумма соответствует отображаемому размеру шрифта в приведенном примере.

FORM (ФОРМА) - заполняемая форма

Цель

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

Типичное представление

Нечто подобное заполняемой на бумаге форме.

Основной синтаксис

<FORM ACTION="URL">
содержание формы, включая элементы INPUT и, возможно, элементы TEXTAREA и SELECT
</FORM>

Возможные атрибуты

имя атрибута возможные значения смысл атрибута примечания
ACTION URL адрес сервера, который использует форма сервер HTTP или URL
METHOD GET, POST метод передачи данных, полученных от пользователя, на сервер по умолчанию - GET
ENCTYPE строка механизм, используемый для кодирования содержимого формы по умолчанию приложение /x-www-form-url-кодирование

Детали создания форм специфицированы в RFC 1867.

Допустимый контекст

Блоковый контейнер.

Содержимое

То, что разрешено в пределах элемента BODY (т.е. заголовки, текстовые и блоковые элементы, элементы ADDRESS), за исключением того, что нельзя использовать в пределах элементов FORM.

Есть некоторые элементы, которые могут появиться только в пределах элемента FORM. В частности:

INPUT
текстовое одностроковое поле, поля пароля, переключатели, радиокнопки, кнопки установки и перезагрузки, скрытые поля, кнопки выгрузки файла, кнопки изображений и т.д.
SELECT
меню единичного или множественного выбора
TEXTAREA
многострочное текстовое поле.

Примеры

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

Пример FORM-1.html: 


<FORM ACTION="mailto:Jukka.Korpela@hut.fi" METHOD=POST> 

<TEXTAREA ROWS=5 COLS=72 NAME=Comments></TEXTAREA> 

<P> 

<INPUT TYPE=SUBMIT VALUE=Send> 

</FORM>

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

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


<FORM ACTION="mailto:Jukka.Korpela@hut.fi" METHOD=POST> 

Please tell your opinion about the overall quality of this document: 

<SELECT NAME=evaluation> 

<OPTION>Very poor 

<OPTION>Rather poor 

<OPTION>Average 

<OPTION>Rather good 

<OPTION>Very good 

</SELECT> 

<P> 

You can also be more specific by writing a few comments: 

<TEXTAREA NAME=Comments ROWS=5 COLS=72></TEXTAREA> 

<P> 

<INPUT TYPE=SUBMIT VALUE=Send> 

</FORM>

Примечания

В одном документе может быть несколько форм.

Для очень простых форм можно использовать элемент ISINDEX.

Хотя спецификации HTML 3.2 говорят, что атрибут ACTION предпочитается использованию mailto:, предоставляя легкий способ создания форм для управления информацией через e-mail, заметим, что эта способность поддерживается еще не везде. Например, код в нашем первом примере не работает в Netscape, так как он с самого начала использует свой внутренний e-mail-формирователь, игнорируя способ, которым была заполнена форма. Lynx же, например, в этом случае работает лучше. Вы должны принимать во внимание, что формируемое e-mail послание появляется в кодированной форме, хотя и не полностью нечитаемой. В случае, когда в приведенном примере 2 пользователь выбирает опцию Rather poor и печатает текст Too few ../../examples., содержимое послания будет выглядеть следующим образом : 


evaluation=Rather+poor&Comments=Too+few+../../examples.

H1, H2, H3, H4, H5, H6 - заголовки

Цель

Определить заголовок. Существует шесть уровней от H1 (наиболее важный) до H6 (наименее важный).

Типичное отображение

Более важные заголовки обычно отображаются большими шрифтами, чем менее важные. Заголовок H1 - очень большой шрифт, в то время как H6 может быть крошечным (много меньше обычного текста!).

Основной синтаксис

<Hn>заголовок текста</Hn>

где n принимает значения 1, 2, 3, 4, 5 или 6.

Возможные атрибуты (Нет в HTML 2.0!)

имя атрибута возможные значения смысл
ALIGN LEFT, CENTER, RIGHT выравнивание заголовка

По умолчанию - выравнивание по левому краю, однако это может быть перекрыто включением элементов DIV или CENTER.

Допустимый контекст

Блоковый контейнер.

Содержимое

Текстовые элементы.

Примеры

Пример H-1.html: 


<H1>Notes on General Relativity</H1>

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


<H1 ALIGN=CENTER>The story of my life</H1> 

<H2>Preface</H2> 

<H3>General remarks</H3>

Пример H.html:

Это отдельный файл, содержащий заголовки всех уровней.

Примечания

Заголовки H1, H2 и H3 можно использовать постоянно. Избегайте применения H4, H5 и H6. Смотрите также общие структурные рекомендации.

В особенности, не используйте заголовки H5 или H6 для представления текста малым шрифтом, так как пока их поддерживают только некоторые броузеры. В будущем броузеры могут быть адаптированы так, чтобы заголовки даже самого нижнего уровня выглядели, по крайней мере, так же, как обычный текст. Для задания малого шрифта используйте элемент SMALL (или в крайнем случае FONT).

HEAD (ЗАГОЛОВОК) - заголовок документа

Цель

Основная структура документа HTML всегда состоит из заглавия и тела. Явное вложение заголовка в элемент HEAD не обязательно.

Типичное отображение

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

Основной синтаксис

<HEAD>
элемент TITLE
</HEAD>

Как начальный, так и конечный теги могут быть опущены.

Возможные атрибуты

Никаких.

Допустимый контекст

Элементы HTML, которые могут быть либо подразумеваемыми, либо явными. В документе допускается только один элемент HEAD, и он должен появиться прежде элемента BODY (который тоже может быть явным или неявным).

Содержимое

Обязательно один TITLE элемент и необязательно (в любом порядке)

Примеры 


<HEAD> 

<TITLE>Getting started with Perl</TITLE> 

</HEAD>

Примечания

Явное задание элемента HEAD действует только на формирование заголовка, читаемого из кода HTML и являющегося частью документа, принадлежащей к разделу заголовка.

HR - изменение раздела (горизонтальная черта)

Цель

Обозначить изменение раздела.

Типичное отображение

Горизонтальная черта (на полную ширину экрана - по умолчанию). До и после тега HR броузер автоматически добавляет тер P, поэтому нет необходимости в формировании незаполненного вертикального пространства до и после черты.

В речевых программах просмотра тег срабатывает как пауза.

Основной синтаксис

<HR>

Возможные атрибуты (Нет в HTML 2.0!)

имя атрибута возможные значения смысл примечания
ALIGN LEFT, RIGHT, CENTER горизонтальное выравнивание черты по умолчанию - CENTER
NOSHADE NOSHADE задает отображение черты в одном цвете (без оттенков) как противоположность обычному двухцветному "желобку"
SIZE целое высота черты в пикселях  
WIDTH спецификация ширины ширина черты  

Допустимый контекст

Блоковый контейнер.

Содержимое

Никакое.

Примеры

Пример HR-1.html: 


<P> 

Some text, followed by a basic (default) horizontal rule. 

</P> 

<HR> 

<P> 

Some other text. 

</P>

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


<P> 

A horizontal rule placed at the right and half the width of the document layout: 

</P> 

<HR ALIGN="RIGHT" WIDTH="50%"> 

<P>цц 

An example with all possible spices: placed at left, solid rule (no shading), 

height 5 pixels, width 100 pixels: 

</P> 

<HR ALIGN="LEFT" NOSHADE SIZE=5 WIDTH=100>

Примечания

Не переусердствуйте с использованием HR. Документ может неудачно выглядеть, если в нем полосы чередуются с совсем маленьким текстом между ними.

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

HTML - элемент верхнего уровня

Цель

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

Типичное отображение

Явное использование элемента HTML не влияет на отображение документа

Основной синтаксис

<HTML>
заголовок и тело документа
</HTML>

Возможные атрибуты

имя атрибута возможные значения смысл
VERSION строка версия HTML

Допустимый контекст

Элемент HTML является элементом верхнего уровня в языке HTML. Смотрите описание базовой структуры документов HTML.

Содержимое

Элемент HEAD с последующим BODY.

Примеры

Пример hello.html: 


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

<TITLE>Hello</TITLE> 

Hello world

Примечания

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

I - курсив

Цель

Представление текста курсивом.

Типичное отображение

Курсив. Смотрите общие примечания к отображению разметки.

Основной синтаксис

<I>текст</I>

Возможные атрибуты

Никаких.

Допустимый контекст

Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Разделение на абзацы не разрешено.

Примеры

Пример I-1.html: 


<I>Canis familiaris</I>, 

but genetically dogs belong to the same species as the wolf, 

<I>Canis lupus</I>.

Примечания

Хотя элемент I является элементом физической разметки и логическая разметка в общем, предпочтительней, существуют причины для использования I. В частности, из-за того, что в HTML 3.2. нет элемента текстового уровня для цитирования. Смотрите примечания об этом в описании элемента CITE.

Однако, не перестарайтесь с использованием элемента I. В частности, для выразительности используйте EM или STRONG, а для переменных (меток) используйте VAR. Смотрите общие примечания по разметке текста.

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

В лингвистике, когда отображаются такие слова или фразы, как "множественное от бык есть рогатый скот", естественно использовать курсив. (HTML 2.0 предлагает использовать SAMP для таких целей, однако это было бы хуже.)

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

IMG - линейные изображения

Цель

Для включения изображения в документ.

Типичное отображение

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

Позиционирование изображения обеспечивается атрибутами элемента IMG.

Основной синтаксис

<IMG SRC="URL" ALT="текст">

Возможные атрибуты

имя атрибута возможные значения смысл примечания
SRC URL адрес изображения обязателен; смотрите примечания по графическому формату
ALT строка текстовое описание изображения  
ALIGN TOP, MIDDLE, BOTTOM, LEFT, RIGHT позиционирование изображения относительно текущей текстовой строки по умолчанию BOTTOM
HEIGHT целое высота в пикселях единственное предложение
WIDTH целое ширина в пикселях единственное предложение
BORDER целое ширина бордюра (рамки) в пикселях используется, когда элемент IMG появляется, как текст якоря; используйте BORDER=0 для подавления рамки
HSPACE целое ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях значение по умолчанию - малое ненулевое число
VSPACE целое высота незаполненного пространства выше и ниже изображения в пикселях значение по умолчанию - малое ненулевое число
USEMAP URL фрагмент идентификатора для сайта клиента с картой образа карты определены элементом MAP; имена карт - чувствительны к регистру набора символов
ISMAP ISMAP показывает, что изображение является картой образа, реагирующей на нажатие клавиши мыши когда пользователь "кликает" на изображении, этот атрибут обеспечивает передачу координат курсора серверу

Атрибутов HEIGHT, WIDTH, HSPACE, VSPACE, и USEMAP нет в HTML 2.0!

Атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позволяет пользователю начать чтение, пока передача данных еще продолжается. Эти атрибуты не предназначены для автоматического изменения размера изображения броузерами. Хотя некоторые броузеры могут масштабировать изображение в соответствии с атрибутами WIDTH и HEIGHT, не полагайтесь на это. Таким образом, они должны задавать реальный размер изображения. (Используйте подходящую программу для определения размеров в пикселях и масштабирования изображения, если это потребуется.)

Значения ALIGN имеют следующий смысл:

ALIGN=TOP
Позиционирует верх изображения с верхом текущей текстовой строки. Броузеры по разному интерпретируют это. Некоторые принимают во внимание то, что было на текстовой строке до изображения и игнорируют, что идет на строке после него.
ALIGN=MIDDLE
Выравнивает середину изображения по основной текстовой строке.
ALIGN=BOTTOM (по умолчанию)
Выравнивает низ изображения по основной строке.
ALIGN=LEFT
Перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения. Отображение зависит от того, были ли выровненные по левому краю какой-нибудь текст или ранее появившееся изображение до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по левому краю изображения смещаться на новую строку, с последующим продолжением текста на прежней строке.
ALIGN=RIGHT
Перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль левой стороны изображения. Отображение зависит от того, были ли выровненные по правому краю какой-нибудь текст или ранее появившиеся изображения до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по правому краю изображения смещаться на новую строку с последующим продолжением текста на прежней строке.

Заметьте, что некоторые броузеры (например, Internet Explorer 2.0 и 3.0) вводят случайное расположение многочисленных лево- и правовыровненных образов. Смотрите BR о способах управления текстовым потоком.

Что касается ISMAP, приведем пример того, как можно его использовать: 


<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>

Нажатые координаты передаются серверу. Броузер извлекает новый URL из URL, специфицированного атрибутом HREF, с добавлением знака вопроса (?), координаты x, запятой (,) и координаты y локализации (координаты выражены в пикселях). Связь следует с использованием уже нового URL. Например, если пользователь нажал на участок с x=10, y=27, формируемый URL будет: "/cgibin/navbar.map?10,27". В целом, это хорошая идея для подавления бордюра (использование атрибута BORDER=0) и обозначения того, что изображение реагирует на нажатие клавиши мыши.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML.

Содержимое

Никакое.

Примеры

Пример IMG-1.html: 


<IMG SRC="Yucca.jpg" ALT="[Picture of Yucca]" WIDTH=110 HEIGHT=168> 

<P> 

<IMG SRC="Yucca.jpg" ALT="[Picture of Yucca]" WIDTH=110 HEIGHT=168 ALIGN=RIGHT> 

This is a simple example of embedding images. 

This paragraph should be displayed, in a graphical browser, 

with an image at the right, 

and before this paragraph the same image should appear 

separately, with default alignment. 

</P>

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

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


<A HREF="http://www.hut.fi/cgi-bin/imagemap/Pictures/English/english.map"> 

<IMG HEIGHT="400" WIDTH="400" 

SRC="http://www.hut.fi/Pictures/English/english.gif" 

ALT="Helsinki University of Technology" ISMAP>

</A>

Примечания

Смотрите общее обсуждение изображений, формул и т.д., которое содержит дополнительные примеры.

Если Вы хотите, чтобы изображение появилось справа или слева от текстового абзаца, Вы должны расположить элемент IMG в начале абзаца (P элемент). Однако при этом результат может Вас не устроить. Поэтому хорошей практикой стало иметь элемент BR с атрибутом CLEAR в конце такого абзаца.

Семантика и использование атрибута ALT пока ясно не определены. Можно рассматривать как рекомендации, обеспечение текстовых вставок в содержимое изображения для текстовых и речевых броузеров. Однако лучше вставлять заголовки или надписи рядом с изображением. Иногда трудно сказать, как лучше дать пояснения к изображению в атрибуте ALT, так как синтаксис ограничен значениями, которые могут использоваться в коде разметки HTML. Более того, одни графические броузеры в ситуации, когда пользователь прекращает автоматическую загрузку изображения высвечивают значение ALT, другие - могут высветить только часть сгенерированного образа, которая мало что говорит. На эту тему A.Дж. Флавелл написал обширный документ Использование ALT текстов в IMG.

INPUT - вводные поля в формах

Цель

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

Типичное отображение

Меняется согласно типу поля.

Основной синтаксис

<INPUT TYPE=тип_поля_ввода другие_атрибуты>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
TYPE TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE тип поля для ввода по умолчанию TEXT
NAME строка имя для идентификации поля, когда его содержимое передается серверу требуется для всех атрибутов, кроме SUBMIT и RESET
VALUE строка первоначальное значение вводного поля; для атрибутов SUBMIT или RESET - текстовая метка обязателен, если TYPE = RADIO или CHECKBOX
CHECKED установленный когда TYPE = RADIO или CHECKBOX, инициализирует поле к установленному состоянию  
SIZE целое видимый размер поля; количество символов  
MAXLENGTH целое максимальное количество символов, разрешенных в текстовом поле по умолчанию не ограничено
SRC URL адрес изображения для полей с фоновыми изображениями
ALIGN TOP, MIDDLE, BOTTOM, LEFT, RIGHT выравнивание изображения для графических управляющих кнопок по умолчанию BOTTOM

Различные значения атрибута TYPE соответствуют различным видам вводных полей.

TYPE=TEXT (тип=текст - по умолчанию)

Одностроковое текстовое поле, чей видимый размер может быть установлен атрибутом SIZE, например, SIZE=40 для 40-символьного поля. Пользователи могут вводить и больше символов, чем этот предел, но с текстовым скроллингом (пролистыванием) поля, чтобы курсор ввода оставался видимым. Вы можете задать верхний предел количества символов атрибутом MAXLENGTH. Атрибут NAME используется для наименования поля, а атрибут VALUE инициализирует текстовую строку в поле, когда документ впервые загружен.

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

Пример: 

 <INPUT TYPE=TEXT SIZE=40 NAME=user value="your name">

TYPE=PASSWORD (тип=пароль)

Этот тип подобен TYPE=TEXT, однако все вводимые символы представляются в виде *, чтобы скрыть текст от подсматривающих глаз, когда вводится пароль. Вы можете использовать атрибуты SIZE и MAXLENGTH, чтобы управлять видимой и максимальной длинами поля точно так же, как для обычного текстового поля.

Пример: 

<INPUT TYPE=PASSWORD SIZE=12 NAME=pw>

TYPE=CHECKBOX (тип=поле установки - переключатель)

Используется для простых булевых атрибутов (т.е. атрибутов, принимающих значение ИСТИНА или ЛОЖЬ) или для атрибутов, которые одновременно могут принимать множество значений. Каждое заполненное переключательное поле генерирует отдельную пару имя/значение в формируемых данных, даже если это приводит к дублированию имен. Используйте атрибут CHECKED для инициализации поля установки по умолчанию.

Пример: 

<INPUT TYPE=CHECKBOX CHECKED NAME=uscitizen VALUE=yes>

TYPE=RADIO (тип=радиокнопка)

Используется для атрибута, который может принимать единственное значение из множества. Каждое поле радиокнопки в группе должно быть задано только одним значением атрибута NAME. Радиокнопки требуют явного атрибута VALUE. Единственная нажатая радиокнопка в группе генерирует пару имя/значение в формируемых данных. Одна радиокнопка в группе атрибутом CHECKED должна быть предварительно установлена по умолчанию.

Пример: 

<INPUT TYPE=RADIO NAME=age VALUE="0-12"> 

<INPUT TYPE=RADIO NAME=age VALUE="13-17"> 

<INPUT TYPE=RADIO NAME=age VALUE="18-25"> 

<INPUT TYPE=RADIO NAME=age VALUE="26-35" CHECKED> 

<INPUT TYPE=RADIO NAME=age VALUE="36-">

TYPE=SUBMIT (тип=отсылка)

Определяет кнопку, которую пользователь может нажать, чтобы передать содержимое формы серверу. Метка устанавливается атрибутом VALUE. Если атрибут NAME задан, то пара наименование/значение для исполняемой кнопки будет включена в передаваемые данные. Вы можете включить несколько исполняемых кнопок в форму. Смотрите TYPE=IMAGE для графических исполняемых кнопок.

Примеры: 

<INPUT TYPE=SUBMIT VALUE="Party on...">

TYPE=RESET (тип=перезагрузка)

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

Пример: 

<INPUT TYPE=RESET VALUE="Start over...">

TYPE=FILE (тип=файл)

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

Таким же образом, как для TYPE=TEXT, для TYPE=FILE можно использовать атрибут SIZE, чтобы установить видимую ширину поля. Вы также можете установить верхний предел для длины имени файла, используя атрибут MAXLENGTH. Некоторые программы просмотра поддерживают способность ограничивать виды файлов, которые могут быть прикреплены к форме, перечислением разделяемого запятыми списка файлов с содержимым типа MIME, задаваемого атрибутом ACCEPT. Например, ACCEPT="image/*" ограничит файлы изображениями. Дополнительная информация может быть найдена в RFC 1867.

Пример: 

<INPUT TYPE=FILE NAME=photo SIZE=20>

TYPE=HIDDEN (тип=скрытый)

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

Пример: 

<INPUT TYPE=HIDDEN NAME=customerid VALUE="c2415-345-8563">

TYPE=IMAGE

Используется для графических кнопок отсылок, отображаемых изображением. URL для изображений специфицируется атрибутом SRC. Выравнивание изображения может быть специфицировано атрибутом ALIGN. В этом отношении графические кнопки отсылки идентичны элементам IMG (так, Вы можете установить для ALIGN - LEFT, RIGHT, TOP, MIDDLE или BOTTOM). Атрибуты NAME и VALUE трактуются точно также, как текстовые кнопки отсылки и должны быть заданы для обеспечения работы неграфических программ просмотра.

Пример: 

<INPUT TYPE=IMAGE SRC="partyon.gif" VALUE="Party on...">

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Включает большинство элементов HTML. Текстовый контейнер может появиться в пределах элемента FORM.

Содержимое

Никакое.

Примеры 


<INPUT TYPE=RESET VALUE="Start over...">

Примечания

Использование INPUT для ввода текста ограничено одностроковыми полями. Используйте TEXTAREA, чтобы определить многостроковые текстовые поля.

Используйте SELECT для меню.

ISINDEX - простой поиск по ключевым словам

Цель

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

Семантика для ISINDEX на сегодняшний день хорошо определена только, когда основным URL для всего документа является HTTP URL. Обычно, когда пользователь нажимает клавишу "Enter", строка запроса посылается к серверу, идентифицированному основным (базовым) URL документа. Например, если введена строка запроса "десять зеленых яблок" и основной URL: 

http://www.acme.com/,

то генерируется запрос: 

http://www.acme.com/?десять+зеленых+яблок".

ISINDEX - единственный элемент, обеспечивающий интерфейс для программы, которая интерпретирует запрос (обычно задаваемой скриптом CGI). Учтите, что с помощью простой вставки элемента ISINDEX нельзя создать в документе средство поиска! Так как большинство Web броузеров обладают некоторыми чертами поиска в документе, Вам нет необходимости придумывать что-то свое для выполнения такого поиска.

Основной синтаксис

<ISINDEX>

Типичное отображение

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

Возможные атрибуты

имя атрибута возможные значения смысл
PROMPT строка послание подсказки

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

Допустимый контекст

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

Содержимое

Никакое.

Примеры

Пример демонстрирует использование ISINDEX для соединения со скриптом "указателя". Сам скрипт здесь не рассматривается, хотя именно он обеспечивает генерацию запроса.

Пример ISINDEX.html: 


<BASE HREF="http://www.hut.fi/cgi-bin/finger"> 

Searching for a user at <a href="http://www.hut.fi/">HUT</a>. 

<ISINDEX PROMPT="User id at HUT:">

Примечания

Никогда не используйте взамен ISINDEX элемент FORM, так как он обладает меньшей гибкостью.

На количество вводимых в поле запроса символов ограничений не существует.

Строка запроса должна быть представлена в Latin-1, так как нельзя специфицировать для URL другой тип символов.

Когда запрос из вводного поля сгенерирован, вместо символов пробела появляются символы "+" и используется механизм образования escape последовательностей для символов обычного URL.

Дополнительную информацию смотрите в HTTP спецификации.

KBD - ввод с клавиатуры

Цель

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

Типичное отображение

Одноразмерное. Смотрите общие примечания к отображению разметки.

Основной синтаксис

<KBD>текст</KBD>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Не разрешен перевод абзаца.

Примеры

Пример KBD-1.html: 


Finally, type <KBD>logout</KBD> and press the return key.

Примечания

Используйте элемент KBD только для фиксированных строк. Для обозначения ввода, который меняется от случая к случаю, лучше использовать элемент VAR.

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

Можно поспорить о том, надо ли использовать элемент KBD для командных имен (или имен программ), если они не появляются в контексте обсуждения того, как задавать команды. Можно сказать, что имя команды типа ls (в Unix) - это всего лишь имя, а не ввод с клавиатуры. Однако рекомендуется использование KBD, когда трудно различить, например, ls, как ввод с клавиатуры (или часть его) и как имя команды (или программы). Заметим, что когда имя команды появляется в начале утверждения, грамматические правила требуют заглавной начальной буквы, которая может ввести в заблуждение пользователя (появится сообщение, что вариант написания не соответствует требуемому вводу с клавиатуры). При использовании же KBD - отображение осуществляется шрифтом одного размера, и поэтому при представлении имени команды можно нарушить грамматическое правило.

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

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

LI - списковый элемент

Цель

Для представления элемента в списке.

Типичное отображение

Отображение определяется природой объемлющего списка.

Основной синтаксис

<LI>содержание элемента списка</LI>

Конечный тег </LI> всегда может быть опущен, что обычно и делается.

Возможные атрибуты (Нет в HTML 2.0!)

Атрибуты определяются следующим контекстом:

Если самый внутренний, включающий списковый элемент есть элемент UL, DIR или MENU, то
имя атрибута возможные значения смысл
TYPE DISC, SQUARE, CIRCLE стиль буллет (с маркером)

Если самый внутренний, включающий списковый элемент есть OL, то
имя атрибута возможные значения смысл
TYPE 1, a, A, i, I стиль нумерации (как в OL)
VALUE целое последовательные числа (смотрите OL)

Допустимый контекст

Элементы UL, DIR, MENU или OL.

Содержимое

Блоковые и текстовые элементы. Элементы заголовков и ADDRESS не разрешены.

Примеры

Краткий пример: 


<LI>A list item.</LI>

Дополнительно смотрите Примеры различных списковых элементов в HTML, а также примеры в описании элементов UL, DIR, MENU и OL.

Примечания

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

Список буллет типов (маркеров) был выбран для обслуживания оригинальных буллет форм, введенных в использование броузером Mosaic в 1993. Список не очень логичен. Обычно, тип буллета по умолчанию в списках UL есть DISC, если список не находится в пределах списка UL, а SQUARE и CIRCLE используются в следующих уровнях вложенности. В броузере Lynx формы, подобные формам DISC, SQUARE и CIRCLE, представлены как звездочка (*), плюс (+) и символ o.

LINK (СВЯЗЬ) - связь с другими документами

Цель

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

Типичное отображение

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

Основной синтаксис

<LINK REL=relation HREF=URL>

или

<LINK REV=relation HREF=URL>

Возможные атрибуты

имя атрибута возможные значения смысл
HREF URL URL для связанных ресурсов
REL строка тип связи "вперед"
REV строка тип связи "назад"
TITLE строка необязательная строка заголовка для связанного ресурса

Связь от документа A к документу B по выражению REV=relation - та же самая связь, что от B к A по выражению REL=relation.

Допустимый контекст

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

Содержимое

Никакое.

Примеры

Элемент связи, определяющий таблицу стилей: 


<LINK REL=STYLESHEET HREF="basic.css">

Простой элемент LINK, специфицирующий авторскую информацию: 


<LINK REV=MADE HREF="mailto:jukka.korpela@hut.fi">

Некоторые элементы LINK, которые могут появиться в большом документе, разделенном на отдельные, но взаимосвязанные файлы HTML: 


<LINK REL=CONTENTS HREF="toc.html"> 

<LINK REL=PREVIOUS HREF="doc31.html"> 

<LINK REL=NEXT HREF="doc33.html">

Примечания

Элемент LINK с REV=MADE иногда используется, чтобы идентифицировать автора документа, либо адрес его электронной почты, либо связь к домашней странице автора. Хотя немногие программы могут использовать эту информацию, ее включение может быть полезным. Заметим, что информация не показывается читателю документа (если он не запросит специально код HTML), поэтому при необходимости Вы должны дополнительно ввести такую информацию с помощью, например, элемента ADDRESS.

В свое время был выпущен отчет Internet draft-ietf-html-relrev-00.txt о предлагаемых значениях связей. (Официально отчет был закрытым.) Вот некоторые из наиболее известных, упоминаемых в HTML 3.2 Ссылочных спецификациях значений:
установка атрибута роль связанного ресурса
REL=INDEX Документ задает индекс для текущего документа.
REL=GLOSSARY Документ дает глоссарий терминов, которые имеют отношение к текущему документу.
REL=COPYRIGHT Объявление авторского права для текущего документа
REL=CONTENTS Документ оглавления для нескольких взаимосвязанных документов.
REL=NEXT Следующий документ для посещения в управляемом просмотре.
REL=PREVIOUS Предыдущий документ в управляемом просмотре.
REL=HELP Документ предлагает помощь, например, описывая расширенный контекст и предлагая дополнительные ссылки к полезным документам. Это помогает в восстановлении ориентирования пользователя, который "потерялся" на своем пути.
REL=BOOKMARK Закладка, используемая для обеспечения прямых связей по отмеченным (введенным в список закладок) точкам при работе с документом. Атрибут TITLE может быть использован в качестве метки в списке закладок. Несколько закладок может быть определено в каждом документе, предоставляя пользователю средства для ориентирования в расширенном документе.

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

В соединении с таблицами стилей элемент LINK может быть использован с REL=STYLESHEET.

MAP - реагирующая на нажатие клавиш карта (Нет в HTML 2.0!)

Цель

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

Типичное отображение

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

Основной синтаксис

<MAP>
AREA элемент
</MAP>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NAME строка имя карты, отсылающее к атрибуту USEMAP элемента IMG важен регистр написания символов

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML.

Содержимое

Элементы AREA.

Примеры

Простой пример для графической инструментальной панели: 


<IMG SRC="navbar.gif" BORDER=0 USEMAP="#map1"> 

<MAP NAME="map1"> 

<AREA HREF="guide.html" ALT="Access Guide" SHAPE=RECT COORDS="0, 0, 118, 28"> 

<AREA HREF="search.html" ALT="Search" SHAPE=RECT COORDS="184, 0, 276, 28"> 

<AREA HREF="shortcut.html" ALT="Go" SHAPE=RECT COORDS="118, 0, 184, 28"> 

<AREA HREF="top10.html" ALT="Top Ten" SHAPE=RECT COORDS="276, 0, 373, 28"> 

</map>

Примечания

Смотрите описание IMG для ознакомления с другими примерами карт, реагирующих на нажатие клавиш.

MENU (МЕНЮ) - ненумеруемый список менюподобных форм

Цель

Представить информацию в менюподобном формате.

Типичное отображение

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

Теоретические рекомендации говорят, что элемент MENU отображается, как одностолбцовый список элементов меню.

Основной синтаксис

<MENU>
<LI> элемент списка 1
<LI> элемент списка 2
...
</MENU>

Возможные атрибуты

имя атрибута возможные значения смысл
COMPACT COMPACT сокращенные промежутки между элементами

Допустимый контекст

Блоковый контейнер.

Содержимое

Элементы LI, которые не содержат блоковых элементов.

Примеры

Пример MENU.html: 


<MENU> 

<LI> Undo 

<LI> Cut 

<LI> Copy 

<LI> Paste 

<LI> Find 

<LI> Find Again 

</MENU>

Смотрите также Примеры различных списковых элементов в HTML.

Примечания

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

При использовании элемента MENU реализуется не привычный выбор из меню, а только высвечивается меню ключевых слов. Чтобы отобразить выбор из меню, можно использовать A элементы. Смотрите также раздел Использование таблиц для представления меню.

META - метаинформация

Цели

Для задания метаинформации (информации о документе), т.е. пар имя/значение, описывающих свойства документа, например, авторство, истечение даты, список ключевых слов и т.д.

Типичное отображение

Никакое. Элементы META не влияют на отображение самого документа. Они могут давать некоторый эффект при представлении информации о документе, например, в верхнем окне броузера или в ответе на запрос от поискового средства (смотрите ниже режим работы AltaVista ).

Основной синтаксис

<META NAME=имя элемента метаинформации CONTENT=содержимое информации>
или
<META HTTP-EQUIV=имя элемента метаинформации CONTENT=содержимое информации>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NAME имя имя отдельного элемента метаинформации альтернатива атрибуту HTTP-EQUIV
HTTP-EQUIV имя имя отдельного элемента метаинформации альтернатива атрибуту NAME
CONTENT строка содержимое метаинформации обязательный атрибут элемента META

Допустимый контекст

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

Содержимое

Никакое.

Примеры 


<META NAME=DESCRIPTION CONTENT= 

"An extensive guide to writing HTML 3.2 documents, with ../../examples and 

practical advice."> 

<META NAME=KEYWORDS CONTENT=

"structural HTML, logical markup">

Примечания

Наиболее известный поисковый сервер AltaVista распознает элементы META со значениями NAME, DESCRIPTION и KEYWORDS. AltaVista использует содержимое META элементов, когда индексирует документы, а значение CONTENT, соответствующее DESCRIPTION, - как резюме для документа, когда возвращает результаты запроса. (По умолчанию AltaVista использует первые несколько слов документа, как резюме, которые зачастую не дают представления о нем.) Для получения большей информации посмотрите Тег META: управление индексированием Вашей страницы в онлайновой помощи самой AltaVista.

Таким образом, рекомендуется включать элементы META способом, подобным приведенному в примере выше.

Тег META влияет на индексирование документа, когда он включается в базу данных поискового сервера. Когда ищутся кандидаты для такой базы данных, нет гарантий на автоматическое включение Вашего документа. Поэтому, если Вы полагаете, что документ важен и, в особенности, если на него нет ссылок из других документов, подумайте над использованием дополнительных возможностей, подобных "Add URL" на главной странице AltaVista.

Для детального ознакомления с вопросами о связи с поисковым сервером смотрите Учебное пособие по поисковой машине для Web дизайнеров.

Разница между NAME и HTTP-EQUIV заключается в том, что последний имеет особое значение, когда документы берутся через HTTP. HTTP серверы могут использовать собственное имя, специфицированное атрибутом HTTP-EQUIV, для создания заголовка в стиле RFC 822 в ответе HTTP. (RFC 822 описывает используемый в Internet протокол электронной почты.) Это не может быть использовано, чтобы установить определенные заголовки HTTP. В отношении деталей смотрите HTTP спецификации.

Например,
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">
приведет к формированию HTTP заголовка
Expires: Tue, 20 Aug 1996 14:25:27 GMT
и это может быть использовано кэшем для определения того, когда выбрать свежую копию документа.

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

OL - упорядоченные (нумерованные) списки

Цель

Для представления информации в виде упорядоченного (нумерованного) списка.

Типичное отображение

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

В противоположность элементу UL элементы списка нумеруются (по умолчанию - последовательно).

Основной синтаксис

<OL>
<LI> элемент списка 1
<LI> элемент списка 2
...
</OL>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
TYPE 1, a, A, i, I стиль нумерации важен регистр написания
START целое начальная цифра последовательности по умолчанию 1
COMPACT COMPACT сокращенное расстояние между элементами  

Атрибутов TYPE и START нет HTML 2.0!

Смысл значений TYPE следующий:

Type Стиль нумерации Первые несколько цифр
1 обычные (арабские) числа 1, 2, 3, ...
a Латинское написание на нижнем регистре a, b, c, ...
A Латинское написание на верхнем регистре A, B, C, ...
i Римские цифры на нижнем регистре i, ii, iii, ...
I Римские цифры на верхнем регистре I, II, III, ...

Допустимый контекст

Блоковый контейнер.

Содержимое

LI элементы (один или более).

Примеры

Простой пример:

Пример OL-1.html: 


<P>

Proceed as follows: 

</P> 

<OL> 

<LI> Try to guess how to use the program. 

<LI> If it fails, send lots of questions to Usenet News. 

<LI> If they flame you, consider contacting local user support. 

<LI> When everything else fails, read the manuals. 

</OL>

Пример, в котором использованы римские цифры:

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


<P> The declinations of nouns in Latin are best distinguished by the ending of the genetive singular: 

</P> 

<OL TYPE=I> 

<LI> <I>-ae</I>, eg <I>terra:terrae</I> 

<LI> <I>-i</I>, eg <I>annus:anni</I> 

<LI> <I>-is</I>, eg <I>labor:laboris</I> 

<LI> <I>-us</I>, eg <I>fructus:fructus</I> 

<LI> <I>-ei</I>, eg <I>dies:diei</I>. 

</OL>

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

Пример OL-3.html: 


<OL TYPE=a START=3 COMPACT> 

<LI> first item <LI> second item 

<LI VALUE=8> item after skipping a few values 

<LI> next item <LI TYPE=A> going on with uppercase 

<LI> this is the last item. 

</OL>

Смотрите также Примеры различных списковых элементов в HTML.

Примечания

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

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

Последовательность номеров элементов списка начинается со значения, задаваемого атрибутом START (по умолчанию 1). Вы можете переустановить его атрибутом VALUE элементов LI. Оба этих атрибута задаются целым значением. (Даже если Вы установили в атрибуте TYPE значение, отличное от 1, значение атрибута VALUE должно быть специфицировано, как последовательность цифр.) Вы не можете указать, на продолжение нумерации от предыдущего списка или, чтобы между списками было пропущено какое-либо значение.

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

OPTION - элемент выбора в меню

Цель

Для представления элемента выбора в меню выбора в пределах формы.

Типичное отображение

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

Основной синтаксис

<OPTION>текст</OPTION>

Конечный тег всегда может быть опущен.

Возможные атрибуты

имя атрибута возможные значения смысл примечания
SELECTED SELECTED задает опцию по умолчанию в элементе SELECT без атрибута MULTIPLE по крайней мере один элемент OPTION может иметь эту установку
VALUE строка значение свойства используется, когда серверу передается содержимое формы; это свойство сочетается со свойством имени, задаваемым атрибутом NAME из внешнего элемента SELECT по умолчанию - содержимое элемента

Допустимый контекст

SELECT элемент.

Содержимое

Строка. Разрешены escape последовательности, но теги не распознаются.

Примеры 


<OPTION>female</OPTION>

P - обычный абзац

Цель

Представление обычного текстового абзаца.

Типичное отображение

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

Броузеры обычно форматируют абзацы так, чтобы подогнать их по горизонтали (по ширине экрана или окна).

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

Основной синтаксис

<P>абзац текста</P>

Возможные атрибуты (Нет в HTML 2.0!)

имя атрибута возможные значения смысл
ALIGN LEFT, CENTER, RIGHT выравнивание абзаца

По умолчанию - левое выравнивание, однако это может быть перекрыто включением элемента DIV или CENTER.

Допустимый контекст

Блоковый контейнер.

Содержимое

Текстовые элементы.

Примеры

Пример P-1.html: 


<P> 

This is a normal text paragraph which contains so many characters that 

it will most probably be split into several lines by a browser. 

</P>

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


<P> 

This is a normal text paragraph with no attribute for horizontal alignment. 

Nothing special. 

</P> 

<P ALIGN=CENTER> 

<B>This is a paragraph which should be centered. It should also appear 

in bold face but this results from explicit use of a B element. Centering itself 

should not affect the 

font.</B> 

</P> 

<P ALIGN=RIGHT> 

This is a paragraph which should be rendered flush right. It is difficult to 

see why you would ever <EM>like</EM> to use this option! 

</P>

Смотрите также примеры относительно BLOCKQUOTE, где продемонстрировано разумное использование ALIGN=RIGHT.

Примечания

Смотрите общее обсуждение абзаце-подобных элементов для выбора подходящих HTML элементов для различных видов абзацев. В частности, если у Вас есть набор тесно связанных малых абзацев, Вы можете организовать их в списки, используя элементы UL и LI вместо P; это типичный способ более компактного визуального представления.

Если Вы намерены использовать элемент P для выравнивания, помните, что он может содержать только текстовые элементы, а элемент DIV - также и блоковые элементы.

Конечный тег </P> всегда может быть опущен, и обычно он опускается. Это, однако может исказить мысли людей: они относятся к <P>, как отделителю абзаца, а в действительности этот элемент инициализирует абзац (завершаемый явным заданием </P> или косвенным заданием тегов, подобных <P> или <H1>).

Абзац не может быть вложенным, что и позволяет опустить </P>. Один способ смоделировать подабзацы - использовать элементы BR в пределах элемента P, другой - использовать списковые элементы (например, UL) вместо элементов P.

Смотрите также раздел Разделение на строки и использование символов пробелов и табуляции.

PARAM - параметры апплета (Нет в HTML 2.0!)

Цель

Передать параметры Java апплету.

Типичное отображение

Непосредственно не отображается, но может проявиться в действиях апплета.

Основной синтаксис

<PARAM NAME=имя VALUE=значение>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NAME имя имя параметра обязательно
VALUE строка значение параметра  

Допустимый контекст

Элемент APPLET

Содержимое

Никакое.

Примеры 


<PARAM NAME=snd VALUE="Hello.au">

Примечания

Символы escape последовательностей, например, &eacute;, &quot; и &#185; определяются прежде, чем значение параметра передается апплету. Для включения символа & используйте &amp;.

PRE - предварительно отформатированный текст

Цель

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

Типичное отображение

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

Основной синтаксис

<PRE>
отформатированный текст
</PRE>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
WIDTH целое ширина текста в символах практически не поддерживается

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

Допустимый контекст

Блоковый контейнер.

Содержимое

Любой текстовый элемент, за исключением изображений (IMG) и элементов изменений размера шрифта (BIG, SMALL, SUB, SUP, FONT).

Примеры

Простейший пример:

Пример PRE-1.html: 


<PRE> To be or not to be, that is the question. </PRE>

Другой пример:

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


The printable characters of ASCII: 

<PRE> 

! " # $ % &amp; ' () * +, -. / 

0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ? 

@ A B C D E F G H I J K L M N O 

P Q R S T U V W X Y Z [ \ ] ^ _ 

` a b c d e f g h i j k l m n o 

p q r s t u v w x y z { | } ~ 

</PRE>

Попытка представить компьютерный листинг, подобный выводимому на принтер:

Пример PRE-3.html: 


The printout from the program is the following. Each line contains ten

real numbers, each in a field of ten characters. Notice that when viewing

this document on WWW, the rendering of the printout can be unsatisfactory;

in such a case widen the WWW window, if possible.

<PRE WIDTH=100> 

0.5138707 0.1757256 0.3086337 0.5345317 0.9476302 0.1717277 0.7022309 0.2264168 0.4947661 0.1246986 

0.0838954 0.3896298 0.2772301 0.3680532 0.9834590 0.5353862 0.7656789 0.6464736 0.7671438 0.7802362 

0.8229621 0.1519211 0.6254769 0.3146764 0.3469039 0.9172033 0.5197607 0.4011658 0.6067690 0.7854244 

</PRE>

Пример элемента PRE, содержащего связи:

Пример PRE-4.html: 


Contact information (phone and E-mail):

<PRE>

help desk     4344 <A HREF="mailto:atk-neuvonta@hut.fi">atk-neuvonta@hut.fi</A>

operators     4341 <A HREF="mailto:opr@hut.fi">opr@hut.fi</A>

WWW problems  4331 <A HREF="mailto:webmaster@hut.fi">webmaster@hut.fi</A>

</PRE>

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

Примечания

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

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

Предыдущая версия HTML включала элементы XMP, LISTING и PLAINTEXT. Они сейчас устарели и взамен них используется элемент PRE.

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

Хотя элемент A и фразы разметки (например, STRONG) можно использовать в пределах элементов PRE, способности броузеров в их представлении могут быть более ограничены, чем вне PRE. Смотрите также примечания к представлению взаимодействия с компьютером.

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

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

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

Если символы <, > или & встречаются в данных, то они должны быть выражены с использованием escape синтаксиса (как в примере 2). В частности, Вы должны делать так, когда включаете код HTML в Ваш документ для вывода исходного кода.

Стандарт SGML требует, чтобы синтаксический анализатор устранил пустые строки сразу за начальным тегом и непосредственно предшествующие конечному тегу. Таким образом, не имеет значения, напишите ли Вы тег <PRE> на отдельной строке или как префикс к первой строке текста.

SAMP - образец вывода

Цель

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

Типичное отображение

Текст одного размера. Смотрите общие примечания к отображению разметки.

Основной синтаксис

<SAMP>текст</SAMP>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзаца не разрешен.

Примеры

Пример SAMP-1.html: 


The fatal error message <SAMP>Bus error - core dumped</SAMP> can be caused

by very different bugs in your program.

Примечания

Большие разделы вывода лучше представлять с использованием элемента PRE или отдельных текстовых файлов, к которым установлены связи в HTML файлах.

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

SCRIPT - зарезервирован для будущего использования (Нет в HTML 2.0!)

Цель

Зарезервировано для будущего использования с описывающими языками.

Типичное отображение

Никакое. Программы просмотра не должны показывать содержимое элементов SCRIPT.

Основной синтаксис

<SCRIPT>скриптовые объявления</SCRIPT>

Возможные атрибуты

Никаких.

Допустимый контекст

Раздел заголовка.

Содержимое

Скриптовые объявления. Синтаксис и семантика должны быть определены отдельно.

Технически эти элементы определены с CDATA, как тип содержимого. В результате они могут содержать только символы SGML. Все символы разметки или разделители игнорируются и пропускаются, как данные приложения, за исключением пары </, непосредственно сопровождаемой символами (a - z, A - Z). Это означает, что распознан конечный тег элемента (или элемента, в который он вложен).

Примеры

Так как семантика для элемента SCRIPT не определена в HTML 3.2, нет возможности дать какой-нибудь выразительный пример.

Примечания

Элементы SCRIPT в будущих версиях HTML будут служить для создания и поддержки сценариев.

SELECT (ВЫБРАТЬ) - меню выбора в форме

Цель

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

Типичное отображение

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

Основной синтаксис

<SELECT NAME=имя>
элементы OPTION
</SELECT>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NAME строка имя, которое используется для идентификации выбора меню, когда форма передается серверу обязателен; каждая отобранная опция образует пару имя/значение, включаемую в содержимое формы
SIZE целое устанавливает число одновременно видимых опций используется, когда задан MULTIPLE
MULTIPLE MULTIPLE означает, что пользователь может сделать множественный выбор из меню по умолчанию разрешен только один выбор

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство HTML элементов. Однако, текстовый контейнер может появиться только в пределах элемента FORM.

Содержимое

OPTION элементы.

Примеры

Пример: 

 

<SELECT NAME="flavor"> 

<OPTION VALUE=a>Vanilla 

<OPTION VALUE=b>Strawberry 

<OPTION VALUE=c>Rum and Raisin 

<OPTION VALUE=d>Peach and Orange 

</SELECT>

Примечания

Смотрите обсуждение формы.

Как альтернативу SELECT, Вы можете использовать элемент INPUT с TYPE=CHECKBOX или TYPE=RADIO, который при отображении позволяет пользователю увидеть все варианты сразу.

SMALL (МАЛЫЙ) - малый шрифт (Нет в HTML 2.0!)

Цель

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

Типичное отображение

Меньше, чем обычный шрифт. Смотрите общие примечания к отображению разметки.

Основной синтаксис

<SMALL>текст</SMALL>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Заметим, что перевод абзаца не разрешается.

Примеры

Пример SMALL-1.html: 


<P> 

This is normal text. 

</P> 

<P> 

<SMALL> This text will be presented in a smaller font, if possible. </SMALL> 

</P>

Примечания

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

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

Элемент FONT может обеспечить больше вариантов для спецификации различных размеров шрифта.

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

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

STRIKE - перечеркнутый текст (Нет в HTML 2.0!)

Цель

Представление зачеркнутого текста (по ходу представления).

Типичное отображение

Зачеркнутые слова - для строк в середине текста. Смотрите общие примечания к отображению разметки.

Основной синтаксис

<STRIKE>текст</STRIKE>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзацев не разрешен.

Примеры

Пример STRIKE-1.html: 


Compare <STRIKE>strike-through text</STRIKE> with normal text.

Примечания

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

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

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

HTML 3.2 Ссылочные Спецификации предупреждают, что 'STRIKE может быть заменен более выразительным тегом "S" из HTML 3.0'.

STRONG - сильное подчеркивание

Цель

Для сильного подчеркивания.

Типичное отображение

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

Основной синтаксис

<STRONG>текст</STRONG>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзацев не разрешен.

Пример

Пример STRONG-1.html: 


For your own safety,

<STRONG>turn the power off before opening the device.</STRONG>

Примечания

Не подчеркивайте слишком много! Подчеркивая все подряд - Вы не подчеркиваете ничего.

Элемент STRONG реализует более сильное подчеркивание, чем элемент EM.

Смотрите также общие ремарки о фразовых элементах.

STYLE - таблицы стилей (Нет в HTML 2.0!)

Цель

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

Типичное отображение

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

Основной синтаксис

<STYLE>информация о стиле</STYLE>

Возможные атрибуты

Согласно HTML 3.2 Ссылочным Спецификациям - никаких. Но различные спецификации таблиц стилей упоминают некоторые атрибуты элемента STYLE.

Допустимый контекст

Раздел заголовка.

Содержимое

Информация о стиле. Синтаксис и семантика должны быть определены отдельно.

Технически эти элементы определяются с CDATA, как тип содержимого. В результате они могут содержать только SGML символы. Все символы разметки или ограничители игнорируются и пропускаются, как данные приложения, за исключением пары символов </, за которыми сразу же следуют символы (a - z, A - Z). Это означает, что распознан конечный тег (или элемент, в котором он находится).

Также как и в комментариях, рекомендуется вокруг содержимого элемента STYLE вводить разделители <!-- и -->. Если Вы так сделаете, это гарантирует, что старые броузеры (не понимающие STYLE) не высветят содержимое.

Примеры

Ниже приведен пример очень простых таблиц стилей (согласно CSS1), специфицирующих при отображении использование шрифта sans-serif для всех элементов, за исключением элементов U, отображающихся шрифтом serif (в дополнение к подчеркиванию).

Пример STYLE-1.html: 


<HEAD> 

<STYLE><!-- 

BODY { font-family: sans-serif } 

U { font-family: serif } 

--></STYLE> 

</HEAD> 

<BODY> 

Sample text 1.<BR> 

<U>Sample text 2.</U> 

</BODY>

Примечания

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

SUB - подстрочный знак (Нет в HTML 2.0!)

Цель

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

Типичное отображение

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

Основной синтаксис

<SUB>текст</SUB>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзаца не разрешается.

Примеры

Пример SUB-1.html: 


Let us form the sum of all x<SUB>i</SUB>'s, ie

x<SUB>1</SUB> + x<SUB>2</SUB> + ... + x<SUB>n</SUB>.

Примечания

Существует также тег для надстрочного знака SUP, однако HTML 3.2 не обеспечивает полную поддержку математических формул.

Так как этот тег - новый, он поддерживается не везде. Некоторые броузеры просто игнорируют его, высвечивая, например, a<SUB>1</SUB> как a1. Текстовые броузеры также не могут правильно поддерживать SUB.

Описатель подстрочного знака может быть вложенным, что может привести к отображению внутреннего подстрочного знака очень маленьким шрифтом. Броузер Internet Explorer игнорирует теги SUB после двух уровней вложенности.

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

SUP - надстрочный знак (Нет в HTML 2.0!)

Цель

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

Типичное отображение

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

Основной синтаксис

<SUP>текст</SUP>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзацев не разрешен.

Примеры

Пример SUP-1.html: 


The notation A<SUP>T</SUP> denotes the transpose of A.

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


Consider the equation

x<SUP>n</SUP> + y<SUP>n</SUP> = z<SUP>n</SUP>.

Пример SUP-3.html: 


The expression a<SUP>b<SUP>c</SUP></SUP>

means a<SUP>(b<SUP>c</SUP>)</SUP>.

Пример SUP-4.html: 


This example is a text paragraph which contains several

superscripted expressions such as m<SUP>2</SUP> and e<SUP>x</SUP>.

They may affect the visual appearance of the paragraph by

forcing the browser to use different line heighths. This

applies in particular to expressions with large and nested

superscripts such as (f(a))<SUP>e<SUP>x<SUP>2y</SUP></SUP></SUP>.

Примечания

Цифры 1, 2 или 3 в качестве надстрочных символов можно представить и другим способом, так как набор символов ISO Latin 1 содержит коды для них. Например: mІ или, с использованием escape символов, m&sup2;.

Существует также тег для подстрочного знака SUB, однако HTML 3.2 не обеспечивает полной поддержки математических формул.

Так как этот тег - новый, поддерживают его не все программы. Некоторые броузеры просто игнорируют его, представляя, например, a<SUP>T</SUP> как aT. Текстовые броузеры также не могут правильно использовать SUP.

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

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

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

Цель

Для представления табличной информации, т.е. структуры, подобной матричной.

Типичное отображение

Таблица, по умолчанию без окружающей рамки (бордюра). Если рамка существует (задается атрибутом BORDER), таблицы отображены в барельефном приподнятом виде с внешней рамкой со скосом, и отдельными вставленными в эту приподнятую поверхность ячейками. Если ячейки имеют явное содержание, рамки вокруг отдельных ячеек вычерчены. Незаполненное пространство в таблице не выделяется, за исключением &nbsp;.

Размер таблицы для отображения содержимого обычно устанавливается броузером автоматически, однако можно установить ширину таблицы, используя атрибут WIDTH.

Основной синтаксис

<TABLE>
строки таблицы (TR элементы)
</TABLE>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
ALIGN LEFT, CENTER, RIGHT горизонтальное выравнивание всей таблицы по умолчанию LEFT, однако это может быть перекрыто внешними элементами DIV или CENTER
WIDTH спецификация ширины ширина всей таблицы по умолчанию ширина определяется броузером так, чтобы представить все содержимое
BORDER целое ширина рамки в пикселях значение 0 (по умолчанию) означает - без рамки; некоторые броузеры допускают просто написание BORDER, которое воспринимается, как BORDER=1
CELLSPACING целое промежуток между ячейками в пикселях смотрите примечания ниже
CELLPADDING целое промежуток между содержимым ячейки и рамкой вокруг ячейки в пикселях ("набивка")  

Обычно атрибут BORDER (с ненулевым значением) устанавливает по умолчанию CELLSPACING=1. Это означает, что при установке рамки для всей таблицы Вы также установите рамки в один пиксел для отдельных ячеек.

Обычно примыкающие табличные ячейки разделены общей рамкой, а в HTML каждой ячейке назначается ее собственная рамка, которая отделяется от рамок вокруг соседних ячеек. Это разделение может быть установлено в пикселях с использованием атрибута CELLSPACING (например, CELLSPACING=10). Это же значение определяет расстояние между табличной рамкой и рамками наиболее удаленных от центра ячеек.

Допустимый контекст

Блоковый контейнер.

Содержимое

Один или более TR элементов, следующих за необязательным элементом CAPTION.

Примеры

Типичный пример:

Пример TABLE-1.html: 


<TABLE> 

<CAPTION>Areas of the Nordic countries, in sq km</CAPTION> 

<TR><TH>Country</TH> <TH>Total area</TH> <TH>Land area</TH> 

<TR><TH>Denmark</TH> <TD ALIGN=RIGHT> 43, 070 </TD><TD ALIGN=RIGHT> 42, 370</TR> 

<TR><TH>Finland</TH> <TD ALIGN=RIGHT>337, 030 </TD><TD ALIGN=RIGHT>305, 470</TR> 

<TR><TH>Iceland</TH> <TD ALIGN=RIGHT>103, 000 </TD><TD ALIGN=RIGHT>100, 250</TR> 

<TR><TH>Norway</TH> <TD ALIGN=RIGHT>324, 220 </TD><TD ALIGN=RIGHT>307, 860</TR> 

<TR><TH>Sweden</TH> <TD ALIGN=RIGHT>449, 964 </TD><TD ALIGN=RIGHT>410, 928</TR> 

</TABLE>

Пример таблицы с заданными параметрами:

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


<TABLE ALIGN=CENTER WIDTH="80%" BORDER=1 CELLSPACING=10 CELLPADDING=3> 

<CAPTION>The Nordic countries</CAPTION> 

<TR> 

       <TD>Denmark</TD> 

       <TD>Finland </TD> 

       <TD>Iceland </TD> 

       <TD>Norway </TD> 

       <TD>Sweden </TD> 

</TR> 

</TABLE>

Примечания

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

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

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

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

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

TD - табличные данные (ячейка) (Нет в HTML 2.0!)

Цель

Для представления данных ячейки в таблице.

Типичное отображение

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

Основной синтаксис

<TD>данные</TD>

В принципе, конечный тег </TD> может быть опущен. Но делать так не рекомендуется, так как некоторые броузеры (включая Netscape) могут представлять данные неверно.

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NOWRAP NOWRAP подавляет перенос слов эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычных пробелов в пределах содержимого ячейки
ROWSPAN целое число строк, перекрываемых ячейкой по умолчанию 1
COLSPAN целое число столбцов, перекрываемых ячейкой по умолчанию 1
ALIGN LEFT, CENTER, RIGHT горизонтальное выравнивание данных в ячейке по умолчанию LEFT или атрибут ALIGN во включающем элементе TR
VALIGN TOP, MIDDLE, BOTTOM, BASELINE вертикальное выравнивание данных в ячейке перекрывается атрибутом VALIGN во включающем элементе TR
WIDTH целое ширина ячейки в пикселях броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце
HEIGHT целое высота ячейки в пикселях броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке

Допустимый контекст

TR элемент.

Содержимое

Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.

Примеры

<TD>3.1416</TD>

Примечания

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

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

Иногда не важно, используете ли Вы TD или TH, особенно, если это касается первого столбца (т.е. первого элемента каждой строки).

TEXTAREA - многострочное поле текстового ввода в форме

Цель

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

Типичное отображение

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

Основной синтаксис

<TEXTAREA NAME=имя ROWS=m COLS=n>
текст
</TEXTAREA>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NAME строка имя, которое используется для идентификации поля с текстовым содержимым, когда форма передается серверу обязательно
ROWS целое количество линий видимого текста обязательно
COLS целое число, задающее видимую ширину текста обязательно

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

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

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может включать текстовые элементы. Это включает большинство элементов HTML. Однако, текстовый контейнер может появляться только в пределах элемента FORM.

Содержимое

Строка. Escape последовательность разрешена, однако никакие теги не распознаются.

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

Примеры 


 <TEXTAREA NAME=address ROWS=4 COLS=40> 

Your address here... 

</TEXTAREA>

Примечания

Смотрите обсуждение форм.

Для однострокового поля ввода можно использовать элемент INPUT с TYPE=TEXT.

Обычно программы просмотра при передаче содержимого поля осуществляют окончание строк средствами CR, LF (ASCII десятичное 13, 10). Символьный набор для передаваемых данных должен быть ISO Latin 1, если только сервер предварительно не обозначил, что он может поддерживать альтернативный набор символов.

TH - табличный заголовок (ячейка) (Нет в HTML 2.0!)

Цель

Для представления в пределах таблицы ячейки, которая "действует", как заголовок (строки или столбца).

Типичное отображение

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

Основной синтаксис

<TH>данные</TH>

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

Возможные атрибуты

имя атрибута возможные значения смысл примечания
NOWRAP NOWRAP подавляет перенос слов эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычного пробела в пределах содержимого ячейки
ROWSPAN целое число строк, охваченных ячейкой по умолчанию 1
COLSPAN целое число столбцов, охваченных ячейкой по умолчанию 1
ALIGN LEFT, CENTER, RIGHT горизонтальное выравнивание данных в ячейке по умолчанию CENTER или атрибут ALIGN во включающем элементе TR
VALIGN TOP, MIDDLE, BOTTOM, BASELINE вертикальное выравнивание данных в ячейке перекрывается атрибутом VALIGN во включающем элементе TR
WIDTH целое ширина ячейки в пикселях броузер должен использовать это значение, если только оно не конфликтует с требованиями ширины для других ячеек в том же столбце
HEIGHT целое высота ячейки в пикселях броузер должен использовать это значение, если только оно не конфликтует с требованиями высоты для других ячеек в той же строке

Допустимый контекст

TR элемент.

Содержимое

Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.

Примеры

<TH>Sum</TH>

Примечания

Смотрите обсуждение таблиц, где приведены дополнительные примеры.

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

Иногда не важно, используете ли Вы TD или TH, особенно это касается первого столбца (т.е. первого элемента каждой строки).

TITLE - "внешний" заголовок (титул)

Цель

Для задания обязательного "внешнего" заголовка документа.

Типичное отображение

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

Основной синтаксис

<TITLE>последовательность символов</TITLE>

Возможные атрибуты

Никаких.

Допустимый контекст

Заголовочный элемент, в котором есть хотя бы один элемент TITLE.

Содержимое

Последовательность символов. В TITLE можно использовать escape последовательности, например, &lt; (для <) и &auml; (для д), но никакие теги HTML не разрешены, поэтому Вы не можете задавать в заголовке размеры шрифтов или выделения.

Примеры 


<TITLE>A study of population dynamics</TITLE>

Примечания

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

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

Смотрите также общие примечания к разделу заглавия.

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

TR - табличная строка (Нет в HTML 2.0!)

Цель

Для представления строки таблицы.

Типичное отображение

Одна строка таблицы.

Основной синтаксис

<TR>заголовок ячеек (TH элементы) и данные ячеек (TD элементы)</TR>

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

Возможные атрибуты

имя атрибута возможные значения смысл примечания
ALIGN LEFT, CENTER, RIGHT горизонтальное выравнивание в ячейке по умолчанию LEFT, может быть перекрыто атрибутом ALIGN в элементах TH или TD
VALIGN TOP, MIDDLE, BOTTOM, BASELINE вертикальное выравнивание в ячейке может быть перекрыто атрибутом VALIGN в элементах TH или TD

Допустимый контекст

TABLE элемент.

Содержимое

TH и TD элементы.

Примеры 


<TR><TD>3.70 <TD>4.69 <TD>8.02 </TR>

Примечания

Смотрите обсуждение таблиц, где содержатся дополнительные примеры.

TT - телетайпный (одноразмерный) текст

Цель

Для представления текста одноразмерным шрифтом.

Типичное отображение

Одноразмерный шрифт. Смотрите общие примечания к отображению разметки.

Основной синтаксис

<TT>текст</TT>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзаца не разрешен.

Примеры

Пример TT-1.html: 


Compare <TT>monospaced font</TT> with normal font.

Примечания

Избегайте использования TT. Вместо него лучше использовать логическую разметку, например, CODE или SAMP.

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

U - подчеркивание (Нет в HTML 2.0!)

Цель

Для подчеркивания (выделения) текста.

Типичное отображение

Подчеркнутое (выделенное). Однако, например, Netscape представляет содержимое элемента U, как обычный текст (его авторы полагают, что подчеркивание может вызвать проблемы с гиперсвязями). Смотрите общие примечания к отображению разметки.

Основной синтаксис

<U>текст</U>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзаца не разрешен.

Примеры

Пример U-1.html: 


Compare <U>underlined text</U> with normal text.

Примечание

Избегайте использования элемента U. Вместо него лучше использовать логическую разметку, например, EM или STRONG.

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

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

UL - неупорядоченные (ненумерованные) списки

Цель

Для представления информации в списковой форме без нумерации элементов.

Типичное отображение

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

Основной синтаксис

<UL>
<LI> элемент списка 1
<LI> элемент списка 2
...
</UL>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
TYPE DISC, SQUARE, CIRCLE по умолчанию буллет стиль для элементов Нет в HTML 2.0!
COMPACT COMPACT сокращенное расстояние между элементами  

Значение по умолчанию буллет стиля обычно зависит от уровня вложенности списков.

Допустимый контекст

Блоковый контейнер.

Содержимое

LI элементы (один или более).

Примеры

Простой пример:

Пример UL-1.html: 


Remember to buy

<UL> 

<LI> milk 

<LI> bread 

<LI> apples. 

</UL>

Пример, показывающий как может выглядеть буллет. Заметим, что атрибут TYPE в элементе LI перекрывает внешний элемент UL.

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


<UL TYPE=DISC COMPACT> 

<LI> disc 

<LI TYPE=SQUARE> square 

<LI TYPE=CIRCLE> circle 

</UL>

Смотрите также Примеры различных списковых элементов в HTML.

Примечания

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

Элемент UL должен включать, по крайней мере, один элемент LI. Некоторые пользователи и редакторы HTML могут создавать элементы UL с текстом в его пределах, даже с вложенными элементами UL - в надежде получить отступы различного размера. Если Вам это необходимо, включите текст в элемент LI (хотя это обычно вызывает появление буллетов на экране), а его, в свою очередь, в элемент UL. (Таблицы стилей предоставят механизмы для управления отступами.)

VAR - переменные

Цель

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

Типичное отображение

Курсивом. К сожалению, броузер Internet Explorer (IE) отображает VAR с использованием одноразмерного шрифта. (Так как новые версии IE поддерживают таблицы стилей, Вы можете задать стилевое правило, подобное VAR { font-style : italic }.) Смотрите общие примечания к отображению разметки.

Основной синтаксис

<VAR>текст</VAR>

Возможные атрибуты

Никаких.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.

Содержимое

Текстовые элементы. Перевод абзаца не разрешен.

Примеры

Пример VAR-1.html: 


In the simplest case, the command for deleting a file in Unix is<BR>

<KBD>rm</KBD> <VAR>filename</VAR>

Примечания

Смотрите примечания по представлению взаимодействия с компьютером и общие замечания по фразовым элементам.

Hosted by uCoz