Размещение иллюстраций и графических элементов
Файлы иллюстраций предназначенных для использования в HTML-документах, особенно предназначенных для публикации в Интернете, должны быть записаны в форматах GIF или JPEG (расширения имён файлов .gif и .jpg соответственно). Для встраивания графики в HTML-документ применяется тег <IMG>, который может содержать следующие параметры:
параметр
SRC
единственный обязательный параметр тега <IMG>, значение которого адрес файла с изображением. Например:
  • <IMG SRC=picture.gif> - в этом случае файл изображения и иллюстрируемый им документ находятся в одном каталоге
  • <IMG SRC=Image/picture.gif> - в этом случае графический файл размещён в каталоге, вложенном в каталог, содержащий иллюстрируемый html-файл
  • <IMG SRC=../picture.gif> - в этом случае файл изображения находится на один уровень выше каталога,содержащего иллюстрируемый им документ
параметр
ALT
значение параметра - текстовая строка, которая будет выводится браузером, если отключена загрузка графики. Эта же строка комментария будет выводится при наведении на рисунок курсора мыши.
параметры WIDTH и HEIGHT параметры, управляющие размерами выводимого рисунка. Значение задаётся в процентах или в пикселях от ширины (WIDTH) и высоты (HEIGHT) всей доступной области. Если эти значения не совпадают с истинными размерами рисунка, то браузер автоматически перемасштабирует изображение, что может привести к его искажению (смотри Пример 6).

Пример 6. Вставка рисунка, изменение размера изображения
Пример HTML кода
<IMG SRC="" WIDTH=" " HEIGHT=" ">
Отображение в браузере

Комбинирование иллюстраций и текста
Для того, чтобы вставить рисунок между абзацами текста необходимо тэг <IMG> заключить в контейнер <P>...</P>, задав значение параметра ALIGN, определяющего выравнивание рисунка по горизонтали
Для выполнения обтекания рисунка текстом также используется параметр ALIGN, но входящий в состав тэга <IMG>. Его значение может быть равным LEFT (тогда рисунок выравнивается по левому краю, а текст обтекает справа) или RIGHT (рисунок справа, текст слева). Для выделения иллюстраций в тексте можно в составе тэга <IMG> использовать параметры:
параметр
BORDER
задаёт вокруг иллюстрации рамку чёрного цвета, толщина рамки определяется значением параметра в пикселях.
параметр
HSPACE
задаёт поля слева и справа от рисунка
параметр
VSPACE
задаёт поля сверху и снизу от рисунка
Для вставки небольшого рисунка внутри строки текста достаточно поместить соответствующий тэг <IMG> в нужное место текста, не используя никаких параметров. Однако в случае, когда высота рисунка превышает строку текста, полезно использовать следующие значения параметра ALIGN:
параметр
TOP
верхняя линия строки текста выравнивается по верху рисунка
параметр
MIDDLE
строка текста выравнивается по средине рисунка
параметр
BOTTOM
нижняя линия строки текста выравнивается по нижнему краю рисунка

Пример 7. Выравнивание, выделение рисунка
Пример HTML кода
<IMG SRC="pic1.jpg" ALIGN=" " HSPACE=" " VSPACE=" " BORDER=" ">'текст'
Отображение в браузере

  1. Выполните Тест 4
  2. Используя шаблон base.html,текст из файла task4.txt, рисунки 4a.jpg, 4b.jpg создайте страницу
    • заголовок страницы - Задание 4
    • содержание страницы - текст из файла task4.txt, оформленный иллюстрациями.
    • имя файла станицы - 4.html
  3. Сохраните страницу в рабочей папке в указанным именем.


© Смирнов Е.А. 2004 г.