2.rocnik IKT - tvorba webovych stranek

Stranku spravuje Marketa Machonova!

Zaklady

Co znamena webova stranka

Webova stranka je dokument, ktery vas webovy prohlizec (napr. Firefox, Chrome, InternetExplorer, ...) ziska od nejakeho weboveho serveru a zobrazi jej. Privlastek "webovy" znamena, ze se tyka nejrozsirenejsi internetove aplikace zvane World-Wide-Web urcene pro poskytovani informaci.

Cely html dokument je slozen z hlavicky a tela. Hlavicka je vetsinou kratka, obsahuje ruzne informace napr. titulek okna nebo pouzite kodovani. Cely obsah webove stranky je umisten v tele html dokumentu. Je rozdelen na jednotlive odstavce a prolozen nadpisy a podnadpisy. Nadpisu muze byt az 6 urovni.

Formatovani Textu

Webovy prohlizec si odstavce textu formatuje sam podle toho, jak ma siroke okno. Snadno si to overim tak, ze zkusim velikost okna zmenit - prohlizec si text preformatuje podle nove velikosti okna.

Usporadany (predformatovany) text

Pokud chci text usporadat do sloupecku, mohu pouzit tzv. predformatovany text. Ten prohlizec formatuje stejne, jak je zapsan ve zdrojovem kodu stranky. Text zobrazuje neproporcionalnimm pismem. Priklad pouziti:

--------------------------------
  Vyznam nekterych html znacek
--------------------------------
Znacka  (Ne)Parova        Vyznam
---------------------------------------------
html     P         ohranicuje cely dokument
head     P         hlavicka dokumentu
body     P         telo dokumentu
h1       P         nadpis nejvyssi urovne
p        P         odstavec (paragraph)
pre      P         predformatovany text
br       N         tvrdy konec radku (break)
hr       N         cara (horizontal row)
---------------------------------------------

Tabulka

Jinou moznosti, jak usporadat text, je vytvorit html tabulku. Je to trochu slozitejsi, ale nabizi to vice moznosti. Cela tabulka se sklada z radku a kazdy radek je rozdelen na jednotlive bunky:

Vyznam nekterych html znacek
Znacka (Ne)Parova Vyznam
<html> P ohranicuje cely dokument
<head> P hlavicka dokumentu
<body> P telo dokumentu
<h1> P nadpis nejvyssi urovne
<p> P odstavec (paragraph)
<pre> P predformatovany text
<br> N tvrdy konec radku (break)
<hr> N cara (horizontal row)

Obrazky

Na webovou stranku se obrazek prida parovou znackou <img>. Parametrem "src" urcim, jaky obrazek se zobraza. Pokud je soubor ve stejnem adresari jako html dokument, staci napsat hodnotu parametru "src" jen jmeno souboru (do uvozovek). Jsou-li soubory s obrazky umisteny jinde, musim napsat cestu k nim.
Pokud neurcim jinak, obrazek se chova v toku dokumentu jako samostatny odstavec. Neni dobre obrazkem zakryt moc mista, vetsinou je dulezity text.

Pokud zapisu obrazku vic, poskladaji se vedle sebe az do sirky stranky.

Kdybych chtel obrazky skladat pod sebe, musim zapsat tvrde odradkovani <br>.


Odkazy

Jak na to

Odkazy delaji z webove stranky silny informacni nastroj. Odkaz se vytvori tagem <a>. Parametrem "href" se urci cil odkazu. Tak jako u obrazku, pokud je cilovy dokument ve stejnem adresari, staci napsat jmeno souboru - viz.priklad
Toto je odkaz na sousedni dokument.

Ruzne varianty HTML odkazu

Odkaz na Dokument s jinym odkazem
Odkaz na Muj instagram profil
Odkaz na Klubovy instagram profil
Odkaz na Pozvanka na cringe discord server
Odkaz na Google
Odkaz na Dokument s Bloky