Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
нумерованные списки;
маркированные списки (в HTML их принято называть ненумерованными);
списки определений позволяют составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
На странице «Программы» разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.
Тэги и атрибуты |
Обозначения |
<OL></OL> |
Сначала создадим главный нумерованный список основных категорий программного обеспечения. Список располагается внутри заданного контейнера. |
<LI> TYPE |
Каждый элемент списка определяется данным тэгом. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), «I» (римские цифры), «а» (строчные буквы) и др.
<HTML> <HEAD> <TITLE>Программное обеспечение </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Программное обеспечение </H1> </FONT> <HR> <P ALIGN="LEFT"> <OL> <LI> Системные программы <LI> Прикладные программы <LI> Системы программирования </OL> </P> </BODY> </HTML> |
<UL></UL> |
Создадим теперь вложенный ненумерованный список для одного из элементов основного списка. Список располагается внутри заданного контейнера, а каждый элемент списка определяется аналогично нумерованному списку. C помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc” (диск), “square” (квадрат) или “circle” (окружность). |
|
<UL> <LI TYPE=“square”> текстовые редакторы; <LI> графические редакторы; <LI> электронные таблицы; <LI> системы управления базами данных. </UL> |
<DL></DL> |
Страницу «Словарь» мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений. |
<DT> <DD> |
Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT>, и определения, которое следует за тэгом <DD>. |
|
Открыть в Блокноте файл glossary.htm, ввести заголовок «Компьютерные термины» и добавить следующий HTML-код, задающий список определений: <DL> <DT> Процессор <DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде. <DT> Оперативная память <DD> Устройство, в котором хранятся программы и данные </DL> |
|
Вставить на страницы «Программы» и «Словарь» гиперссылки на все страницы. |
Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок)
Цвет на Web-странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего).
Значение яркости цвета может меняться от минимальной 00 до максимальной FF/ в таблице приведены примеры некоторых цветов:
Цвет |
Код |
Название |
Цвет |
Код |
Название |
Черный |
#000000 |
Black |
Фиолетовый |
#FF00FF |
Magenta |
Белый |
#FFFFFF |
White |
Бирюзовый |
#00FFFF |
Cyan |
Красный |
#FF0000 |
Red |
Желтый |
#FFFF00 |
Yellow |
Зеленый |
#00FF00 |
Lime |
Золотой |
#FFD800 |
Gold |
Синий |
#0000FF |
Blue |
Оранжевый |
#FFA500 |
Orange |
Серый |
#808080 |
Gray |
Коричневый |
#A82828 |
Brown |
Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:
Тэги и атрибуты |
Обозначения |
BGCOLOR="#RRGGBB" |
Цвет фона |
BACKGROUND=”file_name” |
Текстура фона |
TEXT=="#RRGGBB" |
Цвет текста |
LINK="#RRGGBB" |
Цвет текста ссылки |
ALINK="#RRGGBB" |
Цвет текста активной ссылки |
VLINK="#RRGGBB" |
Цвет текста просмотренной ссылки |
При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы могут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон – темный текст, или темный фон – светлый текст. Нежелательны буквы белого цвета – они могут оказаться невидимыми при печати страницы на принтере.
Для оформления страницы о компьютерах можно использовать следующую цветовую схему:
<BODY BGCOLOR="#00FFFF" BACKGROUND="fon.png" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000">
Для фона можно найти в папке Мои рисунки фотографию, открыть в графическом редакторе и сохранить в формате png или gif.
Таблицы
Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.
Таблицу формируют несколько различных тэгов.
Тэги и атрибуты |
Обозначения |
<TABLE> </TABLE> |
Внутри заданного контейнера содержится описание структуры таблицы и ее содержания |
<TR> /TR> |
Любая таблица состоит из строк, которые задаются данным контейнером. |
<TD> /TD> |
В этом контейнере формат ячеек и их содержание. |
<TH> </TH> |
В этом – заголовки ячеек. |
BORDER |
Толщина разделительных линий в таблице задается с помощью этого атрибута. |
ALIGN |
Для выравнивания информации внутри ячейки по горизонтали применяют этот атрибут. |
Чтобы разобраться в устройстве таблицы, рассмотрим простой пример:
Примечание: В данном примере создана таблица с фиксированной шириной (WIDTH="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменяться в зависимости от размера окна. |
Такая таблица реализуется следующим кодом: <TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00"> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE> |
||||
Таблица может включать следующие атрибуты: WIDTH="n" |
Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек. |
||||
BORDER="n" |
Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки. |
||||
BORDERCOLOR="#FFFFFF" |
Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатеричное значение цвета. |
||||
BGCOLOR="#FFFFFF" |
Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатеричное число. |
||||
BACKGROUND="image.gif" |
Заполняет фон таблицы изображением. |
||||
CELLSPACING="n" |
Определяет расстояние между рамками ячеек таблицы в пикселях. |
||||
CELLPADDING="n" |
Определяет расстояние в пикселях между рамкой ячейки и текстом. |
||||
ALIGN= “LEFT” |
Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа). |
||||
FRAME="значение" |
Управляет внешней окантовкой таблицы, может принимать следующие значения: VOID - окантовки нет (значение по умолчанию). ABOVE - только граница сверху. BELOW - только граница снизу. HSIDES - границы сверху и снизу. VSIDES - только границы слева и справа. LHS - только левая граница. RHS - только правая граница. BOX - рисуются все четыре стороны. BORDER - также все четыре стороны. |
||||
RULES="n" |
Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n): NONE - нет линий (значение по умолчанию). GROUPS - линии будут только между группами рядов. ROWS - только между рядами. COLS - только между колонками. ALL - между всеми рядами и колонками. |
Таблица может включать заголовок, который располагается между тэгами <CAPTION></CAPTION>. Он должен быть непосредственно после тэга <TITLE>. К заголовку возможно применение атрибута ALIGN, определяющего его положение относительно таблицы:
TOP - значение по умолчанию, заголовок над таблицей по центру. LEFT - заголовок над таблицей слева. RIGHT - заголовок над таблицей справа. BOTTOM - заголовок под таблицей по центру.
Следующие атрибуты могут применяться для строк и ячеек. |
|
ALIGN=”LEFT “ |
Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо). |
VALIGN=”CENTER“ |
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю). |
BGCOLOR="#FFFFFF" |
Устанавливает цвет фона строки или ячейки. |
BACKGROUND="image.gif" |
Заполняет фон строки или ячейки изображением. |
Следующие атрибуты могут применяться только для ячеек. |
|
WIDTH="n" |
Определяет ширину ячейки в n пикселях. |
HEIGHT="n" |
Определяет высоту ячейки в n пикселях. |
COLSPAN="n" |
Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки. |
ROWSPAN="n" |
Растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы. |
NOWRAP |
Присутствие этого атрибута показывает, что текст должен размещаться в одну строку |
BACKGROUND="image.gif" |
Заполняет фон ячейки изображением. |
Кроме этого, любая ячейка таблицы может быть определена не тэгами <TD></TD>, а тэгами <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тэгов будет выделен полужирным шрифтом и отцентрирован.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет ( - обязательно должен набираться строчными буквами и закрываться точкой с запятой).
И еще - имейте в виду, что тэги, устанавливающие шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.
Конец формы
Создать таблицу о комплектующих компьютера и внести данные в таблицу. Например, так:
Процессор |
Монитор |
Клавиатура |
Оперативная память |
Мышь |
|
|
|
|
|