Вставка в HTML-документ рисунков. Создание закладок, таблиц и гиперссылок

Лабораторная работа №2.

Вставка в HTML-документ рисунков. Создание закладок, таблиц и гиперссылок

Цель работы:

·         Научиться выполнять вставку рисунков в HTML-документ

·         Научиться создавать закладки и гиперссылки

·         Научиться использовать таблицы для оформления WEB-страниц

1.       Скопировать из Интернета или какой-либо папки в личную папку файлы три графических файла (например, Arrows1.wmf, Arrows2.wmf, Arrows3.wmf).

Убедиться, что созданные ранее документы 1_name.htm, 2_name.htm и 3_name.htm также находятся в вашей папке на жёстком диске.

2.       Вставка рисунков в документ.

·         Открыть в Блокноте документ 2_name.htm.

·          Вставить рисунок Arrows1.wmf в начало документа 2_name.htm. Для вставки использовать тег IMG с параметрами WIDTH и HEIGHT для установки  размеров рисунка 50 пикселов по горизонтали и по вертикали. 

·         Сохранить документ под именем 4_name.htm.

·         Просмотреть в браузере полученный результат.

·         Ввести в тег рисунка параметр ALIGN для выравнивания рисунка по правому краю. Просмотреть результат в браузере.

·         Вставить рисунок Arrows2.wmf в конец документа 4_name.htm перед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали.  С помощью параметра ALT создать всплывающую подсказку «Рисунок 2», появляющуюся при наведении курсора мыши на рисунок.

·         Просмотреть в браузере полученный результат.

3.       Создание гиперссылок и закладок.

·         В документе 3_name.htm закрепить гиперрсылки за следующими элементами списка:

За словом Шрифт – гиперссылка на документ 1_name.htm.

За словом Заголовки – на документ 1_name.htm.

За словом Абзацы - на документ 2_name.htm.

·         Создать закладку в документе 1_name.htm перед фразой «Нас утро встречает прохладой». Дать ей имя «Morning».

·         Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на закладку «Morning» в документе 1_name.htm.

·          Создать закладку в начале текущего документа 3_name.htm.. Присвоить ей имя  «Hello».

·         Изменить вторую гиперссылку (на слове Заголовки), определив для неё переход в начало текущего документа на установленную закладку «Hello».

·         Создать закладку в документе 2_name.htm перед фрагментом монолога. Присвоить ей имя «Mono».

·          Установить на слово переформатирования гиперссылку на  закладку «Mono».

·          Проверить правильность переходов по всем гиперссылкам.

4.       Закрепить гиперссылки за графическими файлами:

·         Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в браузере как реагирует рисунок на наведение курсора мыши.

·         Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на документ 3_name.htm. Выполнить переход между документами.

1. Создать таблицу по приведенному образцу, сохранить документ под именем tabl_name.htm. Сверху над таблицей разместить заголовок Таблица №1

При отображении таблицы в браузере должны удовлетворяться следующие условия:

·         таблица должна быть выравнена по центру  и быть правильной (симметричной) формы;

·         в центральной ячейке поместить символ  * (звездочка), остальные ячейки должны быть пустыми.

Примечание. Для отображения пустых ячеек в них нужно поместить символьный примитив пробела  

2. В этом же документе создать копию таблицы №1, ввести заголовок Таблица №2 и модифицировать ее:

·         В центральной ячейке разместить рисунок Arrows3.wmf

·         «Раскрасить» все остальные ячейки в различные цвета.

3. Создать еще одну копию таблицы – Таблица №3 и отредактировать теги таблицы так, чтобы она соответствовала приведенному ниже образцу.

Примечание.  Для объединения ячеек в тегах <TD> необходимо использовать параметры colspan=  и  rowspan=

4. Создать новый HTML-документ - rasp_name.htm с расписанием занятий.

·         Документ должен начинаться заголовком
Расписание занятий гр. NNN на весенний семестр 2005 г.

·         Первая строка таблицы должна быть оформлена как заголовки полей (с использованием тегов <TH>).

·         Таблица по ширине должна занимать полный размер окна. Ширину отдельных столбцов задать в относительных единицах (в %), с тем, чтобы при изменении ширины окна пропорции таблицы сохранялись.

·         Просмотреть созданный документ в браузере при различных размерах окна и различных настройках размера шрифта.

5. Сохранить файл с расписанием под именем rasp_menu_name.htm и модифицировать его.

6. После заголовка создать таблицу, состоящую их одной строки меню с названиями дней недели.

7. В таблице с расписанием установить закладки на названия дней недели.

8. В таблице меню создать гиперссылки на соответствующие дни недели.

9. Выполнить цветовое оформление каждой ячейки меню.

10. Проверить правильность выполнения переходов по гиперссылкам.

11. Создать группу web-страниц, объединенных меню:

·         На рабочем диске создать папку  My_raspisanie для размещения файлов расписания.

·         Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов: menu.htm – для главной страницы, названия дней недели – для остальных. Все документы разместить в папке My_raspisanie.

·         Отредактировать гиперссылки меню так, чтобы по ним выполнялись переходы на соответствующий документ.

·         В конце каждого файла с расписанием на день организовать гиперссылку для возврата в главный документ с меню.

·         Оформить фон каждого дня недели собственным цветом, совпадающим с цветом ячейки таблицы меню.

12. Предъявить результат преподавателю.