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

Как вставить картинку на сайтКак вставить картинку на сайт, какие для этого применяются атрибуты? Эти вопросы встают перед всеми, кто открывает свой сайт.

Потому как известно, что текст на страницах воспринимается значительно лучше, если он снабжен изображениями.

Содержание:

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

Вставить картинку на страницу можно с помощью одинарного тега img, при этом надо обязательно указать, откуда берется картинка.

Делается это при помощи атрибута src, название картинки и ее расширение приводятся в кавычках, причем название должно быть прописано буквами латинского алфавита:

<img src=”mersedes.jpg”>

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

<img src=”img/mersedes.jpg”>

Если на сайте используется система управления содержимым типа WordPress, то нужные папки, куда нужно вставить картинки, создаются автоматически. Иначе, чтобы вставить картинку, нужно создавать специальную папку в корне сайта.

Размеры картинки

  1. Как вставить картинку на сайт, чтобы правильно отобразить рисунок на странице? Для этого, а также для более быстрой загрузки, нужно указать  ширину и высоту картинки.
  2. Ширина указывается при помощи атрибута width, а высота – height. Таким образом, наша запись может приобрести, например, такой вид:

<img src=”img/mersedes.jpg” width =”150” height=”120”>

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

4. Если понадобиться изменить какой-либо размер картинки, например, ширину сделать 200 px, то высота автоматически масштабируется под указанный параметр ширины.

Размеры картинки можно определить, выбрав в контекстном меню Свойства, где во вкладке Подробно приводятся значения ширины и высоты.

Эти значения и надо вставить. При этом надо следить, чтобы ваши размеры совпадали с реальными, иначе браузер поправит, но поправит по своему, то есть, как обычно, криво.

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

Расположение текста относительно картинки

Каким образом должен располагаться текст относительно картинки, определяет атрибут align – выравнивание, с помощью которого указывается, как текст будет обтекать нашу картинку.

Например, left будет означать, что картинка будет смещаться влево и текст будет обтекать ее по правому краю. Таким образом, наша запись примет вид:

<img src=”img/mersedes.jpg” width =”150” height=”120” align=”left”>

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

Отступ картинки до текста

mersedes

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

Существует для этого специальный атрибут, который отвечает именно за этот отступ. Пишется он как hspace и в кавычках указывается его значение, например, 10 пикселей:

<img src=”img/mersedes.jpg” width =”150” height=”120” align=”left” hspace=”10”>

Аналогично есть атрибут, который отвечает за верхнюю границу. Пишется он точно также, только vspace.

Текст вместо картинки

Следующий важный атрибут тега ipg –  alt. Он приобретает важное значение, когда пользователь просматривает страничку с отключенными изображениями. Либо по каким-то причинам картинка не отобразилась на веб-странице.

В этом случае, вместо картинки пользователь увидит текст, который будет прописан в кавычках alt:

<img src=”img/mersedes.jpg” width =”150” height=”120” align=”left” hspace=”10” alt=”автомобиль”>

Граница картинки

И еще один атрибут, который надо упомянуть это border – граница, край. Он требуется в том случае, когда, например, совсем не нужна рамка изображения. В этом случае задается border=”0”:

<img src=”img/mersedes.jpg” width =”150” height=”120” align=”left” hspace=”10” alt=”автомобиль”  border=”0”>

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

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

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

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

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

1 комментарий к “Как вставить картинку на сайт правильно”

Оставьте комментарий

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