Image
1.6.2016 0 Comments

Vytvárame WWW stránky / 1. časť

Späť na úvod >> Späť na seriál

Vitajte pri prvej časti nášho nového seriálu Vytvárame WWW stránky. Tento seriál je určený najmä pre začiatočníkov, ktorí ne­ majú skúsenosti s tvorbou webových stránok. Budeme sa venovať najmä jazyku HTML (HyperText Markup Language), v ktorom budeme naše WWW stránky vytvárať. Je to asi najjednoduchší programovací jazyk. Preberieme ho od najjednoduchších tagov až po rámce a vnorené tabuľky. Keď už budeme tento jazyk ovládať, ukážeme si, ako naše stránky umiestniť na internet, ako ich spravovať, zlepšovať, propagovať... Sa­ mozrejme, webovú stránku si nemusíte vyrobiť sami. Špecializujú sa na to rôzne firmy. Ak si dáte v takejto firme webovú stránku vyhotoviť, máte zaručenú vysokú kvalitu spracovania a dizajnu, ale ceny sa pohybujú v tisícoch. Preto ak máte čas a odhodlanie naučiť sa niečo nové, tento seriál je určený práve pre vás.

HTML editor. Na tvorbu našich we­bových stránok budeme potrebovať nejaký editor HTML. Editory HTML sa delia na dve veľké skupiny, a to „normálne“ a WYSIWYG. Aký je medzi nimi rozdiel? V prvom type editora HTML zadávate tagy HTML až po uložení a prezretí v internetovom prehliadači (browseri). Skratka WYSIWYG znamená What You See Is What You Get, teda čo vidíte, to aj dostanete. Edi­ tory v týchto dvoch skupinách by som ešte rozdelil na jednoduché, poloprofesionálne a profesionálne. Toto rozdelenie je oveľa zreteľnejšie pri editoroch WYSIWYG. Medzi jednoduché editory WYSIWYG by som zaradil programy typu Cool Page. K poloprofesionálnym po­ tom patria programy, ktoré sa dodávajú s Internet Explo­ rerom (FrontPage Express) a s Netscape Communi­ catorom (Netscape Composer). Profesionálne nástroje WYSIWYG na tvorbu webových stránok sa vyznačujú nie najnižšou cenou; sú to napríklad Micro­ soft FrontPage a Adobe Pagemill. „Nor­ málne“ editory HTML sú niečo ako klasický Notepad, len s tým rozdielom, že obsahujú zvýraznenie v syntaxi a tagy nemusíte písať, ale ich môžete priamo vkladať. Profesionálny editor tohto typu je napríklad HotDog Professional a neprofesionálny EditPad. Všetky spomínané editory HTML bežia pod Windows. Ak používate Linux, ako editor WYSIWYG odporúčam Netscape Composer. Ak sa rozhodnete pre poctivú „ručnú prácu“, tak sa vám vý­ borne hodí VIM. Obidva spomínané editory by mala obsahovať každá distribúcia Linuxu. Pýtate sa, ako sa rozhodnúť? WY­ SIWYG editory sa hodia, ak neovládate jazyk HTML a chcete rýchlo a ľahko vytvoriť nejakú webovú stránku. My si však zvolíme tú druhú cestu. 

Čo budeme potrebovaŤ? V našom seriáli nebudeme pracovať s editormi WYSIWYG, pretože sa chceme naučiť jazyk HTML. Na začiatok nám postačí súčasť Windows, a to Poznámkový blok (Štart/Programy/Príslušenstvo/Po­ -
z­ námkový blok). Aby sme si mohli tieto súbory HTML prezerať, potrebujeme aj nejaký browser. Môžeme použiť napríklad Internet Explorer alebo Netscape Navi­ gator. Všetko už máme pripravené, takže do toho!

Tagy. Ako som už spomínal, každý sú­ bor HTML obsahuje tagy. Tie hovoria browseru, ako má zobraziť text, obrázok ale­ bo iný objekt. Tagy sú uzatvorené medzi znakmi < a >. Poznáme dva druhy tagov: párové a nepárové.

- Párové tagy majú uvádzaciu a uzatváraciu časť. Uzatváracia časť obsahuje vždy /. Je nevyhnutné, aby párové tagy boli vždy uzatvorené, inak by mohlo dôjsť k nekorektnému zobrazeniu dokumentu HTML. Pred­ stavme si, že chceme napríklad použiť tučné písmo. Pred začiatok textu, ktorý má byť takto napísaný, vložíme uvádzací tag (v tomto prípade <b>) a na koniec textu zasa uzatvárací tag (</b>).
- Nepárové tagy sa skladajú iba z jednej značky. Používajú sa najmä pri formátovaní. Príkladom takéhoto tagu je <br>, kto­ rý zalamuje riadok.

Štruktúra dokumentu HTML. Teraz si ukážeme, akú štruktúru musí obsahovať každý dokument HTML.
<HTML>
<HEAD>

obsah hlavičky

</HEAD>
<BODY>
.
.
.

obsah dokumentu

.
.
.
</BODY>
</HTML>

V tejto štruktúre si môžeme všimnúť zá­ kladné tagy HTML: HTML, HEAD a BODY.
Ako ste si určite všimli, všetky tieto ta­ gy sú párové:
- <HTML> Tento tag sa vždy vkladá na začiatok dokumentu. Určuje, že ide o do­ kument vo formáte HTML. Jeho uzatvárací variant </HTML> sa vkladá vždy na úplný koniec dokumentu.
- <HEAD> Tento tag určuje hlavičku do­ kumentu HTML. V hlavičke môžu byť ob­ siahnuté údaje ako názov stránky, kľúčové slová, meno autora a podobne. Tag uzavrieme </HEAD>.
- <BODY> Predstavuje najpodstatnejšiu časť – telo dokumentu. Tento tag sa vždy vkladá až za uzavretú hlavičku HTML do­ kumentu. Jeho uzatvárací tag </BODY> sa spravidla vkladá tesne pred koniec dokumentu – teda pred tag </HTML> .

Teraz si ukážeme, ako vytvoríme našu prvú WWW stránku.
Názov WWW stránky. Kaž­ dá WWW stránka musí mať svoj názov, ktorý sa zobrazí v hornej lište browsera. Tento názov by mal byť stručný, jasný a vý­ stižný. Názov WWW stránky sa vkladá vždy do hlavičky (medzi tagy <HEAD> a </HEAD> ) a je ohraničený tagmi <TITLE> a </TITLE>. Našej prvej WWW stránke dáme preto výstižný názov Naša prvá WWW stránka. Potom bude dokument HTML vyzerať takto:

<HTML>
<HEAD>
<TITLE> Naša prvá WWW stránka </TITLE>
</HEAD>
y
.
.
.

 obsah dokumentu

.
.
.
</BODY>
</HTML>

Text a základné formátovanie. Náš dokument HTML musí obsahovať, samozrejme, aj nejaký text. Ten vkladáme vždy do tela dokumentu (medzi <BODY> a </BODY> ).  Ako určite vieme, písmo môže byť normálne, tučné alebo kurzíva. Všetky tieto typy písma môžu byť aj podčiarknuté. Na takéto formátovanie textu slúžia tieto tagy:
- <b> Určuje, že písmo má byť typu bold, teda tučné. Je to párový tag, preto ho uzavrieme vložením </b>
Príklad: Toto je <b> tučný </b> text.
Ukážka: Toto je tučný text.

- <i> Určuje, že písmo má byť typu italic, teda kurzíva. Aj tento tag je párový, preto ho uzavrieme </i>.
Príklad: Toto je <i> šikmý </i> text.
Ukážka: Toto je šikmý text.

- <u> Určuje, že text má byť podčiarknutý. Tento tag môžeme kombinovať s predchádzajúcimi dvoma. Ani tu nesmieme zabudnúť na uzatvorenie </u>.
Príklad: Toto je <u> podčiarknutý </u> text.
Ukážka: Toto je podčiarknutý text.

- <br> Je to nepárový tag, ktorý sa používa na zalamovanie riadkov. Ak stlačíme v editore ENTER a posunieme sa na nový riadok, neznamená to, že aj v browseri to bude nový riadok.
Príklad: Tento text je napísaný <br> v dvoch riadkoch
Ukážka: Tento text je napísaný
             v dvoch riadkoch

Teraz by sme už mali byť schopní vytvoriť jednoduchý dokument HTML s názvom,  použitím základných druhov písma a zalamovaním riadkov. Ten môže vyzerať na­ príklad takto:

<HTML>
<HEAD>
<TITLE> Naša prvá WWW stránka </TITLE>
</HEAD>
<BODY>

Vo formáte HTML poznáme tri základné druhy písma : <br>

normálne <br>
<b>tučné </b> <br>
<i>kurzíva </i> <br>
<br>
<u> Kombinácia <b> môže </b> </u> vyzerať aj <u> <i> takto </i> </u> <br>
<br>

Všimnite si, že koniec riadka v editore neznamená aj koniec riadka v skutočnosti <br> Browser to nerešpektuje. Vytvorí nový riadok až po zadaní značky br.

</BODY>
</HTML>

Tento súbor teraz uložíme s príponou html alebo htm a otvoríme v browseri. 
Nabudúce. Tentoraz sme si ukázali základy štruktúry HTML a základy práce s textom. Nabudúce sa budeme venovať ďalším možnostiam formátovania textu, definujeme obrázok v pozadí, farbu pozadia, textu a odkazov a ukážeme si, ako pracovať s nadpismi.   

 

 

Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá