Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег <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="Автомобиль">
Если навести курсор на картинку, то появится всплывающая подсказка:
Комментарии