УРОК 6: Изображения

  1. Графични формати.
  2. Елемент IMG.
  3. Примери.

1. Графични формати.

Най-често браузерите използват два формата на файловете с изображения .GIF и .JPEG.

При GIF изображенията максималният брой цветове е само 256, но формата поддържа анимация.

Изображенията във формат JPEG поддържат над 16 милиона цвята, но поради компресия се изобразяват по-бавно от браузерите.
Go to Top


2. Елемент IMG

\..........Описание

Елементът IMG вмъква изображение в HTML документа.

\..........Синтаксис

<IMG
    ALIGN="left"|"right"|"top"|"middle"|"bottom"
    ALT="текст"
    BORDER="число"
    HEIGHT="височина"
    WIDTH="ширина"
    HSPACE="число"
    VSPACE="число"
    SRC="URI">


Елементът IMG няма краен етикет.

\..........Атрибути

Атрибут Описание
ALIGN= "left"
"right"
"top"
"middle"
"bottom"
Задава подравняването на изображението спрямо заобикалящият го текст.

left - Изображението застава отляво на текста, който го обгражда;

right - Изображението застава отдясно на текста, който го обгражда;

top - Изображението застава в текста, прекъсвайки реда в който се намира. Редът "минава" през горния край на изображението;

middle - Изображението застава в текста, прекъсвайки реда в който се намира. Редът "минава" през средата на изображението;

bottom - Изображението застава в текста, прекъсвайки реда в който се намира. Редът "минава" през долния край на изображението. Използва се по подразбиране.
ALT="текст" Задава текста, който трябва да бъде изобразен, ако изображението не се е заредило или ако браузерът е настроен да не зарежда изображенията.
BORDER="число" Задава дебелината на рамката около изображението в пиксели.
HEIGHT="височина" Задава височината на изображението в:

пиксели - (напр. HEIGHT="20");
-ИЛИ-
процент от височината на прозореца - (напр. HEIGHT="30%").

Ако не се зададе, изображението се показва в действителната си височина.
WIDTH="ширина" Задава ширината на изображението в:

пиксели - (напр. WIDTH="20");
-ИЛИ-
процент от ширината на прозореца - (напр. WIDTH="30%").

Ако не се зададе, изображението се показва в действителната си ширина.
HSPACE="число" Задава в пиксели разстоянието отляво и отдясно между текста и изображението.
VSPACE="число" Задава в пиксели разстоянието отгоре и отдолу между текста и изображението.
SRC="URI" Задава URI на файла с изображението.

Забележка: Щракнете тук за повече информация за URI адресите.

\..........Подходящи примери

За използването на атрибутите на елемента IMG, разгледайте примери 1, 2
Go to Top


3. Примери

Изберете пример и се придвижете под текстовото поле, за да видите HTML кода.

Пример 1: Вмъкване на изображение в HTML документ.
Пример 2: Разполагане на изображение спрямо текст.
Preview
Go to Top