HTML Základy

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í.

Co je to webová stránka?

Webová stránka je v informatice označení pro soubor dat zobrazovaný uživateli webovým prohlížečem. Webové stránky jsou součástí celosvětového WWW (laicky označovaného jako internet, i když WWW je jen jedna ze služeb dostupných na internetu) ve formě hypertextu.

Hypertext umožňuje sloučit text a multimédia a zároveň propojit webové stránky hyperlinky (tj. odkazy), které po kliknutí uživateli zobrazí jiný obsah (jinou webovou stránku).

Příklad – základní struktura HTML stránky

html - definuje samotný dokument
head - definuje hlavičku dokumentu
meta - definuje nejrůznější meta tagy (robots, description aj.)
title - používá se pro titulek stránky
body - obsahuje vlastní obsah stránky

Tabulka

Jinou možností, jak uspořádat text, je vytvořit html tabulku. 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
<h1> P nadpis nejvyšší úrovně
<p> P odstavec (paragraph)
<pre> P předformátovaný text
<br> N tvrdý konec řádku (break)
<hr> N čára (horizontal row)

Webová stránka s obrázky

Na webovou stránku se obrázek přidá párovou značkou . 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ě.

Pokud zapíšu obrázků víc, poskládají se vedle sebe až do šířky stránky.

Kdybych chtěl obrázky skládat pod sebe, musím zapsat tvrdé odřádkování
.

Odkazy

Jak na to

Odkazy dělají z webové stránky silný informační nástroj. Odkaz se vytvoří tagem . 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 Google
Odkaz na školní web SUPŠ Zámeček