→ Slide 1

Úvod HTML

→ Slide 2

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.

→ Slide 3

HTML jazyk

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

Tagy

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

Ukázka párového tagu

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

↓ Slide 6

Ukázka nepárového tagu

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

↓ Slide 7

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

↓ Slide 8

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

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

→ Slide 9

Struktura www stránky

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

↓ Slide 10

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

↓ Slide 11

Doctype – ukázka

<!DOCTYPE html>

Starší verze HTML

↓ Slide 12

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.

↓ 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

Ukázka HTML kódu www stránky

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

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

→ Slide 18

Shrnutí

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

Notes

Zdroje

https://www.dumy.cz/material/49715-zaklady-tvorby-www-stranky-v-html-kodu-uvod