Tutorials - grafika pro každého , tutoriály , grafická komunita , portál

Jak správně nakódovat layout? 1.část

Napsal: Jaa(c)7.1.2009 Líbí se vám článek? Podpořte nás!

---

V tomto tutoriálu se dozvíte, jak co nejlépe nakódovat layout webu a zároveň se vám pokusím vysvětlit základní principy moderního webdesignu.

Obtížnost: Začátečník - Autor předpokládá, že máte základní znalosti HTML.

Psáno pro verzi programu: Není určena

---

V tomto tutoriálu se dozvíte, jak co nejlépe nakódovat layout webu a zároveň se vám pokusím vysvětlit základní principy moderního webdesignu. To vše vám předvedu na konkrétním příkladu. Budeme se učit psát kód ručně, na WYSIWYG editory (FrontPage, DreamWeaver) zapomeňte! V tutoriálu se budu věnovat úplným začátkům jen okrajově, proto předpokládám, že máte přinejmenším základní znalosti XHTML a CSS. Tento tutoriál bude volně navazovat na předchozí lefiathův seriál o webdesignu, takže bude lepší, když už budete mít tyto články přečtené, zejména části, které se věnují více obecným zásadám webdesignu než grafice:

1. Webdesign teoreticky
2. 1. část – Různé formy webů
3. 2.část – Základy grafiky

Další nezbytnou věcí, kterou už byste měli mít zvládnutou je rozřezání grafiky. Tomuto tématu se věnuje lefovo Intermezzo – 5. část seriálu. Tento článek si určitě zopakujte před tím, než začnete číst následující řádky. Dozvíte se v něm nejen jak se layout rozřezává, ale také v článku najdete plno tipů, rad a různých odkazů, které jsou pro webdesignéra velmi důležité.

Celý tutoriál bude rozdělen do tří dílů. V této první části si povíme něco o základech XHTML a CSS a základní kostře XHTML dokumentu, nebude to žádné záživné čtení, ale bez základů se člověk neobejde. V následujícím dílu se budu věnovat principům a zásadám ve webdesignu a poslední díl se bude týkat nakódování konkrétního layoutu.

Základy XHTML a CSS

V této kapitole popíšu základy výše zmíněných jazyků, ale nebudu tuto problematiku nějak dlouze a dopodrobna probírat. Kdo se bude chtít učit od úplného začátku, můj článek ho spíše jen nasměruje, kde co hledat a jak vlastně začít. Pokud máte základní znalosti obou jazyků, tak si to stejně přečtěte, opakování je matka moudrosti :) Při tvorbě se budeme řídit standardy W3C. Základním zdrojem informací pro kodéra je dokumentace a tou se musí řídit. I my z ní budeme vycházet.
Dokumentace XHTML 1.0 – http://www.w3.org/TR/xhtml1/
Dokumentace CSS 2.1 – http://www.w3.org/TR/CSS21/
Další nezbytnou věcí je naučit se používat google. Hodně věcí je už vymyšlených, stačí umět hledat. Skoro vždy je rychlejší použít google, než se ptát na nějakém diskusním fóru. Pokud ale umíte anglicky, vždy byste měli být schopni vyhledat potřebné informace v dokumentaci :)

XHTML

