Додавання Зображень у HTML
Зображення роблять веб-сторінки більш привабливими. Для вставки зображення використовується тег <img>.
index.html
Основні атрибути:
src: обов'язковий. Шлях до файлу зображення (абсолютний або відносний);alt: обов'язковий. Текст, який відображається, якщо зображення не завантажується, також використовується екранними читачами;width/height: розмір у пікселях. Без цих атрибутів зображення відображається у своєму оригінальному розмірі.
Атрибут alt
Текст alt має чітко описувати зображення та надавати корисний контекст.
Уявімо наступний приклад. У вас є джерело про кінні перегони. Ви хочете показати, як учасники готуються до перегонів.
Невдалий текст alt:
index.html
Кращий текст для alt:
index.html
Покращена версія надає реальний контекст і допомагає користувачам із вадами зору зрозуміти, що зображено на картинці.
Атрибут src
Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказання розташування файлу зображення.
Абсолютний шлях
Повна URL-адреса, що вказує на зображення в Інтернеті.
index.html
Будь-хто може отримати доступ до зображення за цим повним посиланням.
Будь ласка, перегляньте наступний реальний приклад у кодовому пісочниці нижче.
Щоб переглянути структуру папок з файлами, перетягніть повзунок на лівій стороні інтерфейсу code sandbox. У верхньому лівому куті ви знайдете кнопку-бургер, позначену трьома смужками. Натиснувши цю кнопку, ви перейдете до організації папок з файлами.
Відносний шлях
Вказує на зображення всередині вашої папки проєкту.
index.html
Це означає, що image.jpg зберігається у директорії images поруч із вашим HTML-файлом.
Будь ласка, перегляньте реальний приклад у кодовому пісочниці нижче. Ви знайдете папку images, яка містить файл sun.png.
Абсолютні шляхи: повні URL-адреси, які працюють з будь-якої точки Інтернету.
Відносні шляхи: локальні шляхи проекту, що використовуються у вашій власній структурі папок.
1. Який тег можна використати для розміщення зображення на вебсайті?
2. Який атрибут є обов'язковим для вказання у тегу <img/>?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Чудово!
Completion показник покращився до 2.38
Додавання Зображень у HTML
Свайпніть щоб показати меню
Зображення роблять веб-сторінки більш привабливими. Для вставки зображення використовується тег <img>.
index.html
Основні атрибути:
src: обов'язковий. Шлях до файлу зображення (абсолютний або відносний);alt: обов'язковий. Текст, який відображається, якщо зображення не завантажується, також використовується екранними читачами;width/height: розмір у пікселях. Без цих атрибутів зображення відображається у своєму оригінальному розмірі.
Атрибут alt
Текст alt має чітко описувати зображення та надавати корисний контекст.
Уявімо наступний приклад. У вас є джерело про кінні перегони. Ви хочете показати, як учасники готуються до перегонів.
Невдалий текст alt:
index.html
Кращий текст для alt:
index.html
Покращена версія надає реальний контекст і допомагає користувачам із вадами зору зрозуміти, що зображено на картинці.
Атрибут src
Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказання розташування файлу зображення.
Абсолютний шлях
Повна URL-адреса, що вказує на зображення в Інтернеті.
index.html
Будь-хто може отримати доступ до зображення за цим повним посиланням.
Будь ласка, перегляньте наступний реальний приклад у кодовому пісочниці нижче.
Щоб переглянути структуру папок з файлами, перетягніть повзунок на лівій стороні інтерфейсу code sandbox. У верхньому лівому куті ви знайдете кнопку-бургер, позначену трьома смужками. Натиснувши цю кнопку, ви перейдете до організації папок з файлами.
Відносний шлях
Вказує на зображення всередині вашої папки проєкту.
index.html
Це означає, що image.jpg зберігається у директорії images поруч із вашим HTML-файлом.
Будь ласка, перегляньте реальний приклад у кодовому пісочниці нижче. Ви знайдете папку images, яка містить файл sun.png.
Абсолютні шляхи: повні URL-адреси, які працюють з будь-якої точки Інтернету.
Відносні шляхи: локальні шляхи проекту, що використовуються у вашій власній структурі папок.
1. Який тег можна використати для розміщення зображення на вебсайті?
2. Який атрибут є обов'язковим для вказання у тегу <img/>?
Дякуємо за ваш відгук!