Смекни!
smekni.com

Руководство по HTML (стр. 1 из 2)

Руководство по 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:&bsol;www&bsol;doc2html&bsol;work&bsol;pictures&bsol;it&bsol;khramtsov&bsol;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:&bsol;www&bsol;doc2html&bsol;work&bsol;pictures&bsol;it&bsol;khramtsov&bsol;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> (без трехмерных эффектов)