Приглашаем посетить

Шолохов (sholohov.lit-info.ru)

Язык гипертекстовой разметки HTML

Павел Храмцов

Таговая модель документа
Структура документа
Элементы заголовка
Основные классы элементов тела
Элементы стиля
Информационные элементы
Управление отображением стиля символов текста
Отображение ненумерованного списка
Вложенные ненумерованные списки
Вложенные нумерованные списки
Гипертекстовые контекстные ссылки
Элемент img
Таблицы
Формы
Элемент TEXTAREA

Задачи разработки HTML:

дать дизайнерам гипертекстовых баз данных простое средство создания документов
сделать это средство достаточно мощным, чтобы отразить имеющиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных

Способ представления документа - текстовый файл:

такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде любой операционной системы
к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем - Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII

Версии языка:

HTML 1.0 - была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер
HTML 2.0 - фиксировала практику использования конструкций языка
HTML++ - новые возможности
HTML 3.0 - призвана упорядочить все нововведения и согласовать их с существующей практикой

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

"элемент" := <"имя элемента" "список атрибутов"> содержание элемента </"имя элемента">

Структура документа

Элемент 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>
<TT>...</TT>	Телетайп
<U>...</U>	Подчеркивание
<S>...</S>	Перечеркнутый текст	Только Arena при наличии соответствующего фонта
<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>	Имя персоны
<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>
<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>

Title of WWW programmes (NCSA).

NCSA HTTPD;

NCSA MOSAIC

Title of WWW programmes (CERN).

AGORA - email robot;

HTTPD CERN;

WWW Line Browser;

Arena.

Netsite - server;

Netscape Novigator.

Вложенные ненумерованные списки

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

- NCSA HTTPD;
- NCSA MOSAIC
Title of WWW programmes (CERN).
- CERN HTTPD;
- HTTPD CERN;
- WWW Line Browser;
- Arena.
Title of WWW programmes (Netscape).
- Netscape Novigator.

Вложенные нумерованные списки

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

Нумерованный список

TITLE
BASE
LINK

Элементы тела документа

Heading
Paragraph
Line Break
Horizontal Rule
...

<A HREF="#point">Индекс базы данных "Полынь"</A>
<P><A NAME="point">
Ссылка на точку "point" в документе </A>

Индекс базы данных "Полынь"

Ссылка на точку "point" в документе "index.html"

Элемент img

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

A test table with merged cells.(T.Berners Lee/WWWC,1995.)
	Average>
	height	weght
males	1.9	0.003
	1.7	0.002

Формы

Элемент	Назначение
INPUT	поля ввода информации имеют множество типов
	поле ввода многострочного текста
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>

Элемент TEXTAREA

<TEXTAREA NAME="multi" ROWS=5 COLS=20>
This is a test 
TEXTAREA элемент
</TEXTAREA>

Язык гипертекстовой разметки HTML