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

tuto stránku spravuje A.Odvodyová

Základy

Co je to webová stránka?

Webová stránka je stránka na prohlížečích jako třeba např. Firefox, Chrome, InternetExplorer.... Udává nám informace, které jsou napsány v jazyce HTML. Webová stránka napsána v HTML jazyce osahuje řídící značky.

Struktura html dokumentu

Stránka začíná typem souboru, jaký typ souboru si zvolíme. My máme zvoleno typ souboru HTML. Potom následuje titulek. Náš titulek je "Struktura html dokumentu". Tělo se skádá z nadpisů h1-nadpis nejvyšší úrovně, h2-podnadpis, h3-podpodnadpis. A z odstavců, což je text pod zadaným nadpisem, které se píše se značkou p.

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

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

Na webovou stránku se obrázek přidá párovou značkou <img>. Parametrem "src" určím, jaký obrázek se zobrazí. Pokud je soubor ve stejném adresáři jako html dokument, stačí napsat hodnotu parametru "src" jen jméno souboru (do uvozovek). Jsou-li soubory s obrázky umístěny jinde, musím napsat cestu k nim.
Pokud neurčím jinak (to se bude probírat později), obrázek se chová v toku dokumentu jako samostatný odstavec. Není dobré obrázkem zakrýt moc místa, většinou je důležitý text. Zatím nechci míchat obrázky s textem ve stejném odstavci, vypadá to divně.

Pokud zapíšu obrázků víc, poskládají se vedle sebe až do šířky stránky.

Kdybych chtěl obrázky skládat pod sebe, musím zapsat tvrdé odřádkování <br>.

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 dokument2

Různé varianty HTML odkazů

Odkaz na dokument z minulého úkolu
Odkaz na seriál vyprávěj 3. řada
Odkaz na web pro uchazeče SUPŠ Zámeček
Odkaz na SUPŠ Zámeček
Odkaz na Seznam