Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным. Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.
Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.
Лучше любые изображения на странице ограничивать размером 20 Кбайт. Такие изображения достаточно подробны и быстро загружаются. Ограничение в 20 Кбайт очень приблизительно. Если встретилось потрясающее изображение, занимающее больше 20 Кбайт, спокойно используйте его. Просто помните, что если вставляете слишком много больших изображений, время ожидания посетителей существенно возрастет.
|
|
Тег <IMG> имеет немало атрибутов. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG. Приведем несколько примеров, которые можно применять на практике и вы можете самостоятельно их опробовать.
Атрибут | Формат | Описание |
ALT | <IMG SRS=”CLOCK.JPG” ALT= «КАРТИНКА» | Задает текст, заменяющий изображение в том случае, если браузер не воспринимает изображение |
BORDER | <IMG SRS=”CLOCK.JPG” BORDER=”3”> | Задает толщину рамки вокруг изображения. Измеряется в пикселях |
ALIGN | <IMG SRS=”CLOCK.JPG” ALIGN= “TOP”> | Задает выравнивание изображения относительно текста: относительно текста выровнена верхняя часть изображения – "TOP", относительно текста выровнена нижняя часть изображения – "BOTTOM", относительно текста выровнена средняя часть изображения – "MIDDLE". |
HEIGHT | <IMG SRS=”CLOCK.JPG” HEIGHT=”111”> | Задает вертикальный размер изображения внутри окна браузера |
WIDTH | <IMG SRS=”CLOCK.JPG” WIDTH=”210”> | Задает горизонтальный размер изображения внутри окна браузера |
VSPACE | <IMG SRS=”CLOCK.JPG” VSPACE=”8”> | Задает добавление верхнего и нижнего пустых полей |
HSPACE | <IMG SRS=”CLOCK.JPG” HSPACE= “8”> | Задает добавление левого и правого пустых полей |
<HTML>
<HEAD>
<TITLE> Увлечения </TITLE>
<HEAD>
<BODY BGCOLOR = «007BA7» TEXT= «00008B»>
<P ALIGN = «CENTER»>
<FONT COLOR = «000000» SIZE= « 7 »>
<H2> Увлечения</H2>
<UL><LI> Танцы
<LI>Рисование
<LI> Чтение
<LI> Путешествия
</UL>
<DL> <DT> Танцы
<DD> Я очень люблю танцевать и занимаюсь этим профессионально. Танцую в народном коллективе «Латинский квартал». Имею достижения республиканского и международного уровня.
|
|
<DT> Путешествия
<DD> Люблю путешествовать с родителями. Мы всегда выбираем интересные маршруты и готовимся к поездке целый год. В этом году мы были на чемпионате мира по футболу в Российской федерации и посетили шесть городов из одиннадцати.
<DT> Чтение
<DD> В свободное от учебы время читаю художественные произведения. Увлекаюсь произведениями, в которых в художественном изложении представлены реальные исторические события.
</DL>
<IMG SRC=” CLOCK.PNG”>
</P>
</BODY>
</HTML>
Просмотрите изменения вашей Web-страницы в браузере.