HTML tagy

Tagy sú spôsob ktorým HTML od seba rozpoznáva jednotlivé elementy. V tejto lekcii si ich väčšinu ukážeme, spoločne s ich nastaveniami v CSSku.

Headers

Veľmi jednoduchý koncept. Je to zvýraznený text označujúci významnejšie časti stránky. Môžeme mať H1 až H6.

    <h1>Meno stránky</h1>
    <h2>Kategória</h2>
    <h3>Podkategória</h3>
    

V našom style.css súbore si ho vieme upraviť niekoľkými spôsobmy.

h2 {
	text-align: center ;
	color: deeppink ;
	font-size: 26pt ;
	max-width: 800px ;
}

Myslím že celkom jasné. Chceme upraviť veľkosť písma, zmeníme font-size, atď. Pre zmenu farby stačí kliknúť na malý farebný štvorček vo VSCode a vybrať si akú farbu chceme.

<p>

Je to obyčajný text. Je tu alternatíva písania priamo do HTML súboru bez tagu, a oddeliť text pomocou br tagu, to sa však ale neodporúča.

<p>Normálny text</p>
<p>Normálny text</p>
<p>Normálny text</p>

Normálny text<br>
Normálny text<br>
Normálny text

<br>

Tiež zvaný line break, pridáva do textu medzeru. Môžeme ho vložiť medzi akékoľvek tagy.

<h1>Nadpis</h1>
<p>Normálny text</p>
<br>
<p>Normálny text</p>
<br>
<p>Normálny text</p>

<hr>

Pridá to textu vodorovnú čiaru. Užitočné keď máte článok zo sekciamy ktoré chcete oddeliť.

<h1>Nadpis</h1>
<p>Text článku</p>
<hr>
<p>Druhá seckia</p>

<div>

Tento tag dovoluje rozdelovať text na neviditelné úseky, ktorým môžeme nezávisle meniť parametre.

<p>Prvá sekcia,<div class="cervena"><p>druhá seckia</p></div><p>, tretia sekcia</p></p>

.cervena {
  background-color: red;
}

Prvá sekcia,

, tretia sekcia

Všetky tagy pod <div> zdedia jeho vlastnosti. Tu je jednoduchý príklad:

    <p>Prvá sekcia,<div class="cervena"><p>druhá seckia </p><p>Iná farba</p><h4><p>Náhodný header</p></h4></div><p>, tretia sekcia</p></p>

Prvá sekcia,

, tretia sekcia

<code>

Zobrazí text v monospace fonte, pripomínajúcom terminálový font.

<code>echo "text"</code>

<code> tag používame naprieč celou učebnicou.