HTML. Вставка изображений (Урок 5)

Всем привет! Сегодня перейдем к более интересной теме, а именно вставка изображений. Для этого? что бы наш браузер быстро загружал и открывал страницу с картинкой нам нужно ОПТИМЗИРОВАННОЕ изображение (о том для чего и как оптимизировать изображения читайте тут). Для того, что бы скачать такое заранее оптимизированное изображение перейдите по ссылке и сохраните эту картинку, нажав правой клавишей мыши и выбрав «Сохранить картинку как».

К оглавлению ↑

Тег <img> и расположение папки с изображениями

Для хранения изображений мы в нашей папке HTML создадим еще одну папку «Images»,  и поместим картинку туда.

html вставка изображений

Давайте попробуем вставить нашу картинку с изображением между заголовком и первым абзацем. Для этого в коде пропишем наш тег img. Это сокращение от английского слова image – изображение и это одинарный тег.

Сам тег img браузеру ничего особо не говорит. Поэтому мы должны обязательно указать атрибуты для тега. Самый главный из атрибутов – это атрибут src – источник. Мы должны указать источник нашей картинки. В нашем случае картинка находится внутри папки images относительно папки HTML. Т.е. нам необходимо указать, что наша картинка alarm.jpg находится в папке images. И вот как это выглядит.

<img src=”images/alarm.jpg”>

При таком указании атрибута для тега img, браузер при встрече с данным кодом, зайдет в папку images и возьмет файл – картинку alarm.jpg.

Но это еще не все. Желательно также указать еще и ширину с высотой данной картинки, потому что браузер должен точно знать, сколько места отвести под это изображение, и вся загрузка будет происходить быстрее и самое главное без смещений блоков.

К оглавлению ↑

Атрибуты ширины <width> и высоты <height>

Если же мы не укажем размеры, браузер также отобразит картинку правильно, но это займет у него чуть больше времени, потому что ему придется сначала загрузить картинку и только после этого он сможет определить, сколько места ему нужно выделить. Если же указать размеры для изображения изначально, то это браузеру упростит задачу. Кроме того, изменив в коде размер изображения, браузер также изменит его размеры согласно указанным размерам.

html

Чтобы узнать размер картинки, нажмите по ней правой кнопкой мыши и выберите пункт меню «Свойства». Далее перейдите на вкладку «Подробно».

Как видно, ширина у картинки 307 пикселей, а высота – 450 пикселей. Давайте пропишем размеры в коде:

<img src=”images/alarm.jpg” width=“307” height=”450”>

К оглавлению ↑

Атрибут <alt> для альтернативной подписи

Еще один атрибут тега img, который желательно указывать при добавлении изображения – это alt. Он предназначен для тех пользователей интернет, у кого отображение картинок в браузере отключено. Т.е. если картинки в браузере будут отключены, вместо нашей картинки пользователь увидит то слово или словосочетание, которое мы пропишем для атрибута alt. Кроме того, поисковые системы при определении ценности вашего сайта ориентируются на атрибут alt у изображений, поэтому его постановка обязательна.

<img src=”images/alarm.jpg” width = “307” height=”450” alt=”Будильник”>

Эти четыре атрибута для тега img желательно указывать при добавлении на страницу картинок. Еще раз укажу эти четыре атрибута: источник, ширина, высота и альтернативный текст.

Давайте проверим отображение:

html img атрибуты

Рисунок у нас появился именно в том месте, где и должен был. Но если вы заметили, хотя картинка у нас всего 307 пикселей в ширину, браузер отводит ей всю строку полностью. Очень часто возникает задача сделать так, чтобы текст после картинки обтекал ее, т.е. встал на одной строке с ней. Такая возможность существует. Реализуется она при помощи знакомого нам атрибута align – выравнивание.

К оглавлению ↑

Атрибут «align» для выравнивания изображения

Данный атрибут применим для нашего тега img. Для этой картинки мы можем указать выравнивание по правому краю (right), тогда картинка уйдет в правую часть экрана, и текст ее будет обтекать слева. Или мы можем указать выравнивание по левому краю (left) – тогда картинка уйдет в левую часть экрана, и текст будет обтекать ее справа. Давайте пропишем выравнивание по левому краю для нашего тега Img.

<img src=”images/alarm.jpg” width = “307” height=”450” alt=”Будильник” align=”left”>

Теперь давайте проверим, что получилось в браузере.

html

Видно, что текст обтекает картинку с правой стороны, потому что мы дали для картинки выравнивание по левому краю. Теперь давайте изменим выравнивание на правый край.

<img src=”images/alarm.jpg” width = “307” height=”450” alt=”Будильник” align=”right”>

html

К оглавлению ↑

Атрибут «title» для всплывающей подсказки.

И наконец также один из самых важных атрибутов — «title»  — он делает подсказку для изображения при наведении на него мышкой.

<img src=”images/alarm.jpg” width = “307” height=”450” alt=”Будильник” align=”right” title=»Изображение старого будильника «>

html
На этом данный урок закончен, увидимся в следующем и создадим ссылки!

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

1 Response

  1. Здравствуйте! Я все сделала по уроку. но картинка у меня серый квадратик. В чем дело, поясните. Очень жду ответ. Спасибо. Вот скриншот http://prntscr.com/8wcekn

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *