Списки
Списки (list) были добавлены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу берет на себя программа. Если список добавляется новыми пунктами или укарачивается, нумерации корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружочки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, “фирменный вид”. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют использовать атрибуты), а другие задают его внутреннюю сторуктуру.
Существует несколько разновидностей списков.
<UL><LI></ul>
Самый простой ненумерованный список (unordered list).
Его шаблон представлен ниже:
<UL>
<LI> Пункт 1 списка
<LI> Пункт 2 списка
<LI> Пункт 3 списка
</ul><UL>
Элемент UL является своеобразным обрамлением списка.
|
|
Он позволяет отделять один список от другого.
Элемент LI обозначает каждый из пунктов.
<OL><LI></ol>
Структура нумерованного списка похожа на предыдущую:
<OL type=’’I’’>
<LI> Пункт 1
<LI> Пункт 2
<LI> Пункт 3
<LI> Пункт 4
</ol>
Нумерованный список использует другой внешний тег: OL. В этом случае каждый пункт нумеруется элементом упорядоченной последовательности: арабскими или римскими числами, буквами латинского алфавита.
Способ нумерации задается при помощи атрибута type.
В таблице приведены все способы нумерации.
Атрибут | Последовательность нумерации |
type=’’1’’ | 1, 2, 3, 4,... |
type=’’i’’ | i, ii, iii, iv,... |
type=’’I’’ | I, II, III, IV,... |
type=’’a’’ | a, b, c, d,... |
type=’’A’’ | A, B, C, D,... |
Списки с определениями (definition lists) создаются при помощи тегов трех видов:
<DL>
<DT> Пункт 1
<DD> Определение пункта 1
<DD> Другое определение пункта 1
<DT> Пункт 2
<DD> Определение пункта 2
<DT> Пункт 3
<DD> Определение пункта 3
</dl>
Другой способ создания сложных списков - использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня. Каждый из списков может быть создан и отлажен отдельно, а затем все составляющие могут быть объединены в один большой список.
В том случае, когда структура списка ясна, удобно воспользоваться шаблоном. В нем должны быть указаны все пункты на всех уровнях.
Доработка такого шаблона сводиться к вписыванию конкретных строк текста в соответствующие пункты.
|
|
Ниже дан пример такого шаблона:
<UL>
<LI> Пункт 1
<OL>
<LI> Пункт 1.1
<LI> Пункт 1.2
</ol>
<LI> Пункт 2
<OL>
<LI> Пункт 2.1
<LI> Пункт 2.2
</ol>
<LI> Пункт 3
<OL>
<LI> Пункт 3.1
<LI> Пункт 3.2
</ol>
</ul>
В нем нумерованные списки размещены внутри пунктов ненумерованного списка.
- Пункт 1
Пункт 1.1
Пункт 1.2
- Пункт 2
Пункт 2.1
Пункт 2.2
- Пункт 3
Пункт 3.1
Пункт 3.2
Таговая модель документа:
"элемент":= <"имя элемента" "список атрибутов"> содержание элемента </"имя элемента">
Структура документа
Элемент HTML или гипертекстовый документ состоит из двух частей:
· заголовка документа (HEAD)
· тела документа (BODY)
<HTML>
<HEAD>
Содержание заголовка
</HEAD>
<BODY>
Содержание тела документа
</BODY>
</HTML>
Элементы заголовка
TITLE> | поля документа |
<BASE> | базовый адрес |
<ISINDEX> | Поисковый документ |
<LINK> | общая гипертекстовая ссылка |
<META> |
Примеры элементов заголовка:
<TITLE> Название документа </TITLE>
<BASE HREF="https://polyn.net.kiae.su/>,
<A HREF="/altai/index.html">
<A HREF="https://polyn.net.kiae.su/altai/index.html">
<img SRC="/gif/test.gif">
<img SRC="https://polyn.net.kiae.su/gif/test.gif">
<ISINDEX HREF="https://polyn.net.kiae.su/cgi-bin/search" PROMPT="Enter Keywords:">
<LINK REL=Help HREF="https://polyn.net.kiae.su/dss/syshelp.html">
<LINK REL=Banner HREF=banner.html>
<META HTTP-EQUIV="Keywords"
CONTENT="Plasma, 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> | Текст, заключенный в скобки Вид скобок зависит от атрибута LAN | Реализован только в 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:\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Local Settings\pictures\it\khramtsov\img00017.gif
<A HREF="https://polyn.net.kiae.su/index.html">
Индекс базы данных "Полынь"</A>
<A NAME="point">
<A HREF="https://polyn.net.kiae.su/index.html#point">
Ссылка на точку "point" в документе "index.html"</A>
C:\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Application Data\Microsoft\Local Settings\pictures\it\khramtsov\img00018.gif
<img SRC="https://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 | описание элемента меню |