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.

Ahoj, jak se máš? Jak vám dupou králíci? Žluťoučký kůň, ďábelské ódy. Nazdar, čau !!!

Odkazy

Jak se dělá odkaz

Odkaz se vytvoří tagem <a>

Důležitým atributem je tzv.: Href. Href nám říká, jaká stránka se nám zobrazí po rozkliknutí.

Hodnotou atributu href je URL nebo-li adresa souboru na který chceme odkazovat.

Pro vytvoření odkazu slouží tag <a> ve spojení s atributem href (Hypertext Reference).

Příklady odkazů

Odkaz na stránku seznam.cz.
Odkaz na konkrétní článek.
Odkaz na pokusný dokument, který je na stejném nístě jako index.html.
Odkaz na pokusný dlouhý dokument.
Odkaz an 1.kapitoladlouhého dokumentu.
Odkay na předposlední kapitoladlouhého dokumentu.
Odkay na poslední kapitoladlouhého dokumentu.
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně jménem Žofie.
Tento odkaz se otevře v novém okně jménem Žofie..
Rozvržení stánky vebovou mřížkou

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 vlastní formulář

obrázky

Jak uložit obrázek

Obrázky se vloží do html stránky nepárovím tagem <a>

Tady svými slovy vysvětlím

Obrázek vložíme na webovou stránku pomocí tagu <img>.

Začneme závorkou, do stránky si vložíme obrázek načtený z obrázkového souboru napíšeme tag img src a v uvozovkách napíšeme jméno souboru fotografie jak jsme si ji uložily.

příklady

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Praesent dapibus. Etiam posuere lacus quis dolor. In rutrum. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nullam dapibus fermentum ipsum. Suspendisse sagittis ultrices augue. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Mauris tincidunt sem sed arcu. Vestibulum fermentum tortor id mi. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Vivamus porttitor turpis ac leo. Nulla pulvinar eleifend sem.

Aliquam erat volutpat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Aenean placerat. Vivamus luctus egestas leo. 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? Aenean id metus id velit ullamcorper pulvinar. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Duis viverra diam non justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc tincidunt ante vitae massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis risus. Etiam egestas wisi a erat. Morbi scelerisque luctus velit. Aenean fermentum risus id tortor. Nullam sit amet magna in magna gravida vehicula. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Curabitur vitae diam non enim vestibulum interdum.


Etiam dictum tincidunt diam. Et harum quidem rerum facilis est et expedita distinctio. Pellentesque ipsum. Vivamus ac leo pretium faucibus. Integer vulputate sem a nibh rutrum consequat. Fusce aliquam vestibulum ipsum. Proin mattis lacinia justo. Etiam neque. 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. Quisque tincidunt scelerisque libero. Nullam sit amet magna in magna gravida vehicula.

Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus rhoncus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nunc dapibus tortor vel mi dapibus sollicitudin. Integer vulputate sem a nibh rutrum consequat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus rhoncus. Integer lacinia. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nunc auctor. Etiam neque. Duis pulvinar. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent in mauris eu tortor porttitor accumsan. Maecenas libero. Fusce nibh. Duis risus. Fusce consectetuer risus a nunc.

Tuto stránku spravuje R.Konášová