Příklady

Rozvržení stránky pomocí bloku div
Rozvržení stránky pomocí mřížky
Formulářmuj

IKT - Tvorba webových stránek

Základy

Co je to webová stránka

Webová stránka je označení pro soubor dat zobrazovaný uživateli webovým prohlížečem.

Struktura HTML dokumentu

HTML dokumenty, jsou obyčejné textové soubory, které kromě vlastního textu obsahují formátovací značky, jež mohou textu přiřadit různý význam. Html tag obaluje celý HTML dokument, který je dále rozdělen na "head" = ta obsahuje informace hlavně pro prohlížeč. A "body" = kde je uložen fyzický obsah dokumentu.

Význam některých HTML značek

<html>   párová   ohraničuje celý HTML dokument
<html>   párová   hlavička
<p>   párová   odstavec

značka (Ne)Párová význam
<html> P ohraničuje celý HTML dokument
<head> P hlavička
<p> P odstavec
<br> N odřádkování
<hr> N horizontální čára

Pokud chceme data uspořádat do řádků a sloupců, můžeme použít HTML tabulku. (viz.výše).Jiný způsob uspořádání je tzv. "přeformátovaný text":

značka          význam
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
html   párová   ohraničuje celý html dokument
head   párová   hlavička
br   nepárová   odřádkování
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

Odkazy

Jak udělat odkaz

V první řadě je zapotřebí zkopírovat odkaz stránky. Uděláme si tagy, do kterých odkaz vložíme < a > & < /a >, za "a" napíšeme < href= > a rovnou za tím vložíme odkaz mezi závorky.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na článek , heh
Odkaz na pokusný dokument. (je ve stejné složce)
Odkaz na pokusný dlouhý dokument. (je ve stejné složce)
Odkaz na 98. kapitolu dlouhého dokumentu
Tento dokument se otevře v novém okně/panelu.
Tento dokument se otevře v novém okně/panelu jménem "pepan".
Tento dokument se otevře v novém okně/panelu jménem "pepan".

Obrázky

Jak vložit obrázek

Tady svými slovy...

Příklady obrázků

Donec vitae arcu. Aliquam erat volutpat. Fusce aliquam vestibulum ipsum. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Integer tempor. Sed convallis magna eu sem. Etiam egestas wisi a erat. Nullam eget nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Etiam posuere lacus quis dolor. Integer lacinia. Etiam dictum tincidunt diam. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aenean vel massa quis mauris vehicula lacinia. Sed convallis magna eu sem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam commodo dui eget wisi. Nulla est. Praesent in mauris eu tortor porttitor accumsan. Donec iaculis gravida nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Mauris metus. Phasellus rhoncus. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam neque. Ut tempus purus at lorem.

Donec vitae arcu. Aliquam erat volutpat. Fusce aliquam vestibulum ipsum. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Integer tempor. Sed convallis magna eu sem. Etiam egestas wisi a erat. Nullam eget nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Etiam posuere lacus quis dolor. Integer lacinia. Etiam dictum tincidunt diam. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aenean vel massa quis mauris vehicula lacinia. Sed convallis magna eu sem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.