Лабораторна робота 4 на тему Створення гіперпосилань з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Лабораторна робота № 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. 5. Визначимо у документі Link.html графічне гіперпосилання на документ Eifel.html. Додамо для цього відповідний HTML-код та переглянемо документ Link.html (рис. 3): ... <a href="Eifel.html"><img src="Eifel_small.jpg"></a> </body> Результат реалізації даного графічного гіперпосилання не повинен відрізнятись від результату тестового гіперпосилання, визначеного у п. 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). 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). Реалізація, визначених нами відносних посилань на документ 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. 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. 9. Визначимо у документі Link.html текстове гіперпосилання на рисунок Flower.jpg, що знаходиться у папці HTML: ... <br><a href="Flower.jpg">Квіти</a> </body> Реалізація даного посилання показана на рис.9. 10. Визначимо у документі Link.html текстове гіперпосилання на адресу електронної пошти: ... <br><a href="mailto:pochta@ukr.net ">Пошта</a> </body> Реалізація даного посилання у випадку використаня як поштовий клієнт програми "Outlook Express" показана на рис. 10. Завдання для самостійної роботи 1. Створити три теки з назвами A,B,C. У теці А створити HTML-документ 1.html, у теці У - 2.html, а у теці С - 3.html. У кожному із цих документів визначити гіперпосилання на два інших документи як з абсолютною, так із відносною адресацією. Крім того документ 1.html повинен завжди відкриватись у новому вікні браузера. 2. Оформити звіт. Питання для самоперевірки
З повагою ІЦ “KURSOVIKS”! |