Картинки
В этом уроке мы научимся размещать на сайте изображения (файлы с расширением 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">
Есть вопросы? Задайте их через форму комментариев.
Добавить комментарий