Můj pracovní webík

... aneb HTML a CSS pro starší a nechápavé ...

ŠABLONA

 

k vytváření HTML šablony stačí použít obyčejný textový editor - např. Poznámkový blok

nepoužívejte Word

existují i HTML editory - 2 základní druhy:

editory zdrojového kódu - např. PSPad editor

editory vizuální - např. FrontPage

 

HTML dokument má 2 oddělené části - hlavičku - head a tělo - body

hlavička <head> ... </head> říká prohlížeči důležité informace o webové stránce, např. název stránky a jaký titulek se má objevit v titulkovém pruhu okna prohlížeče

ihned po uzavíracím tagu </head> začíná sekce tělo <body> ... </body> - mezi těmito tagy se nachází celý obsah stránky

samotné elementy <head> a <body> musí být ještě uzavřeny v dalším elementu <html>, který určuje, že text je zdrojovým kódem HTML dokumentu
v XHTML je třeba tag <html> doplnit o kód
<html xmlns="http://www.w3.org/1999/xhtml">

na začátku každého HTML dokumentu by měla stát definice typu dokumentu, zkráceně DTD
element <DOCTYPE html> je jediný element, který smí být v XHTML uveden velkými písmeny

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

dalším potřebným elementem pro tvorbu HTML šablony je komentář
text komentáře je v HTML a XHTML ohraničen v tagu
<!-- komentář -->

takto vypadá šablona pro dokument v XHTML Strict:

<!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">
<head>
<title> Můj pracovní webík </title>
<!-- Autor: Jeane -->
<!-- Poslední aktualizace: 12.10.2007 -->
</head>
<body>
</body>
</html
>
v elementu <head> může být uzavřeno několik dalších elementů
patří mezi ně:
<title> název dokumentu
<base> původní URL adresa dokumentu
<meta> dodatečné informace o stránce
pouze element <title> je povinný

element <title>

dává stránce název
většina prohlížečů zobrazí tento text v titulkovém pruhu svého okna
rovněž při ukládání stránky jako záložky nebo mezi oblíbené položky se často použije tento text
bude použit rovněž při hledání ve vyhledávačích
neměl by být delší než 60 znaků

element <base>

nastavuje nejvyšší úroveň všech relativních URL

element <meta>

nejtypičtějším využitím je seznam klíčových slov pro vyhledávání (keywords) a popis obsahu dokumentu (description) pro webové vyhledávače
povinnými atributy elementu <meta> jsou content a buď name nebo http-equiv (pouze jeden z nich, nikdy oba současně)

takto může vypadat hlavička dokumentu:

<head>
<title> Můj pracovní webík </title>
<meta name="description" content="... aneb HTML a CSS pro starší a nechápavé ...">
<meta name="keywords" content="HTML, CSS, terminologie, tvorba webu">
</head>
tělo všech HTML dokumentů je uzavřeno do elementu <body>

vše, co mají návštěvníci stránek vidět, je umístěno mezi tagy <body> a </body>

většina textu mezi tagy <body> a </body> je navíc ještě uzavřena v jiném důležitém elementu <p>, který rozděluje text na odstavce

prohlížeče totiž ignorují více než jednu mezeru mezi slovy, tedy i klávesu ENTER

veškerý text mezi tagy <p> a </p> bude prohlížeč považovat za odstavec, který navíc od dalšího textu oddělí volnou řádkou

chceme-li, aby v rámci odstavce pokračoval text na dalším řádku, použijeme element <br />

nechceme-li vynechávat mezi odstavci prázdný řádek, použijeme místo elementu <p> element <div>