Оформление текста

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

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

<html>

              <head>

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

              <title>Компания АВС</title>

              </head>

              

              <body bgcolor="blue" text="red">

              <h1 align="center">Компания АВС</h1>

              <hr>

              Компания АВС — поставки электронной техники ведущих мировых производителей.<br>

              <hr noshade>

              В компании АВС вы всегда найдете:<dd>

              телевизоры<dd>

              видиомагнотофоны<dd>

              видеоплейеры<dd>

              музыкальные центры<dd>

              компьютеры<dd>

              принтеры и сканеры<dd>

              и другие товары.

              <hr size="5">

              <p>Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта</p>

              </body>

              </html>

Сохраните вашу страницу (Файл->Сохранить) и откройте ее (или нажмите обновить, если вы не закрывали страницу).

В окне веб-браузера это будет выглядеть ТАК.

Выравнивание текста в HTML

Выравнивание текста по центру позволяют сделать тег <center> и </center>. При использовании этих тегов заголовки или текст не будут прижаты к левому краю, они равномерно заполнят область вывода текста. Чтобы выровнять текст по центру, просто вставьте теги <center> и </center> в начале и в конце нужного фрагмента.

Ряд других команд для выравнивания:

<h1 align="left">Выровнять заголовок по левому краю</h1>;
<h2 align="right"> Выровнять заголовок по правому краю</h2>;
<h3 align="center">Выровнять заголовок по центру</h3>;
<h4 align="justify">Выровнять заголовок равномерно</h4>;
Выровнять абзац по левому краю;
Выровнять абзац по центру;
Выровнять абзац равномерно.

Выбираем шрифт в HTML

Для того чтобы сделать текст жирными используются парные теги  и  ( b — от слова bold, т.е. жирный), курсивом  и  . i — от слова italic, т.е. курсив.

Сделаем текст нашей страницы в одном месте жирным, а в другом курсивом

<html>

              <head>

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

              <title>Компания АВС</title>

              </head>

              

              <body bgcolor="blue" text="red">

              <h1 align="center">Компания АВС</h1>

              <hr>

              <b>Компания АВС — поставки электронной техники ведущих мировых производителей.</b><br>

              <hr noshade>

              В компании АВС вы всегда найдете:<dd>

              телевизоры<dd>

              видиомагнотофоны<dd>

              видеоплейеры<dd>

              музыкальные центры<dd>

              компьютеры<dd>

              принтеры и сканеры<dd>

              и другие товары.

              <hr size="5">

              <p><i>Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта</i></p>

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

Обратите внимание на порядок следования тегов вложенных в другие теги. Теги должны быть вложены как матрешки.

Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта

или вот так:

Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта

Будьте внимательны при написании кода! Иначе это вызовет ошибки в отображении страницы.

А можно ли сделать текст одновременно и жирным и курсивом?

Конечно можно! Например вот так:

Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта

или так:

  Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта

или так:

 Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта

О размере и цвете шрифта HTML

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

Шрифт текста между тегами <big> и </big> немного крупнее обычного текста. Как вы догадаетесь, действие тегов  и  прямо противоположно. Шрифт между ними становиться немного меньше.

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

Атрибут size позволяет устанавливать размеры шрифта в условных единицах от 1 до 7; значение 1 соответствует минимальному размеру шрифта, а величина 7 — максимальному. Принято считать, что размер обычного текста равен 3 условным единицам. Значение атрибута size можно указывать в относительных значениях с помощью знака +(плюс) или -(минус). В этом случае размер шрифта увеличивается или уменьшается по сравнению с исходным. Например, тег  увеличит размер шрифта по сравнению с текущим на две условных единицы.

Другой атрибут рассматриваемого тега — fase позволяет указать название шрифта, например Arial, которым браузер будет отображать текст.

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

Изменим размер и цвет шрифта с помощью тега .

