Учебник html

Учебник html

Ну что, приступим?

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

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

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

А как же оформление?

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

Если и после этого внешний вид документа вас не устраивает, нанесите последний штрих: воспользуйтесь таблицами стилей (CSS).

Данный учебник - это классический «HTML», как
для новичков, так и для профессиональных Web-разработчиков.

Hyper Text Markup Language (HTML) - Язык Гиперактивной Текстовой Разметки, является стандартным языком, предназначенным для создания документов в WEB.

Термины

Тэг - оформленная единица HTML-кода.
Например, <HTML>, <TITLE>, <HEAD>, <BODY>, <FONT ...>, <SPAN ...>, <P> и т.д.

Тэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со слэша - знака «/»).

Например, вышеуказанным тэгам соответствуют закрывающие тэги </HTML>, </TITLE>, </HEAD>, </BODY>, </FONT>, </SPAN>, </P>.

Элемент - понятие, введенное для удобства.
Например, элемент HEAD состоит из двух тэгов - открывающего <HEAD> и закрывающего </HEAD>.

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

Структура HTML документа

Для того, чтобы текстовый файл преобразовался в HTML-файл, поменять его расширение с «*.txt» на «*.html» недостаточно. Надо применить «правило первой строки»:

Сразу надо сказать:
Все что находится между скобками комментария (), браузером не отображается.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN>

Это поможет браузеру определить, как правильно интерпретировать документ.

В данном случае мы говорим браузеру, что наш документ HTML соответствует международной спецификации «версии 4.0».

На самом деле одной строки для создания документа мало. После объявления версии и типа документа необходимо обозначить его начало и конец.

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

Затем, между тэгами <HTML> и </HTML> следует разместить заголовок и тело:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN>
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>

</HEAD>
<BODY>
Тело документа - «Полезная нагрузка: информация, графика, таблицы и т. д.»
</BODY>
</HTML>

Cхематически, приведенный выше пример будет выглядеть так:

Из схемы видно, что документ состоит из двух основных блоков - «заголовка» и «тела документа». Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY.

Заголовок содержит «техническую» информацию о документе, хотя чаще всего используется только для обозначения его названия.

Тело документа - содержит все то, что отображается на странице: текст, картинки, таблицы.

Вывод такой: большинство ваших HTML-экспериментов будет проводиться в пространстве между тэгами <BODY> и </BODY>.

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

Сначала закрываем заголовок </HEAD>, затем открываем тело <BODY>.

Заголовок документа

Заголовок cоздается с помощью элемента HEAD, между тэгами которого
размещаются элементы, содержащие техническую информацию о документе.

Элементы, относящиеся к заголовку: HEAD, TITLE, BASE, STYLE, LINK, META.

H E A D

Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе.

Пример:

<HTML>

<HEAD>
<TITLE>Учебник HTML</TITLE>
</HEAD>

<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>

Все что находится между скобками комментария (), браузером не отображается.

T I T L E

Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д....
</BODY>
</HTML>

B A S E

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

Тэг ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную.

НТМL разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной.

Тэг ВАSЕ позволяет определить эту базу.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<BASE HREF="http://name.domen.ru/">
</HEAD>
<BODY>



<A HREF="/uchebnik/kniga.html">Учебник</a>



<A HREF="http://name.domen.ru/uchebnik/kniga.html">Учебник</a>



<IMG SRC="/image/kartinka.gif">



<A HREF="http://name.domen.ru/image/kartinka.gif">Картинка</a>

</BODY>
</HTML>

Содержание тэга ВАSЕ интерфейсом пользователя прямо не отображается.

Параметр TARGET, позволяет открывать в документе все переходы по ссылкам в новом (отдельном) окне или в одном и том же фрейме.

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<BASE HREF="http://name.domen.ru/" target=_blank>
</HEAD>
<BODY>

</BODY>
</HTML>

S T Y L E

Используется для вставки в документ
таблицы стилей (CSS - Cascade Style Sheet).

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

<style type="text/css"></style>

</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>

L I N K

Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тэга.

В заголовке может содержаться несколько элементов LINK.

Элемент LINK используется Web-мастерами чаще всего только для внедрения CSS из отдельного файла.

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

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="name.css">
</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>

М Е Т А

Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары «имя-значение».

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

Элемент не имеет конечного тэга.

Параметры:

NAME - определяет имя мета-записи.

HTTP-EQUIV - определяет имя мета-записи. Практически аналогичен параметру NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.

CONTENT - присваивает значение мета-записи, определенной в параметре NAME (или HTTP-EQUIV).

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
< META http-equiv="Content-Type" content="text/html; charset=Windows-1251">
< META http-equiv="Content-Language" content="ru">
< META http-equiv="Cache-Control" content="no-cache">
< META name="Keywords" content="Ключевые слова">
< META name="Description" content="Описание страницы">
< META name="Copyright" content="© 01.01.200? by Администратор">
</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>

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

BODY - указывает начало и конец тела HTML-документа.

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

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

Параметры для браузера - «Internet Explorer»:

TOPMARGIN - определяет ширину верхнего и нижнего полей документа.

LEFTMARGIN - определяет ширину левого и правого полей документа.

Параметры для браузера - «Netscape»:

MARGINHEIGHT - определяет ширину верхнего и нижнего полей документа.

MARGINWIDTH - определяет ширину левого и правого полей документа.

Параметры для всех браузеров:

BACKGROUND - определяет изображение для «заливки» фона. Значение задается в виде полного URL или имени файла с картинкой в формате gif или jpg.

BGCOLOR - определяет цвет фона документа.

TEXT - определяет цвет текста в документе.

LINK - определяет цвет гиперссылок в документе.

ALINK - определяет цвет подсветки гиперссылок в момент нажатия.

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

Значения параметров BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY BACKGROUND="images/kartinka.jpg"
BGCOLOR="#202020"
TEXT="#FFFFFF"
LINK="#FF0000"
VLINK="#505050"
MARGINHEIGHT="30"
TOPMARGIN="30"
LEFTMARGIN="40"
MARGINWIDTH="40">
</BODY>
</HTML>

При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно параметры:
MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере.

Если Вы хотите сделать адаптацию только для браузера «Internet Explorer» (этот браузер является ведущим и используется 90% всех пользователей браузерами), то укажите только те параметры, которые поддерживает этот браузер.

Всегда указывайте параметры BGCOLOR и TEXT одновременно.

Считайте, что они неразлучны. Если один из этих параметров не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows.

А теперь представьте, что будет, если пользователь использует нестандартную раскраску Windows, где все цвета инвертированы?

Гипертекстовые ссылки

Ссылки на другие документы в HTML создаются с помощью элемента - A:

<A HREF="URL(адрес)">ссылка</A>.

Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения. Элемент A, самый необходимый элемент, без которого глобальная сеть Интернет просто немыслима в силу своей глобальности.

Для записи гипертекстовой ссылки используется контейнер <А ***> ... </А>, который называют «якорь» (аnchor).

Якорь имеет несколько атрибутов, главным из которых является НREF (НуреrТехt Reference).

Простую ссылку можно записать в виде:

<А НREF="http://login.domen/file.html">Это ссылка</А>

Где значением атрибута HREF является адрес документа «file.html» на машине
«login.domen.ru», доступ к которой осуществляется по протоколу НТТР.

Форма записи этого адреса называется универсальным локатором ресурсов (Universe Resource Locator) и является составной частью технологии WWW.

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

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

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

Другой формой использования тэга А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае когда документ нельзя поделить на части и необходимо быстро передвигаться из оглавления по тексту. Параметр NAME дает нам такую возможность.

Необходимо латиницей или цифрами создать слово-указатель там, куда надо сделать переход внутри документа: <А NАМЕ="ukazatel">.

Затем в ссылке для перехода сделать пометку на указатель:
<А НREF="file.html#ukazatel">Переход</A>

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

Параметр TARGET, позволяет открыть содержимое документа в новом окне:
<А НREF="file.html" target=_blank>Ссылка</A>

Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции:

<A HREF="ссылка-1.html">
<A HREF="ссылка-2.html">Вторая ссылка</A>
</A>

Текстовые блоки

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

Типичными примерами текстовых блоков являются параграфы, абзацы и главы.

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

H1, H2, H3, H4, H5, H6

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

Параметры:

ALIGN - определяет способ выравнивания заголовка по горизонтали.

Возможные значения: LEFT(слева), RIGHT(справа), CENTER(по центру).

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<H1 ALIGN="center">Самый большой заголовок посередине</H1>
<H2 ALIGN="left">Заголовок поменьше слева</H2>
<H3>...</H3>
<H4>...</H4>
<H5>...</H5>
<H6 ALIGN="right">Маленький заголовочек справа</H6>

</BODY>
</HTML>

P

Используется для разметки параграфов.

Параметры:

ALIGN - определяет способ горизонтального выравнивания параграфа.

Возможные значения: LEFT(слева), RIGHT(справа), CENTER(по центру). По умолчанию имеет значение LEFT.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<P ALIGN="center">Текст располагается в центре окна браузера</P>
<P ALIGN="right">А этот параграф, выровнен по правому краю.</P>

</BODY>
</HTML>

DIV

Используется для отделения блока HTML-документа от остальной части документа.

Находящиеся между начальным и конечным тэгами текст или HTML-элементы оформляются как отдельный параграф.

Параметры:

ALIGN - определяет выравнивание содержимого элемента DIV

Возможные значения: LEFT(слева), RIGHT(справа), CENTER(по центру).

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<DIV ALIGN="center">
... Выравнивание по центру. ... Текст, таблицы, изображения.
</DIV>

</BODY>
</HTML>

У параметра ALIGN есть еще одно значение - JUSTIFY, поддерживаемое современными браузерами.

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

Не понимающие JUSTIFY браузеры будут выравнивать текст по левому краю.

ADDRESS

Находящийся между начальным и конечным тэгами текст оформляется как почтовый адрес.

Чаще всего оформление выражается в выделении строки адреса курсивом.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<ADDRESS>
Москва. ул. Академика Королева, 13,
Мурзилке
</ADDRESS>

</BODY>
</HTML>

BLOCKQUOTE

Оформляет находящийся между начальным и конечным тэгами текст как цитату.

Используется для длинных цитат.

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

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<p>Хорошие слова песни А. Макаревича:</p>
<BLOCKQUOTE>
Мы в такие шагали дали, что не очень то и дайдешь.<br>
Мы в засадах годами ждали, не взирая на снег и дождь.<br>
Мы в воде ледяной не тонем, и в огне почти не горим.<br>
Мы охотники за удачей - птицей цвета ультрамарин.
</BLOCKQUOTE>
<p>Дальше еще лучше, но надо продолжать учиться...</p>

</BODY>
</HTML>

BR

Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию ENTER в текстовом редакторе.

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

Элемент не имеет конечного тэга.

Параметры:

ALL - завершить обтекание изображения текстом.

LEFT - завершить обтекание текстом изображения, выровненного по левому краю.

RIGHT - завершить обтекание текстом изображения, выровненного по правому краю.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<p>Первое предложение.<BR>Второе предложение на следующей строке.</p>

</BODY>
</HTML>

Возьмите за правило всегда ставить <BR> после тэга <IMG ***>.

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

HR

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

Параметры:

WIDTH - определяет длину линии в пикселах или процентах от ширины окна браузера.

SIZE - определяет толщину линии в пикселах.

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

LEFT - выравнивание по левому краю документа.

RIGHT - выравнивание по правому краю документа.

CENTER - выравнивание по центру документа (используется по умолчанию).

NOSHADE - определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.

COLOR - определяет цвет линии. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Работает только в Internet Explorer.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<p align="center">Этот параграф расположен до разделительной линии.</p>
<HR WIDTH="70%" SIZE="3">
<p align="center">А этот параграф расположен после разделительной линии.</p>

</BODY>
</HTML>

PRE

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

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

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<PRE>
Как в коде будет набран текст,
так он и будет отображаться при просмотре
в браузере, соблюдая все пробелы, отступы, перенос строки и т.д.
</PRE>
</BODY>
</HTML>

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

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

LISTING, PLAINTEXT, XMP

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

Они использовались до появления элемента PRE и на данный момент являются устаревшими.

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

Форматирование текста

Элементы для оформления и смыслового выделения текста - подчеркивания, изменения шрифта, выделения курсивом, цитирования и так далее.

BASEFONT

Не имеет конечного тэга.

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

Впоследствии вы можете легко изменить шрифт в любой части документа, используя элемент FONT.

Действие элемента BASEFONT не распространяется на текст, заключенный в ячейки таблиц.

Параметры:

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

FACE - определяет используемый шрифт (гарнитуру).

Пример - №1:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<BASEFONT SIZE="3">
Текст документа шрифтом 3 размера
<FONT SIZE="+1">
Немного увеличиваем шрифт
</FONT>
Продолжаем шрифтом 3 размера
</BODY>
</HTML>

Пример - №2:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<FONT FACE="Arial">
Основной текст документа шрифтом «Arial»
<FONT FACE="Times New Roman, serif" SIZE="5">
Вставка текста увеличенным шрифтом «Times New Roman»
</FONT>
Продолжается основной текст документа шрифтом «Arial»
</font>
</BODY>
</HTML>

FONT

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

Вне тэгов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT.

Параметры:

SIZE - определяет размер шрифта. Возможные значения:

* целое число от 1 до 7;
* относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT.

COLOR - определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

FACE - определяет используемый шрифт.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<FONT SIZE="+2" COLOR="#FF0000">
Увеличенный красный шрифт
</FONT>
<FONT SIZE="3" FACE="Courier" COLOR="Blue">
Моноширинный синий текст 3 размера
</FONT>
</BODY>
</HTML>

Будьте внимательны! Многие элементы форматирования текста (PRE, CODE, KBD, SAMP...), расположенные внутри элемента FONT, работают некорректно.

