Зображення та гіперпосилання на вебсторінці
Нова українська школа
Урок 12
Інформатика 8
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.
Графічні зображення �та гіперпосилання на вебсторінці
Сайт стає цікавішим і наочнішим, якщо його вебсторінки доповнити зображеннями. А пов’язати вебсторінки сайту між собою та з іншими сайтами допоможуть гіперпосилання.
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Вставляння зображень
На вебсторінку можна додавати різноманітні зображення. Це можуть бути ілюстрації до тексту, графічні елементи оформлення. Щоб вставити на вебсторінку зображення з файлу, використовують тег:
<img src="my.jpg">
В атрибуті можна використовувати імена графічних файлів із розширеннями:
.jpg
.gif
.png
.bmp
назва тегу
атрибут, у якому вказують ім’я файлу із зображенням
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Вставляння зображень
Якщо зображення і HTML-файл містяться в різних папках, то, крім імені файлу, слід вказати шлях до нього із зазначенням назв папок.
<img src="images/my.jpg">
<img src="../images/my.jpg">
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Вставляння зображень
Ter img підтримує атрибути, які визначають розташування зображення на вебсторінці та обтікання його текстом.
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Вставляння зображень
Проаналізуймо декілька тегів для вставляння зображення:
<img src = "pr1.png" align = "left">
<img src = "pr1.png" vspace = "10" hspace = "30">
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Вставляння зображень
Продовження…
<img src = "pr1.png" alt = "Моє фото">
Примітка. Якщо навести вказівник на зображення, з’явиться текст — Моє фото. Крім того, значення параметра alt буде виведене на екран замість зображення, якщо в браузері вимкнуто показ зображень.
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Вставляння зображень
Продовження…
<img src = "pr1.png" width = "100" height = "20%">
<img src = "pr1.png" border = "5">
Примітка. Одночасне задання значень width і height може порушити пропорції зображення
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Додавання гіперпосилань
Сайт часто складається з багатьох вебсторінок, пов’язаних гіперпосиланнями. Для створення гіперпосилань на вебсторінки сайту та зовнішні ресурси інтернету використовують тег:
<а>...</а>
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Додавання гіперпосилань
Розгляньмо приклад додавання гіперпосилань до зображень і фрагментів тексту.
Нехай в одній папці з файлом index.html створено файл prf.html, який демонструє вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, скориставшись такою розміткою:
<a href = "prf.html"> Подивитися фото </a>
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Додавання гіперпосилань
Щоб пов’язати гіперпосилання із зображенням, замість тексту вказують тег вставляння зображення:
<a href = "prf.html"><img src = "foto1.jpg"></a>
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Додавання гіперпосилань
HTML-код головної вебсторінки може мати такий вигляд:
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Додавання гіперпосилань
Для повернення на головну сторінку на інших вебсторінках сайту мають бути відповідні гіперпосилання. Наприклад:
<а href=
"index.html">Головна</a>
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Питання для самоперевірки
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Розгадайте ребус
Гіперпосилання
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Домашнє завдання
Проаналізувати
с. 57-60
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Працюємо за комп’ютером
Сторінка
59-60
Розділ 2
§ 10
© Вивчаємо інформатику teach-inf.com.ua
Успіхів�у навчанні!
Нова українська школа
Урок 12
Інформатика 8
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.