Тэги форматирования текста

Теги для текста

Тэги для форматирования текста

Доброго времени суток, уважаемые читатели блога presentaci.ru !

Давайте продолжим работу над нашим первым сайтом.

Сегодня поговорим о тегах HTML предназначенных для форматирования текста.

Но для того, чтобы было с чем работать, давайте добавим немного текста.

Скопируйте код:


<p>Этот текст я написал для примера.
 Вы можете проявить фантазию и придумать свой текст,
 или можете ничего не переделывать и оставить всё как есть.
Всётаки это Ваш сайт.</p>

Находим наш index.html, нажимаем на нём правой клавишей мыши, выбираем Edit with Notepad++ (если у вас установлен этот блокнот) или открыть с помощью: и выбираем блокнот или любой другой текстовый редактор. Вставляем код внутрь тэга <body></body> . Если вам не нравится мой текст, можете вставить свой. Сохраняем ( удобней всего использовать комбинацию клавиш Ctrl+S ). Открываем в браузере.

Что мы видим. Текст выровнян по левому краю. Мне кажется это не очень привлекательно.
Для придания определённого вида, содержимому тегов, используют различные атрибуты.
Для выравнивания элементов применяется атрибут align. Выглядит это так:

<p align="left">Содержимое выравнивается по левому краю</p>

<p align="center">Содержимое выравнивается по центру</p>

<p align="right">Содержимое выравнивается по правому краю</p>

Для принудительного переноса текста на следующую строку используется тэг <br/>

Поэкспериментируйте с кодом своего сайта. Я, например, выровнял всё по центру:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Мой первый сайт</title>
</head>
<body>
     <h1 align="center">Привет мир</h1>
     <p align="center">Это мой первый сайт</p>
         <p align="center">Этот текст я написал для примера.<br/> Вы можете проявить фантазию и придумать свой текст, или можете ничего не переделывать и оставить всё как есть.<br/> Всётаки это Ваш сайт.</p>
     <hr/>
</body>
</html>

Сохраняем изменения (Ctrl+S) и обновляем страничку в браузере (клавиша F5).
Важно чтобы Вы сами попробовали изменить код, совершили несколько ошибок ( а Вы их обязательно совершите ), и сами их исправили.

Идём дальше.

Для форматирования текста предназначенны специальные тэги:

<strong></strong> или <b></b> — для выделения текста жирным
<em></em> или <i></i> — курсивом
<u></u> — подчёркнутым
<s></s> или <strike></strike> — зачёркнутым

Тэги можно совмещать. Но при этом нужно соблюдать одно правило: закрывающийся тэг не должен находится внутри другого открытого тега, или открываться перед другим закрывающимся тегом. Теги должны обволакивать содержимое как будто слоями. Один слой — один тег, следующий слой — следующий тег.

Например:

<strong><em><u>Текст</strong></em></u> — так не правильно.
Правильно так — <strong><em><u>Текст</u></em></strong>.

Неправильно закрытые тэги могут привести к непредсказуемым результатам ( компьютер конечно не взорвётся :) , но содержимое страницы может отобразится совершенно неожиданным образом ).

Поработайте с кодом, чтобы закрепить полученную информацию.

В следующих постах продолжим рассматривать тэги и их свойства.