Praktické příklady

Rozvržení stránky prvky div
Rozvržení stránky mřížkou
Formulář   můj

2.ročník IKT - tvorba webových stránek

Základy

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.

Struktura HTML dokumentu

Celý html dokument je uzavřen do párového tagu Skládá se z hlavičky a těla. V hlavičce jsou uvedeny různé informace o stránce, tělo určuje obsah dokumentu.

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

značka (Ne)Párová význam
<html> P ohraničuje html dokument
<head> P hlavička dokumentu
<body> P tělo dokumentu
<h1> P nadpis nejvyšší úrovně
<p> P odstavec
<br> N tvrdé odřádkování
<hr> N horizontální čára

Pokud potřebujeme uspořádat text do řádků a sloupců, můžeme použít HTML tabulku - viz. výše. Jiný způsob uspořádání textu je tzv. "předformátovaný text":

--------------------------------------------         
 značka            význam
--------------------------------------------        
 html     párová   ohraničuje html dokument
 head     párová   hlavička dokumentu
 body     párová   tělo dokumentu
 br     nepárová   tvrdé odřádkování
--------------------------------------------     

Odkazy

Jak se dělá odkaz

Vybereme text nebo obrázek, který se má zobrazit jako odkaz. Stiskneme kombinaci kláves Ctrl+K. V okně Vložit hypertextový odkaz zadáme nebo vložíme svůj odkaz do pole Adresa.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na jeden článek na seznamu.
Odkaz na pokusný dokument (je ve stejné složce)
Odkaz na dlouhý dokument (je ve stejné složce)
Odkaz na 1.kapitolu dlouhého dokumentu(je ve stejné složce)
Odkaz na 99.kapitolu dlouhého dokumentu(je ve stejné složce)
Tento dokument se otevře v novém okně nebo v nové kartě
Tento dokument se otevře v novém okně jménem "bambulka"
Tento dokument se otevře v novém okně nebo v nové kartě
Tento dokument se otevře v novém okně jménem "bambulka"

Obrázky

Jak se vloží obrázek

tady svými slovy

přikldy

Mauris metus. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer imperdiet lectus quis justo. Nullam faucibus mi quis velit. Fusce suscipit libero eget elit. Fusce aliquam vestibulum ipsum. Vivamus porttitor turpis ac leo. Nunc dapibus tortor vel mi dapibus sollicitudin. Praesent in mauris eu tortor porttitor accumsan. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. In dapibus augue non sapien. Duis condimentum augue id magna semper rutrum. Nullam faucibus mi quis velit.

Etiam posuere lacus quis dolor. Fusce consectetuer risus a nunc. Nulla pulvinar eleifend sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean vel massa quis mauris vehicula lacinia. Nulla pulvinar eleifend sem. Et harum quidem rerum facilis est et expedita distinctio. Vivamus porttitor turpis ac leo. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Quisque tincidunt scelerisque libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Mauris dictum facilisis augue. Nullam dapibus fermentum ipsum. Etiam bibendum elit eget erat. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. In rutrum. Phasellus et lorem id felis nonummy placerat.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam sed tellus id magna elementum tincidunt. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nam sed tellus id magna elementum tincidunt. Donec quis nibh at felis congue commodo. Fusce suscipit libero eget elit. Duis viverra diam non justo. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Mauris elementum mauris vitae tortor. In convallis. Etiam commodo dui eget wisi. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Suspendisse nisl.