<html>

              <head>

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

              <title>Компания АВС</title>

              </head>

              

              <body bgcolor="blue" text="red">

              <h1 align="center">Компания АВС</h1>

              <hr>

              <font size="5" color="#FFFFFF"><b>Компания АВС — поставки электронной техники ведущих мировых производителей.</b></font><br>

              <hr noshade>

              <big>В компании АВС вы всегда найдете:</big><dd>

              телевизоры<dd>

              видиомагнотофоны<dd>

              видеоплейеры<dd>

              музыкальные центры<dd>

              компьютеры<dd>

              принтеры и сканеры<dd>

              и другие товары.

              <hr size="5">

              <p><i><font size="+2">Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта</font></i></p>

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

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

К тегам, которые определяют логические стили, относятся:

<dfn></dfn> —используется для определения текстового фрагмента или термина. Текст обычно выводится курсивом;
<cite></cite> — для отметки цитат, названий книг и фильмов, ссылок на другие источники ит.д. Как правило отображается курсивом;
 — для выделения вжных фрагментов текста. Обычно выводится курсивом;
<kbd></kbd> — для текста, который пользователь вводит с клавиатуры. Как правило, отображается моноширинным шрифтом, т.е. обладающим фиксированной шириной;
<code></code> — для фрагментов програмного кода. Обычно выводится моноширинным шрифтом;
 — для важных фрагментов. Как правило, отображается полужирным шрифтом;
<samp></samp> —для сообщения программ. Обычно выводится моноширинным шрифтом;
<var></var> — для переменных. Как правило отображается курсивом.

Язык HTML содержит мощное средство, расширяющее возможности улучшения внешнего вида страниц — каскадные страницы стилей (Cascading Style Sheets — CSS). Стиль определяет вид HTML-документа при отображении его браузером и задается по определенным правилам. Таблицы стилей позволяютуправлять форматированием тегов в документе. Для каждого элемента, задаваемого тегом, можно определить свой стиль отображения браузером. Например, есть возможность создать стиль, чтобы все заголовки разделов второго уровня выводились красным цветом и размером шрифта 14 пунктов. Слово "каскадные" в названии связано с тем, что можно использовать несколько таблиц стилей для форматирования одного документа, при этом браузер выстраивает приоритетность применения данных таблиц: возникает своего рода "какад".

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

<h2 align="center" style="color: #FFFFFF">

свойство color (цвет) обеспечивает отображение текста заголовка второго уровня белым цветом (#FFFFFF).

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

Для определения курсивного начертания используется свойство font-style со значением italic. Чтобы установить размер шрифта воспользуемся свойством font-size, значение которого можно установить в относительных или абсолютных величинах. Относительные значения задаются в процентах, а в качестве абсолютных величин можно использовать, например, пункты (pt) или сантиметры (cm). Следует отметить, что абсолютные значения лишатпользователя возможности устанавливать размеры шрифта средствами веб-браузера. Для определения способа выравнивания текста применяется свойство text-align со значением left (влево), right (вправо), center (по центру), justify (по ширине).

<html>

              <head>

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

              <title>Компания АВС</title>

              </head>

              

              <body bgcolor="blue" text="red">

              <h1 align="center" >Компания АВС</h1>

              <h2 align="center" style="color:#FFFFFF">О компании</h2>

              <hr>

              <font size="5" color="#FFFFFF">Компания АВС — поставки электронной техники ведущих мировых производителей.</font><br>

              <hr noshade>

              <big>В компании АВС вы всегда найдете:</big><dd>

              телевизоры<dd>

              видиомагнотофоны<dd>

              видеоплейеры<dd>

              музыкальные центры<dd>

              компьютеры<dd>

              принтеры и сканеры<dd>

              и другие товары.

              <hr size="5">

              <p style="font-style:italic; font-size:120%; text-align:justify; color:FFFFFF"> Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта </p>

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

Мы рассмотрели только один вариант использования каскадных таблиц стилей, когда определение стиля располагается внутри етга элемента,хотя есть и другие способы использования CSS. C ними можно ознакомиться в разделе Основы CSS.

Понравилась статья или раздел сайта - порекомендуйте их друзьям.

Обсудить на форуме

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться

Вход в Личный кабинет
Ваш логин:	Ваш пароль:

Забыли пароль?

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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

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

Веб-инструмент

Веб-мастерская

Веб-услуги

Веб-графика

Веб-ресурсы