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

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

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

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

Элемент FONT

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

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

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

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

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

Совет

Код цвета можно посмотреть в любом графическом редакторе.

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

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

<html>

<head>

<title>Элемент FONT</title>

<body>

<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif" size="+2">

Текст красного цвета с размером +2

</font><br />

<font color="#FF00FF" face="Verdana, Arial, Helvetica, sans-serif" size="-4">

Текст фиолетового цвета с размером –4

</font><br />

</body>

</html>

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

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

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

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

Элемент DIV

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

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

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

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

<html>

<head>

<title>Элемент DIV</title>

<body>

<div style="cursor:crosshair" align="center">

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

</div>

</body>

</html>

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

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

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

Элемент PRE

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

Примечание

Обычно в HTML несколько пробелов подряд воспринимаются как один пробел.

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

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

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

<html>

<head>

<title>Элемент PRE</title>

<body>

<pre>

Здесь

можно

расположить

код

программы

</pre>

</body>

</html>

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

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

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

Элемент BLOCKQUOTE

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

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

Листинг 2.21. Ввод больших цитат

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Элемент BLOCKQUOTE</title>

<body>

<blockquote>

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

</blockquote>

</body>

</html>

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

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

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

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

1.3.3 Элементы конструкционных блоков

Из книги Архитектура операционной системы UNIX автора Бах Морис Дж

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


Урок 5.3. Основы форматирования текста

Из книги Компьютер на 100. Начинаем с Windows Vista автора Зозуля Юрий

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


§ 2.3 Элементы описания книги. Базовые структурные элементы

Из книги Создание электронных книг в формате FictionBook 2.1: практическое руководство [Release 1.01 от 28.II.2010 г.] автора Кондратович Михаил Иосифович

§ 2.3 Элементы описания книги. Базовые структурные элементы В самом начале любого файла книги идет признак формата XML<?xml version="1.0" encoding="windows-1251"?>Здесь указана сигнатура принадлежности к формату XML, его версия и кодировка файла. Для русскоязычных FictionBook это обычно windows-1251


§ 2.4 Элементы описания книги (description). Элементы первого уровня

Из книги XSLT автора Хольцнер Стивен

§ 2.4 Элементы описания книги (description). Элементы первого уровня Элемент title-infoСодержит базовую информацию о книге (заголовок, информация об авторе и переводчике, аннотация, вхождение в серию и т.д.)Cинтаксис: <title-info>content</title-info>.Используется в элементах: descriptionВложенные


§ 2.5 Элементы описания книги (description). Элементы второго уровня

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

§ 2.5 Элементы описания книги (description). Элементы второго уровня Элемент genreЖанр произведения.Содержимое элемента строго фиксировано и определяется файлом FictionBookGenres.xsd, входящим в состав спецификации FictionBook.Список жанров с переводом приведен в Приложении В.Cинтаксис:


§ 2.6 Элементы описания книги (description). Элементы третьего уровня (информация об авторе)

Из книги Продвижение порталов и интернет-магазинов автора Гроховский Леонид О.

§ 2.6 Элементы описания книги (description). Элементы третьего уровня (информация об авторе) Элемент first-nameИмя автора книги или документа, а также переводчика.Cинтаксис: <first-name>текст</first-name>Используется в элементах: author, translatorВложенные элементы: нетКоличество вхождений:


§ 2.8 Элементы раздела книги (section). Элементы первого уровня.

Из книги автора

§ 2.8 Элементы раздела книги (section). Элементы первого уровня. Элемент citeЦитата. Отрывок текста из другого произведения.В FictionBook с помощью тэга cite также выделяются письма, записки, надписи, списки и еще много чего.Cинтаксис: <cite>content</cite>Используется в элементах: section,


§ 2.9 Элементы раздела книги (section). Элементы второго уровня.

Из книги автора

§ 2.9 Элементы раздела книги (section). Элементы второго уровня. Элемент stanzaСтрофа стихотворения.Cинтаксис: stanza>content</stanza>Используется в элементах: poemВложенные элементы: title, subtitle, vКоличество вхождений: одно и болееАтрибуты: нетВерсия формата: 2.0Пример: см. пример


§ 2.11 Элементы абзаца (стилевые, они же inline элементы)

Из книги автора

§ 2.11 Элементы абзаца (стилевые, они же inline элементы) Элемент aСсылка или сноска.Cинтаксис: <a>content</a>Используется в элементах: code, emphasis, p, strikethrough, strong, style, subtitle, sub, sup, th, td, vВложенные элементы:     code, emphasis, strikethrough, strong, style, sub, sup, imageКоличество вхождений:


Размещение текста при помощи контейнеров блоков:

Из книги автора

Размещение текста при помощи контейнеров блоков: <fo:block-container> Процессоры XSL-FO в одном отношении похожи на браузеры HTML: они вставляют блоки в «поток» (flow) страницы, что означает, что эти блоки могут перемещаться по документу, как в HTML-браузере. С другой стороны, иногда


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

Из книги автора

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


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

Из книги автора

Физические элементы для форматирования Физические элементы для форматирования сообщают браузеру, как должен выглядеть текст, расположенный внутри элемента.Элемент BЭлемент B задает полужирное написание шрифта.Пример:<b>Полужирный шрифт</b>Элемент IЭлемент I


Наполнение больших каталогов

Из книги автора

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