1.3.3. Obrázky

Obrázky v kóde zapisujeme pomocou nepárového tagu img. Podobne ako pri odkaze, musíme u tohoto elementu špecifikovať atribúty, aby stránka vedela, aký obrázok chceme zobraziť.

  <img src="https://goo.gl/oWqGjz" alt="obrazok tucniaka">

Na webe sa prejaví takto:

src - je najdôležitejším atribútom, ktorý určuje cestu k obrázku

alt - popis obrázku, ktorý je zobrazený v prípade, že z nejakého dôvodu nie je možné zobraziť obrázok samotný

Absolútna vs. relatívna cesta

Ak odkazujeme na nejaký súbor, obrázok alebo hypertextový odkaz musíme vždy vyplniť cestu k danému súboru. Cesta môže byť buď absolútna alebo relatívna .

Absolútna cesta - obsahuje úplný zápis cesty k súboru, teda od koreňovej zložky až po súbor

<img src="E:/Fotky/skola/zirafy/krmenie.png">
<img src="http://www.webovastranka.cz/obrazky/priklad.png">

Relatívna cesta - obsahuje iba časť, ktorá je relatívna voči súboru, v ktorom sa aktuálne nachádzame

<img src="obrazky/priklad.png">
<img src="zirafy/krmenie.png">

/web
    -- index.html
      /obrazky
        -- priklad.png

Takže, keď je náš súbor index.html v zložke /web a my chceme zobraziť obrázok, ktorý je v zložke /obrazky, tak použijeme prvý zápis src="obrazky/priklad.png".

Pokiaľ by obrázok bol v tej istej zložke ako index.html tak nemusíme vliezať do žiadnej zložky /obrazky, ale zapíšeme to ako src="priklad.png", pretože z tej zložky kde je index.html "vidíme" na vkladaný obrázok.

/web
    -- index.html
      /css
        -- styly.css
      /obrazky
        -- priklad.png

Pokiaľ by sme boli v zložke css, kde je uložený súbor styly.css a chceme z tohoto súboru volať obrázok, ktorý je v zložke /obrazky, tak musíme vyliezť zo zložky /css a vliezť do zložky /obrazky. Na "vyliezanie" z aktuálnej zložky do nadradenej zložky používame zápis ../ na začiatku cesty. Keď teda chceme vyliezť zo zložky a vliezť do inej zápis bude nasledovný:

<img src="../obrazky/priklad.png">