CSS

Vysoká škola ekonomická v Praze FAKULTA INFORMATIKY A STATISTIKY Obor: Podnikové informační systémy

Metodika tvorby stránek s využitím technologie XHTML/CSS

BAKALÁŘSKÁ PRÁCE

Vedoucí práce: Mgr. Karel Mašek Autor: Petr Borák Praha, 2009

Petr Borák

Metodika tvorby stránek pomocí techonologie XHTML/CSS

Prohlašuji, že jsem absolventskou práci na téma „Metodika tvorby stránek s využitím technologie XHTML/CSS“ zpracoval samostatně a použil pouze zdrojů, které cituji a uvádím v seznamu použité literatury. V Praze dnhe 7.8. 2009

2

Petr Borák


Obsah 1. HTML - zevrubně 1. 1. Historie 1. 2. Organizace zabývající se standardy na Webu. 1. 3. The World Wide Web Consortium 1. 4. The Internet Egineering Task Force 2. XML (Extensible Markup Language) 2. 1. Proč je užitečné rozumět XML? 2. 2. Anatomie jednoduchého XML dokumentu 2.2. 1. PROLOG

5 5 6 6 6 7 7 8 9

2.2.1.1. 2.2.1.2. 2.2.1.3.

9 9 9

Deklarace XML Prázdný řádek KOŘENOVÝ ELEMENT

2. 3. Tvorba platného XML dokumentu pomocí deklarace typu dokumentu 10 2.3. 1. NÁZEV KOŘENOVÉHO ELEMENTU 10 2.3. 2. DEFINICE TYPU DOKUMENTU 10 2. 4. Deklarace typu elementu 11 2.4.2.1.

Deklarace atributu

12

2.4. 1. 2.4. 2.

ENTITY ELEMENTY

13 15

2.4.2.1. 2.4.2.2.

Gramatika elementů Gramatika elementů XML

16 19

3. XHTML 3. 1. DTD pro XHTML 3. 2. Tvorba minimálního XHTML dokumentu 3. 3. Rozdíly v syntaxi mezi HTML a XHTML 4. CSS 4. 1. Kontextuální selektory 4. 2. Kaskáda 4. 3. Propojení CSS s dokumentem 4.3. 1. INLINE STYLY 4.3. 2. EXTERNÍ STYLY 5. Hacky a filtry

3

20 21 21 23 26 27 28 31 31 33 33

Petr Borák

4


5. 1. Internet Explorer a kaskádové styly 5.1. 1. TAN HACK 5.1. 2. MODIFIKOVANÝ BOX MODEL HACK 5.1. 3. HACK POMOCÍ KOMENTÁŘE A ZPĚTNÉHO LOMÍTKA 5.1. 4. OWEN HACK 5.1. 5. HOLLY HACK 5.1. 6. CLEARFIX 5. 2. Pozicování 5.2. 1. FIXED 5.2. 2. ABSOLUTE 5.2. 3. RELATIVE 5.2. 4. STATIC 5.2. 5. INHERIT 5. 3. Floating 6. Tvorba komponent stránky 6. 1. Navigační struktura stránky a tvorba menu 7. Hlavní menu (první varianta) 7. 1. Hlavní menu druhá varianta 7. 2. Vedlejší menu 7. 3. Pravý layout – formulář, aktuality 7.3. 1. PRAVÝ LAYOUT – TVORBA STRUKTURY

35 37 38 39 39 39 40 41 42 42 42 43 43 43 43 44 45 50 51 55 55

7.3.1.1.

Navigační prvky v horní části lišty

57

7. 4. 8. 9.

Slideshow Seznam použitých zdrojů Přílohy

70 72 73

Petr Borák


Shrnutí obsahu práce V práci se nejdříve zabývám principy jednotlivých technologií, na nichž je postaven značkovací jazyk XHTML, což je nezbytný základ pro následný návrh metodiky. U čtenáře předpokládám znalost HTML, kaskádových stylů a objektového Javascriptu. Jednotlivé technologie rozebírám jen do míry potřebné pro kapitoly, které obsahují popis metodiky tvorby dílčích funkčních prvků stránek. Poté, co jsou probrány nezbytné základy, navrhuji, popisuji a následně analyzuji metodiku tvorby stránky, na kterou je aplikován design. Po jednotlivých fázích probírám tvorbu HTML 4.01 template. Závěrem práce je zhotovení validní HTML/CSS šablony.

Summary First, I study the principles of each technology the XHTML markup language is based on, which is a nescessary base for the consecutive projecting of the method. I assume, that a reader disposes of a basic knowledge of both HTML and CSS. Each technology is being explored only as much as the level of chapters about the methods planning require. Furthermore I design and describe a method of processing an HTML/CSS template.

5

Petr Borák


1. HTML - zevrubně 1. 1. Historie Hypertext Markup Language vznikl v roce 1991 v laboratořích CERN jako výsledek projektu, jehož cílem bylo usnadnit sdílení dokumentů na akademické půdě. U jeho zrodu stál Tim Berners-Lee. Základem byl SGML (Standard Generalized Markup Language). Pracovní skupina kolem Tima Berners-Leeho umožnila skrze Web, jazyk HTML a prohlížeč, přístup ke sdílení dokumentů široké skupině uživatelů; a to i mimo akademickou půdu. Uživatelé totiž díky HTML již nebyli nuceni sdílet mezi sebou data jako kolekci víceméně nezávislých souborů. Jazyk HTML dokázal z této kolekce vytvořit jednotný celek. Nicméně situace na Webu se během let výrazně změnila a hlavní příčina rychlého rozšíření HTML se postupně začala stávat jeho slabinou. Byl stále více kladen důraz na dynamiku stránek a jejich vizuální podobu. Počátek tohoto trendu souvisí s neustále se rozšiřujícím okruhem uživatelů. Ještě v polovině devadesátých let se tvůrci stránek s výše zmíněným trendem vypořádávali víceméně oklikou. Vznikaly různá řešení, která měla za účel dodat stránce vedle informační také vizuální hodnotu. Důsledkem pak bylo, že tagy HTML byly využívány mimo svůj sémantický a obsahový rámec, což v mnoha případech vyústilo ve velmi špatně čitelné kódy, kdy často i celá stránka byla nadefinována jako jedna složitě strukturovaná tabulka. Časem, s rostoucí složitostí internetových aplikací, začala vedle nutnosti „líbivého designu“ vyvstávat také potřeba obsahově a sémanticky validních dat.

Odpovědí na vylíčený stav věcí jsou standardy konsorcia W3C, které se

vydaly cestou oddělení obsahu od formy.

6

Petr Borák


Vznikly CSS (Cascading Style Sheets), jejichž úlohou je dodat jednotlivým elementům na stránce vizuální podobu podle potřeb tvůrce a uvolnit sémantický potenciál HTML k čistě obsahovým účelům.

1. 2. Organizace zabývající se standardy na Webu. Tak jako spousta jiných populárních technologií i HTML měl zpočátku podobu neformální specifikace. Tento stav byl přijatelný v době, kdy byl jazyk využíván úzkou skupinou uživatelů. S jejich přibývajícím počtem začalo být zřejmé, že je potřeba přistoupit k více formálním prostředkům. Vyvstala potřeba standardizace.

1. 3. The World Wide Web Consortium Tato organizace vznikla s prvotním cílem stanovit standardy pro jazyk HTML a později také pro jazyk XHTML. Mimoto je v oblasti jejího záběru také standardizace jakékoli technologie, která se vztahuje k Webu. Pro účely této práce jsou podstatné zejména standardy pro značkovací jazyk XML a Kaskádové styly (CSS).

1. 4. The Internet Egineering Task Force IETF se zabývá všemi oblastmi souvisejícími s Internetem. Web je jen malou součástí v jejím celkovém záběru. IETF vydává veškeré své definice Internetových technologií jako dokumenty v jednotné podobě, které se nazývají „Request for comments“ (RFC).

7

Petr Borák


2. XML (Extensible Markup Language) XML je podmnožina SGML (Standard Generalized Markup Language) ... Jeho cílem je umožnit použití SGML k odesílání, přijímání a zpracování dat na webu.(1)

2. 1. Proč je užitečné rozumět XML? Důvod je prostý. XHTML je HTML definované pomocí značkovacího jazyka XML. V čem je ale jazyk XHTML tak převratný oproti předchozím verzím HTML? Pro odpověď na tuto otázku je třeba jít až ke kořenům obou značkovacích jazyků. HTML se od XHTML na první pohled liší pouze v nepatrných detailech. Rozdíl mezi těmito jazyky je v jejich podstatě. HTML je založeno na značkovacím jazyku SGML. Problém je ovšem v tom, že samotný značkovací jazyk SGML je velmi rozsáhlý a propletený někdy až filozofickými pravidly a úvahami, což z něj dělá prakticky samostatnou vědní disciplinu. A to bylo v přímém rozporu se záměry tvůrců HTML. Důsledkem výše zmíněného je situace, kdy HTML odpovídá jen určitým, ale zdaleka ne všem, standardům „vše pojímajícího“ SGML. W3C tedy definovalo nový, jednodušší a více flexibilní značkovací metajazyk – XML. Pomocí XML byl definován XHTML. Rozdíl mezi HTML verze 4.01 a XHTML verze 1.1 je tedy ten, že HTML je postaven na SGML, přičemž v mnoha případech nesplňuje jeho standardy, zatímco XHTML je definován v metajazyku XML a naopak všem jeho standardům plně vyhovuje. Základem značkovacího jazyka XHTML je definice typu dokumentu zhotovená v XML. To přináší mimo jiné možnost tvorby vlastních elementů (samozřejmě při znalosti základů XML). Je pravda, že ve většině případů se zcela obejdeme s elementy a atributy, které známe již z HTML, ovšem nesmíme zapomínat, že i u XHTML se předpokládá neustálý a kontinuální vývoj. Tak se může časem stávat,

8

Petr Borák


že postupy, na které jsme zvyklí při znalosti starší verze jazyka, nebudou v souladu s požadavky verze současné. Kouzlo XHTML je pak v tom, že si vytvoříme vlastní (rozšířené) DTD. 1 Pro tvorbu vlastního značkovacího jazyka pomocí XML máme následující možnosti:

Vytvoření správně strukturovaného dokumentu

Definování platného XML dokumentu

Pomocí Definice typu dokumentu (Document Type Definition – DTD)

Pomocí schémat XML.

Pro potřeby této práce je podstatné definování platného XML dokumentu pomocí definice typu dokumentu.

2. 2. Anatomie jednoduchého XML dokumentu Jednoduchý element dokumentu XML může mít například následující podobu: <ELEMENT> ...

Každý XML dokument se skládá vždy ze dvou následujících částí:

prologu,

kořenového elementu.

1 Například pokud se budete zabývat otevřením stránky v novém okně. To bylo v HTML verze 4.0 možno vyřešit pomocí jednoduchého zápisu vlastnosti _blank v elemntu . V XHTML tato vlastnost není definována. Rozšíření DTD je pak vedle použití Javascriptu jendou z možností řešení tohoto problému. 9

Petr Borák


2.2. 1. PROLOG

Do prologu v jeho nejjednodušší podobě v optimálním případě patří:

Deklarace xml

prázdný řádek

Prolog může dále obsahovat nepovinné komentáře, které zvyšují čitelnost dokumentu. Do prologu se také vkládá DTD. 2.2.1.1. Deklarace XML

Obsahuje číslo verze XML a označení typu dokumentu. Přesto, že je nepovinná, je vhodné ji používat. Musí se vyskytovat vždy na prvním řádku dokumentu XML. Může mít následující podobu:

2.2.1.2. Prázdný řádek

Musí se vyskytovat vždy za prologem. Odděluje prolog od zbytku dokumentu. 2.2.1.3. KOŘENOVÝ ELEMENT

Následuje za prologem. Je to hlavní element, který obsahuje všechny ostatní elementy v dokumentu XML. Zapisuje se v následující struktuře: <ELEMENT>...

10

Petr Borák


2. 3. T vorba platného XML dokumentu pomocí deklarace typu dokumentu Deklarace typu dokumentu patří k nejzákladnějším způsobům tvorby platného XML dokumentu. Umísťuje se do prologu hned za deklaraci XML. Obsahuje následující prvky:

Název kořenového elementu

Definici typu dokumentu

Jednoduché „schéma“ deklarace typu dokumentu může mít například následující podobu:

2.3. 1. NÁZEV KOŘENOVÉHO ELEMENTU

Název zde uvedeného kořenového elementu musí vždy odpovídat názvu kořenového elementu v dokumentu. 2.3. 2. DEFINICE TYPU DOKUMENTU

DTD neboli definice typu dokumentu obsahuje deklarace definující jednotlivé elementy, jejich atributy a dále entity dokumentu. Veškeré deklarace elementů a atributů jsou tedy součástí Definice typu dokumentu. Zde je ukázka definice typu dokumentu s deklarací jediného elementu s názvem „ZNACKA“: [ ]

11

Petr Borák


V DTD můžeme deklarovat následující druhy obsahu dokumentu XML:

Deklarace typu elementu

Deklarace seznamu atributů

Deklarace entit

Komentáře

Instrukce zpracování

Deklarace notace

Reference na parametrické entity

2. 4. Deklarace typu elementu Obecně určují deklarace všech typů elementů obsažených v DTD a jejich obsah. Součástí každé deklarace je název typu elementu a určení jeho přípustného obsahu. Jednoduchá deklarace typu elementu s názvem PRVEK a jakýmkoli přípustným obsahem by vypadala následovně:

Poslední parametr s názvem Any se nazývá specifikace obsahu . Element může obsahovat následující typy specifikace obsahu:

Elementy – takto deklarovaný element může obsahovat jen zadané typy elementů. Na pozici klíčového slova se nachází název jiného elementu deklarovaného v DTD.

12

Petr Borák


Smíšený obsah – Může obsahovat kombinaci textových řetězců a definovaných elementů potomků. Přípustné hodnoty v obsahu elementu se uvádí na místě specifikace obsahu elementu v závorce a jsou odděleny znakem |. Na konci celého modelu se nachází znak *. Zde je ukázka možné podoby deklarace elementu se smíšených obsahem, který má název SMISENY a může obsahovat na jiném místě deklarovaný element POLOZKA v kombinaci s textovými řetězci:

Jakýkoli obsah – klíčové slovo ANY, element může obsahovat jakýkoli počet elementů jakéhokoli typu a v jakémkoli pořadí.

Obsah typu „EMPTY“ – klíčové slovo EMPTY, element musí být prázdný.

Rozdíl mezi specifikací obsahu typu „smíšený“ a „element“ je ten, že smíšený obsah může vždy obsahovat znaková data, která se případně mohou v libovolném pořadí kombinovat s elementy potomků. Specifikace typu „element“ naopak neobsahuje nikdy textový řetězec jako přímého potomka a jednotlivé definované elementy potomků mohou mít stanovené pevné pořadí a počet výskytů v mateřském elementu. 2.4.2.1. Deklarace atributu

DTD musí obsahovat deklaraci všech atributů jednotlivých elementů nebo entit, které budou použity v dokumentu XML. Obecný formát deklarace atributu je:

Zde je výpis prvků obsažených ve výše uvedené deklaraci typu atributu s popisem jejich funkce:

13

Název – název typu elementu, kterému náleží deklarované atributy.

Petr Borák


Definice Atributu – Samotný popis atributu, který nám udává

