Predmetová komisia ELT a INF

Učebnica HTML - Obrázky

HTML - Basic - Images

« Predchádzajúca Ďalšia kapitola »

Príklad

Výhľad zo skaly

Výhľad zo skaly


Vyskúšajte si to »

Vyskúšajte si to sami - Príklady:

Vkladanie obrázkov
Ako vložiť obrázok do HTML dokumentu

Vkladanie obrázkov z rôznych zdrojov
Ako vložiť obrázok z iného priečinka, alebo servera

(Viac príkladov nájdete v dolnej časti tejto stránky).

HTML Obrázky - značka <img> a atribút src

V HTML sú obrázky definované značkou<img>.

Značka <img> Je prázdna, čo znamená, že obsahuje len atribúty a nemá uzatváraciu značku.

Ak chcete zobraziť obrázok na stránke, musíte použiť atribút src. Src je skratka pre "zdroj". Hodnota atribútu src je URL obrázku, ktorý chcete zobraziť.

Syntax pre definovanie obrázku:

<img src="url" alt="nejaký text"/>

URL odkazuje na miesto, kde je uložený obrázok. Obrázok s názvom "logo_smusic.gif", ktorý sa nachádza v "images" priečinoku "www.sostzm.edu.sk" má URL: http://www.sostzm.edu.sk/images/logo_smusic.gif

V prehliadači sa zobrazí obrázok tam, kde sa značka <img> nachádza v dokumente. Ak vložíite značku obrázku medzi dva odseky, prehliadač zobrazí prvý odsek, potom obrazoka následne druhý odsek.

HTML - Atribút ALT

Atribút alt špecifikuje alternatívny text k obrázku, ak sa obrázok nedá zobraziť.

Hodnota atribútu alt je autorom definovaý text

<img src="boat.gif" alt="Big Boat" />

Atribút alt obsahuje alternatívne informácie o obrázku v prípade, že sa užívateľovi z nejakého dôvodu nemôžu zobraziť (z dôvodu pomalého pripojenia, chybu v src atribútu, alebo v prípade, že užívateľ používa program na čítanie z obrazovky). 

HTML Obrázky - Výška a šírka obrázku

Výšku a šírku atribúty sú použité na určenie výšky a šírky obrázka.

Hodnoty atribútov sú uvedené v pixeloch. Hodnota v pixeloch je predvolená.

<img src="../image/vyhlad.jpg" alt="Výhľad zo skaly" width="304" height="228" />

Tip: Je dobré v praxi určiť hodnoty výšky a šírky obrazu. Ak sú tieto hodnoty nastavené, požadovaný priestor pre obrázok je vyhradené pri načítaní stránky. Avšak, bez týchto atribútov prehliadač nepozná veľkosť obrazu. Výsledkom bude, že rozloženie stránky sa bude meniť v priebehu naťahovania stránky.

HTML - Užitočné tipy

Poznámka: Ak súbor HTML obsahuje desať obrázkov - jedenáť súborov je potrebných na správne zobrazenie stránky. Načítavanie obrázkov nejakú dobu trvá, takže rada je: Používajte obrázky opatrne.

Poznámka: Pri načítaní webovej stránky, do prehliadača sa obrázok stiahne z webového servera a vloží do stránky. Preto sa uistite, že či je obrazok skutočne stále na pôvodnom mieste vo vzťahu k webovej stránke, inak vaši návštevníci budú mať nefunkčný odkaz na obrázok.

HTML - Ďalšie príklady

Zarovnanie obrázkov
Ako zarovnať obrázok v texte.

Nechajte obrazok plávať
Ako môže obrázok "plávať" po ľavej alebo pravej strane odseku.

Hhypertextové prepojenie na obrázku
Ako sa dá použiť obrázok ako odkaz.

HTML Značky pre obrázky

Tag Popis
<img /> Definuje obrázok
<map> Definuje obrázkovú mapa
<area /> Definuje miesto na klik v obázkovej mape

« Predchádzajúca Ďalšia kapitola »