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

Моу «Восточно – Европейский лицей»

Реферат на тему:

«Основные структуры HTML3.2 документа»

Саратов 2008г

Содержание

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

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

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

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

Пример hello.html:

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

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

Пример hello2.html:

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

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

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

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

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

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

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

Автор документа, имеющий уникальное имя. При этом должна быть задана связь с домашней страницей автора. Если у документа несколько авторов, определите их всех, а также роль каждого из них; например, ведущего автора, редактора, действующего спонсора, а также лиц, формально отвечающих за документ. Датасоздания документа или его последней модификации, или и та и другая. Представляемая дата должна быть понятна во всем мире; в частности, название месяца лучше писать словом, а не цифрой. Контекст документа и его статус, например: часть официальной документации компании об одном из ее продуктов, или часть личной информации о хобби автора, или что-то другое. Адрес (URL) документа. Такая информация зачастую чрезмерна, однако она может быть очень полезной, когда кому-то нужна копия именно того документа, который он нашел. Лучше не полагаться на броузер (и пользователя), добавляющих такую информацию, когда сделана копия документа.

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

Пример skel.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> A sample HTML documentA sample HTML documentThis is a sample HTML document examplifying a suggested way of presenting basic origin information.Jukka Korpela, Jukka.Korpela@hut.fiThis document belongs to the context ofLearning HTML 3.2 by ../../examplesThe URL for this document ishttp://www.hut.fi/~jkorpela/HTML3.2/skel.htmlCreated: December 5, 1996 Информацияо документе — раздел HEAD

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

структура · <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

(в которой Вы теоретически должны иметь фрагмент HTML3.2 Final

вместо HTML 3.2)элемент TITLE, например · Introduction to General Absurdity

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

!DOCTYPE — объявление, которое является определением типа документа (document type definition — DTD) в метаязыке SGML, и которое при обработке документа понятно типовому броузеру SGML. Более того, задание версии HTML, использованное в документе, полезно изучающим код HTML, и, наконец, это также может быть необходимо броузерам и редакторам WWW. Имя документа в элементе TITLE функционально используется броузерами и другими программами. Оно обычно выводится на экран в горячем списке, служит возвращаемым средством поиска и т.д.

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

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

элемент ISINDEX (все еще редко используемый) элемент BASE, задающий точный базовый адрес ссылок на URL элемент META, дающий различную метаинформацию, например дату истечения срока документа элемент LINK, который также задает метаинформацию, но уже о связях документа с другими документами элементы STYLE и SCRIPT. Ожидается, что в будущем это будут очень важные элементы, но сейчас они еще не используются (так как стандартизация находится в стадии развития). Организациясодержания — заголовки (headings), абзацы (paragraphs), списки (lists) и т.п.

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

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

заголовки различных уровней: H1, H2, H3, H4, H5, H6 теги уровня абзаца: простой абзац: P цитирование, представляемое как отдельный абзац: BLOCKQUOTE адрес автора информации — отдельный абзац: ADDRESS элемент, сохраняющий компоновку строк и пробелов предварительно отформатированного текста, PRE списки: простой неупорядоченный список: UL, LI сжатый список, размещаемых одной строкой образов: MENU, LI список малых образов: DIR, LI упорядоченный список: OL, LI дефинитивный список (список меток): DL, DT, DD таблицы: TABLE, CAPTION, TR, TH, TD разделители документа на части, которые могут иметь свойства своей собственной компоновки (например, центрирование): DIV, CENTER изменение темы: HR наполнение форм: FORM, ISINDEX.

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

