На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры:
- GIF (от английского Graphic Interchange Format);
- JPEG (от английского Joint Photographer Expert Group);
- PNG (от английского Portable Network Graphic).
Рисунки обычно размещаются в отдельном подкаталоге сайта, который часто называют IMAGES
На больших сайтах может использоваться очень много рисунков.
Чтобы легче было разбираться в файлах, эти рисунки распределяют по папкам внутри подкаталога IMAGES. Для удобства этим папкам дают имена соответствующих страниц, на которых располагаются рисунки.
Фон страницы
Рисунок можно установить в качестве фона страницы.
Для этого используется атрибут BACKGROUND тега <BODY>.
Если указано только имя файла, рисунок должен находиться в том же каталоге, что и сама Web-страница
<BODY BACKGROUND="fon1.jpg">
Если рисунок расположен в подкаталоге IMAGES или в одной из его папок, необходимо указать путь к файлу рисунка, например:
<BODY BACKGROUND="images/index/fon1.jpg">
Если рисунок меньше, чем размер окна браузера, фон будет вымощен рисунками-прямоугольниками как плиткой.
Для фона используют специальные рисунки, которые не дают швов при стыковке.
На фоновом рисунке текст должен хорошо читаться !
В качестве фона могут быть использованы анимационные файлы
Вставка рисунка в документ
Для вставки рисунка в Web-документ используется тег <IMG> (от английского image — изображение).
Этот тэг имеет несколько атрибутов, из которых обязателен лишь SRC (от английского source — источник), который указывает, где находится рисунок.
Основные атрибуты тега <IMG>
src - Путь к графическому файлу.
align - Выравнивание изображения.
height - Высота изображения.
width - Ширина изображения.
hspace - Горизонтальный отступ от изображения до окружающего текста.
vspace - Вертикальный отступ от изображения до окружающего текста.
border - Толщина рамки вокруг изображения.
Выравнивание рисунка
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице.
Рисунок воспринимается браузером как «большая буква» в тексте.
Поэтому важно указать правильное выравнивание рисунка относительно текста или других изображений на веб-странице.
Способ выравнивания изображений задается значениями атрибута align тега <IMG>.
Значения атрибута align тега <IMG>
left - По левой границе абзаца с обтеканием текстом.
right - По правой границе абзаца с обтеканием текстом.
top- По верхней границе текущей строки.
bottom - По нижней границе текущей строки (такой тип выравнивания устанавливается по умолчанию).
middle - По середине текущей строки.
Пример
Дополнительные способы выравнивания
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице.
Для выравнивания изображения по центру страницы можно применить парный тег <CENTER>...</CENTER> внутрь которого вкладывается тег <IMG>. В этом случае атрибут align в теге <IMG> не указывается.
Пример
Если рисунки прилегают вплотную к тексту, это мешает читать. Поэтому рекомендуется делать отступы, отделяющие рисунок от текста.
Вертикальные и горизонтальные отступы задаются в атрибутах VSPACE (от английского vertical space - вертикальный отступ) и HSPACE (от английского horizontal space - горизонтальный отступ) тэга <IMG>.
Пример
Без отступов:
<img src="/khotenovskaya/html_tags/egik.jpg" align="left">
С отступами:
<img src="/khotenovskaya/html_tags/egik.jpg" align="left" hspace="10" vspace="10">