Не указывайте экзотических шрифтов. Если на компьютере пользователя не окажется требуемого шрифта, то все будет отображаться «закорючками» и «иероглифами».

I

Текст, заключенный между начальным <I> и конечным </I> тэгами,
будет выделен курсивом.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<I>Этот текст в браузере будет отображаться курсивом</I>
</BODY>
</HTML>

EM

Логическое ударение. Используется для смыслового выделения текста, стоящего между начальным <EM> и конечным </EM> тэгами.

Результат обычно отображается курсивом. То есть элемент EM практически аналогичен по действию элементу I.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
Русскому человеку надо
<EM>все и сразу</EM>,
а отдельные кусочки благ он не воспринимает.
</BODY>
</HTML>

B

Текст, заключенный между начальным <B> и конечным </B> тэгами, будет выделен жирным шрифтом.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
Слова <B>жирный шрифт</B>, выделены жирным шрифтом.
</BODY>
</HTML>

STRONG

Усиленное выделение. Текст, заключенный между начальным <STRONG> и конечным </STRONG> тэгами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу B.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
Информация - это <STRONG>ценный</STRONG> продукт!
</BODY>
</HTML>

U

Данный элемент отображает помещенный между начальным <U> и конечным </U> тэгами текст как подчеркнутый.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<U>Подчеркнутый текст</U>
</BODY>
</HTML>

S, STRIKE

Элемент STRIKE отображает помещенный между начальным <STRIKE> и </STRIKE> конечным тэгами текст как перечеркнутый. В HTML 3.2 вместо STRIKE был предложен более краткий тэг S.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<STRIKE>Перечеркнутый текст.</STRIKE>
</BODY>
</HTML>

BIG

Текст, заключенный между начальным <BIG> и конечным </BIG> тэгами, отображается увеличенным шрифтом (относительно текущего).

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
В предложении есть <BIG>увеличенное</BIG> слово.
</BODY>
</HTML>

Элемент BIG поддерживают только браузеры «Internet Explorer» и «Netscape». Если вы хотите обеспечить совместимость с другими средствами просмотра, используйте тэг <FONT SIZE="+1">.

SMALL

Текст, заключенный между начальным <SMALL> и конечным </SMALL> тэгами, отображается уменьшенным шрифтом (относительно текущего).

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
В предложении есть <SMALL>уменьшенное</SMALL> слово.
</BODY>
</HTML>

Элемент SMALL поддерживают только браузеры «Internet Explorer» и «Netscape».
Если вы хотите обеспечить совместимость с другими средствами просмотра, используйте тэг <FONT SIZE="-1">.

SUP

Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
Обычный текст и текст <SUP> в верхнем индексе</SUP>
</BODY>
</HTML>

SUB

Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
Обычный текст и текст <SUB> в нижнем индексе</SUB>
</BODY>
</HTML>

CODE, SAMP

Данные элементы оформляют текст, находящийся между начальным и конечным тэгами, как формулу или программный код. Текст при этом как правило отображается моноширинным шрифтом.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<CODE>Этот текст отображается моноширинным шрифтом</CODE>.
</BODY>
</HTML>

TT

Данный элемент отображает помещенный между начальным <TT> и конечным </TT> тэгами текст моноширинным шрифтом.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<TT>Телеграфный (машинный) шрифт</TT>
</BODY>
</HTML>

KBD

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

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

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
Введите пароль <KBD>GOLD</KBD> заглавными буквами.
</BODY>
</HTML>

VAR

Элемент VAR предназначен для обозначения в тексте переменных.
Как правило, отображается курсивом.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<VAR>index</VAR> = 10
</BODY>
</HTML>

CITE

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

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<CITE>Я из лесу вышел, и сразу зашел.</CITE>
</BODY>
</HTML>

Списки и определения

Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они способом оформления.

Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, кружочки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

UL

Создает неупорядоченный список. Между начальным <UL> и конечным </UL> тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<UL>
<LI>Первый пункт списка
<LI>Второй пункт списка
<LI>Третий пункт списка
<LI>Четвертый пункт списка
</UL>
</BODY>
</HTML>

OL

Создает упорядоченный список. Между начальным <OL> и конечным </OL> тэгами должны присутствовать один или несколько элементов <LI>, обозначающих отдельные пункты списка.

Параметры:

START - определяет первое число, с которого начинается нумерация пунктов (только целые числа)

TYPE - определяет стиль нумерации пунктов.

Может иметь значения:

* «A» - заглавные буквы A, B, C ...
* «a» - строчные буквы a, b, c ...
* «I» - большие римские числа I, II, III ...
* «i» - маленькие римские числа i, ii, iii ...
* «1» - арабские числа 1, 2, 3 ...

По умолчанию используется TYPE="1"

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<OL TYPE="I" START="3">
<LI>Третий пункт списка
<LI>Четвертый пункт списка
<LI>Пятый пункт списка
<LI>Шестой пункт списка
</OL>
</BODY>
</HTML>

LI

Создает пункт в списке. Располагается внутри элементов OL или UL.

Параметры:

VALUE - изменяет порядок нумерации элементов списка.
Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<OL TYPE="a" START="5">
<LI>Пункт озаглавлен маленькой латинской буквой «e»
<LI VALUE="15">Пункт озаглавлен маленькой латинской буквой «o»
<LI>Пункт озаглавлен маленькой латинской буквой «p»
<LI VALUE="20">Пункт озаглавлен маленькой латинской буквой «t»
</OL>
</BODY>
</HTML>

MENU, DIR

Данные тэги предназначены для создания неупорядоченных списков, подобных UL.

Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры могут распознавать их в целях обратной совместимости. Рекомендуется использовать вместо MENU и DIR элемент UL.

DL

Открывает и закрывает список определений (терминов и их описаний). Определения задаются с помощью тэгов <DT> и <DD>.

Параметры:

COMPACT - включает режим «компактного» отображения списка.
Удобно использовать, если список определений очень велик. Данный параметр является флагом и не требует присвоения значения.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<DL COMPACT>
<DT>Москва
<DD>Столица Российской Федерации.
<DT>Краснодар
<DD>Столица Юга России.
</DL>
</BODY>
</HTML>

DT

Создает термин в списке определений внутри элемента DL.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<DL COMPACT>
<DT>Магадан
<DD>Столица Колымского края.
<DT>Колыма
<DD>Река на Крайнем севере.
</DL>
</BODY>
</HTML>

DD

Cоздает определение термина внутри элемента DL.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<DL COMPACT>
<DT>Лед
<DD>Твердое состояние воды.
<DT>Пар
<DD>Газообразное состояние воды.
</DL>
</BODY>
</HTML>

Объекты

Объекты - это графические и мультимедийные вставки
в HTML-документ, такие как картинки, Java-апплеты, звуки, музыка и так далее.

IMG

Используется для вставки изображений в HTML-документ.

Это один из самых популярных элементов, незаменимый инструмент Web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные).

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

