Toto je starší verze dokumentu!
Úvod HTML
HTML soubor
- Textový soubor s příponou htm či html.
- Obsahuje běžný text, který je doplněn tagy.
- Tagy = značky (výrazy) jazyka HTML.
- HTML soubor lze vytvořit v obyčejném textovém editoru, který ukládá neformátovaný text, např. v poznámkovém bloku.
- Aby se vytvořený soubor otevíral v Internetovém prohlížeči, musí mít příponu htm či html.
- Zařídíme to tak, že příponu souboru změníme - přejmenujeme.
HTML jazyk
- Jazyk obsahující značky – tagy.
- Tagy říkají prohlížeči (Exploreru,Mozille, Opeře …), jak má dané texty či objekty zobrazovat - interpretovat.
- Většina tagů je párových, tzn. vyskytují se před textem i na jeho konci.
Tagy
- Párové
- Např.:
<b>je začátek tučného textu, </b> je konec tučného textu. - První tag něco začíná a druhý to končí.
- Lomítko znamená, že jde o uzavírací tag.
- Nepárové
- Např.: <img> je tag pro vložení obrázku.
- Jsou méně časté.
Ukázka párového tagu
<p>
začátek tagu
text
</p>
text
konec tagu
Ukázka nepárového tagu
<img src=“cesta\obrazek.jpg“>
^ ^
| |
Tag s parametry obrazový soubor
Párové tagy – další příklady
<html>; </html> <head>; </head>
<html> je začátek html souboru </html> je konec html souboru <head> je začátek hlavičky </head> je její konec
<body>; </body> <body> je začátek těla stránky </body> je konec těla stránky
Nepárové tagy – další příklady
<img> je tag pro obrázek ale nic jako </img> neexistuje
<br> je tag pro řádkový zlom ale nic jako </br> neexistuje
Struktura www stránky
- Doctype (typ dokumentu)
- Head (hlavička)
- Body (tělo stránky)
Doctype
Tyto údaje např. řeknou prohlížeči:
- v jaké verzi HTML je stránka napsána.
- jaký je typ DTD (Document Type Definition).
- DTD je jinými slovy návod pro prohlížeč zpracovávající dokument
Doctype – ukázka
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Head
Hlavička je uzavřena do tagů <head>… </head>
- Je v ní spousta užitečných informací.
- Žádná z nich se ale nezobrazí přímo ve výsledné stránce
- Přesto mají informace uvedené v hlavičce velký vliv zejména pro vyhledávání stránky.
Obsahuje zpravidla dvě základní informace:
Název stránky. Je vložen mezi tagy: <title>…</title> Název stránky se zobrazí v horní liště prohlížeče.
Informace o kódování. Ta je uvozena tagem: <meta …./>
Head - ukázka
<head> <title>Toto je moje stránka</title> <meta http-equiv=„Content-Type“ content=„text/html; charset=windows-1250“ /> <meta name=„description“ content=„Něco o mně - moje stránky“ /> </head>
Body
- Tady je konečně všechno to, co se na naší stránce zobrazí.
- Tělo je vloženo mezi párové tagy:
<body>…</body>
Ukázka HTML kódu www stránky
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <meta name="description" content="Něco o mně - moje stránky" /> <title>Toto je moje stránka</title> </head> <body> <h1>Úvod</h1> <p>Na těchto stránkách najdete všechno, co o mně chcete vědět.</p> </body> </html>
Ukázka téže stránky v prohlížeči
Shrnutí nejzákladnější struktury stránky
<html> začíná dokument </html> končí dokument <head> a </head> začíná a končí hlavičku, která se sice nezobrazuje na stránce, ale obsahuje některé důležité údaje, například: <title> a </title> - titulek vymezující název dokumentu (zobrazuje se v modrém záhlaví IE) <body> a </body>, Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo).