Добавление рисунка
Для добавления изображения на веб-страницу используется тег <img>,
атрибут src которого определяет адрес графического
файла. Общий синтаксис добавления изображения будет следующий.
<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://),
то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с
указанного адреса в Интернете, даже при сохранении веб-страницы на локальный
компьютер.
- Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок
и веб-страница находятся в разных папках, которые размещены на одном уровне.
На рис. 10.1 показан файл index.html, в который требуется поместить
рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif.
Возможны случаи хранения файлов, что обращение из одного файла к другому
превращается в набор двоеточий, например: ../../../images/pic.gif.
Рис. 10.1. Пример размещения файлов
- Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что
и текущий файл и папка с изображением находятся на одном уровне. Как показано
на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html
будет images/pic.gif.
Рис. 10.2. Пример размещения файлов
В примере 10.1 показано несколько способов добавления рисунка
на веб-страницу.
Пример 10.1. Вставка изображения в документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Добавление рисунков</title>
</head>
<body>
<p><img src="http://webimg.ru/themes/cloverfield/images/ref_collage.gif"
alt="Это абсолютный адрес размещения изображения"></p>
<p><img src="/example/images/home.png"
alt="Адрес размещения изображения относительно корня сайта"></p>
<p><img src="images/home.png"
alt="Адрес размещения изображения относительно текущего HTML-документа"></p>
</body>
</html>
Как правило, в качестве формата графического файла выступает GIF и JPEG
RSS
