The article XHTML a CSS, 5.diel is written by PaBi3
V tejto casti serialu sa dozviete trochu mensi nahlad na problematiku XHTML a aj mensi popis rozdielov medzi XHTML a HTML. Tak ako v kazdej casti dlhy clanok malo vysledku ale efekt vedomosti sa zvysi.
Tak ako som slubil v minulej casti, tak aj dodrzim. Tato cast bude zamerana cisto na XHTML a so vzhladom layoutu budeme pracovat minimalne kdezto s jeho obsahom maximalne. To, ze XHTML je ovela prisnejsie ako HTML nieje ziadne tajomstvo. V HTML ste doteraz mohla pisat syntax akokolvek. Mohli ste pouzivat male a velke pismena, mohli ste pisat bez uvodzoviek atd. V XHTML existuje pravidlo pisat syntax iba malymi pismenami a vsetky atributy(hodnoty) zapisovat iba v uvodzovkach alebo apostrofach. Pre mnoho prehliadacov je neprelozitelny vysoky pocet tagov v XHTML, pretoze sa kazdy jeden musi ukoncit. Ako priklad mozem uviest jeden z najpouzivanejsich tagov "linebreak". Jeho syntax je nasledovna pre HTML <br>. V XHTML zapisujeme tento tag nasledovne <br  /> Mnoho zaciatocnikov moze tento tag zapisat takto <br></br>. To je vsak odporujuce pre niektore prehliadace a znamena to aj to, ze "linebrak", je prazdny tag, tak nenosi ziadnu hodnotu. Preto sa ukoncuje rovno /. V "linebreak" odporucam, tak ako som zapisal pouzit medzeru medzi textom br a lomitkom. Je to validne a prelozi to kazdy prehliadac. Nie u vsetkych tagov vsak mozeme obcakavat moznosti ako u "linebreak". Zoberme si taky <img>. V buducom XHTML(2) bude zruseny ale predsa by som ho uviedol ako priklad spravneho zapisu s jeho spravnym ukoncenim. Nasledovny spravny zapis pre obrazok v XHTML: <img src="obrazok.jpg" alt="obrazok" />. Nemozno si nevsimnut ukoncovacieho lomitka, ktore je pre XHTML pravidlom. Kedze <img obsahuje hodnotu mozny "spravny" zapis je aj takyto: <img src="obrazok.jpg" alt="obrazok"></img>. Samozrejme sa syntax alebo niektore tagy mozu odlisovat, skor by som povedal, ze niektore mozu aj vypadnut a to v zavislosti od vami zvolenej normy. Normy XHTML sme si uz popisali aj s ich syntaxov v 1. casti serialu. Ja osobne aby som povedal na pripomenutie pouzivam XHTML 1.1. Je to najprisnejsia forma a odporucam ucit sa XHTML od nej, pretoze potom uz nespravite chyby v inych normach. Prisnost sa odrazila aj na krizeni elementov, takze nespravne zapisy elementov vyzeraju nasledovne <strong><em>Text</strong></em>. Ak by ste chceli zabranit krizeniu musite zapisat tagy spravne a to v poradi <strong><em>Text</em></strong>. Ako obycajne ani komentare do dokumentu nesmu chybat a preto je syntax nasledovna(pouzitelne na stranke aj v DTD):<!--Toto je komentar-->. Syntax komentarov sa od HTML nezmenila. Aby sme uz tolko nepisali teorie zacneme praxou. Otvorime si dokument kde bol ulozeny nas layout a zacneme do neho pomaly pridavat obsah v XHTML syntaxy. Toto je nas aktualny obsah, ktory mame vlozeny uz s predchadzajucich casti serialu: <h1>Nadpis stranky</h1> <br />Obsah stranky.<br /> Tato stranky je generovana pomocou kaskadovych sablon CSS a pomocou dokumentov XHTML.<br /> Toto je priklad XHTML stranky urobenej na servery www.pabi3.com Vysledok nasho dotazu v layoute je nasledovny: Nadpis stranky Obsah stranky. Tato stranky je generovana pomocou kaskadovych sablon CSS a pomocou dokumentov XHTML. Toto je priklad XHTML stranky urobenej na servery www.pabi3.com Teraz nadide cas ked zacneme pisat XHTML :-). Nasledujuci kod upravime v obsahu layoutu(div "obsah") na: <h1>Nadpis stranky</h1> <br />Obsah stranky.<br /> Tato stranky je generovana pomocou kaskadovych sablon CSS a pomocou dokumentov XHTML.<br /> Toto je priklad XHTML stranky urobenej na servery www.pabi3.com <hr /> <strong><em>Toto je napisane pomocou XHTML 1.1</em></strong><br /> Toto je logo ezinu PaBi3.com<br /> <img src="logo.gif" alt="obrazok" /><br /> Toto je tiez logo ezinu PaBi3.com ale v inom zapise<br /> <img src="logo.gif" alt="obrazok"></img> <!--Rad navstevujem tieto stranky--> <h1></h1> sluzi ako nadpis stranky a uz sme si o nom hovorili v minulych castiach. Prve(nove) co sme zapisali bol tag <hr />, ktory je podobne ako <br /> ukonceny lomitkom s medzerou medzi nazvom tagu. Sluzi na vypisanie vodorovnej ciary do bloku v ktorom sa nachadza. Dalej sme zapisali nekriziace sa tagy (mozu byt aj elementy <p> a pod.), ktore uspesne vypisu kurzive, tucne pismo. Obrazky sme vkladali obidvoma moznostami, tak aby ste si mohli vsimnut funkcnost oboch a takisto aj ich uspesny prechod validatorom. Odporucam pouzivat aj atribut title, ktory ma takmer totoznu funkciu s artributom alt, lenze sa zobrazuje pri stoji mysou nad obrazkom alebo nejakym inym tagom ci elementom popis(hodnota title) aj v inych prehliadacoch ako IE. Nakoniec sme si zapisali len, tak pre seba komentar, ktory ako vidite nikde nieje vidiet iba ak si pozriete zdrojovy kod stranky. Vysledok nasej prace bude vyzerat nasledovne: Nadpis stranky Obsah stranky. Tato stranky je generovana pomocou kaskadovych sablon CSS a pomocou dokumentov XHTML. Toto je priklad XHTML stranky urobenej na servery www.pabi3.com Toto je napisane pomocou XHTML 1.1 Toto je logo ezinu PaBi3.com Toto je tiez logo ezinu PaBi3.com ale v inom zapise(uvadzam len zdrojovy kod, kvoli validite XHTML1.1) <img src="logo.gif" alt="obrazok"></img> O XHTML sa da pisat naozaj velmi vela ale to uz necham na dalsie casti serialu kde sa hladiny informovanosti o CSS a XHTML konecne vyrovnaju a bude to, tak 50:50. Vysledok vlozeneho obsahu bude vyzerat takto. Tymto ukoncujem tuto cast serialu.
XHTML a CSS, 5.diel Návrat

XHTML a CSS, 5.diel