Записать заголовок для всего документа и для него использовать H1 элемент с атрибутом ALIGN=CENTER. Разделить документ на главные части, записать соответствующие названия для них, используя H1 с ALIGN=LEFT. При этом и в дальнейшем старайтесь избегать деления на более, чем семь частей. Если необходимо, разделите главную часть на меньшие части с заголовками H2, и, если необходимо, разделите каждую из этих подчастей на части уровня ниже этого с заголовками H3. Избегайте использования заголовков H4 и, в особенности, заголовков H5 и H6, так как они выводятся на экран маленьким шрифтом, отчего документ становится трудночитаемым. (Если Вы все-таки хотите использовать H4, попробуйте разделить документ на еще меньшие части.) Если у Вас есть раздел, скажем, с заголовком H2 включающий заголовки H3, избегайте вставки текста между заголовком H2 и первым заголовком H3. Вставка такого текста может быть допустима, если только он содержит очень короткие заметки, такие как: общая ориентировочная информация, некоторые пометки о разделе или девиз. Длинный «бездомный» текст создает неудобство для читателя, который не знаем Ваших намерений. Поэтому используйте подразделы с заголовками соответствующего уровня и с текстом типа «Вводные замечания», «Всеобщее» или «Итоги». Разделите меньшие части вышеупомянутой структуры на абзацы или подобные абзацам блоки (именованные списки или таблицы), как описано ниже. Заметьте, что в HTML Вы должны точно обозначить разделение на абзацы элементами HTML; появление пустой строки не заставит параграф прерваться. В пределах абзаца используйте элементы текстового уровня, нормальную разметку фраз, чтобы отличать специальные текстовые сегменты от обычного текста, например, поместите в кавычки выводимый компьютером текст или подчеркните ключевые слова. Добавьте связи и, если это требуется, изображения или другой иллюстративный материал.

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

Для абзацев обычного текста используйте элемент P. Если текст в абзаце взят из некоторого источника, как помещенная в кавычки цитата, используйте элемент BLOCKQUOTE или, если это программный код, компьютерный листинг (вывод) или некоторый другой текст, для которого не подходит простое отделение его пустыми строками, используйте элемент PRE. В последнем случае, если шрифт одного типа не подходит (например, для поэтического текста), используйте BLOCKQUOTE и добавьте элемент BR к каждой строке. В особом случае, когда абзац представляет информацию об авторе (т.е.- о Вас), используйте элемент ADDRESS. Для наполненной образами информации, которая логически состоит из отдельных видов образов, используйте различные элементы. Например,: Для спиcковых образов, где порядок не важен, например, список ингредиентов в рецепте, используйте элемент UL, или элемент MENU (для списка малых образов), или элемент DIR (для большого списка малых образов, пригодного для представления в многостолбцовом формате). Для представления списка малых образов можно использовать также другие возможности. Для списков образов, где важен порядок и его необходимо точно реализовать, и таких, как последовательность команд, которая должна строго соблюдаться, используйте элемент OL. Для списка образов с короткими названиями или тегами, например, список определений терминов или сокращений, используйте элемент DL. Однако, в качестве варианта можно рассмотреть использование элемента TABLE для представления дефинитивных списков.

Заметим, что обычно представление образов сиспользованием элементов MENU и DIR подобно представлению UL элементов. Такжестоит учитывать, что представление с помощью элемента DL может быть слишкомнеудобным. Поэтому просмотрите, пожалуйста, отдельный файл Примеры различныхсписковых элементов в HTML, чтобы выбрать какое представлениесписков будет лучшим в Вашем приложении.

Элементы UL, MENU, DIR, OL и DL — формируютпростые списки и не имеют таких структурных особенностей, как CAPTIONв элементе TABLE. Поэтому желательно иметь некоторый тип заголовка илипояснение перед списком, оформленное в виде отдельного абзаца.

Для табулированной информации используйте обычный элемент TABLE, однако для отдельных случаев рассмотрите возможности, предоставляемые элементами PRE и DL.

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

Разметкатекста — выделение шрифта, цитирование, код и т.п.Логическая разметка в сравнении с физической

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

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

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

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

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

This has some bold and italic text.

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

Пример nest.html:

This is italic text which contains underlined text within in whereas this is normal underlined text.

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

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

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

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

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

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

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

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

CITE

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

CODE

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

SAMP

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

KBD

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

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

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

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

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

курсив

выделение

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

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

курсив

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

DFN

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

курсив

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

CODE

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