Картинки

В этом уроке мы научимся размещать на сайте изображения (файлы с расширением jpg, gif, png, bmp и т.п.). А также делать так, чтобы картинка была ссылкой.

Возьмите понравившуюся Вам картинку или фотографию, сохраните ее в той же папке, где лежит файл index.html под именем picture.jpg.


Вставим в код странички index.html следующую строку с тегом <img> (не требует закрывания):

<img src="picture.jpg">

Теперь на Вашей страничке появилась картинка.

Если Вы захотите положить картинку не в корневую папку (папка, где лежит index.html), а например, в папку images:

То картинку в этом случае нужно будет вставлять строчкой:

<img src="images/picture.jpg">

Если картинка лежит в папке, находящейся на уровень выше, чем папка в которой лежит Ваша страничка, то код должен быть таким:

<img src="../picture.jpg">

Если Вы хотите вставить картинку с другого сайта, то вставьте строчку:

<img src="http://www.site_name.ru/images/picture.jpg">

Что еще можно сделать с картинками… Можно их выравнивать относительно текста, например. Здесь нам снова поможет атрибут align:

<img src="pictire.jpg" align="left"> – картинка будет располагаться слева, а текст справа

<img src="pictire.jpg" align="right"> – картинка будет располагаться справа, а текст слева

<img src="pictire.jpg" align="top"> – картинка будет располагаться вверху, а текст внизу

<img src="pictire.jpg" align="bottom"> – картинка будет располагаться внизу, а текст вверху

Также для картинок есть дополнительные атрибуты:

<img src="picture.jpg" hspace="30px" vspace="10px" >

Hspace – задает расстояние между картинкой и текстом по горизонтали, величина указывается в пикселях. Vspace— задает расстояние между картинкой и текстом по вертикали.

<img src="picture.jpg" alt="Картинка">

Alt – описание картинки, аналог title для тега <a> (см. урок «Ссылки»).

<img src="picture.jpg" width="150px" height="200px">

Здесь все просто: width – ширина картинки, height – высота картинки в пикселях. Если не указывать значения данных атрибутов, то картинка будет отображаться на сайте в своем оригинальном размере. Если же Вы хотите поместить на сайт уменьшенную копию картинки, то используйте эти атрибуты, указав нужные Вам размеры.

<img src="picture.jpg" border="2px" bordercolor="#CCCCCC">

Как убрать рамку у картинки (png, jpg, gif и др.)?

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

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

Картинка-ссылка.

Чтобы сделать картинку ссылкой, нужно поместить эту картинку в тег <a>:

<a href="galery.html"><img src="picture.jpg"></a>

Если Вы хотите поместить на сайте маленькую картинку, но при нажатии на нее получить большую картинку (в оригинальном размере), необходимо сделать следующее:

<a href="picture_big.jpg"><img src="picture_small.jpg"></a>

Чтобы большая картинка открывалась в новом окне:

<a href="picture_big.jpg" target="_blank"><img src="picture_small.jpg"></a>

Картинка-фон.

Чтобы сделать фон не просто одноцветным, а картинкой, нужно указать это в атрибуте background:

<body background="picture.jpg">

Однако следует также указать и альтернативный цвет фона (не картинку) на случай, если у пользователя данная картинка не загрузится. Это можно сделать при помощи атрибута bgcolor:

<body bgcolor="#CCCCCC" background="picture.jpg">

Понравилась статья?

Поделитесь ей с друзьями:

Есть вопросы? Задайте их через форму комментариев.
 

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

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