Керівництво по HTML

Тагов модель документа:

"Елемент": = <"ім'я елемента" "список атрибутів"> зміст елемента </ "ім'я елемента" Структура документа

Елемент HTML або гіпертекстовий документ складається з двох частин:

заголовка документа (HEAD)

тіла документа (BODY)

<HTML>

<HEAD>

Зміст заголовка

</ HEAD>

<BODY>

Зміст тіла документа

</ BODY>

</ HTML>

Елементи заголовку

<TITLE>	поля документа
<BASE>	базовий адресу
<ISINDEX>	пошуковий документ
<LINK>	загальна гіпертекстове посилання
<META>

Приклади елементів заголовка:

<TITLE> Назва документа </ TITLE>

<BASE HREF="http://polyn.net.kiae.su/>,

<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>

Приклад списку визначень

Помилка! Закладка не визначена.

Індекс бази даних "Полин" </ A>

Посилання на точку "point" в документі "index.html" </ A>

Помилка! Закладка не визначена.

Таблиці

<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	опис елемента меню

Приклад використання полів введення

<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> (у тому ж документі)

Визначити закладку <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)

& &

Торгова марка ТМ ®

Неподільні пробіл

Форми

Визначити форму <FORM ACTION="URL" METHOD=GET|POST> </ FORM>

N2.0 Здійснення файлу <FORM ENCTYPE="multipart/form-data"> </ FORM>

Ім'я поля <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> (часто не підтримується)