<!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>
