Як побудувати гіпертекстові зв’язки в HTML-документі?

Гіперпосилання може бути подано різними способами: крім тексту, ще й малюнком, картою (розміченим малюнком), списком-меню, екранною кнопкою тощо.

Існують два основні типи гіперпосилань: внутрішні та зовнішні.

Внутрішні гіперпосилання — це посилання на об’єкти в межах одного документа. За їхньою допомогою можна переміщуватися всередині однієї вебсторінки. Такі посилання доцільно використовувати на довгих сторінках, щоб мати можливість швидко переміщуватись між розділами.

Зовнішні гіперпосилання — це посилання на віддалені HTML-файли або на будь-які файли, які належать до HTML-документів.

Для завдання гіпертекстового переходу до іншого документа використовується парний тег <A> (від англ. anchor — якір).

Формат вказівки для зовнішнього посилання такий:

<A HREF=ім’я файла> текст посилання </А>

Колір гіперпосилань

За замовчуванням посилання виділяються синім кольором і підкреслюються. Посилання на документи, які ви вже відвідали, виділяються фіолетовим кольором. Змінити ці кольори можна прямо в параметрах тега <BODY>:

<BODY LINK="red" VLINK="#00FF00" ALINK="blue"

Вебпосилання на сторінку сайту (або на файл на комп'ютері)і):

<a href=″адреса веб-сторінки, на яку потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>

<a href=″шлях і назва файлу на комп'ютері, на який потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>

<a href="https://sites.google.com/view/webnkpetl/зміст">Сторінка - ЗМІСТ</a>

Наприклад:

Сторінка - ЗМІСТ

Веб-посилання у вигляді малюнка:<a href="http://dmitrenkosv.ucoz.ua"><img src="http://dmitrenkosv.ucoz.ua/_tbkp/1111.jpg" width="200px" ></a>

Практичне завдання 1 . Створити вебсторінку "Зміст"

Результат офлайн формату

Результат онлайн формату

Технологія виконання завдання 1:

Зайти по посиланню https://jsfiddle.net/

2. У область для введення HTML коду введіть код організації вебсторінки

<html>

<head>

<title> ЗМІСТ </title>

</head>

-------------------

----------------------

-----------------------

</body>

</html>

3. Прописати перший рядок Змісту:,

при натисканні на Полігонівський ліцей
відбувся перехід за адресою https://sites.google.com/a/poligonschool.org.ua/poligonivska-school/bhs-summit-high-school-reunion

4. Прописати другий рядок Змісту:,

при натисканні на УРОК
відбувся перехід за адресою та завантаження файлу http://dmitrenkosv.ucoz.ua/acac/urok_43_8.docx

5. Прописати третій рядок Змісту:,

при натисканні на УРОК НА САЙТІ
відбувся перехід за адресою та завантаження файлу адресу самостійно - будь-яка сторінка сайту

6. Прописати четвертий рядок Змісту:,

при натисканні на КАРТИНКУ

( у атрибут src вставити URL адресу картинки https://www.prostir.ua/wp-content/uploads/2017/09/%D1%88%D0%BA%D0%BE%D0%BB%D0%B0.gif )

відбувся перехід за адресою https://sites.google.com/a/poligonschool.org.ua/poligonivska-school/bhs-summit-high-school-reunion

7. Натиснути Save, та скопіювати сгенеровану адресу у адресному рядку і надіслати для оцінювання

Практичне завдання 2 . Створити вебсторінку з внутрішніми посиланнями.