Příklady

Rozvržení stránky pomocí div
Rozvržení stránky pomocí mřížky
Webový formulář  Můj

2. ročník IKT
Tvorba webové stránky

Základy

Co je to webová stránka

Webová stránka je určitá stránka na určité adrese. WWW nám pomáhá zobrazit dokumenty na internetu po zadání URL adresy. Na pevném disku jednoho počítače jsou uloženy dokumenty a potom se po síti načítají do prohlížeče, který je zobrazí. WWW je zkratka pro World Wide Web, česky „světově rozsáhlá pavučina“ nebo „celosvětová síť“.

Struktura HTML dokumentu

HTML dokument se skládá z hlavičky <head> a těla <body>. V hlavičce najdeme různé informace o stránce, v těle je obsah stránky, který se zobrazí v prohlížeči.

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

značka párová/nepárová význam
<html> párová ohraničuje celý html dokument
<head> párová hlavička
<body> párová tělo dokumentu
<h1> párová nadpis nejvyšší úrovně
<p> párová odstavec
<a> párová odkaz
<pre> párová předformátovaný text
<table> párová tabulka
<tr> nepovinná řádek tabulky
<td> párová buňka tabulky
<br> nepárová zalomení řádku
<hr> nepárová horizontální čára
<img> nepárová obrázek


Oddělování

Rovná čára

Rovnou čáru vytvoříme nepárovím tagem <hr>, ten nám udělá horizontálně čáru přes celou stranu(jako na této stránce)
Vypadá to takto:
<hr>

Mezera/rozdělení

Když chceme udělat mezeru nebo oddělit npr. odstavec, použijeme nepárový tag <br>
Vypadá to takto:
<br>


Tabulka

Na vytvoření tabulky používáme tag <table>, a je párový. Do tabulky píšeme tagy <tr> - řádek, a <td> -buňka tabulky, do které píšeme. Tloušku tabulky určujeme díky "border=(číslo)" a šířku buněk díky "width=("...%")"
Vypadá to takto:
<table>
<tr><td> text v buňce</td><td> text v buňce</td></tr>
<tr><td> text v buňce</td><td> text v buňce</td></tr>
<table>

Ukázka:

text v buňcetext v buňce
text v buňcetext v buňce


Text

(zde dopíšu)

Nadpisy

Nadpisy mají celkem 6 úrovní, řadí se od <h1> jako nejdůležitější do <h6> jako méně důležité. Nadpis píšeme do párového tagu <h(úroveň, kterou chceme použít)>
Vypadá to takto:
<h4>Dlouuuuuuhý nadpis jako příklad</h4>

Ukázka:

Dlouuuuuuhý nadpis jako příklad


Odstavec

Odstavec píšeme do párového tagu <p>.
Vypadá to takto:


<p> Nějaký text, který chceme napsat do odstavce.</p>

Ukázka:

Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?


Předformátovaný text

Jiný způsob uspořádání je tzv. "předformátovaný text" , napíšeme párovou značku <pre> a do ní píšeme.
Vypadá to takto:
<pre> text,který chceme napsat </pre>

Ukázka:

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

Na vytvoření odkazu používáme tag <a>, je to párový tag. Do něj napíšeme text ,který chceme aby byl textem odkazu. Do tagu <a> napíšeme: href= "odkaz, který chceme otevřít". Když chceme použít odkaz na nějakou cizí webovou stránku musíme přidat http:// nebo https://
Vypadá to takto:
<a href="odkaz" > tento text je odkaz </a>

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na nějaký článek
Odkaz na pokusný dokument (je ve stejné složce)
Odkaz na druhý dokument
Odkaz na 2. kapitolu dlouhého dokumentu
Odkaz na 6. kapitolu dlouhého dokumentu
Krátky dokument se otevře v novém okně.
Dlouhý dokument se otevře v novém okně.
Tento dokument se otevře v okně jménem "kalibr".
Tento dokument se otevře v okně jménem "kalibr".


Obrázky

Jak vložit obrázek

Použijeme nepárový tag <img>, do něj napíšeme src="jméno obrázku.jpg", obrázek většinou máme na disku spolu s soubory naší webové stránky.
Vypadá to takto:
<img src:"obrazek.jpg">

Příklady obrázků


Příklady obrázků s textem

Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nullam eget nisl. Quisque tincidunt scelerisque libero. Integer pellentesque quam vel velit. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Curabitur bibendum justo non orci. Maecenas aliquet accumsan leo. Pellentesque ipsum. Praesent in mauris eu tortor porttitor accumsan. Maecenas libero.

Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 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?

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. In enim a arcu imperdiet malesuada. Maecenas sollicitudin. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam rhoncus aliquam metus. Sed ac dolor sit amet purus malesuada congue. Pellentesque pretium lectus id turpis. Cras elementum. Integer tempor.


Maecenas sollicitudin. Nullam rhoncus aliquam metus. Nunc tincidunt ante vitae massa. Aenean vel massa quis mauris vehicula lacinia. Etiam bibendum elit eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent id justo in neque elementum ultrices. Suspendisse sagittis ultrices augue. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Praesent in mauris eu tortor porttitor accumsan. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. In enim a arcu imperdiet malesuada. Maecenas sollicitudin. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam rhoncus aliquam metus. Sed ac dolor sit amet purus malesuada congue. Pellentesque pretium lectus id turpis. Cras elementum. Integer tempor. Maecenas sollicitudin.