Новини освіти і науки:

Тлумачний словник
Авто
Автоматизація
Архітектура
Астрономія
Аудит
Біологія
Будівництво
Бухгалтерія
Винахідництво
Виробництво
Військова справа
Генетика
Географія
Геологія
Господарство
Держава
Дім
Екологія
Економетрика
Економіка
Електроніка
Журналістика та ЗМІ
Зв'язок
Іноземні мови
Інформатика
Історія
Комп'ютери
Креслення
Кулінарія
Культура
Лексикологія
Література
Логіка
Маркетинг
Математика
Машинобудування
Медицина
Менеджмент
Метали і Зварювання
Механіка
Мистецтво
Музика
Населення
Освіта
Охорона безпеки життя
Охорона Праці
Педагогіка
Політика
Право
Програмування
Промисловість
Психологія
Радіо
Регилия
Соціологія
Спорт
Стандартизація
Технології
Торгівля
Туризм
Фізика
Фізіологія
Філософія
Фінанси
Хімія
Юриспунденкция

Лабораторна робота № 4 Створення гіперпосилань

Мета роботи:навчитись створювати гіперпосилання

Хід роботи:

1. Скопіювати в теку HTML видані викладачем графічні файли Eifel_small.jpg, Eifel.jpg, Flower.jpg.

2. В теці HTML створити текстовий документ з назвою Eifel.html, та записати в ньому такий HTML-код:

<html>

<head>

<title>Ейфелева вежа</title>

</head>

<body>

<img src="Eifel.jpg" height="300" align="left">

</body>

</html>

3. В теці HTML створити текстовий документ з назвою Link.html та записати в ньому такий HTML-код:

<html>

<head><title>Створення гіперпосилань</title></head>

<body>

У Франції є дуже багато визначних пам’яток.Спочатку ми

відвідаємо Ейфелеву вежу.

</body>

</html>

4. Визначимо в документі Link.html текстове гіперпосилання на документ Eifel.html, який розміщений в одному каталозі з файломLink.html. Для цього модифікуємо HTML-код та переглянемо документ (рис.1):

...

У Франції є дуже багато визначних пам’яток.

Спочатку ми відвідаємо <a href="Eifel.html">Ейфелеву вежу</a>

</body>

Гіперпосилання буде завантажувати файл Eifel.html в те ж саме вікно браузера. Результат виконання гіперпосилання показаний на рис. 2.

Рис. 1. Відображення текстового гіперпосилання у вікні браузера

Рис. 2. Результат, отриманий при реалізації текстового гіперпосилання

5. Визначимо в документі Link.html графічне гіперпосилання теж на документ Eifel.html. Додамо для цього відповідний HTML-код та переглянемо документ Link.html (рис.3):

...

<a href="Eifel.html"><img src="Eifel_small.jpg"></a>

</body>

Рис. 3. Відображення графічного гіперпосилання у вікні браузера

Результат реалізації даного графічного гіперпосилання не повинен відрізнятись від результату тестового гіперпосилання, визначеного в п. 4 (рис.2).

6. Використання відносної адресації в гіперпосиланнях.

6.1. Створимо в теці HTML теку A. В теці А створимо текстовий документ з назвою Zamok.html.

6.2. В файлі Zamok.html визначимо наступний HTML-код:

<html>

<head>

<title>Замок</title>

</head>

<body>

<img src="Zamok.jpg" height="300" align="left">

</body>

</html>

Переглянемо документ Zamok.html, рис.4.

Рис.4. HTML-документ Zamok.html

6.3. Визначимо в документі Link.html текстове та графічне гіперпосилання на документ Zamok.html:

...

<a href="A/Zamok.html"><center>Замок</center></a>

<br><center><a href="A/Zamok.html"><img src="Flower.jpg" width="150" height="150"></a></center>

</body>

Переглянемо оновлений документ Link.html, рис.5.

Рис.5. Відображення оновленого документу Link.html

Реалізація визначених нами відносних посилань на документ Zamok.htmlпоказана на рис.4.

6.4. На одному рівні з текою HTML створимо теку В. Наприклад, якщо тека HTML знаходиться в корені диску E, то і теку В створимо в корені диску E. Скопіюємо файл Zamok.html в теку B. В документі Link.html запишемо текстове гіперпосилання на документ Zamok.html, що знаходиться в теці В:

...

<br><a href="../B/Zamok.html">На документ Zamok.html, що знаходиться в теці В</a>

</body>

Реалізація цього посилання буде відрізнятись від представленого на рис.4 тільки тим, що в адресному рядку браузера буде записано інший шлях - E:\B\Zamok.html.

7. Використання абсолютної адресації в гіперпосиланнях.

7.1. Використовуючи абсолютну адресацію додамо в документі Link.html текстове гіперпосилання на HTML-документ Zamok.html, що знаходиться в теці B, тобто за адресою E:\B\Zamok.html:

...

<br><a href="="E://B/Zamok.html">На документ Zamok.html, що знаходиться в теці В</a>

</body>

Реалізація цього посилання не повинна відрізнятися від реалізації посилання, визначеного в п.6.4.

7.2. Визначимо в документі Link.html текстове та графічне гіперпосилання на сайт, що знаходиться за адресою http//narod.yandex.ru:

...

<br><a href="http//narod.yandex.ru">Замок</a>

<br><a href="http//narod.yandex.ru"><img src="Flower.jpg"></a>

</body>

Реалізація кожного з цих посилань показана на рис.6.

Рис. 6. Перехід по гіперпосиланню на сайт за адресою http//narod.yandex.ru

8.Використання гіперпосилань в середині HTML-документу.

8..1 В теці HTML створимо текстовий документ з назвою Recepti.html та запишемо в ньому такий HTML-код:

<html>

<head><title>Створення внутрішнього гіперпосилання</title></head>

<body>

<h1>Рецепти</h1>

<h3>1. Кошики з кавовим кремом </h3>

<h3>2. Тістечка "Наполеон"</h3>

<h3>3. Яблука в заварному тісті </h3>

<h2 align="center">1. Кошики з кавовим кремом </h2>

<h3>Тісто:</h3>

<p align="justify">300 г борошна, 100 г цукру, 150 г вершкового масла або маргарину.</p>

<h3>Крем:</h3>

<p align="justify">1 ст. ложка борошна, 2 жовтки, 100 г цукру, 100 г вершкового масла, 3 ст. ложки настою міцної кави, 100 г посічених горіхів.</p>

...

<h2 align="center">3. Яблука в заварному тісті </h2>

<h3>Тісто:</h3>

<p align="justify">80 г розтопленого вершкового масла, 1 склянка води, 150 г борошна, 3 яєць, на кінець ножа</p>

<h3>Начинка:</h3>

<p align="justify">1 кг яблук, 1 ст. ложка варення.</p>

<h3>Приготування </h3>

<p align="justify">До гарячого розтопленого масла долити гарячої води і закип'ятити...</p>

</body>

</html>

8..2 Створюємо в документі Recepti.html посилання на текст третього пункту документу – "Яблука в заварному тісті". Для цього:

- Розмістимо безпосередньо перед третім пунктом "якір" з ім’ям apple:

...

<a name= apple> </a><h2 align="center">3. Яблука в заварному тісті </h2>

...

- Модифікуємо HTML-код файлу Recepti.html для визначеня самого внутрішнього посилання. При цьому в параметрі href вказуємо ім’я "якоря" з префіксом #:

...

<h3><a href="#apple">3. Яблука в заварному тісті</a> </h3>

...

Відображення документу Recepti.html відразу після завантаження та після реалізації визначеного нами внутрішнього посилання показані на рис.7 та рис. 8.

Рис. 7. Відображення документу Recepti.html відразу після завантаження

Рис. 8. Відображення документу Recepti.html після реалізації внутрішнього посилання

11. Визначимо в документі Link.html текстове гіперпосилання на рисунок Flower.jpg, що знаходиться в папці HTML:

...

<br><a href="Flower.jpg">Квіти</a>

</body>

Реалізація даного посилання показана на рис.9.

Рис. 9. Перехід по текстовому гіперпосиланню на рисунок Flower.jpg

12. Визначимо в документі Link.html текстове гіперпосилання на адресу електронної пошти:

...

<br><a href="mailto:pochta@ukr.net ">Пошта</a>

</body>

Реалізація даного посилання в випадку використаня в якості поштового клієнту програми "Outlook Express" показана на рис. 10.

Рис. 10. Реалізація гіперпосилання на адресу електронної пошти pochta@ukr.net

Завдання для самостійної роботи

1. Створити три теки з назвами A,B,C. В теці А створити HTML-документ 1.html, в теці В - 2.html, а в теці С - 3.html. В кожному із цих документів визначити гіперпосилання на два інших документи як з абсолютною, так із відносною адресацією. Крім того документ 1.html повинен завжди відкриватись в новому вікні браузеру.

2. Оформити звіт.

Питання для самоперевірки

1. Як відкрити гіперпосилання в новому вікні браузеру?

2. Як визначити якір в HTML-документі?

3. Як використовується в гіперпосиланнях абсолютна адресація?

4. Як використовується в гіперпосиланнях відносна адресація?

5. Як відкрити гіперпосилання в тому ж самому вікні браузера?

6. Правила запису текстових гіперпосилань.

7. Правила запису графічних гіперпосилань.

8. Як визначити гіперпосилання на рисунок?

9. Як визначити гіперпосилання в середині HTML-документу?

10. Як записати гіперпосилання на адресу електронної пошти?

Читайте також:

<== попередня сторінка	\|	наступна сторінка ==>
Хід роботи	\|	Лабораторна робота №5 Створення списків

Не знайшли потрібну інформацію? Скористайтесь пошуком google:

Генерація сторінки за: 0.019 сек.