Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / HTML /
Как вставить рисунок в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
>>> Вёрстка сайта с нуля 2.0 >>>
Современный мир был бы слишком скучным без картинок, фотографий и прочей графики. Поэтому любой сайт в Интернете содержит рисунки. Правда, ещё есть исключения, где нет ничего кроме текста. Но это уже большая редкость.
В любом случае веб-мастер должен знать, как выполняется вставка рисунка в HTML.
Как добавить рисунок в HTML
Вставить рисунок в HTML-страницу можно с помощью тега
<img>. Делается это примерно так:
<img src="Путь к файлу картинки">
Атрибут src
является обязательным для тега <img>. Значением этого
атрибута должен быть путь к файлу рисунка. Этот путь может быть абсолютным
или относительным. Парного тега в HTML у тега <img> нет.
Пример:
<img src="images-in-html.jpg">
В этом примере мы загружаем и отображаем на странице файл
images-in-html.jpg, который находится в той же папке, что и сама страница. То есть здесь используется относительный путь. Ниже показан тот самый рисунок:
Если вы не очень хорошо понимаете, что такое путь к файлу, то почитайте об этом здесь.
Размер рисунка в HTML
Тег <img> имеет довольно много атрибутов, с помощью которых можно изменять некоторые параметры рисунка, такие как размер.
Для изменения размера используются атрибуты width
(ширина изображения) и height (высота изображения). Эти атрибуты не являются обязательными. Если они не используются, то картинка отображается в своих настоящих размерах. Пример использования:
<img src="images-in-html.jpg" width="200" height="200">
Посмотрите, как будет выглядеть этот рисунок в браузере:
Обратите внимание, что рисунок стал искажённым, потому что мы изменили размеры НЕПРОПОРЦИОНАЛЬНО.
Чтобы при изменении размера (уменьшении или увеличении) рисунок не искажался, есть три способа:
- Рассчитать значения ширины и высоты.
- Использовать только один атрибут размера - ширину или высоту.
- Использовать относительное значение атрибута.
Первый способ использовать не советую, так как это пустая трата времени.
Но если хотите, то можете пересчитать ширину и высоту. Например, если ваш
рисунок имеет размер 640х480, а вы хотите, чтобы в браузере он был меньше
в два раза, то надо просто поделить оба значения на 2. Тогда получим
320х240. Эти значения и можно указать в атрибутах width и height.
Пример второго способа:
<img src="images-in-html.jpg" width="300">
Как видите, здесь мы изменяем только ширину рисунка, а высоту не указываем. Поэтому высота будет автоматически вычислена браузером и рисунок отобразится без искажений.
Пример третьего способа:
<img src="images-in-html.jpg" width="10%">
Как видите, здесь мы указываем размер не в пикселях, а в процентах. И указываем тоже только один размер - ширину (высота также будет вычислена автоматически). В этом примере размер рисунка в браузере будет в десять раз меньше, чем настоящий размер рисунка.
Подпись к рисунку в HTML
Чтобы сделать подпись к рисунку, можно просто вывести нужный текст под рисунком. Например, так:
<p> <center> <img src="images-in-html.jpg" width="200"> <br> <i>Подпись к рисунку</i> </center> </p>
Чтобы подпись как-то отличалась от остального текста, можно выделить её, например, курсивом и/или другим шрифтом.
Также у тега <img> есть два атрибута, которые так или иначе являются подписями.
Это атрибут alt, который содержит альтернативный текст, то есть текст, который отобразит браузер, если рисунок почему-то не загрузится.
И атрибут title. Значение этого атрибута (текст) отображается в браузере в виде подсказки, когда пользователь наводит мышь на рисунок. Пример:
<img src="images-in-html.jpg"
alt="Если рисунок не загрузится"
title="Если навести мышь на рисунок">
Разумеется, это далеко не всё, что должен знать о рисунках веб-разработчик. И я ещё буду возвращаться к этому вопросу в следующих статьях. Ну а если хотите знать всё и прямо сейчас, то изучите курс о вёрстке сайтов.