СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Практическая работа по HTML

Категория: Информатика

Нажмите, чтобы узнать подробности

Практическая работа

Просмотр содержимого документа
«Практическая работа по HTML»

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

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

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

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

  • Открыть в Блокноте документ 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. Создание гиперссылок и закладок.

  • В документе 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».

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

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

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

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

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


  • Основные теги вставки рисунков, закладок и гиперссылок

Вставка изображений

Вставка графического файла

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=”#$$$$$$”