Jump to content

Recommended Posts

<!DOCTYPE html><!--základná deklarácia jazyka HTML5-->
<html lang="sk">
<head>
    <meta charset="UTF-8"><!--kódovanie-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"><!--pre správne zobrazenie-->
    <title>HTML - 5 priamy zápis kódu</title><!--titulok stránky-->
</head>
<style> /*začiatok CSS*/
   
    h1
    {
        color: orange; /*def. vlastnosti --> a hodnoty
        /*background: black; */
    }
    h2
    {
        color: black;
    }    
    h3
    {
        color: orange;
        background-color: black;
        font-family: Arial, Helvetica, sans-serif;
    }
    body
    {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    p
    {
       font-family: 'Times New Roman', Times, serif;
    }
    address
    {
        font-family: 'Courier New', Courier, monospace;
    }
    ul.c
    /*ul -->selektor v CSS - komu definujem štýl
    . --> trieda v CSS
    .c --> konkrétny zápis triedy, ktorý definujem
    { --> začiatok definície
    list-style.type: --> vlastnosť
    none --> hodnota
    každá vlastnosť a hodnota je ukončená bodkočiarkou      
    } --> koniec definície*/        
    {
        list-style-type: none;
        list-style-image: url('images/odrazka.png');
    }
    nav
    {
        background-color: #ffe4c4;
        border-bottom: 1px solid black;                        
        padding: 10px;
    }
    nav a
    {
        color: gray;
        font-weight: bold;
        text-decoration: none;  
        padding: 10px;      
    }
    nav a:hover
    {
        background-color: #ff9900;/*pseudotrieda-pri nadídení myšou sa zmení farba*/
        text-decoration: none;
    }
    header
    {
        background-image: url(images/header-bg.jpg);
        position: relative;
        height: 90px;
        padding: 0 10px 5px 10px;
    }
    header h1
    {
        position: absolute;
        text-transform: uppercase;/*veľké písmo textu*/
    }
    header img
    {
        position: absolute;
        left: 45%;
        bottom: 30px;
    }
    header div
    {
        color: white;
        position: absolute;
        left: 87%;
        bottom: 35px;
    }
    aside
    {        
        text-align: center;
        border: 2px solid #ff9900;
        background-color: #f5f6f7;
        position: fixed;
        left: 80%;
        top: 103px;
    }
</style><!--koniec CSS-->
<body><!--telo dokumentu, ktorý sa zobrazuje v okne prehliadača-->
<header>
    <h1>IT Pizza</h1><!--nadpisy úrovne h1-h6-->
    <img src="images/logo.gif" alt="logo" title="logo" width="130">
    <div>
        0909 123 465(SN)<br>
        0908 123 456(KE)
    </div>
</header>
    <nav>
        <a href="#ponuka">Ponuka</a>
        <a href="#akcia">Akcia</a>
        <a href="galery.html">Fotogaléria</a>
        <a href="table.html">Tabuľky</a>
        <a href="#kontakt">Kontakt</a>
    </nav>
<section id="ponuka"> <!--začiatok ponuky-->
    <h3>Ponuka</h3>
    <ul class="c">
        <li><strong>Margherita</strong>:  paradajková omáčka, syr<br><img src="images/margerita.jpg" alt="margerita"></li>
        <li><strong>Cardinale</strong>: paradajková omáčka, syr, šunka<br><img src="images/cardinale.jpg" alt="cardinale"></li>
        <li><strong>Funghi</strong>: paradajková omáčka, syr, šampiňóny<br><img src="images/funghi.jpg" alt="funghi"></li>
        <li><strong>Hawai</strong>: paradajková omáčka, šampiňóny<br><img src="images/hawai.jpg" alt="hawai"></li>
    </ul>
    <p>Naša ponuka, z ktorej si určite vyberiete:<em> Margherita,Cardinale, Funghi, Hawai.</em></p>
</section> <!--koniec ponuky-->

<aside id="akcia"><!--začiatok akcie-->
    <h2>Akcia</h2>
    <p><strong>Každý pondelok</strong> pri kúpe <strong>3 pízz</strong> podľa vlastného výberu máte najlacnejšiu z nich zadarmo!</p>
</aside><!--koniec akcie-->

<section id="kontakt">
    <h3>Kontakt</h3>
    <address> Hviezdoslavova 6,<br>
        052 01 Spišská Nová Ves,<br>
        tel. +421 999 123 456,<br>
        e-mail: tasnv@tasnv.sk
        <p>Sledujte nás na:
            <!-- vytvoriť odkaz na stránku FB a zabezbečiť logo odkazované na FB-->
            <a href="https://www.facebook.com/" target="_blank"><img src="images/facebook.png" alt="facebook" title="Klliknutím sa dostanete na Facebook"></a>
        </p>
    </address>
</section>

<hr><!--vodorovná čiara-->

<h1>Tvorba webovch stránok</h1>
<ol><!--číslovaný zoznam-->
    <li>Úvod do tvorby webových stránok</li><!--položka zoznamu-->
        <ol type="a"><!--atribút type - zvolím hodnoty z abecedy-->
             <li>Zdrojový kód</li>
             <li>Schéma</li>                
        </ol>
    <li>Štruktúrovanie textu na webovej stránke</li>
        <ol type="I" start="4" ><!--atribút start - napísať číselnú pozíciu-->
            <li>Nadpisy</li>
            <li>Riadkové elementy</li>
        </ol>
    <li>Úvod do kaskádových štýlov</li>
        <ul><!--nečíslovaný zoznam-->
            <li>Vytvorenie CSS</li>
            <li>Zmena písma na stránke</li>
        </ul>
    <li>Obrázky</li>    
</ol>
</body>
</html>
 
 
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...