Готовимся к пенсии: осваиваем Интернет
Шрифт:
Ну, а теперь запомнили? Еще повторить?
Ладно… в общем, объясняю: я буду писать буквы всех тегов прописными (заглавными) буквами исключительно из-за того, чтобы вам легче было отличать изменяемую часть от постоянной. Договорились? А вы можете писать как хотите. Как удобней.
Добавляем в шаблон текст
Итак, изменим содержимое нашего шаблона, вставив туда немного текста (листинг П1.4).
Ну
Рис. П1.9. Файл listing_1.4.html в окне браузера
Итак, в верхней строке браузера у нас отобразилось название странички: Моя Первая Страничка, а в самом окне — текст, который мы ввели между тегами <BODY> и </BODY>.
Ну вот, уже кое-что становится понятно. А раз так — идем дальше!
Форматируем содержимое странички
Для того чтобы текст на наших страничках смотрелся красиво, его необходимо отформатировать. Для этого есть несколько тегов, вот ими сейчас и займемся.
Заголовки
Обычно в каждом тексте имеются заголовки разных уровней. Самый крупный заголовок называется заголовком 1-го уровня, самый маленький — 6-го. Тегами заголовков служат парные теги <Hn> и </Hn>, где n — номер уровня заголовка. Вернемся к нашему шаблону shablon.html и внесем в него некоторые изменения (листинг П1.5).
В браузере же это будет выглядеть так, как показано на рис. П1.10.
Рис. П1.10. Заголовки
Текст
В типографике существует множество шрифтов, однако в веб-дизайне для набора текстов веб-страниц используется ограниченное их количество.
Как правило, это:
Georgia;
Times New Roman;
Arial;
Verdana;
Comic Sans MS.
Шрифты подразделяются на шрифты с засечками (типа Georgia, Times New Roman), шрифты без засечек (типа Arial, Verdana) и фантазийные (типа Comic Sans MS).
Чтобы отделить один абзац текста от другого, следует применять тег . А если при этом нужно выровнять текст абзаца к левой или правой стороне страницы, то делается это с помощью атрибута (служебного слова) align так:
<P align=left> — если нужно выровнять абзац к левой стороне;
<P align=right> — если нужно выровнять абзац к правой стороне.
Наберем отрывок из рассказа Валентина Катаева "Поединок" с заголовком и разбивкой на абзацы, под текстом напишем фамилию автора, сдвинув ее вправо. Сохраним этот файл под именем, скажем, poedinok.html (листинг П1.6).
Рис. П1.11. Файл poedinok.html в браузере
А теперь откроем этот файл в браузере (рис. П1.11).
Если текст нужно начать не с нового абзаца, а просто со следующей строки (например, в стихотворениях), то вместо тега ставят тег <BR> (листинг П1.7).
Рис. П1.12. Принудительный перевод строчек с помощью тега <BR>
В браузере получится следующая картина (рис. П1.12).
Для выделения текста жирным шрифтом нам пригодятся теги <B> или <STRONG>. Имейте в виду, что оба они имеют пару — закрывающий тег (с косой чертой).
А вот чтобы сделать текст наклонным, существует тег <I>, который также имеет парный закрывающий тег </I>.
Для подчеркивания текста служит тег <U>, для зачеркивания — тег <STRIKE>. Они также имеют закрывающие теги </U> и </STRIKE> соответственно.
А можно ли сделать текст, к примеру, одновременно и жирным, и наклонным? Конечно можно, для этого надо применить к тексту оба тега — нужно только следить, чтобы они были правильно вложены, например, так:
<STRONG><I>Этот текст и жирный и наклонный</I></STRONG>
А вот так неправильно:
<STRONG><I>Этот текст и жирный и наклонный</STRONG></I>
Поясню это на примере (листинг П1.8).
Сохраните этот файл под любым именем, например variant.html, и затем откройте его в браузере. Получим следующее (рис. П1.13).
Рис. П1.13. Варианты текста
Для того чтобы изменить цвет текста, существует тег <FONT> с атрибутом COLOR, также имеющий свою пару — закрывающий тег </FONT>. Цвет может быть задан как просто названием цвета, так и числовым его значением — главное, не забывать перед числовым значением ставить знак решетки: #.
Например:
<FONT color="red">Это красный цвет</FONT>
<FONT color=#FF0000>Это тоже красный цвет</font>
В табл. П1.1 приведены числовые значения самых распространенных цветов.
Можно также изменять и размер шрифта, достаточно добавить к нему тег <FONT> с атрибутом SIZE.
Таблица П1.1. Числовые значения цветов
А атрибутом face можно задать гарнитуру шрифта. Тег <FONT> также имеет свою закрывающую пару: </FONT>.
К сожалению, из-за строгого ограничения на объем книги, я не могу, как бы ни хотелось, рассказать здесь обо всем, хотя бы понемногу. Но самое необходимое, все же, стараюсь объяснить. Попробую показать на примере варианты применения гарнитур, размеров и цветов шрифта (листинг П1.9).