Счётчик

Меню

Материалы - Основы HTML

Что же такое HTML - это HyperText Mark-up Language - язык разметки гипертекста, простой текстовый файл с расширением *.htnl или *.htm.
HTML теги служат для разметки текста. Все теги заключаются в вот такие скобки <тег>. Теги бывают двойными например <html> </html> или одиночным <br>. Одиночные выполняют определенную функцию, например тег <br> переводит строку. Двойные выполняют функции с текстом заключённым между начальным тегом и конечным , начальный от конечного отличается содержанием /(слеша).
Теги можно писать хоть большими, хоть маленькими буквами. Примеры: <HTML> <Html> <html>, все эти теги браузер понимает одинаково.
Основные теги.
Рассмотрим на простом примере основные теги. Вот пустая HTML страница.

<html> - начало HTML документа.
<head> -эти теги начало и конец заголовка, могут нести в себе служебную информацию.
<title> Заголовок HTML документа </title> - название документа видное в строке заголовка браузера.
</head>
<body> - между этими двумя тегами содержится ваш текст!
тело документа.
 - Комментарий вставляется внутрь тег и не отображается браузером.
<! комментарий
на несколько строк>
</body>
</html> - конец HTML документа.

Заголовки.
В HTML всего 6 заголовков, ниже приведены тэги с примерами:

Пример теста

Пример теста

Пример теста

Пример теста

Пример теста

Пример теста

Абзацы.
<p> </p>
Заключенный тест между этими тегами воспринимается как один абзац.
Перевод строки.
<br>
Тег разрыва строки <br>, выводить стоящие после него символы с начала новой строки. Проще сказать перенос строки.
<nobr> </nobr>
Запрет на перевод строки.
Горизонтальные линии.
<hr>
Выводит горизонтальную линию.
Выглядит это так:

Форматирование шрифта.
Физические стили.
<B> жирное начертание </B>
<I> курсив </I>
<S> ~~зачеркнутый текст~~ </S>
<U> подчеркнутый текст </U>
<TT> моноширинный текст </TT>
<SUB> _{нижний индекс} </SUB>
<SUP> ^{верхний индекс} </SUP>
<BIG> Буквы большего размера </BIG>
<SMALL> Буквы меньшего размера </SMALL>
Логические стили.
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
<EM>...</EM>
От английского emphasis - акцент. Текст отображается курсивом. Элементы EM и I аналогичны по своему действию.
<STRONG>...</STRONG>
От английского strong emphasis - сильный акцент. Текст будет отображен жирным шрифтом. Элементы B и STRONG аналогичны по своему действию.
<CODE>...</CODE>
Аналог тегов , выполняет точно такие же функции. Задумывался для отображения формул, или программного кода.
<SAMP>...</SAMP>
От английского sample - образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. Используется для выделения нескольких символов шрифтом фиксированной ширины.
<KBD>...<KBD>
От английского keyboard - клавиатура. Элемент, выделяющий шрифтом фиксированной ширины текст, вводимый пользователем с клавиатуры.
<VAR>...</VAR>
От английского variable - переменная. Рекомендуется использовать для написания имен переменных. Текст между ними выводится курсивом.
<CITE>...</CITE>
Оформляет находящийся текст как цитату или ссылку на источник. Обычно используется для коротких цитат (в отличие от элемента BLOCKQUOTE). Цитируемый текст отображается курсивом.
<BLOCKQUOTE>...</BLOCKQUOTE>
Оформляет текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом.
<DIV>...</DIV>
Он позволяет выравнивать содержимое по левому краю, по центру или по правому краю. Для этого стартовый тег должен содержать соответствующий атрибут:
align=''left''
align=''center''
align=''right''
<DIV ALIGN="выравнивание">Текст раздела</DIV>

Списки (lists)
В тексте страницы могут присутствовать списки 3-х разновидностей: нумерованные списки, маркированные списки и списки определений. Допускается вложение списков друг в друга, причем разных типов. В описании списка можно указывать его тип и необязательный атрибут COMPACT, чтобы браузер выводил список максимально компактно.
Нумерованный список (ordered list)
Текст, расположенный между метками <OL> и </OL>, воспринимается как нумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, чтобы создать вот такой список:

Иван;
Данила;
Светлана

необходим вот такой HTML-текст:
<OL>
<LI>Иван;
<LI>Данила;
<LI>Светлана
</OL>
В табл. 1 приведены атрибуты тэга <ОL> и их назначение.
Таблица 1.

Атрибут	Назначение
СОМРАСТ	Представляет список в более компактном виде.
TYPE=A	Устанавливает маркер в виде прописных букв (A, B, C ...).
TYPE=а	Устанавливает маркер в виде строчных букв (a, b, c ...).
TYPE=I	Устанавливает маркер в виде больших римских цифр (I, II, III ...) .
TYPE=i	Устанавливает маркер в виде маленьких римских цифр (i, ii, iii ...) .
TYPE=1	Устанавливает маркер в виде арабских цифр (1, 2, 3 ...) .
START=n	Устанавливает начальный маркер в текущем списке.

<OL TYPE="тип"> START=число;
<LI>Первый элемент</LI>
<LI>Второй элемент</LI>
...
</OL>
Маркированный список, бюллетень (bulleted list)
Маркированный список задается парными маркерами <UL> и </UL> c вложенными маркерами <LI> и </LI>. Тег <UL> поддерживает атрибут type, позволяющий вместо маркировочного символа "кружок" (type=circle), устанавливаемого по умолчанию, задать маркировочный символ "квадрат" (type=square).
<UL TYPE="тип">
<LI>Первый элемент</LI>
<LI>Второй элемент</LI>
...
</UL>
Список определений (definition list)
Список определений представляет из себя список пар "термин - определение", располагаемых столбиком, с "определениями", сдвинутыми относительно "терминов".
<DL>
<DT>Первый термин
<DD>Первое определение
<DT>Второй термин
<DD>Второе определение
...
...
</DL>

Часто списки определений применяются для отметки в тексте сдвинутого вправо фрагмента, при этом маркеры <DT> не употребляются.
Например, вот такой фрагмент HTML-текста:
<DL>
<DT>А
<DD>Первая буква алфавита
<DT>Б
<DD>Вторая буква алфавита
<DT>В
<DD>Третья буква алфавита
</DL>
будет выведен на экран примерно так:

А: Первая буква алфавита
Б: Вторая буква алфавита
В: Третья буква алфавита

В языке предусмотрены другие виды логических списков:

Каталог

<DIR>

<LI>

</LI>

</DIR>

Меню

<MENU>

<LI>

</LI>

</MENU>

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

Гипертекстовые ссылки.
Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF="[адрес перехода]">выделенный фрагмент текста</A>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое - это задать имя другого HTML-документа, к которому нужно перейти. Например:
<A HREF="h2.htm">Перейти к оглавлению</A>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению , при нажатии на который в текущее окно будет загружен документ h2.htm. Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.
Сам гипертекст поддается форматированию. Например:
<a href=h2.htm><H2>Ссылка-заголовок</H2></a>
Результат:

Ссылка-заголовок

