Тагов модель документа: "Елемент": = <"ім'я елемента" "список атрибутів"> зміст елемента </ "ім'я елемента" Структура документа Елемент 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> Приклад списку визначень Помилка! Закладка не визначена. <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> Помилка! Закладка не визначена. <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) << >> & & "" Торгова марка ТМ ® 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> Введення тексту, розмір <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> (часто не підтримується) |