Úlohy

Úloha č.1 – Odkazy

  1. Vytvoríme si nový projekt vytvorením novej zložky s názvom „cv_4“
  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{
    
    }