Розміщення, форматування і вирівнювання зображень на веб-сторінці. Карти посилань
Конспект уроку з інформатики для учнів 9-11класів при вивченні теми "Основи веб-технологій"
Урок №57
Возміщення, форматування і вирівнювання зображень на веб-сторінці. Карти посилань
Зображення HTML
Зображення можуть покращити дизайн і зовнішній вигляд веб-сторінки.
Приклад
<img src="pic_trulli.jpg" alt="Italian Trulli">
Приклад
<img src="img_girl.jpg" alt="Girl in a jacket">
Приклад
<img src="img_chania.jpg" alt="Flowers in Chania">
Синтаксис HTML-зображень
У HTML, зображення визначаються <img>тегом.
<img> - порожній тег, він містить тільки атрибути і не має закриваючого тега.
Src - атрибут вказує URL - адресу (веб - адресу) зображення:
<img src="url">
Атрибут alt
Alt - атрибут надає альтернативний текст для зображення, якщо користувач з будь-яких причин не може його побачити (з - за повільного з'єднання, помилки в атрибуті SRC).
Значення alt атрибута повинно описувати зображення
Приклад
<img src="img_chania.jpg" alt="Flowers in Chania">
Якщо веб-переглядач не може знайти зображення, він відобразить значення alt атрибута:
Приклад
<img src="wrongname.gif" alt="Flowers in Chania">
Примітка: alt потрібний атрибут. Без нього веб-сторінка не буде правильно перевірена (не пройде перевырку валыдатора).
Розмір зображення - ширина і висота
Style - атрибут можна використовувати для визначення ширини та висоти зображення.
Приклад
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Крім того , ви можете використовувати width і height атрибути:
Приклад
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Width і height - атрибути завжди визначають ширину і висоту зображення в пікселях.
Примітка: Завжди вказуйте ширину та висоту зображення. Якщо ширина і висота не вказані, сторінка може миготіти під час завантаження зображення.
Ширина і висота, або стиль?
В width, height і style - атрибути дійсні в HTML5.
Проте ми пропонуємо використовувати style атрибут. Це запобігає зміні аркушів стилів у розмірі зображень.
Приклад
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Зображення в іншій папці!!!
Якщо не вказано, браузер очікує знайти зображення в тій же папці, що й веб-сторінка.
Тим не менш, звичайне зберігання зображень у підпапці. Потім потрібно вказати ім'я папки в src атрибуті:
Приклад
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Зображення на іншому сервері
Деякі веб-сайти зберігають свої зображення на серверах зображень.
Насправді, ви можете отримати доступ до зображень з будь-якої веб-адреси в світі:
Приклад
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Докладніше про шляхи файлів ви можете прочитати в розділі Шляхи HTML файлів.
Анімовані зображення
HTML використовує анімовані GIF-файли:
Приклад
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Зображення як посилання
Щоб використовувати зображення як посилання, поставте <img> тег всередині <a> тега
Приклад
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Примітка: border:0; додано для запобігання відображенню рамки навколо зображення в IE9 (і раніше) (коли зображення є посиланням).
Плаваюче зображення
Використовуйте float властивість CSS, щоб дозволити зображенню плавати праворуч або ліворуч від тексту (float:left або float:right):
Приклад
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Порада. Щоб дізнатися більше про CSS Float, ознайомтеся з нашим підручником CSS Float .
Карти зображень
<map> - тег визначає зображення-карту. Мапа зображень - це зображення з кліками (гіперпосиланнями).
Приклад
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Name атрибут <map> тега пов'язаний з <img> - тегом зображення атрибута і створює зв'язок між зображенням і картою.
<map> елемент містить ряд <area> тегів, які визначають інтерактивну область в зображенні-карті.
Фонове зображення
Щоб додати фонове зображення до елемента HTML, використовуйте властивість CSS background-image:
Приклад
Щоб додати фонове зображення на веб-сторінці, вкажіть властивість background-image для елемента BODY:
<body style="background-image:url('clouds.jpg');">
<h2>Background Image</h2>
</body>
Приклад
Щоб додати фонове зображення до абзацу, вкажіть властивість background-image на елементі P:
<body>
<p style="background-image:url('clouds.jpg');">
...
</p>
</body>
Щоб дізнатися більше про фонові зображення, ознайомтеся з навчальним посібником із фонового зображення CSS .
Елемент <picture>
HTML5 представив <picture> елемент, щоб додати більше гнучкості при визначенні ресурсів зображення.
<picture> - елемент містить ряд елементів < source >, кожен з посиланням на різні джерела зображення. Таким чином браузер може вибрати зображення, яке найкраще відповідає поточному перегляду пристрою.
Кожен <source> елемент має атрибути, що описують, коли їх зображення є найбільш підходящим.
Браузер буде використовувати перший <source> елемент з відповідними значеннями атрибутів і ігнорувати будь-які наступні <source>елементи.
Приклад
Покажіть одне зображення, якщо вікно веб-переглядача (вікно перегляду) становить мінімум 650 пікселів, а інше зображення - якщо ні ,але більше 465 пікселів.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Примітка: Завжди вказуйте <img> елемент як останній дочірній елемент <picture> елемента. <img> елемент використовується в браузерах , які не підтримують <picture> елемент, або якщо жоден з <source> - тегів не відповідає.
Читачі екрану HTML
Зчитувач екрану - це програма, яка читає HTML-код, перетворює текст і дозволяє користувачеві "слухати" вміст. Читачі екрану корисні для людей з вадами зору або навчання інвалідам.
Резюме розділу
- Використовуйте <img> - елемент HTML для визначення зображення
- Використовуйте src - атрибут HTML, щоб визначити URL-адресу зображення
- Використовуйте alt атрибут HTML, щоб визначити альтернативний текст для зображення, якщо воно не може бути відображене
- Використовуйте HTML width та height атрибути, щоб визначити розмір зображення
- Використовуйте CSS width і height властивості, щоб визначити розмір зображення
- Використовуйте float властивість CSS, щоб дозволити зображенню плавати
- Використовуйте <map> елемент HTML для визначення карти зображення
- Використовуйте <area> елемент HTML, щоб визначити площу для гіперпосилань (кліки), які можна натискати на карті зображення
- Використовуйте атрибут usemap <img>-елемента HTML , щоб вказати на карту зображення
- Використовуйте <picture> елемент HTML для показу різних зображень для різних пристроїв.
Примітка: завантаження зображень займає багато часу. Великі зображення можуть уповільнити роботу вашої сторінки. Обережно використовуйте зображення.
Практична частина
Увага! Під час виконання практичного завдання пам’ятайте про правила техніки безпеки при роботі за комп’ютером!
Вправа 1
- Створіть у власній папці папку “Урок №57”.
- Завантажте необхідні матеріали (зображення) за посиланням: Матеріали до уроку №57 і збережіть зображення у папку “Урок №57”.
- Відкрийте Notepad++ і створіть новий файл.
- Збережіть створений файл з іменем “index.html” у папку “Урок №57”.
- Виконайте наступні завдання (для роботи використайте Додаток 1):
- Подвоїть ширину та висоту усіх зображень.
- Додайте посилання до другого зображення html5.gif на сайт "https://www.w3schools.com".
- Змініть адресу третього зображення на "pic_trulli.jpg".
- Наведене четверте зображення спеціально недоступне. Вкажіть альтернативний текст "w3schools.com", який буде використовуватися, щоб його можна було прочитати читачами на екрані.
- Зробіть п’яте зображення плаваючим ліворуч від абзацу.
- *Зробити так, щоб кожне зображення було у новому рядку.
- **Додати ще зображення і оформити на власний розсуд.
Додаток 1
<!DOCTYPE html>
<html>
<head>
<title>Форматування зображень</title>
</head>
<body>
<img src="programming.gif" alt="Computer Man" width="48" height="48">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="img_the_scream.jpg" style="width:304px;height:228px;">
<img src="w3schooooools.jpg" width="135" height="50">
<p>
<img src="smiley.gif" alt="Smiley face" style="width:42px;height:42px;">
Абзац із зображенням. Абзац із зображенням. Абзац із зображенням. Абзац із зображенням. Абзац із зображенням. Абзац із зображенням.
</p>
</html>
- Збережіть свою роботу та перегляньте результат у браузері.
- Продемонструйте роботу учителеві.
про публікацію авторської розробки
Додати розробку