TWS index

Adam · February 20, 2020

<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML - 5 priamy zápis kódu</title>
</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>
<body>
<header>
<h1>IT Pizza</h1>
<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"> 
<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> 

<aside id="akcia">
<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>

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

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

<h1>Tvorba webovch stránok</h1>
<ol>
<li>Úvod do tvorby webových stránok</li>
<ol type="a">
<li>Zdrojový kód</li>
<li>Schéma</li>
</ol>
<li>Štruktúrovanie textu na webovej stránke</li>
<ol type="I" start="4" >
<li>Nadpisy</li>
<li>Riadkové elementy</li>
</ol>
<li>Úvod do kaskádových štýlov</li>
<ul>
<li>Vytvorenie CSS</li>
<li>Zmena písma na stránke</li>
</ul>
<li>Obrázky</li>
</ol>
</body>
</html>

Sign In

TWS index

Recommended Posts

Adam

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity