HTML 5 – Lekce 1

HTML 5 – Lekce 1

V této lekci si ukážeme, jak naprogramovat pomocí pár jednoduchých tagů nějaké objekty na web. Na začátku každé lekce bude „souhrn mluvnice“ ( na začátku vždy budou tagy, které v této lekci použijeme….), který by vám měl pomoct v naučení se těchto tagů a zvýšit přehlednost mezi jednotlivými lekcemi.

Přehled mluvnice lekce 1:

<html> – párový – využívá se jako označení že programujeme v html

<head> – párový – využívá se jako označení, že programujeme hlavičku stránky

<body> – párový – využívá se jako označení, že programujeme tělo stránky

Jistě jste si všimli, že u všech výše uvedených tagů je napsáno, že tyto tagy jsou takzvaně párové. Párové proto, že když se někde začnou tak se také musí ukončit. Vezmeme si například tag, který označuje začátek html- <html> – tento tag jednoduše ukončíme tím že po lomítkové závorce ( < ) připíšeme / – </html>. Takto se začíná a ukončuje většina tagů (a všechny výše uvedené tagy).

Předvedeme si na názorném příkladu:

<html>začali jsme html

<další tagy, atd…>

</html>skončili jsme se zápisem html

(Poznámka: to co je v html zápisu napsáno kurzívou nepište, jsou to jen poznámky, které upřesňují zápis.)

Tag <html> musí být ve všech dokumentech obsahující html vždy jako první a jeho ukončující tag jako poslední.

Tagy se skládají z atributů a elementů. Element je například <img> (obrázek) a k tomu je atribut src (cesta, kde je obrázek uložen). Tak že celý tag bude znít: <img src=“umistenivasehoobrazku.jpg>. Element může být v tagu jen jeden, zato atributů může být neomezeně. Atributy určujete nastavení elementu.

Tag <head> je hlavička dokumentu, která se nezobrazuje. Pokud v hlavičce napíšete prostý text, v nějakých prohlížečích se zobrazí na začátku stránky! V hlavičce bývají také takzvané meta informace, podle kterých by měly vyhledávače hledat (ve většině vyhledávačů tomu tak není, ale přes to se meta informace používají …. zejména kvůli validitě zápisu dokumentu). Tag <head> nemá žádné atributy.

Praktické využití:

<html>

<head> – začali jsme hlavičku

zdě již píšeme hlavičku dokumentu

</head> – skončili jsme hlavičku

</html>

 

Párový tag <body> obsahuje veškerý zobrazovaný obsah stránky. Pokud chceme napsat standardní text na náš web, tak nemusíme používat žádné jiné tagy než tag <body>. Pokud

napíšeme normální text přímo do těla stránky, zobrazí se nám tak, jak jsme ho napsali. Tag <body> má spoustu atributů (všechny jsou ale již zastaralé a nepoužívají se –

nahrazují je styly CSS). Obecně se atributy už příliš nepoužívají, pouze některé speciální, které se přímo netýkají stylu ( – nedají se napsat v CSS). Takže si otevřeme textový editor a napíšeme naší první stránku, která bude obsahovat html dokument s hlavičkou (v tomto zápisu je k ničemu – jen pro přesnost) a tělem stránky (ve kterém je nějaký text):

<html>začali jsme programovat v html

<head> označili jsme hlavičku

meta informace atd… ( k tomuto se vrátíme později), voláme skripty a styly z jiných míst

</head>ukončili jsme hlavičku

<body>Začali jsme tělo stránky

Můj první html dokument – Napsali jsme text, který se nám zobrazí na naší stránce

</body>ukončili jsme tělo stránky

</html>ukončili jsme dokument v html

Pokud tyto tagy uložíte v dokumentu .html (nebo .php nebo .htm) měla by se vám zobrazit stránka s textem „Můj první html dokument“ (pokud je to váš první dokument, který chcete aby byl zároveň stránkou po načtení url adresy, musí se jmenovat index.html nebo index.php).

Jen pro upřesnění: Hodnota atributů se zapisuje takto např. < textarea cols=“10“> dá se napsat i bez uvozovek, ale takto je zápis validnější).

Leave a Reply