Příklady

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

2. ročník IKT - tvorba webové stránky

Základy

Co je to webová stránka

Webová stránka je dokument, který náš webový prohlížeč získá od nějakého webového serveru a zobrazí jej. Zapisuje se v jazyce HTML. Je to text ve kterém se používají tzv. řídící značky - tagy. HTML dokument je zdrojový kod webové stránky.

Struktura HTML dokumentu

HTML dokument se skládá z hlavičky a těla. V hlavičce jsou různé informace o stránce, v těle je vlastní obsah stránky, který se zobrazí v okně prohlížeče.

ZnačkaPárová/Nepárová Význam
<html> Párová označuje celý html dokument
<head> Párová hlavička
<body> Párová tělo dokumentu
<h1> Párová nadpis nejvyšší úrovně
<p> Párová odstavec
<hr> Nepárová horizontální čára
<br> Nepárová zalomení řádku

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

----------------------------------------------------
značka      vyznam
----------------------------------------------------
html   párová   ohraničuje celý html dokumen
h1     párová   nadpis njvišší úrovně
br     nepárová zalomení řádku
-----------------------------------------------------

Odkazy

Jak se dělá odkaz

Vytvořte text který chcete použít jako odkaz. Obklopte obsah, který jste vytvořili s HTML tagy. Přidejte párovým tagem <a> a důležitý atribut "href", který obsahuje adresu, podle které prohlížeč pozná, na jakou stránku se má přepnout.

Přiklady odkazů

Odkaz na portal seznam.cz
Odkaz na članek na seznamu.
Odkaz na pokusný dokument(je ve stejné složce)
Odkaz na dlouhý dokument
Odkaz na 2.kapitola dlouhého dokumentu
Odkaz na 26.kapitola dlouhého dokumentu
pokusný dokument se otevře v nový okně
dlouhý dokument se otevře v nový okně
tento dokument se otevře v okně jménem "gfgsji"
dlouhý dokument se otevře v nový okně jménem "gfgsji"

obrázky

Jak vložit obrázek

tady svými slovy...

Přiklady obrázků


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Curabitur vitae diam non enim vestibulum interdum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Aenean vel massa quis mauris vehicula lacinia. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Aliquam erat volutpat. In enim a arcu imperdiet malesuada. Etiam dictum tincidunt diam. Mauris tincidunt sem sed arcu. Aliquam ante. Sed convallis magna eu sem. Aliquam ornare wisi eu metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Praesent id justo in neque elementum ultrices. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Aliquam erat volutpat. Mauris dictum facilisis augue.

Integer malesuada. Maecenas aliques Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Duis pulvinar. Nunc tincidunt ante vitae massa. Praesent vitae arcu tempor neque lacinia pretium. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Mauris tincidunt sem sed arcu. Nullam sit amet magna in magna gravida vehicula. Aenean vel massa quis mauris vehicula lacinia. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Etiam commodo dui eget wisi. Integer imperdiet lectus quis justo. Aliquam erat volutpat. Sed ac dolor sit amet purus malesuada congue. Maecenas lorem. Nunc tincidunt ante vitae massa.

Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.Aenean fermentum risus id tortor. Curabitur bibendum justo non orci. Integer lacinia. Nullam at arcu a est sollicitudin euismod. 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. Pellentesque pretium lectus id turpis. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Pellentesque pretium lectus id turpis. Donec iaculis gravida nulla.