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

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 базовых цветов.

Пример:
	... Текст документа. ...

Примечания:

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

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

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

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

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

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

-	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	Создает ячейку с данными в текущей строке
-	Примеры таблиц

Пример:

A1	B1	C1
A2	B2	C2

Результат:

A1	B1	C1
A2	B2	C2

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

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

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

Элементы:

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

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.

Пример:
	Фамилия: '

Примечания:

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

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:
	Мужик Баба Имя: Пароль:

Пример 2:
	Хочу получать следующие издания: Страшная газета 6 соток Мурзилка

OPTION

(HTML 2.0) ? Option

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

Атрибуты:

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

Пример:
	... ...

Результат:

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

SELECT

(HTML 2.0) ? Select

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

Атрибуты:

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

Пример:
	... ...

Результат:

MS-DOS MS Windows98 UNIX MS Windows NT

TEXTAREA

(HTML 2.0) ? Text Area

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

Атрибуты:

NAME ? обязательный атрибут. Определяет название, которое будет использоваться при идентификации заполненого поля сервером.
ROWS ? определяет количество строк текста, видимых на экране.
COLS ? определяет ширину текстового поля ? в печатных символах.
WRAP ? определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения:
off ? перенос слов не происходит (значение по умолчанию)

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

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

Пример:
	... Ваш адрес... ...

Результат:

Ваш адрес...

Примечание:

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

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

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

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.

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

<

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

FRAME

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

Примечание:

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

NOFRAMES

(HTML 4.0) ? No Frames

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

Пример:

BASE

(HTML 3.2) ? Base URL

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

Атрибуты:

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

Пример:
	Руководство по эксплуатации ... Список ...

HEAD

(HTML 1.0) ? Head

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

Пример:
	Справочник по 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:
	Элемент DIV

Пример 2:
	Полдневье

Примечания:

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

STYLE

(HTML 3.2) ? Style

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

Атрибуты:

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

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

Примечания:

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

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

STYLE

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

STYLE

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

STYLE

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

TITLE

(HTML 2.0) ? Title

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

Пример:
	... Руководство по эксплуатации ...

Фреймы

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

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

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

Примечания:

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

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

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

Пример:
	...

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

Примечание:

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

(HTML 1.0) ? Comment ()

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

Пример:
	... ...

Примечания:

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

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

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

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

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

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

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

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

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

Пример самого короткого HTML-документа:

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

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

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

<

Разжевать?

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

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

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

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

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

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

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

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

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

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

Гиперссылки

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

Таблицы

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

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

Примечания:

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

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

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

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

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

A

(HTML 1.0) ? Anchor

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

Атрибуты:

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

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

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

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

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

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

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

Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
Например, линк Документация будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
NAME ? помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа.

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

Пример 1)

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

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

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

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

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

Пример 1:
	История бодибилдинга ... Спорт глазами современника ... Вернуться к разделуистории

Пример 2:
	FTP-site Русский проект по OpenGL ...

Пример 3:
	Отправить приглашение . авторам.

Примечания:

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

Первый линк

Второй линк

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

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

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

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

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

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

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

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

Для "крутых"

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

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

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

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

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

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

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

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

-	Таблица базовых цветов
-	Таблица 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

FAQ

Как сделать красную строку?

Существует множество способов создания красной строки, большинство из них с недостатками. На эту тему написано много, но раз уж задали вопрос, отвечу и я 8)
Итак, красной строки в HTML не предусмотрено, что неудивительно ? в английском ее не используют вообще, а специально для русских HTML никто разрабатывать не собирался. Именно поэтому все способы создания красных строк суть своеобразный "финт ушами", попытка обмануть природу. Казалось бы, что идеологически верно ? не корежить текст, а воспользоваться CSS:

Пример:
	... тут всякий текст и все такое

Но у этого способа есть недостаток ? не работает в древних браузерах.
Наиболее распространенные способы обмана (работают везде):

_______

, где null.gif ? прозрачный gif-файл размером 1x1.

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

Форматы изображений ? GIF или JPG?

GIF и JPG ... в чем разница?

Изображения в Интернете хранятся в одном из двух форматов: GIF или JPG.
Для хранения изображений эти форматы используют совершенно разные алгоритмы, дающие порой колоссальный выигрыш в объеме. Но, с другой стороны, у каждого формата есть и свои ограничения. Умение выбирать нужный формат "на глаз" приходит не сразу, чаще всего сделать правильный выбор помогают лишь нескончаемые эксперименты.

GIF
JPG

256 цветов	True color (до 16.7 млн)
Поддерживает прозрачность участков изображения	Вся картинка непрозрачна
Обычно используется для кнопок, баннеров, элементов дизайна, логотипов, четких изображений с малым количеством оттенков, чертежей	Обычно используется для фотографий и иных "пестрых" картинок с большим количеством плавных переходов цветов

Выбор формата всегда направлен на то, чтобы добиться минимального объема получившегося файла. Старайтесь добиваться того, чтобы суммарный объем всех изображений, используемых в дизайне вашего сайта не превышал 30-50 килобайт. Чем меньше ? тем лучше. Делать страницы с графикой большого объема просто неприлично ? пользователи вам за это спасибо не скажут.
Для экспериментов вам понадобится соответствующий инструментарий ? программы-оптимизаторы изображений, так называемые "сэйверы" (см. гл. "Возьми с собой в дорогу").

Эффект "Мозилла". Размер или количество?

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

СМОТРИТЕ ТАКЖЕ:

Форматы изображений ? GIF или JPG?

Описание элемента IMG ? используется для вставки изображений в страницу.

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

Форматы изображений ? GIF или JPG?

Оптимизация изображений в формате GIF (Mike Melnikov)

Форматы изображений ? GIF или JPG?

Оптимизация изображений в формате JPG (Mike Melnikov)

Форматы изображений ? GIF или JPG?

Простой секрет GIF'а ? о принципе работы этого формата (А.Лебедев)

Форматы изображений ? GIF или JPG?

"Возьми с собой в дорогу..." ? обзор инструментария.

Геометрические формы


◊	?	loz	◊	lozenge	U+25CA	ISOpub

Греческие буквы


Α	?	Alpha	Α	греческая заглавная буква альфа	U+0391
Β	?	Beta	Β	греческая заглавная буква бета	U+0392
Γ	?	Gamma	Γ	греческая заглавная буква гамма	U+0393	ISOgrk3
Δ	?	Delta	Δ	греческая заглавная буква дельта	U+0394	ISOgrk3
Ε	?	Epsilon	Ε	греческая заглавная буква эпсилон	U+0395
Ζ	?	Zeta	Ζ	греческая заглавная буква дзета	U+0396
Η	?	Eta	Η	греческая заглавная буква эта	U+0397
Θ	?	Theta	Θ	греческая заглавная буква тета	U+0398	ISOgrk3
Ι	?	Iota	Ι	греческая заглавная буква иота	U+0399
Κ	?	Kappa	Κ	греческая заглавная буква каппа	U+039A
Λ	?	Lambda	Λ	греческая заглавная буква лямбда	U+039B	ISOgrk3
Μ	?	Mu	Μ	греческая заглавная буква мю	U+039C
Ν	?	Nu	Ν	греческая заглавная буква ню	U+039D
Ξ	?	Xi	Ξ	греческая заглавная буква кси	U+039E	ISOgrk3
Ο	?	Omicron	Ο	греческая заглавная буква омикрон	U+039F
Π	?	Pi	Π	греческая заглавная буква пи	U+03A0	ISOgrk3
Ρ	?	Rho	Ρ	греческая заглавная буква ро	U+03A1
Буква Sigmaf отсутствует, изнак U+03A2 ? тоже
Σ	?	Sigma	Σ	греческая заглавная буква сигма	U+03A3	ISOgrk3
Τ	?	Tau	Τ	греческая заглавная буква тау	U+03A4
Υ	?	Upsilon	Υ	греческая заглавная буква ипсилон	U+03A5	ISOgrk3
Φ	?	Phi	Φ	греческая заглавная буква фи	U+03A6	ISOgrk3
Χ	?	Chi	Χ	греческая заглавная буква хи	U+03A7
Ψ	?	Psi	Ψ	греческая заглавная буква пси	U+03A8	ISOgrk3
Ω	?	Omega	Ω	греческая заглавная буква омега	U+03A9	ISOgrk3
α	?	alpha	α	греческая строчная буква альфа	U+03B1	ISOgrk3
β	?	beta	β	греческая строчная буква бета

