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íť“.
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.
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 |
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>
Když chceme udělat mezeru nebo oddělit npr. odstavec, použijeme nepárový tag <br>
Vypadá to takto:
<br>
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ňce | text v buňce |
text v buňce | text v buňce |
(zde dopíšu)
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:
Odstavec píšeme do párového tagu <p>.
Vypadá to takto:
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?
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 .......................................................
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>
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".
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">
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.