Антонова Г.М., Байков А.Ю., Рыбалкин А.Д. Современные средства ЭВМ и телекоммуникаций

Подождите немного. Документ загружается.

Пример 1.

<HTML>

<HEAD>

<TITLE>

Первый пример простого документа на языке гипертекстовой разметки

</TITLE>

</HEAD>

<BODY>

Стили форматирования в HTML

<H1>Стиль заголовка первого уровня. Самый крупный и тяжёлый

</H1>

<H2>Стиль заголовка второго уровня с меньшими размерами и толщиной шрифта

</H2>

<H3>Стиль заголовка третьего уровня ещё меньше

</H3>

<H4> Стиль заголовка четвёртого уровня

</H4>

<H5> Стиль заголовка пятого уровня

</H5>

<H6> Стиль заголовка шестого уровня. Самый маленький и светлый из базовых шрифтов

</H6>

<P>Тег для выделения абзаца. Его можно использовать без завершающего тега, так как

новый тег Р по смыслу означает не только начало, но и конец предыдущего абзаца.

Грамотно с точки зрения языка HTML и удобно для броузера завершать абзац

закрывающим тегом

</P>

</BODY>

</HTML>

Для форматирования абзаца используются теги <P> - создание нового абзаца и

<Br> - код пропуска строки или большой отступ.

Для выравнивания, видоизменения и выделения текста используются теги <P> с

атрибутами ALIGN. Теги <P ALIGN="right"> . . </P> выполняют выравнивание по

правому краю. При задании выравнивания по правому краю концы строк находятся на

одном уровне, а начало на разных.

При задании выравнивания по левому краю с помощью тегов<P ALIGN="left"> . .

</P> начальные элементы строк находятся на одном уровне, а концы на разных. Этот вид

выравнивания часто используется при написании эпиграфов или просто для

оригинальности.

Теги < P ALIGN="center"> . . </P> выполняют выранивание по центру.

Форматирование шрифта выполняют теги: <B> </B> - жирный текст; <I> </I> -

курсив;<U> </U> - подчеркнутый текст.

Вид шрифта - очень важная часть дизайна Web-страниц. Он позволяет придавать

тексту определенную выразительность, эмоциональность. Строгие шрифты показывают

важность текста, его официальность. Рукописные шрифты придают тексту некоторую

красоту, поэтичность и т.д. Существует огромное множество шрифтов, но HTML сейчас

только начинает развиваться в области использования шрифтов. В классической версии

языка HTML 3.0 эта проблема решена единственным образом - доступны шрифты,

установленные в системе пользователя с помощью атрибута FACE= в теге FONT. Сейчас

появляются новые технологии. Например, загрузка шрифтов из Интернета или

встраивание шрифтов непосредственно в документ. Ещё одной новаторской идеей в этой

области является использование графических литер с определенным начертанием вместо

текста. После загрузки 2-3 листов, написанных таким методом, почти все буквы

оказываются загруженными в кеш броузера, и открытие последующих страниц

происходит очень быстро.

Для задания размера шрифта используется атрибут SIZE= в теге FONT. Можно

задавать базовый размер шрифта тегом <BASEFONT SIZE=x> для использования на всей

странице, а в нужных участках текста использовать атрибут SIZE= для задания размера

определенного участка. По умолчанию используется тег <BASEFONT SIZE=3>. Заголовок

<H1> имеет размер 6. Чтобы сделать шрифт больше, чем <H1>, можно выбрать размер

шрифта, равный 7. Основное отличие тега <FONT> от <Hx> заключается в том, что он не

разбивает строку. В HTML можно использовать вышеуказанный список шрифтов в теге

<FONT>. Можно перечислить в этом списке несколько шрифтов, из которых броузер

выберет первый, установленный в системе, и использует его для отображения текста.

Например <FONT FACE=" Arial, COMIC SANS MS, Tahoma, AG_Cooper">

текст</FONT>.

Размеры символов (1,3,5,7) в тексте указываются тегами:

<FONT SIZE="1">, < FONT SIZE="3">, < FONT SIZE="5">, < FONT SIZE="7">.

Поместив текст между каким-либо из этих тегов и закрывающим тегом </FONT> получим

шрифт нужного размера.

Вид шрифта в тексте:

<FONT FACE="Times New Roman">ABC</FONT>.

<FONT FACE="System">DEF</FONT>.

<FONT FACE="Arial">GHI</FONT>.

<FONT FACE="Courier">xyz</FONT> .

Для задания размера текста существуют и другие теги. Это теги <BIG> </BIG> и

<SMALL> </SMALL>. Заключенный между ними текст будет соответственно больше или

меньше окружающего текста.

Можно использовать все виды красок на странице, применяя тег <FONT> с

атрибутом COLOR=.

Цвета текста в документе задаются в кодировке RGB - шестью шестнадцатеричными

числами или именованными цветами, например:

<FONT COLOR="#FF0000"> Красный текст</FONT>.

< FONT COLOR ="#CF2CD4">Лиловый текст</FONT>

<FONT COLOR ="#0000FF"> Синий текст </FONT>

< FONT COLOR="#00FF00"> Зелёный текст</FONT>

<FONT COLOR="#808080"> Серый текст</FONT>

<FONT COLOR="silver"> Серебряный текст </FONT>

<FONT COLOR="green" SIZE="4"> Зелёный текст с размерами шрифта 4. </FONT>

Наименования цветов приведены в Таблице 4.1.

Атрибуты тега <BODY> для задания цвета фона документа - BGCOLOR; цвета

текста - TEXT; цвета ссылок - LINK; цвета просмотренных ссылок – VLINK; ссылок в

момент нажатия на них правой кнопкой – ALINK. Цвета текста, ссылок и фона задаются в

кодировке RGB - шестью шестнадцатеричными числами или именованными цветами,

например:

<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " LINK="# FF0000 " VLINK="#

CF2CD4 " ALINK="# C033FF ">

С помощью атрибута BACKGROUND тега <BODY> можно вставить небольшие

рисунки (размножаемые Web-броузером) в формате gif (файл - background.gif) или jpg

(файл - background.jpg), т.е. создать графический фон:

<BODY BACKGROUND="background.gif"> - размноженный рисунок возникает на

заднем плане.

Для наилучшего усвоения информации используют различные способы выделения

абзацев. Тег списка <DL> (Definition List) позволяет создавать списки определений, т.е.

отдельные абзацы с отступом без нумерации или маркеров. В конце определения

необходимо поместить закрывающий тег </DL>. Списки состоят из двух частей:

определения (DT) и описания (DD). Атрибут title показывает текст в виде всплывающей

подсказки.

Таблица 4.1.

Именованные цвета

black

Maroon ›

Green ›

Olive ›

Navy ›

Purple ›

Teal ›

Gray ›

Silver ›

Red ›

Lime ›

Yellow ›

Blue ›

Fuchsia ›

Aqua ›

White ›

Пример 2.

<HTML>

<BODY>

<DT>HTML

<DD>Это язык разметки гипертекста

<DT>Броузер

<DD> Это программа для просмотра гипертекста в интернете

</DL>

</BODY>

</HTML>

В результате такого форматирования получим определения следующего вида.

HTML

Это язык разметки гипертекста

Броузер

Это программа для просмотра гипертекста в интернете

Тег <BLOCKQUOTE> создает поля слева и справа от текста.

Атрибуты LEFTMARGIN=n, RIGHTMARGIN=n, TOPMARGIN=n, где n - ширина

поля в пикселях, указываются в теге <BODY> для задания левого, правого и верхнего

полей для всей страницы.

Теги <PRE> и </PRE> используются для отображения текста точно так, как он

записан в HTML (заранее отформатированного текста).

Теги <MULTICOL> и </MULTICOL> выводят текст в несколько колонок

(используются только для броузера Netscape 3.0 и выше).

Они имеют следующий полный формат: <MULTICOL COLS="x" GUTTER="у">

текст </MULTICOL>, где x - количество столбцов, у - расстояние между столбцами.

Размещение текста в одну строку с добавлением в нижней части окна

горизонтальной полосы прокрутки выполняется следующим образом

 поместить текст между тегами <NOBR>;

 если надо оборвать строку в определенном месте, - поставить там тег <BR>;

 если надо задать места переноса текста - поставить там тег <WBR>.

Для задания отступа перед новым абзацем используется тег <TAB INDENT=n>, где

n - число так называемых n-пробелов.

Установка пяти подряд расположенных пробелов между буквами А и Я с

применением символа неразрушающего пробела - &nbsp:

А     Я

Для создания линий используется тег <HR> с атрибутами SIZE=, WIDTH=,

ALIGN=, задающими соответственно высоты в пикселях, ширины в пикселах или в

процентах от размера окна и выравнивание. Дополнительный атрибут NOSHADE создает

линию без рельефности. С помощью этих атрибутов можно создавать очень

разнообразные размещения текста. Например, тег <HR NOSHADE SIZE=30

WIDTH="30%" ALIGN=LEFT> создаёт толстую линию на треть страницы,

расположенную слева.

4.1.4 Анимация текста

Бегущая строка создаётся с помощью тега <MARQUEE>, который позволяет

выводить информацию в виде бегущей строки. К сожалению, он работает только в Internet

Explorer. Если просмотреть этот тег в другом броузере, то будет видна статичная строчка

текста. Для создания бегущей строки необходимо поместить текст между тегами

<MARQUEE></MARQUEE> и он "побежит". Существует несколько атрибутов этого тега.

Атрибут ALIGN= размещает текст в верхней (TOP), средней (MIDDLE) или

нижней (BOTTOM) части бегущей строки.

Атрибут BEHAVIOR= управляет движением текста. Если его нет, то текст

пробегает справа налево. Если задать BEHAVIOR=SCROLL, то текст будет просто

пробегать по экрану. Это значение по умолчанию. Если указать BEHAVIOR = SLIDE, то

текст выползает на экран и останавливается. Если использовать параметр ALTERNATE,

то текст будет сначала выползать на экран, а потом, отскакивать от боковых стенок, т.е.

прыгать.

Атрибут BGCOLOR = задает цвет фона бегущей строки. Для указания цвета

используются значения кода в шестнадцатеричном формате или названия цвета.

Атрибут DIRECTION = указывает направление движения текста. Налево – LEFT,

направо – RIGHT.

Атрибуты HEIGHT= и WIDTH= задают соответственно толщину и ширину

бегущей строки в пикселях или процентах от размера окна.

Атрибуты HSPACE= и VSPACE= задают горизонтальные и вертикальные поля

вокруг бегущей строки.

Атрибут LOOP= задает количество "пробегов" текста. Если бедный текст должен

бегать вечно, то не нужно использовать этот атрибут или задать LOOP=INFINITE.

Атрибут SCROLLAMOUNT= определяет скорость "пробегания". Задается числами.

Число 1 даёт скорость улитки, ползущей по монитору, а при SCROLLAMOUNT=8000

скорость движения настолько велика, что ничего не возможно увидеть.

Для правильного задания скорости бегущей строки необходимо использовать

вместе с предыдущем атрибутом атрибут SCROLLDELAY=, задающий скорость

прорисовки текста в миллисекундах.

Мигающий текст можно создать с помощью тегов <BLINK> </BLINK>. Текст,

расположенный между ними, должен мигать. Используется для выделения новой

информации. Работает, к сожалению, только в броузере Netscape Navigator.

Для привлечения внимания посетителя сайта некоторые тексты можно

сопровождать фоновой музыкой. Она создаётся с помощью тега <BGSOUND SRC = "имя

файла в формате wav, avi, mid" LOOP=x>, где x - число повторений звукового файла.

Можно написать LOOP=INFINITE, чтобы файл повторялся вечно.

4.1.5. Вставка рисунков.

Вставка рисунка на страницу из файла в формате gif или jpg выполняется тегом

