Главная :: Архив рассылки :: Форматирование документа

Форматирование документа

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию второй выпуск рассылки "Уроки веб-дизайна в примерах".

Содержание выпуска:

Форматирование документа.
Выделение текста.
Размер и цвет текста.
Ссылки.
Анонс следующего выпуска.

Форматирование документа

Форматирование документа можно разделить на два типа: логическое и физическое. Логическое форматирование будет рассмотрено в одном из следующих выпусков. В этом выпуске будет подробно описан второй тип.

Для разделения текста документа на заголовки используется тег <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

Текст состоит из параграфов. Для описания параграфа используется тег  (закрывающий тег  обязателен).

Пример 2.

Код	Как будет выглядеть
<P align="left"> Выравнивание по левому краю </P>	Выравнивание по левому краю
<P align="center"> Выравнивание по центру </P>	Выравнивание по центру
<P align="right"> Выравнивание по правому краю </P>	Выравнивание по правому краю
<P align="justify"> Выравнивание по ширине страницы. Для параграфов содержащих большое количество текста этот вариант выравнивания выглядит наиболее красиво. </P>	Выравнивание по ширине страницы. Для параграфов содержащих большое количество текста этот вариант выравнивания выглядит гораздо лучше.
Текст после <BR> переходит на новую строчку.	Текст после переходит на новую строчку.

Выделение текста

Как выделить часть текста? Начертание текста можно изменить тегами  (bold, жирный),  (italic, курсив),  (underline, подчеркивание), <STRIKE> (зачеркивание),  (superscript, верхний индекс) и  (subscript, нижний индекс). Закрывающие теги обязательны. Ниже приведем пример использования этих тегов.

Пример 3.

Код

Как будет выглядеть

Животноводческое хозяйство "Пушистик" начало выращивание декоративных крокодилов. При покупке необходимо иметь крепкий ошейник. Гарантия - <STRIKE>два</STRIKE> три месяца со дня покупки*.
 * гарантия распространяется только на крокодилов марки КРОКОДИЛдекоративный

Животноводческое хозяйство "Пушистик" начало выращивание декоративных крокодилов. При покупке необходимо иметь крепкий ошейник. Гарантия - ~~два~~ три месяца со дня покупки^*.
^* гарантия распространяется только на крокодилов марки КРОКОДИЛ_{декоративный}

Размер и цвет текста

Дополнительные возможности по оформлению текста осуществляет тег  (закрывающий тег  обязателен). Свойство <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> тега  тега  задает цвет текста. Значение можно указывать либо в виде #RRBBGG (RR - наполнение красным цветом, BB - синим и GG - зеленым; значения задаются в шестнадцатеричном виде), либо используя названия цветов (red, blue, yellow и т.д).

Пример 5.

Код

Как будет выглядеть

Исследования, проведенные группой "Люди и звери", показали, что зеленые и желтые крокодилы доброжелательно относятся к людям. Красные крокодилы ведут себя достаточно агрессивно, а синие - равнодушно.

Исследования, проведенные группой "Люди и звери", показали, что зеленые и желтые крокодилы доброжелательно относятся к людям. Красные крокодилы ведут себя достаточно агрессивно, а синие - равнодушно.

Ссылки

Ссылка на другой HTML документ имеет следующий вид: <A HREF="url">текст ссылки</A>, где url - адрес станицы. Рассмотрим это на примере, но вначале создайте документ с именем "test.html" (без кавычек) в той же директории, что и основная страничка. Теперь, можно на основную страничку скопировать приведенный ниже пример.

Пример 6.

Код	Как будет выглядеть
<A HREF="test.html">страница test.html</A>	страница test.html

При клике на текст "страница test.html" браузер откроет страницу "test.html". Получилось? Поздравляю! Теперь Вы можете делать многостраничные сайты.

Анонс следующего выпуска.

Что могут ссылки? Как сделать подсвечивающиеся ссылки? Как задать цвет фона или использовать фоновое изображение? А можно ли использовать несколько шрифтов? На эти вопросы Вы получите ответ в следующем выпуске рассылки.

Благодарю за внимание! сайт: http://design.wmplace.net

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Форматирование документа

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6