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

Если невнимательно читали учебник по html и не знаете как вставить картинку на сайт держите несколько подсказок:

В тело страницы в нужном месте вставляем следующий код <img src=’http://адрес-сайта/имя.jpg’> где путь к картинке прописан абсолютный т.е. начиная с http, в данном случае в пути мы видим что картинка лежит в корне сайта. В этом случае относительный путь до изображения будет выглядеть так 4.jpg  и соответственно код вставки <img src=’имя.jpg’> 

Но такие случаи бывают редко, чаще всего изображения кладутся в отдельную папку например: images, и тогда код вставки изображения будет с другим путем images/имякартинки.jpg или абсолютным http://сайт.ру/имякартинки.jpg 

<img src=’images/имякартинки.jpg’> или <img src=’http://сайт.ру/images/имякартинки.jpg’> если путаетесь с относительными путями, то используйте абсолютные — не ошибётесь 🙂

И не забываем про расширения картинок, чаще всего в вебдизайне используются изображения с расширениями jpg, jpeg, png, gif. Если вдруг пропишите неправильное расширение то путь к изображению будет не действительным и картинка на сайте отображаться не будет.

Размеры изображений на сайте

Не забываем пользоваться графическими редакторами для подгонки размеров картинок под сайт и уменьшения их веса (например: PaintNet). Ведь некоторые изображения могут весить по нескольку мегабайт, и такая страница сайта будет очень долго загружаться у посетителя. Хотя браузеры прекрасно понимают размеры встроенного изображения, лучшим вариантом будет все же явно указать размеры картинки. Делается это тегами width — ширина и height — высота.

пример использования:

<img src=’images/имякартинки.jpg’ width=’277′ height=’232′> где ширина картинки 277 пикселей а высота 232 пикселя. При использовании специальных программ для вебмастеринга обычно размеры картинок прописываются автоматически.

как сделать картинку ссылкой

Для того что бы вставленная на сайт картинка служила еще и ссылкой т.е. стала кликабельной используем код ссылки <a href

<a href=’нужная ссылка’><img src=’images/имякартинки.jpg’ width=’277′ height=’232′></a> 

Кстати: что бы картинка не обрамлялась добавим в код border=’0′ что будет означать толщину бордюра 0

<a href=’нужная ссылка’><img src=’images/имякартинки.jpg’ width=’277′ height=’232′ border=’0′></a>

Если мы хотим что бы текст обтекал изображение справа то добавляем в код float=’right’ и наоборот, что бы текст обтекал картинку слева float=’left’

<img src=’images/имякартинки.jpg’ width=’277′ height=’232′ border=’0′ float=’left’>

как растянуть картинку

Иногда отсутствует возможность правильно подогнать размер изображения по разным причинам: нет программы, некогда или одна и та же картинка используется на нескольких страницах, он нам нужно что бы размеры были везде разными.

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

Возьмем стандартную картинку

стандартный размер изображения

стандартный размер изображения

Теперь посмотрим в код страницы, видим где прописаны ее размеры. Теперь давайте заменим цифры обозначающие размер на проценты.

Проценты будут работать относительно таблицы в которой находится картинка.

Как растянуть картинку по ширине? Меняем цифры на проценты в коде обозначающем ширину вместо width=’277′ ставим width=’90%’ (на сколько растянуть картинку в процентах решать вам)

стандартный размер изображения

Растянули по ширине

Как растянуть картинку по высоте? Так же, меняем цифры на проценты в коде обозначающем высоту height=’80%’ или любой нужный вам процент высоты.

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