Цветовая гамма html-документа

Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:

bgcolor – определяет цвет фона документа;

Пример.

<BODY bqcolor=“#FFFFFF"> ...</body>

Насыщенность красным, зеленым и синим – одинакова – FF (это шестнадцатеричное представление числа 255). Результат — белый цвет.

text – определяет цвет текста документа;

Пример.

<body text="#0000FF ">

Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным).

link – определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.

vlink – определяет цвет ссылки на документ, который уже был просмотрен ранее.

alink – определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.

link = “#FF0000” – цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.

Кроме того, метка <BODY> может включать атрибут background = "[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).

Браузеры заполняют множественными копиями изображения-фона всё пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.

Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.

Задания для самостоятельной работы

Задание 1.

1. Создайте новую Web-страницу в текстовом редакторе Блокнот.

2. В элементе <title> укажите название странички «Задание 1. Форматирование текста на Web-странице по образцу».

3. Отформатируйте следующий текст согласно указаниям таблицы 1.

Текст	Применить следующие форматирование
Домашние животные	Заголовок H1
Собаки	Заголовок Н2
Сторожевые	выравнивание слева, полужирный шрифт, цвет шрифта зеленый
Охотничьи	выравнивания справа, полужирный шрифт, цвет шрифта оранжевый
Дрессировка	выравнивание по центру, полужирный курсив
Клубы Выставки Площадки	Выравнивание по центру, размер шрифта 3, цвет шрифта красный
Стихотворение	цвет шрифта синий, выравнивание по центру
По жизни я скромен, Оваций не надо! Но как же я классно Смотрюсь у снаряда!	Выравнивание по левому краю, размер шрифта 4

Задание 2.

1. Создайте новую Web-страницу в текстовом редакторе Блокнот.

2. В элементе <title> укажите название странички «Задание 2. Форматирование текста на Web-странице по образцу».

3. Напишите HTML-файл, чтобы при его выполнении получился текст следующего формата:

Элементы форматирования текста

Здесь находится цитата

Фрагменты текста можно выделять

жирным

или

наклонным

шрифтом. Кроме того, можно включать в текст фрагменты с фиксированной шириной символа

(имитация пишущей машинки).

Текст может быть зачеркнутым или подчеркнутым.

Можно также включать элементы, создающие эффект _{нижнего индекса} или ^{верхнего индекса}.

Использование увеличения шрифта – BIG

Использование уменьшения шрифта – SMALL

Кроме физических существуют также логические стили

Использование акцента – EM

Использование сильного акцента – STRONG

Фрагмент исходного текста CODE

Использование образца – SAMP

Текст, вводимый с клавиатуры – KBD

Значение переменной – VAR

Использование элемента CITE

Так выглядит формат адреса (элемент ADDRESS)

Использование элемента CENTER

Использование элемента DIV

Элемент BR обеспечивает разрыв

строки

Задание 3. Использование линий.

• Создайте новую Web-страницу в редакторе Блокнот.

• В элементе <title> укажите название странички "Задание 3. Использование линий".

• Изобразите радугу, используя горизонтальные линии различного цвета (толщина 10 пикселов, длина 50% от ширины экрана, и выровняйте ее по центру).

Задание 4.

1. Создайте новую Web-страницу в текстовом редакторе Блокнот.

2. В элементе <title> укажите название странички "Задание 4. Домашняя страничка (ваше имя и фамилия)".

3. Напишите HTML-файл, чтобы при его выполнении получился текст следующего содержания: укажите ваши фамилию, имя, отчество, год рождения, название вашего учебного заведения, название специальности, группу. Отразите в нем также следующие сведения: мой город и что мне нравится в нем, мои друзья. Для оформления используйте различные шрифты, стили и способы выравнивания, а также горизонтальные линии.

Задание 5. Оформление цветом Web-страницы

Указания к выполнению

• Создайте новую Web-страницу в редакторе Блокнот.

• В элементе <title> укажите название странички «Задание 1. Оформление цветом Web-страницы.»

• В начальном элементе <body> используйте соответствующий атрибут, чтобы сделать цвет фона странички черным.

• Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 4.

• Вставьте горизонтальную линию красного цвета.

• Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 7.

• Вставьте горизонтальную линию синего цвета толщиной 10 пикселов, длиной 50% от ширины экрана, и выровняйте ее по центру.

Спокойной