Obsah. Obsah. Úvod Spojení FTP Struktura složek naší stránky Vlastní dokument XHTML (začínáme tvořit WWW stránku)...

CSS A XHTML 5 Obsah Úvod... 13 O čem kniha pojednává...13 Pro koho je kniha určena...14 Kontakt na autora...14 Co budeme potřebovat...14 1. Spojení FTP... 15 1.1 Kde vytvořit spojení FTP...15 1.1.1 Webhostingové služby... 16 1.2 Jak se připojit na účet FTP...16 2. Struktura složek naší stránky... 21 2.1 Stromová struktura...21 2.2 Jak vytvořit jednotlivé soubory stránky...22 3. Vlastní dokument XHTML (začínáme tvořit WWW stránku)... 25 3.1 Co znamená zkratka XHTML...25 3.2 Obsah hlavního dokumentu index.html...26 3.2.1 Značky XHTML... 26 3.2.2 Značka <meta>... 27 Složení značky <meta>... 27 3.2.3 Značka <link>... 28 3.3 Kódování dokumentu XHTML...28 3.3.1 Znakové sady vhodné pro češtinu i slovenštinu... 28 3.3.2 Kódování ve značkách <meta>... 29 3.4 Struktura souboru index.html (základ pro naši stránku)...29 3.4.1 Co obsahuje soubor index.html... 30 3.4.2 Plnění obsahu... 31 Obsah

6 CSS A XHTML 4. Oblékání stránek do kaskádových stylů CSS... 37 4.1 Stručná historie stylů a jejich nesprávné začlenění do HTML...38 4.2 Třídy a identifikátory...39 4.3 Neškodné značky XHTML <div> a <span>...40 4.4 První stránka je na světě na internetu teorie...41 4.5 První stránka je na světě na internetu praxe...47 4.5.1 Obrázek jako odkaz... 47 4.5.2 Menu (navigace)... 50 4.5.3 Obsah... 52 4.5.4 Patička... 53 4.6 Dědičnost a priorita vlastností v CSS...54 4.6.1 Dědičnost... 54 4.6.2 Priorita... 55 4.7 Odkaz s obrázkem na pozadí...55 4.8 Záložka přístupnost obsahu...57 5. Přepínání obsahu stránky pomocí PHP... 59 5.1 Stručný úvod do PHP...59 5.2 Proměnné v PHP...60 5.3 Podmínky v PHP...61 5.4 Výpis hodnot v PHP...62 5.5 Metoda vkládání v PHP...62 5.6 Metody odevzdávání: POST a GET v PHP...63 5.7 Vlastní skript pro přepínání obsahu stránky...64 6. Dokončení obsahu webové stránky... 67 7. Entity jazyka (X)HTML jak psát speciální znaky... 71 7.1 Složení entity (X)HTML...72 Obsah

CSS A XHTML 7 8. Adresy na internetu (a nejen tam)... 75 8.1 Absolutní adresy...75 8.2 Relativní adresy...76 9. Co to je validita. A je potřebná?... 77 9.1 Co je to validita webových stránek...77 9.2 Je validita potřebná?...78 9.2.1 Klady validity... 78 9.2.2 Zápory validity... 78 10. Optimalizace vyhledávání (vyzvednutí stránky ve vyhledávačích)... 79 10.1 První pravidlo: titulek stránky...79 10.2 Druhé pravidlo: nadpisy v textu...82 10.3 Třetí pravidlo: pojmenování odkazů a obrázků...82 10.4 Čtvrté pravidlo: zvýrazňování textu...83 10.5 Páté pravidlo: hustota klíčových slov...84 10.6 Šesté pravidlo: adresa stran webu...84 10.7 Sedmé pravidlo: zpětné odkazy...84 10.7.1 Registrace stránky do vyhledávače Google... 85 10.7.2 Registrace stránky do katalogu Zoznam.sk (slovenský katalog)... 86 10.7.3 Registrace stránky do katalogu Seznam.cz (český katalog)... 88 10.8 Osmé pravidlo: pravidelně aktualizovaný obsah...89 10.8.1 Pár slov k redakčním systémům... 90 10.9 Deváté pravidlo: minimum nadbytečného kódu...90 11. Tvorba přístupné webové stránky (stránky pro každého)... 91 11.1 Obsah webových stránek je dostupný a čitelný...91 11.1.1 Pravidlo první: každý netextový prvek, nesoucí významovou informaci, má svou textovou alternativu... 92 11.1.2 Pravidlo druhé: informace, poskytované pomocí skriptů, objektů, appletů, kaskádových stylů, obrázků a jiných doplňků na straně uživatele, jsou dostupné i bez kteréhokoliv z těchto doplňků... 92 Obsah

8 CSS A XHTML 11.1.3 Pravidlo třetí: informace, poskytované barvou, jsou dostupné i bez barevného rozlišení... 93 11.1.4 Pravidlo čtvrté: barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není vzorek, který snižuje čitelnost... 93 11.1.5 Pravidlo páté: předpisy, určující velikost písma, nepoužívají absolutní jednotky... 93 11.1.6 Pravidlo šesté: předpisy, určující typ písma, obsahují všeobecnou rodinu písem... 94 11.2 Práci s webovou stránkou řídí uživatel...94 11.2.1 Pravidlo sedmé: obsah WWW stránky se mění jen tehdy, když uživatel aktivuje nějaký prvek... 94 11.2.2 Pravidlo osmé: webová stránka nemanipuluje prostředím uživatele (bez jeho přímého příkazu)... 94 11.2.3 Pravidlo deváté: nová okna se otevírají jen v odůvodněných případech a uživatel je na to upozorněn dopředu... 95 11.2.4 Pravidlo desáté: na webové stránce nic nebliká častěji než jednou za sekundu... 95 11.2.5 Pravidlo jedenácté: webová stránka nebrání uživateli posouvat obsahem rámu... 95 11.2.6 Pravidlo dvanácté: obsah (a kód) webové stránky nesmí předpokládat (vyžadovat) konkrétní způsob použití, ani konkrétní výstupní nebo ovládací zařízení... 95 11.3 Informace jsou srozumitelné a přehledné...96 11.3.1 Pravidlo třinácté: webové stránky poskytují informace jednoduchým jazykem a srozumitelnou formou... 96 11.3.2 Pravidlo čtrnácté: úvodní webová stránka musí jasně popisovat smysl a účel webu. Název webu (a jeho správce) musí být napsán zřetelně... 96 11.3.3 Pravidlo patnácté: webová stránka (a jednotlivé prvky textového obsahu) musí uvádět své hlavní poslání již na svém začátku... 96 11.3.4 Pravidlo šestnácté: rozsáhlé bloky obsahu musíme rozdělit do menších, výstižně popsaných celků... 97 11.3.5 Pravidlo sedmnácté: informace zveřejňované na základě zákona jsou dostupné jako textový obsah webové stránky... 97 11.3.6 Pravidlo osmnácté: na samostatné webové stránce je uveden kontakt na technického správce, a také prohlášení, jasně popisující míru přístupnosti webu a jeho častí. Na tuto webovou stránku odkazuje každá stránka webu... 97 11.4 Ovládání webu je jasné a pochopitelné...98 11.4.1 Pravidlo devatenácté: každá webová stránka má smysluplný název, vystihující její obsah... 98 11.4.2 Pravidlo dvacáté: navigační a obsahové informace jsou na webové stránce zřetelně odděleny... 98 Obsah

CSS A XHTML 9 11.4.3 Pravidlo dvacáté první: navigace je srozumitelná a je konzistentní na všech webových stránkách... 98 11.4.4 Pravidlo dvacáté druhé: každá webová stránka (kromě úvodní) obsahuje odkaz na vyšší úroveň v hierarchii webu a odkaz na úvodní WWW stránku... 99 11.4.5 Pravidlo dvacáté třetí: všechny webové stránky, rozsáhlejšího charakteru, obsahují odkaz na přehlednou mapu webu... 99 11.4.6 Pravidlo dvacáté čtvrté: obsah (a kód) webové stránky nepředpokládá, že uživatel už navštívil jinou stránku... 99 11.4.7 Pravidlo dvacáté páté: každý formulářový prvek má přiřazen výstižný nadpis... 100 11.4.8 Pravidlo dvacáté šesté: každý rám má vhodné jméno nebo popis, vyjadřující jeho smysl a funkčnost... 100 11.5 Odkazy jsou zřetelné a jednoznačné...100 11.5.1 Pravidlo dvacáté sedmé: označení každého odkazu výstižně popisuje jeho cíl (i bez okolního kontextu)... 100 11.5.2 Pravidlo dvacáté osmé: stejně označené odkazy mají stejný cíl... 101 11.5.3 Pravidlo dvacáté deváté: odkazy jsou od ostatního textu odlišeny, a to nejen barvou... 101 11.5.4 Pravidlo třicáté: obrázková mapa na straně serveru je použita jen v případě, že nebylo možno definovat oblasti (v obrázkové mapě) pomocí dostupného geometrického tvaru... 101 11.5.5 Pravidlo třicáté první: uživatel je dopředu upozorněn na skutečnost, že odkaz vede na obsah jiného typu, než je webová stránka... 102 11.5.6 Pravidlo třicáté druhé: kód webových stránek odpovídá některé zveřejněné finální specifikaci jazyka HTML nebo XHTML... 102 11.5.7 Pravidlo třicáté třetí: ve značkách <meta> je uvedena použitá znaková sada dokumentu... 102 11.5.8 Pravidlo třicáté čtvrté: prvky, tvořící nadpisy nebo seznamy, jsou korektně vyznačeny ve zdrojovém kódu... 103 11.5.9 Pravidlo třicáté páté: pro popis vzhledu webové stránky se upřednostňují stylové předpisy... 103 11.5.10 Pravidlo třicáté šesté: pokud je k rozvržení obsahu webové stránky použita tabulka, neobsahuje záhlaví řádků ani sloupců... 103 11.5.11 Pravidlo třicáté sedmé: všechny tabulky dávají smysl při čtení po řádcích zleva doprava... 103 12. Layouty v CSS... 105 12.1 Jednosloupcový layout webové stránky...105 12.1.1 Struktura kódu XHTML... 106 12.1.2 Kód CSS... 108 Obsah

10 CSS A XHTML 12.2 Dvousloupcový layout webové stránky...112 12.2.1 Struktura kódu XHTML... 113 12.2.2 Kód CSS... 114 12.3 Třísloupcový layout webové stránky...119 12.3.1 Struktura kódu XHTML... 119 12.3.2 Kód CSS... 121 12.4 Čtyř a vícesloupcový layout webové stránky úvaha...126 13. Pozicování prvků na stránce (relativní a absolutní)... 129 13.1 Mocnina, horní a dolní index (relativní pozicování řádkových elementů)...129 13.1.1 Mocnina a horní index... 130 13.1.2 Dolní index... 131 13.2 Absolutní pozicování řádkových elementů...131 13.3 Relativní pozicování blokových elementů...132 13.4 Absolutní pozicování blokových elementů...133 14. Blokové a textové (řádkové) elementy... 137 14.1 Blokové elementy...137 14.1.1 Všeobecně o blocích... 138 14.1.2 Nejčastěji používané blokové prvky... 138 14.2 Řádkové elementy...138 14.2.1 Všeobecně o řádcích... 138 14.2.2 Nejčastěji používané řádkové prvky... 139 14.3 Zajímavosti okolo bloků a řádků...139 14.3.1 Nadpisy <h1>, <h2>, <h3>, <h4>, <h5>, <h6>... 139 14.3.2 Odstavce <p>... 140 15. Tvorba tabulek v jazyku XHTML... 143 15.1 Co je to tabulka...143 15.2 Složení a naplnění jednoduché tabulky (značky XHTML)...144 15.3 Tabulka s mnohonásobnými sloupci...147 15.4 Tabulka s mnohonásobnými řádky...149 Obsah

CSS A XHTML 11 15.5 Nadpisy tabulek...150 15.6 Buňky tabulky jako nadpisy...151 15.7 Ukázka složitějších tabulek...152 15.8 Tvořme přístupné tabulky...156 15.8.1 Nesprávná konstrukce buněk tabulky... 156 15.8.2 Správná konstrukce buněk tabulky... 157 15.8.3 Nesprávná konstrukce tabulek podle sloupců... 158 15.8.4 Správná konstrukce tabulek podle sloupců... 158 15.9 Nastavování vzhledu tabulky pomocí stylů CSS...159 16. Seznamy v jazyku XHTML... 165 16.1 Co to jsou seznamy...165 16.2 Obyčejné seznamy...166 16.3 Číslované seznamy...166 16.4 Definiční seznamy...169 16.5 Horizontální menu pomocí stylů CSS trochu jinak...170 16.6 Vnořené seznamy...174 17. Nastavení kódu CSS pro tisk stránek... 179 17.1 Tvorba souborů CSS pro tisk...179 18. Rodiny písem... 183 18.1 Patkové písmo (Roman)...183 18.2 Bezpatkové písmo (Sans Serif)...184 18.3 Neproporcionální písmo (Monospace)...184 18.4 Písmo Fantasy...185 19. Důležité drobnosti... 187 19.1 Zvětšování a zmenšování webové stránky...187 19.2 Nahlédnutí do vnitřku webové stránky...188 19.3 Protažení sloupce pod navigaci (až dolů)...189 Obsah

12 CSS A XHTML 19.4 Klávesové zkratky ulehčující práci...192 19.5 Jazyk XHTML 1.1 a jeho mime type...192 19.6 Mapa webové stránky...193 19.7 Uvádění e-mailového kontaktu v návštěvní knize...194 Rejstřík... 196 Obsah

CSS A XHTML 13 Úvod Úvod Pokud držíte v ruce tuto knihu, určitě jste si někdy řekli, že by nebylo špatné udělat si, nebo si zkusit udělat, vlastní webovou stránku (prezentaci). V dnešní době (v roce 2006) je za moderní webovou stránku pokládána právě taková prezentace, která je napsána ve značkovacím jazyku XHTML. Vzhled takové stránky určují tzv. kaskádové styly, známé pod zkratkou CSS. O čem kniha pojednává Kniha je komplexním návodem, resp. postupem, jak si vytvořit vlastní WWW stránky. Nepojednává podrobně o použitých technologiích, na to bychom potřebovali alespoň deset knih. V knize se dozvíte základní myšlenky a návody, které jsou potřebné pro tvorbu WWW stránek. Také zde naleznete praktické, podrobně rozepsané, příklady. Samozřejmě, nebudeme se vyhýbat ani zajímavostem. Dozvíte se, jak obsah textu optimalizovat pro vyhledávače, jak zlepšit přístupnost obsahu (pomocí programovacího jazyka PHP), a ještě mnoho užitečných poznatků. O čem kniha pojednává

