Документация
HTML CSS PHP PERL другое

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" ... Цвет
... NOSHADE ...> Сплошная линия (без трехмерных эффектов)

^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" ... Цвет фона
... background="URL" ... Фоновый рисунок
... 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="TEXT" |
... 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 FFFF00
Yellow
FFFFF0
Ivory
FFFFE0
Lightyellow
FFFACD
Lemonchiffon
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00 FFFAFA
Snow
FFFAF0
Floralwhite
FFF8DC
Cornsilk
FF99FF FF99CC FF9999 FF9966 FF9933 FF9900 FAF0E6
Linen
FAEBD7
Antiquewhite
FFE4C4
Bisque
FF66FF FF66CC FF6699 FF6666 FF6633 FF6600 FFEBCD
Blanchedalmond
DEB887
Burlywood
Lightgolden
rodyellow
FAFAD2
F0FFF0
Honeydew
FF33FF FF33CC FF3399 FF3366 FF3333 FF3300 FFE4B5
Moccasin
FFDEAD
Navajowhite
Papayawhip
FFEFD5
Peachpuff
FFDAB9
FF00FF
Magenta
FF00CC FF0099 FF0066 FF0033 deeppink
FF1493
Paleturquoise
AFEEEE
Deepskyblue
00BFFF
Darkslateblue
483D8B
Darkslategray
2F4F4F
CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00 BDB76B
Darkkhaki
F0E68C
Khaki
D87093
Palevioletred
FF0000
Red
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00 C0C0C0
Silver
A9A9A9
Darkgray
808080
Gray
696969
Dimgray
CC99FF CC99CC CC9999 CC9966 CC9933 CC9900 Darksalmon
E9967A
Darkseagreen
8FBC8F
Goldenrod
DAA520
Darkturquoise
00CED1
CC66FF CC66CC CC6699 CC6666 CC6633 CC6600 Darkolivegreen
556B2F
Darkorange
FF8C00
Darkorchid
9932CC
Darkred
8B0000
CC33FF CC33CC CC3399 CC3366 CC3333 CC3300 Palegoldenrod
EEE8AA
Palegreen
98FB98
Orange
FFA500
Aquamarine
7FFFD4
CC00FF CC00CC CC0099 CC0066 CC0033 CC0000 Seagreen
2E8B57
Orangered
FF4500
Orchid
DA70D6
Gainsboro
DCDCDC
99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00 Olive
808000
Olivedrab
688E23
Sandybrown
F4A460
Green
008000
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00 Mediumvioletred
C71585
Mintcream
F5FFFA
Mediumslateblue
7B68EE
Forestgreen
228B22
9999FF 9999CC 999999 999966 999933 999900 Mediumspringgreen
00FA9A
Royalblue
4169E1
Oldlace
FDF5E6
Darkgoldenrod
B8860B
9966FF 9966CC 996699 996666 996633 996600 Maroon
800000
Mediumauqamarine
66CDAA
Mediumorchid
BA55D3
Darkcyan
008B8B
9933FF 9933CC 993399 993366 993333 993300 Mediumpurple
9370D8
Mediumseagreen
3CB371
Mediumturquoise
48D1CC
Saddlebrown
8B4513
9900FF 9900CC 990099 990066 990033 990000 Lightslategray
778899
Lightsteelblue
B0C4DE
Powderblue
B0E0E6
66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00 Lightsalmon
FFA07A
Lightseagreen
20B2AA
Limegreen
32CD32
Chartreuse
7FFF00
66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00 Lightcoral
F08080
Lightcyan
E0FFFF
Crimson
DC143C
F0FFFF
Azure
6699FF 6699CC 669999 669966 669933 669900 CD853F
Peru
FFC0CB
Pink
Plum
DDA0DD
Cornflowerblue
6495ED
6666FF 6666CC 666699 666666 666633 666600 FA8072
Salmon
FFF5EE
Seashell
Lightgreen
90EE90
Cadetblue
5F9EA0
6633FF 6633CC 663399 663366 663333 663300 A0522D
Sienna
87CEEB
Skyblue
Lightgrey
D3D3D3
6600FF 6600CC 660099 660066 660033 660000 6A5ACD
Slateblue
708090
Slategray
Lightskyblue
87CEFA
33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00 Lavendar
E6E6FA
Greenyellow
ADFF2F
Mistyrose
FFE4E1
33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00 4682B4
Steelblue
00FF7F
Springgreen
9ACD32
YellowGreen
F8F8FF
Ghostwhite
3399FF 3399CC 339999 339966 339933 339900 008080
Teal
D8BFD8
Thistle
D2B48C
Tan
F5F5DC
Beige
3366FF 3366CC 336699 336666 336633 336600 Gold
FFD700
Dodgerblue
1E90FF
Firebrick
B22222
3333FF 3333CC 333399 333366 333333 333300 BC8F8F
Rosybrown
FF6347
Tomato
40E0D0
Turquoise
3300FF 3300CC 330099 330066 330033 330000 006400
Darkgreen
D2691E
Chocolate
F5DEB3
Wheat
F0F8FF
Aliceblue
00FFFF
Aqua|Cyan
00FFCC 00FF99 00FF66 00FF33 00FF00
Lime
Lavenderblush
FFF0F5
Lawngreen
7CFC00
Lightblue
ADD8E6
00CCFF 00CCCC 00CC99 00CC66 00CC33 00CC00 9400D3
Darkviolet
FF7F50
Coral
A52A2A
Brown
0099FF 0099CC 009999 009966 009933 009900 8A2BE2
Blueviolet
8B008B
Darkmagenta
EE82EE
Violet
0066FF 0066CC 006699 006666 006633 006600 Hotpink
FF69B4
Indianred
CD5C5C
Lightpink
FFB6C1
0033FF 0033CC 003399 003366 003333 003300 191970
Midnightblue
800080
Purple
4B0082
Indigo
F5F5F5
Whitesmoke
0000FF
Blue
0000CC 000099 000066 000033 000000
Black
000080
Navy
0000CD
Mediumblue
00008B
Darkblue

140 COLOR NAMES ^go top^

01/01/2003
© 2000- NIV