Вы можете ссылаться на документ, лежащий в любой директории, описав к нему полный путь. Так, например, ссылку на файл NJStats.html, лежащий в поддиректории AtlanticStates можно описать как:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Это так называемые относительные ссылки. Вы также можете использовать абсолютное имя файла (полный путь).
Якори (anchors)
Для организации ссылок не просто к некоторому документу, но и к определенному месту внутри этого документа. нужно объявить метки для переходов (так называемые "якори") при помощи маркера:
<A NAME="имя якоря">
После этого можно указывать гиперссылки на эти якори, расположенные на текущей или другой странице, при этом перед именем якоря ставится символ #:
Обращение к определенным разделам других документов
Предположим, мы хотим соединить документ А с первой главой документа В, для чего нам необходимо создать именнованную гиперссылку в документе B.
Здесь вы можете увидеть<A NAME = "Глава 1">Главу 1</a>
Текст первой главы.
Теперь, описывая ссылку в документе A, надо включить не только имя файла "documentB.html"но также и имя гиперссылки, отделяемое символом (#):
Здесь вы можете увидеть текст
<A HREF = "documentB.html#Глава1"> Главы 1</A>документа B.
Теперь "кликнув" в слово "Главы 1" в документе А, вы переходите непосредственно в Главу 1 в документе B.
Соединения с разделами текущего документа
Техника соединения аналогична описанной выше, только опускается имя файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ B).
<A HREF = "#Глава1">Глава 1</A>
URL
Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов. При помощи URL (Uniform Resource Locator) можно компактно и полно идентифицировать любой документ на любом Web-сервере.
"протокол:адрес"
Протокол доступа, определяющий вид ресурса, и сетевой адрес, описывающий его расположение, могут принимать различные значения для разных информационных ресурсов Internet:
"A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
"A HREF="mailto:user@mail.box">Послать письмо</A>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.
Таблица 1. Форматы для создания ссылок. Ссылка на Формат Пример

Web-страницу	http://sitename/	http://www.mysite.com/
e-mail	mailto:address	mailto:me@mysite.com
Newsgroup	news:newsgroupname	news:news.newusers.questions
FTP	ftp://sitename/	ftp://ftp.mysite.com/
Gopher	gopher://sitename/	gopher://gopher.mysite.com/
WAIS	wais://sitename/	wais://wais.mysite.com/
Telnet	telnet://sitename/	telnet://bbs.mysite.com/

Изображения в HTML-документе.
Кроме гипертекстовых ссылок у Web есть еще одно приимущество - это возможность встраивать в Web-страницы изображение. Изображение придает страницам приятный внешний вид и делает их более функциональными.
В Web используют толко два формата хранения графической информации: это Gif(файл с расширением *.gif, для хранения простых изображений) и JPG(файл с расширением *.jpg или *.jpeg - для хранения изображений с высокой степенью компресси). Для того, чтобы вставить изображение в страницу, используют тег <img>. Это одиночный тег и в простейшем случае имеет следующий формат:

<IMG SRC="URL файла изображения">

Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif">

Тег <img> включает несколько полезных атрибутов, предоставляющие автору страницы большую свободу действий. Все эти атрибуты представленны в Таблице 2:
Таблица 2. Атрибут Описание

ALT	Указывает текстовую альтернативу изображению
ALIGN	Управляет выравниванием теста, окружающего изображение
BORDER	Указывает размер окантовки в пикселах
HEIGHT	Указывает высоту изображения в пикселах
WIDTH	Указывает ширину изображения в пикселах
HSPACE	Определяет размер свободного места слева и справа от изображения
VSPACE	Определяет размер свободного места сверху и снизу от изображения
ISMAP	Сообщает, что изображение является картой-изображением на сервере.
USEMAP	Сообщает, что изображение является картой-изображением на стороне клиента.
SRC	Указывает URL изображения.

Рассмотрим подробнее каждый атрибут тега <img>:

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

ALIGN
Атрибут ALIGN принимает любое из пяти возможных значений. Все они каким-либо образом определяют выравнивания текста относительно изображения. Вначале мы рассмотрим значения TOP, MIDDLE и BOTTOM.

Если атрибут ALIGN установлен в значение TOP, MIDDLE или BOTTOM, то текст, следующий за изображением, выравнивается по верхнему краю, по центру или по нижнему краю соответственно. Относительно значений TOP и MIDDLE следует заметить, что если текст слушком длинный, то его новая строка начнется под изображением. Во многих случаях это выглядит некрасиво.
Если атрибут ALIGN установлен в значение LEFT или RIGHT, то изображение будет "плавать" у левого или правого поля соответственно. Этот эффект позволит тексту обходить изображение, создавая впечатление, что оно встроенно в текст. Такая возможность открывает пути для создания весьма интересных дизайнов страниц.