14 CSS A XHTML Pro koho je kniha určena Kniha je určena jak začátečníkům, kteří si budou schopni (třeba i po doplnění informací z jiných zdrojů) vytvořit kvalitní a moderní web, tak i těm, kteří se již s tvorbou WWW stránek setkali, ale zatím ještě používají starší verzi značkovacího jazyka HTML, a kteří pro rozvržení obsahu stránky ještě používají tabulky. Naučíme se přejít od tabulkového layoutu (rozvržení stránky) ke kaskádovým stylům. Praktické ukázky z této knihy najdete na webové adrese http://sietook.druskova.sk/stranka/index.html. Kontakt na autora V případě jakýchkoliv otázek nebo nejasností (týkajících se této knihy), mne, prosím, kontaktujte na e-mailové adrese pjotr.william@gmail.com. Jako název předmětu napište otázka ke knize. Také mne můžete kontaktovat na čísle ICQ 347 195 324. Budu se snažit odpovědět na všechny rozumné otázky. Můj internetový web (weblog) najdete na adrese http://sietook.druskova.sk. Co budeme potřebovat Pro psaní kódu nám bohatě postačí editor PSPad (je volně ke stažení), který je možno získat na adrese http://www.pspad.com/sk/download.php a který má minimální instalaci. Jako prohlížeč (web browser) pro nás bude nejlepší prohlížeč Opera verze 8.0, který si stáhneme z adresy http://www.opera.com/download/. Ten je také volně ke stažení. Prohlížeč Opera vám mohu doporučit, neboť má (ze všech dnes nejvíce používaných prohlížečů) nejlepší podporu kaskádových stylů CSS. Úvod

CSS A XHTML 15 1. Spojení FTP Spojení FTP File Transfer Protocol (nebo jenom protokol) je určen pro přesun dat (například z našeho počítače na vzdálený počítač). V tomto případě jsou přesouvaná data představována soubory naší webové stránky, kterou si vytvoříme co nevidět. Ale ještě předtím si povíme, jak vytvořit spojení FTP. Ti, kteří se s touto činností obeznámili již dříve a danou problematiku již ovládají, mohou tuto kapitolu s klidem přeskočit. 1.1 Kde vytvořit spojení FTP V první řadě si musíme najít nějaký webhosting. Webhosting je služba, která nám umožní umístit naši stránku do internetu. Existují dva typy webhostingů. Prvním typem jsou ty, které nabízejí hostování stránek zdarma. To je ovšem podřízeno tomu, že nebudete mít vlastní doménu, například http://www. nase_jmeno.sk (doména druhého řádu nase_jmeno), ale až doménu třetího řádu, například http://nase_jmeno.jmeno_hostingove_sluzby.cz, ve které nase_jmeno představuje onu doménu třetího řádu, kterou jsme si zvolili. Doména 1.1 Kde vytvořit spojení FTP

16 CSS A XHTML jmeno_hostingove_sluzby je jasná již z názvu. Vypovídá o společnosti, která nám hosting zprostředkovává. Doménou prvního řádu je například.cz a podobné zkratky. Pokud bychom si zvolili takový hosting, který by nám umožňoval používat adresu typu http://www. nase_jmeno.cz, tak si za to musíme zaplatit. Je mnoho společností, které tuto službu nabízejí, a je jen na nás, kterou z nich si zvolíme. Pokud si nebudete jisti, co si máte vybrat, kontaktujte mne na e-mailu pjotr.william@gmail.com (s předmětem otázka ke knize hosting ) nebo na čísle ICQ 347 195 324. Po registraci u vybrané hostingové služby obdržíme e-mail s údaji, které nám umožní přístup FTP k nájmu účtu. A jestliže tento e-mail neobdržíme, dozvíme se o naší registraci v registračních údajích, a to po přihlášení se na internetových stránkách hostingové služby. Není to tak složité, jak to na první pohled vypadá. 1.1.1 Webhostingové služby Pro vaše první pokusy doporučuji služby, které jsou poskytovány na adrese http:// www.webzdarma.cz, kde je zároveň možnost používání skriptů PHP, a zároveň i možnost odzkoušení si databázových systémů. Poté, co se zaregistrujete, obdržíte registrační údaje pro připojení pomocí FTP. Můžete si dokonce vybrat z několika domén druhého řádu. Doménu třetího řádu si navrhnete podle své volby. Například http://www.peter-druska.wz.cz, nebo http://www.peter-druska.nazory.cz a podobně. Výběr je pro začátečníky dostatečný. Protože tento hosting webových stránek je zdarma, musíme si na naši webovou stránku umístnit reklamu na adresu webhostingové služby webzdarma.cz. 1.2 Jak se připojit na účet FTP Takže jsme zaregistrováni a známe údaje pro účet FTP. Připojení není složité, stačí otevřít si aplikaci, která nám umožní spojení FTP se vzdáleným počítačem. Těchto aplikací je několik, například Total Commander, který je ale potřebné registrovat, nebo editor PSPad. Ten je volně ke stažení a nevyžaduje registraci. Údaje pro připojení FTP mohou vypadat následovně: Název hostigu: ftp.nase_jmeno.cz Uživatel (login): nase_jmeno.cz Heslo: to je, samozřejmě, u každého uživatele jiné. Obr. 1.1: Spojení FTP v editoru PSPad (tlačítko FTP) Obr. 1.2: Spojení FTP v editoru PSPad (symbol spojení) 1. Spojení FTP

CSS A XHTML 17 Tyto informace mohou vypadat i trochu jinak, takže se nelekejte. Ale určitě se vždy setkáte se srovnaným systémem Název hostingu, Uživatel, Heslo. Po otevření příslušné aplikace, pomocí které budeme přistupovat na účet FTP, si zvolíme záhlaví okna FTP (tzv. lištu ) pro editor PSPad (viz obrázky 1.1 a 1.2), což vyžaduje dva kroky klepnout na tlačítko FTP a potom na symbol spojení, nebo, pro aplikaci Total Commander (viz obrázek 1.3), klepnout pouze na tlačítko FTP. Po aktivaci se otevře okno, ve kterém máme možnost spravovat všechny účty FTP. Spojení FTP Obr. 1.3: Spojení FTP v aplikaci Total Commander (tlačítko FTP) Na obrázku 1.4 vidíme okno pro správu účtů FTP v editoru PSPad. Pro aplikaci Total Commander je toto okno prakticky stejné (viz obrázek 1.5). Obr. 1.4: Správa účtů FTP v editoru PSPad Po klepnutí na příkaz Nové spojení (popř. Připojení) se otevře okno, ve kterém zadáme vlastní údaje FTP, které nám otevřou cestu k nahrávání naší stránky na internet. Název připojení: (popř. Session:) napíšeme nase_prvni_stranka. Je to jen název, který potom uvidíme při správě účtu FTP. Server: (popř. Název hostingu:) napíšeme ftp.nase_jmeno.cz. To je server FTP, na kterém budeme mít soubory stránky umístěny. Přihlašovací jméno: (popř. Uživatel:) napíšeme nase_jmeno.cz. To je jméno, pod kterým se přihlašujeme a vstupujeme na účet FTP. 1.2 Jak se připojit na účet FTP

18 CSS A * XHTML Obr. 1.5: Správa účtů FTP v aplikaci Total Commander Heslo: to zatím z bezpečnostních důvodů nenastavujeme. Po připojení na náš účet FTP, se bude vždy aktivovat okno, do kterého toto heslo zadáme. Tak se nám nepřihodí, že by se k nám přihlásil někdo nepovolaný a způsobil škodu. O ostatních políčkách se teď zmiňovat nemusíme, protože jsou pro nás momentálně nepodstatná, a myslím, že ani v budoucnu je moc nevyužijeme. Všimněte si, že u editoru PSPad lze dopředu nastavit přepisování velkých písmen na malá písmena. V aplikaci Total Commander je toto také možné, ale jen při přesouvání souborů. Přepisování velikosti písmen má jednu výhodu. Tou je fakt, že v kódu XHTML naší stránky budeme psát odkazy na soubory, obsahující jen malá písmena, například na soubor *.html. Na disku jej budeme mít uložen také jako soubor *.html. Pokud bychom na server nahráli soubor s velkými písmeny, mohlo by se nám stát, že by server soubor nenašel, přestože by tam dotyčný soubor byl. Některé servery totiž nepodporují kompatibilitu malých a velkých písmen. Obrázek 1.6 nám ukazuje zadávání údajů FTP v editoru PSPad, zatímco obrázek 1.7 ukazuje totéž zadávání v aplikaci Total Commander. Přihlášení potvrdíte tlačítkem OK a uvidíte změnu v tzv. okně FTP, ve kterém se objeví naše nové spojení s názvem nase_prvni_stranka. Poklepáním, nebo klepnutím s následnou aktivací příkazu Připojit (Connect), se objeví okno, do kterého napíšeme heslo, jehož následným potvrzením se připojíme. Spojení FTP bychom tedy již měli a můžeme se pustit do další etapy vytváření stránky. Pokud si zatím ještě nejsme jisti vytvořením spojení FTP, s klidem nám postačí ukládat si soubory i na pouhý disk našeho počítače, protože zatím budeme pracovat s jazyky XHTML a CSS, jejichž výslednou podobu je možno vidět i při otevření stránky z disku. Až se pustíme do oživení stránky pomocí skriptů PHP, pak musíme umístnit stránku pomocí FTP na internet, abychom si na ní mohli všechno vyzkoušet. Jazyk PHP, jako takový, na našem počítači nejde spustit. Je možno nainstalovat si server PHP na náš počítač, ale tato oblast není podstatou této knihy, proto se jí nebudeme věnovat. O této problematice existuje množství literatury, a také jsou o ní informace na internetu. V případě, že již máme spojení FTP vytvořeno, je dobré nahrávat stránku přímo tam. 1. Spojení FTP

CSS A XHTML 19 Spojení FTP Obr. 1.6: Vytvoření nového spojení FTP v editoru PSPad Obr. 1.7: Vytvoření nového spojení FTP v aplikaci Total Commander 1.2 Jak se připojit na účet FTP

20 CSS A XHTML 1. Spojení FTP

CSS A XHTML 21 2. Struktura složek naší stránky Struktura složek naší stránky Všechno má svou logickou strukturu, ani tvorba webových stránek není výjimkou. Proto si, pro lepší orientaci v dokumentech, vytvoříme stromovou strukturu naší stránky. Lze ji samozřejmě nazvat i jinak, to záleží na interpretaci. 2.1 Stromová struktura Pro naši stránku toho nebudeme potřebovat moc. Postačí nám disk počítače X, v něm složka s názvem nase_prvni_stranka, která bude naší základní složkou. Dále tři podsložky: styles pro styly, pic pro obrázky a pages pro vlastní obsah webu (všechny názvy jsem odvodil z anglických originálů). Takže stromová struktura složek na našem disku bude vypadat následovně: Disk X: nase_prvni_stranka: styles pic pages. 2.1 Stromová struktura

22 CSS A XHTML To je struktura složek, ale ve které složce bude který soubor? V základní složce nase_prvni_stranka bude umístěn ten soubor, který bude vždy vyhledáván jako první. Jmenuje se index.html. Je to jakási brána do naší stránky. Výstupní zařízení jej interpretuje jako soubor, umožňující výstup informací (tím rozumíme, že monitor s prohlížečem zobrazuje údaje vizuálně, čtecí zařízení zvukově atd.) z již předtím vytvořených složek. Kdyby soubor index.html neexistoval, zařízení by nevědělo, kam kterou informaci poslat. V souboru index.html je nadefinováno prakticky všechno potřebné. Ale o tom až později. Ve složce styles budou styly. Budeme používat kaskádové styly CSS (Cascading Style Sheets). Soubory mají příponu *.css. Nazvat si je můžeme prakticky libovolně, já např. používám název nastav.css, pro snazší orientaci. V tomto souboru budeme mít nadefinován vzhled stránky. Dále si vytvoříme ještě jeden soubor CSS, s názvem tiskni.css, ve kterém bude nadefinován vzhled stránky pro případ, že si ji někdo bude chtít vytisknout na tiskárně. Lze to vyřešit i elegantněji, vytvořením jediného souboru stylů CSS, ale teď chci poukázat na možnosti a na sílu stylizace, proto jsem se rozhodl pro soubory dva. Bude na nich dobře vidět jejich rozdílnost a zároveň přehlednost. Ve složce pic budeme mít uloženy obrázky, které chceme na stránce používat. Přípony asi nemusím připomínat. Nejlepší pro web je formát obrázků GIF, který má příponu *.gif. Ve složce pic můžete mít samozřejmě i podsložky, ale to pro nás zatím nebude nutné, protože neděláme nic komplikovaného. Nakonec, ve složce pages, budou uloženy soubory s příponou *.html a *.php. Například soubor uvod.html. Struktura naší stránky nyní vypadá následovně (viz obrázek 2.1). Intuitivně je jasné, co struktura na obrázku znamená. Obr. 2.1: Struktura naší první stránky 2.2 Jak vytvořit jednotlivé soubory stránky Postačí otevřít si editor, ve kterém všechno píšeme. V našem případě je to editor PSPad. Kombinace kláves CTRL+N (nebo příkaz Dokument Nový) otevře tabulku, ve které si můžeme vybrat, jaký typ souboru se chystáme psát. Tolik k otevírání souborů, a nyní Obr. 2.2: Příkaz Ulož jako (všechny dokumenty) 2. Struktura složek naší stránky

CSS A XHTML 23 něco k jejich ukládání. Stisknutím klávesy F12 (nebo pomocí příkazu Dokument Ulož jako) vybíráme jednoduše možnost ukládaní všech dokumentů *.* (viz vyznačená část na obrázku 2.2). Napíšeme název souboru i s příslušnou příponou, například nastav.css, otevřeme adresář, do kterého chceme daný soubor vložit, a vše potvrdíme stisknutím tlačítka Save. Tímto způsobem můžeme ukládat v editoru PSPad prakticky jakýkoliv typ souboru (samozřejmě, že ne obrázky ). Struktura složek naší stránky 2.2 Jak vytvořit jednotlivé soubory stránky

24 CSS A XHTML 2. Struktura složek naší stránky

CSS A XHTML 25 3. Vlastní dokument XHTML (začínáme tvořit WWW stránku) Vlastní dokument XHTML V této kapitole se dozvíte, co znamená zkratka XHTML, co je obsahem hlavního dokumentu s názvem index.html, seznámíte se s jeho strukturou, s novými značkami a s kódováním jazyka XHTML. 3.1 Co znamená zkratka XHTML Zkratka XHTML znamená extensible HyperText Markup Language, tj. rozšiřitelný hypertextový značkovací jazyk. Srozumitelnější formou by se dalo říci, že se jedná o jazyk, založený na odkazech na jiné stránky (hypertext), jenž se píše značkami, definovanými pro daný jazyk (markup). Rozšiřitelný je proto, že vznikl rozšířením ze staršího jazyka HTML, a že je možné jej dále rozšiřovat o nové funkce. Má za sebou mnoho zajímavých cest vývoje (ještě i jako HTML), ale to patří do jiné úvahy. 3.1 Co znamená zkratka XHTML

26 CSS A XHTML 3.2 Obsah hlavního dokumentu index.html Hlavní dokument s názvem index.html má stanovenu stavbu svého těla (body). Tato stavba sestává ze značek jazyka XHTML. Nyní se s nimi blíže seznámíme. 3.2.1 Značky XHTML Značky (nazývané někdy tagy) si rozdělíme na dvě hlavní části: párové a nepárové. Jak je již z názvu jasné, párové značky budou psány v dokumentu po párech, nepárové značky budou stát osamoceně (bez druhé polovičky). Zatím zmíníme jen ty značky, které asi budeme používat nejčastěji. Párové značky: <html> celý HTML dokument, <head> záhlaví našeho dokumentu, <title> nadpis naší stránky, <body> tělo našeho dokumentu, do kterého se píší všechny následující značky, <h1> až <h6> nadpisy 1. až 6. úrovně, <p> odstavec, <a> odkazy (otevírají se ve stejném okně), <ul> seznam, <li> položky seznamu, <textarea> plocha na psaní textu ve formulářích. Zatím si vystačíme s těmito uvedenými značkami, ale postupně si řekneme i o dalších. Do dokumentu se píší takto: <p>text v odstavci</p>. Musí spolu vytvořit nějaký obsah. Nepárové značky: <img /> vkládání obrázku do dokumentu, <meta /> značky meta, o nich si povíme za chvíli, <link /> značky link, o nich se také zmíníme zanedlouho, <hr /> vodorovná čára v dokumentu, <br /> odsazení na nový řádek, <input /> prvek formulářů. Prozatím nám budou stačit tyto značky. Ostatní přidáme později. Do dokumentu se píší následovně (jak je ostatně vidět z uvedeného seznamu značek): <hr />. Proč to tak je, si vysvětlovat nebudeme, stačí nám vědět, že nepárová značka, sama o sobě, neuzavírá žádný obsah, proto musí být rozpoznatelná od začáteční párové značky. 3. Vlastní dokument XHTML...

CSS A XHTML 27 3.2.2 Značka <meta> Je to důležitá značka, která se píše v záhlaví každého dokumentu HTML. Je uzavřena v párové značce <head>..</head>. V každé naší stránce budeme používat značku <meta> jako základní značku pro kódování. Ostatní značky <meta> nemusíme používat skoro vůbec, jejich velké množství je také zbytečné. Zde platí pravidlo, že méně je někdy více. Kdysi byly značky <meta> podporovány a měly velký význam v optimalizaci vyhledávání. Dnes jejich význam v tomto směru upadá. Všechny vyhledávače inspirované Googlem (www.google.com) je téměř, dá se říci, nevnímají. Značek <meta> existuje velké množství, ale pro praktické použití nám úplně postačí dvě základní. Je to značka pro určení kódování, které používáme v našem dokumentu XHTML, a značka popisu obsahu naší stránky. Některé značky <meta> uvádím na následujících řádcích: Nastavení kódování (bude probíráno později): <meta http-equiv="content-type" content="application/xhtml+xml; charset=znakova_sada" /> Popis "description": <meta name="description" content="tvoříme naši první stránku" /> Automatické přesměrování pokud chceme z dané WWW stránky (na které je tato značka) přesměrovat návštěvníky na jinou stránku, stačí napsat do záhlaví následující: <meta http-equiv="refresh" content="6;url=http://www.nekde.cz/to_je_jedno" /> Značka "refresh" znamená, že daná stránka se má obnovit. Značka "6;URL=.." znamená, že se za šest sekund (od aktivace stránky), automaticky přesuneme na danou URL adresu, která je ve značce <meta>. Spojení obnovy a přesunu se projeví změnou obsahu v prohlížeči za daný čas. Značka "author" nám sdělí něco o tom, kdo stránku vytvořil: Vlastní dokument XHTML <meta name="author" content="peter Druska Pjotr" /> Vlastní vcelku zajímavá možnost. Pro web je nepoužitelná pro svojí zbytečnost, ale do jiných aplikací je to užitečná věc, protože daná aplikace může čerpat informace právě ze značek <meta>: <meta name="jakýkoliv text" content="jakákoliv hodnota" /> Složení značky <meta> Značka <meta> se všeobecně skládá ze dvou povinných částí. Prvním atributem je buď name (všeobecná informace) nebo http-equiv (systémová informace). V tomto atributu je napsáno, jaký druh informace <meta> bude poskytován (například meta="keywords" znamená klíčová slova). Vypadat to může takto: <meta name="druh informace" content="obsah info" /> <meta http-equiv="druh info" content="obsah info" /> Druhým povinným atributem je content, neboli vlastní obsah informace <meta>. Například content="strom, zahrada, semínka". 3.2 Obsah hlavního dokumentu index.html

28 CSS A XHTML O značkách <meta> samozřejmě existuje na webu nespočetné množství informací. Tam se o nich můžete dozvědět více. V této knize se bere důraz na používání alespoň značek s definováním kódování, ne na popis každé značky <meta>. 3.2.3 Značka <link> Značku <link> používáme při vkládání externích stylů CSS (v každém případě to bude externí soubor, protože v nejnovějších technologiích je důraz kladen na oddělení formy od obsahu), skriptů java a podobně. Píše se, podobně jako značka <meta>, do záhlaví stránky <head>..</head>. Například daný soubor se styly zavoláme do naší stránky následujícím zápisem: <link rel="stylesheet" type="text/css" href="cesta_k_souboru" media="screen" />, Použili jsme zde dva atributy (rel="stylesheet" a type="text/css"), které definují typ dokumentu. Dále bylo dobré použít i atribut href="cesta_k_souboru", bez kterého by aplikace (v nejčastějším případě internetový prohlížeč) neuměla určit vzhled naší stránky. Stránka by se zobrazila, jako kdyby tam žádné styly nebyly. Pozorný čtenář si určitě všiml, že naše značka <link> obsahuje i atribut media="screen", který určuje, pro jaké výstupní zařízení je volaný soubor určen (bude probíráno později). Styly se dají volat také následujícím způsobem: <style type="text/css" media="screen"> @import "cesta_k_souboru"; </style> což je funkčně identické s předešlým příkladem. Rozdíl je v tom, že je zde jiná syntaxe vkládání. Nežli začneme tvořit první dokument XHTML, tak bychom si měli říci něco o kódovaní a o interpretaci stylů. 3.3 Kódování dokumentu XHTML Kódování je něco jiného než šifrování, proto na tyto dva výrazy musíme dávat pozor, jak je používáme. Tady se rozdílem zaobírat nebudeme, ale povíme si, jaké kódování bude pro naši stránku nejlepší. Dále si vzpomeneme i na jiné typy znakových sad (kódů) pro nás vhodných. 3.3.1 Znakové sady vhodné pro češtinu i slovenštinu V poslední době se nejvíce používají dvě normy kódování: ISO 8859-2 a Win-1250. Do popředí se však již dostává i norma UTF-8. Norma ISO 8859-2: to je kódování standardněji používané systémy Unix a Linux, ale rozšířilo se i do aplikací Windows. Jeho dalšími označeními jsou Latin 2 a ISO Latin 2. Microsoft je označuje jako Středoevropské jazyky (ISO). Norma Win-1250: toto kódování je preferované v systému Windows. Je oblíbeno hlavně proto, že jej používá většina editorů používaných pod Windows (Poznámkový blok, PSPad). V aplikacích Microsoftu bývá označeno jako Středoevropské jazyky, což je značně matoucí s předcházejícím označením pro ISO 8859-2. 3. Vlastní dokument XHTML...

