Вставка рисунков
Для встраивания Имаги в файл используется тег <IMG>, имеющий обязательный параметр src, который определяет адрес файла с картинкой и alt, определяющий альтернативный контент.
Общий синтаксис добавления Имаги следующий.
<img src="URL" alt="альтернативный контент">
Закрывающий тег не требуется, URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес.
просмотрим несколько указаний пути к рисунку для размещения его на web-странице. Для примера возьмем файл с рисунком, показанным ниже, он имеется ввиду sample.gif и размещается в папке images корня с нашего сайта.
- Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня с нашего сайта. Например, адрес с нашего сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на web-сервере, на локальном компьютере они действовать не будут.
- Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Internetе, даже при сохранении web-страницы на локальный компьютер.
- Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и web-страница находятся в разных папках, которые размещены на одном уровне. На рис. 1 показан файл index.ШТМЛ, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.ШТМЛ будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.
- Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 2, относительный путь к рисунку pic.gif из файла index.ШТМЛ будет images/pic.gif.
Рис. 1. Пример размещения файлов
Рис. 2. Пример размещения файлов
В примере 1 показано несколько способов добавления рисунка на web-страницу.
Пример 1. Вставка Имаги в файл
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Имаги</title>
</head>
<body>
<p><img src="http://www-html.ru/images/sample.gif" alt="Это абсолютный адрес размещения Имаги"></p>
<p><img src="/images/sample.gif" alt="Адрес размещения Имаги относительно корня с нашего сайта"></p>
<p><img src="images/sample.gif" alt="Адрес размещения Имаги относительно текущего ШТМЛ-объекта"></p>
</body>
</html>
Как правило, в качестве формата графического файла выступает GIF и JPEG.
| Статья опубликована: 06.09.2009 | Последнее обновление: 16.04.2009 |