- •1. Основные понятия
- •Структурные тэги
- •Тэги разметки
- •2.1. Тэги форматирования текста
- •2.4. Тэг преформатирования
- •2.5. Цветовая гамма html-документа
- •4. Гиперссылки в нтмl – документе. Изображения Использование гиперссылок
- •Добавление графических изображений в html-документы
- •Height указывает высоту изображения в пикселях или процентах
- •5. Таблицы
- •6. Формы
- •Как устроена форма
- •Простейшая форма
- •Как форма собирает данные
- •7. Фреймы
- •Типовое задание
- •Литература
- •Приложение2 Краткая справка тэгов
2.5. Цветовая гамма html-документа
Использование атрибута color дает возможность задавать цвет текста (шрифта). Атрибутcolor может использовать либо название цвета, либо его шестнадцатеричную форму. Цвет кодируется последовательностью из трех пар символов по схемеR,G,B (Red,Green,Blue– красный, зеленый, синий). Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета в диапазоне от нуля (00 – самая маленькая насыщенность) до 255 (FF – самая большая насыщенность). Перед шестнадцатеричным кодом цвета ставится знак "решетка" (#). Цвет "#000000" – черный, а "#ffffff" – белый.
Например: <font color="red">, либо < font color="#ff0000"> , что означает одно и то же.
Некоторые цвета, их название и шестнадцатеричный код приведены в таблице:
-
Код
Цвет
Значение
#000000
ЧЕРНЫЙ
black
#FFFFFF
БЕЛЫЙ
white
#FF0000
КРАСНЫЙ
red
#008000
ЗЕЛЕНЫЙ
green
#0000FF
СИНИЙ
blue
#808000
ОЛИВКОВЫЙ
olive
#FFFF00
ЖЕЛТЫЙ
Yellow
#C0C0C0
СЕРЕБРИСТЫЙ
Silver
#808080
СЕРЫЙ
Gray
#FF00FF
ФУКСИНОВЫЙ
Fuchsia
#000080
УЛЬТРАМАРИН
Navy
#008080
СИЗЫЙ
Teal
#00FF00
СВЕТЛО-ЗЕЛЕНЫЙ
Lime
#800080
ПУРПУРНЫЙ
Purple
#800000
КАШТАНОВЫЙ
maroon
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри тэга <body>. Вот список этих атрибутов:
text определяет цвет текста документа;
link определяет цвет гиперссылки - выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;
vlink определяет цвет гиперссылки, которая уже была просмотрена;
alink определяет цвет гиперссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Например:<body bgcolor="#ffffff" text="#ff0000" link="#00ff00">определяет красный текст на белом фоне и зеленые ссылки.
Кроме того, тэг <body>может включать атрибутbackground="URL", который задает изображение, служащее фоном для страницы. ЗдесьURL– это адрес файла, содержащего фоновый рисунок. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением*.gif) или JPEG (файл с расширением*.jpgили*.jpeg).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.
Списки
Списки бывают следующих видов:
нумерованные;
ненумерованные (маркированные):
вложенные.
Нумерованный список – это текст, заключенный в тэги <ol>... </ol>. Каждый новый элемент списка нужно начинать с тэга <li>. Этот тэг является непарным. В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если один или несколько элементов списка удалить, то остальные будут автоматически перенумерованы.
Пример.
<p> Виды программного обеспечения: <br>
<ol>
<li>Системное
<li>Прикладное
<li>Инструментальное
</ol>
</p>
В окне браузера будет отображено следующее:
Виды программного обеспечения:
Системное
Прикладное
Инструментальное
Тэг <ol> может иметь дополнительные атрибуты
<ol type=A|a|I|i|1 start=n>
где type– вид нумерации, который может принимать следующие значения:
A– заглавные латинские буквы (A,B,C…);
a– строчные латинские буквы (a,b,c…);
I– большие римские цифры (I,II,III…);
i– маленькие римские цифры (i,ii,iii…);
1 – арабские цифры (1, 2, 3…) – установлен по умолчанию.
start=n– задает начальное значение числовой нумерации.
Ненумерованный список–это текст, заключенный в тэги <ul> ... </ul>. Каждый новый элемент списка начинается с тэга <li>. При просмотре в браузере каждый элемент такого списка помечается специальным значком – маркером, вид которого можно задать при помощи атрибута тэга <ul>:
<ul type=disc|circle|square> , что приводит к маркерам следующих видов:,(установлен по умолчанию),.
Вложенный список– это комбинация нумерованного и маркированного списков, вложенных друг в друга. Число уровней вложения не ограничено.
Пример.
<p> Виды программного обеспечения:
<ol>
<li> Системное
<ul>
<li> Операционные системы
<li> Драйверы
</ul>
<li> Прикладное
<ul>
<li> Текстовые процессоры
<li> Табличные процессоры
<li> СУБД
</ul>
</ol>
</p>
Тэг <li> также может иметь атрибутtype, со значением, зависящим от того, в списке какого вида он находится.
Списки определений: <dl> ... </dl>
Список определений несколько отличается от других видов списков. Вместо меток <li>в списках определений используются тэги<dt>(от английского definition term — определяемый термин) и<dd>(от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:
<dl>
<dt>HTML
<dd>Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
<dt>HTML-документ
<dd>Текстовый файл с расширением *.htm или *.html
</dl>
Этот фрагмент будет выведен на экран следующим образом:
HTML
Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
HTML-документ
Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).
Обратите внимание: точно так же, как тэги <li>, тэги<dt>и<dd>не имеют парных закрывающих меток.
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <dl compact>. Например, вот такой фрагмент HTML-текста:
<dl compact>
<dt>А
<dd>Первая буква алфавита
<dt>Б
<dd>Вторая буква алфавита
<dt>В
<dd>Третья буква алфавита
</dl>
будет выведен на экран примерно так:
А
Первая буква алфавита
Б
Вторая буква алфавита
В
Третья буква алфавита