Размещение иллюстраций и графических элементов |
Файлы иллюстраций предназначенных для использования в 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).
|
Комбинирование иллюстраций и текста |
Для того, чтобы вставить рисунок между абзацами текста необходимо тэг <IMG> заключить в контейнер <P>...</P>, задав значение параметра ALIGN, определяющего выравнивание рисунка по горизонтали |
Для выполнения обтекания рисунка текстом также используется параметр ALIGN, но входящий в состав тэга <IMG>. Его значение может быть равным LEFT (тогда рисунок выравнивается по левому краю, а текст обтекает справа) или RIGHT (рисунок справа, текст слева). Для выделения иллюстраций в тексте можно в составе тэга <IMG> использовать параметры: |
параметр
BORDER |
задаёт вокруг иллюстрации рамку чёрного цвета, толщина рамки определяется значением параметра в пикселях.
|
параметр
HSPACE |
задаёт поля слева и справа от рисунка
|
параметр
VSPACE |
задаёт поля сверху и снизу от рисунка
|
Для вставки небольшого рисунка внутри строки текста достаточно поместить соответствующий тэг <IMG> в нужное место текста, не используя никаких параметров. Однако в случае, когда высота рисунка превышает строку текста, полезно использовать следующие значения параметра ALIGN: |
параметр
TOP |
верхняя линия строки текста выравнивается по верху рисунка
|
параметр
MIDDLE |
строка текста выравнивается по средине рисунка
|
параметр
BOTTOM |
нижняя линия строки текста выравнивается по нижнему краю рисунка
|
- Выполните Тест 4
- Используя шаблон base.html,текст из файла task4.txt,
рисунки 4a.jpg, 4b.jpg создайте страницу
- заголовок страницы - Задание 4
- содержание страницы - текст из файла task4.txt, оформленный иллюстрациями.
- имя файла станицы - 4.html
- Сохраните страницу в рабочей папке в указанным именем.
|