Příklady

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

2.ročník IKT - tvorba webu

Základy

Co je to webová stránka

Webová stránka je informační dokument, který může zobrazit nějaký webový klient (Firefox, Chrome, Opera, Explorer, elinks, ...). O stránku klient většinou žádá a obdrží ji od webového serveru (Apache, IIS, ...), což je program, který běží na nějaké adrese v Internetu. Zdrojový kód webové stránky se zapisuje značkovacím jazykem HTML (HyperText Markup Language).

Struktura HTML dokumentu

Celý html dokument se skládá ze 2 částí - hlavičky <head> a těla <body>. Hlavička obsahuje různé informace o stránce, tělo určuje obsah dokumentu. Tělo dokumentu je rozčleněno do odstavců <p>, mezi nimiž jsou nadpisy. Nadpisů můžeme použít až 6 úrovní <h1> až <h6>.

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed convallis magna eu sem. Etiam egestas wisi a erat. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Vivamus porttitor turpis ac leo.

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
Odkaz na 99.kapitolu dlooouhého dokumentu
Tento dokument se otevře v novém okně/novém panelu.
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á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.