HTML značky
<!-- poznámka / komentár - nezobrazuje sa -->
<!-- nadpis prvej úrovne -->
<h1>Nadpis 1</h1>
<h2>Nadpis 2</h2>
<h3>Nadpis 3</h3>
<h4>Nadpis 4</h4>
<h5>Nadpis 5</h5>
<h6>Nadpis 6</h6>
<p>Obyčajný odstavec textu. Je oddelený od ďalšich odstavcov bielym miestom.</p>
<p>V rámci odstavca môžete niektoré slová <em>zdôrazniť</em>, alebo <strong>silne zdôrazniť</strong>
<i>zmeniť tón reči</i> či <b>osobu hovoriaceho</b>. </p>
<p>Alebo môžem písať poeticky - v slohách a veršoch:</p>
<!-- každá sloha je odstavec, verše sa roydeľujú pomocou br -->
<p>Zleteli orly z Tatry,<br>
tiahnu na podolia.<br>
Ponad vysoké hory,<br>
ponad rovné polia.</p>
<p>Preleteli cez Dunaj,<br>
cez tú šíru vodu,<br>
sadli tam na pomedzí,<br>
slovenského rodu.</p>
<!-- vodorovná oddeľovacia čiara (horizontal rule) -->
<hr>
<h2>Odrážky (Un-ordered List)</h2>
<ul>
<li>Jablko</li>
<li>Hruška</li>
<li>Čerešňa</li>
</ul>
<ul type="square">
<li>Jablko</li>
<li>Hruška</li>
<li>Čerešňa</li>
</ul>
<ul type="circle">
<li>Jablko</li>
<li>Hruška</li>
<li>Čerešňa</li>
</ul>
<hr>
<h2>Číslovaný zoznam (Ordered List)</h2>
<ol>
<li>Prvý</li>
<li>Druhý</li>
<li>Tretí</li>
</ol>
<ol type="I">
<li>Prvý</li>
<li>Druhý</li>
<li>Tretí</li>
</ol>
<ol type="i">
<li>Prvý</li>
<li>Druhý</li>
<li>Tretí</li>
</ol>
<ol type="A">
<li>Prvý</li>
<li>Druhý</li>
<li>Tretí</li>
</ol>
<ol type="a">
<li>Prvý</li>
<li>Druhý</li>
<li>Tretí</li>
</ol>
<hr>
<h2>Odrážky a pododrážky</h2>
<ul type="circle">
<li>Jablko
<ol type="a">
<li>zelené</li>
<li>červené</li>
<li>žlté</li>
</ol>
</li>
<li>Hruška
<ul type="square">
<li>putrička</li>
<li>maslovka</li>
<li>kožovka</li>
</ul>
</li>
<li>Čerešňa</li>
</ul>
<h2>Obrázky</h2>
<p>Rastrový obrázok PNG (172 x 300)</p>
<img src="obr/bluebird300px.png" alt="Blue Bird">
<br>
<p>Rastrový obrázok JPEG (172 x 300)</p>
<img src="obr/bluebird300px.jpg" alt="Blue Bird">
<br>
<p>Vektorový obrázok SVG s nastavenými rozmermi (172 x 300)</p>
<img src="obr/bluebird.svg" alt="Blue Bird" width="172" height="300">
<br>
<p>Obrázok s nastavenou šírkou 100 (druhý rozmer sa dopočítava automaticky)</p>
<img src="obr/bluebird300px.png" alt="Blue Bird" width="200">
<br>
<p>Obrázok so zmanipulovanými rozmermi (300 x 200)</p>
<img src="obr/bluebird300px.png" alt="Blue Bird" width="300" height="100">
<br>
<p>Obrázok so zmanipulovanými rozmermi (300 x 200)</p>
<!-- obrazok vyzera rovnako, ale ukaze sa zmenseny, nacitava sa dlhsie -->
<img src="obr/bluebird2400px.png" alt="Blue Bird" width="172" height="300">
<br>
<hr>
<h2>Odkazy - linky</h2>
<!-- jednoduchý odkaz v odstavci textu -->
<p>Ahoj, volám sa Jožko a navštevujem tú <a href="http://www.spmndag.sk">najlepšiu školu</a>.</p>
<!-- medzi značkami <a> a </a> je napísaný text odkazu (zobrazí sa podčiarknutý a dá sa naň kliknúť) -->
<!-- značka a má atribút href, ktorý obsahuje adresu, na ktorú sa premesieme klinutím -->
<p>Najdôležitejšia časť webu sú <a href="https://thimble.mozilla.org/cs/" title="Klinki na mňa!">odkazy</a>. Zisti napríklad, kam ide <a href="https://www.w3.org/TR/html5/links.html#links" title="Zvedavý sa veľa dozvie :)" target="_blank">tento odkaz</a>?
<hr>
<h2>Menu pomocou odkazov</h2>
<h2>Menu</h2>
<a href="uvod.html">Uvodna stranka</a> -
<a href="kapitola1.html">Kapitola 1</a> -
<a href="galeria.html">Galeria</a> -
<a href="kontakt.html">Kontakt</a>
<!-- kazdy zo suborov uvod.html, galeria.html, kapitola1.html, kontakt.html -->
<!-- je samostatny dokument - podstranka -->
<hr>
<h2>Tabuľka</h2>
<hr>
<!-- ******* ZNAČKY OD TEJTO ČIARY NADOL NETREBA VEDIEŤ! **** -->
<h2>BONUS: Klikacia mapa - obrázok s klikateľnými časťami - odkazmi</h2>
<img src="obr/planety.png" width="800" alt="Planéty" usemap="#planetmap">
<map name="planetmap">
<area href="" alt="Slnko" shape="rect" coords="0,0,82,126">
<area href="" alt="Merkúr" shape="circle" coords="90,58,3">
<area href="" alt="Venuša" shape="circle" coords="124,58,8">
</map>
<!-- ``` -->
<!-- Samotne pripojenie obrazkovej mapy k obrazku sa robi pridanim atributu usemap do znacky img -->
<img src="solar-system.jpg" usemap="#planetmap" width="1500" height="1500">