U+03B2	ISOgrk3
γ	?	gamma	γ	греческая строчная буква гамма	U+03B3	ISOgrk3
δ	?	delta	δ	греческая строчная буква дельта	U+03B4	ISOgrk3
ε	?	epsilon	ε	греческая строчная буква эпсилон	U+03B5	ISOgrk3
ζ	?	zeta	ζ	греческая строчная буква дзета	U+03B6	ISOgrk3
η	?	eta	η	греческая строчная буква эта	U+03B7	ISOgrk3
θ	?	theta	θ	греческая строчная буква тета	U+03B8	ISOgrk3
ι	?	iota	ι	греческая строчная буква иота	U+03B9	ISOgrk3
κ	?	kappa	κ	греческая строчная буква каппа	U+03BA	ISOgrk3
λ	?	lambda	λ	греческая строчная буква лямбда	U+03BB	ISOgrk3
μ	?	mu	μ	греческая строчная буква мю	U+03BC	ISOgrk3
ν	?	nu	ν	греческая строчная буква ню	U+03BD	ISOgrk3
ξ	?	xi	ξ	греческая строчная буква кси	U+03BE	ISOgrk3
ο	?	omicron	ο	греческая строчная буква омикрон	U+03BF	NEW
π	?	pi	π	греческая строчная буква пи	U+03C0	ISOgrk3
ρ	?	rho	ρ	греческая строчная буква ро	U+03C1	ISOgrk3
ς	?	sigmaf	ς	греческая строчная буква сигма (final)	U+03C2	ISOgrk3
σ	?	sigma	σ	греческая строчная буква сигма	U+03C3	ISOgrk3
τ	?	tau	τ	греческая строчная буква тау	U+03C4	ISOgrk3
υ	?	upsilon	υ	греческая строчная буква ипсилон	U+03C5	ISOgrk3
φ	?	phi	φ	греческая строчная буква фи	U+03C6	ISOgrk3
χ	?	chi	χ	греческая строчная буква хи	U+03C7	ISOgrk3
ψ	?	psi	ψ	греческая строчная буква пси	U+03C8	ISOgrk3
ω	?	omega	ω	греческая строчная буква омега	U+03C9	ISOgrk3
ϑ	?	thetasym	ϑ	greek small letter theta symbol	U+03D1	NEW
ϒ	?	upsih	ϒ	greek upsilon with hook symbol	U+03D2	NEW
ϖ	?	piv	ϖ	greek pi symbol	U+03D6	ISOgrk3

левая двойная угловая

		nbsp		неразрывный пробел	U+00A0	ISOnum
¡	?	iexcl	¡	перев,рнутый восклицательный знак	U+00A1	ISOnum
¢	?	cent	¢	цент	U+00A2	ISOnum
£	?	pound	£	фунт стерлингов	U+00A3	ISOnum
¤	¤	curren	¤	денежная единица	U+00A4	ISOnum
¥	?	yen	¥	иена или юань	U+00A5	ISOnum
¦	¦	brvbar	¦	разорванная вертикальная черта	U+00A6	ISOnum
§	§	sect	§	параграф	U+00A7	ISOnum
¨	?	uml	¨	diaeresis = spacing diaeresis	U+00A8	ISOdia
©	©	copy	©	знак copyright	U+00A9	ISOnum
ª	?	ordf	ª	feminine ordinal indicator	U+00AA	ISOnum
"	«	laquo	«	левая двойная угловая скобка	U+00AB	ISOnum
¬	¬	not	¬	знак отрицания	U+00AC	ISOnum
		shy		место возможного переноса	U+00AD	ISOnum
®	®	reg	®	знак зарегистрированной торговой марки	U+00AE	ISOnum
¯	?	macr	¯	macron = spacing macron = overline = APL overbar	U+00AF	ISOdia
°	°	deg	°	градус	U+00B0	ISOnum
±	±	plusmn	±	плюс-минус	U+00B1	ISOnum
²	?	sup2	²	верхний индекс 'два' ? 'квадрат'	U+00B2	ISOnum
³	?	sup3	³	верхний индекс 'три' ? 'куб'	U+00B3	ISOnum
´	?	acute	´	acute accent = spacing acute	U+00B4	ISOdia
µ	µ	micro	µ	микро	U+00B5	ISOnum
¶	¶	para	¶	pilcrow sign = paragraph sign	U+00B6	ISOnum
·	·	middot	·	middle dot = Georgian comma = Greek middle dot	U+00B7	ISOnum
¸	?	cedil	¸	cedilla = spacing cedilla	U+00B8	ISOdia
¹	?	sup1	¹	верхний индекс 'один'	U+00B9	ISOnum
º	?	ordm	º	masculine ordinal indicator	U+00BA	ISOnum
"	»	raquo	»	правая двойная угловая скобка

U+00BB	ISOnum
¼	?	frac14	¼	дробь ? одна четверть	U+00BC	ISOnum
½	?	frac12	½	дробь ? одна вторая	U+00BD	ISOnum
¾	?	frac34	¾	дробь ? три четверти	U+00BE	ISOnum
¿	?	iquest	¿	перев,рнутый вопросительный знак	U+00BF	ISOnum
À	A	Agrave	À	latin capital letter A with grave = latin capital letter A grave	U+00C0	ISOlat1
Á	A	Aacute	Á	latin capital letter A with acute	U+00C1	ISOlat1
Â	A	Acirc	Â	latin capital letter A with circumflex	U+00C2	ISOlat1
Ã	A	Atilde	Ã	latin capital letter A with tilde	U+00C3	ISOlat1
Ä	A	Auml	Ä	latin capital letter A with diaeresis	U+00C4	ISOlat1
Å	A	Aring	Å	latin capital letter A with ring above = latin capital letter A ring	U+00C5	ISOlat1
Æ	?	AElig	Æ	latin capital letter AE = latin capital ligature AE	U+00C6	ISOlat1
Ç	C	Ccedil	Ç	latin capital letter C with cedilla	U+00C7	ISOlat1
È	E	Egrave	È	latin capital letter E with grave	U+00C8	ISOlat1
É	E	Eacute	É	latin capital letter E with acute	U+00C9	ISOlat1
Ê	E	Ecirc	Ê	latin capital letter E with circumflex	U+00CA	ISOlat1
Ë	E	Euml	Ë	latin capital letter E with diaeresis	U+00CB	ISOlat1
Ì	I	Igrave	Ì	latin capital letter I with grave	U+00CC	ISOlat1
Í	I	Iacute	Í	latin capital letter I with acute	U+00CD	ISOlat1
Î	I	Icirc	Î	latin capital letter I with circumflex	U+00CE	ISOlat1
Ï	I	Iuml	Ï	latin capital letter I with diaeresis	U+00CF	ISOlat1
Ð	?	ETH	Ð	latin capital letter ETH	U+00D0	ISOlat1
Ñ	N	Ntilde	Ñ	latin capital letter N with tilde	U+00D1	ISOlat1
Ò	O	Ograve	Ò	latin capital letter O with grave

U+00D2	ISOlat1
Ó	O	Oacute	Ó	latin capital letter O with acute	U+00D3	ISOlat1
Ô	O	Ocirc	Ô	latin capital letter O with circumflex	U+00D4	ISOlat1
Õ	O	Otilde	Õ	latin capital letter O with tilde	U+00D5	ISOlat1
Ö	O	Ouml	Ö	latin capital letter O with diaeresis	U+00D6	ISOlat1
×	?	times	×	знак умножения	U+00D7	ISOnum
Ø	O	Oslash	Ø	latin capital letter O with stroke = latin capital letter O slash	U+00D8	ISOlat1
Ù	U	Ugrave	Ù	latin capital letter U with grave	U+00D9	ISOlat1
Ú	U	Uacute	Ú	latin capital letter U with acute	U+00DA	ISOlat1
Û	U	Ucirc	Û	latin capital letter U with circumflex	U+00DB	ISOlat1
Ü	U	Uuml	Ü	latin capital letter U with diaeresis	U+00DC	ISOlat1
Ý	Y	Yacute	Ý	latin capital letter Y with acute	U+00DD	ISOlat1
Þ	?	THORN	Þ	latin capital letter THORN	U+00DE	ISOlat1
ß	?	szlig	ß	latin small letter sharp s = ess-zed	U+00DF	ISOlat1
à	a	agrave	à	latin small letter a with grave = latin small letter a grave	U+00E0	ISOlat1
á	a	aacute	á	latin small letter a with acute	U+00E1	ISOlat1
â	a	acirc	â	latin small letter a with circumflex	U+00E2	ISOlat1
ã	a	atilde	ã	latin small letter a with tilde	U+00E3	ISOlat1
ä	a	auml	ä	latin small letter a with diaeresis	U+00E4	ISOlat1
å	a	aring	å	latin small letter a with ring above = latin small letter a ring	U+00E5	ISOlat1
æ	?	aelig	æ	latin small letter ae = latin small ligature ae	U+00E6	ISOlat1
ç	c	ccedil	ç	latin small letter c with cedilla	U+00E7	ISOlat1
è	e	egrave	è	latin small letter e with grave	U+00E8	ISOlat1

é	e	eacute	é	latin small letter e with acute	U+00E9	ISOlat1
ê	e	ecirc	ê	latin small letter e with circumflex	U+00EA	ISOlat1
ë	e	euml	ë	latin small letter e with diaeresis	U+00EB	ISOlat1
ì	i	igrave	ì	latin small letter i with grave	U+00EC	ISOlat1
í	i	iacute	í	latin small letter i with acute	U+00ED	ISOlat1
î	i	icirc	î	latin small letter i with circumflex	U+00EE	ISOlat1
ï	i	iuml	ï	latin small letter i with diaeresis	U+00EF	ISOlat1
ð	?	eth	ð	latin small letter eth	U+00F0	ISOlat1
ñ	n	ntilde	ñ	latin small letter n with tilde	U+00F1	ISOlat1
ò	o	ograve	ò	latin small letter o with grave	U+00F2	ISOlat1
ó	o	oacute	ó	latin small letter o with acute	U+00F3	ISOlat1
ô	o	ocirc	ô	latin small letter o with circumflex	U+00F4	ISOlat1
õ	o	otilde	õ	latin small letter o with tilde	U+00F5	ISOlat1
ö	o	ouml	ö	latin small letter o with diaeresis	U+00F6	ISOlat1
÷	?	divide	÷	знак деления	U+00F7	ISOnum
ø	o	oslash	ø	latin small letter o with stroke, = latin small letter o slash	U+00F8	ISOlat1
ù	u	ugrave	ù	latin small letter u with grave	U+00F9	ISOlat1
ú	u	uacute	ú	latin small letter u with acute	U+00FA	ISOlat1
û	u	ucirc	û	latin small letter u with circumflex	U+00FB	ISOlat1
ü	u	uuml	ü	latin small letter u with diaeresis	U+00FC	ISOlat1
ý	y	yacute	ý	latin small letter y with acute	U+00FD	ISOlat1
þ	?	thorn	þ	latin small letter thorn	U+00FE	ISOlat1
ÿ	y	yuml	ÿ	latin small letter y with diaeresis	U+00FF	ISOlat1

Latin Extended-B


ƒ	?	fnof	ƒ	latin small f with hook = знак функции = florin	U+0192	ISOtech

Математические операторы


∀	?	forall	∀	для всех	U+2200	ISOtech
∂	?	part	∂	частный дифференциал	U+2202	ISOtech
∃	?	exist	∃	существует	U+2203	ISOtech
∅	?	empty	∅	пустое множество; диаметр	U+2205	ISOamso
∇	?	nabla	∇	набла = backward difference	U+2207	ISOtech
∈	?	isin	∈	принадлежит	U+2208	ISOtech
∉	?	notin	∉	не принадлежит	U+2209	ISOtech
∋	?	ni	∋	содержит	U+220B	ISOtech
Возможно, следовало бы иметь более запоминающееся имя, чем 'ni'?
∏	?	prod	∏	произведение последовательности ? знак произведения	U+220F	ISOamsb
prod ? не то же самое, что U+03A0 ? 'греческая заглавная буква пи', хотя и может иметь то же начертание
∑	?	sum	∑	сумма последовательности	U+2211	ISOamsb
sum ? не то же самое, что U+03A3 = 'греческая заглавная буква сигма', хотя и может иметь то же начертание
−	?	minus	−	минус	U+2212	ISOtech
∗	?	lowast	∗	оператор 'зв,здочка'	U+2217	ISOtech
√	v	radic	√	квадратный корень	U+221A	ISOtech
∝	?	prop	∝	пропорционально	U+221D	ISOtech
∞	?	infin	∞	бесконечность	U+221E	ISOtech
∠	?	ang	∠	угол	U+2220	ISOamso
∧	?	and	∧	логическое И ? wedge	U+2227	ISOtech
∨	?	or	∨	логическое ИЛИ ? vee	U+2228	ISOtech
∩	?	cap	∩	пересечение ? cap	U+2229	ISOtech
∪	?	cup	∪	объединение ? cup	U+222A	ISOtech
∫	?	int	∫	интеграл	U+222B	ISOtech
∴	?	there4	∴	следовательно	U+2234	ISOtech
∼	?	sim	∼	знак тильда ? 'изменяется с' ? знак подобия	U+223C	ISOtech
знак тильда ? не то же самое, что тильда ? U+007E, хотя и может иметь то же начертание

≅	?	cong	≅	approximately equal to	U+2245	ISOtech
≈	?	asymp	≈	почти равно ? асимптотически стремится	U+2248	ISOamsr
≠	?	ne	≠	не равно	U+2260	ISOtech
≡	?	equiv	≡	тождественно	U+2261	ISOtech
≤	?	le	≤	меньше либо равно	U+2264	ISOtech
≥	?	ge	≥	больше либо равно	U+2265	ISOtech
⊂	?	sub	⊂	является подмножеством	U+2282	ISOtech
⊃	?	sup	⊃	является надмножеством	U+2283	ISOtech
Заметим, что символ nsup, 'не является подмножеством', U+2283, не входит в кодировку шрифта Symbol и не включ,н сюда. Возможно, и следовало бы для симметрии? Этот символ содержится в ISOamsn
⊄	?	nsub	⊄	не является подмножеством	U+2284	ISOamsn
⊆	?	sube	⊆	является подмножеством либо равно	U+2286	ISOtech
⊇	?	supe	⊇	является надмножеством либо равно	U+2287	ISOtech
⊕	?	oplus	⊕	плюс в кружке ? direct sum	U+2295	ISOamsb
⊗	?	otimes	⊗	знак умножения в кружке ? vector product	U+2297	ISOamsb
⊥	?	perp	⊥	ортогонально, перпендикулярно	U+22A5	ISOtech
⋅	?	sdot	⋅	оператор 'точка'	U+22C5	ISOamsb
Оператор 'точка' ? не то же самое, что U+00B7 ? средняя точка

Обозначения специальных символов вHTML 4

Вид по имени

Вид по коду

Имя

Код

Описание

Unicode

Подмножество ISO 8879

Общая пунктуация
	?	ensp		en space	U+2002	ISOpub
	?	emsp		em space	U+2003	ISOpub
	?	thinsp		thin space	U+2009	ISOpub
‌	?	zwnj	‌	zero width non-joiner	U+200C	NEW RFC 2070
‍	?	zwj	‍	zero width joiner	U+200D	NEW RFC 2070
‎	?	lrm	‎	left-to-right mark	U+200E	NEW RFC 2070
‏	?	rlm	‏	right-to-left mark	U+200F	NEW RFC 2070
–	–	ndash	–	en dash	U+2013	ISOpub
—	—	mdash	—	em dash	U+2014	ISOpub
‘	‘	lsquo	‘	левая одиночная кавычка	U+2018	ISOnum
’	’	rsquo	’	правая одиночная кавычка	U+2019	ISOnum
‚	‚	sbquo	‚	нижняя одиночная кавычка	U+201A	NEW
“	“	ldquo	“	левая двойная кавычка	U+201C	ISOnum
”	”	rdquo	”	правая двойная кавычка	U+201D	ISOnum
„	„	bdquo	„	нижняя двойная кавычка	U+201E	NEW
†	†	dagger	†	кинжал (крест)	U+2020	ISOpub
‡	‡	Dagger	‡	двойной кинжал (крест)	U+2021	ISOpub
‰	‰	permil	‰	промилле	U+2030	ISOtech
‹	‹	lsaquo	‹	левая угловая одиночная кавычка	U+2039	ISO proposed
Знак lsaquo предложен, но ещ, не стандартизован ISO
›	›	rsaquo	›	правая угловая одиночная кавычка	U+203A	ISO proposed
Знак rsaquo предложен, но ещ, не стандартизован ISO
€	€	euro	€	валюта евро	U+20AC	NEW

Полезные линки

Если у Вас есть ссылки на сайты про Интернет-дизайн, HTML, CGI-скрипты,... одним словом, про все, что может быть полезно web-мастеру, пожалуйста, присылайте.
HTML:

www.echoecho.com ? хороший буржуйский сайт, обучающий созданию сайтов. Все разжевано и понятно.

www.artlebedev.ru/kovodstvo ? интересные дизайнерские мысли на сетевые и околосетевые темы.

CGI:

www.scriptsearch.com ? поисковая система по скриптам.

www.7thgate.com/tools/cgi/cgi.html ? коллекция CGI.

ГРАФИКА:

wintorez.chat.ru ? страничка с полным описанием горячих клавиш для программ: Photoshop, Illustrator и FreeHand. Очень полезная вещь. Рекомендую.

Таблица MIME-типов

