Вставка изображений
Для встраивания изображения в документ используется тег <IMG>, имеющий обязательный параметр src, который определяет адрес файла с картинкой и alt, определяющий альтернативный текст.
Общий синтаксис добавления изображения следующий.
<img src="URL" alt="альтернативный текст">
Закрывающий тег не требуется, URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес.
Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице. Для примера возьмем файл с рисунком, показанным ниже, он называется sample.gif и размещается в папке images корня сайта.
- Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
- Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
- Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.
- Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif.
Рис. 1. Пример размещения файлов
Рис. 2. Пример размещения файлов
В примере 1 показано несколько способов добавления рисунка на веб-страницу.
Пример 1. Вставка изображения в документ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображения</title>
</head>
<body>
<p><img src="http://www.htmlbook/images/sample.gif" alt="Это абсолютный адрес размещения изображения"></p>
<p><img src="/images/sample.gif" alt="Адрес размещения изображения относительно корня сайта"></p>
<p><img src="images/sample.gif" alt="Адрес размещения изображения относительно текущего HTML-документа"></p>
</body>
</html>
Как правило, в качестве формата графического файла выступает GIF и JPEG.
| Статья опубликована: 06.09.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
serg
09.02.2007
а можете подсказать...почему у меня вместо картинки(будь то фон или как в данных примерах)..вставляется небоьлшой квадрат(ну как если показ изображений заблокиррован)..хотя ничего подобного нет
что тут не так? заранее спасибо за помощь!
<html>
<head>
<title> xxxxx </title>
</head>
<body>
<img src="one.jpeg">
</body>
</html>
что тут не так? заранее спасибо за помощь!
<html>
<head>
<title> xxxxx </title>
</head>
<body>
<img src="one.jpeg">
</body>
</html>
Влад Мержевич
12.02.2007
Проверь, вначале правильный путь к файлу или нет. Или еще переименуй расширение в jpg.
VaviloN
26.02.2007
переименуй jpeg в jpg и все ...
AHAPXUCT
18.07.2007
ковычки убери и jpg поставь
lone
26.07.2007
Вы видимо совсем забыли про alt - необходимый атрибут.
paul
31.07.2007
подскажите пжлста а как вместо картинки вставить флеш ролик с расширением swf
Fynjy
31.08.2007
paul, вставляется с помощью <OBJECT></OBJECT>
http://htmlbook.ru/html/object.html
http://htmlbook.ru/html/object.html
Кед
14.10.2007
Обязательно указывайте размеры изображения в формате
<img src="images/que.gif" width="24" height="14" border="0" />
и да прибудет с вами счастье и любовь!
<img src="images/que.gif" width="24" height="14" border="0" />
и да прибудет с вами счастье и любовь!
Игорь
25.02.2008
подскажите как на сайте типа myspace.com где разрешен хтмл и ксс вставить фоновую картинку, точнее как правильно указать путь к ней
fominok
12.03.2008
Как изображение по центру разместить? Оно у меня с лева стоит, а это растяжка типа! ПЛИЗ ПОМОГИТЕ!!! Это моя работа на информатику! не ее нужно срочно сдать!
AR
19.03.2008
Здравствуйте!
Не знаю, как подступиться к проблеме: требуется вставка изображения в ячейку таблицы. Ширину изображения выставляю в % (width=100%). При изменении разрешения (например, 800х600) Opera масштабирует идеально, а Explorer - нет. Что делать?
С уважением, AR
Не знаю, как подступиться к проблеме: требуется вставка изображения в ячейку таблицы. Ширину изображения выставляю в % (width=100%). При изменении разрешения (например, 800х600) Opera масштабирует идеально, а Explorer - нет. Что делать?
С уважением, AR
LitR
25.03.2008
Lone - атрибут alt не обезательный его можно и не ставить!
Vitos
31.03.2008
fominok, что бы разместитть по центру тебе нужно написать следующую строчку в твоем коде: <center><img src="... .jpg" width="..." height="..." alt="..."></center>
skif
08.04.2008
У меня тоже траблы с вставкой изображения в таблицу вот opera и firefox
Отображают норм а ie как всегда)
вот внизу пример обычн изобр 100x150
вставляю в таблицу и под низом появляеться красн полоса)
Отображают норм а ie как всегда)
вот внизу пример обычн изобр 100x150
вставляю в таблицу и под низом появляеться красн полоса)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" rules="none">
<tr height="50" align="center">
<td width=150 rowspan="2" bgcolor="red"> <IMG src="1.gif"> </td> <td width="150"> stroke 1 number 2 </td> <td width="150"> stroke 1, number 3 </td>
</tr>
<tr height="50" align="center">
<td width="150"> stroke 2, number 1 </td> <td width="150"> stroke 2 number 2 </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" rules="none">
<tr height="100" align="center">
<td width="150" bgcolor="red"> <IMG src="1.gif"> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="red">
<tr><td> <IMG src="1.gif"> </td></tr>
</table>
</body>
</html>
след пример вроде помог но ето не решает проблемы(<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" rules="none">
<tr height="50" align="center">
<td width=150 rowspan="2" bgcolor="red"> <IMG src="1.gif"> </td> <td width="150"> stroke 1 number 2 </td> <td width="150"> stroke 1, number 3 </td>
</tr>
<tr height="50" align="center">
<td width="150"> stroke 2, number 1 </td> <td width="150"> stroke 2 number 2 </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" rules="none">
<tr height="100" align="center">
<td width="150" bgcolor="red"> <IMG src="1.gif"> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="red">
<tr><td> <IMG src="1.gif"> </td></tr>
</table>
</body>
</html>
<img src="1.gif">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="red">
<tr><td><img src="1.gif"></td></tr>
кто нибуть знает как ето убрать c помощю css?? или как то ещ??<table border="0" cellspacing="0" cellpadding="0" bgcolor="red">
<tr><td><img src="1.gif"></td></tr>
skif
08.04.2008
А уже на форуме нашел)
http://forum.htmlbook.ru/viewtopic.php?id=8195
с помощю DIV
но может кто другой способ снает???
буду примного благодарен)
http://forum.htmlbook.ru/viewtopic.php?id=8195
с помощю DIV
но может кто другой способ снает???
буду примного благодарен)
Андрей
01.05.2008
Помогите пожалуйста! Делаю отступ от шапки примерно 300 px и 100% вниз, тем самым расстягивая изображение вниз до конца окна, только проблема в том,
что изображение получается ниже окна, почему?
что изображение получается ниже окна, почему?
ОРо
07.06.2008
не получается, блядь! помогите!
Abureal
21.07.2008
подскажите плиз как фон для страницы задавать? спасибо заранее!