Элемент IMG не имеет конечного тэга.

Параметры:

SRC - обязательный параметр. Указывает адрес URL(адрес) файла с изображением.

HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Необходимо при обтекании изображения текстом.

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

Может принимать следующие значения:

* left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

* right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.

* top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

* middle - выравнивает базовую линию текущей текстовой строки с центром изображения.

* absmiddle - выравнивает центр текущей текстовой строки с центром изображения.

* bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

* absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

NAME - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

BORDER - определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

LOWSRC - указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

USEMAP - применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты - «map1», то ссылка на нее будет выглядеть как "#map1". Обратите внимание: прописные и строчные буквы в данном параметре трактуются браузером как разные.

ISMAP - определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный параметр является флагом и не требует присвоения значения.

Примечание:

В примерах, название и адрес картинок - вымышленные! Примеры приводятся лишь для визуального восприятия кода и более полного усвоения материала. Если вы вместо kartinka.gif подставите реальный адрес картинки, то все встанет на свои места и обтекание катинки текстом будет реальным. Тоже самое и со всеми примерами.

Пример - №1 (параметры вывода картинки и ее обтекание текстом):

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<IMG src="kartinka.gif" WIDTH="160" HEIGHT="40" ALT="Картинка"
HSPACE="15" ALIGN="LEFT" title="Параметры картинки">
Этот текст обтекает картинку справа и<br>находится от нее на расстоянии 15 пикселов.

</BODY>
</HTML>

Пример - №2 (картинка-ссылка):

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<A HREF="file.html">
<IMG src="kartinka.gif" WIDTH="200" HEIGHT="100" ALIGN="center"
BORDER="0" ALT="Картинка-ссылка" title="Картинка-ссылка">
</A>

</BODY>
</HTML>

Пример - №3 (использование ISMAP):

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<A HREF="http://name.domen.ru/imagemaps/map1">
<IMG SRC="map.gif" ISMAP>
</A>

</BODY>
</HTML>

Пример - №4: (использование USEMAP)

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<IMG src="img/buttons.jpg" WIDTH="150" HEIGHT="130" ALIGN="middle"
BORDER="0" USEMAP="#ButtonsMap">

</BODY>
</HTML>

Примечание...

* Золотое правило Web-мастера - всегда явно задавать размеры картинки в параметрах HEIGHT(высота) и WIDTH(ширина), резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это смотрится просто отвратительно.

* Второе золотое правило Web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT.

* Всегда сразу после <IMG ***> ставьте <BR>! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: <IMG ...><BR>.

* Для завершения обтекания изображения текстом, используйте параметр CLEAR
элемента BR.

* Значения TOP и TEXTTOP параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.

* Указывайте значения параметров HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.

* Старайтесь не создавать навигационных карт, обрабатываемых сервером. Иначе говоря, вместо параметра ISMAP используйте USEMAP и локальные карты.

EMBED

Используется для вставки в HTML объектов: не HTML документов и media файлов.

Тип вставляемого объекта, будь то музыкальный wav/midi-файл или трехмерный мир VRML, должен быть зарегистрирован на машине пользователя как проигрываемый одним из имеющихся plug-in или поддерживаемый каким-либо приложением.

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

Параметры:

Вставка объекта происходит так же, как и вставка изображения (см. элемент IMG): под внедряемый объект необходимо сначала выделить место. Поэтому элемент EMBED имеет ряд одинаковых с элементом IMG параметров, а именно:

NAME, ALIGN, ALT, BORDER, WIDTH, HEIGHT, HSPACE и VSPACE.

Другие параметры:

SRC - обязательный параметр. Определяет имя файла вставляемого объекта.

PLUGINSPACE - указывает на адрес (URL), по которому можно найти plug-in, нужный для просмотра типа файлов, аналогичных указанному в параметре SRC.

PALETTE - определяет тип цветовой палитры для просмотра объекта. Данный параметр работает только на Windows-машинах с 256-цветной системной палитрой.

Возможные значения:

* background - использовать background-палитру для отображения объекта (используется по умолчанию).

* foreground - использовать foreground-палитру для отображения объекта.

HIDDEN - определяет, отображать указанный объект или нет.

Возможные значения:

* true - отображать объект.

* false - не отображать объект (используется по умолчанию).

TYPE - явно указывает браузеру к какому типу файлов относится загружаемый объект, помогая определить необходимое средство просмотра (plug-in). В качестве значения указывается зарегестрированный MIME-тип файла.

Пример - 1:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<EMBED SRC="music.mid" HIDDEN="true">
<NOEMBED>Альтернативный текст для старых браузеров</NOEMBED>
</EMBED>
</BODY>
</HTML>

Пример - 2:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>
<EMBED SRC="music.vrml" HEIGHT="300" WIDTH="200" HSPACE="10"
ALIGN="center" PLUGINSPACE="../plugins/download_vrml.html">
<NOEMBED>Альтернативный текст для старых браузеров</NOEMBED>
</EMBED>
</BODY>
</HTML>

Примечание

* Для старых браузеров, не поддерживающих элемент EMBED, необходимо использовать элемент NOEMBED с указанием между начальным и конечным тэгами альтернативного текста, как показано в примерах выше.

* Обратите внимание - в спецификациях консорциума W3C про EMBED ничего не сказано, скороее всего данный элемент появился по инициативе разработчиков Netscape 1.1 и с тех пор поддерживается всеми браузерами для совместимости (начиная с MSIE 3.0-beta-2 и выше).

* Каким бы привлекательным элемент EMBED вам не казался, лучше его не использовать. Ни каждому может понравиться принудительное проигрывание MID-файла или попытка прокрутить ролик в неизвестном браузеру формате.

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

NOEMBED

Определяет текст, который будет отображен,
если браузер по какой-либо причине не работает с элементом EMBED.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<EMBED SRC="music.mid" HIDDEN="true">
<NOEMBED> Ваш браузер устарел!</NOEMBED>
</EMBED>

</BODY>
</HTML>

APPLET

Имеет начальный и конечный тэги. Используется для вставки в HTML Java-апплетов - программ на языке Java, исполняемых браузером на вашем компьютере.

Java-апплет исполняется в специально отведенном для него месте, отображаясь в документе наподобие картинки. Поэтому многие параметры элемента APPLET сходны с параметрами элемента IMG.

Если ваш браузер не имеет встроенной виртуальной Java-машины (и, соответственно, не поддерживает элемента APPLET), то на месте окошка Java-апплета вы увидите текст, заключенный между начальным и конечным тэгами.

Параметры:

CODE - обязательный параметр. Определяет имя файла исполняемого Java-апплета.

CODEBASE - указывает базовый адрес (URL), по которому находится файл с кодом исполняемого Java-апплета. Если парамер CODEBASE опущен, используется URL текущего документа.

ALIGN - обязательный параметр. Указывает способ выравнивания Java-апплета. Может принимать те же значения, что и аналогичный параметр элемента IMG.

