Обработка_данных_ОЗО / Лабораторные_работы / Лабораторные работы_HTML / лаб2 / Задание 2
.docЗадание 3. Гиперссылки
Гипертекст – это нелинейный текст, содержащий внутри себя ссылки-переходы.
-
гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием;
-
мышиный курсор на ссылке меняет свою форму и превращается в указующий перст;
-
для перехода по ссылке необходимо щелкнуть по ней мышкой;
-
для возврата из ссылки необходимо использовать навигационную кнопку браузера "Назад" ("Back").
Переход к другому документу
Для задания гипертекстового перехода внутри документа используют две команды <A>. Первая команда с атрибутом href является источником перехода, вторая с атрибутом name -- приемником.
|
Общий вид программы |
|
|
<A href=#метка>текст</A> ... ... <A name=метка></A> ... |
Задание перехода по метке На экран выводится ссылка: текст
Метка. Сюда браузер приходит по ссылке. На экране ничего не отображается. |
Переход к другому документу
Для того, чтобы браузер загрузил в свое окно новый HTML-документ, нужно записать в программе ссылку при помощи команды <A> с атрибутом href=имя_файла.
|
Общий вид программы |
|
|
<A href=имя_файла>текст</A> ... |
Выполнить файл "имя_файла". На экран выводится ссылка: текст При щелчке пользователя на ссылке браузер строит на экране документ по программе, заданной в файле "имя_файла". |
Задание 1. Внешние и внутренние гиперссылки. Создать страницу с загадками на одной web-странице с возможностью просмотра ответов с других страниц.
Откройте папку «Загадки», и по аналогии создайте файлы с ответами на загадки. Для этого достаточно открыть файл ot1.html, сохранить его под именем ot2.html (ot3.html) и в полученном документе внести необходимые изменения, то есть изменить текст ответа и номер рисунка. Ответ на вторую загадку – морковь, ответ на третью загадку – капуста.
Откройте файл Загадки. html и исправьте текст так, чтобы ссылки стали работать. Обратите внимание, как сделана первая загадка и сделайте по аналогии.
Задание 2. Создать таблицу – фото-галерею 4х2 с фотографиями Л. Н. Толстого, так чтобы сами уменьшенные фотографии служили ссылками на более крупные изображения.
Для того, чтобы создать таблицу, будем использовать следующую разметку:
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Для того, чтобы вставить изображения, в созданную таблицу преобразуйте ее к следующему виду:
Для того, чтобы сделать картинку гиперссылкой, используйте следующее преобразование.
<td><a href=11.jpg> <img src=11.jpg width="100"> </a> </td>
Проделайте подобные преобразования со всеми строками таблицы.
Задание 3. Создайте графическую карту для загадок по временам года с переходом к этой тематике.
Для этого создайте файл с картой:
<html>
<body>
<img src="vr.jpg" usemap="#kar1">
<map name="kar1">
<area href="zim.html" shape="circle" coords="145,140,150">
</map>
</body>
</html>
добавляя необходимые ссылки.
<area href="имя файла ссылки " shape="circle" coords="х0,y0,R">
Для того, чтобы узнать необходимые координаты, откройте файл с картинкой в графическом редакторе Paint.
R=x1-x0
Файлы с загадками сделайте самостоятельно
Задание для самостоятельной работы
Создайте графическую карту с изображением компьютера и переходам к тексту по каждому из устройств. Создайте документ-меню, в котором в качестве гиперссылок будут следующие разделы: устройства ввода, устройства вывода, устройства обработки, устройства хранения и передачи информации. От каждой гиперссылки обеспечьте переход к соответствующей фото галерее (таблиц не менее, чем 3х3).