Руководство по HTML
СОДЕРЖАНИЕ: Руководство по 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
LHTitle of WWW programmes (NCSA).
LI NCSA HTTPD;
LI NCSA MOSAIC
UL
LHTitle 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
LITitle of WWW programmes (NCSA).
UL
LI NCSA HTTPD;
LI NCSA MOSAIC
/UL
LITitle 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
LITITLE
LIBASE
LILINK
/OL
LIЭлементы тела документа
OL
LIBODY
LIHeading
LIParagraph
LILine Break
LIHorizontal 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.htmlimg SRC=icon.gif ALIGN=MIDDLE/A
Таблицы
TABLE BORDER
CAPTIONA test table with merged cells. CREDIT (T.Berners Lee/WWWC,1995.)/CREDIT /CAPTION
TRTH ROWSPAN=2TH COLSPAN=2Average
TH rowspan=2otherBRcategoryTH ROWSPAN=2Misc/TR
TRTHheightTHweght/TR
TRTH ALIGN=leftmalesTD1.9TD0.003
TRTH ALIGN=leftfemalesTD1.7TD0.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=textBR
Полетипа checkbox: INPUT NAME=test2 TYPE=checkbox CHECKEDBR
Полетипа radiobutton: INPUT NAME=test3 TYPE=radioBR
Полетипа password: INPUT NAME=test4 TYPE=passwordBR
Невидимоеполе: INPUT NAME=test5 TYPE=hidden VALUE=kukuBR
Кнопка Submit: INPUT NAME=submit VALUE=Submit TYPE=submitBR
Кнопка Reset: INPUT NAME=reset VALUE=Reset TYPE=resetBR
Графическаякнопка: INPUT NAME=graph VALUE=default SRC=test.gif TYPE=imageBR
/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=URLALIGN=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 (где разбивать строку для переноса при необходимости)
Списки
Неупорядоченный ULLI/UL (LI перед каждым элементом)
КомпактныйUL COMPACT/UL
ТипметкиUL TYPE=DISC|CIRCLE|SQUARE (длявсегосписка)
LI TYPE=DISC|CIRCLE|SQUARE (этот и последующие)
Нумерованый OLLI/OL (LI перед каждым элементом) Компактный OL COMPACT/OL
Тип нумерацииOL TYPE=A|a|I|i|1 (для всего списка)
LI TYPE=A|a|I|i|1 (этот и следующие)
Первый номерOL START=? (для всего списка)
LI VALUE=? (этот и следующие)
Список определений DLDTDD/DL (DT=термин, DD=определение) Компактный DL COMPACT/DL
Меню MENULI/MENU (LI перед каждым элементом)
КомпактноеMENU COMPACT/MENU
Каталог DIRLI/DIR (LIперед каждым элементом)
КомпактныйDIR COMPACT/DIR
Фон и цвета
Фоновая картинка BODYBACKGROUND=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
Ввод текста, размер 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 (часто не поддерживается)