Появление плавающих изображений вызвало необходимость начинать новую строку в месте, свободном от изображения. Для удовлетворения этой необходимости к тегу <br> был добавлен атрибут CLEAR. Если установить этот атрибут равным значению LEFT, то перевод строки будет выполняться к левому полю, свободному от плавающих изображений. Значение RIGHT оказвает анологичный эфект, но относительно правого поля. Если указать CLEAR=ALL, новая строка начнется с точки, где оба поля свободны от плавающих изображений.

BORDER
Атрибут BORDER предоставляет удобный способ размещения окантовки вокруг изображения. Он устанавливается равным значению, задающему ширину окантовки в пикселах. По умолчанию изображение выводится без окантовки.

Прииспользовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения.

HEIGHT и WIDTH
Указав информацию о размерах изображения, автор страницы ускорит процесс ее размещения, что даст пользователям увидеть весь документ раньше. Браузер использует значение атрибутов HEIGHT и WIDTH, чтобы оставить на странице место для изображения. Когда изображение будет загруженно, оно появится на этом зарезервированном месте. Без этих атрибутов браузеру пришлось бы загружать изображение целиком, вычислять его размер, размещать на странице и лишь после этого распологать на странице остальные элементы. При наличии нескольких изображений такие задержки вызовут недовольство пользователей.

HSPACE и VSPACE
Свободное пространство вокруг изображения в полиграфии называется оборкой (runaround). Оно улучшает внешний вид страницы, отделяя изображение от текста. Оборка необходима при использовании плавающих изображений, которые окруженны текстом, поскольку текст, прижатый к изображению читать трудно. Оборка устанавливается с помощью атрибутов HSPACE и VSPACE тега <img>. Значением каждого из них является количество пикселов свободного пространства слева и справа (HSPACE) или сверху и снизу (VSPACE) от изображения.

ISMAP и USEMAP
Атрибуты, указывающие на то, что изображение является картой-изображением.

Графика как ссылка.
Если Вы не хотите, чтобы рисунок замедлял загрузку основного WWW-документа, Вы можете поместить рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам должен решить - смотреть или не смотреть ему этот рисунок:

Синтаксис установки графической ссылки такой же, как при установке текстового. Однако между тегами <a href=url> и </a> вместо текста следует поместить тег <img>, как в следующем примере:

Например:
<a href=document.html><img src=docimg.gif></a>

Вставка видеофайлов и звука.
Видео (video)
Большинство браузеров позволяет просматривать видеофайлы в общеупотребительных форматах .MPG/.MPEG, .QT и .AVI., на которые для этого предусматриваются гиперссылки:

<a href="URL видеофайла"> описание </a>
Можно также встраивать в страницы видеоролики с помощью маркера:

<EMBED name=имя src="URL видеофайла" AUTOSTART=true>
Если не указывать свойство AUTOSTART=true, то видеоролик не будет проигрываться автоматически при загрузке документа, а его можно будет воспроизвести с помощью кнопок управления.
В диалекте HTML для MS Intermet Explorer в маркере <IMG> для вставки видеофайла предусмотрен атрибут DYNSRC="..." и необязательные атрибуты LOOP=n|INFINITE (для указания числа повторений) и CONTROLS (добавление кнопок управления).

Атрибут Назначение

LOOP=n	Число повторений.(n=1,2,3...)
LOOP=INFINITE	Бесконечно повторяющейся видеоролик.

<IMG DYNSRC="URL видеофайла" CONTROLS LOOP=n|INFINITE>
Звук (sounds)
Браузерами поддерживается проигрывание звуковых файлов в форматах .AU, .MID/.MIDI и .WAV, на которые сделаны гиперссылки в тексте страницы.