MIME Type Extension
animation/narrative nml application/activemessage application/andrew-inset application/applefile application/atomicmail application/dca-rft application/dec-dx application/dsptype tsp application/fastman lcc application/font-tdpfr pfr application/futuresplash spl application/mac-binhex40 hqx application/mac-compactpro cpt application/macwriteii application/mspowerpoint pot pps ppt ppz application/msword application/news-message-id application/news-transmission application/octet-stream bin class dms exe sea application/oda oda application/pdf pdf application/postscript ai eps ps application/remote-printing application/rtf rtf application/slate application/softvision svi application/wita application/wordperfect5.1 application/x-authorware-bin aab application/x-authorware-map aam application/x-authorware-seg aas application/x-bcpio bcpio application/x-bzip2 bz2 application/x-calquick cqk application/x-cdlink vcd application/x-cocoa cco application/x-compress Z application/x-cpio cpio application/x-csh csh application/x-director dcr dir dxr application/x-dvi dvi application/x-excel xls application/x-expandedbook ebk application/x-gtar gtar application/x-gzip gz application/x-hdf hdf application/x-httpd-cgi cgi application/x-javascript js ls mocha application/x-koan skd skm skp skt application/x-latex latex application/x-lzh lha lzh application/x-mapserver mps application/x-mascot mct application/x-mif mif application/x-netcdf cdf nc application/x-ns-proxy-auto-config pac application/x-pixelscooter mpp application/x-pointplus css application/x-sh sh application/x-shar shar application/x-shockwave-flash swf application/x-sprite spr sprite application/x-spt spt application/x-stuffit sit application/x-sv4cpio sv4cpio application/x-sv4crc sv4crc application/x-tar tar tgz application/x-tcl tcl application/x-tex tex application/x-texinfo texi texinfo application/x-troff roff t tr application/x-troff-man man application/x-troff-me me application/x-troff-ms ms application/x-ustar ustar application/x-wais-source src application/x-xdma xdm xdma application/zip zip audio/basic au snd audio/echospeech es audio/midi kar mid midi audio/mpeg mp2 mp3 mpga audio/tsplayer tsi audio/voxware vox audio/x-aiff aif aifc aiff audio/x-bamba aba audio/x-chacha cha audio/x-mio mio audio/x-pn-realaudio ra ram rm audio/x-pn-realaudio-plugin rpm audio/x-twinvq vqf vql audio/x-twinvq-plugin vqe audio/x-wav wav chemical/x-csml csm chemical/x-embl-dl-nucleotide emb chemical/x-gaussian-input gau chemical/x-mdl-molfile mol chemical/x-mopac-input mop chemical/x-pdb pdb chemical/x-xyz xyz i-world/i-vrml ivr image/fif fif image/gif gif image/ief ief image/jpeg jpe jpeg jpg image/png png image/tiff tif tiff image/vasa mcf image/x-cmu-raster ras image/x-freehand fh fh4 fh5 fh7 fhc image/x-jps jps image/x-portable-anymap pnm image/x-portable-bitmap pbm image/x-portable-graymap pgm image/x-portable-pixmap ppm image/x-rgb rgb image/x-xbitmap xbm image/x-xpixmap xpm image/x-xres swx image/x-xwindowdump xwd message/external-body message/news message/partial message/rfc822 multipart/alternative multipart/appledouble multipart/digest multipart/mixed multipart/parallel plugin/listenup ptlk plugin/wanimate waf wan text/html htm html text/plain txt text/richtext rtx text/tab-separated-values tsv text/x-setext etx text/x-sgml sgm sgml text/x-speech talk text/x-vcard vcf video/mpeg mpe mpeg mpg video/quicktime mov qt video/vnd.vivo viv vivo video/x-bamba vba video/x-msvideo avi video/x-sgi-movie movie video/x-tango tgo video/x-vif vif workbook/formulaone vts world/x-panoramix pan x-conference/x-cooltalk ice x-world/x-d96 d96 mus x-world/x-svr svr x-world/x-vrml vrml wrl x-world/x-vrt vrt

Прочие символы


♠	¦	spades	♠	ч,рный знак масти 'пики'	U+2660	ISOpub
'Ч,рный' здесь, похоже, означает заполненный, то есть неполый
♣	¦	clubs	♣	ч,рный знак масти 'трефы' ? shamrock	U+2663	ISOpub
♥	¦	hearts	♥	ч,рный знак масти 'червы' ? valentine	U+2665	ISOpub
♦	¦	diams	♦	ч,рный знак масти 'бубны'	U+2666	ISOpub

Различные технические знаки


⌈	?	lceil	⌈	left ceiling = apl upstile	U+2308	ISOamsc
⌉	?	rceil	⌉	right ceiling	U+2309	ISOamsc
⌊	?	lfloor	⌊	left floor = apl downstile	U+230A	ISOamsc
⌋	?	rfloor	⌋	right floor	U+230B	ISOamsc
⟨	?	lang	〈	левая угловая скобка ? bra	U+2329	ISOtech
lang ? это нето же, что U+003C ? 'меньше чем' или U+2039 ? 'одиночная левая угловая кавычка'
⟩	?	rang	〉	правая угловая скобка ? ket	U+232A	ISOtech
rang ? это не то же, что U+003E ? 'больше чем' или U+203A ? 'одиночная правая угловая кавычка'

Символы, производные отбукв


℘	?	weierp	℘	рукописное заглавное латинское P ? power set ? P Вейерштрасса	U+2118	ISOamso
ℑ	?	image	ℑ	blackletter capital I = imaginary part	U+2111	ISOamso
ℜ	?	real	ℜ	blackletter capital R = real part symbol	U+211C	ISOamso
™	™	trade	™	знак торговой марки	U+2122	ISOnum
ℵ	?	alefsym	ℵ	символ алеф ? first transfinite cardinal	U+2135	NEW
Символ алеф ? не то же самое, что буква алеф из иврита, U+05D0, хотя и имеет то же начертание

Spacing Modifier Letters


ˆ	?	circ	ˆ	modifier letter circumflex accent	U+02C6	ISOpub
˜	?	tilde	˜	small tilde	U+02DC	ISOdia

Стрелки


←	<	larr	←	стрелка влево	U+2190	ISOnum
↑	^	uarr	↑	стрелка вверх	U+2191	ISOnum
→	>	rarr	→	стрелка вправо	U+2192	ISOnum
↓	v	darr	↓	стрелка вниз	U+2193	ISOnum
↔	-	harr	↔	стрелка влево-вправо	U+2194	ISOamsa
↵	?	crarr	↵	стрелка вниз ивлево ? знак возврата каретки	U+21B5	NEW
⇐	?	lArr	⇐	двойная стрелка влево	U+21D0	ISOtech
ISO 10646 не утверждает, что lArr ? то же самое, что и стрелка для обозначения отношения 'следует из', но также и не предлагает для этого никакого другого символа. Так что (?) символ lArr может быть использован для обозначения отношения 'следует из', что и рекомендует ISOtech
⇑	?	uArr	⇑	двойная стрелка вверх	U+21D1	ISOamsa
⇒	?	rArr	⇒	двойная стрелка вправо	U+21D2	ISOtech
ISO 10646 не утверждает, что это ? символ для обозначения отношения 'следовательно', но также и не предлагает для этого никакого другого символа. Так что (?) символ rArr может быть использован для обозначения отношения 'следовательно', что и рекомендует ISOtech
⇓	?	dArr	⇓	двойная стрелка вниз	U+21D3	ISOamsa
⇔	?	hArr	⇔	двойная стрелка влево-вправо	U+21D4	ISOamsa

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

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

	Black		Navy
	Gray		Blue
	Silver		Aqua
	White		Green
	Red		Lime
	Fuchsia		Teal
	Maroon		Yellow
	Purple		Olive

Для получения любого другого оттенка применяются комбинации RGB-значений цвета, записанные в шестнадцатиричном формате. Приведенные ниже 216 цветов также считаются "безопасными" (browser-safe).

Для удобства я расположил "безопасные" цвета в три таблицы по 216 цветов, отсортированные по разным цветовым компонентам.

Красный и Синий ? добавляем ЗеленыйКрасный и Зеленый ? добавляем СинийЗеленый и Синий ? добавляем Красный

000000	000033	000066	000099	0000cc	0000ff
330000	330033	330066	330099	3300cc	3300ff
660000	660033	660066	660099	6600cc	6600ff
990000	990033	990066	990099	9900cc	9900ff
cc0000	cc0033	cc0066	cc0099	cc00cc	cc00ff
ff0000	ff0033	ff0066	ff0099	ff00cc	ff00ff
003300	003333	003366	003399	0033cc	0033ff
333300	333333	333366	333399	3333cc	3333ff
663300	663333	663366	663399	6633cc	6633ff
993300	993333	993366	993399	9933cc	9933ff
cc3300	cc3333	cc3366	cc3399	cc33cc	cc33ff
ff3300	ff3333	ff3366	ff3399	ff33cc	ff33ff
006600	006633	006666	006699	0066cc	0066ff
336600	336633	336666	336699	3366cc	3366ff
666600	666633	666666	666699	6666cc	6666ff
996600	996633	996666	996699	9966cc	9966ff
cc6600	cc6633	cc6666	cc6699	cc66cc	cc66ff
ff6600	ff6633	ff6666	ff6699	ff66cc	ff66ff
009900	009933	009966	009999	0099cc	0099ff
339900	339933	339966	339999	3399cc	3399ff
669900	669933	669966	669999	6699cc	6699ff
999900	999933	999966	999999	9999cc	9999ff
cc9900	cc9933	cc9966	cc9999	cc99cc	cc99ff
ff9900	ff9933	ff9966	ff9999	ff99cc	ff99ff
00cc00	00cc33	00cc66	00cc99	00cccc	00ccff
33cc00	33cc33	33cc66	33cc99	33cccc	33ccff
66cc00	66cc33	66cc66	66cc99	66cccc	66ccff
99cc00	99cc33	99cc66	99cc99	99cccc	99ccff
cccc00	cccc33	cccc66	cccc99	cccccc	ccccff
ffcc00	ffcc33	ffcc66	ffcc99	ffcccc	ffccff
00ff00	00ff33	00ff66	00ff99	00ffcc	00ffff
33ff00	33ff33	33ff66	33ff99	33ffcc	33ffff
66ff00	66ff33	66ff66	66ff99	66ffcc	66ffff
99ff00	99ff33	99ff66	99ff99	99ffcc	99ffff
ccff00	ccff33	ccff66	ccff99	ccffcc	ccffff
ffff00	ffff33	ffff66	ffff99	ffffcc	ffffff
000000	003300	006600	009900	00cc00	00ff00
330000	333300	336600	339900	33cc00	33ff00
660000	663300	666600	669900	66cc00	66ff00
990000	993300	996600	999900	99cc00	99ff00
cc0000	cc3300	cc6600	cc9900	cccc00	ccff00
ff0000	ff3300	ff6600	ff9900	ffcc00	ffff00
000033	003333	006633	009933	00cc33	00ff33
330033	333333	336633	339933	33cc33	33ff33
660033	663333	666633	669933	66cc33	66ff33
990033	993333	996633	999933	99cc33	99ff33
cc0033	cc3333	cc6633	cc9933	cccc33	ccff33
ff0033	ff3333	ff6633	ff9933	ffcc33	ffff33
000066	003366	006666	009966	00cc66	00ff66
330066	333366	336666	339966	33cc66	33ff66
660066	663366	666666	669966	66cc66	66ff66
990066	993366	996666	999966	99cc66	99ff66
cc0066	cc3366	cc6666	cc9966	cccc66	ccff66
ff0066	ff3366	ff6666	ff9966	ffcc66	ffff66
000099	003399	006699	009999	00cc99	00ff99
330099	333399	336699	339999	33cc99	33ff99
660099	663399	666699	669999	66cc99	66ff99
990099	993399	996699	999999	99cc99	99ff99
cc0099	cc3399	cc6699	cc9999	cccc99	ccff99
ff0099	ff3399	ff6699	ff9999	ffcc99	ffff99
0000cc	0033cc	0066cc	0099cc	00cccc	00ffcc
3300cc	3333cc	3366cc	3399cc	33cccc	33ffcc
6600cc	6633cc	6666cc	6699cc	66cccc	66ffcc
9900cc	9933cc	9966cc	9999cc	99cccc	99ffcc
cc00cc	cc33cc	cc66cc	cc99cc	cccccc	ccffcc
ff00cc	ff33cc	ff66cc	ff99cc	ffcccc	ffffcc
0000ff	0033ff	0066ff	0099ff	00ccff	00ffff
3300ff	3333ff	3366ff	3399ff	33ccff	33ffff
6600ff	6633ff	6666ff	6699ff	66ccff	66ffff
9900ff	9933ff	9966ff	9999ff	99ccff	99ffff
cc00ff	cc33ff	cc66ff	cc99ff	ccccff	ccffff
ff00ff	ff33ff	ff66ff	ff99ff	ffccff	ffffff
000000	000033	000066	000099	0000cc	0000ff
003300	003333	003366	003399	0033cc	0033ff
006600	006633	006666	006699	0066cc	0066ff
009900	009933	009966	009999	0099cc	0099ff
00cc00	00cc33	00cc66	00cc99	00cccc	00ccff
00ff00	00ff33	00ff66	00ff99	00ffcc	00ffff
330000	330033	330066	330099	3300cc	3300ff
333300	333333	333366	333399	3333cc	3333ff
336600	336633	336666	336699	3366cc	3366ff
339900	339933	339966	339999	3399cc	3399ff
33cc00	33cc33	33cc66	33cc99	33cccc	33ccff
33ff00	33ff33	33ff66	33ff99	33ffcc	33ffff
660000	660033	660066	660099	6600cc	6600ff
663300	663333	663366	663399	6633cc	6633ff
666600	666633	666666	666699	6666cc	6666ff
669900	669933	669966	669999	6699cc	6699ff
66cc00	66cc33	66cc66	66cc99	66cccc	66ccff
66ff00	66ff33	66ff66	66ff99	66ffcc	66ffff
990000	990033	990066	990099	9900cc	9900ff
993300	993333	993366	993399	9933cc	9933ff
996600	996633	996666	996699	9966cc	9966ff
999900	999933	999966	999999	9999cc	9999ff
99cc00	99cc33	99cc66	99cc99	99cccc	99ccff
99ff00	99ff33	99ff66	99ff99	99ffcc	99ffff
cc0000	cc0033	cc0066	cc0099	cc00cc	cc00ff
cc3300	cc3333	cc3366	cc3399	cc33cc	cc33ff
cc6600	cc6633	cc6666	cc6699	cc66cc	cc66ff
cc9900	cc9933	cc9966	cc9999	cc99cc	cc99ff
cccc00	cccc33	cccc66	cccc99	cccccc	ccccff
ccff00	ccff33	ccff66	ccff99	ccffcc	ccffff
ff0000	ff0033	ff0066	ff0099	ff00cc	ff00ff
ff3300	ff3333	ff3366	ff3399	ff33cc	ff33ff
ff6600	ff6633	ff6666	ff6699	ff66cc	ff66ff
ff9900	ff9933	ff9966	ff9999	ff99cc	ff99ff
ffcc00	ffcc33	ffcc66	ffcc99	ffcccc	ffccff
ffff00	ffff33	ffff66	ffff99	ffffcc	ffffff

Знаки пунктуации


•	•	bull	•	bullet ? маленький ч,рный кружок	U+2022	ISOpub
bullet ? не то же самое, что оператор bullet, U+2219
…	…	hellip	…	многоточие ...	U+2026	ISOpub
′	?	prime	′	одиночный штрих ? минуты и футы	U+2032	ISOtech
″	?	Prime	″	двойной штрих ? секунды и дюймы	U+2033	ISOtech
‾	?	oline	‾	надч,ркивание	U+203E	NEW
⁄	?	frasl	⁄	косая дробная черта	U+2044	NEW

DD

(HTML 2.0) ? Definition Description

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

DL

(HTML 2.0) ? Definition List

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

Атрибуты:

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

Пример:
	Жапура Река в Колумбии и Бразилии Зайцы Семейство млекопитающих отряда зайцеобразных ...

DT

(HTML 2.0) ? Definition Term

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

LI

(HTML 2.0) ? List Item

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

Атрибуты:

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

Пример:
	Пункт, озаглавленный буквой B. Пункт, озаглавленный буквой F. Пункт, озаглавленный буквой G.

Примечания:

Некоторые разработчики употребляют LI вне элементов OL и UL, объясняя это тем, что браузеры и так нормально справятся с отображением списка. Это неверно, коллеги, почитайте спецификацию!

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

MENU, DIR

(HTML 2.0) ? Menu, Directory List

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

OL

(HTML 2.0) ? Ordered List

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

Атрибуты:

START ? определяет первое число, с которого начинается нумерация пунктов. (только целые числа)
TYPE ? определяет стиль нумерации пунктов. Может иметь значения:
"A" ? заглавные буквы A, B, C ...

"a" ? строчные буквы a, b, c ...

"I" ? большие римские числа I, II, III ...

"i" ? маленькие римские числа i, ii, iii ...

"1" ? арабские числа 1, 2, 3 ...

По умолчанию

Пример:
	Пункт два Пункт три Пункт четыре

UL

Пример:
	Первый пункт списка Второй пункт списка Третий пункт списка

AREA

MAP

Атрибуты:

SHAPE

rect

circle

poly

COORDS

HREF

TARGET

FRAME

NOHREF

ALT

Пример:
	...

Примечания:

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

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

MAP

AREA

Атрибуты:

NAME

IMG

Пример:
	...

APPLET

APPLET

IMG

APPLET

Атрибуты:

CODE

CODEBASE

ALIGN

IMG

HEIGHT

WIDTH

HSPACE

VSPACE

NAME

ALT

APPLET

SRC

Пример 1:
	Если вы видите этот текст, значит ваш браузер не поддерживает Java.

Пример 2:

Примечание:

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

EMBED

EMBED

Атрибуты:

IMG

EMBED

IMG

Другие атрибуты:

SRC

PLUGINSPACE

PALETTE

background

foreground

HIDDEN

true

false

TYPE

Пример 1:

Пример 2:

Примечания:

	Для старых браузеров, не поддерживающих элемент EMBED, необходимо использовать элемент NOEMBED с указанием между начальным и конечным тегами альтернативного текста, как показано в примерах выше.
	Обратите внимание ? в спецификациях консорциума W3C про EMBED ничего не сказано (!), скороее всего данный элемент появился по инициативе разработчиков Netscape 1.1 и с тех пор поддерживается всеми браузерами для совместимости (начиная с MSIE 3.0-beta-2 и выше).
	Каким бы привлекательным элемент EMBED вам ни казался, но, поверьте, лучше его не использовать. Далеко не каждому может понравиться принудительное проигрывание MID-файла или попытка прокрутить ролик в неизвестном браузеру формате. Если вам все же не терпится украсить HTML чем-нибудь из ряда вон выходящим, не поленитесь, потратьте время на усиленное тестирование со всеми популярными видами браузеров.

IMG

IMG

Атрибуты:

SRC

HEIGHT

WIDTH

HSPACE

VSPACE

ALIGN

left

right

top

texttop

middle

absmiddle

bottom

baseline

absbottom

NAME

ALT

BORDER

LOWSRC

USEMAP

MAP

ISMAP

Пример 1:
	Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.

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

Пример 3. Использование ISMAP:
	');

Пример 4. Использование USEMAP:
	');

Примечания (особо важно):

	Золотое правило web-мастера ? всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно.
	Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в атрибуте ALT.
	Всегда сразу после ставьте <BR>! А то проблем не миновать ? после картинки появится пустое пространство в несколько пикселей. Причём ставьте вплотную, без пробелов: .
	Для завершения обтекания изображения текстом используйте атрибут CLEAR элемента BR.
	Значения top и texttop атрибута ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.
	Указывайте значения атрибутов HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.
	По возможности старайтесь не создавать навигационных карт, обрабатываемых на сервере. Иначе говоря, вместо атрибута ISMAP используйте атрибут USEMAP + локальные карты.

NOEMBED

EMBED

Пример:

PARAM

APPLET

Пример:
	...

NOSCRIPT

Пример:

SCRIPT

Атрибуты:

LANGUAGE

SRC

Пример 1:

SCRIPT

Пример 2:

Где размещать скрипт:

SCRIPT

HEAD

BODY

CAPTION

Атрибуты:

ALIGN

top

bottom

Пример:

Заголовок таблицы
Ячейка таблицы

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

Пример 1:

HDD	WD Caviar 3.1Gb	85$
HDD	Quantum FB ST 6.4Gb	110$

Результат:

WD Caviar 3.1Gb	85$
Quantum FB ST 6.4Gb	110$

Пример 2:

Video
Matrox G400	115$
Voodoo III	129.95$

Результат:

Matrox G400	115$
Voodoo III	129.95$

TABLE

CAPTION

Атрибуты:

ALIGN

VALIGN

BORDER

BORDER="0"

CELLPADDING

CELLSPACING

WIDTH

HEIGHT

BGCOLOR

BACKGROUND

Примечания:

BORDER="0"

DIV

Пример:

...

TD иTH

Атрибуты:

ALIGN

VALIGN

WIDTH

HEIGHT

COLSPAN

ROWSPAN

NOWRAP

BGCOLOR

BACKGROUND

Примечания:

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

Если вы используете одновременно атрибуты NOWRAP и WIDTH="x", где x ? маленькое число, то следует дополнительно вставлять внутрь ячейки

Пример:

...

...

Текст, который не должен переноситься

...

...

Текст, который не будет переноситься

Дело в том, что в браузерах Internet Explorer для полной отмены переноса слов используется именно , а атрибут NOWRAP действует только при отсутствии WIDTH.

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

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

TR

Атрибуты:

ALIGN

VALIGN

BGCOLOR

ADDRESS

Пример:
	Пишите по следующему адресу: Москва. ул. Академика Королева, 13 Мурзилке

Примечание:

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

Пример:
	Мой адрес не дом и не улица, Мой адрес – Советский Союз. Нормальный текст ...

BLOCKQUOTE

CITE

Пример:
	Редакция журнала "Домосед" выражает благодарность Бухаресту Магарычу Шницелю за замечательное стихотворение: Синели красные ромашки, Желтели в небе облака, Синицы в теплый край летели, К истоку двигалась река. ...

BR

IMG

Атрибуты:

CLEAR

all

left

right

Пример:
	Первое предложение Второе предложение на следующей строке

Примечание:

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

DIV

SPAN

Атрибуты:

ALIGN

DIV

Пример:
	...Текст документа... ...Текст, таблицы, изображения. Выравнивание по центру. ...Текст документа...

Примечания:

У атрибута ALIGN есть еще одно значение ? justify, поддерживаемое современными браузерами. Оно позволяет выравнивать текст по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю.

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

Атрибуты:

ALIGN

Пример:

Самый большой заголовок посередине

Заголовок поменьше

...

Малюююсенький такой заголовочек

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

HR

Атрибуты:

WIDTH

SIZE

ALIGN

left

right

center

COLOR

Пример:
	Текст, разделенный сплошной горизонтальной линией.

LISTING, PLAINTEXT, XMP

PRE

P

Атрибуты:

ALIGN

Пример:

Это центрированный параграф.

Текст располагается в центре окна браузера

А это параграф, выровненный по правому краю.

PRE

Пример:
	Ать! Два! Три!

Примечание:

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

B

Пример:
	Текст с выделенным словом

BASEFONT

FONT

BASEFONT

Атрибуты:

SIZE

FACE

Пример:
	... Текст документа шрифтом 3 размера ... Слегка увеличиваем шрифт ... Продолжаем шрифтом 3 размера ...

Примечание:

Атрибут FACE игнорируется большинством браузеров. Если вы хотите явно указать тип шрифта для всего документа, используйте элемент FONT:

Пример:
	... Основной текст документа шрифтом Arial ... Вставка текста увеличенным шрифтом Таймс ... Продолжается основной текст документа шрифтом Arial ...

BIG

Пример:
	Текст с увеличенным словом

Примечание:

Тег аналогичен по действию тегу (см. элемент FONT).

CITE

BLOCKQUOTE

Пример:
	Как сказал классик: "Грамотное написание HTML способствует пищеварению"

CODE, SAMP

Пример:
	Формула: `n=((x*15-z/1.25)/4)^5`

EM

Пример:
	Порой в России встречаются действительно талантливые веб-мастера. Но только не друг с другом.

Примечание:

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

FONT

BASEFONT

Атрибуты:

SIZE

BASEFONT

COLOR

FACE

Пример:
	Увеличенный красный шрифт Моноширинный фиолетовый текст 3 размера

Примечание:

Атрибут FACE старайтесь не использовать. Если на компьютере пользователя не окажется указанного шрифта ? глюки неизбежны. Если указать шрифт всё же необходимо, используйте только: Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех.

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

I

Пример:
	Текст с курсивом

KBD

Пример:
	Чтобы войти в систему наберите `"GUEST"` заглавными буквами.

S, STRIKE

STRIKE

был предложен более краткий тег .

Пример:
Лена + ~~Вася~~ Коля = Love

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

SMALL
(HTML 3.2) ? Small

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

Пример:
Небоскребы, небоскребы, а я маленький такой.

Примечание:

Тег аналогичен по действию тегу (см. элемент FONT).

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

STRONG
(HTML 2.0) ? Stronger emphasis

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

Пример:
Я сильный, но легкий.

Примечание:

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

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

SUB
(HTML 2.0) ? Subscript

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

Пример:
X_i = B_i + C_i

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

SUP
(HTML 2.0) ? Superscript

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

Пример:
Microsoft ^TM

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

TT
(HTML 2.0) ? Tele Type

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

Пример:
СЕНЯ ЗПТ ТВОЮ МАТЬ ТЧК ПОДРОБНОСТИ В ПИСЬМЕ ТЧК

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

U
(HTML 2.0) ? Underline

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

Пример:
Подчеркнутый текст

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

VAR
(HTML 2.0) ? Variable

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

Пример:
Переменная IndexZ равна 5.

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

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

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

Дизайн vs Контент
Простота ? залог успеха

Вся сила хорошего дизайна ? в простоте.

Если вы согласны с этим утверждением, можете дальше не читать 8)
В противном случае, вам придется осознать, что для создания качественного дизайна совсем не обязательно использовать Flash, анимацию, и голливудские DHTML-спецэффекты от Microsoft. Более того, даже вредно. Ведь подавляющее большинство действительно хороших сайтов, прежде всего, содержит интересную текстовую информацию. И, следовательно, дизайн подчинен содержимому, а не наоборот.
Основной показатель профессионализма в web-дизайне ? аккуратность и чистота стиля. Откажите себе в возможности выбора разнообразных шрифтов, ограничьте цвет тремя оттенками, откажитесь от анимации и больших картинок... А теперь попробуйте придумать дизайн. Тяжело? А вы как думали?

А нужен ли вам сайт? Совет пессимиста.

