Лекция: Графические изображения

На каждую web страничку можно поместить хоть какое количество рисунков. Вы сможете использовать готовые графические изображения либо сделать их сами. Поглядим, как воткнуть в web документ уже готовый набросок.

Графические изображения, которые вы вставляете в свои web документы, обязаны быть сделаны в таком графическом формате, который поддерживается браузером. Обычные форматы web графики — GIF, JPG и PNG. Размеры их файлов малы по сопоставлению с другими форматами, что существенно уменьшает время загрузки из сети.

Вставим на первую страничку нашего веб-сайта набросок image.gif, который обычно находится в папке Windows, другими словами той папке, в какой установлена операционная система Windows. Сначала, этот файл следует скопировать в папку Web, которую мы сделали для хранения файлов веб-сайта.

Скопируйте файл image.gif либо хоть какой другой файл с расширением .gif в папку Web.

Для вставки изображения в web документ употребляется одиночный тег <img> с атрибутом src, значение которого соответствует имени вставляемого файла либо его адресу в Веб. При помощи необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку шириной 1 пиксел. Таким способом, тег, вставляющий набросок, должен смотреться последующим образом:

<img src=«image.gif» border=«1»>

Вставим его после заголовка Добро пожаловать на страницу компании SD!

Внимание! Тег border является устаревшим тегом, потому рекомендуется использовать обрамление через стили: style=«border-width:1px;».

Операционная система Windows не различает регистр букв в заглавиях названий файлов, но операционные системы семейства Unix различают его, потому следует кропотливо смотреть за тем, чтоб название файла в теге указывалось с соблюдением регистра. Начинающие web дизайнеры нередко недоумевают: почему набросок был виден на страничке при тестировании на локальном компьютере и не возникает при загрузке страничек с удаленного сервера. А все дело в том, что они указали image.gif, а на диске хранится image.gif.

Воткните пустую строчку после элемента <h1>Добро пожаловать на страницу компании SD!</h1> и введите в ней тег <img src=«image.gif» style=«border-width:1px;»> для включения изображения в документ. По умолчанию набросок выравнивается налево.