HTML-теги для текста

цвета html

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

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

Давайте, для начала разберёмся с начальными данными, если можно так выразиться, а именно со страницей, которая у нас имеется. Пусть она будет такой:
<html>
<head>
</head>
<body text = "green" bgcolor = "yellow">
<h1>Заголовок 1-го уровня</h1>
</body>
</html>

Собственно, здесь уже имеются элементы форматирования: тег <h1>, который делает текст внутри тега крупным, более того, это идёт, как заголовок, поэтому дальнейшие элементы располагаются уже под ним. Также мы здесь задали цвет текста (green) в атрибуте text тега <body>.

Теперь поговорим о других возможностях по форматированию текста.

Первое, что можно сделать - это узнать, как сделать различный вид текста: курсив, подчёркнутый, жирный и различные комбинации.

Начнём с курсива. Текст будет курсивным, если он находится внутри тега . Поэтому давайте напишем так:
Это курсив

Если Вы запустите браузер, то Вы сможете увидеть текст в виде курсива.

Также текст может быть жирным. Делается это с помощью тега . Например, так:
Это жирное начертание

Также текст можно сделать подчёркнутым. Для этого необходимо использовать тег .
Подчёркнутый текст

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

Также можно записать и так:
Жирный курсивный текст

Если Вы посмотрите в браузере, то не увидите никакой разницы. Это и логично, ведь какая разница: сначала сделали текст курсивным, а потом жирным, или, наоборот, сначала жирным, а потом курсивным. Суть, думаю, понятна. Единственное правило, но ОЧЕНЬ важное правило - это соблюдать принцип вложенности. То есть сначала закрываются все внутренние теги, и только потом закрываются внешние теги. Таким образом, НЕЛЬЗЯ писать так:
Жирный курсивный текст

Думаю, понятно, что работать это не будет. Ведь мы не закрыли ещё тег , а уже закрываем тег . Всегда помните о принципе вложенности - это одно из немногих правил HTML, соблюдение которого обязательно!

Теперь поговорим о размере шрифта текста. Изменить размер текста можно с помощью тега , а, точнее, с помощью его атрибута "size", значение которого и означает размер шрифта. Давайте перейдём на следующую строку с помощью тега и напишем такую строчку:
Это текст c size = "5"

Обновив страницу в браузере, Вы увидите, что текст стал крупнее, чем раньше. Это и сделал атрибут "size" тега . Чем больше значение атрибута "size", тем крупнее шрифт, впрочем, думаю, что Вам это очевидно.

Цвет текста можно задавать также с помощью тега , так как у этого тега имеется ещё один атрибут - "color". Значение данного атрибута может быть любой цвет. Давайте напишем так:
Это увеличенный красный текст

Вот это и были основные способы по изменению внешнего вида текста.

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



Это текст, в котором намешано очень многое




Таким образом, код нашей страницы стал таким:
<html>
<head>
</head>
<body text = "green" bgcolor = "yellow">
<h1>Заголовок 1-го уровня</h1>
Это курсив
Это жирное начертание
Подчёркнутый текст

Жирный курсивный текст


Жирный курсивный текст

 
Это текст c size = "5"
Это увеличенный красный текст
 



Это текст, в котором намешано очень многое



</body>
</html>

Вот и вся наука. Как видите, снова ничего сложного не было, и это неудивительно, ведь это основные знания по HTML, которыми обладает любой уважающий себя Web-мастер. Без этих знаний речи о создании сайтов и идти даже не может.

Всего Вам доброго, увидимся в следующей статье.