Зображення
Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Зображення можна легко включити в HTML-документ за допомогою тегу <img>.
index.html
index.css
index.js
src- обов'язковий атрибут. Його значенням є шлях до розташування зображення. Шлях може бути абсолютним та відносним;alt- обов'язковий атрибут. Задає альтернативний текст, який може бути виведений, якщо зображення не може бути відрендерено;widthтаheight- задають розмір зображення у пікселях. Без цих атрибутів зображення буде відображено в оригінальному розмірі.
Атрибут alt
Ми робимо опис зображення інформативним та змістовним. Це допомагає описати зображення для людей з вадами зору або тих, хто не може його побачити. Таким чином, браузер прочитає атрибут alt, і користувач зможе зрозуміти, чому ми маємо саме це зображення.
Уявімо собі наступний приклад. У нас є джерело про кінні перегони. Ми хочемо показати, як спортсмени готуються до перегонів.
Поганим значенням для атрибута alt буде:
Хорошим значенням для атрибута alt буде:
Атрибут src
Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказівки розташування файлу зображення.
Абсолютний шлях
Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:
Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.
Будь ласка, ознайомтеся з наступним реальним прикладом у CodeSandbox нижче:
Примітка
Щоб переглянути структуру папок файлів, перетягніть повзунок на лівій стороні інтерфейсу CodeSandbox. У верхньому лівому куті ви побачите кнопку у вигляді бургера з трьома смужками. Натиснувши на цю кнопку, ви перейдете до організації файлових папок.
Відносний шлях
Вказує розташування файлу зображення відносно поточного документа. Наприклад:
Це означає, що файл image.jpg знаходиться в каталозі images.
Будь ласка, перевірте реальний приклад, наведений у CodeSandbox нижче. Ви побачите папку images, яка містить файл sun.png.
Примітка
Якщо підсумувати різницю між відносними та абсолютними шляхами, то абсолютний шлях - це фактичне посилання, за яким будь-хто може отримати доступ до зображення. З іншого боку, відносний шлях - це посилання у контексті вашого власного проекту. Він посилається на локальне зображення і шлях, до якого може отримати доступ будь-хто у проекті.
Все було зрозуміло?
Зміст курсу
Знайомство з HTML
Знайомство з HTML
Зображення
Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Зображення можна легко включити в HTML-документ за допомогою тегу <img>.
index.html
index.css
index.js
src- обов'язковий атрибут. Його значенням є шлях до розташування зображення. Шлях може бути абсолютним та відносним;alt- обов'язковий атрибут. Задає альтернативний текст, який може бути виведений, якщо зображення не може бути відрендерено;widthтаheight- задають розмір зображення у пікселях. Без цих атрибутів зображення буде відображено в оригінальному розмірі.
Атрибут alt
Ми робимо опис зображення інформативним та змістовним. Це допомагає описати зображення для людей з вадами зору або тих, хто не може його побачити. Таким чином, браузер прочитає атрибут alt, і користувач зможе зрозуміти, чому ми маємо саме це зображення.
Уявімо собі наступний приклад. У нас є джерело про кінні перегони. Ми хочемо показати, як спортсмени готуються до перегонів.
Поганим значенням для атрибута alt буде:
Хорошим значенням для атрибута alt буде:
Атрибут src
Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказівки розташування файлу зображення.
Абсолютний шлях
Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:
Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.
Будь ласка, ознайомтеся з наступним реальним прикладом у CodeSandbox нижче:
Примітка
Щоб переглянути структуру папок файлів, перетягніть повзунок на лівій стороні інтерфейсу CodeSandbox. У верхньому лівому куті ви побачите кнопку у вигляді бургера з трьома смужками. Натиснувши на цю кнопку, ви перейдете до організації файлових папок.
Відносний шлях
Вказує розташування файлу зображення відносно поточного документа. Наприклад:
Це означає, що файл image.jpg знаходиться в каталозі images.
Будь ласка, перевірте реальний приклад, наведений у CodeSandbox нижче. Ви побачите папку images, яка містить файл sun.png.
Примітка
Якщо підсумувати різницю між відносними та абсолютними шляхами, то абсолютний шлях - це фактичне посилання, за яким будь-хто може отримати доступ до зображення. З іншого боку, відносний шлях - це посилання у контексті вашого власного проекту. Він посилається на локальне зображення і шлях, до якого може отримати доступ будь-хто у проекті.
Все було зрозуміло?
