The article XHTML a CSS, 1.diel is written by PaBi3
XHTML a CSS je buducnost webu, ktora prinasa mnoho vylepseni a novinek od zastaraleho HTML. Medzi HTML a XHTML nie je velky rozdiel a preto nebude tazke zvyknut si na novu syntax, ktora sa lisi len drobnostami. CSS je taktiez jednou z technologii, ktoru bude tento serial zahrnat. Cielom tohoto serialu bude naucit vas vytvarat "moderny" web pomocou CSS - kaskadovych sablon, XHTML dokumentov a rovno vam mozem povedat, ze na tag <table>, na ktory ste si urcite zvykli mozete zabudnut. Su to zastarale technologie, ktore uz pomaly vypadavaju z internetu. XHTML sa od HTML odlisuje v mnohych smeroch ale struktura zapisu zostala rovnaka. XHTML je teraz vo validite trochu prisnejsie ale ked tvorite web v XHTML tak to urcite nebude v editore FrontPage ale musite ho pisat rucne. Snad taky mensi nezvyk prinesie XHTML tym, ktori si zvykli pisat tagy velkymi pismenami, ale myslim, ze to nie je az taky problem sa preorientovat na male pismena. Vsetky tagy sa v XHTML pisu malymi pismenami, inak by validator bral tagy pisane velkymi pismenami ako chybny zapis. Prejdime k pisaniu stranky.
Zapis DTD Strict - tato norma zakazuje formatovanie dokumentu. Zapis je zhodny s HTML 4 az na odlisnosti medzi XML a SGML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> Transitional - tato norma nepouziva framy a je pre zacinajucich webdesignerov, ktori chcu zacat s XHTML. Oproti inym normam je tato najmenej prisna. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> Frameset - tato norma je urcena pre webdesginerov, ktori chcu stranku vyvijat cestou vo framoch. Je to malo pouzivana forma, ktora ale ma svoje opodstatnenie. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd"> Doteraz najnovsia norma, ktora vsetko formatovanie prebera s CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Teraz ked je popis ukonceny, ukazeme si zapis XHTML dokumentu, ktory pouzijeme v nasom priklade s normou XHTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Teraz by sme skoncili s nasim zapisom DTD a presli by sme k hlavicke webu a to je zname <head>. Do hlavicky musime zapisat "minimalne" aspon kodovanie stranky. Ako prve sa v XHTML zapise XML deklaracia - jej verzia a kodovanie. <?xml version="1.0" encoding="iso-8859-2"?> Kodovani je takmer nespocetne mnozstvo a je len na vas aku sadu znakov si zvolite. Medzi najpouzivanejsie u nas patria iso-8859-2, UTF-8 alebo windows-1250. Su tu aj ine moznosti ale po tych uz patrajte sami :-). Tieto dve kodovania odporucam z hladiska dekodovania slovenskych aj ceskych znakov. Kodovanie iso-8859-2 je viac upredostnovane pred windows-1250. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> Ako vidite, vyssie v kode je uvedeny Content-Type (text/html) a nasledne za nim je uvedene kodovanie. Dalej nasleduje zapis autora (nie je povinne!), popisu stranky a pod. Vsetko si povieme ale najprv si pozrite zapis tychto metatagov. <meta name="robots" content="follow, all" /> <meta name="author" content="www.PaBi3.com" /> <meta name="Keywords" content="XHTML, CSS, PaBi3" /> <meta name="description" content="Toto je stranka v XHTML, ktora vyuziva kaskadove sablony CSS." /> <meta http-equiv="imagetoolbar" content="no" /> <title>Nadpis stranky v XHTML.</title> Vsetkych 5 meta-tagov ma svoj vyznam ale niektore su aj cisto zbytocne. Meta-tag robots prikazuje vyhladavacom aby si vasu stranku ulozili do databazy. Meta-tag autor je prakticky zbytocny, pretoze jeho funkcia je bezvyznamna. Je to viacmenej iba taka vizitka, pomocou ktorej sa niekto dozvie kto je autor vytvoreneho webu. Keywords su klucove slova, ktore stranka obsahuje. Description uz podla nazvu bude jasna kazdemu. Je to popis stranky, ktory sa objavi vo vyhladavaci. Description odporucam pouzivat urcite, pretoze su to 2 najdolezitejsie metatagy pre vyhladavace. Image Toolbar je tam ako maly priklad a sluzi na to, aby v prehliadaci MSIE pri podrzani kurzoru nad obrazkom nebolo ziadne menu pre ulozenie obrazka. Taktiez ho odporucam pouzivat. Posledny je tu titulok a je v nom nadpis stranky. Je velmi dolezite ho vyplnit Dalsi zapis bude suvisiet s cestou k CSS - kaskadovym stylom. <link rel="stylesheet" href="style_s.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style_p.css" type="text/css" media="print" /> Tag <link> pripaja CSS k stranke (v nasom pripade pri rel='stylesheet'). Obe cesty su rovnake ako vidite ale mohli ste si vsimnut sucast tagu "media". Screen sa pouziva na vidietlne definicie v CSS, ktore si sami urcite. Typ "print" sluzi ako tlacovy vystup. Ak by ste chceli mat rovnake CSS sablony aj pre tlacovy vystup alebo viditelny obraz v prehliadaci staci namiesto dvoch <link> napisat len jeden a nastavit media na "all". Media typov je viac druhov. Hlavicku ukoncime </head> a teraz je vsetko hotove. Este jedna moznost pripojenia CSS k XHTML dokumentu je takato: <style type="text/css" media="screen">@import "style.css";</style> Ma rovnaku funkciu ako <link rel="style…>, len s tym rozdielom, ze funguje aj na starsich prehliadacoch. Ma vsak aj svoje nevyhody, ktore je zbytocne menovat, pretoze ako som povedal na zaciatku clanku, "CSS a XHTML je buducnost". Preco sa vracat do minulosti? Tento vyber necham na vas. Odporucam <link> Na zaver este taka mala ukazka hotoveho kodu: <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="robots" content="follow, all" /> <meta name="author" content="www.PaBi3.com" /> <meta name="Keywords" content="XHTML, CSS, PaBi3" /> <meta name="description" content="Toto je stranka v XHTML, ktora vyuziva kaskadove sablony CSS." /> <meta http-equiv="imagetoolbar" content="no" /> <title>Nadpis stranky v XHTML.</title> </head> <body> <div> Toto je stranka v XHTML a CSS. </div> </body> </html> Ukoncenie obsahu stranky vykoname pomocu tagu <body> a jeho ukoncenie </body> + ukoncenie celeho dokumentu pomocou </html>.
XHTML a CSS, 1.diel Návrat

XHTML a CSS, 1.diel