HTML по шагам
       

Изображения


Для встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.

Для указания адреса изображения можно задавать как абсолютный, так и относительный путь. В общем случае, правила для добавления изображений те же, что и при создании ссылок.

Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице.

  • Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ruimages/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.

  • Если перед адресом добавляется упоминание протокола HTTP (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.

  • Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис.9.1 показан файл index.html, в который требуется поместить рисунок sample.gif. Тогда относительный путь к изображению из index.html будет ..images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../..images/pic.gif.

    • Рис. 9.1. Пример размещения файлов

  • Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис.9.2, относительный путь к рисунку sample.gif из файла index.html будет images/pic.gif.

    • Рис. 9.2. Пример размещения файлов

    В примере 9.1 показаны несколько способов указания пути к графическому файлу при добавлении изображений на веб-страницу.

    Пример 9.1. Вставка изображения в документ

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>

    <meta content="text/html; charset=Windows-1251" http-equiv="content-type">

    </head>

    <body>

    <img src="http://www.htmlbookimages/sample.gif"> - абсолютный адрес размещения изображения

    <img src="images/sample.gif"> - адрес размещения изображения относительно корня сайта



    <img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа

    </body>

    </html>



    Содержание раздела