odkazy

XHTML

XHTML je nástupce HTML založený na XML. Rozlišujeme 3 druhy XHTML:

XHTML 1.0 Strict
čistě strukturální značkování, neobsahuje žádné značky spojené s formátováním vzhledu
XHTML 1.0 Transitional
povoluje atributy pro formátování textu a odkazů v elementu body a některé další atributy
XHTML 1.0 Frameset
používa se při použití rámců pro rozdělení okna prohlížeče na dvě nebo více částí

Pozn.: V této příručce se budeme věnovat především XHTML 1.0 Strict, okrajově i XHTML 1.0 Transitional. XHTML 1.0 Frameset nikoli, protože rámce jsou podle mne webu škodlivé.

Pravidla XHTML

Před samotným dokumentem se nachází deklarace XML.

<?xml version="1.0" encoding="iso-8859-2"?>

Pozn.: Kódování použijte samozřejmě dle libosti.
Povinná je deklarace typu dokumentu (DTD)

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Kořenový element html obsahuje atribut xmlns, který určuje jmenný prostor dokumentu (namespace) a jazyk, který je v dokumentu použit.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
Element html vždy obsahuje dva elementy, head (hlavičku) a body (tělo dokumentu). Hlavička musí obsahovat element title a měla by obsahovat i metatag pro kódování (kvůli starším prohlížečům).
Všechny tagy i atributy musí být malými písmeny, XHTML je case-sensitive.
Všechny hodnoty atributů musí být v XHTML v uvozovkách.
Všechny XHTML tagy musí být párové. Při použití prázdného tagu se musí tag ukončit lomítkem, např. <img />
Tagy se nesmí nikdy křížit.
Striktní XHTML neobsahuje žádné atributy sloužící k formátování. Oproti HTML jsou z XHTML vypuštěny formátovací tagy (jako např. font, b, i).
Vkládané skripty na straně klienta (např. javascript) by měly být vloženy do sekce CDATA. Starší prohlížeče ale CDATA nepodporují.

<script><![CDATA[ zde bude kód skriptu ]]></script>
Znak & musí být převeden na html entitu i pokud je součástí URL.

Úvod do XHTML

V HTML se používají speciální značky – tagy. Tagy jsou tvořeny znaky „<” a „>” mezi nimiž je název tagu (takto: <tag>). Vše ostatní, co není mezi těmito znaky, se zobrazuje jako výsledný text na stránce. Tagy pak určují, jaký má text význam (např. jestli se jedná o nadpis, tabulku, či hypertextový odkaz).

V XHTML jsou všechny tagy párové, to znamená, že ke každému počátečnímu tagu musí existovat tag ukončovací, ten se liší od počátečního tím, že před názvem tagu obsahuje lomítko („/”). Celé to pak vypadá takto:

<tag>Text zobrazovaný na stránce.</tag>

Pokud použijeme tag, který neobsahuje žádný text, který by bylo nutno obklopit počátečním a koncovým tagem (týká se to např. tagu img u obrázku), použijeme zápis: <tag />

Jeden tag může být uvnitř druhého tagu, ale tagy se nikdy nesmí křížit!

špatně <tag1>Text <tag2>zobrazovaný</tag1> na stránce.</tag2>

dobře <tag1>Text <tag2>zobrazovaný</tag2> na stránce.</tag1>

Všechny tagy píšeme malým písmenem, XHTML je case-sensitive, tzn. že <TAG> vlastně vůbec nezná.

Pozn.: „tag” není názvem žádného tagu.

Elementy

Elementem nazýváme celou sekvenci počínaje počátečním tagem a konče tagem ukončovacím. Existují tři základní druhy elementů, blokové, inline a nahrazované. Podle významu, který textu přiřazují je můžeme rozdělit ještě na elementy pro strukturování dokumentu, textové elementy, elementy pro tvorbu odkazů, elementy pro tvorbu tabulek elementy pro tvorbu seznamů a podobně.

Blokové elementy

Jsou to elementy, které tvoří nějaký blok. Zjednodušeně to znamená, že po takovém elementu je text dokumentu zalomen, odřádkován. Blokovými elementy jsou například h1 pro nadpis nebo p pro odstavec.

Inline elementy

Inline elementy jsou ty, které se nachází uvnitř textu, nedochází po nich k zalomení. Obvykle plní funkci zvýraznění nějaké části textu. Je to například a pro hypertextový odkaz.

Nahrazované elementy

Ty jsou nahrazeny nějakým obsahem, pro začlenění dokumentu jsou důležité jejich rozměry. Například img pro obrázek.

