Язык гипертекстовой разметки
HTML

   Урок 5

Тема: рисунки.

В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями .gif), JPEG (файлы с расширениями .jpg и .jpeg) или PNG (соответственно, с расширением .png) и тег img (от английского «image» - изображение) с атрибутом src (англ. «source» - источник), указывающим браузеру, где этот рисунок находится. Путь к файлу рисунка может быть относительным (т.е. относительно текущего html-файла) или абсолютным, например:

<img src="foto.jpg"> - рисунок "foto.jpg" находится в той же папке, что и текущий документ;

<img src="images/foto.jpg"> - перейти в подкаталог "images" текущего каталога и взять файл оттуда;

<img src="../images/foto.jpg"> - подняться вверх на один шаг, перейти в папку "images" и взять рисунок оттуда;

<img src="../../images/foto.jpg"> - подняться вверх на два уровня, перейти в папку "images" и взять рисунок оттуда;

<img src="/images/foto.jpg"> - это путь относительно корня домена, т.е. надо подняться на самый верхний уровень сайта, а затем перейти в папку "images" и взять рисунок оттуда;

<img src="http://www.example.com/images/my/foto.jpg"> - указание полного пути к файлу (абсолютный путь). Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.

Предпочтительнее применять относительные пути, потому что при переезде сайта на другой домен или адрес ничего не «поломается», сайт будет фунционировать, как и прежде.

У данного тэга могут быть следующие атрибуты:

• ALT="какой-то текст" - альтернативный текст. Текст, который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений (отключают многие - для экономии времени на медленных линиях связи).
• BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0" рамка не рисуется.
• WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).
• HEIGHT="n" - высота изображения в пикселах или в процентах от высоты экрана.
• HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным).
• VSPACE="n" - вертикальный отступ от картинки в пикселах.
• ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя атрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка (CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение атрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.

Значения n перечисленных выше атрибутов по умолчанию равны нулю.

Рисунок может быть ссылкой. Для этого <IMG SRC="..."> разместите между тэгами <A HREF="..."> и </A>. Вокруг рисунка появится рамка, показывающая, что он является ссылкой. Если рамка портит внешний вид документа, то укажите в атрибутах рисунка BORDER="0".