Реальный пиарHTMLУроки HTML → HTML-теги для текста

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

цвета html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Напоследок, напишем строчку, в которой намешано абсолютно всё, что мы сегодня узнали. Сначала, правда, давайте перейдём на следующую строку, с помощью уже знакомого нам тега <br>. Обратите внимание, что необходимо соблюдать принцип вложенности: пока не закрыт внутренний тег - внешний не закрывается.
<font size = "4" color = "navy">
<b>
<i>
<u>Это текст, в котором намешано очень многое</u>
</i>
</b>
</font>

Таким образом, код нашей страницы стал таким:
<html>
<head>
</head>
<body text = "green" bgcolor = "yellow">
<h1>Заголовок 1-го уровня</h1>
<i>Это курсив</i>
<b>Это жирное начертание</b>
<u>Подчёркнутый текст</u>
<i>
<b>Жирный курсивный текст</b>
</i>
<b>
<i>Жирный курсивный текст</i>
</b>
<br>
<font size = "5">Это текст c size = "5"</font>
<font size = "5" color = "red">Это увеличенный красный текст</font>
<br>
<font size = "4" color = "navy">
<b>
<i>
<u>Это текст, в котором намешано очень многое</u>
</i>
</b>
</font>
</body>
</html>

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

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


Источник: http://myrusakov.ru

Рекомендуем



Ссылки и изображения в HTML Я настоятельно рекомендую Вам испробовать все значения этого атрибута в различных браузерах, чтобы окончательно понять, что каждое из них означает


Списки HTML В принципе, Вы уже можете создавать сайты на HTML, потому что элементарная база по HTML у Вас уже имеется, хотя, разумеется, изучать дальше необходимо, просто уже можно потихоньку начинать создавать сайт


Создание сайта на HTML Парные теги - это теги, которые нуждаются в закрывающем, то есть все три тега, которые мы использовали являются парными, так как они открываются и потом закрываются