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

 

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

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

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

 

Оформить страницу согласно заданному варианту.

 

№ варианта	Задание
	Цвет фона странички белый. Сделайте надпись чёрным цветом " Спокойной ночи". Выровняйте ее посредине страницы, размер шрифта 4. Проведите линию с выравниванием по правому краю, толщиной 2, красного цвета, длиной 10% от ширины экрана. Сделайте надпись желтого цвета " Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 3, жёлтого цвета, длиной 50 пикселей.
	Цвет фона странички жёлтый. Сделайте надпись белым цветом " Спокойной ночи". Выровняйте ее по левому краю, размер шрифта 3. Проведите линию с выравниванием по левому краю, толщиной 4, синего цвета, длиной 20% от ширины экрана. Сделайте надпись золотого цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 5, оранжевого цвета, длиной 100 пикселей.
	Цвет фона странички золотой. Сделайте надпись оранжевым цветом " Спокойной ночи". Выровняйте ее по правому краю. Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 4, оранжевого цвета, длиной 20% от ширины экрана. Сделайте надпись белого цвета " Приятных сновидений". Выровняйте ее по правому краю. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 5, красного цвета длиной 100 пикселей.
	Цвет фона странички оранжевый. Сделайте надпись красным цветом " Спокойной ночи". Выровняйте ее по середине страницы размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 5, красного цвета, длиной 100 пикселей. Сделайте надпись цвета аквамарин " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по правому краю, толщиной 6, серебристого цвета, длиной 30% от ширины экрана.
	Цвет фона странички красный. Сделайте надпись белым цветом " Спокойной ночи". Проведите линию с выравниванием по правому краю, толщиной 6, белого цвета, длиной 30% от ширины экрана. Сделайте надпись оливкового цвета " Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 7, оливкового цвета, длиной 150 пикселей.
	Цвет фона странички зелёный. Сделайте надпись оливкового цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 7, оливкового цвета, длиной 150 пикселей. Сделайте надпись синего цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по левому краю, толщиной 8, синего цвета, длиной 40% от ширины экрана.
	Цвет фона странички оливковый. Сделайте надпись синего цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 8, синего цвета, длиной 40% от ширины экрана. Сделайте надпись фиолетового цвета " Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 2, фиолетового цвета, длиной 200 пикселей.
	Цвет фона странички аквамарин. Сделайте надпись фиолетового цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 2, фиолетового цвета, длиной 200 пикселей. Сделайте надпись серебристого цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по правому краю, толщиной 3, серебристого цвета, длиной 50% от ширины экрана, цвета.
	Цвет фона странички синий. Сделайте надпись серебристого цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по правому краю, толщиной 3, серебристого цвета, длиной 50% от ширины экрана. Сделайте надпись серого цвета " Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 4, серого цвета, длиной 250 пикселей.
	Цвет фона странички фиолетовый. Сделайте надпись серого цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 4, серого цвета, длиной 250 пикселей. Сделайте надпись чёрного цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по левому краю, толщиной 5, чёрного цвета, длиной 60% от ширины экрана.
	Цвет фона странички серебристый. Сделайте надпись чёрного цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 5, чёрного цвета, длиной 60% от ширины экрана. Сделайте надпись желтого цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 6, желтого цвета, длиной 300 пикселей.
	Цвет фона странички серый. Сделайте надпись желтого цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 6, желтого цвета, длиной 300 пикселей. Сделайте надпись белого цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по правому краю, толщиной 7, белого цвета, длиной 70% от ширины экрана.
	Цвет фона странички чёрный. Сделайте надпись белого цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по правому краю, толщиной 7, белого цвета, длиной 70% от ширины экрана. Сделайте надпись красного цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 8, красного цвета, длиной 350 пикселей.
	Цвет фона странички жёлтый. Сделайте надпись красного цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 8, красного цвета, длиной 350 пикселей. Сделайте надпись золотого цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по левому краю, толщиной 9, золотого цвета, длиной 80% от ширины экрана.
	Цвет фона странички белый. Сделайте надпись золотого цвета " Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 9, золотого цвета, длиной 80% от ширины экрана. Сделайте надпись синего цвета " Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 3, синего цвета, длиной 50 пикселей.

 

Спокойной

Контрольные вопросы

1. Цветовая гамма HTML-документа.

2. Сочетание цветов.

Лабораторная работа № 4.
Гиперссылки

Цель работы: познакомиться с основными принципами построения гипертекстовых ссылок: научиться связывать несколько HTML-документов с помощью гиперссылок, определять цвет гиперссылок, использовать рисунок в качестве гиперссылки.

 

HTML предлагает множество условных оборотов для текстовых и структурированных документов, но что отличает его от большинства других языков разметки – его возможности разметки гипертекста и интерактивных документов. Ссылки связывают один ресурс Web с другим. Несмотря на простоту, ссылки стали основным залогом успеха Web.

Гипертекст (Hyper Text) – это многомерный текст, т.е. такая организация документов, при которой один до­кумент или текст может включать в себя разнонаправлен­ные ссылки. Эти ссылки, называемые гипертекстовыми ссылками или гиперссылками (Hyper Text links, hyperlinks), позволяют просматривать документ в любом необходимом порядке. Объединение одномерных текстов с включенными в них гиперссылками называется гипертек­стом.

Самым простым примером гипертекста является система контекстной помощи Microsoft Windows.

Любая гиперссылкасостоит из двух частей: указателя ссылки («якоря» – от англ. anchors) и адреса ресурса, которым может быть любым ресурсом Web (например, изображением, видеоклипом, звуковым файлом, программой, документом HTML, элементом в документе HTML и т.д.), на который необходимо осуществить переход.

Внешне отличить гиперссылку от обычного текста очень просто: при наведении курсора мыши на ссылку указатель принимает вид руки с указательным пальцем, как бы показывающим, что этот текст содержит гиперссылку. Сама ссылка подчеркивается (в случае если указателем является текст).

В качестве указателя может выступать текст (отдельное слово, фразы и даже целые страницы текста) и графические изображения. В ряде случаев возможно объединение графики и текста в рамках единого указателя ссылки.