<IMG> с атрибутами, перечисленными ниже.

<IMG SRC="имя файла или полного пути в Интернете " ALT="текст"

ALIGN=расположение WIDTH=ширина HEIGHT =высота >.

Атрибут ALT содержит текст, который выводится вместо рисунка, если он не

найден с помощью указанного пути.

Атрибут ALIGN указывает место расположения изображения и может принимать

следующие значения: TOP - последующий текст располагается в верхней части

изображения; BOTTOM - последующий текст располагается в нижней части изображения;

LEFT - изображение находится в левой части листа, текст обтекает изображение справа;

MIDDLE - изображение находится в центре листа, RIGHT - изображение находится в

правой части листа, текст обтекает изображение слева.

Ширина задаёт ширину изображения в пикселях.

Высота задаёт высоту изображения в пикселях.

Атрибуты ALT, ALIGN, WIDTH, HEIGHT являются необязательными.

Например: <IMG SRC="links.gif" ALT="Links" WIDTH="47" HEIGHT="47">.

Обтекание графического объекта текстом можно получить, если выполнить

следующие действия.

 Поместить тег <IMG SRC="/путь/имя файла"> в том месте, где должен быть

графический объект

 Добавить атрибут ALIGN=LEFT, ALIGN=RIGHT или ALIGN=CENTER.

 Добавить атрибуты: HSPACE= ширина горизонтальных полей и VSPACE= ширина

вертикальных полей, отделяющих изображение от текста.

Можно создать рамку вокруг рисунка или обрамление таблицы текстом. Остановка

в определенном месте обтекания текстом объекта и продолжение текста ниже объекта

выполняются с помощью тегов:

<BR CLEAR=LEFT> - начиная с ближайшего пустого левого поля.

<BR CLEAR=RIGHT> - начиная с ближайшего пустого правого поля.

<BR CLEAR=ALL> - текст будет продолжен, когда и левое и правое поля будут

пустыми.

Рамка вокруг изображения – задается в каком-либо теге с помощью атрибута

BORDER=n, где n - ширина рамки в пикселях.

В теге <IMG> можно задать рамку вокруг изображения, если это изображение

является ссылкой.

4.1.6. Вставка гиперссылок.

Текстовые и графические ссылки могут указывать на удалённые разделы в

пределах одного большого документа. Для таких ссылок необходимо создать две части:

якорь и непосредственно ссылку. Якорь определяет ту точку, в которую организуется

переход из места расположения ссылки. Ссылка использует имя якоря вместо имени

файла. Задаётся в теге <A HREF=”#Якорь”> </A>. Перед именем якоря указывается

специальный символ #. Между открывающим и закрывающим тегами располагается текст

ссылки, на котором производится щелчок для перехода по ссылке. В месте расположения

якоря ставится открывающий тег <A NAME=” Якорь”>. Между открывающим и

закрывающим </A> тегами вводится текст, который будет показан на экране.

Пример 3.

<HTML>

<HEAD>

<TITLE>

Ссылки в пределах одного документа

</TITLE>

</HEAD>

<BODY>

<H1>Ссылки в пределах одного документа</H1>

<P>

<OL>

<LI><A HREF=”#Малина”>Mалина</A>

<LI><A HREF=”#Яблоко”>Яблоко</A>

<LI><A HREF=”#Арбуз”>Арбуз</A>

<P>Длинный абзац с текстом, после которого расположены пояснения к ссылочным

словам

</P>

<P>

<B><A NAME=”Малина”>Малина</A>садовая</B><Br>

Это ягода. Она сочная и сладкая. Спелая малина имеет красный цвет

<P>

<B><A NAME=”Яблоко”>Яблоко</A>осеннее</B><Br>

Это фрукт. Осенние яблоки это спелые плоды. Иногда красные, иногда красно-белые,

иногда бело-зелёные

<P>

<B><A NAME=”Арбуз”>Арбуз</A>бахчевой</B><Br>

Это тоже ягода, только полосатая и с толстой кожурой. Внутри арбуз красный и

водянистый

</BODY>

