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>

Pro vytvoření odkazu slouží tag <a> ve spojení s atributem href. Hodnotou atributu href je URL nebo-li adresa souboru na který chceme odkazovat.

Vložíme ho tagem <a> Tag <a> je párový a obaluje text, který má být odkazem. Vyžaduje atribut href, kde je cílová stránka, na kterou odkaz vede

Příklady odkazů

Odkaz na stránku seznam.cz
Odkaz na konkrétní článek
Odkaz na pokusný dokument, který je na stejném místě jako index.html
Odkaz na pokusný dlouhý dokument, který je na stejném místě jako index.html
Odkaz na pokusný dlouhý dokument
Odkaz an 1.kapitola 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 shdbhha.
Tento odkaz se otevře v novém okně jménem shdbhha.

Obrázky

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

Obrázek se vloží do html stránky tagem <a>

Obrázky vložíme pomocí tagu (jako image = obrázek). Setkáváme se s prvním tagem, který vyžaduje tzv. atributy.

Atributy se píší do špičatých závorek za název tagu, následuje rovnítko a obsah atributu je potom v uvozovkách.

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 E.Peteříková