název atributu,

typ hodnoty atributu,

výchozí hodnotu atributu,

oznámení, zda je atribut povinný či ne.

Následující element má název SATRIBUTEM, může mít jakýkoli obsah a je pro něj v seznamu atributů definován atribut s názvem „Atribut“, který nabývá textových hodnot a v případě jeho neuvedení, nabude implicitní hodnoty „IHod“. [ ]

2.4. 1. ENTITY

Entity hrají v dokumentech XML důležitou roli. Díky nim je možno tvořit rozsáhlé, přehledné a kompaktní DTD. Entita je pro lexikální analyzátor XML sekvence znaků, která je přeložena a nahrazena řetězcem. Entity mohou mít spoustu různých vlastností a dají se klasifikovat podle různých hledisek. Z hlediska místa jejich využití se entity dělí na:

14

obecné

a parametrické.

Petr Borák


Obecné entity obsahují data, která se využívají uvnitř kořenového elementu v dokumentu XML. Zatímco parametrické entity jsou určeny k využití přímo v DTD. Lexikální analyzátor XML je pozná podle způsobu jejich zápisu. Před zápisem názvu parametrické entity se uvádí znak %. Obecná entita, která má následující podobu:

by mohla být například uvedena v dokumentu XML na tomto místě: ... <element> obsah textového elementu &nazevEntity ...

Samozřejmě za podmínky, že obsah entity vyhovuje specifikaci obsahu v DTD pro element <element>. V tomto případě by se zástupný znak &nazevEntity nahradil obsahem této entity tak, jak je to nadefinované v DTD. Entita v podobě

by se nahradila obsahem dokumentu externi.xml. V tomto případě jde o externí entitu. Klíčové slovo SYSTEM je vyžadováno a musí být následováno systémovým identifikátorem, který popisuji o pár řádků níže. Externí entita může mít ještě jednu lehce odlišnější podobu, kdy se na místě klíčového slova SYSTEM vyskytuje PUBLIC. V takto definované externí entitě je PUBLIC následováno formálním názvem dokumentu. U externí entity se uvádí adresa v podobě cesty k souboru, ve kterém je uložena. Cesta k souboru se popisuje tzv. systémovým identifikátorem a může mít podo-

15

Petr Borák


bu buď relativní cesty k dokumentu (v tomto případě se XML chová stejným způsobem, jaký známe z HTML), nebo může být uvedena v absolutní podobě pomocí URI (Uniform Resource Indicator). Nejčastěji používanou formou URI je URL (Uniform Resource Locator). Samotný jazyk XML již implicitně obsahuje pět nejčastěji se vyskytujících obecných entit. Těmi jsou:

&

&

'

‘

"

“

>

>

<

<

2.4. 2. ELEMENTY

Elementem v DTD rozumíme definici značky v dokumentu XML, kterou poté můžeme používat podle definovaných pravidel. Tato pravidla jsou všechna obsažena právě v DTD. Jak již bylo řečeno dříve, vždy existuje jeden kořenový element, který obsahuje všechny ostatní elementy dokumentu(8). Proto, abychom byli schopni správně pracovat s deklaracemi elementů, je třeba si ještě trochu rozšířit obzory. Pro rekapitulaci opakuji, že elementy tvoříme v DTD pomocí deklarace typu elementu. Tato obsahuje vždy název elementu a specifikaci typu obsahu. Typ obsahu může nabývat různých podob a tyto podoby se mohou mezi sebou vzájemně proplétat. XML má přesně stanovená pravidla pro zápis specifikace obsahu, má svou gramatiku. Ta má své pevné základy v počítačové vědě.

16

Petr Borák


2.4.2.1. Gramatika elementů

V počítačových gramatikách se ve skutečnosti pro definici způsobů uspořádání jednotlivých elementů jazyka používají jen čtyři typy pravidel: je to sekvence, volba, seskupení a opakování. Sekvenční pravidla definují přesné pořadí (posloupnost neboli sekvenci), v nichž se musí jednotlivé elementy v jazyce zapisovat. Jenže například určité pravidlo gramatiky říká, že za elementem A následuje element B a za ním element C, pak musíme v dokumentu zapisovat elementy, A,B a C přesně v tomto pořadí. Chybějící element (zapíšeme například A a C, ale ne B), element navíc (A, B, E a teprve potom C), nebo nesprávné pořadí elementů (C, A, B) znamená porušení pravidla a výsledek nevyhovuje definované gramatice. V řadě gramatik, jazyk XML nevyjímaje, se sekvence definují jednoduše zápisem odpovídajících elementů v tom pořadí, v jakém se mají objevit, oddělují se přitom čárkami. Naše jednoduchá sekvence by se tudíž v definici DTD zapsala jako A, B, C. Pravidlo volby představuje v gramatice jistou flexibilitu, protože autor definice DTD si může vybrat jeden element z určité skupiny platných elementů. Pravidlo s volbou může například stanovit, že si můžeme vybrat libovolný z elementů D, E nebo F; libovolný z těchto tří elementů gramatickému pravidlu vyhoví. Podobně jako v řadě jiných gramatik se přitom v XML zapisují pravidla voleb jako seznam příslušných platných voleb oddělených znakem svislé čáry (|). Naše jednoduché pravidlo zapíšeme tudíž v DTD jako D | E | F. Jestliže znak svislé čáry přečteme jako slovíčko nebo, bude význam pravidel s volbou zřejmý. U pravidla seskupení se dvě nebo více pravidel slučuje do jediného pravidla; tím se vytváří bohatší a užitečnější jazyk. V pravidle seskupení můžeme například

17

Petr Borák


uvést sekvenci elementů, za níž následuje volba a další sekvence. Skupiny vyznačíme v pravidle DTD uzavřením do závorek. Dokument ::= A, B, C, (D | E | F), G

Tento zápis znamená, že dokument musí začínat elementy A, B a C, po nichž následuje jeden libovolně vybraný element ze skupiny D,E nebo F a nakonec element G. Opakování vyjadřuje zápis jednoho nebo více elementů opakovaně. V jazyce XML se, opět podobně jako v řadě jiných jazyků, vyjadřuje opakování pomocí speciální znakové přípony, kterou zapíšeme na konec elementu či skupiny v pravidle. Bez speciálního znaku se element musí v pravidle vyskytnout právě jednou. Možnými speciálními znaky jsou znaménko plus (+), které znamená, že se element do dokumentu zapisuje jednou nebo vícekrát, dále hvězdička (*) pro zápis elementu nula nebo vícekrát a konečně znak otazník (?), jež vyjadřuje element, zapisovaný nula nebo jedenkrát. Následující pravidlo: Dokument ::= A, B?, C*, (D | E | F)+, G*

Tak vytváří z elementů A až G neomezené množství správných (správně vytvořených) dokumentů. Podle uvedeného pravidla musí každý dokument začínat elementem A, za nímž následuje nepovinný element B, dále nula nebo více výskytů elementu C, poté alespoň jeden (ale klidně i více) výskytů libovolného z elementů D,E nebo F a nakonec nula nebo více elementů G. Výše popsanému pravidlu tak vyhovují všechny následující dokumenty (a samozřejmě mnoho dalších): ABCDG ACCCFFGGG

18

Petr Borák


ACDFDFGG