</HTML>

Место размещения файла определяется с помощью URL-адреса, который называют

путём поиска. Абсолютный путь поиска описывает местоположение файла, начиная с

самого высокого уровня. Относительный путь поиска описывает местоположение файла,

начиная с того места, в котором находится текущий документ.

Ссылка на другую страницу с именем "СatGraph", размещенную по адресу

"http://www.cat.lv", будет иметь вид:

<A HREF="http://www.cat.lv">CatGraph</A>

Ссылка на графический файл "lis.gif", размещенный по адресу

"http://www.lis.lv/~cat5", будет иметь вид:

Ссылка на адрес электронной почты "d avid @l is .lv " будет иметь вид:

<A HREF="mailto:da vid @l is .lv ">Напишите мне письмо</A>

Если нужно перейти на метку, находящуюся в другом документе, ссылка

оформляется следующим образом.

<A HREF="имя файла#имя метки"> Название ссылки </A>. Например, <A

HREF="index.htm#имя метки">Название ссылки</A>

4.1.7. Рисунки -гиперссылки.

Графические ссылки позволяют по щелчку на изображении перейти к другому

файлу. Они делают документ более понятным и полезным. Графическая ссылка

выделяется рамкой.

<A HREF="art.htm"> <IMG SRC="clips.gif" ALT="Здесь расположен рисунок"> </

<A HREF="http://www.l is .lv/~ ca t5 "> <IMG SRC="lis.gif" ALT="Lis" border="0"

width="47" height="47"> </A>

Множественные рисунки-гиперссылки реализуются как активные изображения.

Активное изображение - это изображение, на котором находятся несколько

активных областей (hot spots), каждая из которых ссылается на определенную Web-

страницу. Активные изображения представляют собой отличный метод создания

красивых и удобных меню. Различают два типа активных изображений: активные

изображения, работающие на сервере, и активные изображения, работающие на стороне

клиента.

Первый тип для своей работы использует cgi-сценарий. Это программа,

работающая на сервере. Такие программы выполняют многие процессы на Web-

страницах. Например, большинство гостевых книг работают на основе таких программ.

Пишутся cgi-скрипты чаще всего на языке Perl. Эти скрипты перестают использоваться,

т.к. в настоящее время существуют более совершенные Java-скрипты и другие

технологии. Проблема cgi-скриптов заключается в том, что они выполняются на сервере.

Это серьезная угроза для безопасности сервера. Кроме того, они требуют определенных

ресурсов системы. Большинство системных администраторов не разрешает пользоваться

директорией cgi-bin, в которой запускаются эти программы. Выходом из такой проблемы

являются многочисленные бесплатные сервисы, предоставляющие возможность

использовать наиболее распространенные cgi-скрипты на страницах просто вставляя

куски HTML-кода. Понятно, что такой метод не очень удобен и доступен немногим, но

его поддерживают почти все броузеры.

Второй метод не требует использования сервера вообще, но он работает только в

броузерах, поддерживающих HTML3.0 (Internet Explorer, Netscape Navigator 2.0, Mosaic

2.0 и более современные).

Создание активных изображений вручную трудоемкий процесс, т.к. требуется

задавать много активных областей в координатах. Лучше всего использовать программы,

созданные специально для задания активных областей и простого формирования всего

активного изображения. Кроме того, такую функцию поддерживают большинство HTML

редакторов, например FrontPage или MapEdit.

4.1.8. Списки.

Заголовок списка создаётся тегом <LH>, за которым следует текст.

Теги <LI> и </LI>обозначают элемент списка.

Для создания ненумерованного списка используется тег <OL TYPE=x>. Значение х

определяет вид значка маркера. Возможно задание значка маркера одним из трех

стандартных видов:

<LI>Первая строка

<LI>Вторая строка

</UL>

<LI> Первая строка

<LI>Вторая строка

</UL>

<LI> Первая строка

<LI>Вторая строка

</UL>

<PLAIN> - атрибут для создания ненумерованного списка без маркера.

Задание значка маркера допускается в виде любой картинки:

<LI> Первая строка

<LI>Вторая строка

</UL>

Этот атрибут можно задавать в теге <UL>, определив сразу все маркеры списка, а

можно использовать разные файлы с расширением gif для разных пунктов списка,

помещая атрибут SRC= в каждом теге <LI>. Для использования этого атрибута нужно

задать атрибут PLAIN=.

Для создания нумерованного списка используется тег <OL TYPE=x>. Значение х =

1, если требуется создать список с нумерацией в виде последовательности арабских цифр,

т.е. в формате 1,2,3,4.… Значение х = А создает список вида А,В,С,D.… Значение х = а -

список вида а,b,c,d.… Значение х = I - список вида I, II, III, IV…. Значение х = i - список

вида i, ii, iii, .…Таким образом, для получения нумерованного списка необходимо

написать последовательность тегов:

<LI><FONT SIZE="4">Первая строка </FONT></LI>

<LI>< FONT SIZE="4">Вторая строка </FONT></LI>

</OL>

<LI><FONT SIZE="4">Первая строка </FONT></LI>

<LI><FONT SIZE="4">Вторая строка </FONT></LI>

</OL>

<LI><FONT SIZE="4">Первая строка </FONT></LI>

<LI><FONT SIZE="4">Вторая строка </FONT></LI>

</OL>

Для смены порядка нумерации используются атрибуты SKIP=, START= и VALUE=

в теге <LI> или <OL>.

Атрибут SKIP= пропускает заданное число пунктов нумерации.

START= используется для указания места, с которого в заданном типе нумерации

(числа, буквы, римские цифры) начать нумеровать список.

Атрибут VALUE= присваивает определенный номер данному пункту

нумерованного списка. После задания этого атрибута последующие пункты будут

нумероваться, начиная с заданного в этом атрибуте номера. Например:

<LI>Первая строка </LI>

<LI>Вторая строка </LI>

<LI>3-я строка </LI>

<LI>4-я строка </LI>

</OL>

Если на странице мало места под списки, то удобно использовать атрибут

COMPACT=. Он показывает списки в сжатом виде за счет уменьшения межстрочных

интервалов, использования меньшего размера шрифта и других методов.

Пример 4.

<HTML>

<HEAD>

<TITLE>

Списки

</TITLE>

</HEAD>

<BODY>

<P>

<H1>Посмотрим, как выглядит упорядоченный список</H1>

<P>

<H2>Каждое утро я кладу в свой портфель:</H2><Br>

<LI>Тетради

<LI>Книги

<LI>Карандаши

<LI>Ручку

<LI>Линейку

<LI>Пакет с завтраком

<LI>Кошелёк

</OL>

</BODY>

</HTML>

4.1.8. Таблицы.

На данном этапе развития методов форматирования Web-страниц таблицы

являются мощнейшим средством компоновки контента. Края таблицы могут быть

невидимыми, тогда пользователь даже не понимает, что использованы таблицы.

Для создания таблицы используются теги <TABLE> и </TABLE>. Между этими

тегами располагаются теги <TR> и </TR>. Они окружают каждую строку таблицы. Если

необходимо создать несколько строк в таблице, используется столько же тегов <TR> и

</TR>. В каждой строке таблицы обычно отображаются ячейки. Каждая ячейка должна

быть окружена тегами <TD> и </TD>. Количество этих тегов в строке определяет

количество ячеек. Число ячеек в строках не обязательно должно быть одинаковым.

Для создания заголовков столбцов и строк вместо простой строки, создается

заголовок и текст его размещается между тегами <TH> и </TH>. Этот текст будет

отображен жирным шрифтом и отцентрирован. Разрешается применить некоторые

атрибуты.

Атрибут NOWRAP. Он используется в тегах <TH> и </TH> или <TD> и </TD> для

того, что бы текст помещался в одной строке (ячейка при этом расширяется).

Атрибут COLSPAN=x. Если какая-нибудь ячейка должна быть шире

вышерасположенных или нижерасположенных, то используется этот тег. Величина х

