Úvod HTML

Toto je starší verze dokumentu!

→ Slide 1

→ Slide 2

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.

→ Slide 3

Jazyk obsahující značky – tagy.
Tagy se uzavírají do lomených závorek, např.:
```
 text odstavce 
```
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.

→ Slide 4

Párové
- Např.:  je začátek tučného textu,  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é.

↓ Slide 5

<p>            text         </p> 
 ^               ^            ^
 |               |            |
začátek tagu   text    konec tagu

↓ Slide 6

<img src=“cesta\obrazek.jpg“>
       ^                ^
       |                |
Tag s parametry obrazový soubor

↓ Slide 7

<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

↓ Slide 8

<img> je tag pro obrázek ale nic jako </img> neexistuje
  je tag pro řádkový zlom ale nic jako neexistuje

→ Slide 9

Doctype (typ dokumentu)
Head (hlavička)
Body (tělo stránky)

↓ Slide 10

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

↓ Slide 11

Doctype – ukázka

<!DOCTYPE html>

Starší verze HTML

↓ Slide 12

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.

↓ Slide 13

Hlavička 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 ..../>

↓ Slide 14

Head - ukázka

<head>
<title>Toto je moje stránka</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"
/>
<meta name="description" content="Něco o mně - moje stránky" /> </head>

↓ Slide 15

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>

→ Slide 16

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<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>

↓ Slide 17

→ Slide 18

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

Úvod HTML

HTML soubor

HTML jazyk

Tagy

Ukázka párového tagu

Ukázka nepárového tagu

Párové tagy – další příklady

Nepárové tagy – další příklady

Struktura www stránky

Doctype

Doctype – ukázka

Head

Head - ukázka

Body

Ukázka HTML kódu www stránky

Ukázka téže stránky v prohlížeči

Shrnutí nejzákladnější struktury stránky