Построение сайта, продвижение, работа в сети

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

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

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

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

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

<img src=”mersedes.jpg”>

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

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

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

Размеры изображения

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

Ширина указывается при помощи атрибута width, а высота – height. Таким образом, наша запись может приобрести, например, такой вид:

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

Если эти параметры записываются через атрибуты, то единицы измерения можно не указывать. Если понадобиться изменить какой-либо размер изображения, например, ширину сделать 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 комментарий: Как вставить картинку на сайт правильно

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

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

Поиск Яндекса




Группа Компьютерная грамотность
Подпишитесь на новости

Введите ваш email адрес: