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 tvoří párovým tagem <a>. Část textu ohraničená tímto tagem bude fungovat jako odkaz na jinou webovou stránku. Na jakou stránku odkaz míří, určíme argumentem href.

Příklady odkazů

Odkaz na stránku seznam.cz
Odkaz na konkrétní článek na seznamu
Odkaz na pokusný dokument, který je na stejném místě
Odkaz na pokusný dlouhýýýýý dokument, který je na stejném místě
Okazy na 2.kapitolu dlouhého dokumentu
Okazy na 3.kapitolu dlouhého dokumentu
Okazy na předposlední kapitolu dlouhého dokumentu
Okazy 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 gabaďaba.

Obrázky

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

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

Obrázek se vloží do html stránky tagem <img>. Obrázek vložím pomocí zobáčku do kterého napíšu: img src= "obrázek který sem chcete vložit". A pak když chcete vložit i název obrázku napíšete alt= "název" a ukončíte zobáček

Příklady


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean vel massa quis mauris vehicula lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pulvinar.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean vel massa quis mauris vehicula lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pulvinar.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean vel massa quis mauris vehicula lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pulvinar.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean vel massa quis mauris vehicula lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pulvinar.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean vel massa quis mauris vehicula lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pulvinar.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean vel massa quis mauris vehicula lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis pulvinar.