XTML-справочник - BODY

BODY

(HTML 2.0) ? Body

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

Атрибуты:

MARGINHEIGHT ? определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.

TOPMARGIN ? определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.

MARGINWIDTH ? определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

LEFTMARGIN ? определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

BACKGROUND ? определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

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

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

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

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

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

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

Примечания:

Пример:

<HTML>

...

Текст документа.

...

</BODY>

</HTML>

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

Всегда указывайте атрибуты BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих атрибутов не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows. А теперь представьте, что будет, если пользователь использует нестандартную раскраску Windows, где все цвета инвертированы? То-то. Некрасиво получится.

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

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

Элементы форматирования текста:

Частичная или полная перепечатка или иное использование материалов сайта допускается только с разрешения автора. Ссылка на источник обязательна. Нарушители преследуются по закону РФ и все такое.

-	BASEFONT	Определяет основной шрифт, которым должен отображаться текст документа
-	FONT	Позволяет изменять цвет, размер и тип шрифта текста
-	I	Выделяет текст курсивом
-	EM	Используется для смыслового выделения текста (курсивом)
-	B	Выделяет текст жирным шрифтом
-	STRONG	Усиленное выделение текста (жирным)
-	U	Выделяет текст подчеркнутым
-	S, STRIKE	Выделяет текст перечеркнутым
-	BIG	Отображает текст увеличенным шрифтом (относительно текущего)
-	SMALL	Отображает текст уменьшенным шрифтом (относительно текущего)
-	SUP	Отображает текст со сдвигом вверх (верхний индекс)
-	SUB	Отображает текст со сдвигом вниз (нижний индекс)
-	CODE, SAMP	Оформляют текст как формулу или программный код
-	TT	Отображает текст моноширинным шрифтом
-	KBD	Выделяет текст, который предлагается набрать на клавиатуре
-	VAR	Используется для обозначения в тексте переменных
-	CITE	Оформляет текст как цитату или ссылку на источник

Формы

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

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

-	FORM	Создает заполяемую форму
-	TEXTAREA	Создает поле для ввода нескольких строк текста
-	SELECT	Создает меню в заполняемой форме
-	OPTION	Создает отдельные пункты в меню (см. SELECT)
-	INPUT	Создает поле в форме

Гиперссылки

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

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

ССЫЛКИ НА ДРУГИЕ САЙТЫ ПО ДАННОЙ ТЕМАТИКЕ

Краткий экскурс в историю гипертекста (А.Лебедев)

Объекты

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

Элементы:

-	IMG	Используется для вставки в HTML изображений
-	EMBED	Используется для вставки в HTML различных объектов
-	NOEMBED	Используется, если браузер не поддерживает элемент EMBED
-	APPLET	Используется для вставки в HTML Java-апплетов
-	PARAM	Используется для передачи параметров Java-программе (см. элемент APPLET)

Списки

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

Элементы:

-	UL	Создает неупорядоченный список
-	OL	Создает упорядоченный список
-	LI	Создает пункт меню внутри элементов OL или UL
-	MENU, DIR	Создает неупорядоченный список, подобный UL
-	DL	Открывает и закрывает список определений
-	DT	Создает термин в списке определений внутри элемента DL
-	DD	Cоздает определение термина внутри элемента DL

Таблицы

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

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

Важно:

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

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

-	TABLE	Создает таблицу
-	CAPTION	Задает заголовок таблицы
-	TR	Создает новый ряд (строку) ячеек таблицы
-	TD и TH	Создает ячейку с данными в текущей строке
-	Примеры таблиц

Результат:

Пример:

<TR>

</TR>

<TR>

</TR>

</TABLE>

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

A1	B1	C1
A2	B2	C2

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

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

Элементы:

-	H1,H2,...H6	Используются для создания заголовков текста
-	P	Используется для разметки параграфов.
-	DIV	Отделяет блок HTML-документа от остальной его части
-	ADDRESS	Оформляет текст как почтовый адрес
-	BLOCKQUOTE	Оформляет текст как цитату
-	BR	Осуществляет перевод строки
-	HR	Вставляет в текст горизонтальную разделительную линию.
-	PRE	Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста
-	LISTING, PLAINTEXT, XMP	Включают в документ (моноширинным шрифтом) блок предварительно отформатированного текста (устаревшие элементы)

XTML-справочник - FORM

FORM

(HTML 2.0) ? Form

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

Атрибуты:

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

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

METHOD ? определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST.

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

TARGET ? определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в атрибуте TARGET элемента A.

Примечания:

Пример:

Фамилия:

</FORM>

'

	Во время отладки скрипта, принимающего данные, удобнее всего использовать метод GET.
	Метод GET не позволяет передать скрипту большой объём данных. Если предполагается, что пользователь будет заполнять очень большую форму или вводить объёмные текстовые данные, или пересылать файл ? используйте METHOD="POST".
	Перед тегом <FORM> в браузерах Netscape образуется пустое пространство, вертикальный отступ. Если вас это не устраивает и при этом форма на странице одна, поместите тег <FORM> в начало страницы, сразу после тега <BODY>, это должно помочь.

INPUT

(HTML 2.0) ? Input

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

Атрибуты:

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

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

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

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

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

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

checkbox ? создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей checkbox, которые могут иметь одинаковые имена. Каждое выбранное поле chackbox создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле этого типа обязательно должно иметь атрибуты 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 получается посредством добавления к названию соответствующего поля суффиксов ".x" (абсциссы), и ".y" (ординаты).

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

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

button ? позволяет создать пользовательскую кнопку в HTML документе, что, при умелом использовании JavaScript, добавляет форме функциональность.

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

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

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

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

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

SRC ? задает URL-адрес картинки, используемой при создании графической кнопки. Используется совместно с атрибутом TYPE="image".

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

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

Пример 1:

<FORM NAME="Form1" ACTION="http://www.igf.ru/cgi-bin/banya.pl">

<INPUT TYPE="hidden" NAME="info" VALUE="Запись в баню на воскресенье">

<INPUT TYPE="radio" NAME="sex" VALUE="Male" CHECKED> Мужик<BR>

<INPUT TYPE="radio" NAME="sex" VALUE="Female"> Баба<BR>

Имя:<BR>

<INPUT TYPE="text" NAME="textfield" VALUE="Вася Пупкин" SIZE="30" MAXLENGTH="60"><BR>

Пароль:<BR>

<INPUT TYPE="password" WIDTH="10" NAME="passwd"><BR><BR>

<INPUT TYPE="submit" VALUE="Запулить">

</FORM>

Пример 2:
	Хочу получать следующие издания:<br> <FORM NAME="Form2" ACTION="http://www.igf.ru/cgi-bin/magazines.pl"> <INPUT TYPE="checkbox" NAME="m1">Страшная газета<br> <INPUT TYPE="checkbox" NAME="m2">6 соток<BR> <INPUT TYPE="checkbox" NAME="m3" CHECKED>Мурзилка<BR> <INPUT type="image" src="/img/button.gif" WIDTH="60" HEIGHT="30"> </FORM>

OPTION

(HTML 2.0) ? Option

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

Атрибуты:

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

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



Designed by Vladimir Gorodulin , Copyright © 1999-2004 Частичная или полная перепечатка или иное использование материалов сайта допускается только с разрешения автора. Ссылка на источник обязательна. Нарушители преследуются по закону РФ и все такое.

Результат:

Мужской Женский Определяюсь

Пример:

...

<OPTION VALUE="male" SELECTED>Мужской

<OPTION VALUE="female">Женский

<OPTION VALUE="not_yet">Определяюсь

</SELECT>

</FORM>

...

SELECT

(HTML 2.0) ? Select

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

Атрибуты:

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

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

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

Результат:

MS-DOS MS Windows98 UNIX MS Windows NT

Пример:

...

<OPTION VALUE="DOS">MS-DOS

<OPTION VALUE="WinXP">MS Windows98

<OPTION VALUE="Unix" SELECTED>UNIX

<OPTION VALUE="WinNT">MS Windows NT

</SELECT>

</FORM>

...

TEXTAREA

(HTML 2.0) ? Text Area

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

Атрибуты:

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

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

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

WRAP ? определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения:

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

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

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

Результат:

Ваш адрес...

Примечание:

Пример:

...

<TEXTAREA NAME="address" WRAP="virtual" COLS="40" ROWS="3">Ваш адрес...</TEXTAREA><br>

</FORM>

...

ПОЧИТАТЬ НА АНГЛИЙСКОМ:

Methods GET and POST in HTML forms ? what's the difference?

Поле типа TEXTAREA позволяет пользователю набрать довольно большой блок текста. Поэтому, если в форме присутствует поле TEXTAREA, передавайте скрипту данные методом POST (см. элемент FORM) иначе есть вероятность потери данных.

XTML-справочник - FRAME

FRAME

(HTML 4.0) ? Frame

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

Атрибуты:

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

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

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

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

SCROLLING ? определяет наличие линеек прокрутки содержимого фрейма. Возможные значения:

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

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

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

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

FRAMEBORDER ? определяет наличие рамок у фрейма. Возможные значения:

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

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

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

<

В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.html будет иметь ширину 265 пикселов, а frame2.html ? высоту 165.

Пример (файл index.html):

...

</FRAMESET>

<NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES>

</FRAMESET>

<BODY>

</BODY>

...

FRAMESET

(HTML 4.0) ? Frame Set

Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется).

Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы 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 ? определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок.

Примечание:



Designed by Vladimir Gorodulin , Copyright © 1999-2004 Частичная или полная перепечатка или иное использование материалов сайта допускается только с разрешения автора. Ссылка на источник обязательна. Нарушители преследуются по закону РФ и все такое.

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

NOFRAMES

(HTML 4.0) ? No Frames

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



Designed by Vladimir Gorodulin , Copyright © 1999-2004 Частичная или полная перепечатка или иное использование материалов сайта допускается только с разрешения автора. Ссылка на источник обязательна. Нарушители преследуются по закону РФ и все такое.

Пример:

<NOFRAMES>Ваш браузер не поддерживает фреймы. Обыдно, да?</NOFRAMES>

</FRAMESET>

XTML-справочник - BASE

BASE

(HTML 3.2) ? Base URL

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

Атрибуты:

HREF ? определяет базовый адрес (URL) текущего документа.

TARGET ? определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме.

Пример:

<HEAD>

<TITLE>Руководство по эксплуатации</TITLE>

</HEAD>

...

<A HREF="../list.html">Список</A>

...

HEAD

(HTML 1.0) ? Head

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

Пример:

<HTML>

<HEAD>

<title>Справочник по HTML</title>

</HEAD>

<BODY>

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

</BODY>

</HTML>

LINK

(HTML 2.0) ? Link

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

Атрибуты:

HREF ? определяет URL объекта.

REL ? определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:

stylesheet ? указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE)

home ? указывает на заглавную страницу вашего сайта

toc, contents ? указывают на файл, содержащий оглавление данного документа.

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

glossary ? указывает на файл, содержащий перечень терминов, относящихся к текущему документу.

copyright ? указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.

up, parent ? указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).

child ? указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).

next ? указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).

previous ? указывает на предыдущую страницу в последовательности документов.

last, end ? указывает на последнюю страницу в последовательности документов.

first ? указывает на первую страницу в последовательности документов.

help ? указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

TYPE ? определяет MIME-тип для объекта, указанного в атрибуте HREF.

Пример 1:
	<HEAD> <TITLE>Элемент DIV</TITLE> <LINK REL="HOME" TITLE="HTML-справочник" HREF="index.html"> <LINK REL="UP" TITLE="Текстовые блоки" HREF="textblocks.html"> <LINK REL="PREVIOUS" TITLE="Элемент P" HREF="p.html"> <LINK REL="NEXT" TITLE="Элемент ADDRESS" HREF="address.html"> </HEAD>

Примечания:

Пример 2:
	<HEAD> <TITLE>Полдневье</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="deco1.css"> </HEAD>

STYLE

(HTML 3.2) ? Style

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

Атрибуты:

TYPE ? обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".

TITLE ? определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.

Примечания:

Пример:

<HEAD>

<TITLE>Пример использования таблицы стилей</TITLE>

<!--

A {text-decoration : none;}

P {color : blue; font-size : 12pt; font-family : Arial;}

H1 {color : red; font-size : 18pt;}

-->

</STYLE>

</HEAD>

РЕКОМЕНДУЕМ ПОЧИТАТЬ ПРО CSS:

Отличное руководство по CSS на MANUAL.RU

Раздел нашего форума, посвящённый CSS

Доступное описание CSS (Cascading Style Sheets) (www.citforum.ru)

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

TITLE

(HTML 2.0) ? Title

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

Пример:

...

<HEAD>

<TITLE>Руководство по эксплуатации</TITLE>

</HEAD>

...

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

Фреймы

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

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

Примечания:

-	FRAMESET	Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице
-	FRAME	Определяет фрейм и его свойства внутри FRAMESET-структуры
-	NOFRAMES	Определяет что показывать, если браузер не поддерживает фреймы

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

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

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

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

Примечание:

Пример:

</MAP>

<BODY>

...

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

(HTML 1.0) ? Comment ()

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

Примечания:

Пример:

<HTML>

...

<BODY>

...

</BODY>

</HTML>

	Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке документа. Иначе говоря, тег <!-- --> внутри TITLE не действует.
	Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.

html кода, дополняющего его возможности.

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

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

-	SCRIPT	Вставляет скрипт в HTML-документ
-	NOSCRIPT	Определяет текст, который будет отображен, если браузер не поддерживает скрипты

Структура HTML-документа. Начинаем работу.

С чего начинается HTML

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2, которая хоть и не отличается новизной, но, в отличие от более поздних версий, является полноценным, широко распространенным стандартом без каких-либо неопределенностей. Как видно из примера, самый короткий html-документ состоит буквально из одной строки.



Designed by Vladimir Gorodulin , Copyright © 1999-2004 Частичная или полная перепечатка или иное использование материалов сайта допускается только с разрешения автора. Ссылка на источник обязательна. Нарушители преследуются по закону РФ и все такое.

С чего начинается работа

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

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено ? вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:

Пример самого короткого HTML-документа:
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<

Разжевать?

Если приведенный выше пример пояснить схематически, получится следующее:

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

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

Тело документа ? святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

Распространённые ошибки:

Правильный пример самого короткого HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

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

</BODY>

</HTML>

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

Создается с помощью элемента BODY. Именно в теле документа содержится все то, что мы видим на странице. А на странице мы обычно видим:

Текст, блоки текста (причем текста форматированного)

Гиперссылки

Разнообразные списки

Таблицы

Всяческие объекты, картинки

Заполняемые формы

Примечания:

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

	"Бестелесных" документов не бывает. Документ без тела будет похож на одинокую голову профессора Доуэля (см. структуру HTML=документа).
	Документ может иметь несколько "тел" ? фреймов. В этом случае тело вместе со всем его содержимым удаляется и вместо него вставляется FRAMESET.

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

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

Элементы, относящиеся к заголовку документа:

-	HEAD	Определяет начало и конец заголовка документа
-	TITLE	Определяет имя всего документа, которое отображается в заголовке окна браузера
-	BASE	Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа
-	STYLE	Используется для вставки в документ таблицы стилей CSS
-	LINK	Описывает взаимосвязь документа с другими объектами
-	META	Используется для вставки метаданных

XTML-справочник - Anchor

A

(HTML 1.0) ? Anchor

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

Атрибуты:

HREF ? определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения:

http://... ? создает ссылку на www-документ;

ftp://... ? создает ссылку на ftp-сайт или расположенный на нем файл;

mailto:... ? запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";

news:.. ? создает ссылку на конференцию сервера новостей;

telnet://... ? создает ссылку на telnet-сессию с удаленной машиной;

wais://... ? создает ссылку на WAIS ? сервер;

gopher://... ? создает ссылку на Gopher ? сервер;

Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
Например, линк <A HREF="docs/title.html">Документация</A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).

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

Например: <A NAME="part">Раздел1</A>. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк <A HREF="document.html#part">Раздел1</A> отправит вас в раздел "part" файла document.html, а линк <A HREF="#bottom">В конец документа</A> ? в раздел "bottom" текущего документа. (см.

Пример 1)

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

_self ? указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме;

_parent ? указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм;

_top ? указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры;

_blank ? указывает, что документ должен отображаться в новом окне.

Пример 1:
	<!-- Использование атрибута NAME: --> <A NAME="history">История бодибилдинга</A> ... <A NAME="now">Спорт глазами современника</A> ... Вернуться к разделу<A HREF="#history">истории</A>

Пример 2:
	<!-- Использование атрибута HREF: --> <A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A> <A HREF="http://opengl.rdc.ru">Русский проект по OpenGL</A> ...

Примечания:

Пример 3:

<A HREF="mailto:green@igf.ru?subject=Приглашение &cc=bg@microsoft.com&body=Приезжай на вечеринку.">

Отправить приглашение </A>.



<A HREF="mailto:green@igf.ru?subject=Привет">авторам</A>.

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

<

<A HREF="link1.html">

Первый линк

<A HREF="link2.html">Второй линк</A>

Продолжаем первый линк

</A>

HTML-справочник. Введение

Коротко о справочнике

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

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

Все теги, не описанные в этом справочнике, можете смело выбросить в помойку.

Как устроен справочник

Очень просто. Эталоном построения справочника стали классические брошюры по всевозможным языкам программирования, описывающие элементы языка парой "элемент ? описание".

Для "крутых"

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

Как понимать написанное

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

Тег ? оформленная единица HTML-кода. Например, <HEAD>, <FONT ...>, <BODY>, <HTML> и так далее. Теги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/"). Например, вышеуказанным тегам соответствуют закрывающие теги </HEAD>, </FONT>, </BODY>, </HTML>.

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

Если вы хотите иметь копию

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

Если в атрибуте TARGET указать имя несуществующего окна или фрейма, создастся новое окно с указанным именем. Как мы видим, результат получится тот же, что и при задании нового окна: <A HREF="..." TARGET="_blank">, с той лишь разницей, что в последнем случае окно не будет иметь имени и на него нельзя будет ссылаться.

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

Это вам пригодится

-	Таблица базовых цветов
-	Таблица MIME-типов
-	Форматы изображений ? GIF или JPG?
-	Спецсимволы в HTML
-	FAQ
-	Полезные линки

СООБРАЖЕНИЯ

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

ССЫЛКИ НА ДРУГИЕ ПОЛЕЗНЫЕ САЙТЫ

Параграфы Ру/Ководства Артемия Лебедева

Садовые грабли в газоностроении

-	На работе и дома
-	F5 или снова о клонировании
-	За что я люблю англоязычный Интернет
-	Проблемы, которые мы выбираем
-	За что надо отрывать руки
-	Дизайн vs Контент
-	Идеология HTML
-	Возьми с собой в дорогу

Таблица базовых цветов

C0 Controls иBasic Latin "


Œ	?	OElig	Œ	латинская заглавная лигатура OE	U+0152	ISOlat2
œ	?	oelig	œ	латинская строчная лигатура oe	U+0153	ISOlat2
Лигатура ? это misnomer, она является отдельным символом в некоторых языках
Š	S	Scaron	Š	latin capital letter S with caron	U+0160	ISOlat2
š	s	scaron	š	latin small letter s with caron	U+0161	ISOlat2
Ÿ	Y	Yuml	Ÿ	latin capital letter Y with diaeresis	U+0178	ISOlat2
Главная сайта