Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Grafika, Photoshop, tutoriály

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

7. 1. 2009 v 0:00 0 Jak správně nakódovat layout? 1.část

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.

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 . 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ř. , , apod. Oproti tomu blokový prvek může obsahovat prakticky cokoliv - text, blokové i řádkové prvky atd. To jsou například prvky jako ,

,

    ,
    ...
    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 -     tento text je odkaz - 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 tento text je odkaz. 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 -
    . 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
    • - jpw,np - Značka, která informuje o verzi použitého XHTML a obsahuje DTD - návod jak má prohlížeč zpracovávat dokument.
    • - jpw,p,b - Začíná i ukončuje celý dokument, veškerý obsah patří mezi počáteční a koncovou značku.
    • - jpw,p,b - Hlavička stránky obsahující další tagy, na stránkách se nezobrazuje.
    • - jpw,p,b - Mezi tyto značky patří veškerý obsah dokumentu, vše co se na stránkách zobrazuje.
    • </em> - <a href="http://www.jakpsatweb.cz/html/hlavicka.html#title">jpw</a>,p - Titulek stránky, který se zobrazuje v záhlaví prohlížeče, tag patří do hlavičky.</li> <li><em><meta></em> - <a href="http://www.jakpsatweb.cz/html/hlavicka.html#meta">jpw</a>,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í.</li> <li><em><link></em> - <a href="http://www.jakpsatweb.cz/html/hlavicka.html#link">jpw</a>,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.</li> <li><em><h1></em> .. <em><h6></em> - <a href="http://www.jakpsatweb.cz/html/bloky.html#hn">jpw</a>,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.</li> <li><em><a></em> - <a href="http://www.jakpsatweb.cz/html/odkazy.html#a">jpw</a>,p,ř - Značka pro odkaz, atribut <em>href="cesta"</em>, může obsahovat jak absolutní, tak relativní cestu. Nepovinný atribut <em>title=""</em> obsahuje text, který se zobrazí při najetí myší na odkaz.</li> <li><em><img /></em> - <a href="http://www.jakpsatweb.cz/html/obrazky.html#img">jpw</a>,np - Značka pro vložení obrázku, obrázek se vkládá pomocí atributu <em>src="http://img.tutoriarts.cz/jaa/obr-1/cesta/nazev-obrazku"</em>. Dále je zde povinný atribut <em>alt="alternativní text"</em>, obsah tohoto atributu se zobrazí, pokud se obrázek nepodaří načíst.</li> <li><em><p></em> - <a href="http://www.jakpsatweb.cz/html/bloky.html#p">jpw</a>,p,b - Značka pro odstavec...</li> <li><em><strong></em> - <a href="http://www.jakpsatweb.cz/html/text.html#strong">jpw</a>,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.</li> <li><em><em></em> - <a href="http://www.jakpsatweb.cz/html/text.html#em">jpw</a>,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.</li> <li><em><div></em> - <a href="http://www.jakpsatweb.cz/html/bloky.html#div">jpw</a>,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.</li> <li><em><span></em> - <a href="http://www.jakpsatweb.cz/html/text.html#span">jpw</a>,p,ř - Řádkový kolega <div>u, může ovšem obsahovat text.</li> <li><em><ul></em> - <a href="http://www.jakpsatweb.cz/html/seznamy.html#ul">jpw</a>,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> <li><em><li></em> - <a href="http://www.jakpsatweb.cz/html/seznamy.html#li">jpw</a>,p,b - Položka uspořádaného seznamu.</li> <li><em><form></em> - <a href="http://www.jakpsatweb.cz/html/formulare.html#form">jpw</a>,p,b - Značka pro vytvoření formuláře, atributy <em>method=""</em> a <em>action=""</em> jsou spíše záležitostí skriptu, který formulář zpracovává. To už je mimo rámec našeho seriálu.</li> <li><em><input></em> - <a href="http://www.jakpsatweb.cz/html/formulare.html#input">jpw</a>,np,ř - Políčko formuláře, atribut <em>type=""</em> určuje druh políčka. Jednotlivé druhy si případně projděte na jpw....</li> <li><em><label></em> - <a href="http://www.jakpsatweb.cz/html/formulare.html#label">jpw</a>,p,ř - Label je spíše sémantická značka, váže se ke specifickému políčku formuláře a obsahuje jeho popisek. Atribut <em>for=""</em> se musí shodovat s atributem <em>id=""</em> u políčka formuláře, ke kterému popisek přísluší.</li> <li><em><br /></em> - <a href="http://www.jakpsatweb.cz/html/bloky.html#br">jpw</a>,np - Nový řádek...</li> <li><em><!-- -></em> - <a href="http://www.jakpsatweb.cz/html/struktura.html#poznamka">jpw</a>,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</li> </ul> </p> <h4><a name="css">CSS</a></h4> <p>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 <code><html></code>a syntaxe CSS je následující <code>html { background:black; } </code> Tedy obecně řečeno, za předpokladu, že máme značku <tag> : <code>tag { vlastnost: hodnota; } </code> Nejprve si popíšeme základní terminologii, abychom si vůbec rozuměli:<br /> <img src="http://img.tutoriarts.cz/jaa/obr-1/css.png" alt="terminologie CSS" /> Dalo by se říct, že to hlavní v CSS jsou <strong>vlastnosti</strong>. 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 <a href="http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html">jakpsatweb.cz - přehled CSS vlastností</a>. 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.<br /> Teď se zastavíme u <strong>selektorů</strong>. Selektory nám popisují prvky v dokumentu, pro které má dané pravidlo platit. Nejjednodušším selektorem je <em>název prvku</em>, jak jsme si uvedli hned v prvním příkladu.<br /> Dalším selektorem může být <em>prvek dané třídy</em>. 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 <code><p class="prvni"> ... <h1 class="prvni"></code> Tomuto pravidlu vyhovují oba prvky: <code>.prvni {color:white}</code> Tomuto pravidlu bude vyhovovat pouze první prvek: <code>p.prvni {color:white}</code> Třetí možností je tzv. <em>prvek s daným pojmenováním</em>. 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 analogická k předchozímu případu: <code><h2 id="nadpis"></code> <code>#nadpis {color: red;}</code> (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")<br /> 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. <code>* {text-align:left}</code> Takové pravidlo nám říká, že všechny prvky v dokumentu budou zarovnány doleva.<br /> Selektory můžeme také kombinovat. K tomu nám slouží <strong>operátory</strong>. 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: <code>p {color: red} a {color: red} h1 {color: red}</code> můžeme zapsat do jediného pravidla právě pomocí operátoru "," <code>p, a, h1 {color: red}</code> 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: <code><p>Máme nějaký odstavec a v něm je <a href="#">odkaz</a> a text může pokračovat dál.</p></code> Pokud chceme vytvořit pravidlo pro všechny odkazy, které se nacházejí v odstavci, použijeme jako operátor mezeru. <code>p a {color: blue}</code> 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ě <em>libovolně</em> kombinovat, uvedu zase nějaký ilustrační příklad: <code>body p a, div a {font-weight: bold} div.obsah #nadpis, h2, h3, .obsah h4 {color: red} ul li * {color:#000}</code></p> <p>Další věcí, o které bych se rád v krátkosti zmínil jsou <strong>pseudotřídy a pseudoprvky</strong>. 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.<br /> 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ě nevyl 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 ještě stále nedovedete představit o co jde, jistě pochopíte z obrázku:<br /> <img src="http://img.tutoriarts.cz/jaa/obr-1/google.png" alt="Pseudotřída :visited a :link" /> Syntaxe je následující (neváže se k obrázku): <code>a:link {color: blue} a:visited {color: red}</code> Odkaz bude modrý, po navštívení se jeho barva změní na červenou.<br /> 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 <a href="#">tento odkaz</a>. V okamžiku, kdy jste na něj najeli zmizelo podtržení. To by se udělalo takto: <code>a:hover {text-decoration: none}</code> 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.<br /> <img src="http://img.tutoriarts.cz/jaa/obr-1/iniciala.png" alt="Ukázka pseudotřídy :first-letter, iniciála" /></p> <p>Poslední věcí, kterou nesmím zapomenout je <strong>dědičnost a kaskáda</strong>.<br /> 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.) <code>p {color: red; color: blue}</code> stejně tak <code>p {color: red} ... cokoli {} ... p {color: blue}</code> V obou případech bude barva odstavce modrá. Tomuto principu říkáme <strong>kaskáda</strong>. 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ů: <code>p {display: block; margin: 1.33em 0;}</code> Uživatelská tabulka: <code>p {margin: 2em 0;}</code> Autorská tabulka <code>p {margin: 15px 10px;}</code> -> podle výše napsaného pravidla se odstavec ve výsledku zformátuje takto: <code>p {display: block; margin: 15px 10px;}</code> 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: <code>p {margin: 2em 0 !important;}</code> -> výsledný formát prvku bude vypadat takto: <code>p {display:block; margin: 2em 0;}</code> Tento příkaz rovnováhu otáčí, uživatelská tabulka s tímto příkazem má <em>absolutně nejvyšší váhu</em>. 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 :)<br /> To jsme si tedy vysvětliti kaskádu, takže hurá na <strong>dědičnost</strong>.<br /> 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: <code>a {color:blue} ... <a href="#">odkaz <strong>nikam</strong></a></code> 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! </p> <p>Už jsem toho o CSS napsal vcelku dost, ale stále jsem Vám ještě neprozradil kde se CSS v tom XHTML vezmou.<strong>Jak to tedy dát dohromady?</strong><br /> 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 <code><p <b>style="color:#333;width:50%"</b>> ... </p></code> 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 <em>nebudeme</em><br /> 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: <code><style type="text/css"> <![CDATA[ body { background:#000; } body p { color:#fff; } ... ]]> </style> </code> Ani toto řešení nadále používat <em>nebudeme</em>.<br /> Třetím, nejlepším řešením je <strong>vytvořit pro CSS styly externí soubor *.css</strong>. 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: <code><link rel="stylesheet" type="text/css" href="cesta/nazev-souboru" media="screen" /></code> 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. <a href="http://www.w3.org/TR/CSS2/media.html#media-types">dokumentace</a>, ale s těmi se nesetkáte moc často, spíše v nějakých specifických případech.</p> <p>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.</p> <h4><a>Základní kostra XHTML dokumentu</a></h4> <p>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:<br /> <img src="http://img.tutoriarts.cz/jaa/obr-1/xhtml.png" alt="Základní struktura XHTML dokumentu" /> 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 <a href="http://www.wellstyled.com/html-doctype-and-browser-mode.html">DOCTYPE a režimy prohlížečů</a> 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.<br /> Dalším prvkem je hlavička. V hlavičce by neměla chybět deklarace kódování a použití <a href="http://www.earchiv.cz/a710s200/a710s232.php3">MIME typ</a>. 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.</p> <p>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.</p> </div> <div class="author-tabs"><!--- Blok autorů --> <ul> <li>O autorovi:</li> <li><a href="#author0"><span class="left"></span><span class="right"></span>Jaa(c)</a></li> </ul> <p id="author0"> </p> </div> <p class="source-file"><!--- Zdrojový soubor --> Zdrojový soubor : <img src="/assets/graphic/no-source-file.png" alt=""><a class="not"><span class="left"></span><span class="right"></span><strong>Není k dispozici</strong></a> </p> </div> <div class="viktor"></div> </div> <div id="komentare" class="comments-body underline"><!--- Komentáře + formulář --> <div class="content"> <p class="like-it" id="liked"> <a href="/contents/submit_like/952">Líbí se mi</a> Toto se líbí <span>108</span> uživatelům </p> <ul class="social-info blockli"> <li>Informujte o nás:</li> <li><a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.tutoriarts.cz%2Fg952&t=Jak+spr%C3%A1vn%C4%9B+nak%C3%B3dovat+layout%3F+1.%C4%8D%C3%A1st"><img src="/assets/graphic/social-fb.png" alt=""></a></li> <li><a href="http://twitter.com/home?status=Zrovna+%C4%8Dtu+http%3A%2F%2Fwww.tutoriarts.cz%2Fg952+%28Jak+spr%C3%A1vn%C4%9B+nak%C3%B3dovat+layout%3F+1.%C4%8D%C3%A1st%29"><img src="/assets/graphic/social-tw.png" alt=""></a></li> <li><a href="http://digg.com/submit?url=http%3A%2F%2Fwww.tutoriarts.cz%2Fjak-spravne-nakodovat-layout-1-cast-952"><img src="/assets/graphic/social-dg.png" alt=""></a></li> <li><a href="http://delicious.com/save"><img src="/assets/graphic/social-del.png" alt=""></a></li> <li><a href="http://technorati.com/faves?add=http%3A%2F%2Fwww.tutoriarts.cz%2Fjak-spravne-nakodovat-layout-1-cast-952"><img src="/assets/graphic/social-wtf.png" alt=""></a></li> </ul> <span id="comments"></span> <h3 class="com">Komentáře k článku</h3> <p class="notice guest"><strong>Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže</strong> - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se <a href="#top">přihlašte</a>, nebo <a href="http://www.tutoriarts.cz/vb/register.php">registrujte</a>. Registrace nezabere déle než minutu.</p> <form class="commentsform" action="#comments-form" method="post" id="comments-form"> <input title="Neregistrovaný kolemjdoucí" type="text" name="author" class="textline necessary" value=""> <input title="E-mail" type="text" name="mail" class="textline necessary" value=""> <input title="WWW" type="text" name="web" class="textline" value=""> <div class="emoticons"> <ul class="emoticons"> <li><a href="#"><img src="/assets/graphic/icon-happy.png" alt=":-D" title=":-D"></a></li> <li><a href="#"><img src="/assets/graphic/icon-wow.png" alt="8-|" title="8-|"></a></li> <li><a href="#"><img src="/assets/graphic/icon-unsure.png" alt=":-/" title=":-/"></a></li> <li><a href="#"><img src="/assets/graphic/icon-cool.png" alt="8-)" title="8-)"></a></li> <li><a href="#"><img src="/assets/graphic/icon-sad.png" alt=":-(" title=":-("></a></li> <li><a href="#"><img src="/assets/graphic/icon-wtf.png" alt=":-O" title=":-O"></a></li> <li><a href="#"><img src="/assets/graphic/icon-devil.png" alt="=(" title="=("></a></li> <li><a href="#"><img src="/assets/graphic/icon-mad-genius.png" alt="=D" title="=D"></a></li> <li><a href="#"><img src="/assets/graphic/icon-smile.png" alt=":-)" title=":-)"></a></li> <li><a href="#"><img src="/assets/graphic/icon-heart.png" alt="<3" title="<3"></a></li> <li><a href="#"><img src="/assets/graphic/icon-wink.png" alt=";-)" title=";-)"></a></li> </ul> <textarea name="text" cols="2" rows="0"></textarea> <input class="validate-comment" type="submit" name="validate_comment" value="Zkontrolovat"> <script>$('.validate-comment').hide();</script> <input class="add-comment" type="submit" name="submit_comment[kV4h8uJhEPS9EDJdztnQaW.Lgq8]" value="Přidat komentář"> <p class="required">* Povinné položky</p> </div> <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfmHcQSAAAAANEkpsNszetMt1zd2EKzLCI7Ni9D"></script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfmHcQSAAAAANEkpsNszetMt1zd2EKzLCI7Ni9D" height="300" width="500" frameborder="0"></iframe><br/> <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/> </noscript> </form> </div> </div> <span class="unibg"></span> </div><!--- Konec obalu designu --> <div class="footer"><!--- Patička --> <div class="content"> <div class="social"><!--- Ikonky pro soc. sítě --> <p class="rss"><a href="http://www.tutoriarts.cz/rss.xml">odebírá nás <strong>287 čtenářů</strong></a></p> <p class="fb"><a href="http://www.facebook.com/tutorialscz">Staňte se <strong>fanouškem</strong></a></p> <p class="tw"><a href="http://twitter.com/tutoriarts"></a></p> </div> <div class="columns"><!--- Patička tělo --> <div id="poll" class="poll"><!--- Patička anketa --> <p class="title">Anketa</p> <p class="question">Jaké umělecké/technické tvorbě se věnujete?</p> <ul> <li><a href="/polls/vote/6/0">Fotografování</a> - <span>27.6 %</span><span class="bar"></span></li> <script type="text/javascript">$('.bar:last').progressbar ( { value: 28 } );</script> <li><a href="/polls/vote/6/1">Design</a> - <span>23.6 %</span><span class="bar"></span></li> <script type="text/javascript">$('.bar:last').progressbar ( { value: 24 } );</script> <li><a href="/polls/vote/6/2">Kresba, malba</a> - <span>15.8 %</span><span class="bar"></span></li> <script type="text/javascript">$('.bar:last').progressbar ( { value: 16 } );</script> <li><a href="/polls/vote/6/3">Manipulace, postprodukce</a> - <span>9.2 %</span><span class="bar"></span></li> <script type="text/javascript">$('.bar:last').progressbar ( { value: 10 } );</script> <li><a href="/polls/vote/6/4">Programuji, ale mám duši umělce</a> - <span>16.2 %</span><span class="bar"></span></li> <script type="text/javascript">$('.bar:last').progressbar ( { value: 17 } );</script> <li><a href="/polls/vote/6/5">Podpisy :)</a> - <span>7.5 %</span><span class="bar"></span></li> <script type="text/javascript">$('.bar:last').progressbar ( { value: 8 } );</script> </ul> <p class="results">Hlasovalo: <span>1020 lidí</span> </p> </div> <div class="comments"><!--- Blok komentářů --> <p class="title">Poslední komentáře u článků</p> <ul> <li><a href="/vytvorte-si-oblaka-mraky-a-slunecni-paprsky-993#komentare"><span class="line">Vytvořte si oblaka, mraky a sluneční paprsky</span> <span class="user">~ Neregistrovaný kolemjdoucí</span> <span class="date">21:16 10.5.2012</span></a> </li> <li><a href="/2-photoshop-cs5-prvni-spusteni-popis-chovani-porovnani-verzi-1152#komentare"><span class="line">2. Photoshop CS5 - První spuštění, popis chování, porovnání verzí</span> <span class="user">~ lefiath</span> <span class="date">18:14 9.5.2012</span></a> </li> <li><a href="/2-photoshop-cs5-prvni-spusteni-popis-chovani-porovnani-verzi-1152#komentare"><span class="line">2. Photoshop CS5 - První spuštění, popis chování, porovnání verzí</span> <span class="user">~ Akyo</span> <span class="date">13:59 6.5.2012</span></a> </li> <li><a href="/3-photoshop-cs5-prace-s-obrazky-a-detailistuv-uvod-do-vrstev-1154#komentare"><span class="line">3. Photoshop CS5 - Práce s obrázky a detailistův úvod do vrstev</span> <span class="user">~ Austrini</span> <span class="date">18:05 27.4.2012</span></a> </li> <li><a href="/3-photoshop-cs5-prace-s-obrazky-a-detailistuv-uvod-do-vrstev-1154#komentare"><span class="line">3. Photoshop CS5 - Práce s obrázky a detailistův úvod do vrstev</span> <span class="user">~ Austrini</span> <span class="date">17:43 27.4.2012</span></a> </li> <li><a href="/zaklady-ilustratoru-techonologie-tisku-1033#komentare"><span class="line">Základy ilustrátoru - Techonologie tisku</span> <span class="user">~ Cernocky</span> <span class="date">21:00 18.4.2012</span></a> </li> <li><a href="/rychly-tip-nocni-postavy-1205#komentare"><span class="line">Rychlý tip - Noční postavy</span> <span class="user">~ Tomáš Hejlek</span> <span class="date">19:51 15.4.2012</span></a> </li> </ul> </div> <div class="comments discussion"><!--- Blok diskuze --> <p class="title">Poslední příspěvky z fóra</p> <ul> <li><a href="/vb/showthread.php?p=34497#post34497"><span class="line">RE: miove LPs</span> <span class="user">~ out_of_space</span> <span class="date">8:06 19.5.2012</span></a> </li> <li><a href="/vb/showthread.php?p=34496#post34496"><span class="line">RE: Design měsíce 15 - E-shop - Hlasování!</span> <span class="user">~ me2</span> <span class="date">7:12 19.5.2012</span></a> </li> <li><a href="/vb/showthread.php?p=34495#post34495"><span class="line">RE: Joker´s gallery</span> <span class="user">~ TheJoker</span> <span class="date">23:04 18.5.2012</span></a> </li> <li><a href="/vb/showthread.php?p=34494#post34494"><span class="line">RE: miove LPs</span> <span class="user">~ TheJoker</span> <span class="date">22:44 18.5.2012</span></a> </li> <li><a href="/vb/showthread.php?p=34493#post34493"><span class="line">RE: Luks gallery</span> <span class="user">~ Luks</span> <span class="date">22:15 18.5.2012</span></a> </li> <li><a href="/vb/showthread.php?p=34492#post34492"><span class="line">RE: JoeJesus - DP - Sinew</span> <span class="user">~ Jesus</span> <span class="date">22:06 18.5.2012</span></a> </li> <li><a href="/vb/showthread.php?p=34491#post34491"><span class="line">RE: Topdesigner.cz</span> <span class="user">~ PiP3R</span> <span class="date">20:51 18.5.2012</span></a> </li> </ul> </div> </div> <div class="viktor"></div> </div> </div><!--- Konec patičky --> <div class="bottom"><!--- Spodní část - informace --> <div class="content"> <p class="up"><a href="#top">Nahoru</a></p> <p class="crew">Autoři: <strong><a href="http://www.jakubhoudek.cz/">Jakub Houdek</a>, <a href="http://www.bestie.cz/">Jakub Šimůnek</a>, <a href="http://www.lefiath.cz/">Petr Široký</a> a příležitostní sebevrazi</strong></p> <ul> <li class="slash">© tutoriarts.com, tutorials.cz 2010</li> <li class="dot"><a href="http://www.tutoriarts.cz/kontakt-1136">Kontakt</a></li> <li class="dot"><a href="http://www.tutoriarts.cz/o-strankach-1131">Informace o stránkách</a></li> <li class="slash"><a href="http://tutoriarts.cz/cenik-reklamy-1137">Ceník reklamy</a></li> <li class="author">Vytvořil <a href="http://lefiath.com">Petr Široký, <span>http://lefiath.com</span></a></li> </ul> </div> </div> </body></html>