Украшение веб-страницы и размер шрифта в HTML

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

С форматированием связаны несколько тегов. Чаще всего используется "p" – абзац. У него есть необязательные параметры, задающие внешний вид текста.

Первый и основной параметр – это "align". Он определяет выравнивание текста и может принимать значения "left", "right", "center" и "justify" – равнение по левой стороне, по правой, по центру и по всей ширине блока соответственно. Заметьте, что положение текста задаётся не относительно границ экрана, а в пределах абзаца.

Далее следуют параметры "class” и "id". Они определяют, к какому классу принадлежит данный объект и его идентификатор. Сюда же можно отнести и атрибут "style" - он задаёт встроенный стиль блока. Все эти свойства связаны с CSS, речь о котором пойдёт чуть ниже.

У тега "p" есть один недостаток – с его помощью нельзя задать внешний вид шрифта, например, его цвет или размер. Для этих целей предназначен другой тег – "font". Все его параметры определяют, как будет выглядеть текст.

Первый атрибут этого тега – "color". Как вы уже догадались, в нём задаётся цвет. Этот параметр может принимать как названия ("white", "yellow", "magenta"), так и значения в системе RGB. Это делается так: сначала ставится знак #, а потом указываются три числа в шестнадцатеричной системе счисления от 00 до ff или от 0 до 255 - в десятичной – количество красного, зелёного и синего в конечном цвете. Например, для использования красного цвета нужно написать "#ff0000", жёлтого - "#ffff00".

Следующий атрибут – "face". Он определяет гарнитуру шрифта. Например, ему можно задать значение "Times New Roman" или "Tahoma".

И, наконец, за размер шрифта в HTML отвечает параметр "size". Он принимает числовое значение – кегль.

Например, чтобы вывести текст голубым цветом и шрифтом "Comic Sans MS" пятнадцатого кегля, нужно определить тег "p" с параметрами:

color="#6666ff" face="Comic Sans MS" size="15"

Также существует несколько тегов, позволяющих задать один конкретный вид форматирования: "b" – выделение жирным, "i" – курсивом, "u" – подчёркивание. Все они не имеют параметров.

Задавать атрибуты текста в HTML – размер шрифта, гарнитуру – довольно неудобно. Представьте, что вам нужно чередовать блоки с разным оформлением текста. Тогда к каждому из тегов вам придётся определять одни и те же атрибуты. Значительно удобнее это можно реализовать с помощью CSS–каскадных таблиц стилей. Например, чтобы создать класс картинок под названием "myclass" с таким оформлением, как в предыдущем примере, нужно добавить в тег "style" такую строку:

#myclass {font: rgb (102,102,255) "Comic Sans MS" 15pt;}

Здесь "rgb (102,102,255)" задаёт цвет, "Comic Sans MS" - гарнитуру, а "15pt" – размер шрифта. Цвет также можно задавать названием, а шрифт – как в кеглях, так и в пикселях (для этого нужно написать, например, "20px").

Для применения этого оформления нужно в теге "p" написать:

class="myclass"

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

А чтобы создать идентификатор с названием "myid", нужно в "style" записать:

#myid {font: rgb (102,102,255) "Comic Sans MS" 15pt;},

а в теге "p" задать атрибут "id" со значением "myid".

Класс и идентификатор – это практически одно и то же. При этом у одного тега может быть объявлен как первый, так и второй:

class="myclass" id="myid"

Существует два способа изменения внешнего вида текста - HTML и CSS. Если вам требуется оформить один-два блока, то используйте HTML. А для большого количества абзацев с одинаковым форматированием более удобным является CSS.

Как видите, изменить размер шрифта в HTML совсем несложно. Главное в программировании - это практика, поэтому старайтесь больше тренироваться, и у вас все получится!