Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

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

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

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

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

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

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

Для разделения текста документа на заголовки используется тег <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". Получилось? Поздравляю! Теперь Вы можете делать многостраничные сайты.

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

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

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

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

Реклама

Ночь. Сидит программист за компом, дописывает последние строчки новой программы. Но тут неожиданно звонок в дверь. Программист за дверь - а там смерть с косой, но маленькая. - Блин не вовремя ты дай допишу программу, а там и забирай меня... - Не переживай мужик, я не за тобой. Я за твоим винтом!
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0080 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net