Пример оформления документа

Списки

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

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: