Форматирование текста на Web-странице

Давайте посмотрим на веб-страницу одного восьмиклассника:

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

Мы уже знаем, что создавать веб-страницу можно в текстовом редакторе Блокнот. Чтобы отформатировать текст на веб-странице, надо её открыть с помощью редактора Блокнот. И приступить к форматированию.

Первое с чего можно начать - это с заголовка.

Размер заголовка задаётся парами тегов от H1 до Н6. Н1 - это самый крупный, а Н6 - самый мелкий. Сделаем наш заголовок самым крупным. Откроем тег Н1 перед словом «берёза» и закроем тег после слова.

Некоторые теги имеют атрибуты. Каждый атрибут имеет название (имя) и определённое значение, которое записывается в кавычках после знака «равно». Тег может содержать несколько атрибутов, которые перечисляются через пробелы, например:

Порядок следования атрибутов в теге не важен.

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

По умолчанию текст выравнивается по левому краю страницы.

Значит, что бы выровнять наш заголовок, в теге Н1 допишем атрибут ALIGN и задаём значение выровнять по центру. Обратите внимание на то, что атрибуты, в отличие от тегов, закрывать не надо. И атрибут действует только в том теге, в котором мы его написали.

Форматирование шрифта осуществляется с помощью тега FONT и его атрибутов. Атрибут FACE позволяет задавать название шрифта (например, Arial, Times New Roman), атрибут SIZE -размер шрифта. По умолчанию принято значение размера 3. И атрибут COLOR - цвет шрифта. Значение атрибута COLOR можно задать либо названием цвета (например, «red», «green»), либо его шестнадцатеричным значение в RGB-формате, где две первые шестнадцатеричные цифры задают интенсивность красного цвета, две следующие - зелёного, а две последние цифры задают интенсивность синего цвета. Например:

Дайте сделаем фамилию и имя красным цветом, шрифт «колибри» и размер 5. Откроем тег FONT перед именем Сергей, внутри которого зададим параметры следующих атрибутов: используя атрибут FACE запишем шрифт «колибри», с помощью атрибута SIZE зададим значение 5 и с помощью атрибута COLOR зададим красный цвет шрифта. Обязательно закрываем тег FONT.

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

Разделим наш текст на 4 абзаца. Первый столбик стихотворения поместим в контейнер <р>. Для этого перед первым словом абзаца откроем тег <р>. И после последнего слова абзаца не забудем поставить закрывающийся тег. С остальными абзацами сделаем тоже самое.

А если вы внимательно смотрели, то уже заметили, что в каждом абзаце у нас 4 строки. И когда мы набираем стихотворение в текстовом редакторе, для перехода на новую строку мы нажимаем клавишу Enter. Но мы уже говорили про то, что переходы на новые строки браузером не воспринимаются.

Для принудительного перехода на новую строку без создания абзаца используют непарный тег <br>. Этот тег надо поставить там, где бы вы нажали клавишу Enter в текстовом редакторе.

Для каждого абзаца так же можно задать параметры форматирования шрифта. Зададим для первого абзаца следующие параметры: сделаем абзац синего цвета.

Для этого применим тег FONT и зададим следующий атрибут: COLOR со значением bluе. И, конечно, не забудем закрыть тег FONT.

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

В третьем абзаце сделаем текст размером 2. Для этого используем тег FONT и атрибут SIZE со значением 2. И закрываем тег FONT.

Четвёртый абзац выравним по центру. Нередко между абзацами помещают разделительную линию, которая задаётся непарным тегом <hr>.

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

А теперь давайте посмотрим результат нашего форматирования:

Теперь веб-страница выглядит более привлекательно.