Разделы

Добавление рисунка на веб-страницу

Метки:

изображение

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

Например, для HTML синтаксис будет следующий.

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

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес.

Замечание

Браузер определяет тип документа (XHTML или HTML) по указанному тегу <!DOCTYPE>, он должен стоять в самой первой строке кода.

Рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется 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.

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

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

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

В примере 1 показано несколько способов добавления рисунка на веб-страницу.

Пример 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=windows-1251">
  <title>Добавление изображений</title>
 </head>
 <body>

  <p><img src="http://www.webimg/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.

Если после добавления изображения оно не отображается на веб-странице, проверьте следующие моменты.

Имя файла должно писаться с учетом регистра. Операционная система Linux, на базе которой преимущественно устанавливается хостинг, щепетильно относится к именам файлов, поэтому файлы img.gif, IMG.gif и Img.gif воспринимаются как разные. Чтобы указанная особенность не привела к ошибкам с отображением рисунков, всегда задавайте имена файлов в нижнем регистре. Иными словами пишите имена маленькими буквами.
Графические файлы с русскими символами в названиях файлов не всегда корректно отображаются в браузерах. Лучше использовать латинские символы.

Разделы

Термины

Добавление рисунка на веб-страницу

Отправить комментарий