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, nacházející se na určité adrese

Struktura HTML dokumentu

Dokument html se skládá z těla a hlavičky. Tělo html dokumentu je delší částí, jelikož v sobě má celý obsah webové stránky. Dělí se na nadpisy, podnadpisy a jednotlivé ostavce. Může být použito až 6 úrovní nadpisů. Hlavička bývá krátká, obsahuje informace jako použité kódování, nebo titulek

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
<body> P tělo dokumentu
<h1> P nadpis nejvyšší úrovně
<p> P odstavec
<br> N zalomení řádku
<hr> N horizontální čára

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

Díky odkazům mohou být webové stránky silnější zdroj informací. Odkaz se vytváří pomocí tagu <a>. Parametrem "href" se určí cíl odkazu. Tak jako u obrázků, pokud je cílový dokument ve stejném adresáři, stačí napsat jméno souboru.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na nějaký článek na seznamu.
Odkaz na pokusný dokument (je ve stejné složce)
Odkaz na dloooooouhý dokument
Odkaz na 2.kapitolu dlooouhého dokumentu
Tento dokument se otevře v novém okně Tento dokument se otevře v novém okně/novém panelu.
Tento dokument se otevře v okně jménem "culibrk"
Tento dokument se otevře v okně jménem "culibrk"

Obrázky

Jak vložit obrázky

tady svými slovy...

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.