2.ročník IKT - tvorba webových stránek

Základy

Co je to webová stránka?

Webová stránka je dokument, který váš webový prohlížeč (např. Firefox, Chrome, InternetExplorer, ...) získá od nějakého webového serveru a zobrazí jej. Přívlastek "webový" znamená, že se týká nejrozšířenější internetové aplikace zvané World-Wide-Web určené pro poskytování informací.

Webová stránka se zapisuje v jazyce HTML (HyperText Markup Language). Jak název napovídá, je to text, ve kterém se vyskytují řídící značky neboli tagy. HTML dokument tedy můžeme chápat jako zdrojový kód webové stránky.

Struktura html dokumentu

Celý html dokument je složen z hlavičky a těla. Hlavička je většinou krátká, obsahuje různé informace např. titulek okna nebo použité kódování. Celý obsah webové stránky je umístěn v těle html dokumentu. Je rozdělen na jednotlivé odstavce a proložen nadpisy a podnadpisy. Nadpisů může být až 6 úrovní.

Formátování textu

Webový prohlížeč si odstavce textu formátuje sám podle toho, jak má široké okno. Snadno si to ověřím tak, že zkusím velikost okna změnit - prohlížeč si text přeformátuje podle nové velikosti okna.

Uspořádaný (předformátovaný) text

Pokud chci text uspořádat do sloupečků, mohu použít tzv. předformátovaný text. Ten prohlížeč formátuje stejně, jak je zapsán ve zdrojovém kódu stránky. Text zobrazuje neproporcionálním písmem. Příklad použití:

--------------------------------
  Význam některých html značek
--------------------------------
Značka  (Ne)Párová        Význam
---------------------------------------------
html     P         ohraničuje celý dokument
head     P         hlavička dokumentu
body     P         tělo dokumentu
h1       P         nadpis nejvyšší úrovně
p        P         odstavec (paragraph)
pre      P         předformátovaný text
br       N         tvrdý konec řádku (break)
hr       N         čára (horizontal row)
---------------------------------------------

Tabulka

Jinou možností, jak uspořádat text, je vytvořit html tabulku. Je to trochu složitější, ale nabízí to více možností. Celá tabulka se skládá z řádků a každý řádek je rozdělen na jednotlivé buňky:

Význam některých html značek
Značka (Ne)Párová Význam
<html> P ohraničuje celý dokument
<head> P hlavička dokumentu
<body> P tělo dokumentu
<h1> P nadpis nejvyšší úrovně
<p> P odstavec (paragraph)
<pre> P předformátovaný text
<br> N tvrdý konec řádku (break)
<hr> N čára (horizontal row)

Obrázky

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. Etiam dictum tincidunt diam. Praesent in mauris eu tortor porttitor accumsan. 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. Aenean vel massa quis mauris vehicula lacinia. Fusce wisi. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Curabitur sagittis hendrerit ante. Nullam at arcu a est sollicitudin euismod. Integer lacinia. Vivamus porttitor turpis ac leo. Nunc dapibus tortor vel mi dapibus sollicitudin. Curabitur vitae diam non enim vestibulum interdum. Nunc auctor.

Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Fusce aliquam vestibulum ipsum. Aliquam erat volutpat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nullam sit amet magna in magna gravida vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis risus. Pellentesque sapien. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Praesent in mauris eu tortor porttitor accumsan. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nulla est. Donec vitae arcu. Nunc tincidunt ante vitae massa.

Praesent id justo in neque elementum ultrices. Praesent in mauris eu tortor porttitor accumsan. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Etiam dictum tincidunt diam. Vivamus ac leo pretium faucibus. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nunc auctor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cras elementum. Curabitur sagittis hendrerit ante. Vestibulum fermentum tortor id mi. Proin in tellus sit amet nibh dignissim sagittis. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt sem sed arcu. Praesent vitae arcu tempor neque lacinia pretium. Nulla non lectus sed nisl molestie malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Fusce nibh.

Donec quis nibh at felis congue commodo. Pellentesque pretium lectus id turpis. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Nulla quis diam. Donec iaculis gravida nulla. Cras elementum. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Etiam dictum tincidunt diam. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris tincidunt sem sed arcu. Etiam bibendum elit eget erat. Mauris dictum facilisis augue.

Odkazy

Jak na to

Odkazy dělají z webové stránky silný informační nástroj. Odkaz se vytvoří tagem <a>. Parametrem "href" se určí cíl odkazu. Tak jako u obrázků, pokud je cílový dokument ve stejném adresáři, stačí napsat jméno souboru - viz.příklad
Toto je odkaz na sousední dokument.

Různé varianty HTML odkazů

Rùzné varianty HTML odkazù

Odkaz na Pokusy s bloky
Odkaz na Škola Online
Odkaz na zamecekintranet
Odkaz na zámeèek fotografové
Odkaz na barokní sloh
Odkaz na google

Mádlíková