Создание основы сайта: Форматирование

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

Для изменения размера шрифта текста, являющегося заголовком, используют теги от <h1></h1> до <h6></h6>, где тег <h1> - обозначение самого крупного, а <h6> - самого мелкого размера текста в заголовке. Определим заголовком название «Компания Проктел», выделив его нужными тегами. Сохраним текст в редакторе и обновим содержимое страницы.

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

Атрибут align может определять следующие значения: left - выравнивание по левому краю, right - по правому краю, center - по центру, justіfу - по ширине. Внесем изменения, выровняв заголовок на странице по центру. Сохраним и обновим страницу в браузере.

Для выделения текстовых объектов обычно используют следующие теги:

<i></i> - курсив;

<b></b> - полужирное начертание;

<u></u> - подчеркивание текста, находящегося между ними. 

Если возникает необходимость выделить текст совокупными тегами, то их можно вложить друг в друга. В этом случае надпись может принять вид <b><i>"Проктел"</i ></b>. Как видим из примера, нужно учитывать вложенность тегов при закрытии. Применим данные теги для выделения текстовых фрагментов. Сохранив и обновив страницу в браузере, посмотрим, что получилось.

Если возникает необходимость изменить размер символов, не указывая теги заголовков, можно использовать следующие способы: теги <big></big> и <small></small> соответственно увеличивают и уменьшают размер заключенного в них текста по сравнению с текущим, а тег <font> </font > с атрибутом size позволяет задавать размер символов в условных единицах от минимального значения 1 до максимального значения 7. По умолчанию размер символов текста принято считать равным 3 условным единицам, поэтому, явно задавая значение параметра тега со знаком плюс или минус, можно заставлять браузер отображать текст больше или меньше относительно текущего. У тега <font> также есть атрибуты: face - указывает название предпочтительного шрифта для отображения символов, color - задает цвет шрифта. Рассмотрим на примере центрирование и изменение размера шрифта для текста веб-страницы. 

Не забываем сохранить текст и обновить страницу в браузере, где и наблюдаем результат изменений. 

Для придания полной красоты нашему творению выделим первые два слова «Компания Проктел» в отдельный абзац, для чего необходимо воспользоваться непарным тегом <br>, обозначающим конец абзаца. 

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

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

В случае логического форматирования заключенный в соответствующие теги текстовый фрагмент страницы распознается и форматируется по определенному стилю, с указанием на роль текстового фрагмента в составе документа. Используя зту возможность языка HTML, при оформлении сайта можно применять так называемые каскадные таблицы стилей CSS, которые позволяют управлять форматированием тегов в документе, задавая для каждого заключенного в тег элемента определенный стиль оформления. Например, можно задать синий цвет для заголовков, определяемых тегами <h1></h1>, используя параметр style: <h1 style="color: blue">, где в качестве значения атрибута указано "свойство: значение".

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

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

<р style="font-style:  italic;  font-size: 150%; text-align:center"> предоставит вам возможность провести отпуск или выходные дни на любой планете ближнего и дальнего освоенного космоса.</р>

Здесь тег <р></р> определяет текст как отдельный абзац, a style - атрибут, задающий для фрагмента курсивное начертание командой font -style: italic. Относительный размер шрифта задан в процентах: font-size: 150%. Текстовый фрагмент выровнен по центру: text-align: center. При этом размер шрифта можно задавать не только в процентах, но и в явных единицах - сантиметрах (cm) или пунктах (pt). Следует учитывать, что явно заданные размеры не позволяют браузеру адаптировать текст под размер раскрытого окна и, как следствие, могут сделать его нечитаемым.

Повторяем операцию сохранения и обновления, открываем в браузере результат.

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

Тэги: текста, странице, начертания, изменение, подразумевается, форматированием, размеров

← Создание основы сайта: Использование списков		Создание основы сайта: Структура →