HEIGHT и WIDTH - обязательные параметры. Определяют ширину и высоту (в пикселах) окошка вывода программы.

HSPACE и VSPACE - определяют отступ (в пикселах) по горизонтали и вертикали от других объектов документа.

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

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

SRC - указывает адрес (URL), ассоциированный с апплетом. Например, адрес сайта разработчика апплета.

Примечание

Для передачи Java-программе каких-либо параметров используется элемент PARAM

Напоминаем!

Ссылки на файлы и картинки - вымышленные.
Для работы того или иного примера, необходимо подставить адреса реальных файлов, картинок и так далее... Сама структура примеров - рабочая!

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<APPLET CODE="kosmos.class" WIDTH="100" HEIGHT="60"
ALIGN="left" ALT="Космическая панорамма">
Если вы видите этот текст, значит ваш браузер не поддерживает Java.
</APPLET>

</BODY>
</HTML>

В результате слева должно отображаться окошко (размером 100x60 точек) с космической панораммой. Разумеется, для этого у вас должен быть файл «kosmos.class», который должен лежать в той же папке, что и текущий документ.

PARAM

Располагается в начале элемента APPLET. Используется для передачи Java-программе каких-либо параметров. Элемент задает пару «имя - значение» переменной, которая будет передана Java-программе.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<APPLET CODEBASE="http://name.domen.ru/applets" CODE="JavaKosmos.class"
WIDTH="440" HEIGHT="475" ALIGN="center">
<PARAM NAME="width" VALUE="100">
<PARAM NAME="height" VALUE="50">
<PARAM NAME="name" VALUE="Kosmos">
</APPLET>

</BODY>
</HTML>

Таблицы

Таблицы в HTML формируются - построчно. Сначала c помощью элемента TR
надо создать ряд таблицы, в который затем элементом TD помещаются ячейки.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE width="450" height="220" border="2" cellspacing="1" cellpadding="3"
bgcolor="#FFFFF2" align="center">
<TR align="center">
<TD colspan="4">01</TD>
</TR>
<TR align="center">
<TD>02</TD><TD colspan="3">03</TD>
</TR>
<TR align="center">
<TH colspan=2>04</TH><TH colspan="2">05</TH>
</TR>
<TR align="center">
<TD>06</TD><TD colspan=2>07</TD><TD rowspan="3">08</TD>
</TR>
<TR align="center">
<TD rowspan="3">09</TD><TD>10</TD><TD rowspan="2">11</TD>
</TR>
<TR align="center">
<TD rowspan="1">12</TD>
</TR>
<TR align="center">
<TD colspan=3>13</TD>
</TR>
<TR align="center">
<TD colspan="2">14</TD><TD>15</TD><TD>16</TD>
</TR>
</TABLE>

</BODY>
</HTML>

TABLE

Элемент для создания таблицы.

Обязательно должен иметь начальный <TABLE> и конечный </TABLE> тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION.

Параметры:

ALIGN - определяет способ горизонтального выравнивания таблицы.

Возможные значения:

* LEFT

* CENTER

* RIGHT

* Значение по умолчанию - LEFT

VALIGN - определяет вертикальное выравнивание для содержимого таблицы.

Возможные значения:

* TOP

* BOTTOM

* MIDDLE

BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.

CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.

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

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

BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL(адрес) рисунка.

Примечание...

Если параметр HEIGHT указать равным 100%, то старые версии «Internet Explorer» будут создавать таблицу высотой чуть превышающей высоту окна браузера. Чтобы этого избежать, можно пожертвовать рамкой таблицы, указав BORDER="0".

Старые версии «Netscape» работают некорректно, если ширина и высота таблицы равны 100%. В этом случае вокруг таблицы остается свободное пространство.

Параметр VALIGN работает очень загадочно (?!). Можно сказать через раз.

Параметр ALIGN не работает в старых версиях браузера «Internet Explorer». Чтобы осуществить желаемое выравнивание таблицы, нужно поместить ее между тэгами элемента DIV:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<DIV ALIGN="center">
<TABLE width="300" height="50" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD align="center">
... Содержимое таблицы ...
</TD>
</TR>
</TABLE>
</DIV>

</BODY>
</HTML>

CAPTION

Задает заголовок таблицы.

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

Параметры:

ALIGN - определяет способ вертикального выравнивания заголовка таблицы.

Возможные значения:

* TOP - помещает заголовок над таблицей (значение по умолчанию)

* BOTTOM - помещает заголовок под таблицей

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE width="400" height="100" BORDER="1" align="center">
<CAPTION ALIGN="bottom"><b>Заголовок таблицы под таблицей</b></CAPTION>
<TR align="center">
<TD>Ячейка таблицы</TD>
</TR>
</TABLE>

</BODY>
</HTML>

TR

Создает новый ряд (строку) ячеек таблицы.
Ячейки в ряду создаются с помощью элементов TD и TH

Параметры:

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

Возможные значения:

* LEFT - слева

* CENTER - по центру

* RIGHT - справа

VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда.

Возможные значения:

* TOP - верх

* BOTTOM - низ

* MIDDLE - центр

BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

TD и TH

Элемент TD создает ячейку с данными в текущей строке.
Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.

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

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

Параметры:

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

Возможные значения:

* LEFT - лево

* CENTER - центр

* RIGHT - право

* По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.

VALIGN - определяет способ вертикального выравнивания содержимого ячейки.

* TOP - верх

* BOTTOM - низ

* MIDDLE - середина

* По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR

WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.

HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.

COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение - (1).

ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение - (1).

NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки.

BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL(адрес) рисунка. Данный параметр не работает в старых версиях браузера «Netscape» (до 3.x включительно).

Примечание...

Границы ячейки отображаются только в том случае, когда она имеет некое содержание (содержимое). Чтобы получить пустую ячейку с границами, достаточно поместить в нее специальный символ -  

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

Один из наиболее распространенных приемов Web-дизайнера - создание
«таблицы в таблице». Для этого достаточно расположить одну таблицу внутри ячейки другой.

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE bgcolor="#FFFFF2" width="400" height="100" BORDER="1" align="center">
<TR align="center">
<TD>Ячейка - 01</TD><TD>Ячейка - 02</TD><TD>Ячейка - 03</TD>
</TR>
<TR align="center">
<TD>Ячейка - 04</TD><TD>Ячейка - 05</TD><TD>Ячейка - 06</TD>
</TR>
<TR align="center">
<TD>Ячейка - 07</TD><TD>Ячейка - 08</TD><TD>Ячейка - 09</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Пример таблицы - 2

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE bgcolor="#FFFFF2" width="400" height="100" BORDER="1" align="center">
<TR align="center">
<TD>01</TD><TD>02</TD><TD>03</TD>
</TR>
<TR align="center">
<TD colspan="3">04</TD>
</TR>
<TR align="center">
<TD>05</TD><TD>06</TD><TD>07</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Пример таблицы - 3

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE bgcolor="#FFFFF2" width="400" height="100" BORDER="1" align="center">
<TR align="center">
<TD>01</TD><TD rowspan="3">02</TD><TD>03</TD>
</TR>
<TR align="center">
<TD>04</TD><TD>05</TD>
</TR>
<TR align="center">
<TD>06</TD><TD>07</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Пример таблицы - 4

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE bgcolor="#FFFFF2" width="400" height="100" BORDER="1" align="center">
<TR align="center">
<TD rowspan="2">01</TD><TD>02</TD><TD rowspan="2">03</TD>
</TR>
<TR align="center">
<TD>04</TD>
</TR>
<TR align="center">
<TD colspan="3">05</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Пример таблицы - 4

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE bgcolor="#FFFFF2" width="400" height="100" BORDER="1" align="center">
<TR align="center">
<TD rowspan="2">01</TD><TD>02</TD><TD rowspan="2">03</TD>
</TR>
<TR align="center">
<TD>04</TD>
</TR>
<TR align="center">
<TD colspan="3">05</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Пример таблицы - 4

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE bgcolor="#FFFFF2" width="400" height="100" BORDER="1" align="center">
<TR align="center">
<TD rowspan="2">01</TD><TD>02</TD><TD rowspan="2">03</TD>
</TR>
<TR align="center">
<TD>04</TD>
</TR>
<TR align="center">
<TD colspan="3">05</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Пример таблицы - 5

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<TABLE bgcolor="#FFFFF2" width="400" height="100" BORDER="1" align="center">
<TR align="center">
<TD>01</TD><TD rowspan="2">02</TD><TD>03</TD>
</TR>
<TR align="center">
<TD rowspan="2">04</TD><TD>05</TD>
</TR>
<TR align="center">
<TD colspan="2">06</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Формы

С помощью описанных ниже элементов вы можете создавать формы: заполняемые анкеты, опросники и различные поля для ввода текста пользователем с возможностью последующей отправки заполненной формы на ваш сервер.

FORM

Используется для создания заполняемой формы. Необходимо присутствие начального <FORM> и конечного </FORM> тэгов. Внутри элемента FORM разрешается использовать большинство HTML-элементов.

Параметры:

NAME - определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.

ACTION - обязательный параметр. Определяет URL(адрес), по которому будет отправлено содержимое формы. Это может быть либо адрес электронной почты, либо путь к скрипту сервера, обслуживающему данную форму.

METHOD - определяет способ отправки содержимого формы.

Возможные значения:

* GET - значение по умолчанию

* POST

ENCTYPE - определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".

TARGET - определяет имя окна, в которое возвращается результат обработки отправленной формы.

Возможные значения:

* _self

* _parent

* _top

* _blank

* Или явно указанное имя окна.

Примечание:

В примерах все адреса - вымышленные!
Примеры приводятся лишь для визуального восприятия кода и более полного усвоения материала. Все кнопки на лицевой стороне примеров заблокированы!

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>


<FORM ACTION="http://name.domen.ru/cgi-bin/thanks.pl" NAME="TestForm">

<INPUT TYPE="text" SIZE="25" VALUE="Ваши данные">
<INPUT TYPE="submit" VALUE="Отправить">
</FORM>


</BODY>
</HTML>

TEXTAREA

Создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле. Элемент TEXTAREA должен располагаться внутри элемента FORM.

Параметры:

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

ROWS - определяет количество строк текста, видимых на экране.

COLS - определяет ширину текстового поля - в печатных символах.

WRAP - определяет способ переноса слов в данной заполняемой форме.

Возможные значения:

* off - перенос слов не происходит (значение по умолчанию)

* virtual - перенос слов только отображается, на сервер же поступает неделимая строка.

* physical - перенос слов будет происходить во всех точках переноса.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<FORM>
<TEXTAREA NAME="address" WRAP="virtual" COLS="40" ROWS="4">
Текст в поле...
</TEXTAREA><br>
<input type="reset" name="" value=" Очистить ">
</FORM>

</BODY>
</HTML>

Результат:

Введите ваш текст в поле...

В этом примере, кнопка «Очистить» будет убирать только введеный текст. Текст который уже находится в поле - останется. Чтоб кнопка очищала полностью поле, надо к форме применить маленький сценарий «JavaScript». Выглядеть это будет так:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>


<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

</HEAD>
<BODY>

<FORM name="Fr">
<TEXTAREA NAME="Tx" WRAP="virtual" COLS="40" ROWS="4">
Текст в поле...
</TEXTAREA><br>
<input type="button" value="очистить поле" onclick="Cl()">
</FORM>

</BODY>
</HTML>

Результат:

Введите ваш текст в поле...

SELECT

Элемент SELECT создает в заполняемой форме меню типа «Выбор одного пункта из многих» или «Выбор нескольких пунктов из многих». Должен располагаться внутри элемента FORM и иметь как начальный <SELECT>, так и конечный </SELECT> тэги. Содержит несколько элементов OPTION.

Параметры:

MULTIPLE - дает возможность выбора нескольких пунктов меню. По умолчанию можно выбрать только один пункт меню.

NAME - определяет имя меню, уникальное для данной формы, которое будет использоватся при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION.

SIZE - определяет количество видимых пунктов в меню. Если значение этого параметра больше единицы, то результатом будет список пунктов.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<center>
<FORM>
<SELECT NAME="Выбор">
<OPTION SELECTED> Выбор - 1
<OPTION> Выбор - 2
<OPTION> Выбор - 3
<OPTION> Выбор - 4
<OPTION> Выбор - 5
</SELECT>
</FORM>
</center>

</BODY>
</HTML>

OPTION

Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Не имеет конечного тэга.

Параметры:

SELECTED - Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип «один из многих», то флагом SELECTED может быть помечен лишь один из пунктов меню.

VALUE - Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением параметра NAME в элементе SELECT.

SELECT SINGLE - это то же самое, что и SELECT, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется автоматический вертикальный скроллинг. Количество одновременно отображаемых элементов определяется атрибутом SIZE.

SELECT MULTIPLE - похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE - максимальное количество одновременно выбранных элементов.

Пример - 1:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<center>
<FORM>
<SELECT SINGLE NAME=group SIZE=6 MULTIPLE=2>
<OPTION> Некоторый текст - 1
<OPTION> Некоторый текст - 2
<OPTION> Некоторый текст - 3
<OPTION> Некоторый текст - 4
<OPTION> Некоторый текст - 5
<OPTION> Некоторый текст - 6
</SELECT>
</FORM>
</center>

</BODY>
</HTML>

Пример - 2:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<center>
<FORM>
<SELECT SINGLE NAME=group SIZE=6>
<OPTION> Некоторый текст - 1
<OPTION> Некоторый текст - 2
<OPTION> Некоторый текст - 3
<OPTION> Некоторый текст - 4
<OPTION> Некоторый текст - 5
<OPTION> Некоторый текст - 6
</SELECT>
</FORM>
</center>

</BODY>
</HTML>

INPUT

