Tuto stránku spravuje Kateřina Vlasta Šebková

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

Základy

Co je to webová stránka

Webová   stránka je jedna určitá stránka na
Webová   stránka je jedna určitá stránka na
Webová   stránka je jedna určitá stránka na
jedné určité adrese. Zobrazuje se jako dokument internetového prohlížeče po zadání příslušné URL adresy, většinou pomocí World Wide Webu (WWW).

Data jsou psána kódem pomocí značkovacího jazyka HTML nebo XHTML a kaskádových stylů CSS. Html dokument je zdrojovým kódem webové stránky.

Struktura html dokumentu

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

: )

Odkazy

Jak se dělá odkaz

Když chceme aby text sloužil jako odkaz, musíme mezi tagy < a > vložit odkaz na onu stránku. Před zkopírovaný odkaz ještě musíme vložit <href=>. Zároveň na začátek a konec zkopírovaného odkazu musíme napsat uvozovky nahoře. Před konečné < /a > napíšeme slovo, či větu, které chceme, aby fungovali jako odkaz. Když nikde nic nevynecháme a nepokazíme, po uložení by se na stránce měl objevit modrý text, na který když klikneme, otevře nám stránku, kterou jsme chtěli. (Všechny povely napíšeme bez mezer)

Příklady odkazů

Odkaz na stránku seznam.cz Odkaz na z Odkaz na pokusný dokument, který je na stejném místě jako index.html.
Odkaz na pokusný dlooouuuhý dokument, který je na stejném místě jako index.html.
Odkaz na 2.kapitolu dlouhého dokumentu.
Odkaz na předposlední kapitolu dlouhého dokumentu.
Odkaz na poslední kapitolu dlouhého dokumentu.
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně jménem Ghostface.
Tento odkaz se otevře v novém okně jménem Ghostface.

Praktické příklady html stránek

Rozvržení webové stránky starším způsobem - pomocí bloků <div>
Rozvržení webové stránky webovou mřížkou
Webový formulář: verze1
Můj webový formulář:
mujvlastniformular

Obrázky

Jak vložit obrázek do html stránky

Pokud chceme na stránku vložit obrázek, musíme si ho napřed uložit někam do počítače. Napřed napíšeme < a href=""> . Do uvozovek napíšeme název fotky, kterou chceme na stránce mít. Řádku zakončíme < /a >. Poté by se na stránce měl objevit obrázek, který jsme tam mít chtěli, tedy pkud jsme všechno udělali správně. (Všechny povely napíšeme bez mezer)

Příklady

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris elementum mauris vitae tortor. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Mauris tincidunt sem sed arcu. Nullam dapibus fermentum ipsum. Vestibulum fermentum tortor id mi. Duis risus. Etiam egestas wisi a erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nullam eget nisl.



Fusce consectetuer risus a nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Curabitur vitae diam non enim vestibulum interdum. Donec quis nibh at felis congue commodo. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Etiam commodo dui eget wisi. Aliquam ornare wisi eu metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas libero.




Fusce nibh. Nunc dapibus tortor vel mi dapibus sollicitudin. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Fusce aliquam vestibulum ipsum. Etiam commodo dui eget wisi. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. 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. Aliquam in lorem sit amet leo accumsan lacinia. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Aenean fermentum risus id tortor.

Curabitur sagittis hendrerit ante. Et harum quidem rerum facilis est et expedita distinctio. Etiam commodo dui eget wisi. 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. In rutrum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Aliquam erat volutpat. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam rhoncus aliquam metus. 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. Praesent dapibus. Etiam dictum tincidunt diam. Suspendisse nisl. Curabitur vitae diam non enim vestibulum interdum. Fusce tellus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? In rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tincidunt ante vitae massa. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus.