2.1. Создание заголовков
2.2. Создание абзацев
2.3. Создание обрывов строк
2.4. Создание списков
2.5. Ссылки
2.6. Форматирование текста
Ввод текстовой информации на сайт осуществляется внутри элемента BODY. Однако чаще всего простое расположение текста внутри элемента BODY неприемлемо, необходимо его оформлять, например разделять на абзацы или создавать заголовки. Для оформления текста HTML предоставляет много возможностей: для любого абзаца или заголовка можно задать уникальный внешний вид. Язык HTML также позволяет создавать списки с маркерами любого типа. Можно менять цвет, размер и шрифт текста. В общем, у создателя сайта есть возможность оформить свой текст очень красочно.
Сначала рассмотрим общие принципы структурного форматирования текста, а затем перейдем непосредственно к управлению его внешним видом. При изучении материала этой главы следует помнить, что в новейшей версии языка XHTML форматировать текстовую информацию предлагается с помощью языка CSS, который мы будем изучать в гл. 7–9. Тем не менее содержимое главы весьма важно для практической работы, поскольку вам еще не раз придется столкнуться с многочисленными веб-страницами, оформленными согласно устаревшим средствам, ведь они применялись много лет и на их основе было создано огромное количество документов.
2.1. Создание заголовков
Заголовки – важный элемент сайта, они помогают систематизировать текст. В HTML доступно создание заголовков разных уровней, поэтому очень легко выделять смысловые темы и подтемы. Текст, находящийся в заголовках, влияет на индексацию сайта поисковыми системами, так как многие роботы при поиске обращают внимание на содержимое заголовков, имеющихся на сайте.
В HTML можно создавать заголовки шести уровней. Самым важным считается заголовок первого уровня, а самым малозначимым – шестого.
Заголовки создаются с помощью элементов H1, H2, H3, H4, H5, H6. По умолчанию заголовок самого верхнего уровня выделяется самым крупным шрифтом, и чем ниже уровень заголовка, тем меньше шрифт.
Для заголовка любого СѓСЂРѕРІРЅСЏ можно задать выравнивание РїРѕ горизонтали. Рто делается СЃ помощью атрибута align.
Значения атрибута align:
• left – по левому краю;
• right – по правому краю;
• center – по центру;
• justify – по ширине (только для заголовков длиннее строки).
Для заголовков можно задать атрибут title, значение которого – текст всплывающей подсказки, появляющейся при наведении указателя мыши на заголовок.
В листинге 2.1 представлен пример кода для создания разных типов заголовков и для их различного выравнивания.
Листинг 2.1. Заголовки
Заголовок 1 уровня
Заголовок 2 уровня
Заголовок 3 уровня
Заголовок 4 уровня
Заголовок 5 уровня
Заголовок 6 уровня
На рис. 2.1 показан результат обработки листинга 2.1 браузером.
Рис. 2.1. Вид заголовков
На рис. 2.1 видно различие между заголовками разного размера. В принципе, придать тексту подобный вид можно с помощью управления обычным текстом, но, поскольку поисковики воспринимают текст заголовков как важный, имеет смысл для выделения важной информации использовать именно элементы заголовков.
При отображении заголовок всегда начинается с новой строки, а после него всегда идет новая строка – это отделяет заголовок от остального текста.
Для управления другими моментами отображения заголовков, например цветом или шрифтом, используется CSS. Поэтому в элементах H1-H6 разрешено использовать атрибуты style и class, которые подключают стили.
После того как заголовки созданы, можно добавить к ним немного обычного текста, который нужно логически разбить на абзацы.
2.2. Создание абзацев
Абзацы, как известно, делят текст на логические части и на письме выделяются отступом от края листа. В HTML абзацы отделяются друг от друга расстоянием в одну строку.
Для организации абзацев РІ HTML предусмотрен элемент P, который подразумевает наличие закрывающего тега. Рлемент P, наверное, является самым востребованным – наибольшее количество текста, представленного РІ Рнтернете, находится внутри элемента P.
Для управления внешним видом текста абзацев в основном используются таблицы стилей, однако небольшое редактирование можно выполнить и с помощью HTML.
Для элемента P можно задать атрибут, определяющий выравнивание. Он называется align и может принимать следующие значения.
• center – выравнивание по центру. При таком виде выравнивания текст прижимается к центру экрана, образуя рваные края. Не стоит использовать подобное выравнивание для текста большого объема, потому что его будет неудобно читать.
• left – выравнивание РїРѕ левому краю. Текст прижимается Рє левому краю РѕРєРЅР° браузера, Р° справа остаются неровные края. Рто самый обычный РІРёРґ выравнивания, текст такого РІРёРґР° достаточно легок для чтения.
• right – выравнивание по правому краю. Текст прижимается к правому краю экрана, образуя неровные края слева. Такое выравнивание подойдет небольшим эпиграфам. Читать большой текст, выровненный таким образом, будет неудобно.
• justify – выравнивание РїРѕ ширине. Пробелы между словами автоматически регулируются таким образом, чтобы текст прижимался Рє левому Рё правому краям РѕРєРЅР°. Ртот РІРёРґ выравнивания является наилучшим для больших объемов текста, отсутствие рваных краев слева Рё справа придает ему аккуратный РІРёРґ.
Кроме выравнивания, для абзаца можно задать всплывающую подсказку, которая появляется при наведении указателя мыши на текст. Подсказка создается с помощью атрибута title, значением которого является текст подсказки.
В листинге 2.2 приведен пример создания абзацев с разным выравниванием и всплывающими подсказками.
Листинг 2.2. Создание абзацев
Рто небольшой заголовочный абзац, выровненный РїРѕ центру
Здесь эпиграф
Ртот абзац СЃ текстом выровнен РїРѕ левому краю, поэтому края СЃ правого края Р±СѓРґСѓС‚ рваными
Ртот абзац СЃ основным текстом, выровненный РїРѕ ширине. Края этого абзаца прилегают Рє краям РѕРєРЅР° браузера
На рис. 2.2 показан результат обработки листинга 2.2, где видно различие между абзацами с разным выравниванием.
Рис. 2.2. Оформление абзацев
Для дальнейшего оформления текста абзацев используют каскадные таблицы стилей, для этого элемент P допускает использование атрибутов style и class.
2.3. Создание обрывов строк
С оформлением абзаца все понятно. Что же делать, если возникает необходимость оборвать строку, не закрывая абзац, например в том же эпиграфе для записи стихов?
В HTML есть возможность перенести текст на новую строку, не заканчивая абзац. Обычно браузер переносит слова в зависимости от размера окна, и возможность самостоятельно определить место переноса может пригодиться при записи стихов или для отделения различных элементов друг от друга.
Для переноса текста на новую строку служит элемент BR, он не требует закрывающего тега, однако рекомендуется записывать его открывающий тег как
, чтобы все программы отображали его корректно.
В листинге 2.3 представлен пример кода для принудительного переноса строки.
Листинг 2.3. Обрыв строки
Наша Таня громко плачет,
Уронила в речку мячик.
На рис. 2.3 представлен результат обработки браузером кода из листинга 2.3.
Рис. 2.3. Обрыв строки
РР· СЂРёСЃ.В 2.3 РІРёРґРЅРѕ, что РїСЂРё использовании элемента BR пустая строка после переноса РЅРµ добавляется.
Есть еще один вариант применения элемента BR. Его используют, когда нужно задать обтекание текстом таблицы, изображения или любого другого плавающего элемента страницы (то есть элемента, для которого задан атрибут align).
Для этого применяют атрибут clear элемента BR. Атрибут может принимать следующие значения:
• all – запрещает обтекание элемента с двух сторон;
• left – запрещает обтекание с левой стороны плавающего объекта, расположенного после элемента BR;
• right – запрещает обтекание с правой стороны плавающего объекта, расположенного после элемента BR;
• none – отменяет свойство.
Если обтекание запрещено, то текст, следующий за элементом BR, будет отображаться на строке после плавающего объекта.
Кроме обязательного переноса строки, иногда нужно использовать обратное действие, то есть гарантировать, что текст не будет перенесен на новую строку ни в коем случае. Для создания таких неразрывных строк предназначен элемент NOBR, который требует наличия закрывающего тега. Текст, расположенный внутри элемента, будет размещаться в одной строке. При необходимости браузер создаст горизонтальную полосу прокрутки.
РРЅРѕРіРґР° строка может оказаться очень длинной Рё неудобной для чтения, поэтому внутри элемента NOBR можно использовать элемент WBR, который указывает место для возможного переноса строки.
В листинге 2.4 представлен пример использования элементов NOBR и WBR.
Листинг 2.4. Запрет переноса строки
На рис. 2.4 показано отображение в браузере кода из листинга 2.4.
Рис. 2.4. Запрет переносов
Как видно на рис. 2.4, браузер создал горизонтальную полосу прокрутки и перенес строку в том месте, где было разрешено.
Возможность управлять переносами в браузере позволяет контролировать общий вид страницы, но нужно внимательно следить за тем, как браузер организовал переносы.
2.4. Создание списков
Простые списки можно создать с помощью обрывов страниц, но HTML предлагает для этого лучший инструмент.
РЎРїРёСЃРєРё – важный инструмент, РѕРЅРё применяются для организации Рё РіСЂСѓРїРїРёСЂРѕРІРєРё данных. Рто может пригодиться РїСЂРё создании карты сайта (то есть его оглавления), описания сложных структур Рё РґСЂСѓРіРёС… подобных объектов.
В HTML можно выделить несколько типов списков:
• маркированный;
• нумерованный;
• список определений.
Они отличаются по типам представления информации.
Маркированный список
Маркированные СЃРїРёСЃРєРё – это СЃРїРёСЃРєРё, РІ которых пункты отмечаются СЃ помощью различных символов. Такие СЃРїРёСЃРєРё еще называют ненумерованными, или неупорядоченными, потому что для элементов данного СЃРїРёСЃРєР° последовательность неважна. Рти СЃРїРёСЃРєРё можно использовать для простого перечисления объектов или РёС… свойств.
Для создания списков в HTML предусмотрен элемент UL, требующий наличия закрывающего тега. Пункты списка находятся внутри элемента UL. Каждый пункт начинается с элемента LI.
У элемента UL есть атрибут type, определяющий вид маркера списка. Он может принимать следующие значения:
• circle – создает маркер в виде круга, белого внутри;
• square – создает маркер в виде квадрата;
• disc – создает маркер в виде круга, закрашенного черным цветом.
Маркер можно выбирать любой, на ваш взгляд наиболее соответствующий виду страницы.
В листинге 2.5 представлен пример создания маркированных списков с разными маркерами.
Листинг 2.5. Маркированные списки
- Венера
- Земля
- Юпитер
- Марс
- Венера
- Земля
- Юпитер
- Марс
- Венера
- Земля
- Юпитер
- Марс
Результат обработки кода из листинга 2.5 показан на рис. 2.5. Здесь видно, как выглядят разные маркеры списков.
Рис. 2.5. Маркированные списки
При создании маркированных списков с помощью элемента LI можно задать вид маркера отдельно для каждого пункта списка.
В листинге 2.6 приведен пример создания списка с разными маркерами для различных пунктов.
Листинг 2.6. Список с разными маркерами
- Земля
- Марс
- Солнце
- Венера
- Луна
Результат обработки браузером кода из листинга 2.6 представлен на рис. 2.6.
Рис. 2.6. Список с разными маркерами
В примере различные маркеры отмечают объекты разных типов.
РРЅРѕРіРґР° удобнее создавать СЃРІРѕРё маркеры для СЃРїРёСЃРєРѕРІ, РІ этом случае внешний РІРёРґ СЃРїРёСЃРєРѕРІ будет намного лучше соответствовать стилю вашего сайта Рё вашим желаниям.
Р’ HTML есть возможность создать СЃРїРёСЃРѕРє СЃ графическими маркерами. Для этого нужно вместо элемента LI подставить картинку СЃ желаемым изображением. Рлемент UL укажет браузеру, что надо сделать отступ, Р° СЃ помощью элемента BR можно перенести строку.
В листинге 2.7 представлен пример создания списка с графическими маркерами.
Листинг 2.7. Список с графическими маркерами
Венера
Марс
Земля
Результат обработки кода из листинга 2.7 показан на рис. 2.7.
Рис. 2.7. Список с графическими маркерами
Теперь можно использовать картинки для создания симпатичных списков, соответствующих стилю вашего сайта.
Нумерованный список
Однако использование неупорядоченных списков не всегда допустимо. Что делать, если нужно расписать порядок действий, например рецепт приготовления блюда? Для перечисления ингредиентов можно использовать неупорядоченный список, а для описания порядка действий понадобится пронумерованный список.
Нумерованные списки применяются, когда порядок следования пунктов списка имеет большое значение, например при описании алгоритмов или других пошаговых действий. Особенностью списков этого типа является то, что все их элементы упорядочены.
Для создания упорядоченных списков применяется элемент OL, которому требуется наличие закрывающего тега, а все пункты списка находятся внутри этого элемента.
У элемента OL есть атрибут type, который задает формат символов, используемых для нумерации.
Следующие значения атрибута type указывают, что пункты будут нумероваться с помощью:
• A – заглавных букв латинского алфавита;
• a – строчных букв латинского алфавита;
• I – заглавных римских цифр;
• i – строчных римских цифр;
• 1 – арабских цифр.
Вторым атрибутом элемента OL является атрибут start, указывающий, с какого числа начинать нумерацию всего списка.
В листинге 2.8 приведен пример кода для создания упорядоченных списков с разной нумерацией.
Листинг 2.8. Упорядоченные списки
- Достать ключ
- Вставить ключ в замочную скважину
- Повернуть ключ по часовой стрелке на два оборота
- Достать ключ из замка
- Открыть дверь
- Достать ключ
- Вставить ключ в замочную скважину
- Повернуть ключ по часовой стрелке на два оборота
- Достать ключ из замка
- Открыть дверь
- Достать ключ
- Вставить ключ в замочную скважину
- Повернуть ключ по часовой стрелке на два оборота
- Достать ключ из замка
- Открыть дверь
- Достать ключ
- Вставить ключ в замочную скважину
- Повернуть ключ по часовой стрелке на два оборота
- Достать ключ из замка
- Открыть дверь
- Достать ключ
- Вставить ключ в замочную скважину
- Повернуть ключ по часовой стрелке на два оборота
- Достать ключ из замка
- Открыть дверь
Фрагмент отображения в браузере кода из листинга 2.8 показан на рис. 2.8.
Рис. 2.8. Упорядоченные списки
В примере созданы списки с различными типами нумерации, для списка с арабской нумерацией задан стартовый номер 6.
При создании упорядоченных списков на элемент LI можно возложить дополнительные функции. Как и в примере с маркированными списками, в элементе LI можно задать вид нумерации конкретного пункта с помощью атрибута type. Помимо этого, с помощью атрибута value можно задать номер, с которого будет продолжена нумерация списка.
В примере из листинга 2.9 представлен код для создания списка с разными типами нумерации и различным порядком следования элементов.
Листинг 2.9. Список с разными типами нумерации
- Закрой дверь
- Сходи в магазин
- Открой дверь
- Возьми деньги
- РРґРё налево
- Потом поверни направо
- Увидишь магазин
Результат обработки листинга 2.9 представлен на рис. 2.9.
Рис. 2.9. Упорядоченный список с разной нумерацией
Как видно из примера, порядок нумерации и тип ее отображения отделены друг от друга, изменение типа чисел не влияет на числовое обозначение пунктов.
Список определений
Бывает, что РЅР° сайте нужно создать СЃРїРёСЃРѕРє терминов или словарь. Рто особенно актуально для сайтов СѓР·РєРѕР№ направленности. Для создания подобных конструкций служит СЃРїРёСЃРѕРє определений.
Список определений – это особый вид списка, который применяется для форматирования словарей или когда необходимо пояснять значения терминов.
Особенность списка определений следует из его функций: элемент такого списка всегда состоит из двух частей. Первая часть задает определяемое слово, а вторая – описание или расшифровку термина. При этом форматирование производится таким образом, что описание термина отображается с отступом от края экрана и, возможно, с пропуском строки от определения.
Для организации списков определений служит элемент DL – внутри него будут находиться определение и описание термина. У этого элемента нет атрибутов, кроме стандартных style и class, с помощью которых к данному определению можно подключить стили.
Чтобы внести информацию внутрь элемента DL, нужно задать элементы DT и DD. Первый используется для того, чтобы задать определение; у него нет никаких особенных атрибутов.
Второй применяется для описания термина из элемента DT. Особых атрибутов в нем также не предусмотрено. Чтобы изменить вид информации, представленной в этом элементе, нужно использовать таблицы стилей.
В листинге 2.10 представлен пример создания списков определений.
Листинг 2.10. Списки определений
- Земля
- Третья планета Солнечной системы
- Марс
- Четвертая планета Солнечной системы
Результат работы кода из листинга 2.10 показан на рис. 2.10.
Рис. 2.10. Списки определений
На рис. 2.10 видны особенности форматирования списков определений; информацию в таком виде гораздо проще воспринимать.
Создание вложенных списков
Возможностей простых списков часто не хватает. Например, при создании оглавлений не обойтись без вложенных пунктов. Поэтому рассмотрим создание вложенных списков.
В HTML можно комбинировать и вкладывать друг в друга списки разных типов, но при этом нужно внимательно следить за тем, где заканчивается вложенный список, а где список верхнего уровня, иначе будут проблемы с отображением информации.
В листинге 2.11 представлен код для создания вложенного списка.
Листинг 2.11. Вложенные списки
-
Открой дверь
- Ключом
- Отмычкой
-
Зайди в квартиру
- Тихо шагая
- Громко топая
- Ложись спать
На рис. 2.11 можно увидеть, как выглядит вложенный список.
Рис. 2.11. Вложенный список
Видно, что элементы внутренних списков отступают от элементов списка более высокого уровня.
РњС‹ разобрались СЃ большей частью оформления текста, правда, осталось самое главное – то, РЅР° чем основан Рнтернет, – ссылки.
2.5. Ссылки
РџРѕ своей сути Рнтернет – это текст Рё ссылки. Ссылки связывают документы, разбросанные РїРѕ всему Рнтернету, РІ РѕРґРЅСѓ сеть. Ваш сайт может находиться РЅР° разных компьютерах, РЅРѕ для посетителя РѕРЅ будет казаться единым целым, Рё РІСЃРµ это благодаря ссылкам.
Можно выделить два типа ссылок: внешние и внутренние. Первые связывают страницы в один сайт и помогают передвигаться по нему. Вторые помогают передвигаться в рамках одной страницы.
Внешние ссылки
Внешними называют ссылки РЅР° объекты, расположенные РІРЅРµ текущей страницы. Рто РјРѕРіСѓС‚ быть картинки, РґСЂСѓРіРёРµ страницы сайта, мультимедийные приложения.
Основой внешних ссылок является URL-адрес объекта, на который вы собираетесь сослаться.
Для создания гиперссылок в HTML служит элемент A, который требует наличия закрывающего тега. Внутри элемента располагается текст, который будет выделен как ссылка. На самом деле, чтобы сообщить человеку, что в каком-то месте сайта у вас расположена ссылка, совершенно не обязательно писать прямым текстом адрес следующей страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки. Получается, что у вас отдельно есть текст ссылки, который должен внятно описывать, что пользователь увидит, перейдя по ней, и отдельно находится адрес страницы, на которую будет сделан переход при щелчке кнопкой мыши на ссылке. Между тегами и располагается именно текст ссылки.
Адрес документа для перехода записывается в элементе A в качестве значения атрибута href. Таким образом, перемещение по сайту становится удобным, легким и прозрачным для пользователя. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.
В листинге 2.12 представлен пример создания ссылки на HTML-страницу и рисунок.
Листинг 2.12. Создание ссылок
Пример отображения ссылок в браузере показан на рис. 2.12.
Рис. 2.12. Ссылки
Текст ссылки отображается подчеркнутым, а указатель мыши меняет вид при наведении на ссылку.
Когда посетитель сайта щелкнет кнопкой мыши на ссылке, он перейдет на страницу, которая указана в качестве адреса.
Что же делать, если нужно организовать быстрое перемещение в рамках одной страницы? Здесь тоже помогут ссылки.
Внутренние ссылки
Внутренние ссылки организуют переходы внутри одного HTML-документа. Они применяются, когда на одной странице много текста. Для простоты навигации можно создать ссылки, при щелчке кнопкой мыши на которых пользователь автоматически перейдет к нужной части документа.
Чтобы создать такую ссылку, сначала нужно определить место, Рє которому ссылка РїСЂРёРІРѕРґРёС‚. Рто делается СЃ помощью атрибута name элемента A. Необходимый РєСѓСЃРѕРє текста заключается РІ элемент A. Хотя совершенно РЅРµ обязательно помещать туда текст, можно просто установить теги этого элемента РІ месте, Рє которому браузер должен переходить РїСЂРё щелчке РєРЅРѕРїРєРѕР№ мыши РЅР° ссылке.
В качестве значения атрибута name можно взять любое имя, желательно, чтобы оно характеризовало текущее место, так вам самим будет проще пользоваться метками.
Затем нужно создать ссылку на эту метку. Ссылка на внутреннюю метку создается так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой страницы надо ввести адрес метки в виде #met1. При этом metl – имя вашей метки.
Теперь при щелчке кнопкой мыши на ссылке браузер автоматически перейдет к месту, указанному меткой.
В листинге 2.13 показан пример создания внутренних ссылок.
Листинг 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 показан пример отображения ссылки со всплывающей подсказкой.
Рис. 2.14. Ссылки с дополнительными атрибутами
Видно, что всплывающая подсказка может помочь посетителю страницы.
Помимо этого, любой тип ссылки можно реализовать в виде изображения, то есть новая страница будет открываться при щелчке кнопкой мыши на рисунке. Можно, например, создать миниатюрные копии фотографий, при щелчке кнопкой мыши на которых будет открываться фото большего размера.
Для создания ссылки-изображения достаточно поместить рисунок внутри элемента A.
В листинге 2.15 показан пример создания ссылки-изображения.
Листинг 2.15. Ссылки-изображения
На рис. 2.15 показано, как браузер отображает ссылки-изображения.
Рис. 2.15. Ссылка-изображение
Вокруг рисунка создается рамка, которая помогает посетителю понять, что перед ним не просто изображение, а ссылка.
Теперь вы можете создать ссылку любого вида на любой объект. Следите за тем, чтобы ссылки имели понятные названия, соответствующие содержанию документов, расположенных за ними, тогда посетители сайта будут вашими постоянными гостями.
Теперь рассмотрим, как можно влиять на внешний вид текста на странице.
2.6. Форматирование текста
Для чего форматировать текст? Странный вопрос, ведь при создании сайта хочется, чтобы он был выдержан в одном стиле, а цвет и вид текста, принятые по умолчанию, не отвечают стилистике большинства сайтов. Поэтому приходится форматировать текст самостоятельно, благо HTML предоставляет для этого огромные возможности.
Есть много элементов для форматирования текста, и все они делятся на две группы: логические и физические. Друг от друга группы отличаются принципиально.
Логические элементы сообщают браузеру о том, какой тип информации в них содержится, например важный текст или цитата. Браузер сам решает, как отобразить такой текст. Конечно, есть принятые стандарты для отображения определенных элементов, но в таких элементах главное – смысл. По сути они разбивают документ на логические части и при этом не обязывают браузер отображать текст, расположенный внутри элемента, каким-либо конкретным образом.
Физические элементы просто говорят браузеру, как должен выглядеть тот или иной блок текста, не уточняя никак смысл и значимость его содержимого. Другими словами, такой элемент заставляет браузер нарисовать букву красной, полужирной или курсивом, не уточняя, почему буква должна выглядеть именно так.
В некотором роде действие на внешний вид текста у многих элементов одинаково: для выделения текста полужирным шрифтом, например, можно использовать как логические, так и физические элементы.
Начнем рассмотрение способов форматирования текста с использования логических элементов.
Логические элементы для форматирования
Как уже говорилось, логические элементы для форматирования определяют не внешний вид текста, а его тип, и в зависимости от которого браузер применяет тот или иной вид внешнего форматирования. Все элементы, рассматриваемые ниже, являются контейнерами и требуют наличия закрывающего тега.
Некоторые из этих элементов могут вообще не изменять отображение текста, поэтому при их рассмотрении будем делать упор на то, как они определяют значение текста, а не на то, как они его форматируют.
Рлемент ABBR
Рлемент ABBR определяет текст как аббревиатуру. РЎ помощью атрибута title можно задать всплывающую подсказку СЃ расшифровкой аббревиатуры. РџСЂРё этом поисковые роботы индексируют именно полный вариант расшифровки, определенный РІ атрибуте title.
Пример:
РќРР
Рлемент ACRONYM
Рлемент ACRONYM указывает, что текст является акронимом.
Примечание
Акронимы – это некие устоявшиеся сокращения, например СНГ, США и т. п.
Атрибут title позволяет задать расшифровку акронима. Пример:
РЎРќР“
Рлемент CITE
Рлемент CITE отмечает небольшую цитату или СЃРЅРѕСЃРєСѓ, взятую РёР· РґСЂСѓРіРѕРіРѕ источника. Такой текст обычно отображается РєСѓСЂСЃРёРІРѕРј.
Пример:
Здесь указан источник информации
Рлемент CODE
Ртот элемент указывает РЅР° программный РєРѕРґ, который может содержать, например, переменные, функции, небольшие РєСѓСЃРєРё программы. Такой текст обычно выводится моноширинным шрифтом.
Пример:
Зададим функцию func(int a, char b);
Рлемент DEL
Рлемент DEL помечает текст как удаленный Рё может использоваться РїСЂРё внесении изменений РІ документы. РЈ этого элемента есть РґРІР° атрибута: cite должен содержать URL документа, РІ котором описаны причины удаления фрагмента, Р° datetime – дату Рё время удаления фрагмента РІ формате ГГГГ-РњРњ-ДДTчч: РјРј: ccTZD (аббревиатура РѕС‚ Time Zone region with Daylight Saving Time – регион часового РїРѕСЏСЃР° СЃ летним временем). Браузеры такой текст отображают как зачеркнутый.
Пример:
Неактуальный фрагмент
Рлемент DFN
Ртот элемент выделяет текст как определение. Рлемент можно использовать, если новый термин встречается РІ тексте впервые Рё тут же дается его определение. Браузер отображает такой текст РєСѓСЂСЃРёРІРѕРј.
Пример:
Определение-описание
Рлемент EM
Рлемент EM выделяет важные фрагменты текста. Браузер отображает такой текст РєСѓСЂСЃРёРІРѕРј.
Пример:
Важно
Рлемент INS
Рлемент INS отмечает текст как вставку Рё применяется для выделения изменений, вносимых РІ документ. РЈ этого элемента есть РґРІР° атрибута: cite должен содержать URL документа, РІ котором описаны причины добавления фрагмента, Р° datetime должен содержать дату Рё время добавления РІ формате ГГГГ-РњРњ-ДДTчч: РјРј: СЃСЃTZD. Браузеры отображают такой текст как подчеркнутый.
Пример:
Новый фрагмент
Рлемент KBD
Рлементом KBD помечают текст, вводимый пользователем СЃ клавиатуры. Браузеры отображают такой текст моноширинным шрифтом.
Пример:
Введите слово дом
Рлемент Q
Ртот элемент обозначает текст как цитату Рё применяется для добавления коротких высказываний РІ текст. Обычно отображается как РєСѓСЂСЃРёРІ, РЅРѕ некоторые браузеры берут РІ кавычки текст, отмеченный этим элементом.
Пример:
Цитата: Как сказал поэт
Рлемент SAMP
Рлемент SAMP определяет текст как пример Рё обычно используется для выделения результатов работы программы. Браузер выделяет этот текст моноширинным шрифтом.
Пример:
Образец
Рлемент STRONG
Рлемент STRONG предназначен для постановки акцента РЅР° тексте. Браузеры выделяют такой текст полужирным шрифтом.
Пример:
Очень важный фрагмент
Рлемент VAR
Ртот элемент применяется для выделения переменных РёР· программ. Браузер отмечает такой текст РєСѓСЂСЃРёРІРѕРј.
Пример:
Введите переменную X
В листинге 2.16 показан код страницы с различным форматированием текста.
Листинг 2.16. Логическое форматирование текста
РќРР
2.6. Форматирование текста
РЎРќР“
Здесь указан источник информации
Зададим функцию func(int a, char b);
Неактуальный фрагмент
Определение-описание
Важно
Новый фрагмент
Введите слово дом
Цитата: Как сказал поэт
Образец
Очень важный фрагмент
Введите переменную X
Результат обработки браузером кода из листинга 2.16 показан на рис. 2.16.
Рис. 2.16. Логическое форматирование текста
РќР° СЂРёСЃ.В 2.16 РІРёРґРЅРѕ, что РЅРµ РІСЃРµ логические элементы для форматирования изменяют РІРёРґ текста, потому что предназначены РЅРµ для этого. Различные браузеры РјРѕРіСѓС‚ РїРѕ-разному выводить различные элементы, поэтому перед тем как выложить сайт РІ Рнтернете, проверьте его РІРёРґ РІ различных программах.
Физические элементы для форматирования
Физические элементы для форматирования сообщают браузеру, как должен выглядеть текст, расположенный внутри элемента.
Рлемент B
Рлемент B задает полужирное написание шрифта.
Пример:
Полужирный шрифт
Рлемент I
Рлемент I отображает выделенный текст РєСѓСЂСЃРёРІРѕРј.
Пример:
РљСѓСЂСЃРёРІ
Рлемент TT
Ртот элемент задает моноширинное написание текста.
Пример:
Моноширинный шрифт
Рлемент U
Рлемент U отображает текст подчеркнутым шрифтом.
Пример:
Подчеркнутый
Рлемент S
Рлемент S зачеркивает текст горизонтальной линией.
Пример:
Зачеркнутый
Рлемент STRIKE
Ртот элемент также зачеркивает текст горизонтальной линией.
Пример:
Снова зачеркнутый
Рлемент BIG
Рлемент BIG отображает текст, расположенный внутри, шрифтом большего размера, чем остальной текст. Если быть точнее, то размер шрифта увеличивается РЅР° единицу.
Примечание
В языке HTML размеры шрифта измеряются в условных единицах от одного до семи. Размером по умолчанию принят третий размер.
При вложении элементов размер шрифта будет увеличиваться на единицу каждый раз.
Пример:
Шрифт побольше Еще больше
Рлемент SMALL
Рлемент SMALL отображает выделенный текст шрифтом РЅР° единицу меньшего размера относительно окружающего текста. РџСЂРё вложении элементов шрифт будет уменьшаться РЅР° единицу СЃ каждым вложением.
Пример:
Шрифт поменьше
Рлемент SUB
Ртот элемент задает подстрочное написание символов, то есть текст располагается ниже СѓСЂРѕРІРЅСЏ базовой строки Рё становится меньшего размера. РЈРґРѕР±РЅРѕ РїСЂРё РІРІРѕРґРµ формул.
Пример:
Подстрочный шрифт
Рлемент SUP
Рлемент SUP задает надстрочное написание символов, то есть текст располагается выше базовой линии Рё становится меньшего размера. Ртот элемент используют РїСЂРё написании формул.
Пример:
Надстрочный шрифт
Рлемент SPAN
Рлемент SPAN позволяет выделить часть текста Рё определить для нее особые параметры отображения СЃ помощью таблиц стилей. РћРЅ применяется для выделения небольших областей текста.
Пример:
Текст с фоном
В листинге 2.17 представлен код страницы с различным форматированием текста.
Листинг 2.17. Физическое форматирование
Полужирный шрифт
РљСѓСЂСЃРёРІ
Моноширинный шрифт
Подчеркнутый
Зачеркнутый
Снова зачеркнутый
Шрифт побольше Еще больше
Шрифт поменьше
Подстрочный шрифт
Надстрочный шрифт
Текст с фоном
Результат обработки браузером кода из листинга 2.17 представлен на рис. 2.17.
Рис. 2.17. Физическое форматирование
На рис. 2.17 видно, что любой физический элемент форматирования изменяет вид текста, потому что именно это является его функцией.
Как видно из описания, зачастую действие логических и физических элементов дублируется. В принципе, рекомендуется использовать логические элементы форматирования, так как они определяют суть фрагмента текста.
В табл. 2.1 кратко описаны аналоги рассмотренных физических элементов среди логических элементов и показано, какие элементы являются взаимозаменяемыми.
Таблица 2.1. Рлементы форматирования текста
Как видно из таблицы, для многих физических элементов форматирования можно найти логические аналоги, которые намного лучше опишут смысловую нагрузку выделенного текста.
Все рассмотренные выше элементы применимы для форматирования небольших блоков текста. Дальше мы рассмотрим элементы, которые можно применять для изменения внешнего вида крупных текстовых блоков.
Рлементы для форматирования больших блоков текста
Рлементы, которые РјС‹ рассмотрим РІ этом подразделе, позволяют форматировать большие блоки текста. РћРЅРё определяют параметры отображения Рё расположения текста, заключенного РІ РёС… блок.
Начнем рассмотрение с элемента, напрямую отвечающего за параметры шрифта.
Рлемент FONT
Рлемент FONT задает параметры шрифта для текста. Хотя для форматирования предпочтительнее использовать таблицы стилей, некоторые простые документы допускают Рё такое определение параметров текста.
Параметры текста задаются с помощью атрибутов элемента FONT. Можно определить шрифт, размер и цвет текста, расположенного внутри него.
За шрифт отвечает атрибут face, значением которого должно быть название шрифта. Однако название должно быть знакомо компьютеру пользователя, иначе будет применен шрифт по умолчанию. Для решения проблемы несоответствия или отсутствия шрифтов можно задать несколько допустимых типов, введя их через запятую в качестве значения атрибута face.
За размер шрифта отвечает атрибут size. Значение задается в относительных величинах, то есть 2 или 6. По умолчанию используется размер 3. При этом можно задать размер шрифта относительно остального текста. Для этого нужно сначала указать +, если необходимо, чтобы размер шрифта на данном участке был больше, чем основной текст, или —, если требуется обратное форматирование. После знака надо указать количество пунктов, на которое текст должен быть больше или меньше.
За цвет шрифта отвечает атрибут color, значением которого должно быть либо ключевое слово, обозначающее имя цвета, либо код цвета в формате #RRGGBB.
Совет
Код цвета можно посмотреть в любом графическом редакторе.
В листинге 2.18 показан пример кода для определения параметров текста с помощью элемента FONT.
Листинг 2.18. Рспользование элемента FONT
Текст красного цвета с размером +2
Текст фиолетового цвета с размером –4
Результат вывода на экран кода из листинга 2.18 показан на рис. 2.18.
Р РёСЃ.В 2.18. Рспользование элемента FONT
В примере задан список похожих шрифтов. Браузер будет просматривать список по порядку и выведет текст тем шрифтом, который найдет первым. В качестве последнего варианта указан не шрифт, а семейство шрифтов Sans Serif. Если браузер не найдет ни один из перечисленных шрифтов, он возьмет известный ему шрифт из этого семейства.
Как задать параметры шрифта, мы разобрались. Однако этот метод не лучший. Как уже говорилось, удобнее задавать форматирование с помощью таблиц стилей.
Рлемент DIV
Рлемент DIV служит для выделения больших блоков текста РїРѕРґ форматирование СЃ помощью таблиц стилей. Рными словами, РІС‹ помещаете необходимый блок текста между тегами элемента DIV Рё либо задаете ему параметры РІ атрибуте style, либо подключаете класс РёР· таблицы стилей СЃ помощью атрибута class.
Единственное, что вы можете сделать с помощью HTML, – выровнять текст в блоке с помощью атрибута align и создать всплывающую подсказку для блока с помощью атрибута title.
В листинге 2.19 представлен пример кода для выделения текста с помощью элемента DIV.
Листинг 2.19. Рспользование элемента DIV
Текст внутри этого элемента выровнен по центру, а с помощью стилей задается вид указателя мыши при наведении на этот блок.
Результат обработки кода из листинга 2.19 показан на рис. 2.19.
Р РёСЃ.В 2.19. Рспользование элемента DIV
Теперь рассмотрим ситуацию, когда у вас уже есть отформатированный нужным образом текст и вы не хотите ничего менять.
Рлемент PRE
Ртот элемент служит для РІРІРѕРґР° текста без форматирования, то есть СЃ сохранением всех пробелов Рё переносов строк.
Примечание
Обычно в HTML несколько пробелов подряд воспринимаются как один пробел.
РџСЂРё использовании этого элемента текст выводится моноширинным шрифтом. Рлемент PRE часто используют для вывода РєРѕРґРѕРІ программ. Внутри этого элемента можно применять большинство элементов форматирования текста.
В листинге 2.20 приведен пример использования элемента PRE.
Листинг 2.20. Рспользование элемента PRE
Здесь
можно
расположить
РєРѕРґ
программы
На рис. 2.20 показано, как текст, расположенный между тегами элемента PRE, выглядит в браузере.
Р РёСЃ.В 2.20. Рспользование элемента PRE
Далее рассмотрим элемент, предназначенный для форматирования больших объемов текста и отвечающий за цитаты.
Рлемент BLOCKQUOTE
Рлемент BLOCKQUOTE определяет выделенный текст как цитату Рё применяется для описания больших высказываний. РћРЅ задает для текста отступы сверху, СЃРЅРёР·Сѓ Рё слева. Внутри этого элемента РјРѕРіСѓС‚ присутствовать элементы форматирования текста.
В листинге 2.21 представлен пример выделения цитаты с помощью элемента BLOCKQUOTE.
Листинг 2.21. Ввод больших цитат
Здесь можно расположить важную и большую цитату.
На рис. 2.21 показано, как в браузере выглядит текст из элемента BLOCKQUOTE.
Р РёСЃ.В 2.21. Рспользование элемента BLOCKQUOTE
Мы рассмотрели, как действует каждый вариант форматирования текста отдельно, но HTML позволяет вкладывать элементы, при этом объединяя их действие.
Вложение элементов
Язык HTML позволяет вкладывать элементы форматирования друг в друга. При этом их действия суммируются. Если вложить в элемент B элемент I, то получится текст, написанный полужирным курсивом. При этом нужно следить за правильным закрытием элементов: тот, что открыт раньше, закрывается позже.
В листинге 2.22 показаны примеры правильного и неправильного вложения элементов.
Листинг 2.22. Вложение элементов
Рто неправильное вложение элементов
Рто правильное вложение элементов
Неправильную запись некоторые браузеры могут отображать некорректно.
Резюме
В данной главе были рассмотрены основные принципы форматирования текста с использованием возможностей HTML. Особенно подробно было рассказано об особенностях структурного форматирования документа и форматировании самого текста, были описаны особенности логического и физического форматирования текста, работа с большими блоками текста и вложением элементов.
Теперь внешний вид текста на вашем сайте полностью подвластен вам. Помните, что ни один символ не может быть написан напрямую в элементе BODY. Текст всегда должен быть включен в элемент, который определяет его назначение и внешний вид.