Урок 6

Тема: цвет фона и текста, шрифты.

Цвет фона определяется значением атрибута BGCOLOR - шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета, вторая - для зеленого, и третья пара - для синего цвета. #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA и т.п - одно из шестнадцати допустимых значений.

  BLACK#000000   GREEN#008000
  SILVER#C0C0C0   LIME#00FF00
  GRAY#808080   OLIVE#808000
  WHITE#FFFFFF   YELLOW#FFFF00
  MAROON#800000   NAVY#000080
  RED#FF0000   BLUE#0000FF
  PURPLE#800080   TEAL#008080
  FUCHSIA#FF00FF   AQUA#00FFFF

Например, чтобы сделать цвет фона страницы фиолетовым, можно написать

<BODY BGCOLOR="#FF00FF">, а можно и так:
<BODY BGCOLOR="PURPLE">.

Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их "знают". Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).

Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется атрибут BACKGROUND с указанием пути к рисунку. Например

<BODY BACKGROUND="graph/picture.gif">

Аттрибуты BGCOLOR и BACKGROUND могут находиться внутри метки <BODY>, тогда цвет фона устанавливается для всей страницы, либо в метках <TABLE>, <TR> и <TD> - устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответсвенно (таблицы - тема следующего урока).

Для изменения цвета и размера шрифта используется метка <FONT></FONT>. Ее атрибуты:

Пример использования метки <FONT>:

<FONT SIZE="5" COLOR="RED" FACE="SANS-SERIF">Крупный шрифт красного цвета без засечек</FONT>

В окне браузера увидите Крупный шрифт красного цвета без засечек

Для размещения текста в верхнем или нижнем регистре используются соответственно метки <SUP>..</SUP> (superscript) и <SUB>..</SUB> (subscript). Пример их использования:

в тексте: в окне браузера:
E=mc<SUP>2</SUP> E=mc2
2<SUP>x+2</SUP>=64 2x+2=64
H<SUB>2</SUB>O H2O

Тэг BODY может содержать атрибут TEXT, который определяет цвет шрифта для всей страницы. Значение атрибута - шестнадцатиричное значение цвета или текстовое. <BODY TEXT="NAVY"> устанавливает цвет шрифта на странице темно-синим.

Также в тэге BODY можно определить каким цветом на вашей странице будут выделяться ссылки. Это атрибуты:

   Урок 7

Тема: таблицы.

Для чего нужны таблицы? Ответ на этот вопрос очевиден: для представления данных в табличном виде. Но не только.
До сих пор мы имели дело с документами, в которых существовал только один поток текста.На практике же порой хочется расположить текст в несколько колонок. В этом нам может помочь таблица.
В таблице может размещаться не только текст...
...но и
 или картинки		Таблицы позволяют достаточно точно контролировать расположение элементов на странице!

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

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

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


<TABLE BORDER="1" WIDTH="200" 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> может включать следующие атрибуты:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Урок 8

Тема: списки.

Использование списков позволяет более удобно и наглядно представлять текст в окне браузера. Язык HTML поддерживает ненумерованные и нумерованные списки, списки определений.

Ненумерованный список определяется метками <UL></UL>. Нумерованный - метками <OL></OL>. Элементы списка отмечаются метками <LI>. В нумерованном списке элементы нумерует сам браузер. Примеры:

<UL>Список коней:
<LI>Сивка
<LI>Бурка
<LI>вещая Каурка
</UL> 		<OL>Список коней:
<LI>Сивка
<LI>Бурка
<LI>вещая Каурка
</OL>
Это дает на экране следующие списки:
    Список коней:
  • Сивка
  • Бурка
  • вещая Каурка
    Список коней:
  1. Сивка
  2. Бурка
  3. вещая Каурка

Заметим, метка <LI> непарная - т.е. метки </LI> не существует.

Список определений ограничивается метками <DL></DL>. Элементы списка отмечаются следующим образом: меткой <DT> - определяемое слово или выражение, меткой <DD> - само определение. Пример:

<DL>Расшифровка меток:
<DT>UL<DD>unordered list - ненумерованный список
<DT>OL<DD>ordered list - нумерованный список
<DT>LI<DD>list item - элемент списка
<DT>DL<DD>definition list - список определений
<DT>DT<DD>definition term - определяемый термин
<DT>DD<DD>definition description - описание определения
</DL>

Результат на экране:

Расшифровка меток:
UL
unordered list - ненумерованный список
OL
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 устанавливаются в зависимости от степени вложенности списка.

   Урок 9

Тема: &-последовательности, комментарии.

Как уже упоминалось, такие знаки как "<", ">", двойные кавычки и амперсанд ("&") используются в HTML для выделения тэгов, определения адресов, значений атрибутов и т.п. Поэтому при просмотре документа браузером эти знаки не видны на экране. Если же их надо отобразить на экране, то используют так называемые &-последовательности:

<
последовательность &lt; (от английского "less than");
>
последовательность &gt; (от "greater than");
"
(двойные кавычки) последовательность &quot; (от "quotations mark");
&
последовательность &amp; (от "ampersand").

Внимание! &-последовательности должны набираться только в нижнем регистре (никаких &LT; или &QUOT; быть не должно!), и точка с запятой в конце последовательности обязательна.

Пример. Чтобы пользователь увидел на экране крейсер "Аврора", в HTML-документе должен быть следующий код: крейсер &quot;Аврора&quot;

Вообще &-последовательностей гораздо больше. Здесь стоит упомянуть еще о таких:

&nbsp;
(nonbreaking space) - неразрывный пробел. Браузеры игнорируют множественные обычные пробелы, этот же будет показан. Также используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP&nbsp;100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следущую, например, при изменении шрифта или размера окна браузера);
&copy;
© (copyright) - авторские права (или как порой шутят: "скопировано правильно");

&reg;
® (registered trademark) - зарегистрированный товарный знак.

Куда и к какой теме пристроить следующий материал я так и не смог придумать, поэтому добавил к этому уроку. Это комментарии. Текст, расположенный между в HTML-документе <!-- и --> не будет отображен на экране при просмотре, а будет виден лишь при редактировании документа. Пример:

<!-- Это мой комментарий -->
<!-- А этот комментарий занимает в тексте
       несколько
            строк -->

Не допустите ошибку! В комментариях не допускается вставлять два и более дефисов подряд: -- или ----- (разные браузеры по разному реагируют на это).

О найденных ошибках и неточностях сообщайте, пожалуйста, по адресу zhunya@mail.ru
Спасибо!

Сайт создан в системе uCoz