Представляю Вашему вниманию второй выпуск рассылки "Уроки веб-дизайна в примерах".
Содержание выпуска:Форматирование документа
Форматирование документа можно разделить на два типа: логическое и физическое. Логическое форматирование будет рассмотрено в одном из следующих выпусков. В этом выпуске будет подробно описан второй тип.
Для разделения текста документа на заголовки используется тег <Hn> (закрывающий тег </Hn> обязателен), где n может принимать размер от 1 до 6. Текст внутри этого элемента выделяется жирным шрифтом и отображается размером, зависящим от n (n=1 самый крупный, n=6 самый мелкий). С помощью этого элемента можно обозначить структуру страницы. Кроме этого, текст, заключенный в элемент <Hn>, имеет больший вес для поисковых систем.
Пример 1.
| Код | Как будет выглядеть |
|---|---|
| <H1>Заголовок 1</H1> | Заголовок 1 |
| <H2>Заголовок 2</H2> | Заголовок 2 |
| <H3>Заголовок 3</H3> | Заголовок 3 |
| <H4>Заголовок 4</H4> | Заголовок 4 |
| <H5>Заголовок 5</H5> | Заголовок 5 |
| <H6>Заголовок 6</H6> | Заголовок 6 |
Текст состоит из параграфов. Для описания параграфа используется тег <P> (закрывающий тег </P> обязателен).
Пример 2.
| Код | Как будет выглядеть |
|---|---|
| <P align="left"> Выравнивание по левому краю </P> | Выравнивание по левому краю |
| <P align="center"> Выравнивание по центру </P> | Выравнивание по центру |
| <P align="right"> Выравнивание по правому краю </P> | Выравнивание по правому краю |
| <P align="justify"> Выравнивание по ширине страницы. Для параграфов содержащих большое количество текста этот вариант выравнивания выглядит наиболее красиво. </P> | Выравнивание по ширине страницы. Для параграфов содержащих большое количество текста этот вариант выравнивания выглядит гораздо лучше. |
| Текст после <BR> переходит на новую строчку. | Текст после переходит на новую строчку. |
Выделение текста
Как выделить часть текста? Начертание текста можно изменить тегами <B> (bold, жирный), <I> (italic, курсив), <U> (underline, подчеркивание), <STRIKE> (зачеркивание), <SUP> (superscript, верхний индекс) и <SUB> (subscript, нижний индекс). Закрывающие теги обязательны. Ниже приведем пример использования этих тегов.
Пример 3.
| Код | Как будет выглядеть |
|---|---|
|
Животноводческое хозяйство <B>"Пушистик"</B> начало выращивание <I>декоративных</I> крокодилов. При покупке
<U>необходимо</U> иметь крепкий ошейник. Гарантия - <STRIKE>два</STRIKE> три месяца со дня покупки<SUP>*</SUP>. <BR> <SUP>*</SUP> гарантия распространяется только на крокодилов марки КРОКОДИЛ<SUB>декоративный</SUB> |
Животноводческое хозяйство "Пушистик" начало выращивание декоративных крокодилов. При покупке необходимо иметь крепкий ошейник. Гарантия - * гарантия распространяется только на крокодилов марки КРОКОДИЛдекоративный |
Размер и цвет текста
Дополнительные возможности по оформлению текста осуществляет тег <FONT> (закрывающий тег </FONT> обязателен). Свойство <SIZE> этого тега определяет размер шрифта и может принимать значения от 1 (мелкий) до 6 (крупный).
Пример 4.
| Код | Как будет выглядеть |
|---|---|
| <FONT size="1">Размер 1</FONT> | Размер 1 |
| <FONT size="2">Размер 2</FONT> | Размер 2 |
| <FONT size="3">Размер 3</FONT> | Размер 3 |
| <FONT size="4">Размер 4</FONT> | Размер 4 |
| <FONT size="5">Размер 5</FONT> | Размер 5 |
| <FONT size="6">Размер 6</FONT> | Размер 5 |
Свойство <COLOR> тега <FONT> тега <FONT> задает цвет текста. Значение можно указывать либо в виде #RRBBGG (RR - наполнение красным цветом, BB - синим и GG - зеленым; значения задаются в шестнадцатеричном виде), либо используя названия цветов (red, blue, yellow и т.д).
Пример 5.
| Код | Как будет выглядеть |
|---|---|
| Исследования, проведенные группой <FONT COLOR=#888888>"Люди и звери"</FONT>, показали, что <FONT COLOR=green>зеленые</FONT> и <FONT COLOR=yellow>желтые</FONT> крокодилы доброжелательно относятся к людям. <FONT COLOR=red>Красные</FONT> крокодилы ведут себя достаточно агрессивно, а <FONT COLOR=blue>синие</FONT> - равнодушно. | Исследования, проведенные группой "Люди и звери", показали, что зеленые и желтые крокодилы доброжелательно относятся к людям. Красные крокодилы ведут себя достаточно агрессивно, а синие - равнодушно. |
Ссылки
Ссылка на другой HTML документ имеет следующий вид: <A HREF="url">текст ссылки</A>, где url - адрес станицы. Рассмотрим это на примере, но вначале создайте документ с именем "test.html" (без кавычек) в той же директории, что и основная страничка. Теперь, можно на основную страничку скопировать приведенный ниже пример.
Пример 6.
| Код | Как будет выглядеть |
|---|---|
| <A HREF="test.html">страница test.html</A> | страница test.html |
При клике на текст "страница test.html" браузер откроет страницу "test.html". Получилось? Поздравляю! Теперь Вы можете делать многостраничные сайты.
Анонс следующего выпуска.
Что могут ссылки? Как сделать подсвечивающиеся ссылки? Как задать цвет фона или использовать фоновое изображение? А можно ли использовать несколько шрифтов? На эти вопросы Вы получите ответ в следующем выпуске рассылки.
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").