Chcete sa naučiť jazyk HTML? Vitajte v prvej kapitole online tutoriálu na tvorbu webových stránok pomocou jazyka HTML. Môžete tu získať základné vedomosti a znalosti o jazyku HTML a tvorbe internetových stránok.
HTML (z angl. Hypertext Markup Language) v preklade do slovenčiny znamená hypertextový značkovací jazyk.
HTML jazyk možno charakterizovať ako:
Poznámka k pojmom HTML a webová stránka: HTML stránka je to isté ako HTML dokument. Keď je stránka napísaná v jazyku HTML,
znamená to, že jej obsah je uložený v HTML dokumente (súbor, ktorý obsahuje HTML kód).
Webová stránka HTML je teda obyčajný textový dokument, ktorého obsah je napísaný v jazyku HTML.
V rámci tohto HTML tutoriálu budeme používať obidva pojmy (HTML dokument aj webová stránka).
V praxi sa používa pojem webová stránka pre tie HTML dokumenty, ktoré sú na webe.
Čiže keď HTML súbor skopírujete na webový server, stáva sa z neho webová stránka (stránka dostupná na webe cez URL adresu).
Jazyk HTML obsahuje tagy resp. značky (preto sa volá značkovací jazyk). V rámci tutoriálu budeme používať slovo "tag", nakoľko je to viac zaužívané v porovnaní s pojmom HTML značka. Pomocou HTML tagov sa určuje štruktúra dokumentu.
HTML tagy sa píšu medzi znaky < a > , napríklad tag pre nový riadok je <br> (z angl. break). Výhodou takéhoto značenia je jednoduché rozlíšenie medzi obsahom stránky a HTML kódom. HTML tagy sú definované (to znamená, že existuje presne definovaný zoznam tagov, ktoré je možné použiť).
Tagy môžu byť párové alebo nepárové.
párové tagy majú začiatočný a konečný tag (napr. odsek textu má svoj začiatok a koniec). Na označenie odseku sa v HTML používa tag p, teda značka <p>). Koncový tag sa vždy volá rovnako, ale ešte obsahuje znak lomítka / pred názvom. V prípade odseku vyzerá ukončovací tag takto: </p>. Ukážka odseku v jazyku HTML je na príklade nižšie.
Slovenský jazyk
Anglický jazyk
Ukrajinčina (ukrajinský jazyk) <p>Toto je odsek textu</p> nepárové tagy sú samostatné (napr. spomínaný tag pre nový riadok).
Toto je prvý riadok textu. <br> Toto je už druhý riadok textuV niektorých prípadoch sa zvykne pri nepárových tagoch používať tag doplnený o spätné lomítko pred poslednou zátvorkou. Tento spôsob nie je nutný, ale pre zaujímavosť ho tiež uvádzame:
Toto je prvý riadok textu. <br/> Toto je už druhý riadok textuPri používaní HTML tagov platí jednoduché pravidlo: ktorý tag skôr začne, ten tag neskôr skončí. HTML tagy sa musia vnárať, nemôžu sa križovať.
Správna kombinácia tagov a a b je:
<a><b> text </b></a>
alebo
<b><a> text </a></b>
Križovanie tagov môže spôsobiť nesprávne zobrazenie HTML stránky
Na príklade nižšie je ukážka štruktúry pre jednoduchú webovú stránku.
<!DOCTYPE html>
<html>
<head>
<title>Moja stránka</title>
</head>
<body>
<h1>Vitajte na mojej stránke</h1>
<p>Toto je moja prvá stránka.</p>
</body>
</html>Všimnite si, ako sa HTML tagy do seba vnárajú: tag head je celý vnútri tagu html, rovnako aj tag title je vnorený v tagu head.
Vysvetlenie jednotlivých riadkov zdrojového kódu:
| <!DOCTYPE html> | informácia pre prehliadač, že ide o HTML dokument |
|---|---|
| <html> ... </html> | začiatočný a ukončovací html tag (na druhom a poslednom riadku). Týmito značkami sa definuje, že všetko vnútri (medzi začiatočným a konečným tagom) je obsah v jazyku HTML |
| <head> ... </head> | Hlavička HTML dokumentu: v tejto časti sa nachádzajú informácie týkajúce sa dokumentu (napr. jazyková verzia stránky, autor stránky, titulok stránky a pod.). |
| <title>Moja stránka</title> | Tag title (nachádzajúci sa v hlavičke HTML dokumentu) predstavuje titulok stránky. Zobrazuje sa napríklad v lište webového prehliadača alebo ako názov dokumentu pri jeho uložení. |
| <body> ... </body> | Telo HTML dokumentu: v tejto časti sa nachádza obsah, ktorý sa zobrazuje na stránke (napr. text, obrázky, tabuľky, videá a pod.) |
| <h1>...</h1> | Nadpis prvej úrovne. |
| <p>...</p> | Odsek (paragraf) textu. |
Poznámka k písaniu HTML zdrojového kódu:
Ako je vidieť na ukážke zdrojového kódu, pre lepšiu čitateľnosť sa zvykne vnorený tag (tag nachádzajúci sa vnútri iného tagu) odsadiť od ľavého okraja tabulátorom.
Čím viac tagov vnárame, tým väčšie je odsadenie. Takéto odsadzovanie tagov nie je nutné dodržiavať, web sa zobrazí správne aj bez toho. Ale
pri takomto peknom formátovaní je jednoduchšie napísaný kód prečítať a programátor ľahšie vidí, kde je začiatok a koniec ktorého tagu.
Rovnako aj prázdne riadky nemajú žiadny význam a je možné ich nepoužívať, je to skôr o zvyku a prehľadnosti kódu. Rovnako je možné celý kód napísať do jedného riadku a všetko bude fungovať.
Na začiatok sme si predstavili najviac používané HTML tagy na tvorbu obsahu webovej stránky. Ako už vieme, obsah stránky, ktorý sa zobrazuje v prehliadači, píšeme do tela stránky - do tagu body. Odseky textov obaľujeme tagom p a ak chceme použiť v rámci odseku nový riadok, použijeme tag br.
Nie je teraz nutné naučiť sa všetky tagy naspamäť, to príde samo :) Tieto, a aj ďalšie tagy (ako vkladanie odkazov či obrázkov) si podrobnejšie opíšeme v ďalších častiach HTML tutoriálu.
Každý HTML tag môže mať svoje atribúty (vlastnosti). Atribúty tagov sa píšu do vnútra začiatočného tagu. Ako príklad si uvedieme odsek textu, pri ktorom sa pri prechode kurzorom myši zobrazí text. Použijeme na to tag pre odsek p, ktorému pridáme atribút na zobrazenie textu po prejdení myšou s názvom title, a do úvodzoviek sa uvedie ako hodnota náš text, ktorý chceme zobraziť.
Jeden HTML tag môže obsahovať viacero atribútov naraz. Ak chceme, aby sa text ešte aj zobrazoval v strede (vycentrovaný na stred stránky), použijeme atribút align s hodnotou center
<p align="center" title="Text, ktorý sa zobrazí po prejdení myšou"> Klikni sem </p> Výsledok:
Pomocou atribútov vieme pridávať rôzne vlastnosti dokumentu. Napríklad keď chceme povedať, že náš HTML dokument je v slovenskom jazyku, stačí do tagu HTML pridať atribút lang:
<html lang="sk"> V tomto úvodnom diele HTML tutoriálu sme sa okrem iného naučili, že:
Jazyk HTML je najrozšírenejší jazyk na tvorbu webových stránok (hypertextových dokumentov).
Jazyk HTML obsahuje množinu tagov, pomocou ktorých môžeme definovať štruktúru webovej stránky a formátovať obsah.
HTML tagy sa zapisujú do špicatých zátvoriek < a >.
HTML tagy môžu byť párové (majú začiatočný a konečný tag) alebo nepárové.
Štruktúra HTML stránky obsahuje dve hlavné časti: hlavičku (tag head) a telo stránky (tag body). Tie sú vložené v hlavnom (obaľovacom) tagu html, ktorý ohraničuje celý HTML dokument.
V ďalších častiach si bližšie rozoberieme elementy jazyka HTML.