Додавання Зображень у HTML
Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Їх можна легко додати до HTML-документа за допомогою тега <img>.
index.html
src: обов'язковий атрибут. Значенням є шлях до розташування зображення. Шлях може бути абсолютним або відносним;alt: обов'язковий атрибут. Містить альтернативний текст, який відображається, якщо зображення не може бути завантажене;widthтаheight: визначають розмір зображення у пікселях. Без цих атрибутів зображення відображатиметься у своєму оригінальному розмірі.
Атрибут alt
Опис зображення має бути інформативним і змістовним. Він допомагає описати зображення для людей із вадами зору або тих, хто не може його побачити. У такому разі браузер зчитує атрибут alt, і користувач може зрозуміти, чому на сайті розміщено це зображення.
Уявімо наступний приклад. У вас є джерело про кінні перегони. Ви хочете показати, як учасники готуються до перегонів.
Неправильне значення для атрибута alt буде:
index.html
Гарне значення для атрибута alt буде:
index.html
Альтернативний текст "Чоловік на коні" є занадто загальним і не містить контексту. Він надає базовий опис, але не передає корисних деталей про сцену або призначення зображення.
Атрибут src
Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказівки розташування файлу зображення.
Абсолютний шлях
Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:
index.html
Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.
Будь ласка, ознайомтеся з наступним реальним прикладом у кодовому пісочниці нижче:
Примітка
Щоб переглянути структуру папок з файлами, перетягніть повзунок на лівій стороні інтерфейсу code sandbox. У верхньому лівому куті ви знайдете кнопку-бургер, яка позначена трьома смужками. Натиснувши цю кнопку, ви перейдете до організації папок з файлами.
Відносний шлях
Вказує розташування файлу зображення відносно поточного документа. Наприклад:
index.html
Це означає, що файл image.jpg знаходиться в директорії images.
Будь ласка, перегляньте реальний приклад у кодовому пісочниці нижче. Ви знайдете папку images, яка містить файл sun.png.
Примітка
Підсумовуючи різницю між відносними та абсолютними шляхами: абсолютний шлях — це фактичне посилання, яким може скористатися будь-хто для доступу до зображення. Натомість відносний шлях — це посилання в межах вашого проєкту. Він вказує на локальне зображення та шлях, яким можуть скористатися всі учасники проєкту.
1. Який тег можна використати для розміщення зображення на вебсайті?
2. Який атрибут є обов'язковим для вказання у тегу <img/>?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain more about when to use absolute vs relative paths?
What are some tips for writing good alt text for images?
Can you show more examples of using the img tag in HTML?
Awesome!
Completion rate improved to 2.56Додавання Зображень у HTML
Свайпніть щоб показати меню
Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Їх можна легко додати до HTML-документа за допомогою тега <img>.
index.html
src: обов'язковий атрибут. Значенням є шлях до розташування зображення. Шлях може бути абсолютним або відносним;alt: обов'язковий атрибут. Містить альтернативний текст, який відображається, якщо зображення не може бути завантажене;widthтаheight: визначають розмір зображення у пікселях. Без цих атрибутів зображення відображатиметься у своєму оригінальному розмірі.
Атрибут alt
Опис зображення має бути інформативним і змістовним. Він допомагає описати зображення для людей із вадами зору або тих, хто не може його побачити. У такому разі браузер зчитує атрибут alt, і користувач може зрозуміти, чому на сайті розміщено це зображення.
Уявімо наступний приклад. У вас є джерело про кінні перегони. Ви хочете показати, як учасники готуються до перегонів.
Неправильне значення для атрибута alt буде:
index.html
Гарне значення для атрибута alt буде:
index.html
Альтернативний текст "Чоловік на коні" є занадто загальним і не містить контексту. Він надає базовий опис, але не передає корисних деталей про сцену або призначення зображення.
Атрибут src
Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказівки розташування файлу зображення.
Абсолютний шлях
Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:
index.html
Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.
Будь ласка, ознайомтеся з наступним реальним прикладом у кодовому пісочниці нижче:
Примітка
Щоб переглянути структуру папок з файлами, перетягніть повзунок на лівій стороні інтерфейсу code sandbox. У верхньому лівому куті ви знайдете кнопку-бургер, яка позначена трьома смужками. Натиснувши цю кнопку, ви перейдете до організації папок з файлами.
Відносний шлях
Вказує розташування файлу зображення відносно поточного документа. Наприклад:
index.html
Це означає, що файл image.jpg знаходиться в директорії images.
Будь ласка, перегляньте реальний приклад у кодовому пісочниці нижче. Ви знайдете папку images, яка містить файл sun.png.
Примітка
Підсумовуючи різницю між відносними та абсолютними шляхами: абсолютний шлях — це фактичне посилання, яким може скористатися будь-хто для доступу до зображення. Натомість відносний шлях — це посилання в межах вашого проєкту. Він вказує на локальне зображення та шлях, яким можуть скористатися всі учасники проєкту.
1. Який тег можна використати для розміщення зображення на вебсайті?
2. Який атрибут є обов'язковим для вказання у тегу <img/>?
Дякуємо за ваш відгук!