XHTML je jazyk, který prakticky vznikl jakýmsi spojením dvou původních jazyků – HTML a XML. Všechny tyto jazyky jsou na bázi SGML, proto jsou si také v mnohém podobném. HTML je značkovací jazyk, vytvořený výhradně pro tvorbu webů. Protože je to jazyk značkovací, jeho základním stavebním kamenem jsou značky (nebo jinak tagy). Jednoduše řečeno, tyto značky nám tvoří jakousi kostru stránek a pomáhají nám formátovat obsah a řadit obsah do určitých logických celků. Častou chybou je nazývání HTML programovacím jazykem. V HTML si nic naprogramovat nemůžeme, neexistují v něm žádné proměnné, cykly, podmínky ani nic takového, jsou v něm opravdu výhradně jen značky. Tyto značky můžeme rozdělit do dvou základních typů – párové a nepárové. Rozdíl není nijak složitý, párové značky jsou vždy dvě, první určuje začátek, druhá konec daného prvku. Například tedy párový tag pro odkaz – <a> a . Text nebo cokoli mezi těmito značkami se bude chovat jako odkaz. Jako příklad nepárového tagu je například
, značka která následující obsah odsadí na nový řádek. Rozdíl je myslím jasný.
Prvky můžeme dále dělit na blokové a řádkové. S tímto dělením se také budeme často setkávat. Rozdíl mezi nimi je vcelku primitivní. Řádkový prvek je takový, který obvykle obsahuje jen několik slov. Řádkový prvek nesmí obsahovat prvek blokový (je to sice logické, nicméně se s takovou chybou často setkávám). Mezi tyto prvky patří např. <a>, <span>, <strong> apod. Oproti tomu blokový prvek může obsahovat prakticky cokoliv – text, blokové i řádkové prvky atd. To jsou například prvky jako <body>, <p>, <ul>, <div>…
Většina značek u sebe může mít tzv. atribut, který značku nějak doplňuje nebo určuje nějakou její vlastnost. Jako příklad můžeme zůstat u odkazu. Pokud napíšeme něco takového – <a>tento text je odkaz</a> – tak jsme sice vytvořili odkaz, ale odkaz nikam nevede. Proto mu přiřadíme atribut href, který nám určí, kam odkaz směřuje. Výsledek bude vypadat asi takto <a href="http://www.tutorials.cz" >tento text je odkaz</a>. Takovýto odkaz už samozřejmě fungovat bude. Pokud vám to ještě není pořádně jasné, zkuste si přečíst nějaké povídání na jakpsatweb.cz. Pro začátečníky je to dobrý zdroj informací, ale celkově je web už dost zastaralý, takže se na něj zast tak moc nevažte…
Když se vrátíme zpět k XHTML, napsal jsem, že vznikl jakýmsi spojením HTML a XML. XML je také značkovacím jazykem, ale oproti HTML je mnohem přísnější ve své syntaxi. Tuto větší striktnost právě přináší do XHTML. V praxi to znamená, že pokud vytvoříme HTML dokument a bude v něm chyba, prohlížeč tuto chybu buďto přehlédne, nebo se jí pokusí nějak opravit. Když však vytvoříme XML dokument, odešleme ho příslušným MIME typem a prohlížeč narazí na nějakou chybu, nebude pokračovat a skončí chybovou hláškou. Stejně tak by to mělo fungovat i v XHTML. V praxi se zejména v začátcích s mnoha rozdíly nesetkáte. Asi takovým nejběžnějším rozdílem je ukončování nepárových tagů zpětným lomítkem, tedy tag bude vypadat např. takto – <br />. Dalším důležitým rozdílem je striktnost psaní značek malými písmeny. Pokud se chcete dozvědět více, přečtěte si třeba tento článek – Rozdíly HTML a XHTML a nebo prostě jen použijte google.

Značky a atributy, které budeme potřebovat

Atributy, které nejsou specifické pro konkrétní značku

• class – tento atribut přiřazuje danému prvku jakousi třídu. Tento atribut musíte znát kvůli CSS, brzy pochopíte proč. Více prvků může mít stejnou třídu.
• id – tento atribut je velmi podobný atributu class s tím rozdílem, že je unikátní. Pouze jeden prvek na stránce může mít přiřazen atribut s danou hodnotou.

Značky, které budeme dál v tutoriálu používat Vysvětlivky:
jpw – odkaz na příslušný popis značky na stránkách jakpsatweb.cz
p / np – párová / nepárová značka
ř / b – řádkový / blokový prvek

• <!DOCTYPE> – jpw,np – Značka, která informuje o verzi použitého XHTML a obsahuje DTD – návod jak má prohlížeč zpracovávat dokument.
• <html> – jpw,p,b – Začíná i ukončuje celý dokument, veškerý obsah patří mezi počáteční a koncovou značku.
• <head> – jpw,p,b – Hlavička stránky obsahující další tagy, na stránkách se nezobrazuje. Obsahuje ovšem základní informace a díky nim se třeba zobrazuje grafika.
• <body> – jpw,p,b – Mezi tyto značky patří veškerý obsah dokumentu, vše co se na stránkách zobrazuje.
• <title> – jpw,p – Titulek stránky, který se zobrazuje v záhlaví prohlížeče, tag patří do hlavičky.
• <meta> – jpw,np – Značka, která vždy nese nějakou informaci, např. použité kódování dokumentu, MIME typ, popis a plno dalších užitečných i zbytečných věcí.
• <link> – jpw,np – Používá se na spojitost s jiným souborem, patří jen do hlavičky. My se s ním sekáme při propojení CSS se stránkou.
• <h1> .. <h6> – jpw,p,ř – Šest značek pro nadpisy, <h1> je nadpis nejvyšší úrovně. Z hlediska sémantiky zásadní věc, je nutné dodržovat správnou strukturu nadpisů. O tom ještě budu psát.
• <a> – jpw,p,ř – Značka pro odkaz, atribut href=„cesta“, může obsahovat jak absolutní, tak relativní cestu. Nepovinný atribut title="" obsahuje text, který se zobrazí při najetí myší na odkaz.
• <img /> – jpw,np – Značka pro vložení obrázku, obrázek se vkládá pomocí atributu src=„cesta/nazev-obrazku“. Dále je zde povinný atribut alt=„alternativní text“, obsah tohoto atributu se zobrazí, pokud se obrázek nepodaří načíst.
• <p> – jpw,p,b – Značka pro odstavec…
• <strong> – jpw,p,ř – Tato značka se dá považovat za sémantickou alternativu <b>, slouží pro silnější zdůraznění slova v textu. Při standardním nastylování se projevuje tučným písmem.
• <em> – jpw,p,ř – Stejně jako předchozí značka je toto jakási sémantická alternativa pro <i>, slouží pro mírnější zdůraznění slova, standardně se text zobrazuje kurzívou.
• <div> – jpw,p,b – Prvek bez jakéhokoliv sémantického významu, nejčastěji se používá pro stavbu layoutu. Je to anonymní prvek, tzn. že musí obsahovat další prvky – nesmí obsahovat přímo text.
• <span> – jpw,p,ř – Řádkový kolega <div>u, může ovšem obsahovat text.
• <ul> – jpw,p,b – Značka pro nečíslovaný seznam, například tento seznam značek je takto řešený. Podobná je značka <ol> s tím rozdílem, že seznam je číslovaný.
• <li> – jpw,p,b – Položka uspořádaného seznamu.
• <form> – jpw,p,b – Značka pro vytvoření formuláře, atributy method="" a action="" jsou spíše záležitostí skriptu, který formulář zpracovává. To už je mimo rámec našeho seriálu.
• <input> – jpw,np,ř – Políčko formuláře, atribut type="" určuje druh políčka. Jednotlivé druhy si případně projděte na jpw…
• <label> – jpw,p,ř – Label je spíše sémantická značka, váže se ke specifickému políčku formuláře a obsahuje jeho popisek. Atribut for="" se musí shodovat s atributem id="" u políčka formuláře, ke kterému popisek přísluší.
• <br /> – jpw,np – Nový řádek…
• <!-- -> – jpw,n – Toto je značka pro komentář, jakýkoliv text napsaný mezi těmito značkami se na stránkách nezobrazí, bude pouze ve zdrojovém kódu

CSS

CSS (kaskádové styly) jsou takový kabát stránek. Jediná věc, co CSS umí, je formátovat dokumenty, tedy CSS vytváří podobu stránek a nijak neovlivňují obsah výsledného dokumentu. Než se nějak složitě snažit obecně popisovat CSS, jednoduší bude asi uvést příklad: v XHTML máme nějaký tag <html>a syntaxe CSS je následující html{ background:black; } Tedy obecně řečeno, za předpokladu, že máme značku <tag> : tag { vlastnost: hodnota; } Nejprve si popíšeme základní terminologii, abychom si vůbec rozuměli:

Dalo by se říct, že to hlavní v CSS jsou vlastnosti. Ty nám vytvářejí výsledný vzhled dokumentu. CSS obsahuje desítky vlastností, mnoho z nich budu v tutoriálu popisovat, určitě by nemělo cenu je zde všechny vypisovat. Na kompletní seznam CSS vlastností i s popisem jejich chování se můžete podívat třeba na stránkách jakpsatweb.cz – přehled CSS vlastností. Teď nebudu vlastnosti popisovat, základní vlastnosti pochopíte už podle názvu, ostatní si vysvětlíme v průběhu návodu. Pokud neznáte základy CSS, projděte si jen tak orientačně výše zmíněný odkaz, abyste byli v obraze, co všechno jde pomocí CSS udělat. Nebuďte zděšení z množství vlastností, postupem času si je vysvětlíme.
Teď se zastavíme u selektorů. Selektory nám popisují prvky v dokumentu, pro které má dané pravidlo platit. Nejjednodušším selektorem je název prvku, jak jsme si uvedli hned v prvním příkladu.
Dalším selektorem může být prvek dané třídy. Takové pravidlo se bude vztahovat na prvky, které mají danou třídu pomocí atributu class. Selektor se zapisuje pomocí tečky za názvem prvku, za tečkou následuje atribut class (h1.class). Prvků stejné třídy může být na stránkách více a prvky ani nemusí být stejné. Můžeme mít například prvek <p class="prvni"> … <h1 class="prvni"> Tomuto pravidlu vyhovují oba prvky: .prvni {color:white} Tomuto pravidlu bude vyhovovat pouze první prvek: p.prvni {color:white} Třetí možností je tzv. prvek s daným pojmenováním. Každému prvku v dokumentu můžeme přiřadit atribut id, který musí být unikátní (v dokumentu může být jen jeden prvek s daným id). Selektor se v tomto případě označuje #, syntaxe je podobná jako v předchozím případě: <h2 id="nadpis"> #nadpis {color: red;} (v tomto případě by bylo zbytečné psát h2#nadpis, protože v dokumentu může být jen jeden prvek s id="nadpis" – nicméně někteří lidé to používají, protože na jedné stránce může být tím prvkem h2, jinde zas h3)
Existují samozřejmě i další selektory. Nejobecnějším je tzv. univerzální selektor. Označuje se pomocí hvězdičky (*) a vyhovují mu všechny prvky v dokumentu. * {text-align:left} Takové pravidlo nám říká, že všechny prvky v dokumentu budou zarovnány doleva. Je to mocný nástroj, ale nepřehánějte to s ním – může napáchat víc škod než užitku.
Selektory můžeme také kombinovat. K tomu nám slouží operátory. Operátory máme čtyři a to jsou mezera , + >. V praxi se nejvíce setkáte s čárkou a mezerou, zbylé dva selektory bohužel zatím nepodporuje IE a proto jsou prakticky nepoužitelné. Pomocí čárky můžeme jednotlivé selektory slučovat. To nám často může velmi zpřehlednit a usnadnit práci. Ilustrační příklad – tři takováto pravidla: p {color: red} a {color: red} h1 {color: red} můžeme zapsat do jediného pravidla právě pomocí operátoru "," p, a, h1{color: red} Nejčastěji používaným selektorem je asi mezera. Ta patří do tzv. následovnických selektorů. Pomáhá nám vytvořit specifičtější selektor – kombinovaný selektor. Za všemi těmito pojmy se skrývá celkem jednoduchá věc. Předvedu opět na příkladu: <p>Máme nějaký odstavec a v něm je <a href="#">odkaz</a> a text může pokračovat dál.</p> Pokud chceme vytvořit pravidlo pro všechny odkazy, které se nacházejí v odstavci, použijeme jako operátor mezeru. p a {color: blue} Tomuto pravidlu vyhovují všechny všechny odkazy, které jsou uvnitř odstavce. Pravidla mohou být samozřejmě složitější, vždy platí, že prvek "za mezerou" je následovníkem předešlého prvku. Pravidla můžeme samozřejmě libovolně kombinovat, uvedu zase nějaký ilustrační příklad: body p a, div a {font-weight: bold} div.obsah #nadpis, h2, h3, .obsah h4 {color: red} ul li * {color:#000}

