Úlohy

Úloha č.1 – Odkazy

  1. Vytvoríme si nový projekt vytvorením novej zložky s názvom „cv_3“
  2. Vytvoríme nový základný HTML dokument „odkazy.html“
  3. Vytvoríme prázdny CSS súbor s názvom „odkazy.css“ a ten si uvedieme ako externý zdroj v hlavičke html dokumentu
  4. V HTML dokumente si vytvoríme 4 rôzne odkazy rôznych farieb, pričom po kliknutí na odkaz sa nám otvorí stránka na novej karte (toto vieme zabezpečiť pridaním atribútu „target“ značke odkazu):
    1. modrý odkaz – facebook.com
    2. čierny odkaz – 9gag.com
    3. červený odkaz – quora.com
    4. oranžový odkaz – stackoverflow.com
  5. Odkazy naštýlujeme podľa priloženej predlohy:

    Na to, aby sme vedeli odkazy takto naštýlovať, budeme potrebovať CSS vlastnosti:

    1. display
    2. margin
    3. padding
    4. color
    5. background-color
    6. font-family
    7. border-radius
  6. Na to, aby sme rozlíšili odkazy farebne, v HTML dokumente použijeme atribút „class“:
    <a href="http://facebook.com" class="blue" target="_blank">Facebook</a>
    <a href="http://9gag.com" class="black" target="_blank">9gag</a>
    <a href="http://quora.com" class="red" target="_blank">Quora</a>
    <a href="http://stackoverflow.com" class="orange" target="_blank">stackoverflow</a>
  7. V CSS dokumente vieme následne upravovať HTML elementy s prideleným atribútom „class“ nasledovne:
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="blue" */
    .blue{
    
    }
    
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="blue" po nadídení myšou */
    .blue:hover{
    
    }
    
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="black" */
    .black{
    
    }
    
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="black" po nadídení myšou */
    .black:hover{
    
    }
    
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="red" */
    .red{
    
    }
    
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="red" po nadídení myšou */
    .red:hover{
    
    }
    
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="orange" */
    .orange{
    
    }
    
    /* CSS pravidlá sa aplikujú na všetky elementy s atribútom class="orange" po nadídení myšou */
    .orange:hover{
    
    }

Úloha č.2 – Zoznamy

  1. Do vytvoreného projektu s názvom „cv_3“ vytvoríme nový základný HTML dokument „zoznamy.html“
  2. Vytvoríme prázdny CSS súbor s názvom „zoznamy.css“ a ten si uvedieme ako externý zdroj v hlavičke html dokumentu
  3. Do HTML dokumentu vytvoríme zoznam s piatim položkami a do jeho štvrtej položky vložíme vnorený zoznam s tromi položkami.
  4. Zoznam naštýlujeme podľa priloženej predlohy:

    Na to, aby sme vedeli zoznam takto naštýlovať, budeme potrebovať nasledné CSS vlastnosti:

    1. list-style-image
    2. font-family
    3. background-color
    4. color
    5. padding

Bonusové úlohy