Сначала определитесь, есть ли у вас то, что стоит опубликовать в Сети? Интересно ли это людям? Предположим, что вы положительно ответили на эти два вопроса, тогда ? вперед! Если же нет ? запомните: любые попытки создать сайт ради, собственно, создания сайта заранее обречены на провал.
Будьте уверены ? никто не вернется на ваш сайт только для того, чтобы полюбоваться графикой, так же как никто не будет восхищен вашим творением больше вас самих. С другой стороны, если вы просто хотите размять мозги и разобраться в HTML (вдруг действительно пригодится?), можно сделать домашнюю страничку в стиле "Привет, меня зовут Вася, а вот моя собака."

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

F5 или снова о клонировании
Почему нехорошо копировать чужие тексты

Представьте, что вам позарез понадобился знаменитый учебник по русскому языку Д. Э. Розенталя. Вы приходите в библиотеку и видите кучу полок с тысячами всевозможных книг. Вы зовёте библиотекаря, и спрашиваете:

? У вас есть Розенталь?

? Конечно! У нас каждая десятая книга содержит учебник Розенталя.

? Какая удача! Дайте мне его, пожалуйста.

? Какой именно?

? Как какой? Обычный, по которому все учатся!

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

? Не путайте меня, дайте мне обычный учебник, свежий, 3-е издание, серенький.

? Это невозможно, в библиотеке отдельных учебников мало, почти все Розентали входят в сборники. Хотите "Самый Полный Сборник Материалов по Русскому Языку"? У нас их сотни, все очень толстые и разные.

? Бог с вами, давайте. А кто составитель-то? Розенталь?

? Нет, некто Вася Пупкин.

? Аааааааааааа!!!

Вам эта ситуация ничего не напоминает?
В Интернете не должно быть двух сайтов, содержащих один и тот же материал. Это все равно что наклеить на один и тот же фонарный столб два почти одинаковых объявления, но разным шрифтом и почти
одинакового содержания. Какое из них читать?
Предположим, что мой сайт скопировали:
Если на своём сайте я внесу поправку в статью или допишу новую, каким образом мне внести те же изменения в свой же материал на сайте-клоне? Писать на e-mail уведомление, да? А если таких клонов пятьдесят? Каким образом пользователь обнаружит в Интернете наиболее свежий и правильный вариант статьи в этом случае? Как будет осуществляться синхронизация данных?

Неутешительные выводы

Любое копирование порождает страшную путаницу и засоряет Интернет. Хорошо хоть, что от этого озоновые дыры небе не появляются. Некоторые, конечно, попытаются возразить, что есть такое явление, как mirrors (зеркала).

Но зеркалирование ? это всегда только полное

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

обеспечить скоростной доступ в другом регионе

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

Чтобы представить, какой масштаб приобрело тупое копирование контента, взгляните на график:

[ Статистика Yandex ]

Красная линия ? рост Интернета в мегабайтах.

Зеленая линия ? количество уникальных материалов.

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

Из личного опыта борьбы с клонированием

Кстати, справочник по HTML обдирают на удивление часто, будто о хороших манерах и об авторском праве никто и слыхом не слыхивал. Чаще всего воруют материалы люди с вопиющими признаками творческой импотенции. На создание "супер-пупер-дизайна" сил хватает, а вот на то, чтобы текст к своему сайту написать ? увы, пшик. Вот и идут на manual.ru за чужими текстами.

Когда текст успешно содран и выложен в Интернет, прятать его от автора уже бесполезно. Мне тут же начинают приходить письма "Знаете, я видел ваш справочник там-то и там-то. Что он там делает?" Приходится выяснять, что он там делает.

Я связываюсь с "автором" и спрашиваю, что за дела, зачем сдалась копия? Ответы получаю следующие:

К-во Полученный ответ Как это нужно понимать

30% Нет ответа Ясен пень, баннеры накрутить хочу и прославиться. Что, сам не видишь? Внизу десять кнопок с рейтингами, моё имя, несуществующий e-mail и три баннера.

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

30% Хочу сделать сборник по данной теме Хочу свой портал. Огромный и чтобы весь мой. Понимаете, в Интернете всё лежит в разных местах. Это же беспорядок какой-то! Нужно сделать один большой мега-портал, библиотеку по каждой теме. Про библиотеку Мошкова слышали? Вот! Я сделаю супер-сайт про html и дизайн, выложу на него всё что найду и это будет круто. Всё в одном месте и моё ? это круто, люди оценят.

10% Хочу доработать, довести до ума Хочу почувствовать свою причастность к вашему труду. Мне непонятно, почему у вас так мало тэгов описано. При чём здесь "совместимость", а? Я думаю дописать справочник, а то он какой-то недоделанный. Про CSS нихрена нету, тег вообще отсутствует. Я в Инете много недостающих материалов нашёл, надо только упорядочить и слить воедино. Когда закончу, у меня будет свой сайт, жутко полезный для людей.

<

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

На самом деле всё должно быть наоборот. Почитайте, за что я люблю англоязычный Интернет.

И напоследок пара добрых советов:

Совет первый: не занимайтесь тюнингом.

Если уж вы взялись дорабатывать чужую работу, то нужно именно дорабатывать. То есть для начала связаться с автором и предложить свою помощь в пополнении имеющихся материалов. Я удивлён, что всегда узнаю о "доработке" post factum. Некрасиво получается.

Совет второй: не ставьте перед собой дурацкие цели.

Нет ничего глупее попытки сделать "свой сайт, взяв за основу чужой". Готов проиллюстрировать:

? На днях я выпустил свою первую книгу.

? Что вы говорите! О чём ваша книга?

? В неё вошли стихи Пушкина, Баркова и Ахмадулиной.

? Ах! В вас столько скрытых талантов!

Бред? Бред.

С сайтами то же самое.

Как работают профи

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

На работе идома
Безнаказанно копируем справочник

Всем скачавшим рекомендую периодически заглядывать на сайт html.manual.ru за свежей версией. Материалы сайта исправляются и дополняются не очень часто, но всё же это иногда происходит.

Что можно и чего нельзя

Понимаю и приветствую стремление иметь копию для личного пользования, особенно если у вас дефицит времени on-line. Но мне совершенно непонятен мотив копирования для выкладывания материала в Интернете.
Я против самодеятельного распространения справочника в Интернете. Почему это так, читайте далее.

Designed by Vladimir Gorodulin , Copyright © 1999-2004

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

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

Проблемы, которые мы выбираем
Удивительно, но никому в голову не приходит мысль разместить свои материалы на уже известном и посещаемом сайте. Надо обязательно на своём. Представляете, что будет, если каждый журналист начнет издавать свой журнал?
Это говорит только об одном ? об отсутствии желания писать тексты для людей. Жажда обладания своим сайтом заедает, блин.
Если бы мне кто-то написал и сказал, что располагает хорошим авторским материалом по html/css, этот материал мог бы появиться на html.manual.ru. Я готов размещать любые хорошие материалы с обязательной ссылкой на автора. Разумеется, при условии, что материал написан профессионально. Только никому пока в голову подобная идея не приходила, хотя лучшего способа донести свои тексты до масс и не придумать.

Не взваливайте на себя лишние проблемы

Содержать популярный тематический сайт весьма обременительно. Я, например, никакой пользы от того, что этот чёртов справочник мой не имею, выгоды от сайта нет, только проблемы и расходы. Так почему бы вам, авторам, не избавить себя от подобной головной боли? Учитесь на чужих ошибках, размещайте свои статьи на уже известных, хорошо посещаемых сайтах. Ведь это так удобно ? скинул текст на сайт и никаких проблем с поддержкой, только на письма отвечай.
Недоверчивые воскликнут: "Ага! Я, значит, статью отгрохаю, а кто-то свой сайт за мой счёт пополнять будет, раскручиваться, деньги грести!" Уймитесь, недоверчивые. Чтобы грести деньги нужно иметь, как минимум, масштаб Компьютерры или iXBT (которые, кстати, честно платят авторам гонорары).
Ещё раз повторюсь: содержать статейный сайт узкой тематики с посещаемостью двести и более человек в день ? это Проблема с большой буквы "Пэ". Вы можете смело доверять людям, которые держат такие сайты. Если бы им хотелось только посещаемости и денег, то вместо ваших статей на сайте лежали бы анекдоты, порнуха, знакомства и прочий ширпотреб.

Возьми ссобой в дорогу
Инструментарий

Для написания HTML и создания графики хороший инструментарий просто необходим. Вам понадобится хороший HTML-редактор, графический пакет для создания растровой графики и программа для ее оптимизации.

HTML-редакторы

Все специализированные редакторы делятся на две группы:

WYSIWYG-editors

Source editors