Další věcí, o které bych se rád v krátkosti zmínil jsou pseudotřídy a pseudoprvky. Stále se ještě pohybujeme v oblasti selektorů. Opět si zmíníme jen ty nejdůležitější a nejpoužívanější, s těmi si pro začátek vystačíme.
Nejběžněji se používají pseudotřídy odkazů, to jsou :link, :visited, :hover, :active a :focus. Prohlížeč nám umožňuje rozlišovat, zda byl nějaký odkaz již navštíven nebo ne (toho jste si jistě už na webu všimli). Pseudotřída :link se vztahuje k takovému odkazu, který ještě nebyl navštíven. Pokud už navštíven byl, nachází se v pseudotřídě :visited. Každý odkaz se nachází v jedné z těchto možností, jinak to ani nejde. Pokud si stále ještě nedovedete představit o co jde, jistě pochopíte z obrázku:

Syntaxe je následující (neváže se k obrázku): a:link {color:blue} a:visited {color: red} Odkaz bude modrý, po navštívení se jeho barva změní na červenou.
Stejným způsobe fungují i další tři dynamické pseudotřídy. Pseudotřída :hover se prvku přiřadí, pokud na něj uživatel najede kurzorem. To také určitě všichni znáte, stačí když myší najedete na tento odkaz. V okamžiku, kdy jste na něj najeli zmizelo podtržení. To by se udělalo takto: a:hover {text-decoration:none} Další pseudotřídy jsou už méně běžné, pseudotřídu :focus má prvek, který je zaměřen (nejčastěji pomocí klávesnice, můžete klávesou tab procházet odkazy nebo formuláře na stránce). Pseudotřídu :active má prvek v tu chvíli, kdy jej uživatel aktivuje – tedy například kliknutí myší (osobně nevidím důvod proč takovou věc stylovat, jedná se o efekt, který trvá zlomky vteřiny). Dále existuje pseudotřída :first-child, tu prvek získává, pokud je prvním potomkem jiného prvku. Obdobně fungují pseudoprvky :first-line, pro první řádek textu daného prvku, a :first-letter, pro první písmeno prvku (pomocí toho můžeme např. vytvořit iniciálu). Dále ještě existuje jazyková pseudotřída :lang a pseudoprvky :before a :after (umožňují zajímavé věci – generování obsahu pomocí CSS, ale samozřejmě nepodpora IE…), nicméně to už jsou relativně výjimečné prvky, rozhodně přesahující tento tutoriál.

Poslední věcí, kterou nesmím zapomenout je dědičnost a kaskáda.
Pokud jednu vlastnost jednomu prvku definujeme několikrát, prohlížeč si vždy vybere tu "pozdější" vlastnost. Tohoto chování využíváme např. při používání podmíněných komentářů (o těch zmíním v poslední části tutoriálu.) p {color: red; color: blue} stejně tak p {color: red} … cokoli {} … p {color: blue} V obou případech bude barva odstavce modrá. Tomuto principu říkáme kaskáda. V praxi jde o trochu širší chování, v prohlížeči se totiž může setkat více tabulek stylů najednou – tabulka stylů od autora (CSS na webu), tabulka od uživatele (vlastní CSS, můžete vytvořit obecná pravidla pro vlastní prohlížeč) a tabulka stylů od klienta (výchozí tabulka stylů, ta popisuje standardní chování prvků – určuje dokumentace). Kaskáda musí každé tabulce určit „váhu“ a podle toho rozhodnout, které pravidlo použít. Nejmenší váhu má výchozí tabulka, největší váhu má tabulka autora. Toto pořadí lze však změnit pomocí příkazu !important. Příklad: Výchozí tabulka stylů: p {display: block; margin: 1.33em 0;} Uživatelská tabulka: p {margin: 2em 0;} Autorská tabulka p {margin: 15px 10px;} → podle výše napsaného pravidla se odstavec ve výsledku zformátuje takto: p {display: block; margin: 15px 10px;} Pokud však jako uživatel budu chtít tuto rovnováhu narušit, použiji příkaz !important a moje uživatelská tabulka bude vypadat takto: p {margin: 2em 0 !important;} → výsledný formát prvku bude vypadat takto: p {display:block; margin: 2em 0;} Tento příkaz rovnováhu otáčí, uživatelská tabulka s tímto příkazem má absolutně nejvyšší váhu. Ve výjimečných případech lze tento příkaz použít i v autorských tabulkách, nicméně není to vůbec běžná záležitost. (Už jsem zas mimo rámec tohoto návodu :)
To jsme si tedy vysvětliti kaskádu, takže hurá na dědičnost.
Existuje princip, podle kterého prohlížeč přiřazuje dané vlastnosti hodnotu. Zjednodušeně to funguje asi takto: Nejprve prohlížeč zjistí, zda je hodnota někde zadaná (v tabulce stylů), pokud není, zjistí, jestli lze tuto hodnotu zdědit (vypočítá hodnotu) a pokud nejde ani zdědit, přiřadí jí standardní hodnotu (z výchozí tabulky stylů). Jak je to tedy s tím děděním… Každá vlastnost má určeno, zde je dědičná, nebo není. Jak jsme si již řekli, pokud prvek nemá ručně nadefinovanou vlastnost, může jí zdědit. Příklad: a {color:blue} … <a href="#">odkaz<strong>nikam</strong></a> Odkaz má definovanou modrou barvu, prvek strong ne. Protože je tato vlastnost dědičná, bude i prvek strong modrý. Takto je to asi jasné a zdá se to jednoduché, nicméně při složitějších selektorech a více pravidlech se do toho může člověk pěkně zamotat, takže mějte dědičnost vždy na paměti, je to základní vlastnost CSS!

