Руководство по HTML

Руководство по 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:\www\doc2html\work\pictures\it\khramtsov\img00017.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:\www\doc2html\work\pictures\it\khramtsov\img00018.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>  

Фон и цвета 

				Фоновая картинка	<BODY BACKGROUND="URL">	

 Цвет фона <BODY BGCOLOR="#$$$$$$"> (порядок: красный/зеленый/синий)

Цвет текста <BODY TEXT="#$$$$$$"> 

Цвет ссылки <BODY LINK="#$$$$$$"> 

Пройденная ссылка <BODY VLINK="#$$$$$$"> 

Активная ссылка <BODY ALINK="#$$$$$$"> 

Специальные символы(обязаны быть в нижнем регистре) 

Специальный символ &#?; (где ? это код ISO 8859-1)

< &lt; 

> &gt; 

& &amp; 

" &quot; 

Торговая марка ТМ &reg; 

Copyright &copy; 

Неразделяющий пробел &nbsp; 



Формы 

Определить форму<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> 

Ввод текста, размер <TEXTAREA ROWS=? 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 Высота строк <FRAMESET ROWS=,,,></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> (часто не поддерживается)