Просмотр содержимого документа
«Практическая работа по HTML»
Лабораторная работа №7. Вставка в HTML-документ рисунков. Создание закладок и гиперссылок
Цель работы:
Научиться выполнять вставку рисунков в HTML-документ Научиться создавать закладки и гиперссылки
Скопировать из Интернета или какой-либо папки в личную папку файлы три графических файла (например, Arrows1.wmf, Arrows2.wmf, Arrows3.wmf).
Убедиться, что созданные ранее документы 1_name.htm, 2_name.htm и 3_name.htm также находятся в вашей папке на жёстком диске.
Вставка рисунков в документ.
Открыть в Блокноте документ 2_name.htm.
Вставить рисунок Arrows1.wmf в начало документа 2_name.htm. Для вставки использовать тег IMG с параметрами WIDTH и HEIGHT для установки размеров рисунка 50 пикселов по горизонтали и по вертикали.
Сохранить документ под именем 4_name.htm.
Просмотреть в броузере полученный результат.
Ввести в тег рисунка параметр ALIGN для выравнивания рисунка по правому краю. Просмотреть результат в броузере.
Вставить рисунок Arrows2.wmf в конец документа 4_name.htm перед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали. С помощью параметра ALT создать всплывающую подсказку «Рисунок 2», появляющуюся при наведении курсора мыши на рисунок.
Создание гиперссылок и закладок.
За словом Шрифт – гиперссылка на документ 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».
Проверить правильность переходов по всем гиперссылкам.
Закрепить гиперссылки за графическими файлами:
Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в броузере как реагирует рисунок на наведение курсора мыши.
Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на документ 3_name.htm. Выполнить переход между документами.
Предъявить результат преподавателю.
Основные теги вставки рисунков, закладок и гиперссылок
| Вставка изображений |
| Вставка графического файла | IMG SRC=”файл” WIDTH=”ширина” HEIGHT=”высота” | Пример: IMG SRC=”grafica.gif” WIDTH=”550” HEIGHT=”240” ALIGN=” right” ALT=”Графический файл” |
| Выравнивание картинки относительно текста | файл” ALIGN=”left|right|top|bottom” |
| Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок | IMG SRC=”файл” ALT=”текст” |
| Вставка ссылок |
| Ссылки на другую страницу | A HREF=” страница” текст A | Ссылка1 |
| Ссылка на закладку в другом документе | A HREF=” страница # имя закладки” текстA | A HREF=” index.htm #met1” На главную страницу A” |
| Ссылка на закладку в том же документе | A HREF=”#имя закладки ” текст A | Ссылка2 |
| Определить закладку | A NAME=”имя закладки”текстA | |
| Цвет фона, текста и ссылок |
| Фоновая картинка | файл рисунка” | TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF” (белый) BODY |
| Цвет фона | BODY BGCOLOR=”#$$$$$$” |
| Цвет текста | |
| Цвет ссылки | BODY LINK=”#$$$$$$” |
| Цвет пройденной ссылки | BODY VLINK=”#$$$$$$” |
| Цвет активной ссылки | BODY ALINK=”#$$$$$$” |
| | |