<a href="URL аудиофайла"> описание </a>
В реализации HTML для браузера MS Intermet Explorer добавлен маркер <BGSOUND> для воспроизведения аудиофайла при загрузке страницы

<BGSOUND SRC="URL аудиофайла" LOOP=n|INFINITE>

Цвета.
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:
bgcolor
Определяет цвет фона документа. Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать соответствующий цвет текста. Для этого имеется следующий атрибут:
text
Определяет цвет текста документа.
link
Определяет цвет выделенного элемента текста, при нажатии, на который происходит переход по гипертекстовой ссылке.
vlink
Определяет цвет ссылки на документ, который уже был просмотрен ранее.
alink
Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.

Цвет можно описать как его названием, так и значением в палитре RGB. Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов соответственно в диапазоне от нуля (00) до 255 (FF). Оба вышеперечисленных атрибута не являются альтернативными и часто используются совместно. Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать соответствующий цвет текста. Постарайтесь указать цвет фона, максимально приближенный к цвету вашей фоновой картинки --- когда она загрузится, переход от цвета фона к ней будет более плавным.

Разберем несколько примеров:
bgcolor=#FFFFFF

Цвет фона. Насыщенность красным, зеленым и синим, одинакова - FF (это шестнадцатеричное представление числа 255). Результат - белый цвет.
text=#000000

Цвет текста. Насыщенность красным, зеленым и синим, одинакова - 00 (ноль). Результат - черный цвет.
link=#FF0000

Цвет гипертекстовой ссылки. Насыщенность красным - FF (255), зеленым и синим - 00 (ноль). Результат - красный цвет.
<body bgcolor="#669900" text="#333333" link="#669900" vlink="#666666" alink="#000000">

Цветовая схема должна повторяться на всех страничках публикации, это создаст у посетителя ощущение связности сайта. Цвета ссылок старайтесь выбирать таким образом, чтобы, с одной стороны, читатель видел, что это ссылка, а с другой стороны, она бы не мешала ему читать основной текст. По поводу ссылок есть два полезных замечания: первое - как бы Вам не хотелось сделать цвета ссылок и посещенных ссылок одинаковыми (без веских на то причин), постарайтесь перебороть себя и придать им немного различия, для этого просто сделайте цвета уже посещенных ссылок чуть темнее; и второе - так уж получилось, что подчеркнутый текст в Web символизирует ссылку, поэтому поборите искушение использовать подчеркнутый текст в публикации, воспользуйтесь другим способом выделения. Вы ведь знаете, что очень неприятно, если, допустим, Ваша рука потянулась к ссылке с целью прочитать подробности, а мышка на нее ноль внимания :(.
Для просмотра цвета кода нажмите сюда.
Кроме того, метка <BODY> может включать атрибут background="[имя файла]" ,который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg). Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать.
Если вы собрались делать на страничке какой-либо фон: старайтесь подобрать контрастную и одновременно расслабляющую глаза комбинацию шрифта и фона.

Форматирование текста.
BASEFONT
Тег <basefont> не имеет завершающего (парного) тега. Определяет основной шрифт, которым должен отображаться текст документа. Впоследствии Вы можете легко изменить шрифт в любой части документа, используя, тег <font>. Действие элемента BASEFONT не распространяется на текст, заключенный в ячейки таблиц и другие сепаративные элементы html.

Параметры:	Описание:
size	Определяет базовый размер шрифта. Возможные значения : целые числа от 1 до 7 включительно.
face	Определяет гарнитуру шрифта.

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

Параметры:	Описание:
size	Определяет размер шрифта. Возможные значения: - целое число от 1 до 7; - относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT.
face	Определяет гарнитуру шрифта.
color	Oпределяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

