Obsah

Úvod do jazyka

Úvod do jazyka

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.

Značky

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

Štruktúra HTML súboru

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>

META

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.

Kódovanie

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

Znovu načítanie stránky

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)

Autor a kľúčové slová

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

Odsadenie textu

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>

Prvý html súbor

Zhrnuté a podčiarknuté. Vaše prvé snaženie o jednoduchú webstránku môže vyzerať napríklad takto:

index.html

<!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č.

html, index.html, mps, gdm