Любой HTML - документ представляет собой текстовый файл,
содержащий текст, ключевые слова и дескрипторы специального языка разметки
гипертекста HyperText Markup Language (HTML) Язык HTML возник и развивался как средство создания
гипермедиа - документов, содержащих не только информацию но и ссылки на другие
документы, рисунки, аудио и видеозаписи , а также иные виды информационных
ресурсов.
Поскольку Internet Explorer является браузером Internet,
его основная задача - отображение Web- страниц, написанных на языке HTML.
Что такое HTML
HTML- это язык программирования, специально
предназначенный для разметки и компоновки Web страниц. Несмотря на гигантские темпы
развития Internet, текстовые файлы в коде HTML
по-прежнему остаются стандартным методом представления информации в World Wide Web.
Файлы в коде HTML содержать, во-первых, текст (т.е. символы,
отображаемые на Web странице), и, во-вторых, дескрипторы (элементы,
определяющие формы текста). Поскольку HTML- файлы имеют обычный текстовый формат, их
можно редактировать в любом текстовом редакторе, например в Блокноте системы Windows.
Работая с HTML-файлами в текстовом редакторе, вы можете
видеть команды разметки (форматирования) текста, но не результаты этой разметки
(т.е. размеры шрифта, выделения, маркированные списки и т.д.). После внесения
изменений в код HTML для просмотра результатов приходится загружать
правленую страницу в окно интерпретатора кода HTML, например Internet Explorer.
Для того, чтобы понять структуру и сценарий Web-документа,
мы должны рассмотреть несколько Web-страниц и выявить общие элементы.
Итак, рассмотрим основные теги, входящие в каждый Web-документ.
Прежде всего это <HTML></html>
Отличительный признак HTML-документа. Одним из
принципов языка является многоуровневое вложение элементов. HTML
является самым внешним, так как между его стартовым и конечным тегами должна
находиться вся Web-страница.
Также основным тегом является <HEAD></head>
Область заголовка Web-страницы. Иными словами, ее первая часть. Так
же как и HTML, HEAD служит только для формирования общей
структуры документа.
<BODY></body>
Этот элемент заключает в себе гипертекст, который
определяет собственно Web-страницу. Эта та часть документа, которую
разрабатывает автор страницы и которая отображается браузером. Соответственно,
конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY
можно использовать все элементы, предназначенные для дизайна Web-страницы.
Внутри стартового тега элемента BODY можно расположить ряд атрибутов,
обеспечивающих установки для всей страницы целиком.
Без этих тегов невозможно создать ни одну Web-cтраницу.
Более подробно эти и другие теги мы рассмотрим в параграфе 2.1.
Если сравнить исходные тексты различных Web-страниц,
можно легко увидеть сходство их структур. Это объясняется тем, что документы
создаются по определенным правилам. В основу синтаксиса языка HTML лег
стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между
стандартом официальным и стандартом фактическим.
Ниже приведен шаблон типичного Web-документа.
На его примере мы рассмотрим общие принципы построения HTML-страниц.
Для того чтобы понять структуру Web-страницы,
нам необходимо подробно рассмотреть все элементы, входящие в приведенный
листинг.
<COMMENT> Комментарий к документу </comment>
<HTML>
<HEAD>
<TITLE> Структура
Web-страницы</title>
<STYLE> H2 {font-family: Arbat;}
CODE {font-family: Arbat;} </style>
<META
name=’’Author’’
content=’’Irina’’>
<META
name=’’Keywords’’
content=’’WWW, HTML, document, element’’>
</head>
<BODY bgcolor=#FFFFFF>
<A name=’’top’’></a>
Переход в <A href=’’#bottom’’> конец </a> документа <P>
Переход к <A href=’’#S001’’><B> ссылке 1 </b></a><P>
<P>
<HR>
<H1>Заголовок1<h1>
<H2>Заголовок2<h2>
<H3>Заголовок3<h3>
<H4>Заголовок4<h4>
<H5>Заголовок5<h5>
<H6>Заголовок6<h6>
<HR>
Здесь расположена <B>ссылка
1</b><A name=’’S001’’></a>
<HR>
<P>Здесь должен располагаться оригинальный
текст Web-страницы
<HR>
<A name=’’bottom’’></a><P>
Переход в <A gref=’’top’’>
начало </a> документа
</body>
</html>
<COMMENT></comment>
Текст комментария.
В любом языке программирования
есть конструкции, позволяющие создавать произвольные ремарки. HTML в
этом смысле - не исключение. Текст, помещенный внутри COMMENT,
игнорируется браузером. COMMENT может располагаться в любом месте кода Web-страницы.
Без конечного тега, здесь по-видимому не обойтись: комментарий должен быть
отделен от основного текста.
Существует, правда, одно ограничение: внутри
комментария не должны располагаться другие элементы. Так должно быть, разумеется,
только в том случае когда необходимо, чтобы все содержимое элемента COMMENT
не отображалось на экране монитора. Если в комментарии будет присутствовать
другой элемент, то его содержимое будет выведено на экран, отформатированное
соответствующим образом. С этой проблемой связана другая, похожая: обычный
текст не может содержать фрагменты, имеющие вид тегов. Для того чтобы включать
в текст подобные конструкции, существует элемент PLAINTEXT, о котором речь
пойдет ниже.
Существует и другой способ обозначения комментария. Он
заключается в использовании восклицательного знака и обрамлении текста
комментария двойным тире. Например:
<!--Строка комментария-->
<!--Комментарий- -Не комментарий- -Снова
комментарий-->
Внутри подобной конструкции можно помещать и теги: они
не будут восприниматься браузером.
<HTML></html>
Отличительный признак HTML-документа. Одним из
принципов языка является многоуровневое вложение элементов. HTML
является самым внешним, так как между его стартовым и конечным тегами должна
находиться вся Web-страница. В принципе, этот элемент можно
рассматривать как формальность. Он имеет атрибуты version,
lang и dir, которыми в данном случае мало кто пользуется
и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы.
Естественно, что конечным тегом </html> заканчиваются все гипертекстовые
документы.
<HEAD></head>
Область заголовка Web-страницы. Иными словами, ее первая часть. Так
же как и HTML, HEAD служит только для формирования общей
структуры документа. Этот элемент может иметь атрибуты lang и dir и
допускается вложение элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID.
<TITLE></title>
Элемент для размещения заголовка Web-страницы.
Строка текста, расположенная внутри, отображается не в документе, а в заголовке
окна браузера. Эта особенность часто используется для организации поиска в WWW.
Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы
строка внутри TITLE, не будучи слишком длинной, достаточно отображала
назначение документа.
<STYLE></style>
Описание стиля некоторых элементов Web-страницы.
В выше приведенном примере назначены шрифты для элементов Н2 и CODE.
Естественно, что для каждого элемента существует стилевое оформление по
умолчанию, поэтому употребление STYLE не обязательно.
<META>
Этот элемент содержит служебную информацию,
которая не отображается при просмотре Web-страницы. Внутри него нет текста в обычном
понимании, поэтому нет и конечного тега. Каждый элемент META
содержит два основных атрибута, первый из которых определяет тип данных, а
второй - содержание. Далее приведены несколько примеров meta-данных.
Дата, обозначающая «срок годности»документа:
name=’’Expires’’ content=’’Дата’’
Адрес электронной почты:
name=’’Reply-to’’ content=’’Имя@Адрес’’
Указание
приложения, в котором был создан Web-документ:
name=’’Generator’’ content=’’Название HTML-редактора’’
Атрибут name используется приложением-клиентом для
получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут
часто заменяют атрибутом http-equiv. Он используется сервером для создания
дополнительных полей при выполнении запроса.
Кроме этого, элемент МЕТА может содержать URL.
Шаблон соответствующего атрибута таков:
URL=’’http://адрес’’
<BODY></body>
Этот элемент заключает в себе гипертекст, который
определяет собственно Web-страницу. Эта та часть документа, которую
разрабатывает автор страницы и которая отображается браузером. Соответственно,
конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY
можно использовать все элементы, предназначенные для дизайна Web-страницы.
Внутри стартового тега элемента BODY можно расположить ряд атрибутов,
обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных для дизайна - атрибут,
определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так
как одинаковые серые Web-страницы благодаря ему расцвели яркими
цветными узорами:
background=’’Путь к файлу фона’’
Более простое оформление фона сводиться к заданию его
цвета:
bgcolor=’’#RRGGBB’’
Цвет фона задается тремя двухразрядными
шестнадцатеричными числами, которые определяют интенсивность красного, зеленого
и синего цветов соответственно.
Оба вышеперечисленных атрибута не являются
альтернативными и часто используются совместно.
Поскольку фон страницы может изменяться, необходимо
иметь возможность подбирать соответствующий цвет текста. Для этого имеется
следующий атрибут:
text=’’#RRGGBB’’
Для задания цвета гиперссылок используется атрибут:
link=’’RRGGBB’’
Также можно задать цвет для использованных
гиперссылок:
vlink=’’RRGGBB’’
Гипертекст, расположенный внутри элемента BODY,
может иметь произвольную структуру. Ее определяют в первую очередь назначение Web-страницы
и фантазия разработчика.
<A></a>
HTML-документ
может быть очень большим, и в этом случае пользователю должна быть
предоставлена возможность быстро перемещаться к нужному разделу страницы. Для
этого можно использовать механизм гиперссылок. Необходимо также в нужных местах
текста расставить соответствующие метки. Подробно гиперссылки мы обсудим в
параграфе 2.2., а здесь мы рассмотрим только шаблон для создания меток:
<A name=’’Метка’’></a>
В этом случае для перехода внутри документа можно
использовать следующую конструкцию:
<P>Переход к <A href=’’#Метка’’>метке</a></p>
Несколько подобных строк могут образовать своеобразное
оглавление Web-страницы, которое можно разместить в начале и в конце
документа.
<BASE>
Элемент для установки базового адреса (URL) для
ссылок. Это позволяет опускать их начальную часть. Для использования элемента
необходима следующая конструкция:
<BASE href=’’http://компьютер/путь1’’>
Фрагмент путь1 не является обязательным. При
форматировании полного адреса он будет отброшен.
В том случае, когда надо задать базовый адрес для
локального диска (например D:), должна быть использована такая
конструкция:
<BASE href=’’file://D:\путь\’’>
Тогда при указании относительной ссылки можно задать
не только имя файла, но и имена папок, в которых он находиться. Иными словами,
путь к файлам может быть разбит на две части: абсолютную и относительную. Это
полезно в том случае, когда для файлов указанных в документе, есть общий
начальный фрагмент пути.
В выражении абсолютной ссылки можно также опустить
указание на схему доступа (file://). В этом случае будут учитываться только
левая часть абсолютной ссылки до первого левого символа «\», то есть имя
локального диска.
Другие конструкции мы рассмотрим ниже.
Одним из самых важных элементов языка, обеспечивающий
создание гиперссылок является:
<A></a>
Чаще всего используется такой шаблон:
Произвольный текст <A href=’’Адрес
ссылки’’>текст для щелчка</a>
Или такой:
<A href=’’Адрес ссылки’’> <IMG src=’’Ссылка
на рисунок’’></a>
Первый шаблон применяется в том случае, когда
гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Internet,
файл на локальном диске или метку внутри текущей страницы. Текст, расположенный
внутри элемента А, представляет собой видимую часть гиперссылки. Именно на нем
должен щелкнуть пользователь, чтобы осуществить переход. Браузер выделяет этот
фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы
обеспечить подсказку.
Второй шаблон предназначен для тех случаев, когда
видимая часть гиперссылки представляет собой рисунок. Если для последнего
определена рамка, то она тоже меняет цвет при использовании. Если ссылка
указывает на рисунок, который находиться на локальном диске, она обязательно
должна начинаться со слова «file», то есть содержать указание на схему
доступа:
file://Диск:\Путь
к файлу
или
file:///Диск:/Путь
к файлу
Подобно многим другим элементам языка, элемент А
требует использование атрибутов. Атрибут гиперссылки мы уже знаем, шаблон его
таков:
href=’’URL’’
или
href=’’Протокол://Адрес
ссылки’’
Например:
href=’’http://www.netscape.com’’
Кодовое слово, стоящее вначале URL,
обозначает так называемую схему доступа. Она определяет тип сервера, доступный
при помощи данной ссылки. Для пользователя это представляется как доступ к
одной из «разновидностей» Internet. В этом смысле можно сказать, что Internet
- это как бы несколько сетей в одной. У каждой из них существуют свои правила
доступа, достоинства, недостатки, свои приверженцы и противники. Но все ее
клиенты используют одни и те же каналы связи. Похожая ситуация наблюдается и в
обычных телефонных сетях. Их можно использовать для связи голосом, передачи
факсов, межкомпьютерной связи и т. д.
WWW, как
самая современная система, должна обеспечивать совместимость с более ранними,
поэтому от старых протоколов не отказываются, а стараются приспособить их к
современным нуждам (например, ftp). Существуют следующие схемы доступа:
file
- доступ к файлу на локальном диске;
ftp
- доступ к архивам файлов при помощи протокола передачи файлов ( file transfer protocol);
gopher
- доступ к системе Gopher;
http
- доступ к WWW;
mailto
- отправка сообщений по электронной почте;
news
- доступ к новостям USENET;
nntp
- доступ к новостям USENET с использованием протокола NNTP;
telnet
- подключение по протоколу telnet;
wais
- подключение к системе WAIS.
Когда гиперссылка используется для указания адреса
электронной почты, ее выбор обеспечивает не переход к новому документу, а
запуск диалога для отправки сообщения указанному адресату. Обычно такую ссылку
размещают в конце страницы для обеспечения связи с Web-мастером
или автором страницы. Для своей личной страницы я бы могла составить такую
ссылку:
<A href=’’mailto:alexs@pccenter.ru’’></a>
В том случае, когда используются переходы внутри
текущей страницы, на ней должны быть расставлены метки:
<A name=’’Метка’’></a>
В примере для заголовка используются теги <H1></h1>.
Существует шесть уровней заголовков, которые
обозначаются Н1...Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает
самый маленький заголовок. Для заголовков можно использовать атрибут, задающий
выравнивание влево, по центру или вправо:
align=’’left’’
align=’’center’’
align=’’right’’
Элемент FONT может с успехом заменять элементы заголовка
Н1...Н6. Для последних, например, не предусмотрена возможность указания цвета
букв. Чтобы заголовок, созданный на основе элемента FONT,
хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, B, I, P и т.
д.
Форматирование текста и изменение стилей
Текст - единственный объект Web-страницы,
который не требует специального определения. Иными словами, произвольные
символы интерпретируются по умолчанию как текстовые данные. Но для
форматирования текста существует большое количество элементов.
<P></p>
Элемент абзаца (paragraph) - один из самых полезных. Он позволяет
использовать только начальный тег, так как следующий элемент Р обозначает конец
предыдущего и начало следующего абзаца. Конечный тег удобно использовать в тех
случаях, когда по смыслу необходимо обозначить конец абзаца. Вместе с элементом
Р можно использовать атрибут выравнивания align.
<BR>
Элемент, обеспечивающий принудительный переход на
новую строку. Он имеет только стартовый тег. В месте его размещения строка
заканчивается, а оставшийся текст печатается с новой строки.
<NOBR></nobr>
Этот элемент по своему действию является прямой
противоположностью предыдущему. Текст, заключенный между его тегами, будет
выведен в одну строку. Длинная строка не уместится на экране, и для ее
просмотра придется использовать горизонтальную полосу прокрутки.
<PRE></pre>
Элемент для обозначения текста, отформатированного
заранее (preformatted). Подразумевается, что текст будет выведен в
том виде, в каком он был подготовлен пользователем. Например, учитываются
символы конца строки, появившееся при наборе текста в редакторе. Во всех других
случаях браузер игнорирует эти символы. Этот элемент удобно использовать для
демонстрации листингов программ или для вывода текстовых документов,
переформатирование которых может привести к искажению их смысла.
<BLOCKQUOTE></blockquote>
Обозначение цитаты. Этот элемент требует наличие
конечного тега. Текст не претерпевает никаких изменений, но абзац располагается
с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в
цитате используются кавычки, то они должны быть проставлены явным образом. В
настоящее время используют и другое написание этого элемента: BQ.
<CENTER></center>
Элемент используется для центрирования текста, а
точнее, любого содержимого. Не является общеупотребительным.
<DIV></div>
Элемент, похожий на предыдущий. Он позволяет
выравнивать содержимое по левому краю, по центру или по правому краю. Для этого
стартовый тег должен содержать соответствующий атрибут:
align=’’left’’
align=’’center’’
align=’’right’’
<B></b>
Выделение текста полужирным шрифтом. Очень популярный
элемент. Использование полужирного шрифта - прием, позаимствованный из
текстовых редакторов.
<BIG></big>
Увеличенный размер шрифта
<SMALL></small>
Уменьшенный размер шрифта
<I></i>
Выделение текста курсивом
<EM></em> и <DFN></dfn>
Элементы, означающие выразительность фрагмента текста
и определение чего-либо. Оба элемента аналогичны по своему действию элементу I, то
есть, в большинстве случаев, позволяют выделить текст курсивом.
Они могут пригодиться только для того, чтобы
единообразно выделить одинаковые по назначению (или смыслу) фрагменты текста,
находящиеся в разных частях документа или даже на разных страницах. Разработчик
в этом случае не может точно знать, какой именно шрифт будет использован: это
определяется каждым браузером по-своему. Но он может быть точно уверен, что все
фрагменты текста будут отформатированы одинаковы. В языке можно найти еще
несколько элементов, которым можно дать такую же характеристику.
<TT></tt>
Элемент, обозначающий текст телетайпа. Его особенность
заключается в использовании моноширинного шрифта.
<STRIKE></strike>
Элемент, создающий перечеркнутое начертание текста. В
настоящее время его заменяют более простим: <S></S>
<U></u>
Подчеркнутое начертание текста.
<STRONG></strong>
Элемент, отвечающий за выделение текста. Обычно его
применение равносильно использованию элемента для выделения полужирным.
<SUB></sub>
Элемент, создающий эффект нижнего индекса.
<SUP></sup>
Элемент, создающий эффект верхнего индекса.
Обычный текст и элемент SUB
Обычный текст и элемент SUP
|
|
Действие двух последних элементов
иллюстрирует следующий рисунок. Оба этих элемента обеспечивает уменьшение
размера шрифта. Поэтому их можно использовать и для форматирования абзаца
целиком, если необходимо, чтобы он был выведен мелким шрифтом.
<PLAINTEXT></plaintext>
Этот элемент предназначен для создания текста с
конструкциями HTML, которые должны восприниматься именно как текст. Все
теги, заключенные в PLAINTEXT, воспринимаются браузером только как
произвольные символы. Элемент удобно использовать для обсуждения вопросов,
связанных с использованием HTML.
<CODE></code>, <SAMP></samp> и
<VAR></var>
Элементы, предназначенные для вывода фрагментов
программ. CODE используется для форматирования текста программы. SAMP
предполагается задействовать при иллюстрации примеров вывода данных на экран. VAR был
создан для выделения переменных. Как правило, все эти элементы обеспечивают
вывод информации с использованием моноширинного шрифта.
<KBD></kbd>
Этот элемент предназначен для указания текста, который
пользователь должен ввести с клавиатуры. Можно рассчитывать, что текст,
выделенный с помощью этого элемента, будет выделен моноширинным шрифтом в
полужирном начертании.
<CITE></cite>
Предполагается, что этот элемент может быть
использован для форматирования цитат и ссылок в обычном понимании этого слова.
Текст, расположенный внутри него, выводиться по умолчанию курсивом.
<ADDRESS></address>
Подобно элементу CITE, данный элемент отличается только
предусмотренным содержанием. Он также обеспечивает форматирование курсивом. В
некоторых справочных руководствах можно встретить, что данный элемент
поддерживает атрибут align. Легко убедиться, что это не так.
Вообще, к подобным элементам надо относиться с
определенной долей недоверия. Я имею ввиду те из них, которые предназначены для
размещения определенной информации, а не для создания эффектов форматирования.
Мы уже рассмотрели элементы ADDRESS, CITE, CODE, KBD, SAMP, VAR. Дело в том, что они не относятся к основному
направлению совершенствования HTML и пользовательских агентов. Поэтому браузеры
интерпретируют их по-разному и не в обязательном порядке, но другое дело, если
стиль для всех этих элементов определен в самой Web-странице.
<BASEFONT>
Элемент, определяющий базовый (основной размер
шрифта). Внутри элемента необходимо указать атрибут:
size=Базовый
размер шрифта
Величина атрибута может лежать в пределах от 1 до 7.
По умолчанию используется величина 3. Установка, выполняемая этим элементом,
имеет значение для элемента FONT (см. ниже),который позволяет задавать
относительный размер шрифта.
<FONT></font>
Определение типа, размера и цвета шрифта. Все эти
характеристики определяются при помощи соответствующих атрибутов. Например,
абсолютный размер шрифта задается при помощи size (размер):
size=Абсолютный размер шрифта
Размер шрифта может задаваться относительно базового:
size=+Число
size=-Число
При назначении величины для size
необходимо учитывать величину базового размера. Обе они в сумме должны
соответствовать одному из абсолютных размеров. Так для базового размера,
равного 3, относительный размер может находиться в пределах от -2 до +4. Если
величина выходит за допустимый предел, то используется или шрифт размера 7, или
шрифт размера 1.
Для элемента FONT можно использовать атрибут цвета:
color=’’цвет’’
Атрибут face (вид) не входит в спецификацию HTML
3.2., но у меня не поднимается рука исключить его из рассмотрения, настолько он
естественен и полезен. Он позволяет задавать тип шрифта:
face=’’Название
шрифта’’
Правда, есть одна проблема. Web-страницы
просматривают множество людей, и нет гарантии, что у каждого из них окажется
нужный шрифт. Если в системе не установлен шрифт точно с таким же названием, то
браузер использует свой стандартный. Он имеет два назначенных по умолчанию
шрифта: один пропорциональный, другой моноширинный.
За описание стиля некоторых элементов Web-страницы
отвечает
<STYLE></style>
Интересно, как синтаксис в HTML
отражает историю развития вычислительной техники. Например, старый, а теперь
почти забытый элемент BLINK напоминает о тех временах, когда
использовались дисплеи, имевшие только текстовый режим. При таком положении
вещей мерцание текста (BLINK) было, пожалуй, единственным доступным визуальным
эффектом. В противоположность этому, элемент STYLE, введенный совсем
недавно, вызывает ассоциации с программами для Windows, так как в них
впервые появилось стилевое оформление текста, которое теперь невероятно
популярно и без него уже немыслима работа в таких приложениях, как Word или
Excel.
Списки (list) были добавлены в HTML,
несомненно, под влиянием успеха текстовых редакторов. Список отличается от
обычного текста прежде всего тем, что пользователю не надо думать о нумерации
его пунктов: эту задачу берет на себя программа. Если список добавляется новыми
пунктами или укорачивается, нумерации корректируется автоматически. В случае
ненумерованных списков программа ставит перед каждым пунктом маркеры: кружочки,
прямоугольники, ромбы или другие изображения. В результате список принимает
удобочитаемый, «фирменный вид». Теги для создания списков можно условно разделить
на две группы: одни определяют общий вид списка (и позволяют использовать атрибуты),
а другие задают его внутреннюю структуру. Существует несколько разновидностей
списков.
<UL><LI></ul>
Самый простой ненумерованный список (unordered list).
Его шаблон представлен ниже:
<UL>
<LI> Пункт 1 списка
<LI> Пункт 2 списка
<LI> Пункт 3 списка
</ul><UL>
Элемент UL является своеобразным обрамлением списка. Он
позволяет отделять один список от другого. Элемент LI
обозначает каждый из пунктов. Вид ненумерованного списка показан на следующем
рисунке.
|
|
n Пункт 1 списка
n Пункт 2 списка
n Пункт 3 списка
|
|
<OL><LI></ol>
Структура нумерованного списка похожа на предыдущую:
<OL type=’’I’’>
<LI> Пункт 1
<LI> Пункт 2
<LI> Пункт 3
<LI> Пункт 4
</ol>
Нумерованный список использует другой внешний тег: OL. В
этом случае каждый пункт нумеруется элементом упорядоченной последовательности:
арабскими или римскими числами, буквами латинского алфавита..
Способ нумерации задается при помощи атрибута type. В
следующей таблице. приведены все способы нумерации.
|
Атрибут
|
Последовательность нумерации
|
|
type=’’1’’
|
1, 2, 3, 4, ...
|
|
type=’’i’’
|
i, ii, iii, iv, ...
|
|
type=’’I’’
|
I, II, III, IV, ...
|
|
type=’’a’’
|
a, b, c, d, ...
|
|
type=’’A’’
|
A, B, C, D, ...
|
Списки с определениями (definition lists)
создаются при помощи тегов трех видов:
<DL>
<DT> Пункт 1
<DD> Определение пункта 1
<DD> Другое определение пункта 1
<DT> Пункт 2
<DD> Определение пункта 2
<DT> Пункт 3
<DD> Определение пункта 3
</dl>
Наглядное представление о списке с определениями
приведено ниже. Каждый пункт списка может быть дополнен одним или несколькими
блоками текста при помощи тега (тегов) DD. Каждый блок автоматически размещается с
новой строки. Термин «определение» носит условный характер. Абзацы, размещенные
в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути,
пункт представляет собой заголовок, а определение - произвольный текст под
заголовком.
Пункт 1
Определение пункта 1
Другое определение пункта 1
Пункт 2
Определение пункта 2
Пункт 3
Определение пункта 3
Другой способ создания сложных списков - использование
принципа вложения. Каждый элемент, определяющий пункт списка, может содержать
еще один список. Вложенный список располагается с небольшим отступом вправо
относительно списка верхнего уровня. Каждый из списков может быть создан и
отлажен отдельно, а затем все составляющие могут быть объединены в один большой
список. В том случае, когда структура списка ясна, удобно воспользоваться
шаблоном. В нем должны быть указаны все пункты на всех уровнях. Доработка
такого шаблона сводиться к вписыванию конкретных строк текста в соответствующие
пункты. Ниже дан пример такого шаблона:
<UL>
<LI> Пункт 1
<OL>
<LI> Пункт 1.1
<LI> Пункт 1.2
</ol>
<LI> Пункт 2
<OL>
<LI> Пункт 2.1
<LI> Пункт 2.2
</ol>
<LI> Пункт 3
<OL>
<LI> Пункт 3.1
<LI> Пункт 3.2
</ol>
</ul>
В нем нумерованные списки размещены внутри пунктов
ненумерованного списка. Ниже дано представление о том, как выглядит такая
конструкция.
- Пункт 1
1. Пункт
1.1
2. Пункт
1.2
- Пункт 2
1. Пункт
2.1
2. Пункт
2.2
- Пункт 3
1. Пункт
3.1
2. Пункт
3.2
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.