Надеюсь вы поэкспериментировали с теми тегами, о которых я рассказал
в домашнем задании. Впрочем, если вы еще не сделали этого или не поняли
для чего они нужны, я сейчас расскажу.
Итак, в домашнем задании я упомянул о следующих тегах:
<b>текст</b> - жирный текст
<u>текст</u> - подчеркнутый текст
<i>текст</i> - наклонный шрифт
<h[число]>текст</h[число]> - устанавливает
размер шрифта. Число может принимать значения от 1 до 6. Напрмер,
<h3>текст</h3>
Объясняю:
Тег <b> необходим, если вы хотите выделить текст жирным
шрифтом. Например: <b>Разжиревший текст (видимо, он сала
объелся :))</b>
Тег <u> необходим, если вы хотите сделать текст
подчеркнутым. Например: <u>Подчеркнутый текст</u>
Тег <i> необходим, если вы хотите сделать текст наклонным.
Например: <i>А этот текст, видимо водки напился</i>
Также, вы можете комбинировать эти теги. Например:
<b><u><i>Текст пьяный и разжиревший в придачу</b></u></i>
О последнем теге:
Существует несколько способов установить размер шрифта. Один из
них - теги h1...h6. Второй способ мы изучим сегодня, но сначала о них.
Браузер понимает
шесть стандартных размеров заголовка - от первого до шестого. Первый
является самым большим, а шестой самым маленьким. При этом текст,
находящийся внутри тега заголовка, автоматически
выделяется жирным шрифтом. Правда, лично я предпочитаю эти теги не
использовать. Вместо них гораздо лучше использовать следующий тег:
<font> - устанавливает параметры шрифта для текста,
находящегося внутри него.
Впрочем, пора бы уже объявить новый параграф.
Текст такой, текст сякой
Этот тег может иметь следующие параметры:
color - задает цвет текста
size - задает размер текста
face - задает гарнитуру шрифта
Например, для того, чтобы набрать заголовок этого параграфа, я
использовал именно этот тег:
<font size=4><b>Текст такой, текст
сякой</b></font>
Давайте поэкспериментируем.
Задаем размер шрифта: <font size=2>Размер
№2</font>
Задаем гарнитуру шрифта: <font face="Lucida Console">Ничего себе гарнитура шрифта!!!</font>
Задаем цвет шрифта: <font color=blue>Видимо,
этот текст страдает с похмелья, аж посинел весь</font>
Высший пилотаж: <font face="Betsy Flanagan" color="Green"
size=5><b>Да
здравствует веб - программирование !!!</b></font>
В каком порядке дожны следовать параметры? В любом. Правда, есть
такой нюанс. Значения параметров желательно писать в кавычках. Особенно
это касается параметров, значения которых состоят более чем из одного
слова: <font face="Lucida console"...
Несколько советов: Не следует злоупотреблять различными гарнитурами
шрифтов. Браузер, отображая шрифт, берет его в закромах операционной
системы. Если там указанного шрифта не будет, то он будет использовать
шрифт по умолчанию, так что толку от <font face="Terylene Top"... не
будет.
Эта ситуация усугубляется тем, что у посетителей сайта может быть
любая операционная система: Windows, Fedora Core Linux, да хоть
Macintosh. Вряд ли экзотический шрифт, имеющийся у вас на компе,
найдется там. Так что, делайте выводы.
Книжка-раскраска
Поговорим о цветах текста. Параметр "color" тега "font" вам уже
известен, причем мы уже заставили текст посинеть. Но вот незадача - мне
хочется, чтобы текст был такого же цвета, как и фон у сайта рассылки
(если кому интересно - песочный светлый). Как это сделать? О красном
браузеру
сказать легко: <font color=red... А вот как сказать об оттенке
зеленого лимона? Задача не из простых. Вообще говоря, по памяти я
оттенок зеленого лимона вспомнить не смогу, надо смотреть в справочнике.
Глянув в справочник, мы увидим, что код цвета зеленого лимона - CAFF40.
Как же
это число (да да, именно число. Шестнадцатиричное.) использовать?
Все очень просто. Надо его подставить в параметр "color" тега "font".
Смотрите фокус: <font color=#CAFF40>текст
позеленел</font> Перед кодом цвета нужно ставить решетку.
Кавычки необязательны.
Их нужно использовать, если значение параметра имеет хотя бы один
пробел. Откуда же берется этот код? Принципы построения этого кода очень
просты. Каждый цвет является комбинацией трех исходных: красного,
зеленого и синего: Red, Green, Blue - RGB-палитра.
Код цвета состоит
из шести символов (например, FF0000). Первые два символа показывают
интенсивность красного канала, следующие две - зеленого, а последние -
синего. Почему же там бывают буквы и цифры? Код представляет собой
шестнадцатиричное число. Цифры от 0 до 9 означают то же самое, что и
обычно, а буквы означают:
A - 10, B - 11, C - 12, D - 13, E - 14, F - 15. Таким образом, с
помощью двух шестнадцатиричных чисел можно закодировать 256 различных
значений интенсивности от 00 до FF. Отсюда получается, что FF0000
означает красный цвет, а 0000FF - синий. Где взять код нужного цвета? Я
лично предпочитаю использовать Photoshop.
Там при выборе цвета можно увидеть его hex-код.
Параграфы и выравнивание текста
Давайте поговорим о том, как разделить текст на блоки и при этом
выровнять его. Для этого существуют параграфы. Для того, чтобы вывести
текст (да и не только текст)
в виде отдельного блока со своим выравниванием (по левому краю, по
правому краю, по центру) его необходимо заключить в тег
<p></p>. Именно таким образом
я вывожу текст после заголовка. Для того, чтобы выровнять текст в
параграфе по центру, необходимо написать так: <p
align=center>текст параграфа</p>
Существуют четыре типа выравнивания: left, center, right, justify,
т.е. по левому краю, по центру, по правому краю, по ширине (этот тип
работает только в Internet Explorer'е).
Кстати, не забывайте проверять полученные знания на практике -
создайте тестовую веб-страницу (как это сделать - смотрите выпуск №2) и
экспериментируйте.
Параграфы не всегда удобны. Дело в том, что содержимое двух
параграфов отделяется друг от друга несколькими пустыми строками. Иногда
же просто требуется перенести текст
на новую строку и выровнять его. Для этого можно использовать тег
<div></div>. Для выравнивания текста в нем используется тот
же самый параметр align. Например:
<div align=center>текст</div>
Практика
Попробуем применить полученные знания на практике.
Если у вас стоит Денвер, то в папке "Z:\home\webdev\www" (см.
выше) создаем текстовый документ, переименовываем его в "index.htm" (в
принципе, вы можете дать ему расширение *.html или *.php). Следом
открываем его с
помощью блокнота (если вы установили специальный редактор для
программистов, то с его помощью). Внутри пишем следующий текст:
<html>
<head>
<title>Тестовая страница</title>
</head>
<body>
<p align=center><font size=6
color=red><b>Заголовок</b></font></p>
<p align=right>Перед кодом цвета нужно ставить
решетку. Кавычки необязательны. Их нужно использовать, если значение
параметра имеет хотя бы один пробел. Откуда же берется этот код?
Принципы построения этого кода очень просты. Каждый цвет является
комбинацией трех исходных: красного, зеленого и синего: Red, Green, Blue
- RGB-палитра. Код цвета состоит из шести символов (например, FF0000).
Первые два символа показывают интенсивность красного канала, следующие
две - зеленого,
а последние - синего. Почему же там бывают буквы и цифры? Код
представляет собой шестнадцатиричное число. Цифры от 0 до 9 означают то
же самое, что и обычно, а буквы означают: A - 10, B - 11, C - 12, D -
13, E - 14, F - 15. Таким образом, с помощью двух шестнадцатиричных
чисел можно закодировать 256 различных значений интенсивности от 00 до
FF. Отсюда получается, что FF0000 означает красный цвет, а 0000FF -
синий. Где взять код нужного цвета? Я лично предпочитаю использовать
Photoshop. Там при выборе цвета можно
увидеть его hex-код.</p>
</body>
</html>
Сохраняем, запускаем через браузер и любуемся результатом.