Základy a tvorba HTML stránek

Co je to webová stránka?

Webová stránka je dokument, který váš webový prohlížeč (např. Firefox, Chrome, InternetExplorer, ...) získá od nějakého webového serveru a zobrazí jej. Přívlastek "webový" znamená, že se týká nejrozšířenější internetové aplikace zvané World-Wide-Web určené pro poskytování informací.

Webová stránka se zapisuje v jazyce HTML (HyperText Markup Language). Jak název napovídá, je to text, ve kterém se vyskytují řídící značky neboli tagy. HTML dokument tedy můžeme chápat jako zdrojový kód webové stránky.

Struktura html dokumentu

Celý html dokument je složen z hlavičky a těla. Hlavička je většinou krátká, obsahuje různé informace např. titulek okna nebo použité kódování. Celý obsah webové stránky je umístěn v těle html dokumentu. Je rozdělen na jednotlivé odstavce a proložen nadpisy a podnadpisy. Nadpisů může být až 6 úrovní.

Formátování textu

Webový prohlížeč si odstavce textu formátuje sám podle toho, jak má široké okno. Snadno si to ověřím tak, že zkusím velikost okna změnit - prohlížeč si text přeformátuje podle nové velikosti okna.

Uspořádaný (předformátovaný) text

Pokud chci text uspořádat do sloupečků, mohu použít tzv. předformátovaný text. Ten prohlížeč formátuje stejně, jak je zapsán ve zdrojovém kódu stránky. Text zobrazuje neproporcionálním písmem. Příklad použití:

Značka(Ne)PárováVýznam
html P ohraničuje celý dokument
head P hlavička dokumentu
body P tělo dokumentu
hl P nadpis nejvyšší úrovně
p P odstavec (paragraph)
hr N čára (horizontal row)

Tabulka

Jinou možností, jak uspořádat text, je vytvořit html tabulku. Je to trochu složitější, ale nabízí to více možností. Celá tabulka se skládá z řádků a každý řádek je rozdělen na jednotlivé buňky:

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

Značka(Ne)PárováVýznam
html P ohraničuje celý dokument
head P hlavička dokumentu
body P tělo dokumentu
hl P nadpis nejvyšší úrovně
p P odstavec (paragraph)
hr N čára (horizontal row)

Obrázky

Na webovou stránku se obrázek přidá párovou značkou <img>. Parametrem "src" určím, jaký obrázek se zobrazí. Pokud je soubor ve stejném adresáři jako html dokument, stačí napsat hodnotu parametru "src" jen jméno souboru (do uvozovek). Jsou-li soubory s obrázky umístěny jinde, musím napsat cestu k nim.
Pokud neurčím jinak (to se bude probírat později), obrázek se chová v toku dokumentu jako samostatný odstavec. Není dobré obrázkem zakrýt moc místa, většinou je důležitý text. Zatím nechci míchat obrázky s textem ve stejném odstavci, vypadá to divně.

mohu vložit jeden samotný obrázek

nebo několik vedle sebe

další možností je vložit obrázky pod sebe

Odkazy

Jak na to

Odkazy dělají z webové stránky silný informační nástroj. Odkaz se vytvoří tagem <a>. Parametrem "href" se určí cíl odkazu. Tak jako u obrázků, pokud je cílový dokument ve stejném adresáři, stačí napsat jméno souboru - viz.příklad
Toto je odkaz na sousední dokument.

Různé varianty HTML odkazů

odkaz na html dokument s obrázky
odkaz na hlavní stránku školy online
odkaz na IDOS - spoje vlakem
odkaz na aktuality 2021 ze ZOO Plzeň
odkaz na hlavní stránku youtube

Tuto stránku vytvořila Andrea Pavlíková z KM2