Среда, 22.11.2017, 23:07
Приветствую Вас Гость | RSS

Веб-планета

Уроки 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

На следующий урок я продолжу тему о стилевом оформлении веб-страницы и расскажу вам о размерах шрифта. Подводя итоги пройденного сегодня материала могу сказать, что мы сегодня ознакомились с выравниванием теста по центру, научились выводить полужирный, курсивный, мерцающий, подчеркнутый и перечеркнутый тексты, поработали с размерами текста и узнали о верхних и нижних индексах.
Меню сайта
Шаг 1: Создаем сайт
Шаг 2: Размещаем в интернет
Шаг 3: Раскручиваем сайт
Мини-чат
РЕКЛАМА
    -------------------------
    Форма входа
    Наш опрос
    Оцените мой сайт
    Всего ответов: 44
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика
    Copyright MyCorp © 2017
    Создать бесплатный сайт с uCoz
    Каталог ссылок, Top 100.