Будьте осторожны. Внутри тегов <font> </font> некоторые элементы форматирования (PRE, CODE, KBD, SAMP) работают некорректно.
FACE
Этот параметр служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию.
Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Это весьма полезное свойство, так как в разных системах могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным качеством является задание предпочтения использования шрифтов. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т.д.
Пример:

<HTML>
<HEAD>
<TITLE>Назначение шрифтов</TITLE>
</HEAD>
<BODY>
Текст, записанный шрифтом по умолчанию.
<BR>
<FONT FACE="Verdana", "Arial", "Helvetica">
Пример задания названия шрифта.
</FONT>
</BODY>
</HTML>

SIZE
Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3.
Настройки размеров шрифта, используемых по умолчанию, а также величины абсолютного изменения размеров шрифта, зависят от браузеров.
Размер шрифта указывает как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тэга <BASEFONT>.
Пример:

<HTML>
<HEAD>
<TITLE>Назначение размеров шрифтов
</HEAD>
<BODY>
<FONT SIZE=1>Шрифта размера 1</FONT>
<FONT SIZE=2>Шрифта размера 2</FONT>
<FONT SIZE=3>Шрифта размера 3</FONT>
<FONT SIZE=4>Шрифта размера 4</FONT>
<FONT SIZE=5>Шрифта размера 5</FONT>
<FONT SIZE=6>Шрифта размера 6</FONT>
<FONT SIZE=7>Шрифта размера 7</FONT>
</BODY>
</HTML>

COLOR
Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB.

Таблицы
До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. Самые первые странички так и выглядели, как текст с заголовками (а потом и с картинками) просто сверху вниз. Таблицы превратили это скромное зрелище в полный сверкающего многообразия мир, хотя поначалу задумывались совсем для иных, сугубо утилитарных задач. Суть метода заключается в следующем: на страничке создается таблица с невидимыми границами ячеек, и элементы, требующие точного позиционирования, располагаются в ячейках таблицы. Для каждой из ячеек вы можете указать собственные параметры форматирования, соответственно команды форматирования действуют только в пределах ячейки. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.

Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>.

<TABLE>
<! описание таблицы >
</TABLE>

Метка <TABLE> может включать несколько атрибутов:

ALIGN	Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH	Определяет ширину всей таблицы в пикселях(например, WIDTH=400), либо в процентах от ширины окна браузера(например, WIDTH=80%).
HEIGHT	Определяет высоту всей таблицы в пикселях, либо в процентах от высоты окна браузера.
BORDER	Устанавливает ширину рамки таблицы в пикселях, например, BORDER=2. Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING	Устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).
CELLPADDING	Устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).
bgcolor	параметр, управляющий цветом таблицы. Задается в формате RGB.
background=image.jpg	параметр, управляющий картинкой-подложкой таблицы. image.jpg - имя картинки.

Заголовок таблицы (caption)
Таблица может иметь заголовок, хотя заголовок не является обязательным. Заголовок таблицы помещается между маркерами <CAPTION> и </CAPTION>. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения:
&ltCAPTION ALIGN=TOP> (заголовок помещается над таблицей) и
<CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Например:

<TABLE ALIGN="center" BORDER=1>
<CAPTION>
Заголовок
</CAPTION>
<! ...описание строк таблицы... >
</TABLE>

Строки таблицы (table rows)
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой <TR>.

<TABLE>
<TR> <! ...описание ячеек 1-й строки... > </TR>
<TR> <! ...описание ячеек 2-й строки... > </TR>
<TR> <! ...описание ячеек 3-й строки... > </TR>
</TABLE>

ALIGN	Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN	Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
bgcolor	Параметр, управляющий цветом таблицы. Задается в формате RGB.
background	параметр, управляющий картинкой-подложкой таблицы.

Ячейки таблицы (table data)
Каждая строка таблицы состоит из заголовочных ячеек, заключаемых в маркеры <TH> и </TH> или ячеек данных, обрамляемых маркерами <TD> и <TD>. Вот так выглядит типичная таблица из 3-х строк (из них первая - заголовочная) и 4-х колонок:

<TABLE>

<TR><TH>One</TH><TH>Two</TH><TH>Three</TH><TH>Four</TH></TR>
<TR><TD>1.1</TD><TD>1.2</TD><TD>1.3</TD><TD>1.4 </TD></TR>
<TR><TD>2.1</TD><TD>2.2</TD><TD>2.3</TD><TD>2.4 </TD></TR>
</TABLE>

One	Two	Three	Four
1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4

Метка <TD> может включать следующие атрибуты:

NOWRAP	Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN	Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN	Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN	Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN	Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH	Устанавливает ширину ячейки в пикселях (например, WIDTH=200).
HEIGHT	Устанавливает высоту ячейки в пикселях (например, HEIGHT=40).

Пример 1:

<TABLE>
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы и ячеек.</TD>
</TR>
</TABLE>

Таблица из одной строки

из трех столбцов

без указания ширины таблицы и ячеек.

Пример 2:

<HTML>
<HEAD>
<TITLE>Пример 2</TITLE>
</HEAD>
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> 
<CAPTION>
У таблицы может быть заголовок
</CAPTION>
<TR> 
<TD> 
Первая строка, первая колонка
</TD>
<TD> 
Первая строка, вторая колонка
</TD>
</TR>
<TR> 
<TD> 
Вторая строка, первая колонка
</TD>
<TD> 
Вторая строка, вторая колонка
</TD>
</TR>
</TABLE> 
</BODY>
</HTML>

Простейшая таблица

У таблицы может быть заголовок
Первая строка, первая колонка	Первая строка, вторая колонка
Вторая строка, первая колонка	Вторая строка, вторая колонка

Пример 3:

<TABLE BORDER=10 WIDTH=400 ALIGN=CENTER>
<TR>
<TD>Для этой таблицы задан параметр BORDER=10</TD>
</TR>
</TABLE>

Для этой таблицы задан параметр BORDER=10

Пример 4:

<TABLE BORDER=5 CELLSPACING=0 WIDTH=400 ALIGN=CENTER BGCOLOR="CYAN"> <TR ALIGN=CENTER> <TD WIDTH=10%>Ширина ячейки 10% ширины таблицы</TD> <TD WIDTH=60%>Ширина ячейки 60% ширины таблицы</TD> <TD WIDTH=30%>Ширина ячейки 30% ширины таблицы</TD> </TR> <TR> <TD ALIGN=CENTER COLSPAN=3>Для этой ячейки указан параметр COLSPAN=3</TD> </TR> </TABLE>

Ширина ячейки 10% ширины таблицы	Ширина ячейки 60% ширины таблицы	Ширина ячейки 30% ширины таблицы
Для этой ячейки указан параметр COLSPAN=3

Пример 5:

<TABLE BORDER=5 CELLSPACING=0 WIDTH=400
ALIGN=CENTER BGCOLOR=CYAN>
<TR ALIGN=CENTER>
<TD WIDTH=30% ROWSPAN=2 BGCOLOR="00FF00">Для этой
ячейки указан параметр ROWSPAN=2 и
WIDTH=30%</TD>
<TD>Ширина этой ячейки не указана,
поэтому она занимает всю оставшуюся
ширину таблицы, т. е. 70%.</TD>
</TR>
<TR ALIGN=CENTER>
<TD>А эта ячейка сгенерирована в
соответствии с шириной ячейки, находящейся
в первой строке, над ней.</TD>
</TR>
</TABLE>

Для этой ячейки указан параметр ROWSPAN=2 и WIDTH=30%	Ширина этой ячейки не указана, поэтому она занимает всю оставшуюся ширину таблицы, т. е. 70%.
	А эта ячейка сгенерирована в соответствии с шириной ячейки, находящейся в первой строке, над ней.

Автор: Казьмина Светлана
Материалы взяты из журнала"Internet Zone"