Vkladanie obrázkov

Už viete, že obrázky sa do textu vkladajú pomocou značky <img />. Na rozdiel od značiek ako sú <p>, <strong>, <br />, musíme v prípade tagu <img /> zadať viacero parametrov. Ktoré sú to?

src

Parameter src je najdôležitejší, pretože hovorí o tom, kde je daný obrázok umiestnený. Hodnota tohto parametra predstavuje absolútnu alebo relatívnu cestu k obrázku. Absolútna adresa obrázka je napr. https://mojweb.sk/obrazky/mojobrazok.jpg. Relatívnou cestou k obrázku chápeme umiestnenie relatívne k aktuálne zobrazenej stránke napr. ak stránka do ktorej vkladám obrázok má adresu https://mojweb.sk/stranky/mojastranka.html, tak cesta k obrazku bude ../obrazky/mojobrazok.jpg

alt

Parameter alt uvádza krátky opis obrázka. Je dôležitétento parameter uvádzať, pretože ak má užívateľ v prehliadači vypnuté zobrazovanie obrázko, tak bude vedieť, čo sa na danom obrázku nachádza. Obdobne v prípade handicapovaných užívateľov, ktorým čítačka prečíta daný opis obrázka.

width, height

Mohlo by sa zdať, že parametre height a width sú už prežitkom a sú zbytočné. Mnohí tieto parametre nepoužívajú s odôvodnením, že veľkosť obrázku si stanovia v CSS štýle. Ja vám tento parameter odporúčam používať. Často sa mi totiž stalo, že som zablúdil na web, na ktorom bolo viac obrázkov resp. iného multimediálneho obsahu. Začítal som sa do textu a zrazu po načítaní stránky text odskočil, lebo sa zobrazil obrázok. Prehliadač totiž nemal odkiaľ vedieť, aké sú rozmery daného obrázka a preto naň nenechal voľný priestor.

Ak zadáte parametre height a width, tak prehliadač vynechá príslušný priestor na obrázok, správne rozmiestni text a my môžeme nerušene čítať.

Pozor! Nepoužívajte tieto parametre na zmenšovanie obrázkov. Zväčší sa čas načítania stránky a ani obrázky nebudú zobrazené v slušnej kvalite. Radšej využite vhodný editor obrázkov na ich zmenšenie a na web ich umiestnite už s menšími rozmermi.

Príklad: (samozrejme zadajte správnu cestu a veľkosť k svojmu obrázku)

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
<br /><img src="obrazky/mojobrazok.jpg" alt="Naša trieda pri Šútovskom vodopáde" height="600" width="800" /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>

Ak by ste nepoužili pred a za obrázkom značku <br />, obrázok by sa správal ako hociktoré - iba trochu väčšie :) písmeno v texte. Čiže by nedošlo k zalomeniu riadka

Úloha:

Máte vysnívanú dovolenku (prázdniny)? Vytvorte webovú stránku, v ktorej popíšete miesto, kde by ste ju chceli stráviť a zároveň osviežite text vhodnými obrázkami.

V ďalšom článku sa naučíme používať usporiadané i neusporiadané zoznamy a tiež zoznamy definícií.