Ordered list - нумерованный список

LI

List item - элемент списка

DL

Definition list - список определений

DT

Definition term - определяемый термин

DD

definition description - описание определения

Обратите внимание, метки <DT> и <DD> также, как и <LI>, не имеют парных закрывающих меток. В метке <DL> можно использовать аттрибут COMPACT, если его применить в предыдущем примере (<DL COMPACT>), то результат выглядел бы так:

Расшифровка меток:

UL

Unordered list - ненумерованный список

OL

Ordered list - нумерованный список

LI

List item - элемент списка

DL

Definition list - список определений

DT

Definition term - определяемый термин

DD

definition description - описание определения

Списки могут быть произвольно вложены (разумно ограничиться тремя уровнями вложения). Каждый элемент списка может содержать несколько абзацев.

В списках могут использоваться следующие аттрибуты:

TYPE - определяет стиль представления элементов списка (для меток <UL> и <OL>), подробнее ниже;
START - (только для нумерованного списка <OL>) определяет значение первого элемента списка. По умолчанию 1. Обратите внимание, что несмотря на то, что значение аттрибута - всегда числовое значение, элемент списка может быть быть нечисловым - в зависимости от значения аттрибута TYPE;
VALUE - (только для метки <LI>) устанавливает номер текущего элемента списка. Как и в предыдущем случае элемент списка может быть нечисловым, хотя его значение - всегда число.

Значение аттрибута TYPE для ненумерованного списка может быть следующим:

DISC

SQUARE

CIRCLE

Для нумерованного списка значение аттрибута TYPE может быть одним из следующих:

Значение TYPE	Стиль представления элемента списка
1	арабские цифры	1,2,3,...
a	строчные буквы	a,b,c,...
A	прописные буквы	A,B,C,...
i	римские цифры	i,ii,iii,...
I	римские цифры	I,II,III,...

По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.

ТАБЛИЦЫ

Таблица 1.
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Такая табличка реализуется следующим кодом:

<TABLE BORDER="1" BGCOLOR="#A0DDA0"> <CAPTION>Таблица 1.</CAPTION> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE>

Таблица начинается с метки <TABLE> и заканчивается </TABLE>. Метка <TABLE> может включать следующие аттрибуты:

• WIDTH="n" - определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;
• ALIGN=LEFT - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);
• BORDER="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;
• BORDERCOLOR="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;
• CELLSPACING="n" - определяет расстояние между рамками ячеек таблицы в пикселах;
• CELLPADDING="n" - определяет расстояние в пикселах между рамкой ячейки и текстом;
• BGCOLOR="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.
• BACKGROUND="picture.gif" - заполняет фон таблицы изображением;
• FRAME="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:
• VOID - рамки нет (значение по умолчанию);
• ABOVE - рисуется только граница сверху;
• BELOW - только граница снизу;
• HSIDES - границы сверху и снизу;
• VSIDES - только границы слева и справа;
• LHS - только левая граница;
• RHS - только правая граница;
• BOX - рисуются все четыре стороны;
• BORDER - также все четыре стороны.
• RULES="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения:
• NONE - нет линий (значение по умолчанию);
• GROUPS - линии будут только между группами рядов (THEAD, TFOOT, TBODY) и группами колонок (COLGROUP, COL) - о группах рассказано ниже;
• ROWS - только между рядами;
• COLS - только между колонками;
• ALL - между всеми рядами и колонками.

Таблица может иметь заголовок - метки <CAPTION> и </CAPTION>. Располагаться он должен непосредственно после метки <TITLE... >. Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы:

TOP	- значение по умолчанию, заголовок над таблицей по центру;
LEFT	- заголовок над таблицей слева;
RIGHT	- заголовок над таблицей справа;
BOTTOM	- заголовок под таблицей по центру.

Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь аттрибуты:

• ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);
• - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);
• BGCOLOR="#hhhhhh" - устанавливает цвет фона для строки.
• BACKGROUND="picture.gif" - заполняет фон строки изображением.

Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие ттрибуты:

• ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);
• - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);
• WIDTH="n" - определяет ширину ячейки в n пикселов;
• HEIGHT="n" - определяет высоту ячейки в n пикселов;
• COLSPAN="n" - устанавливает "размах" ячейки по горизонтали. Т.е. COLSPAN="3", например, означает, что ячейка будет простираться на 3 колонки;
• ROWSPAN="n" - устанавливает "размах" ячейки по вертикали. ROWSPAN= "2" означает, что ячейка занимает две строки таблицы;
• NOWRAP - присутствие этого аттрибута показывает, что текст должен размещаться в одну строку;
• BGCOLOR="#hhhhhh" - устанавливает цвет фона ячейки;
• BACKGROUND="picture.gif" - заполняет фон ячейки изображением.

Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.

Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:
<THEAD>...</THEAD> - здесь объединяются ячейки верхнего заголовка таблицы;
<TFOOT>...</TFOOT> - ячейки нижнего заголовка таблицы;
<TBODY>...</TBODY> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп TBODY).
Каждая группа должна содержать хотя бы один ряд TR. Группа TFOOT должна находиться до TBODY, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все гуппы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков. К сожалению, большинство браузеров пока не поддерживают эту функцию. Можно использовать группы рядов для рисования линий только между ними (а не между всеми рядами), или выборочного форматирования частей таблицы (горизонтальное, вертикальное выравнивание содержимого ячеек).

Столбцы таблицы также могут быть объединены в группы при помощи меток <COLGROUP> и <COL>. Метка COLGROUP позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута RULES элемента TABLES. Метка COL позволяет применить какие-либо аттрибуты (выравнивание и т.п.) к нескольким столбцам не объединяя их в структурную группу.

<COLGROUP> может содержать следующие аттрибуты:

• SPAN=n - в группе n столбцов (по умолчанию n=1). Браузер проигнорирует это значение, если между <COLGROUP> и <COL> есть хотя бы один элемент <COL>;
• WIDTH=n - ширина столбцов в группе. Значение n может задаваться в пикселах, процентах. Может быть задано относительным значением, а также иметь значение "0*", т.е. столбцы будут минимальной ширины, исходя из размеров содержимого ячеек;
• ALIGN, VALIGN - выравнивание содержимого ячеек.

<COL> содержит те же аттрибуты, что и <COLGROUP>. Если ширина столбцов задана и в COL, и в COLGROUP, то выбирается значение метки COL. Метка <COL> непарная, т.е. закрывающего тэга у нее нет.

Пример. Будет создана таблица шириной в 20 столбцов. Первый столбец будет 40 пикселов шириной с выравниванием влево. Второй - минимально возможной ширины с выравниванием по центру. Остальные 18 - шириной в 20 пикселов и выравниванием по центру.

<TABLE> <COLGROUP ALIGN="CENTER"> <COL ALIGN="LEFT"> <COL WIDTH="0*"> <COL SPAN="18"> </COLGROUP> <TR>.....Содержимое таблицы...... </TABLE>

К сожалению, браузеры Netscape поддерживают далеко не все возможности таблиц. В результате таблица, которая отлично выглядит в Microsoft Explorer, в Netscape может оказаться вообще без рамок.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект &nbsp; (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; - обязательно должен набираться строчными буквами и закрываться точкой с запятой).

Любая ячейка таблицы может содержать в себе еще одну таблицу.

Возможные ошибки в таблицах:

• Метки, устанавливающие шрифт (<B>, <I>, даже <FONT SIZE="n", FONT COLOR="#hhhhhh"), необходимо повторять для каждой ячейки. Нельзя установить шрифт сразу для всей таблицы.
• Таблица - конструкция нежная. При потере только одной метки <TR> она может повести себя непредсказуемо. Отсутствие метки </TABLE> может привести к тому, что вся таблица вообще исчезнет с экрана.

Рисунки.

В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями.gif) и JPEG (файлы с расширениями.jpg и.jpeg) и строчка HTML-тексте, указывающая браузеру, где этот рисунок находится:

<IMG SRC="picture.gif"> - рисунок "picture.gif" находится в том же каталоге, что и текущий документ;
<IMG SRC="images/picture.gif"> - перейти в подкаталог "images" текущего каталога и взять файл оттуда;
<IMG SRC="../images/picture.gif"> - подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;
<IMG SRC="http://www.fortunecity.com/business/fax/339/artics/practic/myphoto.gif"> - указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.

У данного тэга могут быть следующие аттрибуты:

• ALT="какой-то текст" - альтернативный текст. Текст, который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений (отключают многие - для экономии времени на медленных линиях связи).
• BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0" рамка не рисуется.
• WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).
• HEIGHT="n" - высота изображения в пикселях или в процентах от высоты экрана.
• HSPACE="n" - отступ слева и справа от картинки шириной в n пикселей (т.е. свободное пространство между рисунком и текстом или чем-то иным).
• VSPACE="n" - вертикальный отступ от картинки в пикселях.
• ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя атрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка (CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение атрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.

Значения n перечисленных выше атрибутов по умолчанию равны нулю.

Рисунок может быть ссылкой. Для этого <IMG SRC="..."> разместите между тэгами <A HREF="..."> и </A>. Вокруг рисунка появится рамка, показывающая, что он является ссылкой. Если рамка портит внешний вид документа, то укажите в атрибутах рисунка BORDER="0".

 

 

Что такое CSS и для чего это нужно? CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл - описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т.е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!

Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:

<HTML><HEAD><TITLE>Изучим таблицы стилей!</TITLE></HEAD><BODY><H1>Большой заголовок</H1><H2>Заголовок поменьше</H2><P>А это уже абзац - самый обычный абзац.</P></BODY></HTML>

А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг <STYLE>:

<STYLE TYPE="text/css"><!--H1 { font-size: 40px; background: red; text-align: right;font-family: helvetica, arial, sans-serif }H2 { font-size: 20px; font-style: italic; font-family: helvetica, arial, sans-serif }P { background: silver; text-align: center; font-family: courier, fixed,monospace }--></STYLE>

Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример в действии.

Теперь разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация в комментарии (между "<!--" и "-->") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг <STYLE> и содержимое комментария, и ваша страница будет показана как самая обычная HTML-страница. Строка H1 указывает браузеру, что всякий текст, находящийся между метками <H1> и </H1>, должен отображаться шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и быть выровнен вправо. Строка H2 определяет, что шрифт в заголовках <H2> должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И, наконец, строка P определяет поведение всех абзацев на странице: на сером фоне, выровнены по центру, шрифт - courier, fixed или monospace.

Вот и все. Как говорится, просто и со вкусом. Таким образом вы можете управлять проактически всем, что появляется на вашей странице. Т.е. практически любому тегу можно придать новые свойства. А теперь подробнее.

Font-family - шрифт, используемый для отображения данного элемента. В идеале, конечно, было бы неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер просматривает этот список пока не встретит имеющийся в наличии шрифт. Например, компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: "P { font-family: arial, helvetica, sans-serif }"

Font-size - размер шрифта. Может указываться в точках (pt), пикселах (px).

Font-style: italic - курсив (наклонный шрифт).

Font-weight: bold - жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.

Text-transform - преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т.е. никаких действий).

Text-decoration - выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none(ничего). Например, чтобы ссылки в тексте не выделялись подчеркиванием, можно включить в заголовок документа следующий текст:

<STYLE TYPE="text/css"><!--a:link {text-decoration: none}a:visited {text-decoration: none}a:active {text-decoration: none}--></STYLE>

Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE...будут опускаться):

body {color: black}a:link {color: black; text-decoration: none}a:visited {color: black; text-decoration: none}

Т.е. цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).

Background-color - определяет цвет фона для какого-либо элемента. Например:

strong {background-color: yellow}

Текст между метками <STRONG> и </STRONG> будет показан на желтом фоне.

Background-image - позволяет сделать фон в виде рисунка. Пример:

blockquote {background-image: url(../pictures/million.jpg)}

В результате цитаты (т.е. текст между метками <BLOCKQUOTE> и </BLOCKQUOTE>) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.

Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:

IMG {text-align: center}

Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):

p {text-indent: 10pt}

Margin - устанавливает отступ текста. Пример использования:

body {margin-left: 10pt; margin-right: 15pt}

В результате текст на странице будет отступать слева на 10 точек от края страницы, справа - на 15 точек. Также возможны варианты: margin-top (отступ сверху) и margin-bottom (отступ снизу).

Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:

• border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
• border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
• border-style - стиль рамки. Может иметь следующие значения:

Значение	Описание	Вид рамки (в вашем браузере!)
dashed	пунктирная - в виде черточек	dashed
dotted	пунктирная - в виде точек	dotted
double	двойная линия	double
inset	с эффектом вдавленности	inset
outset	с эффектом выпуклости	outset
ridge	выпуклая рамка	ridge
groove	врезанная рамка	groove
solid	непрерывная линия	solid

Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:

blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double }

Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела.

А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с необходимыми свойствами. Например:

<P STYLE="text-indent: 15pt; color: red; background-color: white">
или
<H3 STYLE="background-color: silver; border-width: 3px; border-style: groove;
border-color: #F0F0F0; text-align: center">

Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать аттрибут STYLE каждый раз, можно поступить следующим образом: определить в заголовке документа в тэге STYLE необходимый стиль и дать ему название, например:

<style type="text/css"><!--.krasota {text-indent: 20px; background-color: aqua; color: purple;}--></style>

Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:

<P CLASS="krasota">

И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением.css (например, "stili.css"). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции HEAD) и имеет такой вид:

<LINK REL=stylesheet HREF="stili.css" TYPE="text/css">

Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!

Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в.css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например, <P STYLE= ".......">), то к данному тэгу будет применяться второй стиль.

 

 

 Формы

 

В следующем примере показана форма, которая должна обрабатываться программой "adduser". Эта форма будет отправляться с использованием метода HTTP "post".

 <FORM action="http://somesite.com/prog/adduser" method="post"> ...содержимое формы... </FORM>

В следующем примере показана отправка формы на адрес электронной почты:

 <FORM action="mailto:[email protected]" method="post"> ...содержимое формы... </FORM>