17.10.2016

Príprava

1. Vytvorte vo Vašej zložke s projektom nový súbor galerie.html
2. Vytvorte vo Vašej zložke novú zložku s názvom images
3. Nájdite si na internete 9 rôznych obrázkov približne rovnakej veľkosti a stiahnite si ich do novovytvorenej zložky images
4. Vytvorte v Photoshope z týchto obrázkov takzvané náhľady o veľkosti 150x150 px a pomenujte si ich ako thumbnail1.jpg, thumbnail1.jpg atď ...

Po príprave

1. Otvorte si Váš projekt v SublimeTexte
2. Pridajte do nového html súboru všetky náležitosti čo má stránka mať
3. Vytvorte nadpis stránky
4. Vytvorte div s triedou images a vložte do tohto divu všetky náhľady, ktoré ste si práve vytvorili (nezabudnite na atribút alt)
5. V súbore styly.css napíšte pravidlo pre všetky obrázky v triede images
   1. border: 1px solid black;
6. Obaľte všetky obrázky do odkazov, kedy odkaz bude vždy smerovať na obrázok v plnej veľkosti
7. Pridajte odkazom atribút target na otvorenie v novom okne
8. Pridajte ku každému obrázku obaľovací element div s triedou images-item
9. Tejto triede nastavte css štýly

10. width: 33%;
    display: inline-block;
    

11. Do tohto divu, pod obrázok vložte odstavec s popisom pre obrázok