Z čoho sa skladá XHTML dokument

02.04.2011 17:50

V článku Čo je XHTML sme si povedali, že XHTML je pokračovateľom jazyka HTML a je založený na XML. Rozlišujeme 3 druhy XHTML:

  • XHTML 1.0 Strict
    • používa sa, ak chceme skutočne čisté štrukturálne značkovanie;
    • neobsahuje značky spojené s formátovaním vzhľadu;
    • musí sa používať spolu s CSS.
  • XHTML 1.0 Transitional
    • používa sa, ak chcete aj naďalej používať prezentačné funkcie jazyka HTML;
    • obsahuje, povoľuje značky spojené s formátovaním vzhľadu elementov.
  • XHTML 1.0 Frameset
    • používa sa v prípade, ak chcete použiť HTML rámy;
    • použitie rámov sa všeobecne neodporúča, preto sa tejto možnosti nebudeme vôbec venovať.

Kostra XHTML dokumentu

XHTML dokument sa skladá z dvoch základných častí - hlavičky a tela (head a body).

Hlavička stránky vždy začína deklaráciou XML

<?xml version="1.0" encoding="utf-8"?>

a deklaráciou samotného dokumentu.

  • XHTML 1.0 Strict
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • XHTML 1.0 Transitional
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • XHTML 1.0 Frameset
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Ďalej by sme mohli jednoducho pokračovať napr. nasledovne

<head>
<title>Titulok stránky</title>
</head>
<body>
Samotné telo stránky.
</body>
</html>

ale to by nám nepostačovalo. Hlavička býva zvyčajne trochu zložitejšia, aj keď sa môžeme stretnúť aj so základom, ktorý tu uvádzame.

Najlepšie bude, ak sa pozrieme na konkrétnu ukážku zdrojového kódu konkrétneho webu. A ako si zobrazíme zdrojový kód iného webu? Stlačením pravého tlačidla myši v tele stránky vyvoláme kontextovú ponuku, v ktorej zvolíme Zobraziť zdrojový kód (view source code). Samozrejme zobraziť zdrojový kód možno aj cez hlavnú ponuku internetového prehliadača. Napr.:

  • Internet Explorer: Strana - Zobraziť zdrojový kód
  • Mozilla Firefox: Zobraziť - Zdrojový kód stránky alebo klávesová skratka CTRL+U
  • Google Chrome: napr. klávesová skratka CTRL+U

Poďme sa teda spoločne pozrieť na zdrojový kód webovej stránky www.recepty.pre-vas.sk. Zaujímať nás bude hlavička. Pozrime sa na to:

Sami vidíte, že táto hlavička je podstatne zložitejšia. My budeme zo začiatku využívať šablóny, ktoré obsahuje editor PSPad a neskôr si vytvoríme aj vlastnú šablónu.

Samozrejme, keď už budeme mať niečo za sebou, vysvetlíme si podrobnejšie, čo do hlavičky patrí a prečo.

Ako vytvoriť nový dokument zo šablóny

Predpokladám, že editor PSPad máte už nainštalovaný. Spustíme PSPad a v hlavnej ponuke zvolíme Súbor - Nový.

Vyberieme si šablónu XHTML 1.0 Strict utf-8. Samozrejme šablón je veľa, neskôr bude záležať len na vás, ktorú si zvolíte.

Vytvorený dokument si uložíme napr. pod názvom prvy-pokus.html.

Jazyk samozrejme zmeníme na sk, ale to sme mohli spraviť už pri vytváraní dokumentu zošablónu, ak by sme "klikli" na upraviť.

Takýto súbor s kostrou vytvárame iba raz a do jeho kópií potom postupne vkladáme samotný obsah jednotlivých stránok.

Teraz do tela stránky, teda medzi značky <body> </body> napíše text: Ahoj kamarát!

Uložme stránku prostredníctvom klávesovej skratky CTRL+S a otvorme ju v ľubovoľnom internetovom prehliadači. Čo vidíte?

Náš prvý pokus je za nami.V ďalšom článku si predstavíme značky, tagy používané v jazyku XHTML.

—————

Späť


Novinky

Vytvorme jednoduchý web - HTML&CSS

05.04.2011 05:45
V rubrike HTML & CSS sa oboznámite so základmi tvorby webových stránok, pričom budeme využívať jazyk XHTML a...

—————

Spustili sme webovú prezentáciu o tvorbe webu

01.04.2011 10:25
Webová stránka o tvorbe webových stránok. Znie to krkolomne, pravda? Aj ja si to myslím, ale keď som začínal s tvorbou...

—————

Všetky články

—————


Vytvorte si web stránku zdarma! Webnode