Михаела

HTML IMAGES Вељковиќ II-

14
Сликите можат да го подобрат дизајнот и
изгледот на веб-страницата.

 Примери
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
СИНТАКСА НА HTML СЛИКИ

Ознаката HTML <img> се користи за вградување слика во

веб-страница.
Сликите технички не се вметнуваат во веб-страница; сликите
се поврзани со веб-страници. Ознаката <img> создава
простор за задржување за референцираната слика.
Ознаката <img> е празна, содржи само атрибути и нема
ознака за затворање.
Ознаката <img> има два потребни атрибути:
-src - Ја одредува патеката до сликата
-alt - Одредува алтернативен текст за сликата
Синтакса
<img src="url" alt="alternatetext">
АТРИБУТОТ SRC

Потребниот атрибут src ја одредува патеката (URL) до

сликата.
Забелешка: Кога се вчитува веб-страница,
прелистувачот во тој момент ја добива сликата од веб-
серверот и ја вметнува во страницата. Затоа, погрижете
се сликата да остане на истото место во однос на веб-
страницата, инаку вашите посетители ќе добијат
скршена икона за врска. Иконата за скршена врска и
алтернативниот текст се прикажани ако прелистувачот
не може да ја пронајде сликата.

Пример
<img src="img_chania.jpg" alt="Flowers in Chania">
АТРИБУТОТ ALT

Потребниот атрибут alt обезбедува алтернативен текст за

слика, ако корисникот поради некоја причина не може да ја
прегледа (поради бавно поврзување, грешка во атрибутот src
или ако корисникот користи читач на екран).
Вредноста на атрибутот alt треба да ја опише сликата:

Пример
<img src="img_chania.jpg" alt="Flowers in Chania">
Ако прелистувачот не може да најде слика, ќе ја прикаже
вредноста на атрибутот alt:
Пример
<img src="wrongname.gif" alt="Flowers in Chania">
 ГОЛЕМИНА НА СЛИКАТА - ШИРИНА И
ВИСИНА
Можете да го користите атрибутот стил за да ја одредите
ширината и висината на сликата.
Пример
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">

Алтернативно, можете да ги користите атрибутите ширина

и висина:
Пример
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Атрибутите ширина и висина секогаш ги дефинираат

ширината и висината на сликата во пиксели. Забелешка:
Секогаш наведете ја ширината и висината на сликата.
Ако ширината и висината не се наведени, веб-страницата
може да трепери додека се вчитува сликата.
 СЛИКИ ВО ДРУГА ПАПКА И ДРУГ
ЦЕРВЕР/ВЕБ-СТРАНИЦА

Ако ги имате вашите слики во под-папка, мора да го вклучите

името на папката во атрибутот src:
Пример
<img src="/images/html5.gif"  alt="HTML5 Icon"  style="width:128px;height:128px;">

Некои веб-страници укажуваат на слика на друг сервер. За да

покажете слика на друг сервер, мора да наведете апсолутна
(целосна) URL во атрибутот src:
Пример
<img src="https://www.w3schools.com/images/w3schools_green.jpg"  alt="W3Schools.com">

Забелешки за надворешните слики : Надворешните слики

можеби се под авторски права. Ако не добиете дозвола да го
користите, може да ги прекршите законите за авторски права.
Покрај тоа, не можете да контролирате надворешни слики;
може одеднаш да се отстрани или промени.
 АНИМИРАНИ СЛИКИ И СЛИКИ КАКО LINK

HTML дозволува анимирани GIF-а:

Пример
< i m g   s r c = " p ro g r a mm i n g . gi f "   a l t = " C o m p u t e r
M a n "   s t y l e = " w i d th : 4 8 px ; h e i gh t : 4 8 p x ; " >

Сликата како link за да користите слика како врска,

ставете ја ознаката <img> во ознаката <a>:
Пример
< a   h r e f = " d e f a u lt . a s p ">
    < i m g   s r c = " s m i le y . g if "   a l t = " H T M L t u t o r i a l "   s t y l e = " w i d t h : 4 2 p x ; h e i g h t : 4 2 p x ; " >
</a>
 ЗАЕДНИЧКИ ФОРМАТИ НА СЛИКИ

Најчестите типови на датотеки со слики, кои се

поддржани во сите прелистувачи (Chrome, Edge, Firefox,
Safari, Opera):
Аbbreviation File Format File Extension
APNG Animated Portable Network .apng
Graphics
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pj
image peg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
Ви благодариме за вниманието