Příklady

Rozvržení stránky pomocí bloků
Formulář Můj Formulář

2.ročník IKT - tvorba webu

Základy

Co je to webová stránka

Webová stránka je informační dokument, který se zobrazuje v aplikaci zvané webový klient (Firefox, Chrome, Opera, Explorer, ...). Dokument je psaný ve značkovacím jazyce HTML a kromě textu a obrázků obsahuje také odkazy na jiné dokumenty. Webový klient tento dokument získá od webového serveru (apache, iis, ...), který trvale běží na nějaké adrese v Internetu.

Struktura HTML dokumentu

Celý html dokument je uzavřen do párového tagu <html>. Skládá se z hlavičky a těla. V hlavičce jsou uvedeny různé informace o stránce, např. kdo stránku vytvořil, jeké používá kódování českých znaků, jaká jsou na stránce klíčová slova pro internetové vyhledávače apod.
Tělo určuje obsah dokumentu, který je rozdělen do odstavců textu a ty jsou nadepsány nadpisy. Nadpisy mají různé úrovně, nadpis nejvyšší úrovně se zpravidla na stránce vyskytuje jen jednou na začátku. Úrovní nadpisů může být až šest.

Význam některých HTML značek

značka (Ne)Párová význam
<html> P ohraničuje html dokument
<head> P hlavička dokumentu
<body> P tělo dokumentu
<h1> P nadpis nejvyšší úrovně
<p> P odstavec
<br> N tvrdé odřádkování
<hr> N horizontální čára

Pokud potřebujeme uspořádat text do řádků a sloupců, můžeme použít HTML tabulku - viz. výše. Jiný způsob uspořádání textu je tzv. "předformátovaný text" - viz. níže:

--------------------------------------------         
 značka            význam
--------------------------------------------        
 html     párová   ohraničuje html dokument
 head     párová   hlavička dokumentu
 body     párová   tělo dokumentu
 br     nepárová   tvrdé odřádkování
--------------------------------------------     

Odkazy

Jak se dělá odkaz

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id metus id velit ullamcorper pulvinar. Nunc auctor. Nam quis nulla. Vivamus luctus egestas leo. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis risus. Proin in tellus sit amet nibh dignissim sagittis. Quisque porta. Etiam egestas wisi a erat. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nullam eget nisl.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na jeden článek na seznamu.
Odkaz na pokusný dokument (je ve stejné složce)
Odkaz na dlooooouhý dokument
Odkaz na 1.kapitolu dlooooouhého dokumentu
Odkaz na poslední kapitolu dlooooouhého dokumentu
Tento dokument se otevře v novém okně/nové kartě.
Tento dokument se otevře v novém okně jménem "kulicka"
Tento dokument se otevře v novém okně/nové kartě.
Tento dokument se otevře v novém okně jménem "kulicka"

Obrázky

Jak se vloží obrázek

Tady svými slovy ...

Příklady

Aenean id metus id velit ullamcorper pulvinar. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Aenean vel massa quis mauris vehicula lacinia. Nullam faucibus mi quis velit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Aenean vel massa quis mauris vehicula lacinia. Pellentesque pretium lectus id turpis. Aliquam erat volutpat. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Cras elementum. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim.

Proin in tellus sit amet nibh dignissim sagittis. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Etiam quis quam. Praesent in mauris eu tortor porttitor accumsan. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Curabitur sagittis hendrerit ante. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Fusce suscipit libero eget elit. Proin in tellus sit amet nibh dignissim sagittis. Maecenas fermentum, sem in pharetra pellentesque.

Nam sed tellus id magna elementum tincidunt. Aenean placerat. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Suspendisse nisl. Nam sed tellus id magna elementum tincidunt. Aliquam erat volutpat. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Etiam neque. Aliquam erat volutpat. In convallis.