Руководство по
HTML
Таговая модель документа:
"элемент" := <"имя элемента" "список атрибутов"> содержание элемента </"имя элемента"Структура документа
Элемент HTML или гипертекстовый документ состоит из двух частей:
заголовка документа (HEAD)
тела документа (BODY)
<HTML>
<HEAD>
Содержание заголовка
</HEAD>
<BODY>
Содержание тела документа
</BODY>
</HTML>
Элементы заголовка
| <TITLE> | поля документа |
| <BASE> | базовый адрес |
| <ISINDEX> | поисковый документ |
| <LINK> | общая гипертекстовая ссылка |
| <META> |
Примеры элементов заголовка:
<TITLE> Название документа </TITLE>
<BASE HREF="http://polyn.net.kiae.su/>,
<A HREF="/altai/index.html">
<A HREF="http://polyn.net.kiae.su/altai/index.html">
<img SRC="/gif/test.gif">
<img SRC="http://polyn.net.kiae.su/gif/test.gif">
<ISINDEX HREF="http://polyn.net.kiae.su/cgi-bin/search" PROMPT="Enter Keywords:">
<LINK REL=Help HREF="http://polyn.net.kiae.su/dss/syshelp.html">
<LINK REL=Banner HREF=banner.html>
<META HTTP-EQUIV="Keywords"
CONTENT="Plsma, Nuclear Physics">
Keywords: Plasma, Nuclear Physics
Основные классы элементов тела
Тело документа состоит из:
Иерархических контейнеров и заставок
Заглавий (от H1 до H6)
Блоков (параграфы, списки, формы, таблицы, картинки и т. п.)
Горизонтальных отчеркиваний и адресов
Текста, разбитого на области действия стилей (подчеркивание, выделение, курсив), математические описания, графику и гипертекстовые ссылки
Элементы стиля
Элемент Значение Примечание
<I>.....</I> Курсив(Italic)
<B>...</B> Усиление(BOLD)
<TT>...</TT> Телетайп
<U>...</U> Подчеркивание
<S>...</S> Перечеркнутый текст
<BIG>...</BIG> Увеличенный текст только Arena
<SMALL>...</SMALL> Уменьшенный фонт только Arena
<SUB>...</SUB> Подстрочные символы только Arena
<SUP>...</SUP> Надстрочные символы только Arena
Информационные элементы
Элемент Значение Примечание
<EM>...</EM> Типографское усиление Часто отображается как Italic
<CITE>...</CITE> ЦитированиеНе реализовано в Mosaic
<STRONG>...</STRONG> УсилениеОтображается как BOLD
<CODE>...</CODE>Отображает примеры кода (например, коды программ) Отображается непропорциональным фонтом
<SAMP>...</SAMP>Последовательность литералов Не реализован в Mosaic
<KBD>...</KBD> Пример ввода символов с клавиатуры Используется при разработке руководств
<VAR>...</VAR> Переменная
<DFN>...</DFN> Определение только Arena
<Q>...</Q>Текст, заключенный в скобки Вид скобок зависит от атрибута LANG. Реализован только в Arena
<LANG>...</LANG> Определяет язык отображения только Arena
<AU>...</AU> Автор только Arena
<PERSON>...</PERSON> Имя персоны Введено для простоты выделения при индексировании документов. Реализован только в Arena
<ACRONIM>...</ACRONIM>Акронимтолько Arena
<ABBREV>...</ABBREV> Аббревиатуратолько Arena
<INS>...<INS> Вставленный текст только Arena
<DEL>...</DEL> Удаленный текст только Arena
Управление отображением стиля символов текста
Отображение ненумерованного списка
<UL>
<LH>Title of WWW programmes (NCSA).
<LI> NCSA HTTPD;
<LI> NCSA MOSAIC
<UL>
<LH>Title of WWW programmes (CERN).
<LI> CERN HTTPD;
<LI> AGORA - email robot;
<LI> HTTPD CERN;
<LI> WWW Line Browser;
<LI> Arena.
</UL>
<UL>
<LH> Title of WWW programmes (Netscape).
<LI> Netsite - server;
<LI> Netscape Novigator.
</UL>
Вложенные ненумерованные списки
<UL>
<LI>Title of WWW programmes (NCSA).
<UL>
<LI> NCSA HTTPD;
<LI> NCSA MOSAIC
</UL>
<LI>Title of WWW programmes (CERN).
<UL>
<LI> CERN HTTPD;
<LI> AGORA - email robot;
<LI> HTTPD CERN;
<LI> WWW Line Browser;
<LI> Arena.
</UL>
<LI> Title of WWW programmes (Netscape).
<UL>
<LI> Netsite - server;
<LI> Netscape Novigator.
</UL></UL>
Вложенные нумерованные списки
<OL>
<HL>Нумерованный список
<LI>Элементы заголовка документа
<OL>
<LI>TITLE
<LI>BASE
<LI>LINK
</OL>
<LI>Элементы тела документа
<OL>
<LI>BODY
<LI>Heading
<LI>Paragraph
<LI>Line Break
<LI>Horizontal Rule
<LI>...
</OL>
</OL>
Пример списка определений
C:wwwdoc2htmlworkpicturesitkhramtsovimg00017.gif
<A HREF="http://polyn.net.kiae.su/index.html">
Индекс базы данных "Полынь"</A>
<A NAME="point">
<A HREF="http://polyn.net.kiae.su/index.html#point">
Ссылка на точку "point" в документе "index.html"</A>
C:wwwdoc2htmlworkpicturesitkhramtsovimg00018.gif
<img SRC="http://polyn.net.kiae.su/gif/sarclast.gif" ALT="Sarcofagus.Winter, 1997">
<A HREF="doc.html"><img SRC="icon.gif" ALIGN=MIDDLE></A>
Таблицы
<TABLE BORDER>
<CAPTION>A test table with merged cells. <CREDIT> (T.Berners Lee/WWWC,1995.)</CREDIT> </CAPTION>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average>
<TH rowspan=2>other<BR>category<TH ROWSPAN=2>Misc</TR>
<TR><TH>height<TH>weght</TR>
<TR><TH ALIGN=left>males<TD>1.9<TD>0.003
<TR><TH ALIGN=left>females<TD>1.7<TD>0.002
</TABLE>
Пример таблицы
Пример таблицы построенной в текстовом редакторе
Формы
| Элемент | Назначение |
| INPUT | поля ввода информации имеют множество типов |
| TEXTAREA | поле ввода многострочного текста |
| SELECT | описание меню |
| OPTION | описание элемента меню |
Пример использования полей ввода
<FORM METHOD=POST ACTION=http://polyn.net.kiae.su/cgi-bin/test>
<P> Ниже приведен список примеров полей ввода:<BR>
Простоетекстовоеполе: <INPUT NAME="test1" VALUE="test1" TYPE="text"><BR>
Полетипа checkbox: <INPUT NAME="test2" TYPE="checkbox" CHECKED><BR>
Полетипа radiobutton: <INPUT NAME="test3" TYPE="radio"><BR>
Полетипа password: <INPUT NAME="test4" TYPE="password"><BR>
Невидимоеполе: <INPUT NAME="test5" TYPE="hidden" VALUE="kuku"><BR>
Кнопка Submit: <INPUT NAME="submit" VALUE="Submit" TYPE="submit"><BR>
Кнопка Reset: <INPUT NAME="reset" VALUE="Reset" TYPE="reset"><BR>
Графическаякнопка: <INPUT NAME="graph" VALUE="default" SRC="test.gif" TYPE="image"><BR>
</FORM>
Базисные элементы
Тип документа <HTML></HTML> (начало и конец файла)
Имя документа <TITLE></TITLE> (должно быть в заголовке)
Заголовок <HEAD></HEAD> (описание документа, например его имя)
Тело <BODY></BODY> (содержимое страницы)
Заглавие <H?></H?> (стандарт определяет 6 уровней)
с выравниванием <H? ALIGN=LEFT|CENTER|RIGHT></H?>
Секция <DIV></DIV>
с выравниванием <DIV ALIGN=LEFT|RIGHT|CENTER></DIV>
Цитата <BLOCKQUOTE></BLOCKQUOTE> (обычно выделяется отступом)
Выделение <EM></EM> (обычно изображается курсивом)
Дополнительное выделение<STRONG></STRONG>(обычно изображается жирным шрифтом)
Отсылка, цитата <CITE></CITE> (обычно курсив)
Код <CODE></CODE> (для листингов кода)
Пример вывода <SAMP></SAMP>
Ввод с клавиатуры <KBD></KBD>
Переменная <VAR></VAR>
Определение <DFN></DFN> (часто не поддерживается)
Адресавтора<ADDRESS></ADDRESS>
Большой шрифт <BIG></BIG>
Маленький шрифт <SMALL></SMALL>
Жирный <B></B>
Курсив<I></I>
N3.0b Подчеркнутый <U></U> (часто не поддерживается)
Перечеркнутый <STRIKE></STRIKE> (часто не поддерживается)
N3.0b Перечеркнутый <S></S> (часто не поддерживается)
Верхний индекс <SUB></SUB>
Нижний индекс <SUP></SUP>
Печатная машинка <TT></TT> (изображается как шрифт фиксированой ширины)
Форматированый <PRE></PRE> (сохранить формат текста как есть)
Ширина <PRE WIDTH=?></PRE> (в символах)
Центрировать <CENTER></CENTER> > (как текст, так и графика)
N1.0 Мигающий <BLINK></BLINK> (наиболее осмеянный элемент)
Размер шрифта <FONT SIZE=?></FONT> (от 1 до 7)
Изменить размер шрифта <FONT SIZE="+|-?"></FONT>
N1.0 Базовый размер шрифта <BASEFONT SIZE=?> (от 1 до 7; по умолчанию 3)
Цветшрифта<FONT COLOR="#$$$$$$"></FONT>
N3.0b Выборшрифта<FONT FACE="***"></FONT>
N3.0b Многоколоночныйтекст<MULTICOL COLS=?></MULTICOL>
N3.0b Пробелмеждуколонками<MULTICOL GUTTER=?></MULTICOL> (поумолчанию 10 точек)
N3.0b Ширинаколонки<MULTICOL WIDTH=?></MULTICOL>
N3.0b Пустой блок <SPACER>
N3.0b Типпустогоблока<SPACER TYPE=horizontal| vertical|block>
N3.0b Величина пустого блока <SPACER SIZE=?>
N3.0b Размеры пустого блока <SPACER WIDTH=? HEIGHT=?>
N3.0b Выравнивание<SPACER ALIGN=left|right|center>
Ссылки и графика
Ссылка <A HREF="URL"></A>
Ссылка на закладку <A HREF="URL#***"></A>(в другом документе)
<A HREF="#***"></A> (в том же документе)
N2.0Надругоеокно<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"> </A>
Определить закладку <A NAME="***"></A>
Отношение <A REL="***"></A> (часто не поддерживается)
Обратное отношение <A REV="***"></A> (часто не поддерживается)
Графика <IMG SRC="URL">
Выравнивание<IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
N1.0Выравнивание<IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Альтернатива <IMG SRC="URL" ALT="***">(выводится если картинка не изображается)
Карта <IMG SRC="URL" ISMAP> (нужна также программа)
Локальная карта <IMG SRC="URL" USEMAP="URL">
Определение карты <MAP NAME="***"></MAP>
Области карты<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF> Размеры <IMG SRC="URL" WIDTH=? HEIGHT=?> (в точках)
Окантовка<IMG SRC="URL" BORDER=?>(в точках)
Отступ<IMG SRC="URL" HSPACE=? VSPACE=?> (в точках)
N1.0 Заменитель в низком разрешении <IMG SRC="URL" LOWSRC="URL">
N1.1 Обновить<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
N2.0 Включить об'ект <EMBED SRC="URL"> (вставить об'ект в страницу)
N2.0 Размер об'екта <EMBED SRC="URL" WIDTH=? HEIGHT=?>
Разделители
Параграф <P></P> (закрывать элемент часто не обязательно)
Выравнивание<P ALIGN=LEFT|CENTER|RIGHT></P>
Новая строка <BR> (одиночный перевод строки)
Убрать выравнивание <BR CLEAR=LEFT|RIGHT|ALL>
Горизонтальный разделитель <HR>
Выравнивание<HR ALIGN=LEFT|RIGHT|CENTER>
Толщина<HR SIZE=?>(в точках)
Ширина <HR WIDTH=?> (в точках)
N1.0 Ширина в процентах <HR WIDTH="%"> (в процентах от ширины страницы)
Сплошная линия <HR NOSHADE> (без трехмерных эффектов)
N1.0 Нет разбивки <NOBR></NOBR> (запрещает перевод строки)
N1.0 Перенос <WBR> (где разбивать строку для переноса при необходимости)
Списки
Неупорядоченный <UL><LI></UL> (<LI> перед каждым элементом)
Компактный<UL COMPACT></UL>
Типметки<UL TYPE=DISC|CIRCLE|SQUARE> (длявсегосписка)
<LI TYPE=DISC|CIRCLE|SQUARE> (этот и последующие)
Нумерованый <OL><LI></OL> (<LI> перед каждым элементом) Компактный <OL COMPACT></OL>
Тип нумерации<OL TYPE=A|a|I|i|1> (для всего списка)
<LI TYPE=A|a|I|i|1> (этот и следующие)
Первый номер<OL START=?> (для всего списка)
<LI VALUE=?> (этот и следующие)
Список определений <DL><DT><DD></DL> (<DT>=термин, <DD>=определение) Компактный <DL COMPACT></DL>
Меню <MENU><LI></MENU> (<LI> перед каждым элементом)
Компактное<MENU COMPACT></MENU>
Каталог <DIR><LI></DIR> (<LI>перед каждым элементом)
Компактный<DIR COMPACT></DIR>
Фон и цвета
Фоновая картинка <BODYBACKGROUND="URL">
Цвет фона <BODY BGCOLOR="#$$$$$$"> (порядок: красный/зеленый/синий)
Цвет текста <BODY TEXT="#$$$$$$">
Цветссылки<BODY LINK="#$$$$$$">
Пройденная ссылка <BODY VLINK="#$$$$$$">
Активная ссылка <BODY ALINK="#$$$$$$">
Специальные символы(обязаны быть в нижнем регистре)
Специальный символ &#?; (где ? это код ISO 8859-1)
< <
> >
& &
" "
Торговая марка ТМ ®
Copyright ©
Неразделяющий пробел
Формы
Определитьформу<FORM ACTION="URL" METHOD=GET|POST></FORM>
N2.0 Посылкафайла<FORM ENCTYPE="multipart/form-data"></FORM>
Полеввода<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">
Имяполя<INPUT NAME="***">
Значение поля <INPUT VALUE="***">
Отмечен? <INPUT CHECKED> (checkboxes и radio boxes)
Размер поля <INPUT SIZE=?> (в символах)
Максимальная длина <INPUT MAXLENGTH=?> (в символах)
Списоквариантов<SELECT></SELECT>
Имясписка<SELECT NAME="***"></SELECT>
Числовариантов<SELECT SIZE=?></SELECT>
Множественний выбор <SELECT MULTIPLE> (можно выбрать больше одного)
Опция <OPTION> (элемент который может быть выбран)
Опцияпоумолчанию<OPTION SELECTED>
Ввод текста, размер <TEXTAREAROWS=? COLS=?></TEXTAREA>
Имятекста<TEXTAREA NAME="***"></TEXTAREA>
N2.0 Разбивканастроки<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
Таблицы
Определить таблицу <TABLE></TABLE>
Окантовкатаблицы<table border=?></TABLE>
Расстояние между ячейками <TABLE CELLSPACING=?>
Дополнение ячеек <TABLE CELLPADDING=?>
Желаемая ширина <TABLE WIDTH=?> (в точках)
Ширина в процентах <TABLE WIDTH="%"> (проценты от ширины страницы)
Строка таблицы <TR></TR>
Выравнивание <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> Ячейка таблицы <TD></TD> (должна быть внутри строки)
Выравнивание <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> Без перевода строки <TD NOWRAP>
Растягивание по колонке <TD COLSPAN=?>
Растягивание по строке <TD ROWSPAN=?>
N1.1 Желаемая ширина <TD WIDTH=?> (в точках)
N1.1 Ширина в процентах <TD WIDTH="%"> (проценты от ширины страницы)
N3.0b Цвет ячейки <TD BGCOLOR="#$$$$$$">
Заголовок таблицы <TH></TH> (как данные, но жирный шрифт и центровка)
Выравнивание <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> Без перевода строки <TH NOWRAP>
Растягивание по колонке <TH COLSPAN=?>
Растягивание по строке <TH ROWSPAN=?>
N1.1 Желаемая ширина <TH WIDTH=?> (в точках)
N1.1 Ширина в процентах <TH WIDTH="%"> (проценты ширины таблицы)
N3.0b Цветячейки<TH BGCOLOR="#$$$$$$">
Заглавиетаблицы<CAPTION></CAPTION>
Выравнивание<CAPTION ALIGN=TOP|BOTTOM> (сверху/снизутаблицы)
Фреймы
N2.0 Документсфреймами<FRAMESET></FRAMESET> (вместо<BODY>)
N2.0 Высота строк <FRAMESETROWS=,,,></FRAMESET>(точки или %)
N2.0 Высота строк <FRAMESET ROWS=*></FRAMESET>(* = относительный размер)
N2.0 Ширина колонок <FRAMESET COLS=,,,></FRAMESET>(точки или %)
N2.0 Ширина колонок <FRAMESET COLS=*></FRAMESET>(* = относительный размер)
N3.0b Ширинаокантовки<FRAMESET BORDER=?>
N3.0b Окантовка<FRAMESET FRAMEBORDER="yes|no">
N3.0b Цветокантовки<FRAMESET BORDERCOLOR="#$$$$$$">
N2.0 Определить фрейм <FRAME> (содержание отдельного фрейма)
N2.0 Документ <FRAME SRC="URL">
N2.0 Имя фрейма <FRAME NAME="***"|_blank|_self| _parent|_top>
N2.0 Ширина границы <FRAME MARGINWIDTH=?>(правая и левая границы)
N2.0 Высота границы <FRAME MARGINHEIGHT=?>(верхняя и нижняя границы)
N2.0 Скроллинг? <FRAME SCROLLING="YES|NO|AUTO">
N2.0 Постоянный размер <FRAME NORESIZE>
N3.0b Окантовка<FRAME FRAMEBORDER="yes|no">
N3.0b Цветокантовки<FRAME BORDERCOLOR="#$$$$$$">
N2.0 Содержание без фреймов <NOFRAMES></NOFRAMES>(для просмотрщиков не поддерживающих фреймы)
Язык
java
Applet <APPLET></APPLET>
Applet - имяфайла<APPLET CODE="***">
Параметры<APPLET PARAM NAME="***">
Applet - адрес<APPLET CODEBASE="URL">
Applet - имя <APPLET NAME="***"> (для ссылок из других частей страницы)
Альтернативный текст <APPLET ALT="***">(для программ не поддерживающих Java)
Выравнивание<APPLET ALIGN="LEFT|RIGHT|CENTER">
Размеры<APPLET WIDTH=? HEIGHT=?> (в точках)
Отступ<APPLET HSPACE=? VSPACE=?> (в точках)
Разное
Комментарий <!-- *** --> (игнорируется просмотрщиком)
Пролог HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> Поиск <ISINDEX> (означает начальную точку поиска)
Приглашение <ISINDEX PROMPT="***">(текст приглашения для поля ввода)
Запустить поиск<A HREF="URL?***"></a>(используйте действительно знак вопроса)
URL этого файла <BASE HREF="URL"> (должно быть в заголовке)
N2.0 Имя базового окна <BASE TARGET="***"> (должно быть в заголовке)
Отношение <LINK REV="***" REL="***" HREF="URL">(должно быть в заголовке)
Метаинформация <META> (должно быть в заголовке)
Стили <STYLE></STYLE> (часто не поддерживается)
Программа <SCRIPT></SCRIPT> (часто не поддерживается)