|
Изучение 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:
Официальная HTML 3.2 спецификация
Если у Вас появились сомнения в отношении точности формы, значения и ограничений на теги HTML, Вам необходимо проконсультироваться с официальным документом по HTML, доступном на странице World Wide Web Consortium:
Ссылочные спецификации содержат технический текст и относительно коротки. Могут быть также полезны консультации с прежней 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 разделять слово на две строки. Если Вы, например, разделили слово inter- national это будет интерпретироваться, как inter- national. Таким образом, для логичного представления Вашего документа, Вы должны использовать такие теги HTML, как P или BR, чтобы при необходимости обеспечить перевод строки. Броузеры обычно не разделяют слова на две строки, за исключением тех случаев, когда слово содержит дефис. Ссылочные спецификации HTML 3.2 не очень точны в отношении этого вопроса и при обсуждении раздела таблицы, приводится следующее: Для некоторых агентов пользователя может быть необходимо или желательно перевести строку в пределах слова. В таких случаях желательно убедиться визуально, что это произошло. Опасайтесь того, чтобы длина линии вышла за границы Вашего контроля. Это зависит от броузера, компьютера и установок, сделанных людьми, просматривающими Ваш документ. Вообще говоря, нет средств, чтобы предотвратить перевод строки между словами, но Вы можете попытаться предупредить перевод строки, используя непрерывные пробелы. Что касается использования перевода строки в сочетании с тегами HTML, то есть специальные правила:
Символ горизонтальной табуляции (HT) можно использовать в документе HTML. Но в пределах элемента PRE символ табуляции имеет особую интерпретацию, эквивалентен пробелу и не несет в себе информацию о табуляции какого-либо вида. (Чтобы представить табулированные данные, используйте элемент table.) Практически лучше избегать включения символов табуляции в код HTML и использовать вместо этого соответствующее количество пробелов, если нужно отформатировать код источника HTML документа в табулированном виде. Классификация элементовСпособы, которыми теги HTML могут сочетаться, определяются терминами элементов и их классификацией. Гораздо удобнее определить, например, что элемент H1 может содержать только текстовые элементы, чем давать длинный список подходящих элементов, особенно, если учесть, что один и тот же список должен появляться во многих контекстах, и этот список может изменяться при добавлении новых текстовых элементов к будущим версиям HTML. Элементы HTML можно классифицировать на три основные категории:
Любой текстовый элемент, включая простой текст, может при необходимости появиться везде - путем задания абзаца (параграфа) (P элемент). Правило "большого пальца", которое может помочь в запоминании того, какой элемент - блоковый, а какой - текстовый: блоковые элементы завершают абзац, текстовые - нет.
Заметьтe: часто блоковые элементы могут содержать как текстовые, так и другие блоковые элементы, например, блоки могут быть вложенными. Текстовые элементы также могут быть вложенными. Но текстовые элементы не могут включать блоковые элементы. Например, выражение Разрешенная вложенность элементовЭтот раздел описывает, каким образом в 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.
Заметки о разном:
|
символ | обычное имя (имена) символа | HTML запись символа (escape последовательность) |
---|---|---|
< | символ "меньше чем", левая угловая скобка | < |
> | символ "больше чем", правая угловая скобка | > |
& | амперсанд | & |
" | двойные кавычки | " |
Двойные кавычки (") могут использоваться и в пределах обычного текста.
Заметим, что точка с запятой является частью escape последовательности, но в принципе она может быть опущена. Однако одни броузеры обработают такой код HTML, а другие могут и не понять.
В escape последовательности важен вариант написания символов, то есть различаются заглавные и строчные буквы. Например, амперсанд (&) не может быть представлен как & (escape последовательность - неопределена). Escape последовательность ä и Ä - a умляут (a диерезис, написание a с двумя точками над ней) - обозначает два разных символа и дает д и Д. Escape последовательность написанная прописными буквами идентифицируется как &AUML;.
Необходимость в вышеупомянутых escape последовательностях проистекает из синтаксиса HTML. На самом деле escape последовательности существуют для всех символов в наборе ISO Latin 1. Возьмете себе на заметку следующее:
© | знак копирайт, © |
® | знак зарегистрированной торговой марки, ® |
| непрерывный пробел |
Есть и другие причины для использования escape последовательностей. Использование ä вместо д казалось бы может дать некоторую независимость символьного кода, однако на самом деле это не так - если броузер может вывести ä правильно, он может также верно вывести и документ, в котором прямым образом специфицирован символ д. Однако бывает так, что из-за ограничений клавиатуры невозможно прямым образом ввести некоторые специальные символы, и в таких случаях можно воспользоваться нотацией (последовательностью), подобной ä.
Некоторые броузеры поддерживают и другие escape последовательности, например, ™, ­, &cbsp;. Использование таких нотаций не рекомендуется. (Нотация ™ представляет символ, который вообще не принадлежит к ISO Latin 1. Вместо этого можно использовать проверенную нотацию <SUP><SMALL>TM</SMALL></SUP>. Нотация ­ задает "мягкий дефис", который имеет неопределенную семантику в HTML. Нотация &cbsp; установленная для "условного прерывающегося пробела", отсутствует в ISO Latin 1 и, возможно, такой символ скоро вообще не будет использоваться.)
При изучении HTML слово имя используется, как технический термин. (Вероятно, более соответствующим термином мог бы быть идентификатор, как бы в концепции грубого сходства с идентификатором в языках программирования). Имя представляет собой последовательность символов, содержащую только
Концепция имени имеет место в описании атрибутов HTTP-EQUIV и NAME элемента META и в описании атрибута NAME элемента PARAM.
Строка символов, которая используется для NAME иногда может содержать и другие символы, однако тогда она должна быть взята в кавычки.
В элементах FONT и BODY некоторые конструкции HTML могут быть использованы, чтобы специфицировать цвета: например, цвет фона, цвет текста по умолчанию или цвет текста связи.
Так как все мониторы и программы могут отображать цвет, действительное отображение может быть черно-белым или с различными оттенками серого.
Для спецификации цвета, как значения атрибута, существуют два варианта:
Конечно, символические нотации много легче и более понятны. С другой стороны численные обозначения дают больше возможностей.
Чтобы пользоваться предварительно определенными цветовыми именами, необходимо знать их числовые эквиваленты, которые приводяться ниже:
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 в тегах, например, HR или TABLE можно специфицировать двумя альтернативными путями:
Первый вариант относительной спецификации более предпочтителен, т.к. автор не может знать размера пикселя на экране читающей программы пользователя.
Используемые в атрибутах значения пикселя определяют пиксели экрана. Физический размер пикселя определяется монитором пользователя.
При выводе документа на прибор с очень высоким разрешением, например, лазерный принтер, броузеры должны умножать значения в пикселях на соответствующий коэффициент. То есть, если программа просмотра имеет дисплей с 75 пикселями на дюйм, а вывод должен осуществляться на лазерный принтер с 600 точками на дюйм, значение атрибута HTML в пикселях умножается на 8.
В некоторых тегах, связанных с таблицами, может быть использован атрибут VALIGN для управления вертикальным выравниванием, т.е. позиционированием в вертикальном направлении ячеек таблицы.
Чтобы позиционировать содержимое ячеек в верхней части, середине или нижней части ячейки таблицы соответственно, задаются следующие значения атрибута VALIGN: TOP (верх), MIDDLE (середина), BOTTOM (низ).
По умолчанию VALIGN=MIDDLE.
Последовательность является escape нотацией для символа, который в других контекстах обычно называется непрерывным пробелом, или, для краткости, NBSP. Согласно ISO 8859, этот символ должен быть представлен, как обыкновенный пробел (пропуск, пустое место), однако такой, который не заменялся бы переводом строки (как это часто бывает с обыкновенным пробелом в текстовой обработке). То есть для того, чтобы два слова были на одной строке с некоторым расстоянием между ними, между этими словами должны появиться непрерывные пробелы. (Действительная ширина промежутка между словами может меняться, и нет необходимости привязываться к определенному количеству пробелов в файле HTML.)
Вопрос о том, надо предупреждать перевод строки, когда осуществляется вывод HTML документа, не имеет однозначного ответа. Спецификации HTML 2.0 говорят:
Использование знаков непрерывного пробела и указателя мягкого дефиса не рекомендуется из-за того, что их поддержка не получила широкого распространения.
Более того, хотя HTML 3.2 Ссылочные спецификации не вносят ясности в этот вопрос, в разделе описания атрибута NOWRAP элементов TH и TD указывается, что знак должен действовать как непрерывный пробел, по крайней мере в пределах ячеек таблицы.
Если Вы используете непрерывные пробелы, используйте их вместо обычных пробелов, а не в дополнение к ним. Например, если Вы хотите предупредить перевод строки между version и
3
, наберите version 3
(но не version 3
).
С другой стороны, в таблице в HTML 3.2 может иметь совершенно другое значение, которое может быть описано, как непустое пространство: когда таблица представлена с бордюром, ячейки без содержания (просто пробелы не учитываются) изображаются без бордюра, однако в разметке указывается!
Файл HTML может содержать комментарии, дающие пояснения для человека, читающего HTML код. Комментарии не влияют каким-либо образом на представление документа, т.е. они игнорируются броузером.
Вы можете начать комментарии с четырехсимвольной последовательности <!-- (знак "меньше чем", восклицательный знак, два дефиса) и завершить его трехсимвольной последовательностью --> (два дефиса, знак "больше чем"). Например: <!-- Написано Юккой Корпела -->.
Однако, обычно предпочитают включать информацию о документе в элементы HTML, например, META, и также делать частью самого документа информацию о его цели, авторе, дате создания и последней модификации.
Таким образом, комментарии желательно делать только в редких случаях, например, для объяснения кода HTML или устаревших понятий. Помните, что комментарии является частью файла HTML и передаются вместе с документом. Поэтому, во избежании расширения файла, если Вы хотите много сказать, изложите все это в отдельном документе, а в текст вставьте только URL документа.
Редакторы и конвертеры HTML часто сами вставляют несколько комментирующих строк в начало HTML файла. Такие строки могут быть полезны, и их не стоит убирать.
Начнем с самого простого HTML документа, содержащего только простой текст Hello world. В HTML файле содержимому обязательно должен предшествовать раздел HEAD, который минимально может состоять из двух конструкций. Тогда код HTML можно представить так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <TITLE>Hello</TITLE> Hello world
На самом же деле, в точности, этот документ имеет следующую структуру:
<!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).
О происхождении документа должна быть представлена, по крайней мере, следующая информация:
Следующий пример представляет один из способов заполнения такой информации. Изучите подходящие для названных целей частные рекомендации, прежде чем адаптировать их или же посмотрите другой заслуживающий внимания стиль.
<!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>
Как уже упоминалось, есть две обязательные структуры в HTML 3.2, и они должны быть написаны в следующем порядке:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
(в которой Вы теоретически должны иметь фрагмент HTML 3.2 Final
вместо HTML 3.2
)
<TITLE>Introduction to General Absurdity</TITLE>
Большинство броузеров не заметит, если Вы опустите это, но этого требуют спецификации HTML 3.2. Также есть и более важная причина для того, чтобы включить их:
Формально элемент TITLE является (по крайней мере, если следовать этому буквально) частью элемента HEAD, тогда как объявление !DOCTYPE предшествует всем конструкциям HTML.
Необязательно, но элемент HEAD может содержать следующие элементы в добавление к элементу TITLE:
Как правило, Ваш документ состоит из частей, которые, в свою очередь, тоже делятся на части и т.д. В HTML такое разделение делается с использованием заголовков различного уровня. Части самого нижнего уровня в этой иерархии состоят из одного или нескольких абзацев. В дополнение к простым абзацам и некоторым специальным видам абзацев HTML 3.2 поддерживает списки и таблицы, которые можно представить, как подобные абзацам. Внутренняя структура абзацев и подобных им элементов состоит из тегов текстового уровня, которые мы приводим далее.
Теги для выражения главных структурных особенностей, так называемые теги блокового уровня, представляют собой следующее:
Рекомендуемый подход для написания HTML документа:
Что касается уровня абзацев, здесь есть много вариантов. Ниже приводим несколько практических советов для выбора подходящего варианта:
Заметим, что обычно представление образов с использованием элементов MENU и DIR подобно представлению UL элементов. Также стоит учитывать, что представление с помощью элемента DL может быть слишком неудобным. Поэтому просмотрите, пожалуйста, отдельный файл Примеры различных списковых элементов в HTML, чтобы выбрать какое представление списков будет лучшим в Вашем приложении.
Элементы UL, MENU, DIR, OL и DL - формируют простые списки и не имеют таких структурных особенностей, как CAPTION в элементе TABLE. Поэтому желательно иметь некоторый тип заголовка или пояснение перед списком, оформленное в виде отдельного абзаца.
Заметим, что элемент абзаца P не может быть вложенным, т.е. Вы не можете использовать элемент P для создания подабзаца. Но различные списковые элементы эффективно реализуют наполненную образами структуру, которая по существу соответствует подабзацному делению. Более того, списковые элементы могут быть вложенными.
Существует два главных класса текстовой разметки: логическая и физическая. Логическая разметка показывает роль текстового сегмента, например, большую значимость по сравнению с обычным текстом или то, что данный сегмент является цитатой. Физическая разметка связана с представлением текста в специальной манере, например, с использованием шрифтов или специального вида подчеркивания.
Предпочтение должно отдаваться логической разметке. Используйте физическую разметку только, если это действительно соответствует требованиям представления текста. Например, для сильного выделения используйте элемент STRONG, а не B, в предположении, что различные Web броузеры реализуют подчеркивания лучшим образом для того окружения, в котором они установлены.
Таблица стилей также будет полезна для использования. Например, кому-то захочется все программные коды представлять на желтом фоне и большим шрифтом, в то время как кто-то другой предпочтет совсем другие методы для выделения их в обычном тексте. Такие операции будут выполняться много проще, если постоянно будет использоваться логическая разметка.
В дополнение к большей гибкости при представлении текста различными броузерами логическая разметка имеет следующее преимущество по сравнению с физической: все большее количество компьютерных программ извлекают информацию из HTML документов для различных целей. Для такой работы лучше иметь "индикаторы" логической разметки, выделяющие, например, некоторый текст, как более важный, или цитированные разделы.
Как логическая, так и физическая разметки делаются с использованием элементов HTML с начальным и конечным тегами. Элементы разметки не должны перекрываться. Например, следующая запись будет ошибкой:
This has some <B>bold and <I></B>italic text</I>.
С другой стороны, элементы разметки могут быть вложенными. Лучше отобразить подобные структуры следующим образом:
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 | текст, который должен печататься на клавиатуре пользователя; обычно используется для инструкций. |
Смотрите также замечания и примеры по вопросам отображения разметки.
Шрифтовые элементы это:
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.
<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. Обратимся к нему следующим образом:
<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>.
Теперь, так как автор разрешил использовать его изображение, представим файл в другом виде:
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, чтобы создать связь к нему. Последний способ более предпочтителен, особенно для больших формул. Если пользователю хочется читать текст не отвлекаясь, то взглянуть на формулу (изображение) он сможет, когда захочет. Более того, он сможет посмотреть ее в отдельном окне экрана.
Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. Таблицы - важнейшее улучшение в HTML 3.2 по сравнению с HTML 2.0. С другой стороны конструкция таблиц HTML 3.2 является всего лишь подмножеством Табличной модели HTML3 (RFC 1942).
D HTML табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании HTML соответствует всей таблице.
Неудивительно, что таблицы еще не поддерживаются всеми броузерами, и, если даже поддержка существует, она может быть не очень качественной. Поэтому для представления данных, имеющих структуру, подобную матрице, не всегда используются таблицы.
Для представления таблиц используются нескольких видов тегов HTML:
Давайте начнем с очень простого примера. Он связан с представлением таблицы чисел 2 на 2 (единичная матрицa) без каких либо заголовков. Код 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).
Есть несколько элементов, которые Вы можете добавить к вышерассмотренной простой табличной модели:
Следующий, довольно типичный пример показывает все вышеупомянутые особенности:
<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 (с атрибутами по умолчанию), который содержит единственную строку с двумя ячейками данных, каждая из которых включает абзац.
В более общем случае Вы должны разделить параллельный текст на логические части (абзацы), и сделать каждую часть ячейкой таблицы. Это может потребовать определенной работы (если у Вас нет соответствующей программы для этого), так как Вы должны уделить внимание правильной последовательности работы с текстом: после первой части первого текста Вы должны работать с первой частью второго текста и т.д.
Нижеследующий пример представляет фрагмент текста из Библии в трех вариантах и переводах:
<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 и нижеследующий пример:
<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 требуется больше работы и внимания, однако результаты зачастую много лучше.
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). Для ясности следующий пример представлен без связей:
<PRE> Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Arctic Ocean Argentina Armenia </PRE>
Другой вариант - представить образы просто как текстовые абзацы, с использованием пробелов или пробелов и запятых, как разделителей. Это значит, что броузер разделит текст на строки, и это представление будет очень компактным:
<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. Например:
<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, как это показано ниже:
<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 для вложенных таблиц. Никаких новых элементов или особенностей для этого не требуется, только сочетание того, что уже было описано. Однако из-за сложности (вложенности), легко сделать ошибки, результатом которых является "грязный" вывод, а на обнаружение ошибок требуется много времени.
Простейший случай - таблица с единственной строкой, состоящей из двух элементов, каждый из которых - таблица. Это может быть использовано для сравнительного представления двух подобных таблиц. Усложняя наш грамматический пример, далее приводим таблицу, содержащую две таблицы - одна для склонений в единственном числе, другая - во множественном:
<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. Они могут быть использованы даже в соединении с 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.
*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.
Чтобы установить гиперсвязи (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 может быть использовано, например:
mailto:
URL
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Включает большинство HTML элементов.
Текстовые элементы. Заметим, что они включают элемент IMG (изображение может быть представлено, как "текст якоря"), но не могут содержать заголовки (headings) (A-элемент может быть в пределах заголовка, но не наоборот).
<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> - обязателен!)
Предоставить контактную информацию об авторе текущего документа (т.е. документа, в котором находится элемент).
Типичное представление требует завершение абзаца до и после элемента. Но для Netscape это необязательно (для примера см. ниже). Для представления броузеры используют некоторый специальный шрифт типа курсив.
<ADDRESS>адресная информация<ADDRESS>
Никаких.
Очень простая адресная информация, содержащая только E-mail адрес (адрес электронной почты) автора:
<ADDRESS> <P> Jukka.Korpela@hut.fi </P> </ADDRESS>
Также можно написать только имя автора, но так, чтобы была установлена связь с его домашней страницей (home page), содержащей дополнительную информации. Это больше подходит для коротких документов, умещающихся на одном экране.
<ADDRESS> <P> <A HREF="http://www.hut.fi/~jkorpela/">Jukka Korpela</A> </P> </ADDRESS>
Подлиннее, более типичный пример:
<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 для перевода строки.
Внедрение (вставка) 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.
Чтобы помочь пользователю, броузер может вывести в строке статуса содержимое атрибута 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>
Никаких.
Контейнер текста, т.е. любой элемент, который может содержать элементы текста. Это включает большинство элементов HTML. Элементы текста могут быть вложенными.
Элементы текста. Заметим, что не разрешается перевод (прерывание) абзаца.
Compare <B>bolded text</B> with normal text.
Избегайте использования элемента B. Вместо него используйте логическую разметку, например, элементы EM или STRONG для подчеркивания.
Смотрите общие примечания по разметке текста, где приведены дополнительные примеры.
Задание базового 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 устанавливает основной размер шрифта, применяемый к обычному и предварительно отформатированному тексту, но не к заголовкам, за исключением тех, которые модифицируются с использованием элемента FONT с указанием относительного размера шрифта (например, FONT SIZE=+1).
Действие этого элемента распространяется не на все. В Netscape, к примеру, BASEFONT не влияет на размер шрифта в пределах таблицы. (Таким образом, чтобы установить размер шрифта в пределах таблицы, Вы должны вставить элемент изменения шрифта в каждую ячейку!)
Действительные размеры шрифта устанавливаются в зависимости от броузера. Смотрите примечания об отображении элемента FONT.
<BASEFONT SIZE=n>
имя атрибута | возможное значение | смысл |
---|---|---|
SIZE | строка | размер шрифта (1 - 7) |
Из HTML 3.2 Ссылочных спецификаций не явствует, должен ли атрибут SIZE следовал тем же правилам, что и в элементе FONT, или он должен быть представлен, как целое без знака.
Контейнер текста, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство 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>текст</BIG>
Никаких.
Контейнер текста, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство HTML элементов. Элементы текста могут быть вложенными.
Текстовые элементы. Заметим, что перевод абзаца не допускается.
That was a <BIG>big</BIG> mistake!
Избегайте использования BIG. Вместо него вставляйте логическую разметку. В частности, для подчеркиваний используйте элементы EM или STRONG.
Смотрите общие примечания по текстовой разметке, где приведены дополнительные примеры.
Не определено, что получится, если элементы BIG будут вложены. Это может дать, а может и не дать шрифт, больший, чем при использовании одного BIG.
Элемент FONT предоставляет множество вариантов для задания различных размеров шрифта.
Представить (в типовом варианте - длинную) цитату, как блок цитирования (в противоположность коротким цитатам, вставленным в текст абзаца).
Как отдельный абзац (или последовательность абзацев). Часто с отступом (возможным как слева, так и справа). Часто - шрифтом, отличным от простого текста, обычно - курсивом.
<BLOCKQUOTE>
текст цитаты
</BLOCKQUOTE>
Никаких.
Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.
<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 в каждом абзаце.
При цитировании Вам может понадобиться удалить некоторые слова из содержимого цитаты, тогда Вы должны четко обозначить опущенное (нотация вида - и... и - наиболее распространенный способ сделать это). Совершенно неуместно в таких случаях избирательно приводить чьи-то цитаты, так, что кому-то может показаться, что сказано нечто совершенно отличное от того, что в действительности имелось в виду, может быть даже совсем противоположное. Когда Вам требуется добавить к цитируемому тексту разъясняющие слова в качестве пояснений, наиболее применимо добавление таких разъяснений другим шрифтом, например, курсивом. Также Вы должны четко показать, что пояснения не являются частью оригинала, и лучший способ сделать это - разместить свой текст в квадратных скобках.
Основная структура документа HTML всегда состоит из заголовка и тела. Нет необходимости явно помещать тело в BODY элемент, однако делая так, можно специфицировать атрибуты, влияющие на представление документа в целом (например, установить фоновое изображение или цвет).
Если элемент BODY не содержит атрибуты, использование его не дает явного эффекта в непосредственном отображении документа.
<BODY>тело документа</BODY>
имя атрибута | возможные значения | смысл |
---|---|---|
BGCOLOR | цветовая спецификация | фоновый цвет документа |
TEXT | цветовая спецификация | цвет для текста документа |
LINK | цветовая спецификация | цвет для непосещенной гипертекстовой связи |
VLINK | цветовая спецификация | цвет для посещенной гипертекстовой связи |
ALINK | цветовая спецификация | цвет для активной гипертекстовой связи; используется для выделения текста связи на момент, когда пользователь нажал на связь |
BACKGROUND | URL | URL фонового образа |
HTML элемент, который может быть либо подразумеваемым, либо явным. Только один элемент BODY разрешен в документе, и он должен находится после элемента HEAD (который тоже может быть как подразумеваемым, так и явным).
Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.
<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 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 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>
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
CLEAR | LEFT, RIGHT, ALL, NONE | управление текстовым потоком | по умолчанию - NONE |
Атрибут CLEAR может быть использован, чтобы передвинуть перемещаемый образ на другой край. <BR CLEAR=LEFT> передвинет образ к левому краю, <BR CLEAR=RIGHT> - к правому краю, в то время как <BR CLEAR=ALL> сделает то же самое и к левому и к правому краям одновременно.
Контейнер текста, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML.
Никакое.
Типичный пример, где элемент BR использован для перевода некоторого текста на новую строку:
<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.
Представить заголовок таблицы.
Выше или под самой таблицей обычным шрифтом.
Обычно заголовок центрирован по горизонтали. (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>
часть документа
</CENTER>
Никаких.
Заголовки, текстовые элементы, блоковые элементы, а также элементы ADDRESS.
<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.
Для представления ссылок или сносок к другим источникам, например, на название книги. Смотрите примечания ниже.
Курсивом. Но когда это возможно, броузер может использовать и подчеркивание (например, так делает Lynx) или расставлять кавычки вокруг ссылки. Смотрите общие примечания к отображению разметки.
<CITE>текст</CITE>
Никаких.
Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Текстовые элементы могут быть вложенными.
Текстовые элементы. Не разрешается разделение на абзацы внутри содержимого.
Простой пример для выделения названия книги:
I learned this from <CITE>The Origin of Species</CITE>.
Существуют различные мнения по вопросу, должен ли использоваться элемент CITE только для ссылок на названия книг, или, в более общем варианте, и для задания сносок на предложения или группу слов. Например, HTML 3.2 Ссылочные Спецификации говорят, что CITE "используются для ссылок или сносок к другим источникам". Также там выделяется, что ссылка является примерным синонимом цитирования. Однако, оказывается, что CITE нужен для имен внешних источников (книг, статей, документов и т.д.), а не действительных извлечений (цитат) из них.
В соответствии с этим возникает вопрос, как цитаты должны быть представлены в пределах текста. (Для цитат, представленных как отдельный абзац или даже последовательность абзацев, естественным выбором становится BLOCKQUOTE.) Вы можете либо использовать символы отметки цитирования, согласно правилам языка, на котором написан текст, либо другие подходящие методы, например, курсив, т.е. элемент I. Последнее удобно для очень коротких (например, однословных) ссылок.
Для представления программного кода.
Текстом одного размера (моноширинным - monospaced). Смотрите общие примечания по отображению разметки.
<CODE>текст</CODE>
Никаких.
Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Не разрешено разделение на абзацы.
Следующий пример связан с рассмотрением языка программирования C:
Expressions like <CODE>a[i++] + b[i++]</CODE> should not be used, since they cause undefined behavior.
Так как в HTML разделение на строки и использование символов пробелов и табуляции не отображаются броузером, то большой программный код лучше представлять с использованием элемента PRE или как отдельные текстовые файлы, к которым указаны связи в файле HTML.
Смотрите также примечания по представлению взаимодействия с компьютером и общие замечания по элементам фразы.
Обеспечить определение для термина в дефинитивном списке (элемент DL)
С отступом и представленное, как отдельная часть текста, прикрепленная к соответствующему дефинитивному термину.
<DD>определение</DD>
Конечный тег </DD> всегда может быть опущен, что обычно и делается.
Никаких.
DL элемент.
Блоковые элементы. Элементы заголовков и ADDRESS не допускаются. Но разрешены списки.
Небольшой пример:
<DD>See RFC 822.</DD>
Дополнительные примеры смотрите в описании элемента DL.
Использование DD без DL элементов, чтобы получить отступ в тексте, не рекомендуется - это нарушает спецификации и часто не работает.
Указывает, что данное слово имеет определение.
Это элементы, которые нам хотелось бы представить с некоторыми отличиями от обычного текста, например, выделенные курсивом. Но многие броузеры, включая Netscape, эффективно не поддерживают DFN и представляют его как обычный текст.
Смотрите также общие примечания по отображению разметки.
<DFN>текст</DFN>
Никаких.
Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзаца не разрешается.
<DFN>Ichthyology</DFN> is the branch of natural science which studies fish.
Так как на сегодняшний день еще не обеспечена эффективная поддержка DFN, лучше представлять дефинитивные элементы, используя элементы EM или STRONG.
Спецификация HTML 2.0 не включает DFN, но упоминает его, как элемент, который "должен быть развернут до определенного уровня".
Смотрите также общие замечания к элементам фразы.
Представить информацию в формате, принятом для представления директории. Спецификация HTML 2.0 говорит, что DIR используется для списка коротких образов, до 20 символов каждый.
На практике большинство броузеров представляют элемент DIR также, как элемент UL.
Рекомендации говорят, что элемент DIR должен отображаться, как многостолбцовый список директорий.
<DIR>
<LI> элемент списка 1
<LI> элемент списка 2
...
</DIR>
имя атрибута | возможные значения | смысл |
---|---|---|
COMPACT | COMPACT | сокращенное промежуточное пространство |
LI элементы, которые не содержат блоковые элементы.
Очень маленький список:
<DIR> <LI>one <LI>two <LI>three </DIR>
Большой список очень маленьких элементов (обычно это сложно отобразить другим подходящим способом):
<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.
Смотрите общие примечания к списковым элементам для ознакомления с нужными фрагментами.
Для спецификации разделения документа так, что к различным частям документа могут быть применены различные выравнивания (влево, по центру, вправо).
Часть документа, выровненная согласно действию атрибута ALIGN элемента DIV.
<DIV ALIGN=выравнивание>
раздел документа
</DIV>
имя атрибута | возможные значения | смысл |
---|---|---|
ALIGN | LEFT, CENTER, RIGHT | выравнивание текста в пределах элемента (влево, по центру, вправо) |
Атрибут ALIGN специфицирует выравнивание некоторой части документа, но это может быть перекрыто атрибутом ALIGN в "огороженном" (верхнем) элементе, например, в P.
Заголовки, текстовые элементы, блоковые элементы и элементы ADDRESS.
<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 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>
<DT>термин 1<DD>определение термина 1
<DT>термин 2<DD>определение термина 2
...
</DL>
имя атрибута | возможные значения | смысл |
---|---|---|
COMPACT | COMPACT | более компактный стиль отображения |
Элементы DL должны быть спарены с соответствующими элементами DD. Множество элементов DT может быть при единственном элементе DD. То есть несколько терминов могут иметь одно и тоже определение. Документ не должен содержать несколько последовательных элементов DD.
<DL> <DT>Recursion, indirect <DD>See <I>indirect recursion</I>. <DT>Indirect recursion <DD>See <I>recursion, indirect</I>. </DL>
Смотрите также Примеры различных списковых элементов в HTML.
Хотя элементы DL броузеры часто представляют в "некрасивом" виде, единственная причина для их использования вместо более распространенного элемента TABLE - то что некоторые программы просмотра все еще не поддерживают TABLE.
Смотрите также общие примечания к использованию списковых элементов.
Спецификация термина в дефинитивном списке (элемент DL).
Отлично от обычного текста. Представление термина средствами компоновки, другим шрифтом или и тем и другим вместе.
<DT>термин</DT>
Конечный тег </DT> всегда может быть опущен, что обычно и делается.
Никаких.
Элемент DL.
Небольшой пример:
<DT>Terminus technicus.</DT>
Для более детальных примеров смотрите описание элементов DL.
Подчеркнуть (выделить).
Курсивом. Но если возможно, броузер может использовать и подчеркивание (так делает Lynx). Смотри общие примечания к отображению разметки.
<EM>текст</EM>
Никаких.
Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Текстовые элементы могут быть вложенными.
Текстовые элементы. Не разрешено разделение на абзацы.
The EM element is <EM>logical</EM> markup as opposite to <EM>physical</EM> markup such as the I element.
Избегайте слишком частого использования подчеркиваний. Подчеркивание всего - равносильно отсутствию подчеркивания.
Для усиления подчеркивания можно использовать элемент STRONG.
Смотрите также общие замечания по фразовым элементам.
Специфицировать размеры шрифта (относительно к другим размерам), его цвет или и то и другое вместе.
Содержимое элемента 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) означает текущий основной размер шрифта плюс один, и эта сумма соответствует отображаемому размеру шрифта в приведенном примере.
Чтобы представить заполняемую форму, используемую для таких действий пользователя, как регистрация, упорядочение пользователя или формирование запроса. Формы могут содержать широкий диапазон приемов разметки 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. В частности:
Пример, иллюстрирующий структуры спецификации формы для простого случая. Весьма вероятно, что это не будет работать. Смотрите примечание ниже.
<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 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 (наиболее важный) до H6 (наименее важный).
Более важные заголовки обычно отображаются большими шрифтами, чем менее важные. Заголовок H1 - очень большой шрифт, в то время как H6 может быть крошечным (много меньше обычного текста!).
<Hn>заголовок текста</Hn>
где n принимает значения 1, 2, 3, 4, 5 или 6.
имя атрибута | возможные значения | смысл |
---|---|---|
ALIGN | LEFT, CENTER, RIGHT | выравнивание заголовка |
По умолчанию - выравнивание по левому краю, однако это может быть перекрыто включением элементов DIV или CENTER.
<H1>Notes on General Relativity</H1>
<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).
Основная структура документа HTML всегда состоит из заглавия и тела. Явное вложение заголовка в элемент HEAD не обязательно.
Использование элемента HEAD не влияет на отображение документа.
<HEAD>
элемент TITLE
</HEAD>
Как начальный, так и конечный теги могут быть опущены.
Никаких.
Элементы HTML, которые могут быть либо подразумеваемыми, либо явными. В документе допускается только один элемент HEAD, и он должен появиться прежде элемента BODY (который тоже может быть явным или неявным).
Обязательно один TITLE элемент и необязательно (в любом порядке)
<HEAD> <TITLE>Getting started with Perl</TITLE> </HEAD>
Явное задание элемента HEAD действует только на формирование заголовка, читаемого из кода HTML и являющегося частью документа, принадлежащей к разделу заголовка.
Обозначить изменение раздела.
Горизонтальная черта (на полную ширину экрана - по умолчанию). До и после тега HR броузер автоматически добавляет тер P, поэтому нет необходимости в формировании незаполненного вертикального пространства до и после черты.
В речевых программах просмотра тег срабатывает как пауза.
<HR>
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
ALIGN | LEFT, RIGHT, CENTER | горизонтальное выравнивание черты | по умолчанию - CENTER |
NOSHADE | NOSHADE | задает отображение черты в одном цвете (без оттенков) | как противоположность обычному двухцветному "желобку" |
SIZE | целое | высота черты в пикселях | |
WIDTH | спецификация ширины | ширина черты |
Никакое.
<P> Some text, followed by a basic (default) horizontal rule. </P> <HR> <P> Some other text. </P>
<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>
имя атрибута | возможные значения | смысл |
---|---|---|
VERSION | строка | версия HTML |
Элемент HTML является элементом верхнего уровня в языке HTML. Смотрите описание базовой структуры документов HTML.
Элемент HEAD с последующим BODY.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <TITLE>Hello</TITLE> Hello world
Если элемент HTML используется, начальный и конечный теги HTML должны идти вокруг всего документа, сразу после объявления DOCTYPE.
Представление текста курсивом.
Курсив. Смотрите общие примечания к отображению разметки.
<I>текст</I>
Никаких.
Контейнер текста, т.е. любой элемент, который может содержать текстовый элемент. Это включает большинство элементов 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 отобразят эту информацию лучше.
Для включения изображения в документ.
Изображения представляются, как часть документа. Неграфические броузеры представляют взамен изображения значение атрибута 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 имеют следующий смысл:
Заметьте, что некоторые броузеры (например, 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 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, чтобы создать реагирующую на нажатие клавиши мыши карту:
<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 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">
Используется для графических кнопок отсылок, отображаемых изображением. 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 на сегодняшний день хорошо определена только, когда основным URL для всего документа является HTTP URL. Обычно, когда пользователь нажимает клавишу "Enter", строка запроса посылается к серверу, идентифицированному основным (базовым) URL документа. Например, если введена строка запроса "десять зеленых яблок" и основной URL:
http://www.acme.com/,
то генерируется запрос:
http://www.acme.com/?десять+зеленых+яблок".
ISINDEX - единственный элемент, обеспечивающий интерфейс для программы, которая интерпретирует запрос (обычно задаваемой скриптом CGI). Учтите, что с помощью простой вставки элемента ISINDEX нельзя создать в документе средство поиска! Так как большинство Web броузеров обладают некоторыми чертами поиска в документе, Вам нет необходимости придумывать что-то свое для выполнения такого поиска.
<ISINDEX>
Область ввода (в графических броузерах - прямоугольник для ввода), которой предшествует строка подсказки.
имя атрибута | возможные значения | смысл |
---|---|---|
PROMPT | строка | послание подсказки |
Атрибут PROMPT может быть использован, чтобы определить строку подсказки для поля ввода вместо подсказки по умолчанию, используемую броузером (например: Это поисковый индекс. Введите поисковые ключи.).
По крайней мере один элемент ISINDEX может появиться либо в заголовке, либо в теле документа.
Никакое.
Пример демонстрирует использование ISINDEX для соединения со скриптом "указателя". Сам скрипт здесь не рассматривается, хотя именно он обеспечивает генерацию запроса.
<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>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов 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> всегда может быть опущен, что обычно и делается.
Атрибуты определяются следующим контекстом:
Если самый внутренний, включающий списковый элемент есть элемент 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 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 имеет имя, по которому он может быть отослан к элементу 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=RECTCOORDS="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 таким же образом, как элемент UL.
Теоретические рекомендации говорят, что элемент MENU отображается, как одностолбцовый список элементов меню.
<MENU>
<LI> элемент списка 1
<LI> элемент списка 2
...
</MENU>
имя атрибута | возможные значения | смысл |
---|---|---|
COMPACT | COMPACT | сокращенные промежутки между элементами |
Элементы LI, которые не содержат блоковых элементов.
<MENU> <LI> Undo <LI> Cut <LI> Copy <LI> Paste <LI> Find <LI> Find Again </MENU>
Смотрите также Примеры различных списковых элементов в HTML.
Смотрите общие замечания к списковым элементам для обсуждения отдельных из них.
При использовании элемента MENU реализуется не привычный выбор из меню, а только высвечивается меню ключевых слов. Чтобы отобразить выбор из меню, можно использовать A элементы. Смотрите также раздел Использование таблиц для представления меню.
Для задания метаинформации (информации о документе), т.е. пар имя/значение, описывающих свойства документа, например, авторство, истечение даты, список ключевых слов и т.д.
Никакое. Элементы 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 сервер, чтобы автоматически посылать напоминание авторам.
Для представления информации в виде упорядоченного (нумерованного) списка.
Список элементов представляется отдельной структурой, возможно, с меньшими промежутками между элементами списка, чем, например, между абзацами. Представление зачастую идентично способу, при котором вложенные списки представляются с отступом в соответствии с их структурой.
В противоположность элементу 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 элементы (один или более).
Простой пример:
<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>
Пример, в котором использованы римские цифры:
<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 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>
Конечный тег всегда может быть опущен.
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
SELECTED | SELECTED | задает опцию по умолчанию | в элементе SELECT без атрибута MULTIPLE по крайней мере один элемент OPTION может иметь эту установку |
VALUE | строка | значение свойства используется, когда серверу передается содержимое формы; это свойство сочетается со свойством имени, задаваемым атрибутом NAME из внешнего элемента SELECT | по умолчанию - содержимое элемента |
SELECT элемент.
Строка. Разрешены escape последовательности, но теги не распознаются.
<OPTION>female</OPTION>
Представление обычного текстового абзаца.
Текстовый абзац, обычно выделяемый расширенным пустым местом в тексте (пустая строка) из числа других абзацев, заголовков и т.д. Броузер может вставлять дополнительные пробелы в начале первой строки; но большинство броузеров не делают этого.
Броузеры обычно форматируют абзацы так, чтобы подогнать их по горизонтали (по ширине экрана или окна).
Абзацы обычно отображаются полными по левому краю с неровной правой границей. Атрибут ALIGN может быть использован для точной спецификации горизонтального выравнивания.
<P>абзац текста</P>
имя атрибута | возможные значения | смысл |
---|---|---|
ALIGN | LEFT, CENTER, RIGHT | выравнивание абзаца |
По умолчанию - левое выравнивание, однако это может быть перекрыто включением элемента DIV или CENTER.
<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> 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.
Смотрите также раздел Разделение на строки и использование символов пробелов и табуляции.
Передать параметры Java апплету.
Непосредственно не отображается, но может проявиться в действиях апплета.
<PARAM NAME=имя VALUE=значение>
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
NAME | имя | имя параметра | обязательно |
VALUE | строка | значение параметра |
Элемент APPLET
Никакое.
<PARAM NAME=snd VALUE="Hello.au">
Символы escape последовательностей, например, é
, "
и ¹
определяются прежде, чем значение параметра передается апплету. Для включения символа & используйте &
.
Представить текст с использованием пробелов и переводов строк для последующего отображения его на экране. Это нужно, когда используется только текстовая информация, и мы хотим положить ее на страницу Web, предпочитая выбранную компоновку. Текст также может быть представлен так, как он формируется компьютерным выводом.
Текст отображается шрифтом одного размера, т.е. шрифтом типа телетайпного, в котором все символы занимают один и тот же размер по горизонтали. Использование пробелов и переводов строк точно соответствует содержимому в пределах элемента PRE.
<PRE>
отформатированный текст
</PRE>
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
WIDTH | целое | ширина текста в символах | практически не поддерживается |
Значение WIDTH должно быть равно или больше, чем длина самой длинной строки. В принципе, атрибут WIDTH должен обеспечивать броузер информацией, чтобы выбрать шрифт подходящего размера или скорректировать отступы для представления текста в требуемом виде. Но обычно это не делается броузерами, а сами Вы не можете установить размер шрифта, так как изменяющие размер шрифта элементы недопустимы в пределах PRE. Например, текст шире 80 символов будет отображен неправильно, даже если Вы используете атрибут WIDTH.
Любой текстовый элемент, за исключением изображений (IMG) и элементов изменений размера шрифта (BIG, SMALL, SUB, SUP, FONT).
Простейший пример:
<PRE> To be or not to be, that is the question. </PRE>
Другой пример:
Пример PRE-2.html:
The printable characters of ASCII: <PRE> ! " # $ % & ' () * +, -. / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ 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>
Попытка представить компьютерный листинг, подобный выводимому на принтер:
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, содержащего связи:
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>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзаца не разрешен.
The fatal error message <SAMP>Bus error - core dumped</SAMP> can be caused by very different bugs in your program.
Большие разделы вывода лучше представлять с использованием элемента PRE или отдельных текстовых файлов, к которым установлены связи в HTML файлах.
Смотрите также примечания по представлению взаимодействия с компьютером и общие замечания по фразовым элементам.
Зарезервировано для будущего использования с описывающими языками.
Никакое. Программы просмотра не должны показывать содержимое элементов SCRIPT.
<SCRIPT>скриптовые объявления</SCRIPT>
Никаких.
Скриптовые объявления. Синтаксис и семантика должны быть определены отдельно.
Технически эти элементы определены с CDATA, как тип содержимого. В результате они могут содержать только символы SGML. Все символы разметки или разделители игнорируются и пропускаются, как данные приложения, за исключением пары </, непосредственно сопровождаемой символами (a - z, A - Z). Это означает, что распознан конечный тег элемента (или элемента, в который он вложен).
Так как семантика для элемента SCRIPT не определена в HTML 3.2, нет возможности дать какой-нибудь выразительный пример.
Элементы SCRIPT в будущих версиях HTML будут служить для создания и поддержки сценариев.
Спецификация в пределах формы: меню, из которого пользователь может выбрать один или несколько элементов.
Меню выбора, которое может быть "активизировано" некоторым зависящим от броузера образом; обычно в графических броузерах это означает ниспадающее меню. В зависимости от броузера все варианты выбора могут быть видимы одновременно или пользователь может просматривать элементы меню.
<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>текст</SMALL>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов 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>текст</STRIKE>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзацев не разрешен.
Compare <STRIKE>strike-through text</STRIKE> with normal text.
Пока неясно, для чего введен STRIKE. Предположительно, он может быть использован для представления текстовых сегментов, которые принадлежали первоначальной версии текста, но позднее были удалены.
Смотрите общие примечания по текстовой разметке, где приводятся дополнительные примеры.
Спецификация HTML 2.0 не включает STRIKE, однако упоминает его, как элемент, который должен быть "развернут до некоторой степени ".
HTML 3.2 Ссылочные Спецификации предупреждают, что 'STRIKE может быть заменен более выразительным тегом "S" из HTML 3.0'.
Для сильного подчеркивания.
Выделение жирным шрифтом. Также броузеры могут использовать подчеркивание (так делает, например, Lynx). Смотрите общие примечания к отображению разметки.
<STRONG>текст</STRONG>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзацев не разрешен.
For your own safety, <STRONG>turn the power off before opening the device.</STRONG>
Не подчеркивайте слишком много! Подчеркивая все подряд - Вы не подчеркиваете ничего.
Элемент STRONG реализует более сильное подчеркивание, чем элемент EM.
Смотрите также общие ремарки о фразовых элементах.
Специфицировать таблицы стилей для использования при отображении документа.
Таблица стилей, если она поддерживается броузером, может по-разному влиять на отображение. Содержимое элемента STYLE состоит из команд для отображения и не должно высвечиваться броузером.
<STYLE>информация о стиле</STYLE>
Согласно HTML 3.2 Ссылочным Спецификациям - никаких. Но различные спецификации таблиц стилей упоминают некоторые атрибуты элемента STYLE.
Информация о стиле. Синтаксис и семантика должны быть определены отдельно.
Технически эти элементы определяются с CDATA, как тип содержимого. В результате они могут содержать только SGML символы. Все символы разметки или ограничители игнорируются и пропускаются, как данные приложения, за исключением пары символов </, за которыми сразу же следуют символы (a - z, A - Z). Это означает, что распознан конечный тег (или элемент, в котором он находится).
Также как и в комментариях, рекомендуется вокруг содержимого элемента STYLE вводить разделители <!-- и -->. Если Вы так сделаете, это гарантирует, что старые броузеры (не понимающие STYLE) не высветят содержимое.
Ниже приведен пример очень простых таблиц стилей (согласно CSS1), специфицирующих при отображении использование шрифта sans-serif для всех элементов, за исключением элементов U, отображающихся шрифтом serif (в дополнение к подчеркиванию).
<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>текст</SUB>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов 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>текст</SUP>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзацев не разрешен.
The notation A<SUP>T</SUP> denotes the transpose of A.
Consider the equation x<SUP>n</SUP> + y<SUP>n</SUP> = z<SUP>n</SUP>.
The expression a<SUP>b<SUP>c</SUP></SUP> means a<SUP>(b<SUP>c</SUP>)</SUP>.
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².
Существует также тег для подстрочного знака SUB, однако HTML 3.2 не обеспечивает полной поддержки математических формул.
Так как этот тег - новый, поддерживают его не все программы. Некоторые броузеры просто игнорируют его, представляя, например, a<SUP>T</SUP>
как aT
. Текстовые броузеры также не могут правильно использовать SUP.
Как видно из последнего примера, надстрочные символы могут быть вложенными, что приводит к отображению внутреннего надстрочного текста очень маленьким шрифтом. Броузер Internet Explorer игнорирует теги SUP для уровня вложенности выше двух.
Смотрите также общие примечания по текстовой разметке.
Для представления табличной информации, т.е. структуры, подобной матричной.
Таблица, по умолчанию без окружающей рамки (бордюра). Если рамка существует (задается атрибутом BORDER), таблицы отображены в барельефном приподнятом виде с внешней рамкой со скосом, и отдельными вставленными в эту приподнятую поверхность ячейками. Если ячейки имеют явное содержание, рамки вокруг отдельных ячеек вычерчены. Незаполненное пространство в таблице не выделяется, за исключением .
Размер таблицы для отображения содержимого обычно устанавливается броузером автоматически, однако можно установить ширину таблицы, используя атрибут 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> <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 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>данные</TD>
В принципе, конечный тег </TD> может быть опущен. Но делать так не рекомендуется, так как некоторые броузеры (включая Netscape) могут представлять данные неверно.
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
NOWRAP | NOWRAP | подавляет перенос слов | эквивалентно использованию непрерывных пробелов ( ) вместо обычных пробелов в пределах содержимого ячейки |
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 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>данные</TH>
В принципе, конечный тег </TH> может быть опущен, но так делать не рекомендуется, так как некоторые броузеры (включая Netscape) могут представлять данные неверно.
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
NOWRAP | NOWRAP | подавляет перенос слов | эквивалентно использованию непрерывных пробелов ( ) вместо обычного пробела в пределах содержимого ячейки |
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 можно использовать escape последовательности, например, < (для <) и ä (для д), но никакие теги HTML не разрешены, поэтому Вы не можете задавать в заголовке размеры шрифтов или выделения.
<TITLE>A study of population dynamics</TITLE>
Написать хорошее заглавие - очень важно, так как списки результатов поиска, возвращаемые поисковым сервером, могут использовать его. По этой же причине титул должен быть наглядным (и привлекательным!) даже вне контекста, т.е. в случае, когда только титул и несет информацию о документе. Избегайте титулов, подобных "Введение...".
С другой стороны, титул должен быть относительно коротким, чтобы одной строкой передать смысл всего документа. HTML 2.0 спецификации говорят, что длинный титул может быть усечен и что титул не должен превышать 63 символов в длину.
Смотрите также общие примечания к разделу заглавия.
Используйте H1 или другие заголовочные элементы, чтобы специфицировать главный заголовок документа. Использование такого заголовка в начале документа и использование элемента TITLE не является взаимозаменяемым, а служит различным целям; оба способа - настоятельно рекомендуются. Текст титула и текст главного заголовка могут быть идентичны, однако, это не является необходимостью.
Для представления строки таблицы.
Одна строка таблицы.
<TR>заголовок ячеек (TH элементы) и данные ячеек (TD элементы)</TR>
В принципе, конечный тег </TR> может быть опущен, но делать так не рекомендуется, так как при этом некоторые броузеры (включая Netscape) могут представлять таблицу неверно.
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
ALIGN | LEFT, CENTER, RIGHT | горизонтальное выравнивание в ячейке | по умолчанию LEFT, может быть перекрыто атрибутом ALIGN в элементах TH или TD |
VALIGN | TOP, MIDDLE, BOTTOM, BASELINE | вертикальное выравнивание в ячейке | может быть перекрыто атрибутом VALIGN в элементах TH или TD |
TABLE элемент.
<TR><TD>3.70 <TD>4.69 <TD>8.02 </TR>
Смотрите обсуждение таблиц, где содержатся дополнительные примеры.
Для представления текста одноразмерным шрифтом.
Одноразмерный шрифт. Смотрите общие примечания к отображению разметки.
<TT>текст</TT>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзаца не разрешен.
Compare <TT>monospaced font</TT> with normal font.
Избегайте использования TT. Вместо него лучше использовать логическую разметку, например, CODE или SAMP.
Смотрите общие примечания по текстовой разметке, где даются дополнительные примеры.
Для подчеркивания (выделения) текста.
Подчеркнутое (выделенное). Однако, например, Netscape представляет содержимое элемента U, как обычный текст (его авторы полагают, что подчеркивание может вызвать проблемы с гиперсвязями). Смотрите общие примечания к отображению разметки.
<U>текст</U>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзаца не разрешен.
Compare <U>underlined text</U> with normal text.
Избегайте использования элемента U. Вместо него лучше использовать логическую разметку, например, EM или STRONG.
Спецификации HTML 2.0 не включают U, однако упоминают его, как элемент, который может быть "развернут до некоторой степени".
Смотрите общие примечания по текстовой разметке, которые содержат дополнительные примеры
Для представления информации в списковой форме без нумерации элементов.
Список с маркерными отметками. Список элементов представляется выделенными участками документа с меньшим расстоянием между ними, чем, например, между абзацами. Представление идентично вложенным спискам - может показываться с отступами.
<UL>
<LI> элемент списка 1
<LI> элемент списка 2
...
</UL>
имя атрибута | возможные значения | смысл | примечания |
---|---|---|---|
TYPE | DISC, SQUARE, CIRCLE | по умолчанию буллет стиль для элементов | Нет в HTML 2.0! |
COMPACT | COMPACT | сокращенное расстояние между элементами |
Значение по умолчанию буллет стиля обычно зависит от уровня вложенности списков.
LI элементы (один или более).
Простой пример:
Remember to buy <UL> <LI> milk <LI> bread <LI> apples. </UL>
Пример, показывающий как может выглядеть буллет. Заметим, что атрибут TYPE в элементе LI перекрывает внешний элемент UL.
<UL TYPE=DISC COMPACT> <LI> disc <LI TYPE=SQUARE> square <LI TYPE=CIRCLE> circle </UL>
Смотрите также Примеры различных списковых элементов в HTML.
Смотрите общие примечания к списковым элементам для обсуждения отдельных из них.
Элемент UL должен включать, по крайней мере, один элемент LI. Некоторые пользователи и редакторы HTML могут создавать элементы UL с текстом в его пределах, даже с вложенными элементами UL - в надежде получить отступы различного размера. Если Вам это необходимо, включите текст в элемент LI (хотя это обычно вызывает появление буллетов на экране), а его, в свою очередь, в элемент UL. (Таблицы стилей предоставят механизмы для управления отступами.)
Для обозначения того, что часть текста (обычно, слово) является переменной, т.е. элементом, который может заменяться различными выражениями.
Курсивом. К сожалению, броузер Internet Explorer (IE) отображает VAR с использованием одноразмерного шрифта. (Так как новые версии IE поддерживают таблицы стилей, Вы можете задать стилевое правило, подобное VAR { font-style : italic }
.) Смотрите общие примечания к отображению разметки.
<VAR>текст</VAR>
Никаких.
Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML. Текстовые элементы могут быть вложенными.
Текстовые элементы. Перевод абзаца не разрешен.
In the simplest case, the command for deleting a file in Unix is<BR> <KBD>rm</KBD> <VAR>filename</VAR>
Смотрите примечания по представлению взаимодействия с компьютером и общие замечания по фразовым элементам.