Obsah
rodina současných a budoucích typů dokumentů, které reprodukují a rozšiřují HTML 4.
Tyto typy dokumentů jsou založeny na XML a jsou navrženy tak, aby byly zpracovatelné pomocí uživatelských agentů (prohlížečů, ...) založených na XML.
XHTML 1.0 je přeformulováním tří HTML4 typů dokumentů jako aplikací standardu XML 1.0.
XHTML dokumenty splňují standard XML..
Měly by být zpracovatelné stejně dobře, pokud ne lépe v existujících uživatelských agentech podporujících HTML 4 i XHTML 1.0.
Při dodržení jednoduchých doporučení je zpracovatelný i pomocí uživatelských agentů podporujících HTML 4.0
splňovat jedno ze tří DTD.
Kořenový element musí být element html.
Kořenový elementu musí:
obsahovat deklaraci jmenného prostoru.
Jmenný prostor musí být http://www.w3.org/1999/xhtml.
Kořenovému elementu musí předcházet deklarace typu dokumentu.
Ukázka kořenového elementu:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
XHTML Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Striktně odděluje strukturní značkování od vzhledu dokumentu.
vzhled je nutno řešit pomocí CSS
nedefinuje vizuální značky a atributy (např. <b/>, ...)
XHTML Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Umožňuje kombinovat strukturní a vizuální značkování
XHTML Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Určeno k vytváření stránek pomocí rámců
XHTML podporuje jmenné prostory
Jmenný prostor pro XHTML:
http://www.w3.org/1999/xhtml
Ukázka XHTML 1.0 dokumentu
<?xml version="1.0" encoding="UTF-8"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Naše první XHTML 1.0 Stránka</title> </head> <body> <h1>První odstavec</h1> <p> Kdo najde aspoň 5 rozdílů oproti HTML 4? </p> </body> </html>
Pomocí jmenných prostorů lze XHTML kombinovat s jinými druhy značkování
RDF - doplnění sémantiky.
SVG - vkládání grafiky
chybí podpora v prohlížečích
jednodušší vkládání pomocí elementu img
Voice + XHTML profile - možnost vyplňování formulářů pomocí hlasu
nutnost nainstalovat rozšíření
funkční pouze v některých prohlížečích
lze použít pouze v některých jazycích
Vkládání jiných značkování do XHTML
<?xml version="1.0" encoding="utf-8">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Kombinování MathML a XHTML</title>
</head>
<body>
<p>Následuje ukázka v MathML</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply> <log/>
<logbase>
<cn> 3</cn>
</logbase>
<ci> x </ci>
</apply>
</math>
</body>
</html>
Documenty musí být správně utvořené:
ačkoliv například křížení elementů je v SGML zakázáno, tak je v prohlížečích často tolerováno.
<p>Ukázka <em>křížení elementů.</p></em>
Elementy a jména atributů musí být malými písmeny.
XML je case-sensitive takže, <p> a <P> jsou různé značky.
Neprázdné elementy musí mít koncovou značku.
Hodnoty atributů musí být uzavřeny v úvozovkách nebo apostrofech.
XML (XHTML) nepodporuje minimalizaci atributů:
<dl compact="compact"> vs. <dl compact>
Prázdné elementy musí být ukončeny:
nelze např. použít <br>, musí se zapisovat <br/>
Zpracování bílých znaků v atributech:
odstraňují se bílé znaky na začátku a konci hodnoty atributu
sekvence bílých znaků se převádí na jednu mezislovní mezeru.
Skripty a elementy se specifikací stylu
musí být označena jako CDATA sekce:
<script type="text/javascript> <![CDATA[ ... vlastní kód v javascriptu ... ]]> </script>
SGML vyloučení
SGML narozdíl od XML umožňuje v DTD zakázat určitý druh obsahu elementu
např. vnořené odkazy (elementy <a>)
Elementy s atributy id a name
HTML 4 umožňovalo u některých elementů použít jako identifikátory fragmentů jak atribut name, tak id (a, applet, form, ...)
XHTML dokumenty musí používat atribut id.
Atributy s předdefinovanými hodnotami
XHTML je case sensitive, takže např. hodnoty TEXT a text jsou různé (element input).
Odkazování entit pomocí hexadecimálních hodnot:
HTML umožňovalo oba zápisy &#xnn; i &#Xnn; v XHTML musí být &#xnn;
Podrobnosti viz specifikace
Může být vhodné udržovat zpětnou kompatibilitu s HTML 4
Ne všechny prohlížeče korektně zpracovávají XHTML.
Je možné použít typ obsahu text/html místo application/xml+html, pokud se dodrží následující doporučení.
Sada doporučení pro zpětnou kompatibilitu:
Pozor na to, že instrukce pro zpracování mohlou být některými prohlížeči zobrazeny.:
Vkládejte mezeru před / a >
<br />, <hr />, <img src="..." /
Nepoužívejte minimalizovanou formu elementů:
místo <p /> používejte <p> ... </p>
...
Vyvarujte se konců řádků v hodnotách atributů.
Používejte oba atributy lang a xml:lang pro specifikaci jazyku elementu.
Pozor na identifikátory fragmentů.
Specifikace kódování
používejte také element meta
Boolovské atributy
některé prohlížeče nejsou schopny zpracovat plnou formu boolovských atributů.
Další viz specifikace.
Stále se jedná o draft - nejedná se o standard (doporučení - recomendation).
stále se vyvíjí, může ještě doznat určité změny
otevřená témata:
de facto semantická definice některých elementů, určených původně k prezentaci
detaily přístupnosti a nezávislosti na médiích jako jsou atributy alt a summary.
Definuje jazyk HTML 5, který může být aplikací SGML (HTML) i aplikací XML (XHTML).
obě syntaxe jsou přípustné.
Definuje detailní model zpracování podporující interoperabilní implementace.
Vylepšuje značkování dokumentů.
Uvádí značkování a API pro např. Webové aplikace.
Cíle:
HTML 4 a starší - příliš volná struktura
XHTML 1.x - příliš pevná struktura
Vytvořit standard, který bude využívat to dobré z obou specifikací.
HTML
zpětně kompatibilní s HTML 4 a XHTML 1
není plně kompatibilní s SGML specifikací HTML 4:
nepodporuje instrukce pro zpracování
a zkrácený zápis značek
prázdnou počáteční značku (<>)
prázdnou koncovou značku (</>)
...
mimetype text/html
HTML sandboxed
Syntaxe je shodná se syntaxí HTML.
Vhodné pro použití se stránkami z nedůvěryhodných zdrojů.
mimetype text/html-sandboxed
XML
kompatibilní s XHTML 1
nutno definovat jmenný prostor http://www.w3.org/1999/xhtml
mimetype application/xhtml+xml nebo application/xml
Slouží pouze k tomu, aby prohlížeče správně zvolili způsob zobrazování stránky.
Nemá žádný jiný účel.
Pro XML syntaxi je volitelná.
DOCTYPE:
<!DOCTYPE html>
Při použití HTML syntaxe není case-sensitive.
Jelikož se používá pouze pro zvolení správného režimu zobrazení prohlížeče, neobsahuje odkazy na DTD.
Přidána řada nových elementů
popis struktury
section, article, aside, header, footer, figure, ...
<figure> <video src="sample.mp4"></video> <figcaption>Ukázkové video</figcaption> </figure>
multimédia
video, audio.
nové typy vstupů ve formulářích (hodnoty atributu type u elementu input)
vynechány některé elementy (frame, frameset, noframes, ...)
vynechány některé atributy
více viz specifikace a popis rozdílů oproti HTML4
Přidány nové atributy:
media u elementu a a area
globální atribut contenteditable
draggable
změna hodnot atributy type u elementu input
...
Vynechány některé elementy
frame, frameset, noframes - nelze používat rámce pro zobrazení stránek - snižují přístupnost.
font
applet
.
Vynechány některé atributy
rev, charset (link, a)
longdesc (img, iframe)
target (link)
align
background
bgcolor
Specifikace HTML5
Rozdíly mezi XHTML 1.0, HTML 4 a HTML5
Stránky věnované HTML5
HTML 5 tag reference na w3schools
Prezentace z brněnského setkání GUG vytvořená pomocí HTML5 - plně funkční v Google Chrome a Safari, projít si ji je možné v Opeře.
...
jazyk pro popis prezentace XML/SGML dat.
Umožňuje:
nastavení vzhledu stránky (barvy, fonty, rozložení částí textu, zarovnání, okraje, ...)
oddělit obsah od vzhledu
přizpůsobení vzhledu různým zařízením (klasický počítač, mobilní prohlížeč, tiskárny, ...)
změnu vzhledu stránky/prezentace pouhou změnou stylu bez nutnosti modifikace dat v prezentaci.
W3C standard
Aktuální verze 2.0 - ve stádiu draftu verze 2.1.
pracuje se na verzi 3.0 - ve stádiu working draft.
Nemá XML syntaxi
skládá se z deklarací stylů pro:
daný typ elementu - pro daný element
danou třídu elementu - pro daný element s odpovídající hodnotou atributu class
jeden daný element - pro daný element s odpovídající hodnotou atributu id
Formát deklarace:
selector {
deklarace stylu;
}
Selector
daný typ elementu - <název elementu>
h1{
deklarace stylu;
}
Selector
daná třída elementu - <název_element>.<třída_elementu>
h1.menu{
deklarace stylu;
}
<h1 class="menu">Nadpis pro menu</h1>
element s daným id - [<název_elementu>]#<id_elementu>
div#menu{
deklarace stylu;
}
resp.
#menu{
deklarace stylu;
}
<div id="menu"> obsah elementu </div>
deklarace stylu - <název atributu>: <hodnota>;
h1{
backgound:blue;
}
stylování
pozadí - background-color, background-image, ...
text - color, text-align, text-shadow, ...
písmo - font-family, font-style, font-size, ...
odkazy - a:link, a:visited, a:hover, a:active
seznamy - list-style-type, list-style-image, list-style-position, list-style-type
okraje
border-style
border-width
border-color
lze nastavovat i jednotlivé okraje (left, top, right, bottom)
margin
padding
pozicování.
...
Specifikace CSS level 2
Learning CSS na W3C
Tutorial na W3Schools
Možnost používat služby pro libovolného člověka s přístupem k Internetu resp. příslušnému intranetu.
Možná omezení uživatelů při komunikaci s počítačem:
zdravotní postižení
pohybový aparát - zejména ruce a horní polovina těla
zrak
sluch
věk
snížená kvalita zraku
zhoršená motorika
schopnost porozumět uživatelskému rozhraní
některá duševní postižení
Pro nás - návrh rozhraní tak, aby neomezovalo pokud možno žádnou z uvedených skupin.
Požadavek na přístupnost některých portálů je dán i legislativně
EU - směrnice z 13.9. 2005 - eAccessibility
Podobný zákon existuje i v USA (Americans with Disabilities Act).
Související standardy:
Poskytnout textovou alternativu pro netextová média (obrázky videa, ...)
Poskytnout alternativu ke zvukovým a obrazovým záznamům.
Vytvářet obsah prezentovatelný různými způsoby.
Usnadněte uživatelům poslech a prohlížení obsahu dostatečným oddělením popředí od pozadí.
Zpřístupněte veškerou funkcionalitu pomocí klávesnice.
Poskytněte uživateli dostatek času k přečtení obsahu.
Vyvarujte se takového návrhu vzhledu, který by mohl způsobit různé záchvaty.
Poskytněte uživateli pohodlnou a snadnou navigaci v obsahu a snadné zjištění pozice.
Vytvářejte čitelný a srozumitelný obsah.
Vytvářejte stránky tak, aby se zobrazovaly a chovaly předvídatelným způsobem.
Pomozte uživatelům se vyvarovat a opravit případné chyby.
Maximalizujte kompatibilitu se současnými i budoucími uživatelskými agenty včetně podpůrných technologií.
Definuje způsob jak učinit Web a webové aplikace přístupnější
např. zpřístupnění aplikací založených na technologii AJAX.
Standard W3C
Více viz W3C