Уроки HTML'а. Урок # 3.
На этом уроке мы поговорим о стилевом
оформлении текста. Теперь, когда вы уже знакомы с основными
построениями странички, стоит освоить способы управления внешним видом
текста.
Вам, возможно, потребуется выделить
определенное слово или напечатать фразу курсивом. В другой раз вы
решите выровнять заголовок по центру или даже захотите чтобы текст
мерцал. При создании веб-страницы можно использовать целый ряд средств
форматирования текста. Все эти возможности могут действительно оживить
вашу страничку.
Выравнивание текста по центру
Выравнивание
текста по центру позволяют сделать тег <center> и <center>.
При использовании этих тегов заголовки или текст не будут прижаты к
левому краю, они равномерно заполнят область вывода текста. Чтобы
выровнять текст по центру, просто вставьте теги <center> и
</center> в начале и в конце нужного фрагмента:
<center><h1>Пример заголовка - размер 6</h1><center>
|
Вот что мы получим в результате:
Пример заголовка - размер 6
|
Вы можете центрировать заголовки (как на примере), текст, абзацы и веб-графику.
Полужирный шрифт
Теги
<b> и </b> позволяют отображать различные слова и фразы
вашего документа полужирным шрифтом. Текст между этими тегами выглядит
толще обычного текста, чем приятно выделяется. Чтобы разметить текст
как полужирный, вставьте <b> и </b> в начале и в конце
этого текста:
обычный текст сливается с <b>полужирным</b>
|
Вот что мы получим в результате:
обычный текст сливается с полужирным
|
Курсив
Теги
<i> и </i> позволяют отображать различные слова и фразы
вашего документа курсивным шрифтом. Чтобы разметить текст как
курсивный, вставьте <i> и </i> в начале и в конце этого
текста:
обычный текст сливается с <i>курсивным</i>
|
Вот что мы получим в результате:
обычный текст сливается с курсивным
|
Мерцание
Тег
мерцания <blink> </blink> не работает в браузерах MicroSoft
Internet Explorer. Вообще этот тег самый раздражающий из всех
существующих тегов в HTML. Разумное использование тегов <blink> и
</blink> может вполне только приукрасить вашу страничку. Итак,
давайте посмотрим как нужно использовать тег
обычный текст сливается с <blink>мерцающим</blink>
|
Вот что мы получим в результате:
обычный текст сливается с (НЕ MSIE!)
|
Подчеркивание
Существует
в HTML также тег, который используется для подчеркивания какого-либо
текта. Это теги <u> и </u>. Давайте посмотрим их синтаксис
обычный текст сливается с <u>подчеркнутым</u>
|
Вот что мы получим в результате:
обычный текст сливается с подчеркнутым
|
Перечеркивание
Существует
в HTML также тег, который используется для перечеркивания какого-либо
текта. Это теги <s> и </s>. Давайте посмотрим их синтаксис
обычный текст сливается с <s>перечеркнутым</s>
|
Вот что мы получим в результате:
обычный текст сливается с перечеркнутым
|
Размеры текста
Иногда
при написании текста в веб-странице необходимо слегка выделить
определенные фрагменты текста, чтобы читатель обратил на них особое
внимание. HTML предлагает ряд возможностей для такого выделения, в
числе которых еще два новых тега, дающих возможность изменить вид
текста на экране. Это теги <big> и <small>. Они не
оказывают существенного влияния на вид текста, но вызывают некоторые
изменения в размере шрифта.
Шрифт текста между тегами
<big> и </big> немного крупнее обычного текста. Как вы
догадаетесь, действие тегов <small> и </small> прямо
противоположно. Шрифт между ними становиться немного меньше.
обычный текст сливается с <big>большим</big> и <small>маленьким</small>
|
Вот что мы получим в результате:
обычный текст сливается с большим и маленьким
|
Если взять стандартный текст за 100%, то тег <big> увеличивает эту мерку до 110%, а тег <small> уменьшает до 90%.
Верхние и нижние индексы
В
последних версиях HTML появилось еще два новых тега - теги нижнего и
верхнего индексов. Вряд ли вы будете часто использовать эти теги, но
они очень удобны, когда вам нужно отобразить в своей странице такую
специфическую информацию как химические формулы (H2O) или математические формулы (a2=b+c2).
Чтобы
текст выводился в виде нижнего индекса, его следует пометить между
тегами <sub> и </sub>, в виде верхниего - <sup> и
</sup>. Например:
Химическая формула воды - H<sub>2</sub>0
|
Используемая нами формула - a<sup>2</sup>=b+c<sup>2</sup>
|
Вот что мы получим в результате:
Химическая формула воды - H20
|
Используемая нами формула - a2=b+c2
|
На
следующий урок я продолжу тему о стилевом оформлении веб-страницы и
расскажу вам о размерах шрифта. Подводя итоги пройденного сегодня
материала могу сказать, что мы сегодня ознакомились с выравниванием
теста по центру, научились выводить полужирный, курсивный, мерцающий,
подчеркнутый и перечеркнутый тексты, поработали с размерами текста и
узнали о верхних и нижних индексах.
|
Шаг 2: Размещаем в интернет | |
-------------------------
|