Základy HTML/XHTML

Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné

Anatomie dokumentu HTML

Dokument HTML - vnější podoba a vnitřní struktura

Ač je základní dokument v ASCI stále stejný, v prohlížečích se může zobrazit pokaždé jinak. Proto je dobré si vždy vyzkoušet, jak dokement vypadá ve více prohlížečích - MS Explorer, Netscape Navigator, Mozilla, Opera apod.

Vniřní struktura dokumentu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <title>titulek</title> <meta name="description" content="popis stránek"> <meta name="keywords" content="klíčová slova"> <meta name="author" content="jméno autora"> </head> <body> obsah dokumentu </body> </html>

Při zápisu kódu a textu, je dobré dokument strukturovat. To je, psát některé části vždy na nový řádek, odsazovat a tím vyjadřovat úroveň vnoření. Popřípadě i oddělovat prázdným řádkem.

Značky a atributy

Značka, element označení v dokumentu = tag. Je vždy uzavřena závorkami < a > např. <head> , . Podle standardu HTML nezáleží na velikosti písma <head> ,<HEAD> ,<Head> ,<HeaD> , ale je dobré je psát vždy malím písmem, vzhledem k přechodu na XHTML.

Tag (Značka) může dále obsahovat atributy, které definují jak se má tag (značka) chovat. Hodnota atributu se zapisuje za jméno atributu a oděluje se znaménkem rovnáse (=). Doporučuji z důvodu čitelnosti neoddělovat mezerami. Hodnotu je dobré psát do uvozovek (").

Příklad

Jak jsem říkal. Většina tagů (značek) má svůj koncový tvar, kde se píše před tag lomítko "/" </název_tagu> např. </head> , .

Tagy (značky) se mohou navzájem vnořovat, ale nesmí dojít ke křížení.

SPRÁVNĚ Nějaký text je tučný a zároveň v kurzívě ŠPATNĚ Nějaký text je tučný a zároveň v kurzívě

Tagy (značky) bez ukončení

<area> <base> <basefont> <col> <frame> <hr> <img> <input> isindex> <link> <meta> <param>

Většina prohlížečů umožňuje vynechat některé ukončovací tagy (např. , <td> apod.). Dále pokud narazí na nějaký tag, který nezná, tak jej ignoruje. Ignoruje také redundantní tagy.

Správnost zapsaní dokumentu HTML je možné si nechat zkontrolovat na adrese http://www.htmlhelp.com/tools/validator/

Elementy dokumentu HTML

Dokument musí vyhovovat definici HTML SGML DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Tag HTML

<html> záhlaví dokumentu a obsah těla </html> * tag se všemi použitelnými atributy <html dir="ltr" lang="cs" version="-//W3C//DTD HTML 4.01 Transitional//EN"> * směr zobrazení textu dir="ltr" - zleva doprava (implicitně) dir="rtl" - zprava doleva * kód jazyka použitého ve stránce lang="cs" * verze standardu HTML version="-//W3C//DTD HTML 4.01 Transitional//EN"

Záhlaví dokumentu

Většina dat zapsaných v záhlaví se uživateli nezobrazuje. Slouží k popisu vlastností dokumentu.

Tag HEAD

<head> záhlaví dokumentu </head> * tag se všemi použitelnými atributy <head dir="ltr" lang="cs"> * směr zobrazení textu dir="ltr" - zleva doprava (implicitně) dir="rtl" - zprava doleva * kód jazyka použitého ve stránce lang="cs"

Tag TITLE

<title> titul dokumentu </title> * tag se všemi použitelnými atributy <title dir="ltr" lang="cs"> * směr zobrazení textu dir="ltr" - zleva doprava (implicitně) dir="rtl" - zprava doleva * kód jazyka použitého ve stránce lang="cs"

Další tagy, které je možné zapsat mezi tag <HEAD>

<base> - definice základního umístění dokumentu <link> - definice vztahu k dalším dokumentům <meta> - definuje doplňující informa dokumentu <object> - definice metod pro zobrazení nestandardních objektů <script> - definice skriptů <style> - pro kaskádovou šablonu stylů

Základní atributy s parametry tagu <META>

Atributy s parametry tagu <META> pro prohledávače

Tělo dokumentu

Zapisuje se zde vlastní obsah stránky.

Tag BODY

<body> <body bgcolor="#FFFFFF"> - s definicí barvy pozadí - #FFFFFF = bílá <body background="obr_pozadi.gif"> - s definicí obrázku jako pozadí <body bottommargin="10" leftmargin="10" rightmargin="10" topmargin="10" marginheight="10" marginwidth="10"> - s definicí okraje okna * tyto atributy podporuje jen IE bottommargin="10" leftmargin="10" rightmargin="10" topmargin="10" * tyto atributy podporuje jen Netscape marginheight="10" marginwidth="10" * v ostatních prohlížečích to nemusí fungovat

Atributy se dělí na atributy

pro kontrolu vzhledu
pro programovatelné funkce - tzv. "on-události" pro použití jazyka JavaScript
pro označení a identifikaci těla pro další odkazy

Tag BODY je možné nahradit jedním nebo více tagy FRAMESET. Tomuto dokumentu se říká dokument s rámečky.

Označení revizí

Používá se při práci více autorů nad jedním dokumentem.

Tagy INS a DEL

Tag <ins> pro vložený text

Tag <del> pro ~~zrušený text~~

<ins datetime="2003-02-28T14:59:00Z"> - zadaný datum změny <del datetime="2003-02-28T14:59:00Z"> - zadaný datum změny * Příklad Odkaz na stránky <ins datetime="2003-02-28T14:59:00Z">VUT v Brně</ins> <del>(vložit název stránek)</del> bude upraven následovně.

Speciální tag BDO

Definuje směr zobrazení pro text uzavřený tímto tagem.

Normální text. <bdo dir="rtl">Tento text je opačně.</bdo> A tento již zase normálně.