CSS A XHTML 29 Norma UTF-8: je nejčastějším zápisem kódování Unicode. Toto kódování je určeno pro všechny světové jazyky najednou. Jedná se o kódování, které se jednou rozhodně začne používat ve velkém. Samozřejmě, stránky kódované v UTF-8 se již objevují, protože internetové prohlížeče jej podporují. Jiné aplikace a programy je zatím, ve velké většině, nepodporují. 3.3.2 Kódování ve značkách <meta> Nyní si ukážeme, jak jednotlivé typy kódů zapíšeme do značek <meta>. Není to nic jiného než: <meta http-equiv="content-type" content=" application/xhtml+xml; charset=znakova_sada" /> kde atribut content=" application/xthml+xml; charset=znakova_sada", říká, že se jedná o aplikace psané v jazyku XHTML, který je odvozen od základního jazyka XML, a že pro daný dokument XHTML použijeme kódování typu znakova_sada. Pro jednotlivé kódy to bude vypadat následovně: <meta http-equiv="content-type" content=" application/xhtml+xml; charset=iso-8859-2" /> nebo <meta http-equiv="content-type" content=" application/xhtml+xml; charset=windows-1250" /> nebo <meta http-equiv="content-type" content=" application/xhtml+xml; charset=utf-8" /> Já používám na webu kódování ISO 8859-2, a také zde, v příkladech, budeme toto kódování používat. Samozřejmě je jen na čtenáři, které kódování si zvolí. Vlastní dokument XHTML Je potřeba dát si pozor na jednu věc. Kódování, které si vybereme, že jej budeme používat na naší stránce, musíme nastavit i v daném editoru (X)HTML, protože to může způsobit sice malé, ale nepříjemné problémy. V editoru Poznámkový blok, který je aplikací automaticky instalovanou do Windows, se kódování nastavit nedá. Tam je natvrdo dáno kódování Win-1250, a proto je potřeba přizpůsobit tomu i výběr znakové sady (Win-1250). V ostatních editorech by mělo jít kódování nastavit jednoduchým způsobem. V editoru PSPad je to pomocí příkazu Menu Format, s následným výběrem kódování z nabídky. Při jakýchkoliv problémech se obraťte na mne nebo na své zkušenější kolegy. Upozornění 3.4 Struktura souboru index.html (základ pro naši stránku) Všechno potřebné pro vytvoření našeho prvního, základního a nejdůležitějšího souboru pro vytvoření stránky, jsme si již řekli. Teď to jen sjednotit a podívat se, jak to vypadá. Soubor ukládáme s názvem index.html do hlavní složky nase_prvni_stranka tak, jak jsme si to popsali ve 2. kapitole. 3.4 Struktura souboru index.html

30 CSS A XHTML Výraz index je použit proto, že aplikace, která je určena k interpretaci stránky, vždy hledá soubor index.html (nebo index.php), sloužící k jakémusi spuštění celého webu. Kdyby tam tento výraz nebyl, stránku jako takovou bychom neviděli, ale viděli bychom přímo soubory a adresáře, které má náš web obsahovat a ze kterých má čerpat data. Příponu html asi není potřeba představovat. Prozrazuje nám to, že stránka je psána v nějakém značkovacím jazyku, ať již v HTML nebo v XHTML. Tato přípona je v obou případech identická. 3.4.1 Co obsahuje soubor index.html Jednoduše řečeno: to, co se v souboru index.html nachází, je záhlaví, hlavička a tělo souboru. V záhlaví stránky bude následující zápis: <?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" xml:lang="sk"> Tato část hovoří o tom, v jakém značkovacím jazyku budeme naši stránku psát (XHTML 1.1) a jaké kódování pro náš jazyk budeme používat (encoding="iso-8859-2";, ale použít můžeme i kódování zmíněné v kapitole 3.3.2). Značka xml:lang="sk" v kořenovém elementu <html> (je párován a uzavírá se na konci celého dokumentu značkou </html>) hovoří o jazyku, ve kterém píšeme celý obsah dokumentu. Například pro češtinu to je xml: lang="cs", v našem případě je to slovenština. Řádek "DOCTYPE" sděluje aplikacím, které stránku zpracovávají, že při kontrole mají použít pravidla týkající se jazyka XHTML 1.1 (DTD XHTML 1.1), který se nachází na adrese http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd. A řádek, který je v záhlaví úplně nahoře hovoří o verzi jazyka XML (extensible Markup Language = rozšířitelný značkovací jazyk), který bude dokument dodržovat při psaní kódu XHTML. Další neodmyslitelnou částí našich stránek je ta, která je uzavřena v párové značce <head>. V ní budeme definovat značky <meta>, značky <link> a hlavičku celého webu. Já to nazývám hlavičkou dokumentu XHTML. Ta vypadá takto: <head> <meta http-equiv="content-type" content=" application/xhtml+xml; charset=iso-8859-2" /> <meta name="author" content="pjotr http://sietook.druskova.sk" /> <link rel="stylesheet" href="styles/nastav.css" type="text/css" media="screen" /> <title>naše první stránka</title> </head> Vidíme zde značku <meta> na prvním místě, protože ji potřebujeme již na první řádky, a to pro část "title", kde už může být diakritika. Následuje značka <meta> pro informaci o autorovi, zde si čtenář zadá své údaje. Značka <link> v tomto případě znamená načtení souboru *.css z již konkrétní složky styles (jedná se o soubor nastav.css). A značka "<title>naše první stránka</title>" je název našeho webu. Tento název můžeme vidět v záhlaví okna prohlížeče (Opera, Firefox, Internet Explorer), ve kterém máme naši práci otevřenu (viz obrázek 3.1). 3. Vlastní dokument XHTML...

CSS A XHTML 31 Obr. 3.1: Značka "<title>naše první stránka" v záhlaví okna prohlížeče Opera Za tímto vším následuje samotné tělo dokumentu, uzavřené mezi párovými značkami elementu <body>, ve kterém se bude celé kouzlo odehrávat. Za tímto tělem následuje ještě uzavření značkou </html>. Tělo jsme si otevřeli úplně na samém začátku značkou <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sk">. Náš první soubor index.html bude po souhrnu všeho vypadat takto: <?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" xml:lang="sk"> <head> <meta http-equiv="content-type" content= application/xhtml+xml; charset=iso-8859-2" /> <meta name="author" content="pjotr http://sietook.druskova.sk" /> <link rel="stylesheet" href="styles/nastav.css" type="text/css" media="screen" /> <title>naše první stránka</title> </head> <body> </body> </html> Vlastní dokument XHTML 3.4.2 Plnění obsahu V tomto stadiu, když máme vytvořen soubor index.html, si jej otevřeme v internetovém prohlížeči (vaší pozornosti opět doporučuji prohlížeč Opera, který se dá stáhnout na adrese www.opera.com) z příslušného místa na disku. Uvidíme čistou bílou stranu (viz obrázek 3.2). V následujících kapitolách knihy budu uvádět jen samostatné tělo dokumentu, uzavřené ve značkách <body> a </body>. Budeme tím rozumět celý soubor index.html. U každé ukázky si zobrazíme, jak stránka vypadá na obrazovce. Jako první zkusíme do těla souboru index.html napsat nějaký text, například takto: <body> </body> To je přesně tady:-)) 3.4 Struktura souboru index.html

32 CSS A XHTML Obr. 3.2: Prázdný dokument XHTML v prohlížeči Značky <body> již nepíšeme (jsou již napsané), jde mně jen o optické ukotvení, aby bylo na první pohled jasné, kam text píšeme. Ukázka je na obrázku 3.3. Vidíme, že se v prohlížeči neobjevila jen čistá bílá strana, ale i text, který jsme napsali. Obr. 3.3: Ukázka textu v dokumentu XHTML Ještě zkusíme dopsat nějaká písmena s diakritikou (háčky a čárky), abychom se přesvědčili, že naše kódování je nastaveno správně, a to jak v dokumentu, tak v editoru, ve kterém XHTML píšeme (pokud budete mít nejasnosti, obraťte se na mě na čísle ICQ 347 195 324 nebo e-mailem pjotr.william@gmail.com, protože je mi jasné, že se tady dělají časté chyby). Do těla dokumentu ještě napíšeme text navíc. Zde uvádím slovenštinu i češtinu: <body> To je přesně tady:-)) 3. Vlastní dokument XHTML...

CSS A XHTML 33 Áno, však si fičí správne žltý kôň a čišena ťava cez mäkkú ľavotočivú zákrutu vaňa. Příliš žluťoučký kůň uměl ďábelské ódy. </body> Obr. 3.4: Ukázka kódování dokumentu XHTML Ukázka je na obrázku 3.4. Pokud se nám zobrazí oba texty ( Áno, však si fičí správne žltý kôň a čišena ťava cez mäkkú ľavotočivú zákrutu vaňa. a Příliš žluťoučký kůň uměl ďábelské ódy. ) tak, jak jsou uvedeny v knize, můžeme být spokojeni (buď pro slovenštinu nebo pro češtinu). Kódování máme nastaveno správně a nedělá problémy. Určitě jste si všimli, že celý text, i přes zápis pod sebou, se zobrazil za sebou. Z toho si nic nedělejte, to se napraví pozdější úpravou kódu. Jazyk XHTML neslouží pro formát vzhledu, ale pro formát struktury dokumentu. O fenoménu použití jazyka HTML na definování vzhledu, který se v určitém období velmi často používal (HTML s množstvím zbytečností HTML 3.2, HTML 4.0) a ještě se často používá, se tady zmiňovat nebudu, později si uvedeme jen jednoduchý příklad. Značky, které budeme používat, jsem zmínil v kapitole 3.2.1. Postupem času si je rozšíříme o další. Nejdříve si ale povíme, že vytváříme web např. o žárovce. Do souboru index.html napíšeme následující kód. Již nemusím zdůrazňovat, že vše píšeme mezi značky <body> a </body>, ale ještě předtím napíšeme mezi značky <title> a </title> nadpis naší stránky. <title>web o žárovce</title> A konečně samotné tělo. <body> <h1>web o žárovce</h1> <h3>navigace</h3> <ul> <li><a href=" " title="domů">domů</a></li> <li><a href=" " title="menu1">menu1</a></li> Vlastní dokument XHTML 3.4 Struktura souboru index.html

34 CSS A XHTML <li><a href=" " title="menu2">menu2</a></li> <li><a href=" " title="menu3">menu3</a></li> </ul> <hr /> <h2>hra s vypínačem</h2> <p> Když zašroubujeme žárovku do závitu, umožníme jí, aby mohla v určitých okamžicích svítit. Tyto okamžiky jsou dány naší manipulací s vypínačem. Směrem nahoru jej zapneme, směrem dolů jej vypneme (většina vypínačů funguje právě takto). Když je vypínač zapnut, žárovka svítí, když je vypnut, žárovka nesvítí, je tedy zhasnuta. Funguje to na jednoduchém principu, který nebudeme rozebírat. </p> <hr /> <h2>hra se světlem</h2> <p> Samozřejmě, že žárovkou se dají vykouzlit i jiné zajímavé věci. A sice romantická atmosféra. Ano, se svíčkami se nedá srovnat, ale rozhodně se tím plnohodnotná romantická atmosféra napodobí. Dokonce si můžeme, na základě našich zkušeností, postavit i stínové divadlo. Určitě každý víte, jak to funguje.:-). Žárovka tam rozhodně chybět nebude. </p> <hr /> <p> V patičce jsou uvedeny informace, týkající se například přímo webu. Kdo jej vytvořil, copyright a podobně. </p> </body> Ukázku si můžete prohlédnout na obrázku 3.5. Všimněte si použití párových značek <h1>, <h2>, <h3>. To jsou nadpisy. Můžeme je používat až po značku <h6>. Je vždy dobré psát je podle jejich priority: <h1> pro nadpis nejvyšší úrovně, <h2> pro druhou úroveň a tak dále, až po <h6>. Párovou značku <p> jsme použili pro vymezení odstavců. Nepárová značka <hr /> je vodorovná čára, která opticky rozděluje strukturu stránky na grafickém výstupu. Později tyto čáry schováme, aby byly vidět jen při vypnutých stylech, grafické oddělení bude vytvořeno jinými prvky. Vidíme zde i použití seznamu, který se skládá z položek, uzavřených mezi párovými značkami <li>. Všechny položky seznamu jsou nakonec uzavřeny v párové značce <ul>. V samotných položkách seznamu jsou napsány párové značky <a>, jež navíc obsahují dva atributy, které budeme využívat nejčastěji. Jsou jimi href="cesta" a title="název odkazu". Jak z uvedeného vyplývá, href určuje cestu, na kterou odkaz směřuje. Po aktivaci odkazu (klepnutím) se to projeví změnou původního obsahu na obsah nový (určitě to již znáte z internetu). Značka title určuje, co se má zobrazit, pokud nad odkazem necháme kurzor myši volně viset. Tento atribut (title) je taktéž potřebný pro lepší indexování ve vyhledávačích, jako je Google. Důležitější je ale tehdy, pokud náš web přijde pod takové 3. Vlastní dokument XHTML...

CSS A XHTML 35 Obr. 3.5: Základní struktura webové stránky v prohlížeči (patkové písmo) čtecí zařízení, které využívají hlavně hluchoněmí lidé, aby věděli, který odkaz k čemu slouží (zde již vidíme začátky psaní stránky přístupné každému). Takže po sumarizaci bude odkaz vypadat následovně: <a href="cesta_odkazu" title="název odkazu">název odkazu</a> V ukázce vidíme prázdnou cestu v atributu href. Toho se nepolekáme, protože ještě nemáme nic víc, kromě souboru index.html naší stránky. Později přibudou další soubory. Potom již budeme moci použít konkrétní cestu. Například href="http:// sietook.druskova.sk" bude odkaz směřující na adresu http://sietook.druskova.sk, odkaz s atributem href="pages/uvod.html" bude odkaz směřující na soubor uvod.html ve složce pages. Po shlédnutí ukázky je jasné, že naše stránka vypadá trochu staromódně a to přece nechceme. Chceme moderní web, který se stane naší prezentací do začínajícího třetího tisíciletí. Právě ke zmodernizování slouží kaskádové styly CSS, o kterých si povíme v následující 4. kapitole. Vlastní dokument XHTML 3.4 Struktura souboru index.html

36 CSS A XHTML 3. Vlastní dokument XHTML...

CSS A XHTML 37 4. Oblékání stránek do kaskádových stylů CSS A nyní přišel čas na vlastní vytvoření stylu připraveného kódu jazyka XHTML, který máme napsán v souboru index.html. Po zvládnutí techniky rozmístění jednotlivých prvků si ukážeme, jak elegantně vyrobit přepsání obsahu stránky ve skriptovacím jazyku PHP pomocí menu. Ať vás to neodstraší, je to opravdu velmi jednoduché. Ale nejdříve CSS (kaskádové styly). Co to kaskádové styly (CSS = Cascading Style Sheets) jsou? Kaskádové styly umožňují formátovat dokumenty, definují způsob prezentace v jednotlivých koncových zařízeních, určují vzhled a styl jednotlivých prvků dokumentu XHTML, ale jako takové do jeho struktury nezasahují. A to je jejich veliká výhoda. Obsah je oddělen od definování vzhledu, a tím se nám práce nádherně ulehčuje a zpřehledňuje. Dokážeme být, díky tomu, efektivnější. Dost bylo superlativů, pojďme na nějaké konkrétní otázky. Oblékání stránek do kaskádových stylů CSS 4. Oblékání stránek do kaskádových stylů CSS

