Дистанционный курс
Создание простейших HTML-страниц
Смирнова Валерия Владимировна

Занятие 10. Размещение графики на Web-странице

Информация

Тэг <IMG> позволяет вставить изображение в документ. Изображение появится в том месте документа, в котором записан этот тэг. Команда записывается с одиночным тэгом, т.е. закрывающий тэг не применяется.

Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Для выполнения упражнения считаем, что графический файл Wagon.gif хранится в рабочем каталоге KURS, где находится и наша Web-страница.

1. Внесите изменения в текст файла HTML:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#336666" SIZE="7">

<B> Расписание </B><

/FONT><BR>

<FONT SIZE="6"> <I>занятий на вторник</I></FONT>

<BR><BR>

<IMG SRC="Wagon.gif">

</P>

</BODY>

</HTML>

Скачать файл Wagon.gif

Посмотреть пример страницы

Тэг <IMG> имеет немало атрибутов (см. таблицу), которые можно задавать дополнительно. Они могут располагаться где угодно в тэге после кода IMG.

Атрибуты изображения

Атрибут

Формат

Описание
ALT <IMG SRC="Wagon.gif" ALT="картина"> Если браузер не воспринимает изображение, вместо него появляется заменяющий текст.
BORDER <IMG SRC="Wagon.gif" BORDER="3"> Задает толщину рамки вокруг изображения. Измеряется в пикселях.
ALIGN <IMG SRC="Wagon.gif" ALIGN=TOP> Выравнивает изображение относительно текста:
по верхней части изображения – TOP,
по нижней – BOTTOM,
по средней – MIDDLE.
HEIGHT <IMG SRC="Wagon.gif" HEIGHT=111> Задает вертикальный размер изображения внутри окна браузера.
WIDTH <IMG SRC="Wagon.gif" WIDTH=220> Задает горизонтальный размер изображения внутри окна браузера.
VSPACE <IMG SRC="Wagon.gif" VSPACE="8" > Добавляет верхнее и нижнее пустые поля.
HSPACE <IMG SRC="Wagon.gif" HSPACE="8"> Добавляет левое и правое пустые поля.

2. Самостоятельно внесите изменения в файл RASP.HTM, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH.

Примечание

Всегда обращайте внимание на размеры (объем в байтах) своего графического файла, т.к. это влияет на время загрузки Web-страницы.

Оглавление                              
Введение 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16