Тэги для форматирования текста
Доброго времени суток, уважаемые читатели блога 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>
.
Неправильно закрытые тэги могут привести к непредсказуемым результатам ( компьютер конечно не взорвётся , но содержимое страницы может отобразится совершенно неожиданным образом ).
Поработайте с кодом, чтобы закрепить полученную информацию.
В следующих постах продолжим рассматривать тэги и их свойства.