Jazyk HTML Název školyZákladní škola a Mateřská škola Tatenice Číslo projektuCZ Název šablony klíčové aktivity Inovace a zkvalitnění výuky pomocí ICT Vzdělávací oblastInformační a komunikační technologie Vzdělávací období3. PředmětZáklady informatiky Téma hodinyJazyk HTML Označení VY_32_INOVACE_03_Jazyk HTML AutorMgr. Petr Vitásek

Charakteristika HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu.značkovací jazyk hypertextWorld Wide WebInternetuznačkovací jazyk hypertextWorld Wide WebInternetu HTML je jazyk a má svou přesnou syntaxi. HTML je jazyk a má svou přesnou syntaxi.

Tagy a odkazy Tag (český výraz není používaný, nejblíže je zřejmě slovo značka) je chráněné slovo jazyka HTML, uzavřené do špičatých závorek. Všechny příkazy jazyka HTML jsou tagy – vše, co je mimo špičaté závorky, je vlastní obsah stránky. Tag (český výraz není používaný, nejblíže je zřejmě slovo značka) je chráněné slovo jazyka HTML, uzavřené do špičatých závorek. Všechny příkazy jazyka HTML jsou tagy – vše, co je mimo špičaté závorky, je vlastní obsah stránky. Rozdělení: Rozdělení: Párové tagy – uzavírají mezi sebe obsah a přiřazují mu tak danou hodnotu. Párové tagy – uzavírají mezi sebe obsah a přiřazují mu tak danou hodnotu. Nepárové tagy – umísťují do stránky jediný prvek. Nepárové tagy – umísťují do stránky jediný prvek.

Párové tagy uzavírají mezi sebe obsah a přiřazují mu tak danou hodnotu. Tag na levé a pravé straně výrazu je stejný, ovšem uzavírající tag má navíc za závorkou lomítko. Příkladem párového tagu je tag, který v sobě uzavírá název www stránky: uzavírají mezi sebe obsah a přiřazují mu tak danou hodnotu. Tag na levé a pravé straně výrazu je stejný, ovšem uzavírající tag má navíc za závorkou lomítko. Příkladem párového tagu je tag, který v sobě uzavírá název www stránky: Název stránky Název stránky

Nepárové tagy umísťují do stránky jediný prvek, který je už svou podstatou nedělitelný. Jde například o tyto prvky: umísťují do stránky jediný prvek, který je už svou podstatou nedělitelný. Jde například o tyto prvky: pozadí www stránky pozadí www stránky vodorovná linka vodorovná linka obrázek, aj. obrázek, aj.

Odkazy Jsou důležitým principem HTML Jsou důležitým principem HTML Odkazují na místo v aktuálním dokumentu – tzv. záložku: Odkazují na místo v aktuálním dokumentu – tzv. záložku: Výlet do hor Výlet do hor Vkládají obrázek do stránky: Vkládají obrázek do stránky: Mohou odkazovat na jiná data na jiné stránce: Mohou odkazovat na jiná data na jiné stránce: Seznam.cz Seznam.cz

Struktura kódu HTML Správná struktura webové stránky je důležitá pro její bezchybné zobrazení ve všech prohlížečích – tzv. „VALIDITA“ podle mezinárodního standartu jazyka HTML, XHTML atd. Správná struktura webové stránky je důležitá pro její bezchybné zobrazení ve všech prohlížečích – tzv. „VALIDITA“ podle mezinárodního standartu jazyka HTML, XHTML atd. Ikonky vyjadřující validitu umístěné na některých stránkách informují návštěvníky o tom, že jsou VALIDNÍ a splňují předepsaný standart: Ikonky vyjadřující validitu umístěné na některých stránkách informují návštěvníky o tom, že jsou VALIDNÍ a splňují předepsaný standart: Odkaz na český validátor: Odkaz na český validátor:

Základní části stránky jde o označení typu dokumentu, verze HTML počátek textu ve formátu HTML počátek hlavičky 4. Název stránky.... název stránky zobrazený v titulku okna jde o meta-informaci obsahu souboru HTML konec hlavičky počátek těla, vlastního zobrazovaného obsahu stránky 8. Obsah stránky - text, obrázky, odkazy, případně scripty aj konec těla stránky konec formátu HTML

Přehled tagů Kompletní přehled HTML značek (tagů) potřebných pro vytváření webové stránky najdete na adrese: Kompletní přehled HTML značek (tagů) potřebných pro vytváření webové stránky najdete na adrese:

V čem programovat? Struktura webové stránky je textový kód, tzn. můžeme jej psát v textovém editoru – Poznámkovém bloku Windows a uložit soubor s příponou *.html, *.htm nebo *.php Struktura webové stránky je textový kód, tzn. můžeme jej psát v textovém editoru – Poznámkovém bloku Windows a uložit soubor s příponou *.html, *.htm nebo *.php Editory HTML Komerční: Microsoft FrontPage 2003 Komerční: Microsoft FrontPage 2003 Freeware: NVU, PSPad, EasyPad aj. Freeware: NVU, PSPad, EasyPad aj.

Jak začít? Vložíme hlavní tabulku – pro lepší formátování umísťujeme texty a obrázky do tabulek... Vložíme hlavní tabulku – pro lepší formátování umísťujeme texty a obrázky do tabulek... Nastavíme pozadí stránky (jednobarevné nebo tapeta)... Nastavíme pozadí stránky (jednobarevné nebo tapeta)... Píšeme texty, vkládáme hypertextové odkazy... Píšeme texty, vkládáme hypertextové odkazy... Vkládáme zmenšené obrázky (miniatury) s odkazem na velké (originální)... Vkládáme zmenšené obrázky (miniatury) s odkazem na velké (originální)... Optimalizujeme kód (nadpis stránky, kódování aj.)... Optimalizujeme kód (nadpis stránky, kódování aj.)... První stránku (Home Page) uložíme pod názvem souboru „index.html“ První stránku (Home Page) uložíme pod názvem souboru „index.html“

KONEC prameny: