Tvorba webových stránek


Základy

Co je to webová stránka

Samostatná práce 24.9.2025 15'
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nibh. Etiam bibendum elit eget erat. In convallis. Etiam neque. Suspendisse nisl. In dapibus augue non sapien. Aliquam ante. Donec vitae arcu.

Integer pellentesque quam vel velit. Duis viverra diam non justo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nunc auctor. Fusce nibh. Etiam bibendum elit eget erat. In convallis. Etiam neque.

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

Odkazy

Jak se dělá odkaz

Samostatná práce 3.12.2025, 30'

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na konkrétní článek na portále seznam.cz
Pokusný dokument 1
Pokusný dloooooouhý dokument 2
Odkaz na 8.kapitolu dlouhého dokumentu
Odkaz na obrázek
Odkaz na .pdf soubor
Odkaz na instalační soubor Windows
Tento obrázek se otevře v novém panelu
Tyto obrázky obr1 obr2 obr3 se otevřou v panelu jménem puf

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říklady obrázků

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pulvinar. Proin in tellus sit amet nibh dignissim sagittis. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus.


Aliquam erat volutpat. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.

Vivamus luctus egestas leo. Nullam at arcu a est sollicitudin euismod. Integer imperdiet lectus quis justo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Nunc dapibus tortor vel mi dapibus sollicitudin. Suspendisse sagittis ultrices augue. Maecenas lorem. Phasellus faucibus molestie nisl. Aliquam erat volutpat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus.