Příklady

Rozvržení stránky pomocí bloků div
Rozvržení stránky pomocí mřížky
Můj webový formulář

IKT-Tvorba webových stránek

Základy

Co je to webová stránka?

webová stránka je nehmotný prostor "žijící" na world wide webu. (=celostětové síti)
Na webovou stránku si teoreticky může napsat každý co chce, je to čistě jeho vizitkou.
Avšak každý musí dodržovat strukturu html dokumentu, pokud chce aby byla stránka funkční
(pokud používá jako zdrojový kód html, jako například já, tato stránka je toho příkladem)

Struktura html dokumentu

struktura html dokumentu obsahuje různé části dokumentu, jako je například hlavička nebo tělo.
dále také obsahuje různé značky jako je například p-odstavec nebo br-odřádkování.
Je duležité dodržovat strukturu html dokumentu, není to z důvodu, aby dokument hezky vypadal,
má svá pravidla z určitého důvodu. Když je nebudeme dodržovat, nae webová stránka se nemusí vůbec načíst.

V této kapitolce si vysvětlíme význam některých html značek

*Pokud chceme data uspořádat nejen do řádků, ale i do sloupců, můžeme použít html tabulku:

Značka ne/párová funkce
<html> párová ohraničuje html dokument
<head> párová vymezuje hlavičku dokumentu
<body> párová vymezuje tělo dokumentu
<h1/h2/...> párová nadpis úrovně 1/2/...
<p> párová ohraničuje odstavec
<br> nepárová odřádkuje
<tr> párová vymezuje řádek tabulky (vodorovně)
<td> párová vymezuje sloupec tabulky (svisle)
<pre> párová ohraničuje předformátovaný text
<a> párová odkaz
<img> nepárová obrázek

*Jiný způsob uspořádání je takzvaný předformátovaný text:

 značka      ne/párová       význam
 -----------------------------------------------------
 html        párová          ohraničuje html dokument
 head        párová          vymezuje hlavičku
 body        párová          vymezuje tělo dokumentu
 p           párová          ohraničuje odstavec
 br          nepárová        odřádkuje
 tr          párová          vymezuje řádek tabulky (vodorovně)
 td          párová          vymezuje sloupec tabulky (svisle)
 pre         párová          ohraničuje předformátovaný text
 a           párová          odkaz
 img         nepárová        obrázek

Odkazy

Jak vložit odkaz?

K vytvoření odkazu potřebujete webovou stránku nebo dokument, na který se chcete odkázat.
Dále také potřebujete znát jeho umístění. Párovou značku pro odkaz najdete v tabulce výše
a ve zdrojovém kódu této stránky se můžete podívat na to jak má celý odkaz vypadat a jaké má mít atributy.
Přeji hodně štěstí s vytvářením odkazů :)

Příklady odkzů

odkaz na portál seznam.cz zde
odkaz na konkrétní článek na seznam.cz zde
odkaz na pokusný dokument zde
odkaz na dlouhýýýýýýý dokument zde
odkaz na 98.kapitolu dlooouhého dokumentu zde
tento dokument se otevře v novém okně/panelu.
tento dokument se otevře v okně/panelu jménem "terka".
tento dokument se otevře v okně/panelu jménem "terka".

Obrázky

Jak vložit obrázek

tady svými slovy vysvětlím...

Příklady obrázků

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis ultrices augue. Nullam eget nisl. Aliquam erat volutpat. Nullam dapibus fermentum ipsum. Etiam egestas wisi a erat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nulla est. Ut tempus purus at lorem. Aliquam ornare wisi eu metus. Vivamus luctus egestas leo. Nulla quis diam. Fusce tellus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis ultrices augue. Nullam eget nisl. Aliquam erat volutpat. Nullam dapibus fermentum ipsum. Etiam egestas wisi a erat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nulla est. Ut tempus purus at lorem. Aliquam ornare wisi eu metus. Vivamus luctus egestas leo. Nulla quis diam. Fusce tellus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis ultrices augue. Nullam eget nisl. Aliquam erat volutpat. Nullam dapibus fermentum ipsum. Etiam egestas wisi a erat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nulla est. Ut tempus purus at lorem. Aliquam ornare wisi eu metus. Vivamus luctus egestas leo. Nulla quis diam. Fusce tellus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?