HTML jazyk je značkovací jazyk, ktorý sa primárne používa na vytváranie webových stránok. O jeho špecifikáciu sa stará W3C konzorcium, ktoré aj vydáva jeho nové verzie, postupom času sme sa dopracovali až po najnovšiu verziu, ktorá ešte nieje vo svojej finálnej podobe a to HTML 5. Po verzii 4.01, ktorá vznikla v roku 1999 sa už ďalej neplánovalo, že budú ďalšie verziu HTML jazyka. Mal ho nahradiť XHTML jazyk založený na XML.
Verzia HTML 4.01 Strict bola použitá pri chváľovani ISO štandardu ako ISO/IEC 15445:2000.
HTML jazyk, ako už bolo spomenuté je značkovací jazyk. To znamená, že prvky z ktorých sa skladá sú značky (tagy). Celý dokument sa skladá z textových informácii a teda neobsahuje špeciálne binárne výrazy, a to umožňuje jeho ľahkú editáciu v hocijakom textovom editore (napr. poznámkový blok).
Jednotlivé značky sa umiestňujú medzi ostré zátvorky < a > . Napríklad značka hlavička vyzerá ako <head>
a značka telo <body>
.
Značky môžu byť párové alebo nepárové, To znamená či označujú začiatok a koniec určitého textu, alebo môžu byť umiestnené aj samostatne. Ako príklad párovej značky si uvedieme zvýraznenie určitého textu tučným písmom
nasledujuci text <b>bude tucne pismo</b> po tade
nasledujuci text bude tucne pismo po tade
V predchádzajúcom príklade sme si uviedli, párovú značku BOLD, teda tučné písmo. Jej začiatočná značka je <b>
ukončovacia značka je rozšírena o znak /
a teda ma tvar </b>
.
Každý HTML súbor by mal na svojom začiatku obsahovať značku
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ktorá znamená, že používame štandard HTML 4.01 a následne už sa môžeme venovať samotnému dokumentu.
Dokument HTML sa spravidla skladá z dvoch časti a to hlavičky (HEAD) v ktorej sa nachádzajú základné informácie o dokumente a tela dokumentu (BODY), ktorom je viditeľný obsah dokumentu. Všetky tri značky sú párové, označujú svoj začiatok i koniec.
<html> <head> ...tu patria znacky pre nastavenie hlavicky ... </head> <body> ...tu vkladame dalsie znacky, ktore uvidime v dokumente... </body> </html>
V následujúcom príklade si ukážeme ako nastaviť titulok okna a zobraziť jednoduchý text. Následujúce riadky si skopírujte do vášho obľúbeného textového editora a uložte ako obyčajný text s príponou .html
. Následne ho zobrazte cez akýkoľvek internetový rehliadač.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Toto je nadpis okna</title> </head> <body> Toto sa zobrazi </body> </html>
Pasáž o značke META
nieje povinná, odporúčam si ju prečítať aspoň zo zvedavosti a povšímnúť si hlavne informácie o kódovaní, ktoré sú najdôležitejšie.
Všetky META
značky sa vkrádajú do hlavičky.
Ak webstránku napíšete v jednom operačnom systéme napríklad UNIX a budete ju zobrazovať v inom, napríklad Windows, čoskoro zistíte, že sa text obsahujúci národné znaky nezhoduje s pôvodným a namiesto znakov s dĺžňami a mäkčeňmi zobrazujú úplne iné znaky. Aby ste tomu zabránili, musíte určiť aké kódovanie používate.
Pre Windows:
<meta http-equiv="Content-type" content="text/html; charset=Windows-1250">
Pre Linux:
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
Ak potrebujete aktualizovať zobrazenie webstránky v pravidelných intervaloch, potom zvolíte podobný zápis ako je v tomto príklade:
<meta http-equiv="refresh" content="5">
V príklade sa webstránka pravidelne znovunačítava každých 5 sekúnd.
Ak potrebujete v určitom čase presmerovať webstránku na inú, zápis bude asi takýto:
<meta http-equiv="refresh" content="5;url=http://www.presov.sk">
v atribúte content
pribudla položka url
, ktorá označuje novú webovú adresu, ktorá sa zobrazí po uplynutí času (v príklade, 5 sekúnd)
V hlavičke sa môže nachádzať aj informácia o autorovi, poprípade zoznam kľúčových slov.
<meta name="author" content="Feri"> <meta name="keywords" content="www, hypertext, html, http">
Na záver iba pár slov o odsadení. Pokiaľ chceme, aby bol HTML dokument, ktorý píšeme v textovom editore dobre čitateľný, nesmieme zabúdať na určitý štýl písania. V predchádzajúcich príkladoch sme vždy obsah väčšej párovej značky, ktorá v sebe obsahuje viac značiek odsadili o 2 (alebo niekedy aj 3) medzery, takýmto odsadzovaním riadkov docielime ľahšiu vizuálnu kontrolu a prehľadnosť dokumentu. Pokiaľ ešte stále nerozumiete, alebo neveríte, pozrite si tieto dva príklady.
Neodsadený text, všetko začína od začiatku riadku:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Toto je nadpis okna</title> </head> <body> Toto sa zobrazi </body> </html>
Odsadený text, vnoreré značky alebo text su posunuté v každej úrovní o 3 medzery:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Toto je nadpis okna</title> </head> <body> Toto sa zobrazi </body> </html>
Zhrnuté a podčiarknuté. Vaše prvé snaženie o jednoduchú webstránku môže vyzerať napríklad takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="author" content="Jožko Mrkvička"> <title>Mojá prvá stránka</title> </head> <body> <h1>Pokus 1</h1> Toto je môj prvý pokus o <b>HTML</b> súbor.<br> Páči sa Vám? :-) </body> </html>
Po kliknutí na meno sa súbor uloží do počítača, potom ho môžete otvoriť cez akýkoľvek internetový prehliadač.