Читати книгу - "Інформатика, Ruslana"

4
0

Шрифт:

-
+

Інтервал:

-
+

Добавити в закладку:

Добавити
1 ... 42 43 44 ... 52
Перейти на сторінку:

<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>

1 ... 42 43 44 ... 52
Перейти на сторінку:

 Увага!

Сайт зберігає кукі вашого браузера. Ви зможете в будь-який момент зробити закладку та продовжити читання книги «Інформатика, Ruslana», після закриття браузера.

Коментарі та відгуки (0) до книги "Інформатика, Ruslana"