Элемент INPUT создает поле формы (кнопку, поле ввода, чекбокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тэга. Элемент INPUT должен располагаться внутри элемента FORM.

Параметры:

NAME - определяет имя, используемое при передаче содержания данной формы на сервер. Этот параметр необходим для большинства типов (параметр TYPE - cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.

TYPE - определяет тип поля для ввода данных. По умолчанию - это "text".

Возможные значения:

* text - создает поле ввода под одну строку текста. Как правило используется совместно с параметрами SIZE и MAXLENGTH.

* textarea - создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA.

* file - дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с параметром ACCEPT.

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

* checkbox - создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей CHECKBOX, которые могут иметь одинаковые имена. Каждое выбранное поле CHECKBOX создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле типа CHECKBOX обязательно должно иметь параметры NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано.

* radio - создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей CHECKBOX, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button).

* submit - создает кнопку, при нажатии которой заполненная форма посылается на сервер. Параметр VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если параметр NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для параметра SUBMIT, в противном случае пара не добавляется.

* image - создает графический образ для кнопки, инициализирующей передачу данных на сервер. Местонахождение графического изображения можно задать с помощью параметра SRC. При передаче данных серверу сообщаются координаты «x» и «y» той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля IMAGE суффиксов «.x» в случае абсциссы, и «.y» в случае ординаты.

* reset - создает кнопку, перезагружающую поля формы к их первоначальным значениям. Надпись на кнопке может быть изменена с помощью параметра VALUE. По умолчанию надпись на кнопке зависит от браузера.

* hidden - поля этого типа не отображаются на экране монитора, что позволяет разместить «секретную» информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер.

* button - позволяет создать кнопку в HTML документе, что добавляет функции при использовании Visual Basic Script или Java Script. Параметр NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр VALUE позволяет задать текст, который будет отображен на кнопке в документе.

ACCEPT - конкретизирует тип файла. Используется только совместно с параметром TYPE="file". Значение задается в виде MIME.

VALUE - задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, имеющих значение вида Boolean (отмеченный или неотмеченный), таких как checkbox или radio, будет возвращено значение, заданное в параметре VALUE.

CHECKED - указывает, что поля типов checkbox и/или radio (см. выше параметр TYPE) активизированы.

SIZE - определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 22 символа, надо указать SIZE="22".

MAXLENGTH - определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре SIZE, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено.

SRC - задает URL(адрес) картинки, используемой при создании графической кнопки, инициирующей передачу данных. Используется совместно с параметром TYPE="image".

ALIGN - определяет способ вертикального выравнивания для изображений. Используется совместно с параметром TYPE="image". Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.

Пример - 01:

Примечание:

В примерах все адреса - вымышленные! Примеры приводятся лишь для визуального восприятия кода и более полного усвоения материала. Все кнопки на лицевой стороне примеров заблокированы!

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<table border="2" cellspacing="1" cellpadding="15" align="center">
<tr>
<td>
<FORM NAME="Form01" ACTION="http://name.domen.ru/cgi-bin/file.pl">
<INPUT TYPE="hidden" NAME="info" VALUE="Голосование">
<INPUT TYPE="radio" NAME="golos" VALUE="Male" CHECKED>
Мужчина<BR>
<INPUT TYPE="radio" NAME="golos" VALUE="Female">
Женщина
<hr>
Имя:<BR>
<INPUT TYPE="text" NAME="textfield" VALUE="" SIZE="17" MAXLENGTH="60">
<hr>
Пароль:<BR>
<INPUT TYPE="password" SIZE="17" NAME="passwd">
<hr>
<center>
<INPUT TYPE="submit" VALUE=" Голосовать "><br>
<INPUT TYPE="reset" name="" value=" Очистить ">
</center>
</td>
</tr>
</FORM>
</table>

</BODY>
</HTML>

Результат:

Мужчина
Женщина
Имя:

Пароль:

Пример - 02:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>

<table border="2" cellspacing="0" cellpadding="20" align="center">
<tr>
<td>
<FORM NAME="Form02" ACTION="http://name.domen.ru/cgi-bin/zakaz.pl">
<center>
<p><font color="#FF0000"><u>Я желаю заказать:</u></font></p>
</center>
<INPUT TYPE="checkbox" NAME="z1"> Ковер самолет<br>
<INPUT TYPE="checkbox" NAME="z2"> Шапку невидимку<BR>
<INPUT TYPE="checkbox" NAME="z3" CHECKED> Золотую рыбку<BR>
<INPUT TYPE="checkbox" NAME="z4"> Сапоги скороходы<BR>
<INPUT TYPE="checkbox" NAME="z5"> Старика Хатабыча<BR>
<INPUT TYPE="checkbox" NAME="z6"> Лампу Алладина<BR>
<INPUT TYPE="checkbox" NAME="z7"> Волшебное колечко<BR>
<INPUT TYPE="checkbox" NAME="z8"> Василису прекрасную<BR>
<INPUT style="margin-left:3;" type="image" src="kartinka.gif"
WIDTH="147" HEIGHT="30">
</td>
</tr>
</FORM>
</table>

</BODY>
</HTML>

Результат:

Я желаю заказать:

Ковер самолет
Шапку невидимку
Золотую рыбку
Сапоги скороходы
Старика Хатабыча
Лампу Алладина
Волшебное колечко
Василису прекрасную

Фреймы

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

Каждое подокно, или фрэйм, может иметь следующие свойства:

* Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов.

* Каждый фрэйм имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрэйма.

* Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра).

Данные свойства фрэймов позволяют
создавать продвинутые интерфейсные решения:

* Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрэйме. Это может быть графический логотип фирмы, copyright, набор управляющих кнопок.

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

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

* Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных.

Синтаксис фрэймов:

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

<HTML>
<HEAD>

</HEAD>
<FRAMESET>

</FRAMESET>
</HTML>

Однако, фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно.

Он описывает только фрэймы, которые будут содержать информацию (кроме случая двойного документа).

Общий синтаксис фрэймов:

<HTML>
<HEAD>
<title>Изучаем фреймы</title>
</HEAD>
<FRAMESET COLS="value" | ROWS="value">
<FRAME SRC="(url)-01">
<FRAME ***>
</FRAMESET>
</HTML>

Элементы для
создания фреймов и работы с ними:

Примечание

Внимательно следите, чтобы все элементы находились вне элемента BODY. Фреймы к телу документа никаким образом не относятся!

FRAMESET

Определяет оконную структуру
документа: размеры и расположение фреймов на странице.

Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тэгами кроме элементов FRAME и NOFRAME могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов.

Параметры:

ROWS - определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую.

Способы задания размеров:

* в процентах от высоты рабочей области окна браузера - "30%,30%,40%";

* в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Звездочка в записи "25%,25%,*" равносильна 50%;

* в пикселах. Например: "75,*";

Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три
горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй - в 40 пикселов, а третий займет всю оставшуюся площадь.

COLS - определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются как и в предыдущем параметре ROWS.

BORDER - определяет ширину рамок фреймов в пикселах. Данный параметр действует только в браузерах «Netscape»;

