V tejto časti seriálu sa dozviete trochu menší náhľad na problematiku XHTML a aj menší popis rozdielov medzi XHTML a HTML. Tak ako v každej časti dlhý článok málo výsledku ale efekt vedomostí sa zvýši.

Tak ako som sľúbil v minulej časti, tak aj dodržím. Táto časť bude zameraná čisto na XHTML a so vzhľadom layoutu budeme pracovať minimálne kdežto s jeho obsahom maximálne. To, že XHTML je oveľa prísnejšie ako HTML nieje žiadne tajomstvo. V HTML ste doteraz mohla písať syntax akokoľvek. Mohli ste používať malé a veľké písmená, mohli ste písať bez úvodzoviek atď. V XHTML existuje pravidlo písať syntax iba malými písmenami a všetky atribúty(hodnoty) zapisovať iba v úvodzovkách alebo apostrofách. Pre mnoho prehliadačov je nepreložiteľný vysoký počet tagov v XHTML, pretože sa každý jeden musí ukončiť. Ako príklad môžem uviesť jeden z najpoužívanejších tagov "linebreak". Jeho syntax je nasledovná pre HTML <br>. V XHTML zapisujeme tento tag nasledovne <br  /> Mnoho začiatočníkov môže tento tag zapísať takto <br></br>. To je však odporujúce pre niektoré prehliadače a znamená to aj to, že "linebrak", je prázdny tag, tak nenosí žiadnu hodnotu. Preto sa ukončuje rovno /. V "linebreak" odporúčam, tak ako som zapísal použiť medzeru medzi textom br a lomítkom. Je to validné a preloží to každý prehliadač. Nie u všetkých tagov však môžeme občakávať možnosti ako u "linebreak". Zoberme si taký <img>. V budúcom XHTML(2) bude zrušený ale predsa by som ho uviedol ako príklad správneho zápisu s jeho správnym ukončením. Nasledovný správny zápis pre obrázok v XHTML: <img src="obrazok.jpg" alt="obrazok" />. Nemožno si nevšimnúť ukončovacieho lomítka, ktoré je pre XHTML pravidlom. Keďže <img obsahuje hodnotu možný "správny" zápis je aj takýto: <img src="obrazok.jpg" alt="obrazok"></img>. Samozrejme sa syntax alebo niektoré tagy môžu odlišovať, skôr by som povedal, že niektoré môžu aj vypadnúť a to v závislosti od vami zvolenej normy. Normy XHTML sme si už popísali aj s ich syntaxov v 1. časti seriálu. Ja osobne aby som povedal na pripomenutie používam XHTML 1.1. Je to najprísnejšia forma a odporúčam učiť sa XHTML od nej, pretože potom už nespravíte chyby v iných normách. Prísnosť sa odrazila aj na krížení elementov, takže nesprávne zápisy elementov vyzerajú nasledovne <strong><em>Text</strong></em>. Ak by ste chceli zabrániť kríženiu musíte zapísať tagy správne a to v poradí <strong><em>Text</em></strong>. Ako obyčajne ani komentáre do dokumentu nesmú chýbať a preto je syntax nasledovná(použiteľné na stránke aj v DTD):<!--Toto je komentár-->. Syntax komentárov sa od HTML nezmenila.

Aby sme už toľko nepísali teórie začneme praxou. Otvoríme si dokument kde bol uložený náš layout a začneme do neho pomaly pridávať obsah v XHTML syntaxy. Toto je náš aktuálny obsah, ktorý máme vložený už s predchádzajúcich častí seriálu:

<h1>Nadpis stránky</h1>
<br />Obsah stránky.<br />

Táto stránky je generovaná pomocou kaskádových šablón CSS a pomocou dokumentov 
XHTML.<br />

Toto je príklad XHTML stránky urobenej na servery www.pabi3.com

Výsledok nášho dotazu v layoute je nasledovný:

Nadpis stránky

Obsah stránky.

Táto stránky je generovaná pomocou kaskádových šablón CSS a pomocou dokumentov XHTML.

Toto je príklad XHTML stránky urobenej na servery www.pabi3.com

Teraz nadíde čas keď začneme písať XHTML :-). Nasledujúci kód upravíme v obsahu layoutu(div "obsah") na:

<h1>Nadpis stránky</h1>

<br />Obsah stránky.<br />

Táto stránky je generovaná pomocou kaskádových šablón CSS a pomocou dokumentov 
XHTML.<br />

Toto je príklad XHTML stránky urobenej na servery www.pabi3.com

<hr />

<strong><em>Toto je napísané pomocou XHTML 1.1</em></strong><br />

Toto je logo ezinu PaBi3.com<br />

<img src="logo.gif" alt="obrazok" /><br />

Toto je tiež logo ezinu PaBi3.com ale v inom zápise<br />

<img src="logo.gif" alt="obrazok"></img>

<!--Rád navštevujem tieto stránky-->

<h1></h1> slúži ako nadpis stránky a už sme si o ňom hovorili v minulých častiach. Prvé(nové) čo sme zapísali bol tag <hr />, ktorý je podobne ako <br /> ukončený lomítkom s medzerou medzi názvom tagu. Slúži na vypísanie vodorovnej čiary do bloku v ktorom sa nachádza. Ďalej sme zapísali nekrížiace sa tagy (môžu byť aj elementy <p> a pod.), ktoré úspešne vypíšu kurzivé, tučné písmo. Obrázky sme vkladali obidvoma možnosťami, tak aby ste si mohli všimnúť funkčnosť oboch a takisto aj ich úspešný prechod validátorom. Odporúčam používať aj atribut title, ktorý má takmer totožnú funkciu s artributom alt, lenže sa zobrazuje pri stoji myšou nad obrázkom alebo nejakým iným tagom či elementom popis(hodnota title) aj v iných prehliadačoch ako IE. Nakoniec sme si zapísali len, tak pre seba komentár, ktorý ako vidíte nikde nieje vidieť iba ak si pozriete zdrojový kód stránky.
Výsledok našej práce bude vyzerať nasledovne:

Nadpis stránky

Obsah stránky.

Táto stránky je generovaná pomocou kaskádových šablón CSS a pomocou dokumentov XHTML.

Toto je príklad XHTML stránky urobenej na servery www.pabi3.com

Toto je napísané pomocou XHTML 1.1

Toto je logo ezinu PaBi3.com



Toto je tiež logo ezinu PaBi3.com ale v inom zápise(uvádzam len zdrojový kód, kvôli validite XHTML1.1)

<img src="logo.gif" alt="obrázok"></img>

O XHTML sa dá písať naozaj veľmi veľa ale to už nechám na ďalšie časti seriálu kde sa hladiny informovanosti o CSS a XHTML konečne vyrovnajú a bude to, tak 50:50. Výsledok vloženého obsahu bude vyzerať takto. Týmto ukončujem túto časť seriálu.

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 30.04.2005 21:22