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