V tejto kapitole tutoriálu k jazyku HTML si predstavíme základné HTML elementy pre tvorbu webu, najmä základné tagy pre formátovanie textu, tvorbu zoznamov, tvorbu tabuliek, prácu s obrázkami na webe a používanie hypertextových odkazov na linkovanie medzi stránkami či sekciami HTML stránok.
Čo je HTML element?
HTML element je pomenovanie pre jeden element stránky (jeden objekt na stránke).
HTML element je ohraničený začiatočným a konečným HTML tagom, v prípade nepárových tagov je to jeden tag označujúci súčasne začiatok aj koniec.
Ide teda o časť HTML kódu
od začiatočného tagu po konečný tag vrátane jeho celého obsahu.
Na ukážke nižšie sú dva HTML elementy u a b, pričom prvý element je vnútri druhého.
Slovenský jazyk
Anglický jazyk
Ukrajinčina (ukrajinský jazyk)<b>Tento text je v elemente b, preto je tučným písmom.
<u>Tento text je v elemente u, ale zároveň aj v elemente b. Takže je nielen tučným písmom, ale aj podčiarknutý.</u>
A tento text je už len tučným písmom, lebo je len v elemente b.
</b>Element b teda začína na riadku 1 a končí na riadku 4 zdrojového kódu HTML. Zároveň v sebe obsahuje aj element u, ktorý je len na riadku 2. Keďže v texte nie je žiadny znak zalomenia riadku, na stránke sa všetko zobrazí v jednom riadku (resp. k zalomeniu dôjde automaticky, keď sa text do riadku nezmestí).
Jazyk HTML poskytuje široké možnosti na štruktúrovanie a formátovanie obsahu (textu, obrázkov, tabuliek...). Štruktúra webovej stránky (štruktúra HTML dokumentu) hovorí, aké elementy sú na stránke a v akom poradí (kde je nadpis, kde je obsah, kde je obrázok a pod.).
Na vytvorenie jednoduchej webovej stránky v HTML sa potrebujeme oboznámiť najmä s tým, ako formátovať text, ako vkladať do textu médiá (obrázky, videá a pod.) a ako používať odkazy medzi stránkami navzájom (linky resp. hypertextové odkazy). Toto sú najčastejšie elementy na webových stránkach a preto začneme v HTML tutoriáli práve s nimi.
Základným elementom webových stránok je text. Ako sme už spomenuli v sekcii úvod do jazyka HTML, na zadefinovanie odseku textu sa používa tag p (z angl. paragraph). Ak chceme v rámci odseku vložiť nový riadok, použijeme tag br. Ak chceme v tomto odseku niektoré slová zvýrazniť tučným písmom, vložíme ich do tagu b.
<!DOCTYPE html>
<html>
<head>
<title>Učím sa jazyk HTML</title>
</head>
<body>
<p>Môj prvý odsek textu.</p>
<p>Môj druhý odsek textu, <br>
<b>ktorý má aj druhý riadok písaný tučným písmom</b>
<br>aj tretí riadok.
</p>
</body>
</html>V jazyku HTML vieme použiť 6 úrovní pre nadpisy, ktoré sa označujú tagmi h1 až h6. Nadpisy sa v jazyku HTML (a aj všade inde v bežnom dokumente) píšu mimo odsekov textu, nie je preto vhodné vnárať ich do vnútra odseku.
<!DOCTYPE html>
<html>
<head>
<title>Učím sa jazyk HTML</title>
</head>
<body>
<h1>Nadpis prvej úrovne</h1>
<h2>Nadpis druhej úrovne</h2>
<h3>Nadpis tretej úrovne</h3>
<h4>Nadpis štvrtej úrovne</h4>
<h5>Nadpis piatej úrovne</h5>
<h6>Nadpis šiestej úrovne</h6>
</body>
</html>Pri tvorbe stránok sa na používanie nadpisov odporúča dodržiavať tieto zásady:
Poznámka: tieto odporúčania nie je nevyhnutné dodržiavať (sú to len odporúčania). HTML stránka sa zobrazí korektne aj bez ich dodržania.
Ak zásady nebudete dodržiavať, nesie to so sebou drobné problémy. Napr. vyhľadávací nástroj od Google pri čítaní stránok využíva informácie o tom, aký text je v ktorom elemente
a podľa toho sa rozhoduje, ktorý web zobrazí na akej pozícii vo vyhľadávači.
Marketing webu a jeho zobrazovanie vo vyhľadávačoch je však zložitejšia téma, ktorej sa v tomto tutoriáli nebudeme do hĺbky venovať.
Keď už vieme napísať nadpis a odsek textu, pozrime sa bližšie na ďalšie možnosti štruktúrovania a formátovania textového obsahu. V tabuľke nižšie uvádzame ďalšie často používané HTML tagy:
| u | podčiarknutý textu |
|---|---|
| strong | zvýraznený text nahrubo (rovnako aj tag b) |
| em | zvýraznenie textu kurzívou (rovnako aj tag i) |
| sup | indexhorný |
| sub | indexdolný |
| big | zväčšenie písma: toto je zväčšený text |
| small | zmenšenie písma toto je zmenšený text |
<body>
<p>bežný text
<small>zmenšený text</small>
<big>zväčšený text</big>
<u>podčiarknutý text</u>
<strong>hrubý text</strong>
<em>zvýraznený text</em>
index <sub>dolný</sub> index <sup>horný</sup>
</p>
</body>Poznámka: Rozdiely medzi tagmi: v staršej verzii HTML sa na zvýraznenie používali tagy b a i, v novšej verzii ich v podstate nahradili tagy strong a em. Dodnes fungujú obidve možnosti, ale novšie verzie sú zároveň sémantické tagy. Viac o rozdieloch z hľadiska sémantiky si povieme neskôr.
Poznámka 2: HTML jazyk neurčuje vizuálnu stránku dokumentu, len štruktúru obsahu. Prednastavené vizuálne zobrazenie tagov v prehliadači určí webový prehliadač. Každý prehliadač má predvolené pravidlá, ako sa majú jednotlivé HTML elementy zobrazovať. Tieto pravidlá sa použijú vtedy, keď ich nenastaví tvorca webu. Na vizuálne (grafické) spracovanie HTML dokumentu sa používajú pravidlá CSS, ktoré sa pridajú (nalinkujú) k dokumentu HTML. Viac o týchto technikách si povieme neskôr. Teraz je dôležité si uvedomiť to, že vizuálna stránka niektorých HTML tagov (napr. zväčšená hrúbka) nie je preto, že aplikujete v texte HTML tag, ale preto, že toto formátovanie nastaví váš prehliadač. Preto sa môže stať, že na rôznych zariadeniach sa bude zvýraznenie zobrazovať rôzne (mobil vs. veľký monitor a pod.).
Jednou z najviac užitočných vlastností HTML dokumentov je možnosť jednotlivé stránky vzájomne prepojiť pomocou hypertextových odkazov (liniek). Vďaka tomu sa vieme jednoducho z jednej stránky dostať na inú. Hypertextové odkazy slúžia nielen na vytvorenie navigácie v rámci jedného webu, ale aj na prepínanie medzi podstránkami a sekciami na tej istej stránke (v jednom HTML dokumente). Pomocou hypertextových odkazov sa vieme dostať (prekliknúť) na inú časť tej istej stránky, alebo na ľubovoľný iný dokument, obrázok, či inú webovú stránku umiestnenú na sieti (na internete). Odkazom nemusí byť len text, ale aj iný HTML element. Napríklad obrázok sa často využíva tak, že kliknutím na malý obrázok na stránke sa zobrazí väčšia verzia toho istého obrázku. To dosiahneme tak, že na malý obrázok aplikujeme tag pre hypertextový odkaz a nasmerujeme ho na veľký obrázok.
Hypertextový odkaz vložíme do dokumentu tagom a, pričom je možné pridať niekoľko atribútov. Najviac dôležitým atribútom je práve adresa odkazu, na ktorý dokument chceme odkazovať (parameter s názvom href).
<a href="https://www.eduself.sk/" title="Zobraziť web eduself.sk" target="_blank">eduself.sk</a>Odkazy môžu mať niekoľko parametrov, ktoré sú uvedené v nasledujúce tabuľke:
| Parameter | Popis | Príklady |
|---|---|---|
| href | adresa odkazu (kam sa po kliknutí presmeruje) | https://www.eduself.sk |
| title | text, ktorý sa zobrazí po prejdení kurzorom | hocijaký text |
| target | kde sa má odkaz otvoriť (v akom okne) | _self | _blank | _parent | _top | nazov-okna |
| rel | vzťah k odkazovanému dokumentu | external | nofollow | alternate | ... |
Atribút href špecifikuje, v ktorom okne sa má zobraziť odkazovaný obsah. Hodnotou _blank nastavíme otvorenie odkazu v novom okne, hodnoty _self, _parent a _top otvoria odkaz v tom istom okne. Rozdiely opíšeme neskôr. Ak sa tento atribút neuvedie, predvolená je hodnota _self (otvorenie v tom istom okne). Pre väčšinu prípadov preto nie je nutné tento atribút vyplniť, ak chceme otvoriť odkaz v rovnakom okne.
Používanie zoznamov sprehľadňuje text. V jazyku HTML rozlišujeme 3 typy zoznamov:
Odrážkový a číselný zoznam sa používajú podobne. Okrem hlavného (obaľovacieho tagu pre celý zoznam) je potrebné do tohto tagu vložiť jednotlivé položky zoznamu - každá položka má svoj tag li. Do tohto tagu (do odrážky) môžeme vložiť ľubovoľné ďalšie elementy na formátovanie textu.
<p>Odrážkový zoznam</p>
<ul>
<li>prvá položka</li>
<li><u>druhá položka je podčiarknutá</u></li>
<li>tretia položka</li>
</ul>
<p>Číselný zoznam</p>
<ol>
<li>prvá položka</li>
<li>druhá položka</li>
<li><strong>tretia položka je hrubšia</strong></li>
</ol>Definičný zoznam (pre zoznam definícií) má mierne inú syntax od prvých dvoch zoznamov. Obsahuje okrem obaľovacieho tagu dl dva tagy: tag dt pre pojem (angl. term) a tag dd ako definícia tohto pojmu (angl. description).
<dl>
<dt><strong>HTML</strong></dt>
<dd>Hypertext Markup Language</dd>
<dt><strong>CSS</strong></dt>
<dd>Cascading Style Sheets</dd>
</dl>Viac o používaní, formátovaní a štýlovaní zoznamov v jazyku HTML uvedieme v nasledujúcej kapitole zoznamy v jazyku HTML
Možnosti tvorby tabuliek sú v jazyku HTML bohaté, a preto im budeme venovať v rámci HTML tutoriálu samostatnú sekciu. Teraz si predstavíme len základné prvky tvorby tabuliek: vkladanie riadkov a vkladanie stĺpcov. Základné HTML tagy na prácu s tabuľkami sú:
<table border="1">
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>
</tr>
<tr>
<td>riadok 2, bunka 1</td>
<td>riadok 2, bunka 2</td>
</tr>
</table>K základným prvkov štruktúrovania tabuliek patrí používanie atribútov pre spájanie riadkov tabuľky, spájanie stĺpcov tabuľky či nastavenie okrajov a zarovnania:
<table border="2" cellspacing="10" cellpadding="7" width="80%">
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>
</tr>
<tr>
<td colspan="2">riadok 2, bunka 1 aj bunka 2 spolu</td>
</tr>
<tr>
<td>riadok 3, bunka 1</td>
<td rowspan="2">riadok 3 aj riadok 4 spolu, bunka 2</td>
</tr>
<tr>
<td>riadok 4, bunka 1</td>
</tr>
</table>Viac o používaní, formátovaní a štýlovaní tabuliek v jazyku HTML nájdete v kapitole tabuľky v jazyku HTML
Poznámka k používaniu tabuliek v HTML: mnohí (najmä začínajúci) programátori používajú tabuľky aj pre štruktúru celej webovej stránky (vytvoria tabuľku s dvomi stĺpcami, kde ľavý stĺpec obsahuje napr. menu webovej stránky s odkazmi a pravý stĺpec textový obsah). Toto nie je veľmi vhodné riešenie z hľadiska čitateľnosti celého webu. Tabuľky by sa mali používať len na zobrazenie tabuľkových dát. Pokiaľ ste začínajúci tvorca webov a ešte nepoznáte pokročilé možnosti formátovania elementov na stránke, tak je pochopiteľné, že vás to môže lákať pomôcť si tabuľkami pre tento účel :)
Pre vloženie obrázku na stránku sa používa tag img s atribútom src, v ktorom treba zadať cestu k obrázku. Cesta k obrázku môže byť:
<p>Tu je môj obrázok: <img src="https://www.eduself.sk/banner.gif" /></p>Doplňujúce atribúty pre tag img sú:
<p>
Tu je môj zväčšený obrázok <br>
<img src="https://www.eduself.sk/banner.gif" alt="ikonka webu kvizy" width="130px" height="130px" title="toto je logo webu eduself.sk" />
</p>Viac o vkladaní médií na HTML webovú stránku, ako sú napríklad obrázky, videá či zvuky, nájdete v samostatnej kapitole tohto HTML tutoriálu Médiá v HTML dokumentoch.
HTML tagy pre štruktúrovanie obsahu webových stránok rozdeľujeme do dvoch základných skupín podľa toho, či ide o elementy, ktoré sa zobrazujú do bloku alebo sú vložené do riadku.
Blokové HTML elementy (angl. block elements) sú také, ktoré pre svoje vykreslenie zaberú celú možnú šírku dokumentu. Aj keby išlo len o jedno písmenko, blokový element zaberie celú šírku riadku. To znamená, že keď za sebou vložíme v HTML kóde dva blokové elementy, nezobrazia sa vedľa seba, ale pod sebou. Je to preto, že každý z nich sa roztiahne do maximálnej možnej šírky.
Vložené HTML elementy (angl. inline elements) sú také, ktoré pre svoje vykreslenie nepoužívajú žiadne okraje navyše. Spotrebujú najmenší možný priestor, ako sa to dá.
Typickým príkladom blokového elementu je tag pre odsek textu p alebo zoznamy. Ak chceme napísať do každého riadku len jedno krátke slovo, aj tak sa v rámci HTML dokumentu vytvorí neviditeľný okraj až po pravý okraj stránky.
Naopak, vložené HTML elementy sú napríklad tagy na zvýrazňovanie textu (u, strong a pod.), ktorých priestor končí hneď pri ukončovacom tagu.
Oblasť, ktorú elementy zaberajú v priestore môžeme odhaliť tak, že pridáme každému HTML elementu pomocou štýlovania parameter, ktorý vykreslí okraj okolo nich. Použijeme atribút style (štýlovanie pomocou atribútu style si vysvetlíme neskôr, nateraz stačí vedieť, že takto vieme meniť vizuálne vlastnosti elementov stránky ako farbu textu, farbu pozadia, hrúbku a farbu okrajov a pod.).
<p style="border: 1px solid red">Toto je prvý blok textu, ktorý je dlhý.</p>
<p style="border: 1px solid red">Toto je druhý blok textu</p>
<ul style="border: 1px solid red">
<li>prvá položka zoznamu</li>
<li>druhá položka zoznamu</li>
</ul>
<p>
Tu je ďalší text, v ktorom je jedno slovo
<u style="border: 1px solid red">podčiarknuté</u>,
ďalšie slovo
<strong style="border: 1px solid red">zvýraznené</strong>
a posledné slovo
<s style="border: 1px solid red">prečiarknuté</s>.
A za nimi ďalší text.
</p>Na ukážke vidíme, že keď dáme vykresliť okraje pre element p alebo ul, ľavý okraj je úplne vľavo na stránke a pravý okraj úplne vpravo.
Naopak, keď pridáme zobrazovanie okrajov pre elementy ako u, okraje sú len tesne okolo tagu.
Rozlišovanie medzi blokovými a vloženými HTML tagmi je dôležité pri štruktúrovaní webovej stránky, aby sme vedeli, ako sa bude zobrazovať vytvorený obsah na stránke. V jazyku HTML preto existujú dva špeciálne tagy, ktoré sa používajú ako akýsi obal (alebo puzdro) pre všetko, čo je v nich vložené - teda všetky HTML elementy vnútri:
Tag div slúži ako blokový element
Tag span slúži ako vnorený element
Tieto tagy nemajú žiadny iný význam, slúžia len na zoskupenie iných elementov.
<div>
prvý <strong>div</strong>, v ktorom je veľmi veľmi veľa textu
</div>
<div>
druhý <strong>div</strong>, kde je málo textu
</div>
<span>
prvý <strong>span</strong>, v ktorom je veľmi veľmi veľa textu
</span>
<span>
druhý <strong>span</strong>, kde je málo textu
</span>Nižšie uvádzame príklad spolu s okrajmi, aby sme si vedeli pozrieť rozdiel - ako vyzerajú okraje elementov div a span
<div style="border: 2px solid red">
prvý <strong>div</strong>, v ktorom je veľmi veľmi veľa textu
</div>
<div style="border: 2px solid red">
druhý <strong>div</strong>, kde je málo textu
</div>
<span style="border: 2px solid purple">
prvý <strong>span</strong>, v ktorom je veľmi veľmi veľa textu
</span>
<span style="border: 2px solid purple">
druhý <strong>span</strong>, kde je málo textu
</span>
<p>Element div a v ňom dva elementy span a jeden div<br></p>
<div style="border: 3px solid green"> div
<span style="border: 3px solid blue">prvý vnorený span</span>
<span style="border: 3px solid blue">druhý vnorený span</span>
<div style="border: 3px solid red">vnorený div v elemente div, ktorý zaberie celý riadok :)</div>
</div>Ak je pre vás ukážka náročne pochopiteľná, nemusíte sa toho obávať.
Vnáranie elementov a využívanie vlastností blokových elementov a vložených elementov vyžaduje prax a experimentovanie.
V rámci tohto úvodu do HTML elementov stačí len poznať, aký je rozdiel medzi blokovými a vloženými elementami: teda
blokové elementy HTML zoberú maximálny možný priestor vľavo aj vpravo. To spôsobí, že nedokážete dať dva blokové elementy vedľa seba len tak jednoducho
(dá sa to, ale vyžaduje to viac znalostí). A vložené elementy HTML sú len vložené do obsahu bez okrajov okolo nich.
Štruktúra HTML stránky a štýlovanie HTML elementov na stránke sú odlišné veci, ktoré si začínajúci programátori webových stránok občas zamieňajú.
Štruktúra predstavuje usporiadanie jednotlivých elementov obsahu (kde je text, kde je nadpis a pod.)
Štýlovanie je vizuálna (grafická) úprava jednotlivých elementov (akú majú farbu, aká je veľkosť písma, aký je okraj okolo obrázku a pod.)
Jazyk HTML pracuje so štruktúrou webovej stránky. Na štýlovanie (vizuálnu úpravu) sa využívajú tzv. kaskádové štýly (CSS, z angl. cascading styles). Zjednodušene povedané, kaskádové štýly sú zoznamy pravidiel, ktoré určujú vizuálnu podobu elementov. Zvyčajne sa píšu do samostatného súboru, a tento súbor sa len nalinkuje k HTML súboru cez tag link. Alternatívne vieme kaskádové štýly priradiť pre konkrétny HTML element aj cez atribút style, ako sme to spravili v ukážke vyššie s vykreslením okrajov.
Na zmenu vizuálnych vlastností sa teda nepoužíva jazyk HTML, ale jazyk CSS, ktorému sa budeme venovať neskôr. Niektoré vizuálne vlastnosti vieme nastaviť aj cez HTML, ale skúsení tvorcovia webov to tak nerobia.
Viac o používaní kaskádových štýlov sa dočítate v kapitole HTML a CSS
Komentárom vieme označiť nejakú časť HTML kódu tak, aby bol viditeľný len v HTML zdrojovom kóde - nezobrazuje sa čitateľovi na webe. Komentáre v zdrojovom HTML kóde slúžia programátorom na to, keď si chcú v dokumente niečo zapísať ku kódu. Sú užitočné napríklad vtedy, keď chceme do zdrojového kódu pridať vlastnú poznámku alebo niečo, čo vysvetľuje ako funguje časť zdrojového kódu - takže je to veľmi užitočné práve pri tutoriáloch a návodoch. Keď si programátori navzájom posielajú zdrojové kódy, alebo preberajú zdrojové kódy od niekoho iného, je užitočné prečítať si komentár od autora kódu pred jeho použitím. Pri nasadení webovej stránky na internet je však vhodné komentáre odstrániť. Vo všeobecnosti sa neodporúča používať komentáre, keď už je web online (prístupný na internete).
V jazyku HTML sa komentáre dávajú medzi sekvencie znakov <!-- a --> (všetko medzi týmito sekvenciami je komentár)
<!-- Toto je komentár: Nižšie je slovo ahoj a horizontálne čiary -->
<hr>Ahoj<hr>Týmto sme si prešli základné elementy v jazyku HTML.
V tejto kapitole HTML tutoriálu sme sa naučili:
Používať základné HTML elementy na štruktúrovanie obsahu.
Vytvoriť hypertextové odkazy medzi HTML stránkami.
Vkladať do HTML stránky zoznamy, tabuľky a obrázky.
Rozlišovať blokové a vnorené HTML elementy.
Komentovať zdrojový kód v HTML.
V ďalších častiach si rozoberieme jednotlivé HTML elementy a atribúty podrobnejšie.