2. ROČNÍK IKT - TVORBA WEBOVÝCH STRÁNEK

Základy

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?

Odkaz se tvoří tagem <a>.

Odkaz je stručnou informací o internetové stránce. Uvnitř elementu <a> se může objevit skoro cokoliv. Obsahuje název, popisek a adresu URL, na kterou můžete kliknout a zobrazit si tak danou stránku ve svém internetovém prohlížeči. Často se odkazem obaluje obrázek, který tak bude celý sloužit jako odkaz.

Vše, na co kliknete, a přenese Vás zase na jiné webové stránky, je v podstatě odkaz - ať už kliknete na obrázek nebo zmodralý, podtržený text, vždy se jedná o odkaz, který Vás přesměruje na jinou www stránku.

Příklady odkazů

Odkaz na seznam.cz
Odkaz na sportovní článek na seznamu.
Odkaz na pokusný dokument
Odkaz na dlouhý dokument
Odkaz na 1. kapitolu dlouhého dokumentu
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ě
Tento odkaz se otevře v novém okně jménem Osvald
Tento odkaz se otevře v novém okně jménem Osvald

Praktické příklady HTML stránek

Rozvržení webové stránky pomocí prvků div
Rozvržení webové stránky mřížkou
Webový formulář verze 1
Můj vlastní formlář
Známkování

Obrázky

Obrázek vložím na webovou stránku nepárovým tagem <img>, který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je src, totiž umístění obrázku.

Doporučuje se zadávat rozměry obrázků jako parametry tagu img. Obrázkům ve stránkách se obvykle zadávají jejich skutečné rozměry. Pokud se uvedou rozměry jiné, obrázek změní zobrazení. Takto se dají obrázky zmenšovat, zvětšovat a deformovat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id metus id velit ullamcorper pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus et lorem id felis nonummy placerat. Nulla non arcu lacinia neque faucibus fringilla. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vitae arcu tempor neque lacinia pretium. Curabitur vitae diam non enim vestibulum interdum. Morbi scelerisque luctus velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris elementum mauris vitae tortor. Etiam neque. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Lorem ipsum dolor sit amet, consectetuer adipiscing elit.




Integer pellentesque quam vel velit. 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? Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Maecenas sollicitudin. 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. In dapibus augue non sapien. Nam quis nulla. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Phasellus et lorem id felis nonummy placerat. In enim a arcu imperdiet malesuada. Morbi scelerisque luctus velit. Aenean placerat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Vivamus luctus egestas leo. In enim a arcu imperdiet malesuada. Vivamus ac leo pretium faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Tuto stránku spravuje K. Karpíšková