- •Лабораторная работа Создание Web-страницы
- •Дрессировка
- •Часть 1. Форматирование текста на Web-странице по образцу
- •Часть 2. Создание нумерованных и ненумерованных списков
- •1.4. Управление цветом
- •1.5. Рисунки на Web-странице
- •Часть 1. Оформление цветом Web-страницы
- •Часть 2. Размещение графики на Web-странице
- •Часть 3. Изменение размеров изображения на Web-странице
- •1.6. Гиперссылки
- •Часть 1. Создание простейшей гиперссылки
- •Часть 2. Создание гиперссылок
- •Часть 3. Цвет гиперссылок
- •Часть 4. Использование рисунка в качестве гиперссылки
- •1.7. Таблицы
- •1.7.1. Создание и форматирование таблиц
- •Часть 1. Создание таблицы по образцу
- •Часть 2. Форматирование таблицы
- •Часть 3. Заполнение таблицы
- •Часть 4. Самостоятельное проектирование и создание таблицы
- •1.7.2. Разметка Web-страницы при помощи таблицы
Часть 1. Создание простейшей гиперссылки
Цель: научиться связывать два HTML-документа с помощью гиперссылок.
Указания к выполнению
Создайте две Web-страницы в редакторе Блокнот. Одну назовите page1.htm, вторую page2.htm. Обе странички сохраните в одной папке под названием site. Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы.
В элементе <TITLE> укажите название странички «Задание 4. Часть 1».
Пусть фон первой странички будет зеленого цвета, а второй – синего.
На первой страничке создадим гиперссылку для перехода на вторую страницу. Для этого создайте элемент:
<А href=page2.htm> Ha страницу 2 </а>
На второй страничке создадим гиперссылку для перехода на первую страницу. Для этого создайте элемент:
<А href=page1.htm> На страницу 1 </а>
Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.
Часть 2. Создание гиперссылок
Цель: научиться связывать три HTML-документа с помощью гиперссылок.
Выполнить второе задание вы можете, если успешно справились с Частью 1 Задания 4. Создайте третью страничку page3.htm. Пусть ее фон будет черным.
На страничке page3.htm создайте гиперссылки для перехода на странички page1.htm и page2.htm.
На страничках page1.htm и page2.htm добавьте гиперссылку для перехода на страничку page3.htm.
Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.
Часть 3. Цвет гиперссылок
Цель: научиться определять цвет гиперссылок.
Выполнить часть 3 задания 4 вы сможете, если успешно справились с частью 2 задания 4.
На страничках page1.htm, page2.htm и page3.htm в тэге <BODY> определите цвет гиперссылок:
все гиперссылки на странице – белые;
активные гиперссылки – красные;
посещенные гиперссылки – зелёные.
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.
Часть 4. Использование рисунка в качестве гиперссылки
Цель: научиться использовать рисунок в качестве гиперссылки.
Выполнить часть 4 задания 4 вы сможете, если успешно справились с частью 3 задания 4.
На страничках page1.htm, page2.htm и page3.htm вместо текстовых гиперссылок используйте рисунки. Для этого:
откройте папку Кнопки;
в папке находятся файлы с изображением цветных кнопок. Вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу:
<A href=page2.htm> <IMG src=gol.gif> </a>
самостоятельно вставьте изображение оранжевой кнопки для перехода с первой странички на третью:
задайте бордюр обоих изображений, равным 2;
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно.
Самостоятельно вставьте изображения кнопок на страницы page2.htm и page3.htm и задайте соответствующие гиперссылки.
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страницах работают верно.