38 CSS A XHTML 4.1 Stručná historie stylů a jejich nesprávné začlenění do HTML Kdysi, ještě za starých časů, když byl na špici všeho, co s hypertextem souvisí, značkovací jazyk HTML, se vytvořila značně podivuhodná pravidla pro psaní v tomto jazyku. Tvůrcům stránek se tehdy znelíbily weby takového typu, jaký vidíme na obrázku 3.5, a proto vymysleli definování vzhledu v jednotlivých značkách HTML, což vypadalo například následovně: <body bgcolor="#7faff0" alink="blue" vlink="red"> <p bgcolor="#7ffa200" width="400" height="400" border="1"> Tento odstavec je vytvořen jinou barvou nežli pozadí <bgcolor="#7faff0"> celého "body". Má kolem sebe nastaven rámeček s tloušťkou 1 pixel. V elementu "body" jsou ještě nastaveny efekty pro odkazy. Ale ačkoliv píšeme v jazyku XHTML, toto formátování vzhledu není povoleno a nepůjde to jednoduše (jen část). <a href=" ">odkaz</a> </p> </body> Obr. 4.1: Nesprávně vložené styly Ukázka je na obrázku 4.1. Ale protože píšeme kód v jazyku XHTML 1.1, a ten takovéto definování vzhledu zakazuje, nepůjde všechno korektně. Museli bychom použít některou ze starších verzí jazyka HTML (například verzi 3.2 nebo 4.01), ale o to nám nejde. To, co si chceme na tomto zápisu ukázat, je jeho nepřehlednost. Kdybychom na naší stránce použili veliké množství odstavců a jiných prvků (s takto definovaným vzhledem), mohli bychom se zbláznit, pokud bychom měli všechno přepisovat znovu při úpravách webu. Projít celým kódem dá práci, a pokud nejsme zrovna zběhlí orientovat se v amazonské 4. Oblékání stránek do kaskádových stylů CSS

CSS A XHTML 39 džungli, kde nevíme, na jakém místě se právě nacházíme, tak se tomuto kódu obloukem vyhneme. Zažil jsem tato muka, tehdy jsem začínal, a nebylo to nic příjemného. Dopředu se toho raději vyvarujeme. To byla jen malá exkurze do nesprávné tvorby. Je nepodstatné vysvětlovat si, co jednotlivé části v nesprávném kódu znamenají. Pojďme tedy na to správné. 4.2 Třídy a identifikátory Vrátíme se k naší původní struktuře dokumentu XHTML (s již předtím napsaným textem), kterou vidíme na obrázku 3.5 (viz kapitola 3.4.2 Plnění obsahu). Budeme si postupně hrát, odshora až dolů, s celkovým vzhledem dokumentu. Nejdříve ale trochu teorie. Využívat budeme dvě základní funkce CSS. Těmi jsou třídy class a identifikátory id. Každý se jistě zeptá: No dobře, ale co s těmi třídami, co s těmi identifikátory? Odpověď je, jako vždy, jednoduchá: Jimi budeme volat definice stylů z našeho souboru CSS do vykreslování stránky, napsané v jazyku XHTML. A jak to funguje? Třídy se v jazyku XHTML volají jako class="jmeno_tridy". Poskytují nám definování vzhledu prvku (prvků) z dané třídy jménem "jmeno_tridy". A toto jméno můžeme následně použít u vícerých, opakujících se, prvků na naší stránce. U vícerých proto, že třída všeobecně zahrnuje několik jedinců, což je i intuitivně jednoznačné. Například pro odstavce by to mohlo vypadat takto: <p class="jmeno_tridy"> První odstavec. </p> <p class="jmeno_tridy" Druhý odstavec. </p> Odstavců z dané třídy tam může být mnoho, ale také tam může být jen jeden, jediný. Nebo tam nemusí být žádný z dané třídy, pak ale v souboru CSS bude vzhled definován zbytečně, pro nic za nic. Takto můžeme zařadit do určitých tříd jakékoliv prvky v kódu XHTML. Platí ale pravidlo, že pokud definujeme např. vzhled pro odstavec, nepoužijeme potom danou třídu třeba pro seznam. To samé platí pro identifikátory, ale s jedním značným rozdílem. Pokud víme, že se daný prvek bude v dokumentu nacházet právě jenom jednou, můžeme použít identifikátor. Takže, je-li v dané třídě sám, nepoužijeme třídu class, ale identifikátor id, který jej identifikuje jako samostatného (a jedinečného) jedince. Vypadá to asi takto: <p id="jmeno_identifikatoru"> Jeden, jediný odstavec svého druhu na naší stránce. </p> Identifikátory se používají například na patičku stránky, která je na našem webu vždy jen jedna. Oblékání stránek do kaskádových stylů CSS 4.2 Třídy a identifikátory

40 CSS A XHTML 4.3 Neškodné značky XHTML <div> a <span> Ještě předtím, než přejdeme na vlastní vytváření stylu dokumentu, povíme si něco o dvou důležitých značkách XHTML (i HTML), které nijak nezasahují do struktury stránky na výstupu. Tedy ji neformátují, pokud je k tomu nedotlačíme. Jsou jimi párové značky <div> a <span>. A jejich koncové polovičky jsou </div> a </span>. Značka <span>: Je to takzvaná řádková značka, pomocí které se formátuje řádek textu, jí označený. Je u ní možno použít třídy class i identifikátor id (viz kapitola 4.2 Třídy a identifikátory). Není u ní možné používat ty značky XHTML, které mají charakter více řádků, tedy bloků. Správný příklad: <span class="jmeno_tridy">v jednom řádku textu může být napsáno libovolné množství slov, ale nemůže se v něm nacházet žádný blokový element. Mohou v něm být např. značky <a href="cesta_odkazu" title="odkaz">odkaz</a> a jiné řádkové značky.</span> Nesprávný příklad (je zde totiž použit blokový element <p>): <span class="jmeno_tridy"><p>libovolný text, který je v odstavci. </p></span> Značka <div>: Je to takzvaná bloková značka, která ohraničuje určitý blok dokumentu, bez ohledu na to, kolik (a jakého) textu je v něm napsáno. V prostoru, určeném touto značkou, je možno psát libovolnou jinou značku XHTML. Také můžeme značky <div> vnořit do sebe. Použití tříd class a identifikátorů id je intuitivně jasné (viz kapitola 4.2 Třídy a identifikátory). Příklad: <div class="jmeno_tridy"> <p class="jmeno_tridy_odstavce"> Text v prvním odstavci </p> <p class="jmeno_tridy_odstavce"> Text ve druhém odstavci </p> <p id="jmeno_identifikatoru_odstavce"> Jedinečný odstavec, který je jen jeden na stránce </p> </div> Takovýmto způsobem můžeme dát odstavcům, které jsou vnořeny do značky <div>, určitou pozici na stránce, určitý vzhled nebo velikost. Vždy se bude formátovat vzhled dané značky <div>, a nikoliv vzhled odstavců. Ty se formátují na základě tříd, pro ně určených. 4. Oblékání stránek do kaskádových stylů CSS