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

CES 2017: Lenovo predstavilo nové notebooky ThinkPad X1, Miix 720 a prvý smartfón s podporou Tango - Lenovo Phab 2

03.01.2017 00:09

Lenovo odštartovala ďalší ročník veľtrhu s celou škálou nových produktov. Nová generácia produktov radu ThinkPad X1 Carbon 2017 je najľahším 14-palcovým biznis notebookom, ktorý váži len 1,14kg a obsa ...

Ako na to

Tipy a triky: Ako správne poskytovať IT pomoc a ako o ňu správne žiadať?

14.12.2016 09:40

Či už ste pokročilý používateľ počítača, ktorý často poskytuje IT pomoc známym a rodine, alebo ste to vy, kto o takúto pomoc zvyčajne žiada, ľahko sa stanete nechcenou príčinou frustrácie a obrovskej ...

Ako na to

Tipy a triky: Ako diagnostikovať a opravovať neúspešné upgrady Windows 10

14.12.2016 09:37

Microsoft prešiel s Windows 10 do celkom novej éry vývoja. Namiesto samostatných verzií Windows, vydávaných zvyčajne s odstupom dvoch až piatich rokov (XP, Vista, 7 a podobne), začal svoj systém vyvíj ...

Žiadne komentáre

Vyhľadávanie

ITSMF jar

Najnovšie videá