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

Списки – важный инструмент, они применяются для организации и группировки данных. Это может пригодиться при создании карты сайта (то есть его оглавления), описания сложных структур и других подобных объектов.

В HTML можно выделить несколько типов списков:

• маркированный;

• нумерованный;

• список определений.

Они отличаются по типам представления информации.

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

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

Для создания списков в HTML предусмотрен элемент UL, требующий наличия закрывающего тега. Пункты списка находятся внутри элемента UL. Каждый пункт начинается с элемента LI.

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

• circle – создает маркер в виде круга, белого внутри;

• square – создает маркер в виде квадрата;

• disc – создает маркер в виде круга, закрашенного черным цветом.

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

В листинге 2.5 представлен пример создания маркированных списков с разными маркерами.

• Венера
• Земля
• Юпитер
• Марс

• Венера
• Земля
• Юпитер
• Марс

• Венера
• Земля
• Юпитер
• Марс

Результат обработки кода из листинга 2.5 показан на рис. 2.5. Здесь видно, как выглядят разные маркеры списков.

Рис. 2.5. Маркированные списки

При создании маркированных списков с помощью элемента LI можно задать вид маркера отдельно для каждого пункта списка.

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

• Земля
• Марс
• Солнце
• Венера
• Луна

Результат обработки браузером кода из листинга 2.6 представлен на рис. 2.6.

Рис. 2.6. Список с разными маркерами

В примере различные маркеры отмечают объекты разных типов.

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

В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместо элемента LI подставить картинку с желаемым изображением. Элемент UL укажет браузеру, что надо сделать отступ, а с помощью элемента BR можно перенести строку.

В листинге 2.7 представлен пример создания списка с графическими маркерами.

Венера


Марс


Земля

Результат обработки кода из листинга 2.7 показан на рис. 2.7.

Рис. 2.7. Список с графическими маркерами

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

Нумерованный список

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

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

Для создания упорядоченных списков применяется элемент OL, которому требуется наличие закрывающего тега, а все пункты списка находятся внутри этого элемента.

У элемента OL есть атрибут type, который задает формат символов, используемых для нумерации.

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

• A – заглавных букв латинского алфавита;

• a – строчных букв латинского алфавита;

• I – заглавных римских цифр;

• i – строчных римских цифр;

• 1 – арабских цифр.

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

В листинге 2.8 приведен пример кода для создания упорядоченных списков с разной нумерацией.

6. Достать ключ
7. Вставить ключ в замочную скважину
8. Повернуть ключ по часовой стрелке на два оборота
9. Достать ключ из замка
10. Открыть дверь

1. Достать ключ
2. Вставить ключ в замочную скважину
3. Повернуть ключ по часовой стрелке на два оборота
4. Достать ключ из замка
5. Открыть дверь

1. Достать ключ
2. Вставить ключ в замочную скважину
3. Повернуть ключ по часовой стрелке на два оборота
4. Достать ключ из замка
5. Открыть дверь

1. Достать ключ
2. Вставить ключ в замочную скважину
3. Повернуть ключ по часовой стрелке на два оборота
4. Достать ключ из замка
5. Открыть дверь

1. Достать ключ
2. Вставить ключ в замочную скважину
3. Повернуть ключ по часовой стрелке на два оборота
4. Достать ключ из замка
5. Открыть дверь

Фрагмент отображения в браузере кода из листинга 2.8 показан на рис. 2.8.

Рис. 2.8. Упорядоченные списки

В примере созданы списки с различными типами нумерации, для списка с арабской нумерацией задан стартовый номер 6.

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

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

10. Закрой дверь
11. Сходи в магазин
1. Открой дверь
2. Возьми деньги
3. Иди налево
4. Потом поверни направо
5. Увидишь магазин

Результат обработки листинга 2.9 представлен на рис. 2.9.

Рис. 2.9. Упорядоченный список с разной нумерацией

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

Список определений

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

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

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

Для организации списков определений служит элемент DL – внутри него будут находиться определение и описание термина. У этого элемента нет атрибутов, кроме стандартных style и class, с помощью которых к данному определению можно подключить стили.

Чтобы внести информацию внутрь элемента DL, нужно задать элементы DT и DD. Первый используется для того, чтобы задать определение; у него нет никаких особенных атрибутов.

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

В листинге 2.10 представлен пример создания списков определений.

Земля

Третья планета Солнечной системы

Марс

Четвертая планета Солнечной системы

Результат работы кода из листинга 2.10 показан на рис. 2.10.

Рис. 2.10. Списки определений

На рис. 2.10 видны особенности форматирования списков определений; информацию в таком виде гораздо проще воспринимать.

Создание вложенных списков

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

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

В листинге 2.11 представлен код для создания вложенного списка.

1. Открой дверь

   • Ключом
   • Отмычкой

2. Зайди в квартиру

   • Тихо шагая
   • Громко топая

3. Ложись спать

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

Рис. 2.11. Вложенный список

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

Мы разобрались с большей частью оформления текста, правда, осталось самое главное – то, на чем основан Интернет, – ссылки.

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

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

Внешние ссылки

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

Основой внешних ссылок является URL-адрес объекта, на который вы собираетесь сослаться.

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

Адрес документа для перехода записывается в элементе A в качестве значения атрибута href. Таким образом, перемещение по сайту становится удобным, легким и прозрачным для пользователя. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.

В листинге 2.12 представлен пример создания ссылки на HTML-страницу и рисунок.

Обо мне

Мое фото

Пример отображения ссылок в браузере показан на рис. 2.12.

Рис. 2.12. Ссылки

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

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

Что же делать, если нужно организовать быстрое перемещение в рамках одной страницы? Здесь тоже помогут ссылки.

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

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

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

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

Затем нужно создать ссылку на эту метку. Ссылка на внутреннюю метку создается так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой страницы надо ввести адрес метки в виде #met1. При этом metl – имя вашей метки.

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

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

Это метка для перехода 2

Щелкните кнопкой мыши для перехода к метке 1

Щелкните кнопкой мыши для перехода к метке 2

Это метка для перехода 1

Представление внутренних ссылок в браузере показано на рис. 2.13.

Рис. 2.13. Внутренние ссылки

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

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

Общие моменты

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

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

Следующие значения атрибута target указывают, что страница загружается:

• _blanc – в новое окно браузера;

• _parent – во фрейм-родитель;

• _self – в текущее окно;

• _top – в полное окно браузера.

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

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

В листинге 2.14 представлен пример создания ссылок с рассмотренными выше атрибутами.

Обо мне

На рис. 2.14 показан пример отображения ссылки со всплывающей подсказкой.

Рис. 2.14. Ссылки с дополнительными атрибутами

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

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

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

В листинге 2.15 показан пример создания ссылки-изображения.

На рис. 2.15 показано, как браузер отображает ссылки-изображения.

Рис. 2.15. Ссылка-изображение

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

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

Теперь рассмотрим, как можно влиять на внешний вид текста на странице.

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

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

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

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

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

Начнем рассмотрение способов форматирования текста с использования логических элементов.

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

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

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

Элемент ABBR определяет текст как аббревиатуру. С помощью атрибута title можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте title.

Пример:

НИИ

Элемент ACRONYM указывает, что текст является акронимом.

Атрибут title позволяет задать расшифровку акронима. Пример:

СНГ

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

Пример:

Здесь указан источник информации

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

Пример:

Зададим функцию func(int a, char b);

Элемент DEL помечает текст как удаленный и может использоваться при внесении изменений в документы. У этого элемента есть два атрибута: cite должен содержать URL документа, в котором описаны причины удаления фрагмента, а datetime – дату и время удаления фрагмента в формате ГГГГ-ММ-ДДTчч: мм: ccTZD (аббревиатура от Time Zone region with Daylight Saving Time – регион часового пояса с летним временем). Браузеры такой текст отображают как зачеркнутый.

Пример:

Неактуальный фрагмент

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

Пример:

Определение-описание

Элемент EM выделяет важные фрагменты текста. Браузер отображает такой текст курсивом.

Пример:

Важно

Элемент INS отмечает текст как вставку и применяется для выделения изменений, вносимых в документ. У этого элемента есть два атрибута: cite должен содержать URL документа, в котором описаны причины добавления фрагмента, а datetime должен содержать дату и время добавления в формате ГГГГ-ММ-ДДTчч: мм: ссTZD. Браузеры отображают такой текст как подчеркнутый.

Пример:

Новый фрагмент

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

Пример:

Введите слово дом

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

Пример:

Цитата: Как сказал поэт

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

Пример:

Образец

Элемент STRONG предназначен для постановки акцента на тексте. Браузеры выделяют такой текст полужирным шрифтом.

Пример:

Очень важный фрагмент

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

Пример:

Введите переменную X

В листинге 2.16 показан код страницы с различным форматированием текста.

НИИ

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

СНГ

Здесь указан источник информации

Зададим функцию func(int a, char b);

Неактуальный фрагмент

Определение-описание

Важно

Новый фрагмент

Введите слово дом

Цитата: Как сказал поэт

Образец

Очень важный фрагмент

Введите переменную X

Результат обработки браузером кода из листинга 2.16 показан на рис. 2.16.

Рис. 2.16. Логическое форматирование текста

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

Физические элементы для форматирования

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

Элемент B задает полужирное написание шрифта.

Пример:

Полужирный шрифт

Элемент I отображает выделенный текст курсивом.

Пример:

Курсив

Этот элемент задает моноширинное написание текста.

Пример:

Моноширинный шрифт

Элемент U отображает текст подчеркнутым шрифтом.

Пример:

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

Элемент S зачеркивает текст горизонтальной линией.

Пример:

Зачеркнутый

Этот элемент также зачеркивает текст горизонтальной линией.

Пример:

Снова зачеркнутый

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

При вложении элементов размер шрифта будет увеличиваться на единицу каждый раз.

Пример:

Шрифт побольше Еще больше

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

Пример:

Шрифт поменьше

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

Пример:

_{Подстрочный} шрифт

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

Пример:

^{Надстрочный} шрифт

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

Пример:

Текст с фоном

В листинге 2.17 представлен код страницы с различным форматированием текста.

Полужирный шрифт

Курсив

Моноширинный шрифт

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

Зачеркнутый

Снова зачеркнутый

Шрифт побольше Еще больше

Шрифт поменьше

_{Подстрочный} шрифт

^{Надстрочный} шрифт

Текст с фоном

Результат обработки браузером кода из листинга 2.17 представлен на рис. 2.17.

Рис. 2.17. Физическое форматирование

На рис. 2.17 видно, что любой физический элемент форматирования изменяет вид текста, потому что именно это является его функцией.

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

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

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

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

Элементы для форматирования больших блоков текста

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

Начнем рассмотрение с элемента, напрямую отвечающего за параметры шрифта.

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

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

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

За размер шрифта отвечает атрибут size. Значение задается в относительных величинах, то есть 2 или 6. По умолчанию используется размер 3. При этом можно задать размер шрифта относительно остального текста. Для этого нужно сначала указать +, если необходимо, чтобы размер шрифта на данном участке был больше, чем основной текст, или —, если требуется обратное форматирование. После знака надо указать количество пунктов, на которое текст должен быть больше или меньше.

За цвет шрифта отвечает атрибут color, значением которого должно быть либо ключевое слово, обозначающее имя цвета, либо код цвета в формате #RRGGBB.

В листинге 2.18 показан пример кода для определения параметров текста с помощью элемента FONT.

Результат вывода на экран кода из листинга 2.18 показан на рис. 2.18.

Рис. 2.18. Использование элемента FONT

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

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

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

Единственное, что вы можете сделать с помощью HTML, – выровнять текст в блоке с помощью атрибута align и создать всплывающую подсказку для блока с помощью атрибута title.

В листинге 2.19 представлен пример кода для выделения текста с помощью элемента DIV.

Результат обработки кода из листинга 2.19 показан на рис. 2.19.

Рис. 2.19. Использование элемента DIV

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

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

При использовании этого элемента текст выводится моноширинным шрифтом. Элемент PRE часто используют для вывода кодов программ. Внутри этого элемента можно применять большинство элементов форматирования текста.

В листинге 2.20 приведен пример использования элемента PRE.

Здесь
можно
расположить
код
программы

На рис. 2.20 показано, как текст, расположенный между тегами элемента PRE, выглядит в браузере.

Рис. 2.20. Использование элемента PRE

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

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

В листинге 2.21 представлен пример выделения цитаты с помощью элемента BLOCKQUOTE.

Здесь можно расположить важную и большую цитату.

На рис. 2.21 показано, как в браузере выглядит текст из элемента BLOCKQUOTE.

Рис. 2.21. Использование элемента BLOCKQUOTE

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

Вложение элементов

Язык HTML позволяет вкладывать элементы форматирования друг в друга. При этом их действия суммируются. Если вложить в элемент B элемент I, то получится текст, написанный полужирным курсивом. При этом нужно следить за правильным закрытием элементов: тот, что открыт раньше, закрывается позже.

В листинге 2.22 показаны примеры правильного и неправильного вложения элементов.

Это неправильное вложение элементов

Это правильное вложение элементов

Неправильную запись некоторые браузеры могут отображать некорректно.