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

Тег <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-страницы в браузере.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: