Читати книгу - "інформатика, Іванна Клиса"
Шрифт:
Інтервал:
Добавити в закладку:
<img src=".. /images/wrongname. gif" alt="Квіти в Chania">
</body>
</html>
Зовнішній вигляд веб-сторінки
Атрибут alt надає альтернативний текст для зображення, якщо користувач з якоїсь причини не може його переглянути: через повільне підключення до Інтернету, помилки в атрибуті src або якщо користувач використовує програму читання з екрану (скрінрідер).
Значення атрибута alt має описувати зображення, тобто те, що на ньому зображено:
<img src="img_chania. jpg" alt="Flowers in Chania">
<!DOCTYPE html>
<html>
<body>
<h2>Альтернативний текст</h2>
<p>Атрибут alt повинен відображати вміст зображення, щоб користувачі, які не бачать зображення, могли зрозуміти, що воно містить: </p>
<img src=".. /images/img_chania. jpg" alt="Квіти в Chania" width="460" height="345">
</body>
</html>
Розмір зображення – Width та Height – Ширина та Висота
Ви можете використовувати атрибут style для вказівки ширини і висоти зображення.
Приклад:
<img src="img_girl. jpg" alt="Girl in a jacket" style="width: 500px;height: 600px;">
<!DOCTYPE html>
<html>
<body>
<h2>Розмір зображення</h2>
<p>Тут ми використовуємо атрибут style для визначення ширини та висоти зображення: </p>
<img src=".. /images/img_girl. jpg" alt="Дівчина в жакеті" style="width: 500px;height: 600px;">
</body>
</html>
Атрибути width і height:
Атрибути width и height завжди визначають ширину і висоту зображення в пікселях.
<!DOCTYPE html>
<html>
<body>
<h2>Розмір зображення</h2>
<p>Тут ми вказуємо ширину та висоту зображення за допомогою атрибутів width та height (ширина та висота): </p>
<img src=".. /images/img_girl. jpg" alt="Дівчина в жакеті" width="500" height="600">
</body>
</html>
Ширина і висота або стиль?
Атрибути width, height та style валідні в HTML.
Однак ми рекомендуємо використовувати атрибут style. Це перешкоджає тому, щоб таблиці стилів змінили розмір зображень.
<!DOCTYPE html>
<html>
<head>
<style>
/* Цей стиль встановлює ширину всіх зображень на 100%: */
img { width: 100%;}
</style>
</head>
<body>
<h2>Атрибути Width/Height або Style?</h2>
<p>Перше зображення використовує атрибут width (встановлений на 128 пікселів), але style у розділі head замінює його та встановлює ширину на 100%. </p>
<img src=".. /images/html5. gif" alt="HTML5 Icon" width="128" height="128">
<p>Друге зображення використовує атрибут style для встановлення ширини на 128 пікселів, це не буде замінено стилем у розділі head: </p>
<img src=".. /images/html5. gif" alt="HTML5 Icon" style="width: 128px;height: 128px;">
</body>
</html>
Зображення в іншій папці
Якщо не вказано, браузер очікує знайти зображення в тій же папці, в якій знаходиться і веб-сторінка [14].
Однак зображення зазвичай зберігаються в підпапках (інших папках). Потім ви повинні включити ім'я папки в атрибут src:
<img src="/images/html5. gif" alt="HTML5 Icon" style="width: 128px;height: 128px;">
<!DOCTYPE html>
<html>
<body>
<h2>Зображення в іншій папці</h2>
<p>Зазвичай зображення зберігаються у підпапці. Потім ви повинні включити ім’я папки в атрибут src: </p>
<img src=".. /images/html5. gif" alt="HTML5 Icon" style="width: 128px;height: 128px;">
</body>
</html>
Зазвичай папкам із зображеннями дають назви img або images.
Зображення на іншому сервері
Деякі веб-сайти зберігають свої зображення на спеціальних серверах зображень.
Насправді, ви можете отримати доступ до зображень з будь-якої веб-адреси Світової павутини, прописавши повний шлях до зображення:
<imgsrc="https://www.w3schools. com/images/w3schools_green.jpg" alt="W3Schools.com">
<!DOCTYPE html>
<html>
Увага!
Сайт зберігає кукі вашого браузера. Ви зможете в будь-який момент зробити закладку та продовжити читання книги «інформатика, Іванна Клиса», після закриття браузера.
