Лабораторная работа №2 гиперссылки и навигация

Цель работы – изучение гиперссылок в HTML-документе и их использование при разработке навигации web-страниц.

Задача работы – создать основные страницы web-сайта.

Порядок проведения работы

1. Определить структуру web-сайта из 5 страниц, соответствующих варианту. Так, например, для книжного магазина определяем следующие страницы:

• Главная

• Новинки

• Каталог книг

• Форма заказа

• Контакты

2. Создать html-файлы для каждой страницы, задав структуру HTML-документа, указав название (тег <TITLE>) и метатеги (тег <META>) Content-Type, Keywords (5-10 ключевых слов) и Description (150-200 символов).

3. В теле каждой страницы (тег <BODY>) привести расширенное описание (2-3 абзаца).

4. Разработать горизонтальный блок графической навигации сайта, содержащий ссылки на каждую страницу. Установить блок навигации на каждую страницу сайта.

5. На одну из страниц сайта поместить несколько тематических изображений размером не менее 150х200 пикселей.

6. Произвести оптимизацию используемых изображений так, чтобы их суммарный объем не превышал 20 килобайт.

7. В начале страницы с изображениями создать локальное текстовое меню со ссылками на каждое изображение.

8. Просмотреть результат в браузере (рис.2.1).

9. Сделать выводы по работе.

Содержание протокола

1. Список страниц сайта согласно п.1.

2. Текст главной страницы index.html и страницы, содержащей локальное меню изображений.

3. Параметры оптимизации изображений.

4. Копии экранов главной страницы и страницы, содержащей локальное меню изображений.

5. Выводы по работе.

Рис.2.1. Глобальная и локальная навигация страницы «Новинки»

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

1. Что такое гиперссылка? Тег создания гиперссылки.

2. Параметр гиперссылки HREF.

3. Параметр гиперссылки NAME.

4. Параметр гиперссылки TARGET. Его допустимые значения.

5. Параметр гиперссылки TITLE.

6. Создание ссылок внутри документа.

7. Создание текстовых ссылок и графических ссылок.

8. Установка цвета гиперссылки.

9. Установка цвета посещенной гиперссылки.

10. Установка цвета активной гиперссылки.

Лабораторная работа №3 html верстка. Таблицы

Цель работы – изучение таблиц в HTML-документе и их использование при задании структуры web-страниц.

Задача работы – задать структуру страниц web-сайта при помощи таблиц.

Порядок проведения работы

1. Задать структуру страниц web-сайта, определив необходимые информационные блоки и задав их положение на странице. Так, например, для книжного магазина определяем следующие информационные блоки:

1. Заголовок сайта

2. Навигация

3. Новинки

4. Основная информация

5. Реквизиты

2. Привести структуру web-страницы. Для книжного магазина структура web-страницы представлена на рис.3.1.

1. Заголовок
2. Навигация	4. Основная информация
3. Новинки
5. Реквизиты

Рис.3.1. Структура web-страницы сайта книжного магазина

3. Создать таблицу, соответствующую заданной структуре web-страницы. Представить страницы web-сайта, определенные в предыдущей работе, с использованием таблицы, задающей структуру сайта.

6. Просмотреть результат в браузере (рис.3.2).

7. Сделать выводы по работе.

Содержание протокола

1. Список информационных блоков страницы согласно п.1.

2. Структура web-страницы сайта согласно п.2.

2. Текст главной страницы index.html, использующей таблицы для задания ее структуры.

3. Копия экрана главной страницы, использующей таблицы для задания ее структуры.

4. Выводы по работе.

Рис.3.2.Структура главной страницы книжного магазина

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

1. Теги создания структуры таблицы

2. Перечислить параметры тега <TABLE>

3. Перечислить параметры тега <TR>

4. Перечислить параметры тега <TD>

5. Задание фона и изображения заднего плана для таблиц, строк и ячеек

6. Назначение параметров cellpadding и cellspacing

7. Варианты задания ширины таблицы и столбцов.

8. Объединение ячеек в таблице.

9. Назначение параметров colspan и rowspan.

10. Выравнивание контента в ячейке таблицы.