Как вставить рисунок в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
Современный мир был бы слишком скучным без картинок, фотографий и прочей графики. Поэтому любой сайт в Интернете содержит рисунки. Правда, ещё есть исключения, где нет ничего кроме текста. Но это уже большая редкость.
В любом случае веб-мастер должен знать, как выполняется вставка рисунка в HTML.
Как добавить рисунок в HTML
Вставить рисунок в HTML-страницу можно с помощью тега <img> . Делается это примерно так:
<img src=»https://info-master.su/programming/web/html/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D1%84%D0%B0%D0%B9%D0%BB%D1%83%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8″>
Атрибут src является обязательным для тега <img> . Значением этого атрибута должен быть путь к файлу рисунка. Этот путь может быть абсолютным или относительным. Парного тега в HTML у тега <img> нет.
<img src=»images-in-html.jpg»>
В этом примере мы загружаем и отображаем на странице файл images-in-html.jpg , который находится в той же папке, что и сама страница. То есть здесь используется относительный путь. Ниже показан тот самый рисунок:
Если вы не очень хорошо понимаете, что такое путь к файлу, то почитайте об этом здесь.
Размер рисунка в HTML
Тег <img> имеет довольно много атрибутов, с помощью которых можно изменять некоторые параметры рисунка, такие как размер.
Для изменения размера используются атрибуты width (ширина изображения) и height (высота изображения). Эти атрибуты не являются обязательными. Если они не используются, то картинка отображается в своих настоящих размерах. Пример использования:
<img src=»https://info-master.su/programming/web/html/images-in-html.jpg» width=»200″ height=»200″>
Посмотрите, как будет выглядеть этот рисунок в браузере:
Обратите внимание, что рисунок стал искажённым, потому что мы изменили размеры НЕПРОПОРЦИОНАЛЬНО.
Чтобы при изменении размера (уменьшении или увеличении) рисунок не искажался, есть три способа:
- Рассчитать значения ширины и высоты.
- Использовать только один атрибут размера — ширину или высоту.
- Использовать относительное значение атрибута.
Первый способ использовать не советую, так как это пустая трата времени. Но если хотите, то можете пересчитать ширину и высоту. Например, если ваш рисунок имеет размер 640х480, а вы хотите, чтобы в браузере он был меньше в два раза, то надо просто поделить оба значения на 2. Тогда получим 320х240. Эти значения и можно указать в атрибутах width и height .
Пример второго способа:
<img src=»https://info-master.su/programming/web/html/images-in-html.jpg» width=»300″>
Как видите, здесь мы изменяем только ширину рисунка, а высоту не указываем. Поэтому высота будет автоматически вычислена браузером и рисунок отобразится без искажений.
Пример третьего способа:
<img src=»https://info-master.su/programming/web/html/images-in-html.jpg» width color:red;»>10%«>
Как видите, здесь мы указываем размер не в пикселях, а в процентах. И указываем тоже только один размер — ширину (высота также будет вычислена автоматически). В этом примере размер рисунка в браузере будет в десять раз меньше, чем настоящий размер рисунка.
Подпись к рисунку в HTML
Чтобы сделать подпись к рисунку, можно просто вывести нужный текст под рисунком. Например, так:
Чтобы подпись как-то отличалась от остального текста, можно выделить её, например, курсивом и/или другим шрифтом.
Также у тега <img> есть два атрибута, которые так или иначе являются подписями.
Это атрибут alt , который содержит альтернативный текст, то есть текст, который отобразит браузер, если рисунок почему-то не загрузится.
И атрибут title . Значение этого атрибута (текст) отображается в браузере в виде подсказки, когда пользователь наводит мышь на рисунок. Пример:
Разумеется, это далеко не всё, что должен знать о рисунках веб-разработчик. И я ещё буду возвращаться к этому вопросу в следующих статьях. Ну а если хотите знать всё и прямо сейчас, то изучите курс о вёрстке сайтов.
Подписи к картинке в html
Как реализовать такие подписи к картинке? 
Исходная картинка 
Как вариант, можно использовать position: absolute . Также, тег p был удален, так как он не предназначен для размещения изображений.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.