указывает количество объединяемых горизонтальных ячеек.

Атрибут ROWSPAN=x. Этот атрибут аналогичен предыдущему, только он

объединяет x вертикальных ячеек.

Атрибут WIDTH=x. Этот атрибут определяет ширину таблицы, если он задан в теге

<TABLE>, ширину группы ячеек или ширину отдельной ячейки, если указан в тегах <TR>

и </TR> или <TH> и </TH>. Величина х указывает ширину в пикселях или в процентах.

Оптимальным значением является WIDTH=50%.

Атрибут UNIT=. Он применяется в теге <TABLE> для определения единицы

измерения размеров в таблице. Атрибут принимает следующие значения:

UNIT=EN - в en-пробелах,

UNIT=RELATIVE - относительные значения в процентах от общей ширины

таблицы,

UNIT=PIXELS - в пикселях, например <TABLE UNIT=PIXELS WIDTH=200>

создает таблицу шириной в 200 пикселей.

Атрибут COLSPEC=. Используется с атрибутом UNIT=. Он определяет, сколько

места занимает каждый столбец таблицы и тип выравнивания данных. Применяется

только в теге <TABLE>. В атрибуте COLSPEC= перечисляются все столбцы. Для каждого

задаётся выравнивание одним из пяти типов: L - по левому краю, С - по центру, R - по

правому краю, J - по правому и левому краю, D - по десятичной запятой. Размер задаётся в

пикселях. Например, тег <TABLE UNIT=PIXELS COLSPEC="L10 C20 R10"> определяет

таблицу, в которой первая ячейка имеет ширину в 10 пикселей и выравнивание по левому

краю, вторая - 20 пикселей и выравнивание по центру, третья - 10 пикселей, выравнивание

по правому краю.

Атрибут DP=. Определяет символ, используемый для отделения целой части

десятичной дроби. По умолчанию используется тег DP=".", определяющий в качестве

разделителя точку. Атрибут DP="," задает запятую.

Атрибут CELLPADDING=x. Определяет поле вокруг содержимого ячейки. X -

число пикселей.

Атрибут ALIGN=. Используется в тегах <TR>, <TD>, <TH>. Он определяет

выравнивание содержимого по горизонтали. Значения атрибута могут быть следующими:

ALIGN=LEFT - выравнивает содержимое ячейки по левому краю,

ALIGN=CENTER - по центру,

ALIGN=RIGHT - по правому краю,

ALIGN=BLEEDLEFT - предыдущие значения учитывали отступ, заданный

атрибутом CELLPADDING. При задании этого атрибута содержимое ячейки прижимается

вплотную к левому краю.

Атрибут VALIGN=. Сходен с предыдущим, но задает выравнивание по вертикали.

Значения:

VALIGN=TOP - выравнивание содержимого по верхней границе,

VALIGN=MIDDLE - центрирует по вертикали,

VALIGN=BOTTOM - выравнивает по нижней границе.

Для создания заголовков таблицы существует тег <CAPTION>. Заголовок может

быть над таблицей (<CAPTION ALIGN=TOP>), или под таблицей (<CAPTION

ALIGN=BOTTOM>). Заголовком может быть текст или графика. Этот тег хорош для

создания подписей под рисунками, заключенными в таблицу без границ.

Основной частью таблицы являются границы ячеек. Для управления толщиной

границ используется атрибут BORDER=x. Можно сделать таблицу вообще без границ,

задав атрибут в теге <TABLE BORDER=0>. Читатель страницы даже не будет знать, как

получена такая точная компоновка содержимого. Напротив, толстые границы привлекают

внимание к таблице. Можно задать красивую толстую рамку вокруг картинки, она будет

похожа на настоящую рамку.

Для задания толщины промежутков между ячейками используется атрибут

CELLSPACING=x. По умолчанию x=2 пикселям. Этот атрибут хорошо использовать

вместе с атрибутом BORDER= для задания красивых рамок вокруг изображений.

С помощью таблиц можно сделать красивые выпуклые панели с графикой или

текстом.