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 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 vytvoří tagem <a>. Vše, co je mezi značkami a bude sloužit jako odkaz (tzn. bude klikatelné).

Odkaz do jiného webu musí obsahovat http://-to je absolutní adresování příklad lahref="http:// www.seznam.cz " >seznam la/> odkaz na soubor stránka. html ležící v adresáři o úroven výš (dvě tečky znamenají úroven výš): příklad lahref="../stránka.html">odkazdo vyššího adresáře la/> otevření odkazu do nového okna: příklad lahref="stránka.html"target="_blank"> odkaz na seznam do nového okna l/a>

Příklady odkazů

Odkaz na seznam.
Odkaz na dlouhý dokument.
Odkaz na pokusný dokument.
Odkaz na 3. kapitolu dlouhého dokumentu.
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně jménem Lojza.
Tento odkaz se otevře v novém okně jménem Lojza.

Praktické příklady html stránek

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

Obrázky

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

Obrázek se vloží do html stránky tagem <img>. Obrázek se do stránky vloží načtený z obrázkového souboru. Tag &src& umístění souboru s obrázkem. Tag img src různé adresy obrázků pro různou šířku prohlížeče. Tag šířka a výška. Přípustné jsou soubory typu *.gif,*.jpg a *.png.

Příklady

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Etiam egestas wisi a erat. Aenean id metus id velit ullamcorper pulvinar. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam erat volutpat. Integer pellentesque quam vel velit. Nullam sit amet magna in magna gravida vehicula. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Integer pellentesque quam vel velit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris metus. Aliquam ornare wisi eu metus. Aliquam erat volutpat. In convallis.

Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Duis viverra diam non justo. Integer tempor. Etiam neque. Maecenas libero. Praesent dapibus. Sed ac dolor sit amet purus malesuada congue. 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. Praesent dapibus. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Aliquam in lorem sit amet leo accumsan lacinia. Quisque tincidunt scelerisque libero. Phasellus faucibus molestie nisl. Sed ac dolor sit amet purus malesuada congue. Maecenas libero. Nunc tincidunt ante vitae massa. Aenean placerat.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec quis nibh at felis congue commodo. Mauris metus. Duis viverra diam non justo. Proin mattis lacinia justo. Aliquam erat volutpat. Integer imperdiet lectus quis justo. In dapibus augue non sapien. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.

Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nunc dapibus tortor vel mi dapibus sollicitudin. Fusce tellus. Proin mattis lacinia justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut tempus purus at lorem. Quisque porta. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.