Краткое объяснение элемента <img> в HTML

1. Изображения
2.4.7 Использование изображений

2. Содержание:
• Тег <img>
• Атрибуты тега img

3. Тег <img> используется для вставки графического изображения
(картинки) в HTML документ.

4. Пример 2. Google картинки

5. Пример 3. Instagram Web

6. HTML тег <img> имеет два обязательных атрибута: src - адрес файла
картинки и alt - альтернативный текст, который будет отображен, если
картинка не может быть загружена. Также не лишним будет
использование глобального атрибута title.

7. Пример использования в HTML коде

8. Атрибут src
• В атрибуте src указывается адрес изображения, которое
необходимо отобразить на веб странице.
• Адрес может быть представлен в виде URL, например:
<img src="http://images.com/images/the-eiffel-tower.jpg" alt="
Эйфелева башня">
• Или может содержать путь в файловой системе, например:
<img src="the-eiffel-tower.jpg" alt="Эйфелева башня">
<img src="images/the-eiffel-tower.jpg" alt="Эйфелева башня">
<img src="./images/the-eiffel-tower.jpg" alt="Эйфелева башня">

9. Атрибуты width, height. Правильное соотношение сторон.
Данное изображение имеет атрибуты widht="476px" и height="322px". Это правильное
соотношение сторон.

10. Неправильное соотношение сторон
Вот что будет если мы укажем width="900px" и height="322px"

11. И еще один пример, излишняя высота изображения
Если же мы укажем width="476px" и height="700px", то получим следующее:

12. «Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти Европалык Союзу тарыбынан
финансылоо болгон.
Бул документин мазмуну толугу менен IT Академиянын жоопкерчилиги жана эч кандай жолунда
Европалык Комиссиянын көз карашын көргөзбөйт.
Проект «IT тренинг для людей с ограниченными возможностями» финансирован Европейским Союзом.
Содержание этого документа полностью является ответственностью IT Academy и никак не отражает
взгляды Европейской Комиссии.
The project “Promotion of IT training for people with disabilities” is financed by the European Union.
The content of this document is the sole responsibility of IT Academy and can in no way be taken to reflect the views of
the European Commission.
#programmingwithoutbarriers
#cheksizprogramming