Všechny příklady si můžete ručně projít a ověřit si, že jsou vzhledem k pravidlu opakování zapsány skutečně správně. Nyní si jistě dokážete představit, že specifikovat gramatiku celého jazyka v jediném pravidle by bylo více než obtížné, i když to v žádném případě není nemožné. Výsledkem takovéhoto pracného snažení by ale naneštěstí byla téměř nečitelná sekvence prakticky nesrozumitelných pravidel. Tuto situaci naštěstí zjednodušuje skutečnost, že položky v pravidle mohou být samy o sobě pravidly, která obsahují další elementy a pravidla. V těchto případech se položkám gramatiky, které ve skutečnosti tvoří pravidla, říká neterminály (netermninální neboli nekoncové symboly), zatímco položky, které jsou přímo elementy jazyka, se nazývají terminály (terminální neboli koncové symboly). Veškeré neterminály se přitom musí nakonec odvolávat na nějaké pravidlo, které z nich vytvoří sekvenci terminálů,jinak gramatika nemůže vytvořit platný dokument. Naši jednoduchou gramatiku můžeme tak například vyjádřit pomocí následujících dvou pravidel: Dokument ::= A, B?, C*, VOLBY+, G* Volby::= D | E | F

V tomto případě jsou výrazy Dokument a Volby neterminály, zatímco symboly A, B, C, D, E, F a G jsou terminály. Jazyk XML (a ostatně ani většina ostatních gramatik) neobsahuje žádný požadavek, který by nějak diktoval nebo naopak omezoval počet neterminálů v gramatice. Většina gramatik používá proto neterminály kdekoli, kde je to vhodné pro lepší srozumitelnost pravidel a pro snazší práci s nimi.

19

Petr Borák


2.4.2.2. Gramatika elementů XML

Pravidla pro definici obsahu elementu jsou stejná jako gramatická pravidla, o nichž jsme právě hovořili. To znamená, že pro definici přípustného obsahu elementu lze použít sekvence, volby, skupiny i opakování. Neterminály v pravidlech musí tvořit jména ostatních elementů definovaných v dané DTD. Celý mechanismus si ukážeme na několika příkladech. Uvažujme deklaraci značky , kterou jsme si vypůjčili z definice DTD jazyka HTML:

Tento zápis definuje element se jménem html, jehož obsah tvoří element head a za ním element body. Všimněte si, že jména elementů nezapisujeme v definici DTD do jinak obvyklých úhlových závorek; tuto notaci používáme až při vlastním zápisu elementů v dokumentu. V definici DTD jazyka HTML najdeme například takovouto deklaraci značky :

Nejprve si všimneme parametrické entity se jménem head.misc, která se v této deklaraci vyskytuje hned několikrát. Podívejme se na ni zblízka:

Entita head.misc definuje skupinu elementů, z nichž si můžeme jeden vybrat. Hvězdička na konci celého zápisu ale naznačuje, že můžeme zapsat nula nebo více těchto elementů. V konečném důsledku tak kdekoli, kde se objeví zápis

20

Petr Borák


%head.misc:,můžeme zapsat nula nebo více elementů script, style, meta, link nebo object, a to v libovolném pořadí. Nyní se vrátíme k deklaraci elementu head. Zde vidíme, že můžeme začít libovolných počtem různých elementů záhlaví head. Dále si musíme vybrat: buďto skupinu složenou z elementu title, nepovinných různých položek z nepovinného elementu base opět různými položkami, nebo skupinu vytvořenou z elementu base, různých položek, elementu, title a opět nějakých různých položek. Proč musí mít ale značka takovéto složité pravidlo? Copak by nestačilo napsat jednoduše:

Standard jazyka HTML vyžaduje, aby každá značka obsahovala právě jednu značku . Standard povoluje také jen jednu značku <base>, je-li vůbec uvedena. Jinak již standard povoluje libovolný počet ostatních elementů záhlaví head, a to v libovolném pořadí. Stručně řečeno, deklarace elementu head, i když je na první pohled dosti komplikovaná, pro procesor jazyka XML znamená, že se v elementu head musí objevit právě jeden element title, a také jen jeden element base, pokud je vůbec definován. A dále se zde může objevit libovolný počet ostatních elementů záhlaví head, a to v jakémkoli pořadí. 3. XHTML XHMTL existuje celkem ve třech verzích - 1.0 a 1.1. XHTML verze 1.0 je méně striktní a je tudíž více podobný jazyku HTML verze 4.01. Dále budu při používání termínu XHTML mít na mysli vždy XHTML verze 1.0. (pokud neuvedu jinak). 21 Petr Borák Metodika tvorby stránek pomocí techonologie XHTML/CSS O verzi XHTML 1.1. a jejích charakteristických rysech se zmíním o něco později. Existuje ještě verze jazyka XHTML 2.0., ale tou se zabývat nebudu vůbec. 3. 1. DTD pro XHTML Pro XHTML existují celkem tři DTD. Každá z těchto tří verzí koresponduje s jednou verzí DTD pro HTML 4.01. Technicky tvoří stěžejní rozdíl mezi nimi právě fakt, že HTML je postaven na SGML. První verze DTD pro XHTML nese název „strict“ a je opravdu striktní.. Není v ní možno používat spoustu tagů, na které jsme z běžného HTML zvyklí, nicméně které mají spíše charakter formátovací, než obsahový. Většina takových tagů (mezi nimi například tag nebo různé atributy tabulek) není podporována a jejich funkce jsou nahrazeny využitím kaskádových stylů. Druhá verze DTD pro XHTML nese název „transitional“ a je více benevolentní vůči „nevítaným“ tagům. Tyto tagy jsou stále podporovány většinou prohlížečů a tak se dá říct, že transitional XHTML je více realistická odnož idealistické strict verze. Třetí verze má zcela stejné vlastnosti jako verze „transitional“. Navíc ale povoluje použití rámců. 3. 2. Tvorba minimálního XHTML dokumentu Aby prohlížeče mohli správně interpretovat náš budoucí dokument, je třeba jim nejprve oznámit, ve které verzi jazyka XML je definováno DTD. Toto oznámení tvoří první řádek dokumentu XHTML.(10) <?xml version=”1.0” encoding=”UTF-8”?> Oznámíme tak prohlížeči, že DTD je definováno pomocí XML verze 1.0. a používáme znakovou sadu Unicode. 22 Petr Borák Metodika tvorby stránek pomocí techonologie XHTML/CSS Nyní, protože budeme pro tvorbu stránky využívat značkovací jazyk vytvořený v XML, vložíme do prologu dokumentu externí deklaraci typu dokumentu typu PUBLIC. Zde je ukázka všech třech dříve zmíněných typů deklarací: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www. w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> Po deklaraci typu dokumentu se dostáváme k samotnému XHTML, který, jak lze vyčíst výše z DTD, začíná kořenovým elementem (elementy v XHTML se nazývají tagy) <html>. Základní kostra XHTML dokumentu vypadá následovně: <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www. w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> <html xmlns=”http://www.w3.org/TR/xhtml1” xml:lang=”en” lang=”en”> <head> <title> Tag title je povinný ... zde svaly dokumentu ...

Ještě se pozastavím nad atributy tagu . Atribut xmlns určuje hlavní jazykový prostor dokumentu. XML nám umožňuje používat v dokumentu více jazykových prostorů současně. Hlavní jazykový prostor definujeme tedy právě pomocí atributu xmlns, jehož hodnotou je cesta k definici jazykového prostoru. Pokud je potřeba použít pro některou část dokumentu jiný jazykový prostor, než

23

Petr Borák


ten, který je nadefinován jako hlavní, můžeme tento prostor přiřadit tagu, který ji v dokumentu obklopuje:
matematický vzorec

Tato metoda by už na první pohled byla při výskytu většího množství elementů velmi zdlouhavá. XHTML nám tedy umožňuje nadefinovat atribut v rámci tagu , který bude fungovat jako zástupce jazykového prostoru uvnitř dokumentu XHTML.

xmlns:JJP=”http://www.

Zde je pomocí atributů tagu na prvním řádku označen hlavní jazykový prostor dokumentu. Na druhém řádku se pak do proměnné s názvem JJP ukládá jiný jazykový prostor, který bude možné použít jako atribut kdekoli uvnitř dokumentu XHTML. Nyní má zápis matematický vzorec

CSS

Recommend Documents