2.ročník IKT - tvorba webových stránek

Základy

Co je to webová stránka?

Webová stránka je dokument, který váš webový prohlížeč (např. Firefox, Chrome, InternetExplorer, Opera, ...) získá od nějakého webového serveru a zobrazí jej. Přívlastek "webový" znamená, že se týká nejrozšířenější internetové aplikace zvané World-Wide-Web určené pro poskytování informací.

Webová stránka se zapisuje v jazyce HTML (HyperText Markup Language). Jak název napovídá, je to text, ve kterém se vyskytují řídící značky neboli tagy. HTML dokument tedy můžeme chápat jako zdrojový kód webové stránky.

Struktura html dokumentu

Celý html dokument je složen z hlavičky a těla. Hlavička je většinou krátká, obsahuje různé informace např. titulek okna nebo použité kódování. Celý obsah webové stránky je umístěn v těle html dokumentu. Je rozdělen na jednotlivé odstavce a proložen nadpisy a podnadpisy. Nadpisů může být až 6 úrovní.

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

značka	P/N	význam
<html>	P	ohraničuje celý html dokument
<head>	P	hlavička dokumentu
<body>	P	tělo dokumentu
<p>	P	odstavec
<br>	N	odřádkování
<hr>	N	vodorovná čára

značka   P/N   význam
============================================
<html>    P    ohraničuje celý html dokument
<head>    P    hlavička dokumentu
<body>    P    tělo dokumentu
<p>       P    odstavec
<br>      N    odřádkování
<hr>      N    vodorovná čára

Odkazy

Jak se dělá odkaz

Odkaz se tvoří tagem <a>. Tady svými slovy popíšeme ...

Příklady odkazů

Odkaz na seznam.cz
Odkaz na konkrétní článek na seznamu.
Odkaz na pokusný dokument ve stejné složce
Odkaz na dlooouhý dokument ve stejné složce
Odkaz na 1.kapitolu dlooouhého dokumentu
Odkaz na 15.kapitolu dlooouhého dokumentu
Tento odkaz se otevře v novém okně
Tento odkaz se otevře v novém okně
Tento odkaz se otevře v okně jménem Barbucha
Tento odkaz se otevře v okně jménem Barbucha
Odkaz na obrázek, na pdf soubor, na datový instalační soubor.
i-z-cz

Praktické příklady HTML stránek

* Rozvržení webové stránky postarším způsobem
* Rozvržení webové stránky typografickou mřížkou - CSS grid (CSS v.3)
* Rozvržení části webové stránky mřížkou
* Seriál o webovém formuláři: v.1 v.2 v.3 v.4 v.5 v.6

Obrázky

Jak vložit obrázek na webovou stránku

Na webovou stránku se obrázek přidá nepárovou značkou <img>. Tady svými slovy popíšeme ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pulvinar. Aliquam erat volutpat. Phasellus et lorem id felis nonummy placerat. Pellentesque pretium lectus id turpis. Praesent in mauris eu tortor porttitor accumsan. Nullam faucibus mi quis velit. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. In rutrum. Morbi scelerisque luctus velit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Nullam faucibus mi quis velit. Vivamus ac leo pretium faucibus.

Duis pulvinar. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Integer vulputate sem a nibh rutrum consequat. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Phasellus rhoncus. Curabitur vitae diam non enim vestibulum interdum. Aliquam erat volutpat. Mauris metus. Aliquam erat volutpat. Nunc dapibus tortor vel mi dapibus sollicitudin. Itaque earum rerum hic tenetur a sapiente delectus.

Příklady

obrázek mimo odstavec

Obrázek v odstavci

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Pellentesque sapien. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Maecenas lorem. Proin mattis lacinia justo. Phasellus et lorem id felis nonummy placerat. Aliquam erat volutpat. Aenean fermentum risus id tortor. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Maecenas libero.

Sestava více obrázků

Pokud zapíšu obrázků víc, poskládají se vedle sebe až do šířky stránky.

Kdybych chtěl obrázky skládat pod sebe, musím zapsat tvrdé odřádkování <br>.

Obtékané obrázky

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus faucibus molestie nisl. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien. Aliquam id dolor. In rutrum. Nunc auctor. Nullam rhoncus aliquam metus. Vivamus luctus egestas leo.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Mauris tincidunt sem sed arcu. Maecenas aliquet accumsan leo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Sed convallis magna eu sem. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Aenean fermentum risus id tortor. Pellentesque arcu. Nullam sit amet magna in magna gravida vehicula.

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Donec quis nibh at felis congue commodo. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Vivamus luctus egestas leo. Aliquam erat volutpat. Aenean fermentum risus id tortor. Nulla non lectus sed nisl molestie malesuada. Maecenas libero. Praesent vitae arcu tempor neque lacinia pretium. Aliquam in lorem sit amet leo accumsan lacinia. Donec iaculis gravida nulla. Mauris tincidunt sem sed arcu. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat.