Основы разработки веб – приложений. HTML – язык разметки гипертекста

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

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

Введение в веб – технологии

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

Особенности веб – технологий:

Web-технологии есть концепция работы с информацией. Она отличается следующими особенностями:

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

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

Спецификации HTML

Язык HTML приобрел популярность в середине 90-х годов, благодаря экспоненциальному росту сети Интернет. К этому времени назрела необходимость стандартизации языка, поскольку различные компании, разрабатывавшие программное обеспечение для доступа в Интернет, предлагали свои варианты инструкций HTML, число которых все возрастало и возрастало. Настала пора прийти к какому-то единому соглашению в части применения тэгов языка HTML.

Работу по созданию спецификации HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно — W3C).

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

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

После долгих размышлений в мае 1996 г. был выпущен проект HTML 3.2.

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

Июль 1997 года ознаменовался выходом предлагаемой спецификации HTML 4.0, которая в декабре 1997 г. стала официальной рекомендацией. На сегодняшний день это последняя из принятых спецификаций.

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

Структура документа

Первым тэгом, с которого следует начинать описание документов HTML, является тэг <HTML>. ОН должен всегда начинать описание документа, а завершать описание документа должен тэг </HTML>. Эти тэги обозначают, что находящиеся между ними строки представляют единый HTML-документ. Сам по себе документ является обыкновенным текстовым файлом. Без этих тэгов браузер или другая программа просмотра, возможно, будет не в состоянии идентифицировать формат документа и правильно его интерпретировать.

Чаще всего тэг <HTML> используется без параметров. В предыдущих версиях использовался параметр VERSION, отмененный спецификацией HTML 4.0. На смену этому параметру пришел тэг DOCTYPEX

Между парой тэгов <HTML> и </HTML> располагается сам документ. Документ может состоять из двух разделов — раздела заголовка (начинающийся тэгом <HEAD> ) и раздела содержательной части документа (начинающийся тэгом <BODY> ).

Для обозначения кодировки текста используется мета - тэг, размещающийся в разделе <HEAD> документа:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

Раздел документа BODY

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

Раздел документа BODY должен начинаться тэгом <BODY> и завершаться тэгом </BODY>, между которыми располагается все содержимое данного раздела.

Связь с другими документами

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

Тэг <BASE>

Относительные ссылки расширяются до полных на основе базового адреса. По умолчанию базовым адресом считается текущий адрес страницы. Но, попадая на ПК пользователя, страница получает базовый адрес на основе текущего расположения в файловой системы пользователя, и относительная ссылка <a href="article.htm">Статьи</a> расширяется например так: file:///C:/article.htm.

Тэг <BASE> служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер.

Размещать элемент <BASE> нужно в разделе <HEAD> документа, до появления каких либо относительных ссылок на листы стилей, скрипты и т.п.

Тэг <BASE> имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа.

<BASE HREF="//osu.cctpu.edu.ru/news.htm">

Тэг <BASE> указывает браузеру, где искать файл. Т.е, если пользователь сохранит такую страницу, то относительная ссылка расширится до адреса http:// osu.cctpu.edu.ru/news.htm.

Тэг <LINK>

Тэг <LINK> можно применять:

<link rel="start" href="/" 
      type="text/html" title="Начало" />

<link rel="contents" href="/" 
      type="text/html" title="Оглавление" />

<link rel="stylesheet" href="/style.css" 
      type="text/css" media="all" />

<link rel="alternate stylesheet" href="/redstyle.css" 
      type="text/css" media="all" title="Красный раздел сайта" />

<link rel="alternate" href="/rss2" 
      type="application/rss+xml" title="RSS 2.0 Новости сайта"/>

Размещать элемент <LINK> нужно в разделе <HEAD> документа.

Форматирование текста

Логическое и физическое форматирование

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

Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг <CODE> ), цитата (тэг <СIТЕ> ), аббревиатура (тэг <ABBR> ) И Т. П.

С помощью тэгов <ЕМ> и <STRONG> можно, например, отметить отдельные фрагменты как выделенные,или сильно выделенные.Заметим, что речь идет о структурной разметке,которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической.

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

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

Например, для отображения фрагмента курсивом можно использовать тэг курсива <i>.

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

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

Тэги логического форматирования текста

Тэг <ABBR>

Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation).

Пример:

<p> 
  Язык 
  <abbr title="HTML — стандартный язык разметки документов во Всемирной паутине.">
    HTML
  </abbr>
  был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах 
  в стенах Европейского совета по  ядерным исследованиям в Женеве (Швейцария). 
  HTML создавался как язык для обмена научной и технической документацией,  
  пригодный для использования людьми, не являющимися специалистами в области вёрстки.
</p>

В браузере это будет выглядеть так:

Тэг <ACRONYM>

Тэг <ACRONYM>. Так же, как и тэг <ABBR>, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы,т. е. произносимые слова, состоящие из аббревиатур. Тэг <ACRONYM> возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.

Данный тэг удобно использовать в сочетании с параметром TITLE, в качестве значения которого можно указать полную версию аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом <ACRONYM>, будут выдавать полное наименование в виде появляющейся подсказки.

<ACRONYM TITLE="Томский Политехнический Университет"> ТПУ </ACRONYM>.

Тег H1...H6

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

<h1> Заголовок первого уровня </h1>
<h2> Заголовок второго уровня</h2>
<h3> Заголовок третьего уровня</h3>

В браузере это будет выглядеть так:

Тэг <СIТЕ>

Тэг <CITE> используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом.

<p>
  <cite>
    Нельзя сказать человеку: "Ты можешь творить. 
    Так давай, твори". Гораздо вернее подождать, пока он 
    сам не скажет: "Я могу творить, и я буду творить, хотите 
    вы этого или нет".
  </cite>
</p>
<p> Айзек Азимов</p>

Тэг <CODE>

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

<body> 
  <p>Код программы</p>
  <p>
    <code>
      function checkParent (src, dest) {<Br>
       while (src != null) {<Br>
        if (src.tagName == dest) return src<Br>
        src = src.parentElement<Br>
       }<Br>
       return null<Br>
      }
    </code>
  </p>
</body>

Тэг <DEL>

Тэг <DEL> отмечает свой текст как удаленный.Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тэг <DEL> может использоваться как элемент уровня текста и как элемент уровня блока.

Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента.

Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone).

Тэги физического форматирования текста

Тег <B>

Заключенные между этими тег имеет свойства жирного текста. Имеет атрибут title - позывает текст в виде всплывающей подсказки.

<b> Пример физического форматирования </b>

Тег <BIG>

Данный тег увеличивает размер отображения текста.Имеет атрибут title - позывает текст в виде всплывающей подсказки.

<big> Пример физического форматирования </big>

Тег <font>

Служит для выбора шрифта для текста. Атрибуты:

<font size = 4 color = red> 
  Пример физического форматирования 
</font>

Тег <HR>

Данный тег вставляет в страницу горизонтальную линию. Атрибуты:

<HR size = 1 width = 100 color = green>

Тег <i>

Данный тег позволяет сделать текст наклонным

<i> 
  Пример физического форматирования 
</i>

Тег <SMALL>

Уменьшает размер текста

<small> 
  Пример физического форматирования 
</small>

Тег <sub>

Данный тег приспускает текст

<sub> 
  Пример физического форматирования 
</sub>

Тег <sup>

Этот тег приподнимает текст

<sup> 
  Пример физического форматирования 
</sup>

Тэг <BLOCKQUOTE>

Бывают случаи, когда в текст HTML-документа необходимо включить какую-либо длинную цитату. Для выделения цитат из основного текста существует тэг <BLOCKQUOTE>. Он является контейнером и может содержать любые тэги форматирования.

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

<BLOCKQUOTE> Пример физического форматирования </BLOCKQUOTE>

Форматирование HTML-документа

Разделение на абзацы

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

Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.

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

Избежать этой неприятности позволяет применение специального тэга разделения на абзацы <р>. Перед началом каждого абзаца текста следует поместить тэг <Р>.

Браузеры обычно интерпретируют несколько стоящих подряд тэгов абзаца <Р> как один. То же самое относится и к тэгу перевода строки <BR>. Поэтому создать несколько пустых строк при помощи этих тэгов не удается.

Перевод строки

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

Тэги <NOBR> и <WBR>

Бывают ситуации, когда требуется выполнить операцию противоположного назначения - запретить перевод строки. Для этого существует тэг-контейнер <NOBR>. Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке, независимо от ее длины. Если при этом получающаяся строка будет выходить за пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки.

Размечая текст с помощью тэга неразрывной строки <NOBR> можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру читателя место возможного перевода строки, что будет выполнено только при необходимости (так называемый "мягкий" перевод строки). Это можно осуществить, поставив в нужном месте текста тэг <WBR> (Word BReak), который так же, как и тэг <BR>, не нуждается в закрывающем тэге.

Включение комментариев в документ

В HTML-документ можно включать комментарии, которые не будут видны читателю. Они могут состоять из произвольного числа строк и должны начинаться тэгом <!-- и заканчиваться тэгом -->. Все, что заключено внутри этих тэгов, при просмотре страницы не будет отображаться на экране.

Комментарии обычно используются авторами документа для заметок, предназначенных только для собственного использования. Заметим, что текст комментариев не отображается на экране браузера, однако передается вместе с документом и вполне может быть просмотрен читателями. Большинство браузеров предоставляют возможность просмотра исходного кода документа. Поэтому не следует включать в комментарии информацию, не предназначенную для чужих глаз. Это замечание может оказаться важным для разработчиков-программистов, привыкших писать комментарии в своих программах. Дело в том, что комментарии в программах, написанных на большинстве языков программирования, не попадают в результирующий код программы, получаемый в результате ее компиляции. Исходные же коды программ обычно хранятся только у авторов. Для языка же HTML нет понятия компиляции.

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

Существует еще один тэг-контейнер для записи комментариев - <COMMENT>. Этот тэг используется редко.

Ссылки на другие документы и файлы

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

Значение ссылок в мире Интернета трудно переоценить. Читая книгу, вы имеете ее всегда под рукой. Работая в Web-пространстве, вы часто понятия не имеете, где находится та или иная нужная вам страница. Поэтому ссылки здесь являются единственной возможностью перейти от одного документа к другому.

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

Организация ссылок

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

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

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

<А HREF="example .html">
 указатель ссылки 
</А>

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

<А HREF="example.html"> 
  <IMG SRC="picture.gif "> 
</A>

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

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

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

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

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

Тэг <А>

Тэг <А> имеет атрибут HREF, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </А>.

Указатель ссылки может быть относительным или абсолютным. Для облегчения работы с относительными указателями ссылок введен тэг <BASE>. Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг <BASE> отсутствует, то адресация строится относительно адреса текущего документа.

Внутренние ссылки

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

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

<A NAME=chapter_5> </A>

Обратите внимание, что в приведенном примере отсутствует содержимое тэга <A>. Обычно именно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение.

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

<А HREF="#chapter_5">chapter 5</A>

Теперь, если пользователь щелкнет кнопкой мыши на словах "chapter 5", браузер выведет соответствующую часть документа в окне просмотра.

Кроме того, ссылаться можно на любые тэги, имеющие атрибут id.

Ссылки на документы различных типов

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

Списки

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

В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный и список определений. Для реализации списков различных типов используются следующие тэги: <UL>, <OL>, <DL>. С помощью различных типов встроенных в документ списков могут быть реализованы самые разные возможности, описанию которых и посвящена данная глава. Рассматриваются особенности построения списков различных типов, а также применения вложенных друг в друга списков.

Маркированный список

Одним из типов списков, реализованных в языке HTML,является маркированный список. Иначе списки такого типа называют ненумерованными или неупорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тэга <ul>, с помощью которого и организуются списки такого типа в HTML-документах (UL — Unordered List, неупорядоченный список).

В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка.

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

Тэг <LI>

Для создания маркированного списка необходимо использовать тэг-контейнер, к примеру <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать тэги абзаца <р> или принудительного перевода строки <BR>.

Каждый элемент списка должен начинаться тэгом <li> (LI — List Item, элемент списка). Тэг <li> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.

Пример маркированного списка:

<p>
Самые кассовые фильмы:
   
<UL>
<li> Аватар </li>
<li> Титаник </li>
<li> Властелин колец: Возвращение короля</li>
<li> Пираты Карибского моря: Сундук мертвеца</li>
</UL> </p>

Тэг <OL>

Тег <OL> (Ordered List) служит для создания нумерованного списка. Допускается вложение нумерованного списка в списки другого вида.

Пример:

<p>
Самые кассовые фильмы:
   
<OL>
<li> Аватар </li>
<li> Титаник </li>
<li> Властелин колец: Возвращение короля</li>
<li> Пираты Карибского моря: Сундук мертвеца</li>
</OL> </p>

В данной лекции указан далеко не полный перечень HTML - тэгов. Более подробную информацию, а также примеры можно по адресу http://www.htmlbook.ru/html/