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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали структуру HTML-документа. Теперь настала очередь разобраться с тем, как редактировать текст на странице, например, выделить текст курсивом или сделать его жирным, изменить размер текста. Создадим страницу, с которой мы будем экспериментировать:

<html>
<head>
<meta charset="utf-8"/>
<title>Редактирование вида текста</title>
</head>
<body>
  <p>Я начал изучать HTML. И это круто.</p>
</body>
</html>

Здесь сразу обращаем внимание, что появилось два новых тега <meta> и . Строка <meta charset="utf-8"> задает кодировку нашей страницы (в данном случае это utf-8). Это нужно для того, чтобы открыв документ, мы обнаружили в нем тот текст, который набирали, а не иероглифы. Обращаю ваше внимание на то, что кодировка документа также должна быть в utf-8. Для этого необходимо в редакторе Notepad++ сверху выбрать "Кодировки" — "Кодировать в UTF-8 (без BOM)". Тег — это тег абзаца.
Открыв данную страницу в браузере, мы увидим, что вывелся наш текст без форматирования внешнего вида.
Давайте теперь разберемся как сделать текст жирным, курсивом, подчеркнутым, также разберем их комбинацию.

<b></b>

- текст, заключенный между этими тегами будет жирным.

<i></i>

- текст, заключенный между этими тегами будет курсивным.

<u></u>

- текст, заключенный между этими тегами будет подчеркнутым.

Давайте изменим нашу страницу, добавив следующие строки:

<html>
<head>
<meta charset="utf-8"/>
<title>Редактирование вида текста</title>
</head>
<body>
  <p>Я начал изучать HTML. И это круто.</p>
  <b>Жирный текст</b>
  <i>Курсивный текст</i>
  <u>Подчеркнутый текст</u>
</body>
</html>

Давайте теперь сделаем текст одновременно и жирным, и курсивным:

<b><i>Жирный курсивный текст</i></b>

Давайте теперь напишем следующий код и посмотрим, что получится:

<b><i>Жирный курсивный текст</b></i>

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

Давайте теперь разберем, как изменить цвет, размер и шрифт текста на странице. Добавим следующий код:

<html>
<head>
<meta charset="utf-8"/>
<title>Редактирование вида текста</title>
</head>
<body>
  <p>Я начал изучать HTML. И это круто.</p>
  <b>Жирный текст</b>
  <i>Курсивный текст</i>
  <u>Подчеркнутый текст</u>
  <b><i>Жирный курсивный текст</i></b>
  <p>
	<font color="red" size="30px">
		<b><i>Красный жирный текст размером 30px</i></b>
	</font>
  </p>
</body>
</html>

Тег и его атрибуты color и size как раз и отвечают за цвет текста и его размер.

В данной статье вы узнали про HTML-теги для текста.

Настало время для домашнего задания: попробуйте поиграть с различными вариантами стилизации текста на странице. Также найдите в интернете другие атрибуты у тега font.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.