Как вставить картинку в HTML

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег <img>. Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt:

<img src="image.jpg" alt="Альтернативный текст">

При помощи атрибута src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Альтернативный текст

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

<img src="image.jpg" alt="Альтернативный текст" width="300" height="250">

Единицами измерения по умолчанию служат пиксели, и в html-коде для ширины и высоты изображения их указывать не нужно.

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

Путь к изображению

то путь будет состоять из названия изображения и его расширения:

<img src="car.jpg" alt="">

Если картинку перенести в папку img:

Путь к изображению

то путь к ней будет начинаться с названия папки, в которой она находится:

<img src="img/car.jpg" alt="">

Если файл index.html поместить в папку files:

Путь к изображению

то путь к изображению будет начинаться с конструкции ../:

<img src="../img/car.jpg" alt="">

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

<img src="../../img/car.jpg" alt="">

и т.д.

Всплывающая подсказка

В этом уроке познакомимся с еще одним очень полезным атрибутом, который можно применять практически ко всем тегам – это атрибут title, он служит для отображения всплывающей подсказки. Например:

<img src="car.jpg" alt="Альтернативный текст" width="300" height="250" title="Автомобиль">

Если навести курсор на картинку, то появится всплывающая подсказка:

Всплывающая подсказка


Видео к уроку

Комментарии

Аватар пользователя Кирилл
Кирилл ⋅ 02 ноября 2014
при написании кода <img src "jmg/Avto.jpg" width="320" height="240" alt="Москвич" align="right" hspace="30" vspace="30" title="Москвич"> не отображается изображение. Пожалуйста подскажите в чем ошибка.
Аватар пользователя Кирилл
Кирилл ⋅ 02 ноября 2014
Все, увидел свою ошибку)

Добавить комментарий