Приглашаем посетить
Мережковский (merezhkovskiy.lit-info.ru)

HTML

КРАТКИЙ СПРАВОЧНИК HTML (настольная книга профессионального чайника)


    Этот маленький справочник не претендует на полноту отражения всех ньюансов при создании HTML-документов. Это всего лишь небольшой анти-склерозник. При этом я полагаю, что вы знаете по крайней мере что такое Web-сервер и Web-browser и имеете хотя бы начальные сведения о том, что такое HTML.
    Я буду рад, если это небольшое творение, созданное на заре моего первого опыта сайтостроительства, поможет и вам. Удачи, дружище-чайник ;))

^go top^ ОПИСАНИЕ ДОКУМЕНТА

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Пролог HTML 4.0 - должно быть в начале файла, цифрами указывается номер версии стандарта
<HTML> начало html-документа
<HEAD> Заголовок, содержит описание некоторых свойств документа
<TITLE> _Название_ </TITLE> текст в заголовке окна
<ISINDEX> Поиск по ключевым словам (редко используется)
<ISINDEX PROMPT="_текст_> текст приглашения для поля ввода ключей поиска
<BASE HREF="_URL_"> базовый URL для этого файла, т.е. к относительным ссылкам на внешние документы добавляется этот префикс URL
<META HTTP-EQUIV="AUTHOR" CONTENT="My Name"> информация об авторе
<META HTTP-EQUIV="REPLY-TO" CONTENT="J.master@narod.ru"> обратная связь
<META HTTP-EQUIV="DESCRIPTION" CONTENT="My Description"> описание своего документа
<META HTTP-EQUIV="KEYWORDS" CONTENT="My,Html,Home,MyHtml"> ключевые слова для роботов-поисковиков
<META NAME="DATA" CONTENT="date_of_create> дата создания документа
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> не хранить в кэше
<META HTTP-EQUIV="REFRESH" CONTENT="XX, URL=total_url.html"> переход на другой документ через XX сек
<STYLE> описание стиля документа (более подробно можно посмотреть в описании CSS)
A:Link{ color: #RRGGBB} цвет ссылки
A:Visited{ color: #RRGGBB} цвет пройденой ссылки
A:Active{ color: #RRGGBB} цвет активной ссылки
A:Hover{ color: #000066}
</STYLE> style
</HEAD>

^go top^ СВОЙСТВА ДОКУМЕНТА

<BODY ... начало документа для вывода на экран
... BACKGROUND="URL"... Фоновая картинка в формате .jpg .gif .png
...BGCOLOR="#RRGGBB"... Цвет фона
...TEXT="#RRGGBB"... Цвет текста
...LINK="#RRGGBB"... Цвет ссылки
...ALINK="#RRGGBB"... Активная ссылка
...VLINK="#RRGGBB"... Пройденная ссылка
...MARGINWIDTH=??... Горизонтальные отступы здесь и далее - в пикселях
...MARGINHEIGHT=??... Вертикальные отступы
...TOPMARGIN=??...
...BOTTOMMARGIN=??... Отступ снизу
...LEFTMARGIN=??... Отступ слева
...RIGHTMARGIN=??...> Отступ справа
   ... >  

^go top^ ВНЕШНИЙ ВИД ТЕКСТА

<FONT FACE="font_name"> Тип шрифта
<FONT COLOR="#RRGGBB"> Цвет шрифта
<FONT SIZE=x> Размер шрифта (x = от 1 до 7)
<FONT SIZE="+x" или "-?"> Изменить размер шрифта (увеличить/уменьшить на x единиц)
<BASEFONT SIZE=?> Базовый размер шрифта (от 1 до 7; по умолчанию 3 или 4) Действительные размеры шрифта зависят от ОС и браузера, часто не влияют на размер шрифта в таблицах
</FONT> Вернуться к варианту "по умолчанию" (default). Однако в некоторых броузерах работает как "вернуться на шаг назад" - к предыдущему назначению FONT
<CENTER> </CENTER>
Центровка текста (и графики)
<B> </B> Жирный
<I> </I> Курсив
<U> </U> Подчеркнутый
<S> </S> Перечеркнутый
<SUB> </SUB> Нижний индекс
<SUP> </SUP> Верхний индекс
<TT> </TT> Печатная машинка
<EM> </EM> Выделение
<STRONG> </STRONG> Дополнительное выделение
<CITE> </CITE> цитата (обычно курсив)
<BLOCKQUOTE> </BLOCKQUOTE>
Цитата (обычно выделяется отступом)
<CODE> </CODE> .CODE (для листингов кода)
<SAMP> </SAMP> Пример вывода
<KBD> </KBD> Ввод с клавиатуры
<ADDRESS> </ADDRESS>
Адрес автора
<BLINK> </BLINK> Мигающий (часто не поддерживается)
<VAR> </VAR> Переменная - обычно слово - т.е. является текстом, который может быть заменен различными выражениями.
<DFN> </DFN> Определение - многие броузеры не поддерживают
<PRE> </PRE>
пред-Форматированый
т.е. сохранить формат текста как в документе
<PRE WIDTH=?> </PRE> Форматированный по ширине (в символах)
<SMALL> </SMALL> Маленький шрифт
<BIG> </BIG> Большой шрифт
<H?> </H?> 1, 2, 3, 4, 5, 6
Заголовок: 1-самый большой,...6-самый маленький
<H? ALIGN=LEFT | CENTER | RIGHT>   </H?> ... c выравниванием
<BR> Новая строка
<BR ALIGN=LEFT | CENTER | RIGHT> с выравниванием...
<BR CLEAR=LEFT | RIGHT | ALL> или убрать выравнивание
<NOBR></NOBR> запрещает перевод строки
<WBR> возможный перенос - где разбивать строку для переноса при необходимости
<P> </P> Параграф - обычно отделяется пустой строкой перед блоком текста
<P ALIGN=LEFT | CENTER | RIGHT> </P> Выравнивание
<DIV> </DIV> Секция
<DIV ALIGN=LEFT | RIGHT | CENTER | JUSTIFY > Выравнивание
<MULTICOL... ...COLS=? ... Многоколоночный текст
... GUTTER=? ... Пробел между колонками (по умолчанию 10 точек)
... WIDTH=? > Ширина колонки
</MULTICOL>  
<SPACER... Пустой блок
... TYPE=horizontal | vertical | block ... Тип пустого блока
... SIZE=?? ... Величина пустого блока
... WIDTH=?? HEIGHT=?? ... Размеры пустого блока
... ALIGN=left | right | center ...> Выравнивание
<HR ... ... WIDTH=? ... Горизонтальная линия, ширина в точках
или ... WIDTH="??%" ... Ширина в процентах от ширины страницы
... SIZE=? ... Толщина (в точках)
... ALIGN=LEFT | RIGHT | CENTER ... Выравнивание
... COLOR="#RRGGBB" ... Цвет
> Сплошная линия (без трехмерных эффектов)

^go top^ СПИСКИ

<UL ...> <LI>_text_ </UL> Неупорядоченный (<LI> перед каждым элементом или <LI>элемент</LI>)
... TYPE=DISC | CIRCLE | SQUARE ... Тип метки (для всего списка)
... COMPACT ... сокращенное расстояние между элементами
<LI TYPE=DISC | CIRCLE | SQUARE> Тип метки (этот и последующие)
<OL ... COMPACT ...> <LI>_text_ </OL> Нумерованый (<LI> перед каждым элементом)
<OL TYPE=A | a | I | i | 1> Тип нумерации (для всего списка)
<LI TYPE=A | a | I | i | 1> Тип нумерации (этот и следующие)
<OL START=?> Первый номер (для всего списка)
<LI VALUE=?> номер от этого и далее
<DL> <DT>_text1_ <DD>_text2_ </DL> Список определений <DT>=термин, <DD>=определение
<MENU ... COMPACT ...> <LI>_text_ </MENU> Меню <LI> перед каждым элементом
<DIR ... COMPACT ...> <LI>_text_ </DIR> Каталог <LI> перед каждым элементом

^go top^ ТАБЛИЦЫ

<TABLE ... Определить таблицу
... WIDTH=?? ... ширина в пикселях или % от ширины документа
... BORDER=? ... Окантовка таблицы
... CELLSPACING=? ... Расстояние между ячейками
... CELLPADDING=? ... Дополнение ячеек
... COLSPEC=?? ... Фиксированная ширина колонок либо в пикселях, либо в процентах.
... bgcolor="#RRGGBB" ... Цвет фона
Фоновый рисунок
... bordercolor="#RRGGBB" Цвет окантовки
... bordercolordark="#RRGGBB" ... Цвет окантовки правой и нижней грани таблицы
(и верхней и левой грани в ячейках)
... bordercolorlight="#RRGGBB"...> Цвет окантовки левой и верхней грани таблицы
(и нижней и правой грани в ячейках)
<CAPTION>_text_ </CAPTION> Заглавие таблицы
<CAPTION ALIGN=TOP | BOTTOM> Положение заглавия сверху|снизу таблицы
<TR></TR> Строка таблицы
<TR ALIGN=LEFT | RIGHT | CENTER > Выравнивание горизонтальное
<TR VALIGN= TOP | MIDDLE | BOTTOM | BASELINE > Выравнивание вертикальное
<TD ... >_text_ </TD> Ячейка таблицы - должна быть внутри строки
... ALIGN=LEFT | RIGHT | CENTER ... Выравнивание в ячейке горизонтальное
... VALIGN=TOP | MIDDLE | BOTTOM | BASELINE ... Выравнивание вертикальное
... NOWRAP ... Без перевода строки
... COLSPAN=?? ... Перекрыть ?? колонки
... ROWSPAN=?? ... Перекрыть ?? строк(и)
... WIDTH=?? ... Ширина в пикселях или % от ширины таблицы
... HEIGHT=?? ... Высота в пикселях
... BGCOLOR="#RRGGBB" ... Цвет ячейки
... background="URL" ... Фоновый рисунок ячейки
<TH>_text_ </TH> Заголовок в таблице
атрибуты такие же, как в описании ячеек <TD>

^go top^ ГРАФИКА

<IMG SRC="URL" ... вставка графики
...ALIGN=TOP | BOTTOM | MIDDLE | LEFT | RIGHT ... Выравнивание
...ALIGN=TEXTTOP | ABSMIDDLE | BASELINE | ABSBOTTOM ... Выравнивание с текстом
...ALT="_text_" ... Комментарий (выводится если картинка не изображается или при наведении курсора на картинку)
...WIDTH=? HEIGHT=? ... Размеры пикселях или % масштабирования
...BORDER=? ... Окантовка (в пикселях)
...HSPACE=? VSPACE=? ... Отступ (в пикселях)
...LOWSRC="URL" ... Для вывода в низком разрешении
...NOSAVE ...>
<IMG SRC="URL" ISMAP> Карта
<IMG SRC="URL" USEMAP="URL"> Локальная карта
<MAP NAME="***"> </MAP> Определение карты
<AREA SHAPE="RECT" COORDS=",,," HREF="URL" | NOHREF> Области карты

^go top^ ССЫЛКИ

<A HREF="URL" ...TITLE="zagolovok"...>_text_ </A> Простая ссылка на внешний документ
<A NAME="_name_" ...TITLE="zagolovok"...>_text_</A> Определить закладку в тексте
<A HREF="#_name_" ...TITLE="zagolovok"...>_text_ </A> Ссылка на закладку в том же документе
<A HREF="URL#_name_>_text_ </A> Ссылка на закладку в другом документе
<A HREF="URL" TARGET=" *** | _blank | _self | _parent | _top"> </A> Ссылка на другое окно
<EMBED SRC="URL" WIDTH=? HEIGHT=? Autostart=True|False Loop=False|True Controller=True|False> Вставить объект в страницу размерами ?? на ?? Автостарт или по кнопке, Зациклить или нет, Есть кнопки управления. Обычно используется для вставки музыкальных и видео- клипов. Разными броузерами обрабатывается по разному!

^go top^ ФОРМЫ

<FORM... определить форму
... ACTION="URL" METHOD=GET | POST по событию SUBMIT передать на URL по методу GET | POST
... ENCTYPE="multipart/form-data" ...> многостраничная
<INPUT... ... NAME="_name_"... имя поля
... VALUE="_value_" значение поля по умолчанию
... TYPE="PASSWORD" | поле ввода пароля
... TYPE="CHECKBOX" | поле ввода множественного выбора "да/нет"
... TYPE="RADIO" | поле ввода единственного выбора из нескольких предложенных выриантов "да/нет"
... TYPE="IMAGE" | изображение
... TYPE="HIDDEN" | скрытое поле - используется для передачи "служебной" информации и в многостраничных формах
... TYPE="SUBMIT" | кнопка передачи данных формы на сервер
... TYPE="RESET" | кнопка "очистки" формы
... TYPE="BUTTON" ... просто кнопка, которой можно сопоставить событие On_Click
... CHECKED ... "включено" по умолчанию - для checkboxes и radio boxes
... SIZE=?? ...
... MAXLENGTH=?? ... максимальное количество символов в полях ввода
... >  
<SELECT> </SELECT> Список вариантов
<SELECT NAME="***"> </SELECT> Имя списка
<SELECT SIZE=?> </SELECT> Число вариантов
<SELECT MULTIPLE> выбор нескольких элементов
<OPTION> элемент списка выбора
<OPTION SELECTED> Опция по умолчанию
<TEXTAREA ROWS=? COLS=?> </TEXTAREA> Ввод текста в блок размерами ??строк х ??колонок
<TEXTAREA NAME="***"> </TEXTAREA> Имя текста
<TEXTAREA WRAP=OFF | VIRTUAL | PHYSICAL> </TEXTAREA> Разбивка на строки
</FORM>  

^go top^ ФРЕЙМЫ

Файл описания фреймов <FRAMESET> </FRAMESET> (вместо <BODY>)
Высота строк <FRAMESET ROWS=, , ,> </FRAMESET> пиксели, проценты %, остаток *
Ширина колонок <FRAMESET COLS=, , ,> </FRAMESET>
Ширина окантовки <FRAMESET BORDER=?>
Окантовка <FRAMESET FRAMEBORDER="yes | no">
Цвет окантовки <FRAMESET BORDERCOLOR="#$$$$$$">
Определить файл фрейма <FRAME SRC="URL">
Имя фрейма <FRAME NAME="***" | _blank | _self | _parent | _top> пользовательский, новый, текущий, родительский, главный
Ширина границы <FRAME MARGINWIDTH=?> горизонтальные отступы
Высота границы <FRAME MARGINHEIGHT=?> вертикальные отступы
Прокрутка <FRAME SCROLLING="YES | NO | AUTO"> Линейки скроллинга
Постоянный размер <FRAME NORESIZE> без изменения фреймов мышью
Окантовка <FRAME FRAMEBORDER="yes | no">
Цвет окантовки <FRAME BORDERCOLOR="#$$$$$$">
Содержание без фреймов <NOFRAMES> </NOFRAMES>

^go top^ JAVA-СКРИПТЫ И АППЛЕТЫ

<SCRIPT LANGUAGE="JavaScript | VBScript"> Начало блока скрипта
<-- Начало комментария, чтобы текст не вышел на экран при отсутствии обработчика скрипта
... набор функций ... Здесь, собственно, бессмертные творения ;)
<SCRIPT SRC="URL"> Загрузка скрипта из внешнего файла
//   --> Конец блока комментария
</SCRIPT> Конец блока скрипта
<NOSCRIPT>  
....my..my.... Это на случай, если обработка скриптов отключена
</NOSCRIPT>  
Апплет <APPLET> </APPLET>
Имя файла <APPLET CODE="***">
Параметры <APPLET PARAM NAME="***">
Адрес апплета <APPLET CODEBASE="URL">
Имя апплета <APPLET NAME="***"> (для ссылок из других частей страницы)
Альтернативный текст <APPLET ALT="***"> (для программ не поддерживающих Java)
Выравнивание <APPLET ALIGN="LEFT | RIGHT | CENTER">
Размеры <APPLET WIDTH=? HEIGHT=?> (в точках)
Отступ <APPLET HSPACE=? VSPACE=?> (в точках)

^go top^ РАЗНОЕ

<!-- _text_ -->
<IFrame ... Src="URL_имя_файла" ... вставка внешнего документа в виде фрейма в текущий документ (удобно, когда нет SSI)
...Name="_name_" ... имя окна
...Width=?? Height=??... размеры
...FrameBorder=??... толщина рамки фрейма
...Hspace=?? Vspace=??... опступ фрейма от остальных объектов
...MarginHeight=?? ...MarginWidth=??...> опступ внутри фрейма от границ окна

^go top^ СПЕЦИАЛЬНЫЕ СИМВОЛЫ

&nbsp ; Несокращаемый пробел
&quot ; " (кавычка)
&amp ; & (амперсанд)
&lt ; < (меньше)
&gt ; > (больше)
&reg ; ® Торговая марка ТМ
&copy ; © Copyright (C)
</BODY> конец тела документа
</HTML> конец html-документа

PostScriptum^go top^

216 COLOR CODES^go top^

FFFFFF
White
FFFFCC FFFF99 FFFF66 FFFF33
Yellow
FFFFF0
Ivory
FFFFE0
Lightyellow
FFFACD
Lemonchiffon
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00 FFFAFA
Snow
FFFAF0
Floralwhite
FFF8DC
Cornsilk
FF99FF FF9999 FF9966 FF9933 FF9900 FAF0E6
Linen
FAEBD7
Antiquewhite
FFE4C4
Bisque
FF66FF FF66CC FF6699 FF6666 FF6633 FF6600 FFEBCD
Blanchedalmond
DEB887
Lightgolden
rodyellow
FAFAD2
F0FFF0
Honeydew
FF33FF FF33CC FF3399 FF3366 FF3333 FF3300 FFE4B5
Moccasin
FFDEAD
Papayawhip
FFEFD5
Peachpuff
FFDAB9

Magenta
FF00CC FF0099 FF0066 deeppink
FF1493
Paleturquoise
AFEEEE

00BFFF
Darkslateblue
483D8B
Darkslategray
CCFFFF CCFFCC CCFF99 CCFF66 CCFF00 BDB76B
Darkkhaki
F0E68C
D87093
Palevioletred
FF0000
Red
CCCCFF CCCC99 CCCC66 CCCC33 CCCC00
Silver
A9A9A9
Darkgray
808080
Gray

Dimgray
CC99FF CC99CC CC9999 CC9933 CC9900 Darksalmon
E9967A

8FBC8F
Goldenrod
DAA520
Darkturquoise
CC66FF CC66CC CC6699 CC6666 CC6600 Darkolivegreen
556B2F
Darkorange
Darkorchid
9932CC
Darkred
8B0000
CC33CC CC3399 CC3366 CC3333 Palegoldenrod
EEE8AA
Palegreen
98FB98

FFA500
Aquamarine
7FFFD4
CC00FF CC0099 CC0066 CC0033 CC0000
2E8B57
Orangered
FF4500
Orchid
Gainsboro
DCDCDC
99FFFF 99FFCC 99FF66 99FF33 99FF00 Olive
808000

688E23
Sandybrown
F4A460
Green
008000
99CCCC 99CC99 99CC66 99CC33 Mediumvioletred
C71585
Mintcream
F5FFFA

7B68EE
Forestgreen
228B22
9999FF 999999 999966 999933 999900
00FA9A
Royalblue
4169E1
Oldlace
Darkgoldenrod
B8860B
9966FF 9966CC 996666 996633 996600 Maroon
Mediumauqamarine
66CDAA
Mediumorchid
BA55D3

008B8B
9933FF 9933CC 993399 993333 993300 Mediumpurple
9370D8

3CB371
Mediumturquoise
48D1CC
Saddlebrown
9900FF 9900CC 990099 990066 990000 Lightslategray
778899
Lightsteelblue
Powderblue
B0E0E6
66FFFF 66FFCC 66FF66 66FF33 66FF00 Lightsalmon
Lightseagreen
20B2AA
Limegreen
32CD32

7FFF00
66CCFF 66CCCC 66CC99 66CC33 66CC00 Lightcoral
F08080

E0FFFF
Crimson
DC143C
F0FFFF
6699FF 6699CC 669999 669966 669900 CD853F
Peru
FFC0CB
Pink
Plum
DDA0DD

6495ED
6666FF 6666CC 666699 666633 666600 FA8072
Salmon

Seashell
Lightgreen
90EE90
Cadetblue
6633FF 6633CC 663399 663366 663300 A0522D
Sienna
87CEEB
Lightgrey
D3D3D3
6600FF 6600CC 660066 660033 660000 6A5ACD
708090
Slategray
Lightskyblue
87CEFA
33FFCC 33FF99 33FF66 33FF33 Lavendar
E6E6FA
Greenyellow
ADFF2F

FFE4E1
33CCFF 33CCCC 33CC99 33CC33 33CC00 4682B4
Steelblue

Springgreen
9ACD32
YellowGreen
F8F8FF
3399FF 3399CC 339999 339966 339900 008080
Teal
D8BFD8
Thistle

Tan
F5F5DC
Beige
3366FF 3366CC 336666 336633 336600 Gold
FFD700

1E90FF
Firebrick
B22222
3333FF 333399 333366 333333 333300
Rosybrown
FF6347
Tomato
40E0D0
3300FF 3300CC 330099 330066 330000 006400
Darkgreen
D2691E
F5DEB3
Wheat
F0F8FF
Aliceblue

Aqua|Cyan
00FFCC 00FF99 00FF66 00FF00
Lime
Lavenderblush
FFF0F5
Lawngreen
Lightblue
ADD8E6
00CCFF 00CCCC 00CC66 00CC33 00CC00 9400D3
FF7F50
Coral
A52A2A
Brown
0099CC 009999 009966 009933 8A2BE2
Blueviolet
8B008B
Darkmagenta

Violet
0066FF 0066CC 006699 006633 006600 Hotpink
FF69B4

CD5C5C
Lightpink
FFB6C1
0033FF 003399 003366 003333 003300
Midnightblue
800080
Purple
4B0082
F5F5F5
Whitesmoke
0000FF
Blue
0000CC 000066 000033 000000
Black
000080
Navy

Mediumblue
00008B
Darkblue

140 COLOR NAMES ^go top^