Краткая справка

При создании Web-сайтов особую роль играет графика, которая повышает привлекательность Web-страниц, упрощает восприятие содержимого узлов, облегчает навигацию по сайту. Графика на Web-узлах может иметь ключевое значение, например, для выбора и покупки товара по его изображению через Интернет.

Графику на Web-страницах обычно называют Web-графикой. Такую графику можно создать с помощью традиционных графических редакторов, например, используя про-

грамму Adobe Photoshop. Однако Web-графика обладает рядом особенностей, которые

требуют более специализированных программных средств. Например, рисунок на Web-

странице должен иметь небольшой размер, чтобы сократить время загрузки изображения

с сайта. Кроме того, на Web-страницах часто встречаются определенные типы графиче-

ских элементов, например, кнопки, поддержка которых была бы полезна в программах

для создания Web-графики.

В свою страничку можно вставить рисунок. Для этого обычно используют изображение в формате (Для Web-графики стандартными считаются форматы JPEG, GIF, PNG и JPG) указывающем браузеру, где этот рисунок находится

Форматы вставки рисунков:

<IMG SRC=”picture. JPG ”> - рисунок ”picture.qif” из текущего документа;

<IMG SRC=”imaqes/picture. JPG ”> перейти в под каталог и взять файл оттуда;

<IMG SRC=”../imaqes/picture. JPG ”> подняться вверх каталога ”imaqes” и взять рисунок оттуда;

<IMG SRC=”http://www.fortunecity.com/business/fax/339/artics/? -указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.

У данного тэга могут быть следующие атрибуты:

ALT=”какой-то текст“ – альтернативный текст. Текст, который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений (отключаются многие – для экономии времени на медленных линиях связи).
BORDER=”n” – рамка вокруг рисунка, где n – ее толщина в пикселах. При n=”0” рамка не рисуется.
WIDTH=”n” – задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).
HEIGHT=”n” – высота изображения в пикселах или в процентах от высоты экрана.
HSPACE=”n” - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным).
VSPACE=”n” – вертикальный отступ от картинки в пикселах.

ALIGN=CENTER – по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя аттрибут ALIGN можно выравнивать текст по верхнему краю (ТОР) или по центру рисунка (CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение аттрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.

Значения n перечисленных выше атрибутов по умолчанию равны нулю.

Картинку можно сделать фоном документа. Это прописывается в открывающем тэге BODY :

<body text="#336699" bgcolor="#000000" background=" ваш _ фон .jpg">

Параметр Background и указывет на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ.

Рисунок может быть ссылкой. Для этого необходимо <IMG SRC=”…”> разместить между тэгами <A HREF=”…”> и </A>. Вокруг рисунка появится рамка, показывающая, что он, является ссылкой. Если рамка портит внешний вид документа, то укажите в атрибутах рисунка

BORDER=”0”.

Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:

Например:

<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a>