2.ročník IKT - tvorba webových stránek

Základy

Co je to webová stránka

Webová stránka je dokument, který náš webový prohlížeč (např. Firefox, Chrome, InternetExplorer,...) získá od nějakého webového serveru a zobrazí jej. Zapisuje se v jazyce HTML. Je to text ve kterém se používají tzv. řídící značky - tagy. HTML dokument je zdrojový kod webové stránky.

Struktura html dokumentu

Struktura stránky obsahuje základní značky začínající úvodem, titulem,hlavičkou. Pak je obsah těla ve kterém se dá vytvořit menu a vložit odkazy na stránky. Pak se dají vložit odkazy na webové stránky a ruzné aktivity. Tělo dokumentu je složeno z nadpisů a odstavců.

Odkazy

Jak se dělá odkaz

Odkaz se vytvoří tagem <a>. Odkaz na stránku musíme vložit určitým způsobem.

Nejdříve napíšeme: "Odkaz" a poté pomocí klávesy Ctrl, Alt a znamínka zobáčku vytvoříme dva zobáčky. Do nich vpíšeme (a href=) uvozovky nahoře a vložíme zde odkaz jaký chceme. Samozřejmě ho musíme zkopírovat. Pak za vloženým odkazem napíšeme další uvozovky nahoru aby jsme text uzavřeli a napíšeme další zobáčky. Do nich vpíšeme, jak chceme, aby se odkaz jmenoval. Za ní napíšeme (/a) a uzavřeme dalším jedním zobáčkem. Napíšeme tečku a za ní zobáček a dovnitř br. A to je vše.

Příklady odkazů

Odkaz na stránky seznam.cz
Odkaz na konkrétní článek konkrétní článek na seznamu.
Odkaz na dokument ve stejné složce.
Odkaz na dlooooouhého dokumentu ve stejné složce.
Odkaz na 2.kapitolu dlooooouhého dokumentu ve stejné složce.
Odkaz na předposlední kapitolu dloooooouhého dokumentu
Odkaz na poslední kapitolu dloooooouhého dokumentu

Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně.

Tento odkaz se otevře v novém okně jménem Ivan.
Tento odkaz se otevře v novém okně jménem Ivan.

Příklady praktických HTML stránek

Rozvržení webové stránky pomocí prvků <div>
rozvržení webové stránky pomocí mřížky
Webový formulář verze1.
Můj vlastní formulář

Obrázky

Obrázek na webovou stránku vložím nepárovým tagem <img>

Obrázky musíme dát na stejný disk jinak to nebude fungovat. Obrázek vložím pomocí zobáčku do kterého vpíšeme: img src= "název obrázku který sem chceme vložit". Velké obrázky musíme zmenšit aby nebyli po celé stránce. Větší velikost obrazků můžeme dát na link který ten daný obrázek ukáže v plné velikosti po kliknutí na něj.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Fusce nibh. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Pellentesque pretium lectus id turpis. Fusce tellus. Maecenas sollicitudin. Praesent in mauris eu tortor porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque sapien. Fusce wisi. Nulla quis diam. Duis pulvinar. Fusce nibh. Nulla quis diam. Fusce consectetuer risus a nunc. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Morbi scelerisque luctus velit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nullam rhoncus aliquam metus.

Stránku spravuje K.Levá