Зображення

Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Зображення можна легко включити в HTML-документ за допомогою тегу <img>.

• src - обов'язковий атрибут. Його значенням є шлях до розташування зображення. Шлях може бути абсолютним та відносним;
• alt - обов'язковий атрибут. Задає альтернативний текст, який може бути виведений, якщо зображення не може бути відрендерено;
• width та height - задають розмір зображення у пікселях. Без цих атрибутів зображення буде відображено в оригінальному розмірі.

Атрибут alt

Ми робимо опис зображення інформативним та змістовним. Це допомагає описати зображення для людей з вадами зору або тих, хто не може його побачити. Таким чином, браузер прочитає атрибут alt, і користувач зможе зрозуміти, чому ми маємо саме це зображення.

Уявімо собі наступний приклад. У нас є джерело про кінні перегони. Ми хочемо показати, як спортсмени готуються до перегонів.

Поганим значенням для атрибута alt буде:

Хорошим значенням для атрибута alt буде:

Good value for the alt attribute will be:

The alt text "A man on a horse" is too generic and lacks context. It provides a basic description, but it doesn't convey useful details about the scene or the purpose of the image.

Примітка

Якщо підсумувати різницю між відносними та абсолютними шляхами, то абсолютний шлях - це фактичне посилання, за яким будь-хто може отримати доступ до зображення. З іншого боку, відносний шлях - це посилання у контексті вашого власного проекту. Він посилається на локальне зображення і шлях, до якого може отримати доступ будь-хто у проекті.

Relative path

It specifies the location of the image file relative to the current document. For example:

It means that the image.jpg file located in the images directory.

Please inspect the real example provided in the code sandbox below. You will find the images folder, which contains the sun.png file.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.