Příklady

Rozvržení stránky pomocí div
Rozvržení stránky pomocí mřížky
Formulářmuj

Tvorba webové stránky

Základy

Co je to webová stránka

Html dokument je zdrojový kód, který udává vzhled a logickou strukturu stránky. Začíná značkou html a taktéž končí značkou html.

Struktura html dokumentu

Struktura html dokumentu vypadá tak, že značky uvedené v textu udávají prohlíženi to, jak má text zobrazit. Nejjednoduší struktura dokumentu je běžný textový soubor.

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

značka (Ne)Párová význam
<html> P ohraničuje celý html dokument
<head> P hlavička
<hr> N zalomení řádku
<br> N zalomení řádku

Pokud chci mít data uspořádané do řádků a sloupců, je možné použít html tabulku (viz.výše). Jiný způsob uspořádání je tzv. "předformátovaný text":

------------------------------------------------------
značka                   význam
------------------------------------------------------
html     párová          ohraničuje celý html dokument
h1       párová          nadpis nejvyšší úrovně 
br       nepárová        zalomení řádku
------------------------------------------------------

Odkazy

Jak se dělá odkaz

tady svými slovy...

Odkaz se vytvoří pomocí značky "a", která nás zevede na danou stránku. K tomu potřebujeme ale také značku "href", tedy "a href" - dohromady nás "naviguje" na cíl odkazu. Celé to vypadá takhle: do zkosené závorky zadáme "a href", dáme rovnítko a do uvozovek zadáme jméno stránky,dokumentu v počítači..., poté zvolíme cíl zobrazení. Odkaz zakončíme značkou /+a (/a) ve zkosené závorce, tedy pro vytvéření dokazu.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na oscarovou herečku
Odkaz na první pokusný dokument
Odkaz na druhý pokusný dokument
Odkaz na 2. kapitolu dlouhého dokumentu
Odkaz na 99. kapitolu dlouhého dokumentu
Tento dokument se otevře v novém okně
Tento dokument se otevře v novém okně
Tento dokument se otevře v okně jménem "zloun"
Tento dokument se otevře v okně jménem "zloun"

Obrázky

Jak vložit obrázek

tady svými slovy...

Příklady obrázků

Nunc tincidunt ante vitae massa. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Etiam dictum tincidunt diam. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Aliquam ornare wisi eu metus. Nunc auctor. Nam sed tellus id magna elementum tincidunt. Cras elementum. Mauris tincidunt sem sed arcu. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia. Aliquam erat volutpat. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores.

Phasellus et lorem id felis nonummy placerat. Quisque porta. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Maecenas sollicitudin. Nullam at arcu a est sollicitudin euismod. Pellentesque ipsum. Etiam egestas wisi a erat. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Etiam bibendum elit eget erat. Pellentesque sapien. Integer pellentesque quam vel velit.

Ut tempus purus at lorem. Praesent dapibus. In rutrum. Etiam commodo dui eget wisi. Vestibulum fermentum tortor id mi. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Maecenas lorem. Duis viverra diam non justo. In convallis. Aliquam id dolor. Fusce tellus. Phasellus rhoncus.