FRAMEBORDER - определяет наличие рамок у содержащихся внутри FRAMESET фреймов.

Возможные значения:

* Yes - отображать рамки;

* No или 0 - не отображать рамки;

Браузеры «Netscape» не поддерживают данный параметр в полной мере и для глобального определения ширины рамок используют параметр BORDER.

FRAMESPACING - определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный параметр необходим для создания фреймов без рамок.

Примечание

Обратите внимание на то, что FRAMESET-структура должна располагаться до элемента BODY.

FRAMESET-структура, расположенная в заголовке (внутри элемента HEAD) не будет считаться ошибкой, однако лучше этого не делать.

FRAME

Определяет фрейм и его свойства
внутри FRAMESET-структуры. (см. элемент FRAMESET)

Параметры:

SRC - обязательный параметр. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.

NAME - определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра TARGET. В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов.

MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа.

MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа.

SCROLLING - определяет наличие линеек прокрутки содержимого фрейма.

Возможные значения:

* yes - отображать линейки прокрутки.

* no - не отображать линейки прокрутки.

* auto - отображать линейки прокрутки при необходимости (если документ, указанный в параметре SRC, не умещается во фрейме).

NORESIZE - не позволяет изменять размеры фрейма. Данный параметр является флагом и не требует указания значения.

FRAMEBORDER - определяет наличие рамок у фрейма.

Возможные значения:

* yes - отображать рамки;

* no или 0 - не отображать рамки;

Браузеры Netscape не поддерживают этот параметр полностью и для глобального определения ширины рамок используют параметр BORDER элемента FRAMESET.

Пример:

<HTML>
<HEAD>
<title>Изучаем фреймы</title>

<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="265,*">
<FRAME SRC="frame01.html" NAME="fr1">
<FRAMESET ROWS="165,*">
<FRAME SRC="frame02.html" NAME="fr2" MARGINWIDTH="0">
<FRAME SRC="frame03.html" NAME="fr3" MARGINWIDTH="0">
</FRAMESET>
<NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES>
</FRAMESET>

</HEAD>
<BODY>

</BODY>
</HTML>

NOFRAMES

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

NOFRAMES не имеет параметров и должен быть внутри элемента FRAMESET.

Пример:

<HTML>
<HEAD>
<title>Изучаем фреймы</title>

<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="265,*">
<FRAME SRC="frame01.html" NAME="fr1">
<FRAMESET ROWS="165,*">
<FRAME SRC="frame02.html" NAME="fr2" MARGINWIDTH="0">
<FRAME SRC="frame03.html" NAME="fr3" MARGINWIDTH="0">
</FRAMESET>
<NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES>
</FRAMESET>

</HEAD>
<BODY>

</BODY>
</HTML>

Скрипты

Скрипты - это включения в HTML
не-HTML кода, дополняющего его возможности.

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

Данный учебник посвящен освоению языка гипертекстовой разметки (HTML), поэтому, в подробности языка «JavaScript» здесь мы вдаваться не будем.

Элемент SCRIPT чаще всего располагают между <HEAD> и </HEAD>

Элементы для работы со скриптами:

SCRIPT

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

Сам текст скрипта либо располагается между начальным <SCRIPT> и конечным </SCRIPT>
тэгами, либо определяется как URL(адрес) скрипт-файла в параметре SRC.

Параметры:

LANGUAGE - определяет язык, на котором написан скрипт, например, "JavaScript".

SRC - определяет URL(адрес) скрипта.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>


<SCRIPT LANGUAGE="JavaScript" SRC="http://name.domen.ru/js_papka/script.js">
</SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

В целях совместимости со старыми браузерами, содержимое элемента SCRIPT следует заключать , т.е. оформлять его как обычный HTML-комментарий:

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>


<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

NOSCRIPT

Определяет текст, который будет отображен,
если браузер по какой-либо причине не работает со скриптами.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>


<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Навигационные карты

Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении.

Применить созданную карту к изображению можно вызвав ее по имени с помощью параметра USEMAP элемента IMG.

Пример:

<HTML>
<HEAD>
<title>Учебник «HTML»</title>


<MAP NAME="MapKarta">
<AREA HREF="001.html" SHAPE="rect" COORDS="0,0,70,140"
ALT="Левая половинка">
<AREA HREF="002.html" SHAPE="rect" COORDS="71,0,140,140"
ALT="Правая половинка">
</MAP>


</HEAD>
<BODY>


<IMG src="kartinka.gif" USEMAP="#MapKarta" HEIGHT="140" WIDTH="140"
BORDER="0">

</BODY>
</HTML>

В данном примере мы создали квадратное изображение размером 140x140 пикселов, левая часть которого является ссылкой на файл 001.html, а правая - на файл 002.html.

Примечание

Для создания карт, обрабатываемых на сервере, используется параметр ISMAP элемента IMG. Мы их сознательно не рассматриваем, так как механизм обработки карт на удаленной машине осуществляется с помощью скриптов и не имеет к HTML никакого отношения.

MAP

Создает новую навигационную карту. Между начальным и конечным тэгами содержит один или несколько элементов AREA, определяющих навигационные области карты.

Параметры:

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

Используется для вызова карты с помощью параметра USEMAP элемента IMG. Можно указать имя без пробелов с использованием латинских символов и цифр.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>


<MAP NAME="Map001">

<AREA HREF=" *** ">
<AREA HREF=" *** ">

</MAP>


</BODY>
</HTML>

AREA

Создает область карты, определенной с помощью элемента MAP. Элемент AREA должен располагаться между начальным <MAP> и конечным </MAP> тэгами элемента MAP. Не имеет конечного тэга.

Параметры:

SHAPE - определяет форму навигационной области.

Возможные значения:

* rect - прямоугольник;

* circle - окружность;

* poly - многоугольник.

В зависимости от выбранной формы меняется способ задания ее координат в параметре COORDS.

COORDS - определяет координаты навигационной области на карте.

Способы задания координат для разных типов областей:

* SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y";

* SHAPE="circle" COORDS="центр x, центр y, радиус";

* SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...".

HREF - определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен.

NOHREF - определяет область как неактивную (невосприимчивую к нажатию). Данный параметр противоположен параметру HREF и используется для отмены действия последнего.

ALT - определяет альтернативный текст-подсказку для данной области.

Пример:

<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>

</HEAD>
<BODY>


<MAP NAME="map0001">
<AREA NOHREF SHAPE="circle" COORDS="80,70,40">
<AREA HREF="file.html" ALT="Навигационная карта" SHAPE="rect"
COORDS="0,0,167,140">
</MAP>


<IMG src="kartinka.gif" WIDTH="167" HEIGHT="140" BORDER="0"
ALT="Навигационная карта" USEMAP="#map0001">

</BODY>
</HTML>

Примечание

В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми.

Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом - активная со ссылкой.

Старайтесь всегда указывать параметр ALT. Пользователи, работающие в текстовом режиме, скажут вам спасибо.