Аббревиатура первой группы расшифровывается как What You See Is What You Get ("Что видишь, то и получишь."). К ней относится, например, Microsoft FrontPage. Работа с FrontPage очень проста и напоминает работу с Microsoft Word. В редакторах этого типа создание HTML-кода возлагается на саму программу, а пользователь занимается лишь оформлением странички.
Вторая группа редакторов предназначена для профессиональных дизайнеров, которые пишут HTML вручную и, соответственно, хорошо понимают что делают.
Я бы советовал сразу забыть про существование WYSIWYG-редакторов, даже начинающим. Создавать web-страницы подобным образом такая же нелепость, как программирование с помощью мышки. Язык HTML не прост, он примитивен. Поэтому не стоит упрощать работу с элементарным, даже если вас об этом просит сам Microsoft.
Да-да, я призываю к написанию HTML "руками". Так вы быстрее разберетесь, что к чему, и очень быстро научитесь бегло читать HTML-код.

Миф о блокноте Windows

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

"Редакция советует..."

Из HTML-редакторов особо выбирать не приходится: Macromedia HomeSite ? лучший выбор.

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

Единственные недостатки Macromedia HomeSite ? неудачно организованный поиск/замена и медленная работа на больших файлах.

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

Для счастливых обладателей ОС Linux могу также посоветовать поглубже изучить графический редактор GIMP с технологией Script-Fu. Он предоставляет невероятные возможности по созданию собственных графических фильтров и комбинированию имеющихся. Если вы хотите создать тысячу разных картинок с заданными атрибутами (например, графических кнопок или заголовков) ? этот редактор для вас.

Оптимизаторы

Из программ-оптимизаторов изображений могу порекомендовать два продукта: Adobe ImageReady, поставляющийся в комплекте с Adobe Photoshop и программу Ulead SmartSaver Pro. Обе программы прекрасно интегрируются с Adobe Photoshop и предоставляют все необходимое для работы.

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

Как это делается у них

Живёт себе иностранец, спокойно так живёт, работает, детей растит, а в свободное время занимается резьбой по яичной скорлупе. Причём занимается самозабвенно, это его хобби. В один прекрасный день он понимает, что Интернет позволяет бесплатно обменяться опытом, рассказать всем о том, до чего ж это здорово ? вырезать бор-машиной в скорлупе диковинные узоры!
Иностранец садится, пишет по данной теме всё что он знает, пишет долго и с любовью. Потом лезет в Интернет, заводит где-нибудь страничку и выкладывает туда текст. Вот и всё! Никакого дизайна, никакой графики, рейтингов, баннеров и "красивых" доменов, только чистый текст и ссылки.
И скромная подпись внизу "Author: Larry Smith (larry@hotmail.com)".
Таких страниц тысячи, и каждая рассказывает о чьём-то личном опыте в любых областях ? от разведения белок до секретов похоронного дела в условиях невесомости.

Как это делается у нас

Живёт себе русский, спокойно так живёт, иногда подрабатывает, в свободное время пьёт пиво с друзьями, компьютерные журналы почитывает и с девицами чатится. Причём чатится самозабвенно, т.к. других хобби не имеется. В один прекрасный день он понимает, что у Серёги домашняя страничка уже есть, а у него ещё нету!
Русский садится, регистрирует страничку там, где дают побольше мегабайт места и начинает клепать дизайн, клепать долго и с любовью. Целый вечер. Потом пишет какой-нибудь текст в духе "Меня зовут Вася, я слушаю Наутилус..." и выкладывает сайт в Интернет. Вот и всё! Хотя нет, не всё. Следующий вечер тратится на регистрацию в рейтингах, поисковиках, баннерных системах и тестирование гостевой книги.
...и скромная надпись внизу "Design by TheHarDCORE Studio, Copyright (C) 2002."

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

Если вы что-то умеете

Если вы что-то умеете, и готовы поделиться знаниями и опытом с другими ? загляните на www.manual.ru. Здесь вам помогут с хостингом, программированием и дизайном сайта (конечно же, при условии, что ваш материал авторский, подробный и интересный).

За чтонадо отрывать руки
За ламерство

Популярное слово "ламер", не правда ли? И очень обидное, между прочим. Есть еще одно слово, на которое люди почему-то тоже обижаются ? слово "чайник", хотя "ламер" и "чайник" совсем не одно и то же.
Чайниками называют новичков в каком-то деле. Быть чайником, на мой взгляд, даже почетно ? тебе только предстоит познать что-то интересное в доселе неведомой области, это как впервые открыть занимательную книгу, заполучив возможность научиться чему-то новому.
Что касается ламеров, то это люди особого сорта. Вечные "начинающие" : до них ничего не доходит. Настоящему ламеру плевать на то, что говорят опытные люди, любую попытку дать ему добрый совет он либо пресекает, либо игнорирует, всегда делая по-своему. Мнит себя профи, блин. Вот из-за таких умников мы сегодня и имеем в Интернете то, что имеем.

За порнуху

Иначе говоря, надо отрывать руки за "грязные" методы работы. За плодящиеся в невиданном количестве окошки с баннерами, за, собственно, сами баннеры в количестве пяти и более штук на страницу, за путаную навигацию, заводящую неизвестно куда, за "пустые" сайты, состоящие из одних линков, за страницы с сотнями линков, ссылающимися в невесомость. Наконец, за баннеры в стиле "поймай мартышку", "недосказанный анекдот", "клевая телка", "сруби миллион баксов" и "сломай глаза, заметь меня".

За эгоизм

Практически каждый сайт в той или иной мере страдает эгоизмом. А выражается этот эгоизм, как правило, в лени его создателя. Сейчас дизайнеру лень добиваться того, чтобы его сайт нормально смотрелся на браузерах, которые почему-то не установлены на рабочем компьютере дизайнера. "Третий Нетскейп? Вы шутите! Им уже давно никто не пользуется, посмотрите статистику!" ? вот его основной аргумент.

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

Программирование: Языки - Технологии - Разработка

Программирование

Технологии программирования

Разработка программ

Работа с данными

Методы программирования

IDE интерфейс

Графический интерфейс

Программирование интерфейсов

Отладка программ

Тестирование программ

Программирование на Delphi

Программирование в ActionScript

Assembler

Basic

Pascal

Perl

VBA

VRML

XML

Ada

Lisp

Python

UML

Форт

Языки программирования

Пример:
	Небоскребы, небоскребы, а я маленький такой.

Пример:
	`СЕНЯ ЗПТ ТВОЮ МАТЬ ТЧК ПОДРОБНОСТИ В ПИСЬМЕ ТЧК`

Пример:
	Переменная `IndexZ` равна 5.

К-во	Полученный ответ	Как это нужно понимать
30%	Нет ответа	Ясен пень, баннеры накрутить хочу и прославиться. Что, сам не видишь? Внизу десять кнопок с рейтингами, моё имя, несуществующий e-mail и три баннера.
30%	Не знаю, хотел сделать свой сайт	Не хочу домашнюю страничку, хочу иметь настоящий сайт. Впервые в жизни сам нарисовал достойный дизайн, ну не пропадать же ему, а? Для такого крутого дизайна нужен хороший текст, а у меня по сочинениям всегда только тройки были. К тому же автора текста я указал, всё честно, ну чего ты придираешься?
30%	Хочу сделать сборник по данной теме	Хочу свой портал. Огромный и чтобы весь мой. Понимаете, в Интернете всё лежит в разных местах. Это же беспорядок какой-то! Нужно сделать один большой мега-портал, библиотеку по каждой теме. Про библиотеку Мошкова слышали? Вот! Я сделаю супер-сайт про html и дизайн, выложу на него всё что найду и это будет круто. Всё в одном месте и моё ? это круто, люди оценят.
10%	Хочу доработать, довести до ума	Хочу почувствовать свою причастность к вашему труду. Мне непонятно, почему у вас так мало тэгов описано. При чём здесь "совместимость", а? Я думаю дописать справочник, а то он какой-то недоделанный. Про CSS нихрена нету, тег вообще отсутствует. Я в Инете много недостающих материалов нашёл, надо только упорядочить и слить воедино. Когда закончу, у меня будет свой сайт, жутко полезный для людей.

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

BODY

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

Формы

Гиперссылки

Объекты

Списки

Таблицы

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

FORM

INPUT

OPTION

SELECT

TEXTAREA

FRAME

FRAMESET

NOFRAMES

BASE

HEAD

LINK

META

STYLE

TITLE

Фреймы

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

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

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

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

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

A

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

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

СООБРАЖЕНИЯ

C0 Controls иBasic Latin "

FAQ

Форматы изображений ? GIF или JPG?

Геометрические формы

Греческие буквы

левая двойная угловая

Latin Extended-B

Математические операторы

Обозначения специальных символов вHTML 4

Общая пунктуация

Полезные линки

Таблица MIME-типов

Прочие символы

Различные технические знаки

Символы, производные отбукв

Spacing Modifier Letters

Стрелки

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

Знаки пунктуации

DD

DL

DT

LI

MENU, DIR

OL

UL

AREA

MAP

APPLET

EMBED

IMG

NOEMBED

PARAM

NOSCRIPT

SCRIPT

CAPTION

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

TABLE

TD иTH

TR

ADDRESS

BLOCKQUOTE

BR

DIV

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

Самый большой заголовок посередине

Заголовок поменьше