24) HTML (HyperText Markup Language)
By MKzcout. Thursday, May 14, 2009 7:03:59 PM
..je souhrn příkazů (nebo-li skriptovací jazyk), který určuje internetovému prohlížeči jak zobrazit webovou stránku. Webová stránka je tedy určitá posloupnost těchto znaků zapsaná do souboru, který internetový prohlížeč čte a zobrazuje.
Příkazy v HTML
..mají každý svůj unikátní název a funkci, například příkaz s názvem 'img' umí vložit obrázek.
..uzavíráme do ostrých závorek, například <img>, aby internetový prohlížeč poznal, že jde o příkaz a ne o běžné slovo.
..dělíme do dvou skupin podle oblasti, na kterou se jejich funkce vztahuje a to na párové a nepárové.
a) párové příkazy se dělí na počáteční a konečnou značku a oblast, která se nachází mezi nimi je také oblastí jejich působení. Počáteční značka se zapisuje jako <příkaz> a konečná jako </příkaz>. Například příkaz 'b', který vymuzuje text napsaný tučně, bychom zapsali jako: <b>Tento text by internetový prohlížeč zobrazil tučně </b>.
b) nepárové příkazy fungují pouze na jednom bodě, tedy jejich působnost začíná i končí v počáteční značce. Zapisujeme je jako <příkaz> nebo <příkaz />. Například příkaz 'img' vkládá obrázek na jednu určitou pozici.
..na sebe můžeme vrstvit hierarchickým způsobem jako <příkaz1><příkaz2>text</příkaz2></příkaz1>. Můžeme tak uplatnit funkce více příkazů na jeden objekt. Například (příkaz 'u' určuje, že text bude podtržen, příkaz 'i', že bude kurzívou): <b><u>Tento text bude zobrazen tučně a podtržen,</u><i>zatímco tento bude tučně a kurzívou.</i></b>. Pokud nedodržíme tuto hierarchii, může být text zobrazen chybně.
..mají své parametry..
Parametry příkazů
..mají rovněž každý svůj název
..zapisujeme za název příkazu ve formátu názevparametru=“hodnota“, tedy například: <img src=“obrazky/muj_obrazek.jpg“ /> - aby příkaz 'img', mohl zobrazit obrázek, je třeba mu říci, který to bude a k tomu použijeme parametr s názvem 'src' (zkomolenina source = zdroj), kterému jako hodnotu vypíšeme cestu ke konkrétnímu obrázku.
v příkazu můžeme použít i více parametrů zápisem <příkaz parametr=“hodnota“ parametr=“hodnota“>. Například: <font size=“4“ face=“Arial“>Příkaz font umožňuje měnit vzhled písma a podle jeho parametrů zobrazí internetový prohlížeč tento text velikostí 4 (size) a písmem Arial (face).
Struktura stránky HTML
Každá webová stránka musí mít základní strukturu, která pak umožňuje širší editaci stránky. Nejprve bychom měli prohlížeči sdělit, že mu předkládáme příkazy v jazyce HTML, neboť exitují další jazyky, ve kterých lze webové stránky skriptovat – všechen náš zdrojový kód (všechny příkazy) obalíme párovým příkazem <html></html>. Dále se stránka dělí na hlavičku (vymezuje párový příkaz 'head'), která určuje jak bude zobrazena stránka (například v jakém jazyce je psaná a jaké znaky se tedy mají zobrazovat) a tělo (vymezuje párový příkaz 'body'), kam se už vpisuje konkrétní obsah stránky, který se zobrazí. Důležité je vědět, že takzvaný whitespace, což jsou mezery, odřádkování a jiné 'bílé znaky', nehrají ve zdrojovém kódu žádnou roli. Stránka zapsaná jako:
<html><head>..informace o obsahu..</head><body>..obsah k zobrazení..</body></html>
se nijak neliší od stránky zapsané jako:
<html>
<head>
..informace o obsahu..
</head>
<body>
..obsah k zobrazení..
</body>
</html>
Důležité je pouze vymezení funkcí příkazů jejich počátečními a konečnými značkami a způsob vrstvení, jak už bylo řečeno.
Komentář
Pokud už máte nějaké své webové stránky a chcete je nějak vylepšit, je třeba rozšířit zdrojový kód. Rozšiřování zdrojového kódu jenom znepřehledňuje celou situaci. Pro umožnění alespoň částečné orientace v kódu existuje příkaz pro komentář, pomocí kterého si do kódu můžete vpisovat vlastní poznámky, které ovšem nebudou v prohlížeči zobrazeny. Syntax pro komentář je: <!-- tady bude moje poznámka, která se nezobrazí -->. komentáře můžeme vkládat kamkoli do zdrojového kódu
s ohledem na hierarchii příkazů.
Seznam všech příkazů parametrů a jejich význam můžete najít v odborné literatuře, nebo na webu www.jakpsatweb.cz.
Příklad
<html>
<head>
<title>Stránka o mém pejskovi</title> <!-- nadpis stránky v okně prohlížeče -->
</head>
<body>
<h1>Můj pejsek</h1>
<p>Můj pejsek se narodil 21. 3. 2009. Je to malý chytrý a rošťák, <b>trpasličí knírač</b>. Jmenuje se <u>Adam</u>. Jen se na něj podívejte:</p>
<img src=“fotky/adam.jpg“ width=“400“ alt=“Adam“ />
</body>
</html>
Příkazy v HTML
..mají každý svůj unikátní název a funkci, například příkaz s názvem 'img' umí vložit obrázek.
..uzavíráme do ostrých závorek, například <img>, aby internetový prohlížeč poznal, že jde o příkaz a ne o běžné slovo.
..dělíme do dvou skupin podle oblasti, na kterou se jejich funkce vztahuje a to na párové a nepárové.
a) párové příkazy se dělí na počáteční a konečnou značku a oblast, která se nachází mezi nimi je také oblastí jejich působení. Počáteční značka se zapisuje jako <příkaz> a konečná jako </příkaz>. Například příkaz 'b', který vymuzuje text napsaný tučně, bychom zapsali jako: <b>Tento text by internetový prohlížeč zobrazil tučně </b>.
b) nepárové příkazy fungují pouze na jednom bodě, tedy jejich působnost začíná i končí v počáteční značce. Zapisujeme je jako <příkaz> nebo <příkaz />. Například příkaz 'img' vkládá obrázek na jednu určitou pozici.
..na sebe můžeme vrstvit hierarchickým způsobem jako <příkaz1><příkaz2>text</příkaz2></příkaz1>. Můžeme tak uplatnit funkce více příkazů na jeden objekt. Například (příkaz 'u' určuje, že text bude podtržen, příkaz 'i', že bude kurzívou): <b><u>Tento text bude zobrazen tučně a podtržen,</u><i>zatímco tento bude tučně a kurzívou.</i></b>. Pokud nedodržíme tuto hierarchii, může být text zobrazen chybně.
..mají své parametry..
Parametry příkazů
..mají rovněž každý svůj název
..zapisujeme za název příkazu ve formátu názevparametru=“hodnota“, tedy například: <img src=“obrazky/muj_obrazek.jpg“ /> - aby příkaz 'img', mohl zobrazit obrázek, je třeba mu říci, který to bude a k tomu použijeme parametr s názvem 'src' (zkomolenina source = zdroj), kterému jako hodnotu vypíšeme cestu ke konkrétnímu obrázku.
v příkazu můžeme použít i více parametrů zápisem <příkaz parametr=“hodnota“ parametr=“hodnota“>. Například: <font size=“4“ face=“Arial“>Příkaz font umožňuje měnit vzhled písma a podle jeho parametrů zobrazí internetový prohlížeč tento text velikostí 4 (size) a písmem Arial (face).
Struktura stránky HTML
Každá webová stránka musí mít základní strukturu, která pak umožňuje širší editaci stránky. Nejprve bychom měli prohlížeči sdělit, že mu předkládáme příkazy v jazyce HTML, neboť exitují další jazyky, ve kterých lze webové stránky skriptovat – všechen náš zdrojový kód (všechny příkazy) obalíme párovým příkazem <html></html>. Dále se stránka dělí na hlavičku (vymezuje párový příkaz 'head'), která určuje jak bude zobrazena stránka (například v jakém jazyce je psaná a jaké znaky se tedy mají zobrazovat) a tělo (vymezuje párový příkaz 'body'), kam se už vpisuje konkrétní obsah stránky, který se zobrazí. Důležité je vědět, že takzvaný whitespace, což jsou mezery, odřádkování a jiné 'bílé znaky', nehrají ve zdrojovém kódu žádnou roli. Stránka zapsaná jako:
<html><head>..informace o obsahu..</head><body>..obsah k zobrazení..</body></html>
se nijak neliší od stránky zapsané jako:
<html>
<head>
..informace o obsahu..
</head>
<body>
..obsah k zobrazení..
</body>
</html>
Důležité je pouze vymezení funkcí příkazů jejich počátečními a konečnými značkami a způsob vrstvení, jak už bylo řečeno.
Komentář
Pokud už máte nějaké své webové stránky a chcete je nějak vylepšit, je třeba rozšířit zdrojový kód. Rozšiřování zdrojového kódu jenom znepřehledňuje celou situaci. Pro umožnění alespoň částečné orientace v kódu existuje příkaz pro komentář, pomocí kterého si do kódu můžete vpisovat vlastní poznámky, které ovšem nebudou v prohlížeči zobrazeny. Syntax pro komentář je: <!-- tady bude moje poznámka, která se nezobrazí -->. komentáře můžeme vkládat kamkoli do zdrojového kódu
s ohledem na hierarchii příkazů.
Seznam všech příkazů parametrů a jejich význam můžete najít v odborné literatuře, nebo na webu www.jakpsatweb.cz.
Příklad
<html>
<head>
<title>Stránka o mém pejskovi</title> <!-- nadpis stránky v okně prohlížeče -->
</head>
<body>
<h1>Můj pejsek</h1>
<p>Můj pejsek se narodil 21. 3. 2009. Je to malý chytrý a rošťák, <b>trpasličí knírač</b>. Jmenuje se <u>Adam</u>. Jen se na něj podívejte:</p>
<img src=“fotky/adam.jpg“ width=“400“ alt=“Adam“ />
</body>
</html>
