Základy HTML a XHTML

Co budeme potřebovat?

Potřebovat budeme pouze editor a internetový prohlížeč.

Editory

XHTML dokument je obyčejný textový dokument, obsahující kromě vlastního textu značky, které textu přiřazují určitý význam. K psaní WWW-stránek tedy není třeba žádný speciální software, může postačit obyčejný textový editor, např. Poznámkový blok (Notepad). Samozřejmě ale pro vytváření webových stránek existuje nepřeberné množství editorů. V zásadě je můžeme rozdělit na strukturní a WYSIWYG editory.

Strukturní editory

Strukturní editory jsou takové editory, ve kterých pracujete přímo se zdrojovým kódem dokumentu, je proto nutné znát HTML. Průběžný vzhled si zde samozřejmě můžete kdykoli zkontrolovat jednoduchým přepnutím do prohlížeče. Jsou to např. PsPad, HTML-Kit, Vim, Emacs, 1stPage, Golden HTML Editor nebo HomeSite. Pro uživatele Linuxu pak například Quanta. Tyto editory práci usnadňují jednak vizuálním odlišením vlastního textu od HTML kódu, jednak tím, že umožňují jednotlivé tagy snadno zadávat a množstvím dalších práci zlehčujích funkcí.

WYSIWYG editory

Ve WYSIWYG editoru již nepracujete s kódem, ale se vzhledem stránky. Práce s nimi je možná pohodlnější, ale výsledný kód býva obvykle poněkud zmatečný, troufám si tvrdit, že vytvořit validní XHTML dokument tyto editory schopné nejsou. Jistě ale mohou být užitečnou pomůckou.

Prohlížeče

Abyste si mohli stránky zobrazit, potřebujete internetový prohlížeč. Je nutné si uvědomit, že každý prohlížeč bohužel interpretuje kód trochu jinak a tudíž se v různých prohlížečích může vaše stránka zobrazit odlišně (no ne může, ono se to u ne úplně jednoduché stránky stane, tak to prostě je). Nejsprávněji podle standardů stránku zobrazí Mozilla. Nejrozšířenějším prohlížečem je Internet Explorer (cca 90% uživatelů), proto je více než vhodné si v něm stránky alespoň zkontrolovat a pokusit se odstranit alespoň základní nedostatky (leckdy i za cenu nedokonalého vzhledu v ostatních prohlížečích, přecijen většina je většina, ale to už je na vás…). Dalšími rozšířenějšími prohlížeči, ve kterých by vaše stránka měla „nějak vypadat” jsou Opera a Netscape.

A dále…

Dále se neobejdeme bez základní znalosti práce na PC, notné dávky trpělivosti a chuti pořád něco zkoušet.

Ú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!

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ů.