Объекты. Объекты – это графические и мультимедийные вставки в HTML-документ, такие как картинки, Flash-анимацияОбъекты – это графические и мультимедийные вставки в HTML-документ, такие как картинки, Flash-анимация, Java-апплеты, звуки, музыка, VRML. К тегам, размещающим подобные объекты, относятся: ● IMG - Используется для вставки в HTML изображений ● EMBED - Используется для вставки в HTML различных объектов ● NOEMBED- Используется, если браузер не поддерживает элемент EMBED ● APPLET - Используется для вставки в HTML Java-апплетов ● PARAM - Используется для передачи параметров Java-программе (см. элемент APPLET). Наиболее популярным является тег IMG, который используется для вставки изображений в HTML-документ. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Четвертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться. Элемент IMG не имеет конечного тега. Атрибуты: · SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением. Если рисунок надо искать в том же каталоге, что и сама страница, надо просто написать имя файла. Можно указать также относительный адрес файла (так же, как в ссылках) или URL. Пример1: <IMG SRC="image1.jpg"> Здесь рисунок image1.jpg находится в текущем каталоге, рисунок image2.jpg — в соседнем каталоге IMAGES, а image3.jpg — на сервере в Интернете. · HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества). · HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом. Пример2: <IMG SRC="image.jpg" ALIGN="left"> Пример3: <IMG SRC="image.jpg" ALIGN="left" VSPACE="10" HSPACE="10"> · ALIGN – обязательный атрибут. Указывает способ выравнивания изображения в документе. Например: <IMG SRC="image.jpg" ALIGN="left">. Может принимать следующие значения: o left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа. o right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева. o top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. o middle – выравнивает базовую линию текущей текстовой строки с центром изображения. o absmiddle – выравнивает центр текущей текстовой строки с центром изображения. o bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки. o absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки. · NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев. · ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. · BORDER – определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю. · LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC. · USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные. · ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения. Пример 4: <IMG SRC="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов. Пример 5. Использование изображения в качестве гиперссылки: <A HREF="my.html"> <IMG SRC="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Моё резюме"> </A> Для просмотра резюме нажмите на кнопку справа. Пример 6. Использование ISMAP: <A HREF="http://www.igf.ru/bin/imagemaps/map1"> <IMG SRC="map.gif" ISMAP></A>'); Пример 7. Использование USEMAP: <IMG SRC="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">');
ПРИМЕЧАНИЯ (ОСОБО ВАЖНО): Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в атрибуте ALT. Всегда сразу после <IMG...> ставьте <BR>! А то проблем не миновать – после картинки появится пустое пространство в несколько пикселей. Причём ставьте вплотную, без пробелов: <img...><br>. Для завершения обтекания изображения текстом используйте атрибут CLEAR элемента BR. Значения top и texttop атрибута ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать. Указывайте значения атрибутов HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю. Пример8: <BODY> Пример9: <IMG SRC="photo.jpg" ALT="Моя фотография" WIDTH="50" height="80" BORDER="0"> Рисунки очень часто являются гиперссылками. Если вы хотите сделать рисунок ссылкой, надо заключить соответствующий ему тег <IMG> внутрь тега <A>. Пример10: <A HREF="http://www.mail.ru"> Нулевое значение параметра BORDER тега <IMG> служит для того, чтобы избавиться от синей границы вокруг рисунка-ссылки.
|
