Поделиться
Практическая работа №55.docx
Задание № 10. Размещение графики на Web-странице
Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным.
Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.
Для выполнения следующего задания поместите файл с именем CLOCK.JPG (или другим именем) в рабочую папку.
Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066"> <P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I> занятий на вторник</I></FONT> <BR><BR>
<IMG SRC="CLOCK.PNG">
</P>
</BODY>
</HTML>
2. Просмотрите изменения вашей Web-страницы в браузере.
На экране вы увидите те, что показано на рисунке 5.
Рис. 5
Тег <IMG> имеет немало атрибутов, описанных в таблице 2. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG.
Таблица 2
|
|
|
|
|
||
|
|
Атрибуты изображения |
|
|
|
|
|
|
|
|
|
|
|
|
Атрибут |
Формат |
Описание |
|
|
|
|
|
|
|
|||
|
ALT |
<IMG SRC="CLOCK.JPG" |
Задает текст, заменяющий изображение в том случае, |
|||
|
|
ALT="Картинка"> |
если браузер не воспринимает изображение |
|
||
|
|
|
|
|||
|
BORDER |
<IMG SRC="CLOCK.JPG" |
Задает толщину рамки вокруг изображения. |
|||
|
|
BORDER="3"> |
Измеряется в пикселях |
|
|
|
|
|
|
|
|
|
|
|
ALIGN |
<IMG SRC="CLOCK.JPG" |
Задает выравнивание |
изображения |
относительно |
|
|
|
ALIGN="TOP"> |
текста: |
|
|
|
|
|
|
· относительно текста |
выровнена |
верхняя |
часть |
|
|
|
изображения – "TOP", |
|
|
|
|
|
|
· относительно текста |
выровнена |
нижняя |
часть |
|
|
|
изображения – "BOTTOM", |
|
|
|
|
|
|
· относительно текста |
выровнена |
средняя |
часть |
|
|
|
изображения – "MIDDLE". |
|
|
|
|
|
|
|
|||
|
HEIGHT |
<IMG SRC="CLOCK.JPG" |
Задает вертикальный размер изображения внутри |
|||
|
|
HEIGHT="111"> |
окна браузера |
|
|
|
|
|
|
|
|||
|
WIDTH |
<IMG SRC="CLOCK.JPG" |
Задает горизонтальный размер изображения внутри |
|||
|
|
WIDTH="210"> |
окна браузера |
|
|
|
|
|
|
|
|||
|
VSPACE |
<IMG SRC="CLOCK.JPG" |
Задает добавление верхнего и нижнего пустых полей |
|||
|
|
VSPACE="8"> |
|
|
|
|
|
|
|
|
|||
|
HSPACE |
<IMG SRC="CLOCK.JPG" |
Задает добавление левого и правого пустых полей |
|||
|
|
HSPACE="8"> |
|
|
|
|
|
|
|
|
|
|
|
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
