Отправляет email-рассылки с помощью сервиса Sendsay

Технологии эффективного Интернета

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как сделать популярный сайт." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Vladimir N Abramov

Статистика

3.524 подписчиков
0 за неделю
←   Все выпуски   →

Основы web-технологий


Рассылка: Основы web-технологий :: №6
Раздел: Введение в HTML-разметку
Тема: Контейнеры тела документа. Часть 1.
Основные понятия: HTML, тело документа, body, фрейм, стиль, блок, строка, содержание.
Информация о выпуске: В выпуске рассказывается об элементах разметки тела HTML-документа, подробно разбирается их типизация, назначение и применение.

Теги тела документа

Теги тела документа предназначены для управления отображением информации в программе - броузере пользователя. Они описывают гипертекстовую структуру документа при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:

  • иерархических контейнеров и заставок;
  • заголовков (от Н1 до Н6);
  • блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
  • горизонтальных линий;
  • стилей отображения текста (подчеркивание, выделение, курсив);
  • математических описаний, графики и гипертекстовых ссылок.

Тело документа – контейнер ВОDY

Описание тегов тела документа следует начать с тега ВОDY. В отличие от тега НEАD, тег ВОDY имеет атрибуты.

Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес файла, размещенного в одном каталоге с самим документом. Следует заметить, что разные броузеры поддерживают различные дополнительные атрибуты для тега ВОDY.

Таблица 1. Атрибуты
Атрибут Значение
ВGCOLOR=#FFFFFF Цвет фона
ТЕХТ=#0000FF Цвет текста
VLINK =#FF0000 Цвет пройденных гипертекстовых ссылок
LINK =#00FF00 Цвет гипертекстовой ссылки

В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. В табл.2 приведена часть названий цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.

Таблица 2. Цвета
Название Код Название Код
aqua #00FFFF navy #000080
black #000000 olive #808000
blue #0000FF purple #800080
fuchsia #FF00FF red #FF0000
gray #808080 silver #C0C0C0
green #008000 teal #008080
lime #00FF00 white #FFFFFF
maroon #800000 yellow #FFFF00

Так, значения атрибутов в таблице 1 определяют цвет текста как синий, фона — белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега ВОDY указать

<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#3333FF VLINK=#FF3333 LINK=#33FF33>

то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными.

Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля. Если не указана единица измерения, то по-умолчанию подразумевается в пикселах. Например, тег <ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.

Теги управления разметкой

Заголовки

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. Некоторые программы позволяют использовать большее число заголовков, однако на реальных страницах в документах более трех уровней встречается редко, а более 5 — крайне редко.

Тег <P>

Тег <P> применяется для разделения текста на параграфы. Закрывающий тег </P> использовать необязательно. В этом теге используются те же атрибуты, что и в заголовках.

Атрибут АLIGN

Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.

Далее приведены возможные значения атрибута АLIGN:

АLIGN=justify выравнивание по левому и правому краям (реализовано не во всех броузерах).

АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить.

АLIGN=right выравнивание по правому краю. Текст, выровненный по правому краю и не выровненный по левому — концы строк находятся на одном уровне, а начало на разных, — часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге <Р>.

АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается атрибутом АLIGN=сеntеr. Однако он применим не ко всем объектам HTML-страницы, поэтому разработчики Netscape добавили тег <СЕNТЕR>, который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Explorer 3.0 и другими. К тегу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выровненный по левому краю.

Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст "обтекать" графический объект. Для этого следует поместить тег <IMG SRC="/путь/файл.gif"> туда, где должен быть графический объект, и добавить к нему атрибут ALIGN=left, ALIGN=right или АLIGN=center. Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не "обтекал" графику, а прерывался, необходимо применить тег <BR> c атрибутом СLEAR.

Использование тега <ВR>

Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста, и обозначить конец строки. При обычном режиме интерпретации броузер пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR. Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:

<BR СLЕАR=lеft> Текст будет продолжен, начиная с ближайшего пустого левого поля.
<BR СLЕАR=right> Текст будет продолжен, начиная с ближайшего пустого правого поля.
<BR СLЕАR=аll> Текст будет продолжен, как только и левое, и правое поля окажутся пустыми.

Элемент разметки <NOВR>

Тег <NОВR> (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги <NОВR></NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, не заканчивая зону <NОВR> - поставьте там тег <ВR>.

Теги управления отображением символов

Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек броузера и вкусов пользователя.

Теги, управляющие формой отображения

Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью атрибута FONT. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.

Теги <ВIG> и <SMALL> — изменение размеров шрифта

Текст, расположенный между тегами <ВIG></ВIG> или <SMALL> </SMALL>, будет, соответственно, больше или меньше стандартного.

Верхние и нижние индексы

С помощью тегов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги <SUР> и <SUВ> с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.

Атрибут SIZЕ

Атрибут SIZЕ тега <FОNТ> позволяет задавать размер текста в данной области. Если вы не пользуетесь тегом <ВАSЕFОNТ SIZЕ=n> для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3. Некоторые браузеры тег <FONТ> не поддерживают, поэтому желательно употреблять его только внутри текстовой области. Главное преимущество тега <FONТ> состоит в том, что после окончания действия он не разбивает строку, поэтому тег <FONТ> бывает очень полезен для изменения размера шрифта в середине строки.

Атрибут СОLОR

Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.

Теги, управляющие формой отображения, приведены в таблице.

Тег Значение
<I>...</I> Курсив (Italic)
<B>...</B> Усиление (Вold)
<ТТ>...</TТ> Телетайп
<U>...</U> Подчеркивание
<S>...</S> Перечеркнутый текст
<BIG>...</BIG> Увеличенный размер шрифта
<SMALL>...</SMALL> Уменьшенный размер шрифта
<SUB>...</SUB> Подстрочные символы
<SUP>...</SUР> Надстрочные символы

Теги, характеризующие тип информации
Тег Значение
<ЕМ>...</ЕМ> Типографское усиление
<СIТЕ>...</СIТЕ> Цитирование
<STRONG>...</STRONG> Усиление
<СODE>...</СОDE> Отображает примеры кода (например, "коды программ")
<SАМР>...</SАМР> Последовательность литералов
<КВD>...</КВD> Пример ввода символов с клавиатуры
<VAR>...</VAR> Переменная
<DFN>...</DFN> Определение
<Q>...</Q> Текст, заключенный в скобки

Эти теги допускают вложенность и пересечение друг с другом, поэтому все они парные - имеют тег начала и конца. Однако вам при разработке страниц следует помнить, что при использовании таких тегов их отображение зависит от настроек броузера пользователя, которые могут и не совпадать с настройками вашего любимого броузера, в котором вы проверяете результаты своих усилий. Поэтому, если вы хотите, чтобы созданые вами страницы HTML выглядели одинаково хорошо для всех посетителей будующего сайта, то вам желательно иметь установленными на своем компьютере несколько наиболее популярных броузеров разных разработчиков. Особенно, если у вас еще нет достаточного опыта подобной работы.

Спасибо за внимание, встретимся через неделю.

cайт рассылки: web.aho.ru
В избранное