Už jsem toho o CSS napsal vcelku dost, ale stále jsem Vám ještě neprozradil kde se CSS v tom XHTML vezmou.Jak to tedy dát dohromady?
Existují 3 způsoby, jak vložit CSS do XHTML. Nejlehčí, ale ne nejlepší, řešení je vložit CSS přímo do XHTML kódu pomocí atributu style. Takové řešení vypadá nějak takto <p style="color:#333;width:50%"> … </p> Tohle řešení samozřejmě funguje stejně jako ostatní, ale na větších stránkách se složitějšími konstrukcemi by to bylo značně nepřehledné, navíc nám toto řešení neumožňuje používat selektory, pseudotřídy a jiné vymoženosti CSS. Toto řešení už dále používat nebudeme
Druhou možností je vložení CSS do hlavičky webu pomocí tagu style . Do tohoto tagu už vkládáme klasicky psanou tabulku stylů. Tento způsob vypadá takto (zdůrazňuji, že tag <style> musí být v hlavičce webu, atributy type je povinný). V XHTML je také nutné deklarovat tabulku stylů jako CDATA: <style type="text/css"> <[CDATA[ body { background:#000; } body p { color:#fff; } … ]]> </style> Ani toto řešení nadále používat nebudeme.
Třetím, nejlepším řešením je vytvořit pro CSS styly externí soubor *.css. Do souboru se zapisuje klasická tabulka stylů přesně tak, jak jsme se to doteď učili. Tento externí soubor vložíme do stránky pomocí tagu <link>, který také umístíme do hlavičky. To bude vypadat takto: <link rel="stylesheet" type="text/css" href="cesta/nazev-souboru" media="screen" /> Atribut media není povinný, pokud není uveden, je soubor určen pro všechna média. Nejčastěji se setkáte asi s hodnotami screen – pro zobrazení na běžném monitoru, dále se můžete setkat s hodnotou print – soubor je určen pro tisknutí. Celkem máme 10možných hodnot – viz. dokumentace, ale s těmi se nesetkáte moc často, spíše v nějakých specifických případech.

To by myslím ke stručným základům stačilo, samozřejmě jsem nezmínil vše, ale to jsem ani nechtěl. Spíš jsem se snažil stručně shrnout co vše byste měli umět, aby pro vás mělo cenu zabývat se dál tímto tutoriálem. Pokud vám tyto základy dělají problémy, zkuste si trochu projít odkazy, o kterých jsem se v textu zmiňoval, popřípadě si projít odkazy z lefova intermezza.

Základní kostra XHTML dokumentu

Pokud už tedy chápete, co jsou to tagy, znáte syntaxi XHTML a CSS, můžeme se podívat, jak tedy vlastně ty značky poskládat, aby nám vznikla webová stránka. Obrázek někdy pomůže víc než tisíc slov:

Začneme hned u prvního řádku, na kterém se nachází xml deklarace. Touto deklarací začínají všechny XML a stejně tak i XHTML dokumenty. Pokud však používáte kódování UTF, nemusíte deklaraci uvést. Já jí obvykle v tomto případě neuvádím, protože pokud je v dokumentu uvedená, IE6 se přepne do nestandardního zobrazovacího režimu a nadělá vám ještě větší bordel než obvykle. Se zobrazovacími režimy souvisí i použitý doctype. K této tématice doporučuji přehledný článek DOCTYPE a režimy prohlížečů od pixyho. V našem tutoriálu bude používat pouze verzi XHTML 1.0 Strict, takže se nám budou stránky vykreslovat ve standardním zobrazovacím režimu. Proto jsem i tento doctype uvedl do příkladu. Dále zde máme tag <html>, který má na rozdíl od HTML povinný atribut xmnls, ten nám určuje jmenné prostředí dokumentu. Dále zde máme atribut xml:lang, který nám určuje jazyk celého dokumentu. Kvůli zpětné kompatibilitě uvádíme i atribut lang.

Dalším prvkem je hlavička. V hlavičce by neměla chybět deklarace kódování a použití MIME typ. Pro XHTML máme sice MIME typ application/xhtml+xml, bohužel IE neumí s tímto typem pracovat a takové soubory nabízí ke stažení, proto je v současnosti tento typ nepoužitelný. O možnostech kódování se zmíním v dalším dílu seriálu, proto to nebudu zde více rozvádět. Do hlavičky patří také tagy <link>, jako příklad jsem uvedl tag připojující externí CSS soubor. Titulek stránky také zapisujeme do hlavičky. Jediné, na co si musíme dát pozor je, aby byl titulek vždy až za definicí kódování. Jinak by se nám nemusely různé znaky správně zobrazit. Po ukončení hlavičky už následuje tělo dokumentu, do kterého patří veškerý obsah stránek, další povinné tagy už zde nemáme.

To by pro dnešek stačilo, pro některé to bylo asi až moc nových informací najednou :). V příštím dílu si vysvětlíme ještě některé zásady a řekneme si co všechno vlastně budeme pro kódování potřebovat.

Sekce: Webdesign