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

Základy

Co je to webová stránka?

Webová stránka je dokument, který webový prohlížeč (např. Chrome, Firefox) převezme od nějakého webového serveru a zobrazí ho jako přívlastek webový.To znamená, že se to týká nejrozšířenější internetové aplikace World-Wide-Web ,která je určená pro poskytování informací.

Webová stránka se zapisuje v jazyce HTML (HyperText Markup Language).Je to text, ve kterém se vyskytují tagy. Můžeme říct,že je HTML dokument je něco jako zdrojový kód webové stránky.

Struktura html dokumentu

Celý html dokument se skládá z hlavičky a těla. Hlavička je většinou krátká, protože obsahuje různé informace např. jen titulek okna nebo použité kódování. Celý obsah webové stránky se nachází v těle html dokumentu. Ten je rozdělen v jednotlivých odstavcích a prokládán nadpisy a podnadpisy.Může být až 6 úrovní nadpisů.

Formátování textu

Webový prohlížeč si odstavce textu formátuje podle šířky okna. Ověřím to tak, že zkusím velikost okna změnit - prohlížeč si text pak přeformátuje podle velikosti nového okna.

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

Pokud text uspořádám do sloupečků, mohu použít tzv. předformátovaný text. Ten prohlížeč formátuje stejně,podle zapsáného textu ve zdrojovém kódu stránky. Text zobrazuje neproporcionální písmena. 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. To je trochu složitější. 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

Na webovou stránku se obrázek přidá párovou značkou <img>. Parametrem "src" určím, který obrázek se zobrazí. Pokud je soubor ve stejném adresáři jako html dokument, stačí když napíšu hodnotu parametru "src" jen jméno souboru (do uvozovek). Jsou-li soubory s obrázky umístěny jinde, musím k nim napsat cestu.
Důležitý text,proto obrázky nezakrývají moc místa.

61446ca98d3f240c353531854c38ea96.jpg, 12kB

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

kitten_field_jump.jpeg, 92kB _aH7liHbZc1DOB_eXeLFS4EsPby2Onvsm_i2TrfPCsU.jpg, 71kB Helping-your-new-cat-or-kitten-settle-in-1.png, 1,1MB kitten-day-640x514.jpg, 69kB

Pokud chci obrázky skládat pod sebe, musím zapsat tvrdé odřádkování <br>.

_aH7liHbZc1DOB_eXeLFS4EsPby2Onvsm_i2TrfPCsU.jpg, 71kB 61446ca98d3f240c353531854c38ea96.jpg, 12kB

Odkazy

Jak na to

Odkazy jsou z webové stránky jedny ze silných informačních nástrojů.Vytvoří se tagem <a>. Parametrem "href" se určí cíl odkazu. dokument ve stejném adresáři, stačí napsat jméno souboru - viz.příklad

varianty HTML odkazů

Odkaz na bloky
Odkaz na webový prohlížeč google
Odkaz na intranet zámeček
Odkaz na
školní web SUPŠ Zámeček
Odkaz na odkaz na školu online