Tvorba webových stránek

Základy

Co je to webová stránka

Samostatná práce 29.9.2025 15'
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ornare wisi eu metus. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Fusce wisi. Maecenas libero. Nullam sit amet magna in magna gravida vehicula. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Aliquam erat volutpat. Fusce suscipit libero eget elit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis.

Struktura html dokumentu

Celý html dokument je ohraničen párovým tagem <html>. Je složen z hlavičky (párový tag <head>) a těla (párový tag <body>).
Hlavička může být krátká - v tom případě obsahuje jen nejnutnější informace o stránce např. titulek okna nebo použité kódování. Může ale být daleko obsáhlejší, pokud je v ní uveden i např. stylopis nebo nějaký javascriptový kód.
V těle html dokumentu je uveden obsah webové stránky. Ten lze strukturovat pomocí nadpisů a podnadpisů, kterých může být až 6 úrovní. Hlavní nadpis je určen párovým tagem <h1> a bývá na stránce jen jednou. Další úrovně nadpisů jsou tvořeny tagy <h2> až <h6>.
Vlastní textový obsah webové stránky musí být vždy uzavřen do nějakého blokového prvku - např. do odstavce <p>.

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

značka (ne)párová význam
<html>  P ohraničuje celý html dokument
<h1>  P hlavní nadpis
<h2>  P podnadpis
<p> P odstavec textu
<br> N odřádkování
<hr> N vodorovná čára
----------------------------------------
značka  (ne)párová    význam
----------------------------------------
html     P            celý html dokument
h1       P            hlavní nadpis
br       N            odřádkování
----------------------------------------

Odkazy

Jak vytvořit odkaz

Samostatná práce 8.12.2025, 20'

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na konkrétní článek na portále seznam.cz
Odkaz na pokusný dokument
Odkaz na pokusný dlooooooouhý dokument
Odkaz na 8.kapitolu dlouhého dokumentu
Odkaz na obrázek
Odkaz na soubor .pdf
Odkaz na instalační soubor Windows
Tento obrázek se zobrazí v novém panelu
Tyto obrázky obr.1 obr.2 obr.3 se zobrazí v panelu jménem blablabla

3.dokument - rozvržení stránky pomocí bloků <div>
4.dokument - rozvržení stránky mřížkou
5.dokument - responsive web design
6.dokument - webový formulář

Obrázky

Jak vložit obrázek

Připraveno pro samostatnou práci, na kterou nedošlo :-(

Příklady obrázků

Aenean id metus id velit ullamcorper pulvinar. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Duis condimentum augue id magna semper rutrum. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Integer tempor. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Duis viverra diam non justo. Pellentesque pretium lectus id turpis. Ut tempus purus at lorem. Aenean id metus id velit ullamcorper pulvinar.


házenkářky

Nullam dapibus fermentum ipsum. Donec iaculis gravida nulla. Integer in sapien. Nulla pulvinar eleifend sem. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis condimentum augue id magna semper rutrum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Maecenas sollicitudin. Donec iaculis gravida nulla. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam lectus justo.