Веб-дизайн для начинающих

<IMG>...</IMG>

Вставка изображения

Синтаксис:

<IMG SRC="имя файла">

имя файла=file.jpg или file.gif

Параметры:

• WIDTH - ширина картинки в пикселях
• HEIGHT - высота картинки в пикселях
• ALIGN - выравнивание

ALIGN=LEFT - изображение прижимается к левому полю окна, текст обтекает изображение с правой стороны

ALIGN=CENTER - выравнивание по центру

ALIGN=RIGHT - изображение прижимается к правому полю окна, текст обтекает изображение с левой стороны

ALIGN=TOP - верхняя граница изображения выравнивается по самому высокому элементу текущей строки

ALIGN=TEXTTOP - верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки

ALIGN=MIDDLE - выравнивание середины изображения по базовой линии текущей строки

ALIGN=ABSMIDDLE - выравнивание середины изображения посередине текущей строки

ALIGN=BOTTOM,BASELINE - выравнивание нижней границы изображения по базовой линии текущей строки

ALIGN=ABSBOTTOM - выравнивание нижней границы изображения по нижней границе текущей строки

• HSPACE - оризонтальный отступ от графического изображения
• ALT - альтернативный текст

Карта изображения
<MAP>...</MAP>

Создание нескольких активных областей на одном рисунке <AREA> - задает чувствительную область

Атрибуты <MAP>:

• NAME - имя карты координат

Атрибуты <AREA>:

• SHAPE - форма области

SHAPE=rect - прямоугольник (задаются две пары координат: x1,y1,x2,y2 (для верхнего левого и нижнего правого углов))

SHAPE=circle - окружность (задается x,y,r , где x,y - координаты центра, r - радиус)

SHAPE=poly - многоугольник (задается x1,y1,x2,y2,...xn,yn , где x,y - координаты углов)

• HREF - URL ссылки при щелчке на область мыщью
• NOHREF - задание неактивной но чувствительной области
• COORDS - координаты области

Пример:

<MAP NAME="menu"> 
<AREA SHAPE=rect COORDS="0,0,20,20" HREF="file1.html"> 
<AREA SHAPE=rect COORDS="40,0,60,20" HREF="file2.html"> 
</MAP> 

Определение рисунка как меню производится в теге <IMG> при помощи атрибута USEMAP:

<IMG SRC="pic.gif" border=0 USEMAP=#menu>