Atributy

Elementy mohou mít své atributy. Ty jsou přiřazením nějaké vlastnosti danému elementu. Atributy se píší do počátečního tagu, může jich být více (oddělují se mezerou), nemusí být žádný. Každý atribut má svou hodnutu. Hodnota atributu musí být v XHTML zapsána v uvozovkách.

<element atribut="hodnota _atributu">Text zobrazovaný na stránce.</element>

Pozn.: Hodnotu atributu můžeme zapsat i do apostrofů.

Kostra stránky

Tak takto by měla vypadat kostra stránky. Soubor uložíme s PHPpříponou htm nebo html. Teď něco k PHPpoužitým tagům.

html: označuje, že se bude jednat o HTML dokument, obsahuje head a body
head: hlavička, obsahuje title, metatagy (např. kódování), odkazy na externí dokumenty definice stylu, skripty, apod.
title: titulek stránky, to co se objeví jako název okna
body: tělo dokumentu, tady se bude nacházet celý obsah stránky
p: označení odstavce

Nadpisy

Existuje 6 úrovní nadpisů, označují se tagy h1, h2, h3, h4, h5 a h6, kde 1 je úroveň nejvyšší. Úrovně se liší velikostí písma, všechny nadpisy jsou implicitně zarovnávány vlevo.

<h1>Nadpis 1. až 6. úrovně</h1>

Nadpis 1. úrovně

Nadpis 2. úrovně

Nadpis 3. úrovně

Nadpis 4. úrovně

Nadpis 5. úrovně

Nadpis 6. úrovně

Odkazy

Odkazy jsou základem hypertextovosti Internetu. Bez odkazů by se uživatel nikam nedostal. V textu jsou odkazy vizuálně odlišeny, standardně je to barevným odlišením a podtržením. Při přejetí myši přes odkaz se mění kurzor (obvykle ze šipky na tlapičku), kliknutím je odkaz aktivován a dochází k přesměrování.

Pro odkaz se používá element a. Jeho atributem je href. Ten udává, kde je umístěn cílový dokument (tedy na kterou stránku odkaz směřuje). Samotné umístění pak zadáváme absolutní nebo relativní cestou.

Odkaz na jinou stránku

Absolutní odkaz

Absolutní odkaz se používá pro odkázání na dokument umístěný na jiném serveru, např. jako odkaz na jinou stránku. Odkaz na jinou stránku musí vždy obsahovat http://.

<a href="http://www.comport.cz">Comport.cz</a>

Hodnotou atributu href je tedy adresa cílového dokumentu (v tomto případě http://www.webtvorba.cz). Zobrazovaný a klikatelný text bude WEBtvorba.cz.

Relativní odkaz

Relativní odkaz použijeme, pokud odkazujeme v rámci stránky. Při použití relativního odkazu prohlížeč sám doplňuje URL stránky, z které je odkazováno. Pokud tedy odkazujeme na dokument nacházející se ve stejném adresáři, stačí napsat jen jméno souboru.

Pokud se dokument nachází v jiném adresáři, musíme do URL zahrnout celou cestu od místa, kde se cesty k odkazovanému a odkazujícímu dokumentu začaly odlišovat.

<a href="fotky/zvirata/zirafy.htm">fotky žiraf</a>

Pokud se budeme chtít dostat v adresářové struktuře o úroveň výš, použijeme k tomu dvou teček, tj. ... Pokud bychom tedy chtěli ze stránky zirafy.htm (viz. výše) odkázat na stránku fialky.htm, která je uložená v adresáři rostliny a ten se nachází v adresáři fotky (tj. na stejné vyšší úrovni jako adresář zvirata, použijeme zápis:

<a href="../rostliny/fialky.htm">fotky fialek</a>

Odkaz na konkrétní místo dokumentu

Někdy je dobré odkazovat i na části stránky, to se hodí jednak pokud je stránka delší — pak v úvodu použijeme odkazy na její jednotlivé častí a dále pokud z jiné stránky potřebujeme použít odkaz na přesně určenou část stránky (aby uživatel nemusel hledat). Pro označení místa, na které chceme odkázat použijeme atruibut id, v odkazu potom použijeme jako vždy atribut href, který ale bude tentokrát začínat hash-markem #. Často se toto používá také při odkazování na začátek stránky.

<a href="#zacatek">zpět na začátek</a>

Stejným způsobem pak odkazujeme i z jiné stránky, jen musíme přidat klasickám způsobem odkaz na celý dokumet a za něj odkaz na konkrétní místo.

<a href="svetadily.htm#evropa">Evropa</a>

Takový odkaz můžeme dát někam nakonec stránky, po kliknutí prohlížeč sám „odroluje” tak, že se element odznačený příslušným názvem dostane do horní části okna prohlížeče.

Pozn.: Odkazovaná část dokumentu se do horní části okna pochopitelně nedostane v případě, že pokračování stránky není dostatečně dlouhé k zaplnění celého okna prohlížeče (bude pak někde uvnitř okna…).

Část dokumentu, na kterou takto odkazujeme označíme takto (v našem případě budeme odkazovat na hlavní nadpis stránky):

<h1 id="zacatek">Hlavní nadpis stránky</h1>

Otevření odkazu v novém okně

K otevření odkazu v novém okně slouží atribut target s hodnotou _blank. V novém okně se obvykle otvírají odkazy, které směřují na „cizí stránky”. Otevírat v novém okně odkazy na vlastní stránky (tím myslím například otevírání položek menu v novém okně) je naprostý nesmysl. Vlastně samotné otevírání odkazů v novém okně si myslím, že je nesmysl, uživatel je snad natolik inteligentní, aby se sám rozhodl, jestli si otevře odkaz v novém nebo ve stejném okně. Bohužel jakmile určíme otevření v novém okně uživatel již tuto možnost volby nemá, což si myslím není dobré.

<a href="http://www.comport.cz" target="_blank">Comport.cz</a>

Pozn.: Atribut target není povolen v XHTML 1.0 Strict, v Transitional ano.

Titulek odkazu

Každý odkaz by měl mít svůj titulek. Tím je text, který uživateli přiblíží, kam vlastně odkaz směřuje. Titulek se zobrazí při najetí kursoru myši na odkaz. Titulky odkazů jsou důležité také např. pro čtecí zařízení, umožňují lepší orientaci na webu.

<a href="http://www.comport.cz" title="Úvodní stránka tohoto webu (Comport.cz)">WEBtvorba.cz</a>

Vypadat to bude takto: Comport.cz

Seznamy

Neuspořádaný seznam

Neuspořádaný neboli nečíslovaný seznam se značí tagem ul (unordered list). Položka seznamu je li (list item). Položka může obsahovat i více odstavců. Před každou položkou se standardně vytváří odrážka.

<ul> <li>žirafa</li> <li>slon</li> <li>velbloud</li> </ul>

Uspořádaný seznam

Uspořádaný neboli číslovaný seznam se značí tagem ol (ordered list). Položka seznamu je opět li. Před položku se automaticky vypisuje její pořadové číslo.

<ol> <li>žirafa</li> <li>slon</li> <li>velbloud</li> </ol>

Seznam definic

Definiční seznam se používá obvykle v případě, kdy potřebujeme např. vypsat nějaké termíny a k nim jejich definice nebo popisy. Je pro něj tag dl (definition list). Definovaný termín se označuje tagem dt (term), definice termínu tagem dd (definition).

<dl> <dt>žirafa</dt> <dd>zvíře s dlouhým krkem</dd> <dt>slon</dt> <dd>zvíře s chobotem</dd> <dt>velbloud</dt> <dd>zvíře s jedním nebo dvěma hrby</dd> </dl>

Tabulka

Tabulka se vytváří pomocí elementu table. Pro řádek tabulky slouží tag tr (table row), pro buňky tabulky tagy th (table head; pro buňky v záhlaví tabulky) a td (table data). Buňky se vkládají uvnitř řádku tabulky, kolik buněk, tolik bude mít tabulka sloupců. Buňky záhlaví jsou standardně formátovány tučným písmem, zarovnány na střed.

V tabulce se používá atribut summary, který shrnuje obsah tabulky. Slouží pro lepší přístupnost webu.

Nadpis tabulky

Pro nadpis tabulky se používá element caption. Ten by měl být uveden uvnitř tagu table ještě před prvním řádkem.

<table> <caption>Nadpis tabulky</caption> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>aaa</td> <td>bbb</td> </tr> <tr> <td>ccc</td> <td>ddd</td> </tr> </table>

Slučování buněk

Atribut colspan sloučí dohromady několik buněk v jednom řádku. Atribut rowspan sloučí buňky ve sloupci. Jako hodnotu těchto atributů zapisujeme počet buněk, které chceme takto sloučit.

<table> <caption>Nadpis tabulky</caption> <tr> <th colspan="2">1</th> </tr> <tr> <td rowspan="2">aaa</td> <td>bbb</td> </tr> <tr> <td>ccc</td> </tr> </table>

A to je vpodstatě to nejdůležitější, co je k vytvoření tabulky potřeba, bez těch pár dalších věcí se dá bez problému obejít, ale snad o nich ještě někdy napíšu.

Obrázek

Pro vložení obrázku slouží nepárový element img. Povinnými atributy jsou src, jehož hodnotou je název obrázku, případně i s cestou a alt obsahující alternativní text, který se zobrazí, pokud je obrázek prohlížeči nedostupný, buď proto, že se na zadané adrese nenachází nebo proto, že prohlížeč obrázky nezobrazuje. Alternativní text by měl tedy nějakým způsobem příblížit co je na obrázku těm, kteří jej nevidí.

Obrázky na webu bychom měli na webu používat opatrně. Kromě výběru vhodných obrázků je třeba dbát na jejich datovou velikost, zdaleka ne každý si může dovolit prohlížet stránky, jejichž velikost se dá počítat v megabytech. Obrázky, které nemají jinou funkcni než „zlepšení designu“ stránky by měli být vkládány pouze pomocí CSS stylu a to jako obrázek na pozadí

Velikost obrázku

Velikost obrázku není povinné zadávat, přesto je velkou chybou toto opomenout. Pokud totiž velikost obrázku nezadáte, prohlížeč si na jeho zobrazení nevyhraní dostatečny prostor a jelikož okolní text se samozřejmě načte dřív než obrázek (protože je co se týče velikosti dat menší), způsobí to jakési „poskakování” stránky ve chvíli, kdy se začínají načítat obrázky, které potřebují více prostoru než mají a okolní text jim vlastně musí uhýbat.

Stejně tak je vhodné zadávat obrázku jeho skutečnou velikost, nezmenšovat ani nezvětšovat pomocí prohlížeče, ale pomocí grafického editoru. Pokud totiž obrázek o velikosti např. 100×100 pixelů zmenšíme v prohlížeči na 50×50, docílíme tak sice požadované velikosti, ale uživatel bude zbytečně stahovat více dat, protože bude stahovat samozřejmě obrázek v původní velikosti.

Pro určení velikosti obrázku se používají atributy width (šířka) a height (výška) nebo stejnojmenné vlastnosti v CSS.

Obrázková mapa

Obrázkové mapy využijeme například pro různé navigační lišty. Je to obrázek, jehož jednotlivé části mají sloužit jako odkazy na různá místa. Mapa se vytváří pomocí elementu map. Jeho povinným atributem je id, což je atribut sloužící jako identifikátor této mapy. Jeho hodnotou je tedy nějaký textový řetězec, s kterým se později bude obrázek této mapy dovolávat.

Element map obsahuje libovolný počet (nejméně jeden) elementů area, které vymezují prostor z obrázku, který bude odkazem a určují kam bude odkazovat. Tvar hranice aktivní oblasti (tj. místo, na které budeme moci kliknout a odkázat se na daný dokument) určuje atribut shape. Jeho hodnotou je buď rect (obdélník), poly (mnohoúhelník) nebo circle (kruh).

Konkrétní vymezení oblasti je dáno v atributu coords. Jeho hodnotou jsou čísla oddělená čárkou, která definují vrcholy n-úhelníku. V případě obdélníku je to v pořadí: souřadnice x levého horního rohu, souřadnice y levého horního rohu, souřadnice x pravého dolního rohu, souřadnice y pravého dolního rohu. Obdobně po sobě budou následovat všechny vrcholy mnohoúhelníku. V případě kružnice jsou zadávána čísla v pořadí: souřadnice x středu, souřadnice y středu, poloměr kružnice.

Pozn.: Počátek soustavy souřadnic je v levém horním rohu, tedy levý horní roh má souřadnice [0,0]. Souřadnice x roste ve směru zleva doprava, souřadnice y ve směru shora dolů.

Povinným atributem u area je alt a neméně důležitým href, který určuje cíl odkazu. Takto můžeme tedy rozdělit obrázek na několik aktivních oblastí. Mapa je již vytvořená, stačí jen říct obrázku, aby ji použil. Toho docílíme pomoci atributu usemap (atribut tagu img). Jeho hodnotou bude tentýž řetězec, jaký jsme použili v tagu map u atributu id. A teď už jen zbývá si to všechno sepsat na konkrétním příkladě:

Pozn.: Atribut name je použit kvůli nové verzi Firefoxu, který zřejmě chybně zpracovává id.

Každá ze tří částí obrázku skutečně odkazuje jinam.

Nahoru ↑