Menu
Úplné základy
Základy
Texty
Hyperlinky
Tabuľky
Formuláre
Rámce
Multimédiá
Niečo o klikacích mapách
Vynechávané tagy
Webdesign
Webhostingy
Doplňky
Základy CSS
Základy PHP
Pozri tiež
 

Mám Svoj Web

Vítam vás pri našej novej rubrike. Táto rubrika sa bude zaoberať tvorbou webu prakticky aj teoreticky. Začiatočníkom nedoporúčam preskakovať lekcie. Tak sa pusťme do práce aby boli stránky čo najskôr na internete.

 
 Na vzdory tomu, že tento dokument je moc dlhý ponúkam vám ho ako offline verziu msw.zip

 Úplné Základy

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

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í nemajú žiadne skúsenosti s tvorbou webstrá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ť, vylepšovať, propagovať ...

HTML editory

Na tvorbu našich webstránok budeme potrebovať nejaký HTML editor. HTML editory sa delia na dve veľké skupiny a to "normálne" a WYSIWYG editori. Aký je medzi nimi rozdiel ? V prvom type HTML editora zadávate HTML tagy a výsledok vidíte 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.  Editory  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 WYSIWYG editoroch. Medzi jednoduché WYSIWYG editory by som zaradil programy typu Cool Page. K poloprofesionálnym by som zaradil programy, ktoré sa dodávajú s Internet Explorerom (FrontPage Express) a s Netscape Communicatorom (Netscape Composer ). Profesionálne WYSIWYG nástroje na tvorbu webstránok sa vyznačujú nie najnižšou cenou a sú to napríklad Macromedia Dreamweaver a Adobe Pagemill.  "Normálne" HTML editory sú niečo ako klasický Notepad len s tým rozdielom, že obsahujú zvýraznenie v syntaxe a tagy nemusíte písať ale môžete ich priamo vkladať. Profesionálny editor tohto typu je napríklad HotDog Profesionall a neprofesionálny EditPad. Všetky spomínané HTML editory bežia pod Windows. Ak používate Linux, tak ako WYSIWYG editor 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úť ? WYSIWYG editory sa hodia, ak neovládate jazyk HTML a chcete rýchlo a ľahko vytvoriť nejakú webstránku. My si však zvolíme tú druhú cestu.  

Čo budeme potrebovať ?

My v našom seriály nebudeme pracovať s WYSIWYG editormi, 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 | Poznámkový blok). Aby sme si mohli tieto HTML súbory prezerať potrebujeme aj nejaký browser. Môžeme použiť napríklad Internet Explorer alebo Netscape Navigator. Všetko už máme pripravené takže do toho. 

Tagy

Ako som už spomínal každý HTML súbor obsahuje Tagy. Tie hovoria browseru ako má zobraziť text, obrázok alebo 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 nutné aby boli párové tagy vždy uzatvorené, inak by mohlo dôjsť k nekorektnému zobrazeniu HTML dokumentu. Predstavme 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 tohoto textu vložíme 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>, ktorý zalamuje riadok. 

Štruktúra HTML dokumentu

Teraz si ukážeme, akú štruktúru musí obsahovať každý HTML dokument 

 

<HTML>
<HEAD> 
obsah hlavičky 
</HEAD>
<BODY>
.
.
. 
 obsah dokumentu 
.
.
.
 </BODY>
 </HTML>

 

V tejto štruktúre si môžeme všimnúť základné HTML tagy : HTML, HEAD a BODY
Ako ste si určite všimli, všetky tieto tagy sú párové :

- < HTML> Tento tag sa vždy vkladá na začiatok dokumentu. Určuje, že ide o dokument vo formáte HTML. Jeho uzatváracia varianta < / HTML> sa vkladá vždy na úplný koniec dokumentu. 

-  <HEAD> Tento tag určuje hlavičku HTML dokumentu. V hlavičke môžu byť obsiahnuté údaje ako názov stránky, kľúčové slová, meno autora a podobne. tag uzavrieme </HE

- <BODY> - Predstavuje najpodstatnejšiu časť  - samotné telo dokumentu. Tento tag sa vždy vkladá až za uzavretú hlavičku HTML dokumentu. Jeho uzatvárací tag </BODY> sa spravidla vkladá tesne pred koniec dokumentu - teda pre 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 HTML dokument vyzerať nasledovne :

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

Text a základné formátovanie 

Náš HTML dokument musí obsahovať samozrejme aj nejaký ten text. Text 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ť ešte 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 netreba zabúdať 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ý HTML dokument s názvom,  použitím základných druhov písma a zalamovaním riadkov. Ten môže vyzerať naprí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 riadku v editore neznamená aj koniec riadku 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 

Dnes 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 nádpismi.

 Základy

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

Vitajte pri druhom pokračovaní seriálu Vyvárame WWW stránky. Dnes si ukážeme ďalšie možnosti formátovania textu, definujeme obrázok v pozadí, farbu pozadia, textu a odkazov a ukážeme si ako pracovať s nadpismi.   

Pokročilé formátovanie textu

Správne formátovanie textu je základom každej dobrej WWW stránky. Niekedy môže byť takéto formátovanie užitočnejšie ako obrázky a pritom neznižuje rýchlosť načítavania WWW stránky. Netreba to však veľmi preháňať, pretože existujú aj " textoví surferi " a tým toto formátovanie veľa hovoriť nebude.  Pred mesiacom sme si ukázali základné druhy písma a dnes prikročíme k tým pokročilým.

  • <BIG> -veľké  písmo - o jeden bod väčšie ako normálne
    Ukážka : normálne a     veľké písmo
  • <CODE> - písmo najviac vhodné na výpisy (napr. zdrojových kódov)
    Ukážka : application.terminate
  • <SMALL> - malé písmo - o jeden bod menšie ako normálne
    Ukážka : normálne a     malé písmo
  • <STRIKE> - preškrtnutý text
    Ukážka : tento text neplatí
  • <SUB> - dolný index
    Ukážka : Voda má chemickú značku H 2O
  • <SUP> - horný index
    Ukážka : výsledkom pytagorovej vety je vzorec c2 = a2 + b 2
  • <TT> - Telepype - písmo pripomínajúce písací stroj
    Ukážka : toto písmo sa príliš nepoužíva
  • <PRE> - formátovaný text
    Ukážka :  
     Tento text je formátovaný

Všetky tieto tagy sú samozrejme párové. Niektoré sa v rôznych browseroch zobrazujú rôzne a tie najpoužívanejšie vyzerajú vždy rovnako.

Texty už písať vieme, preto teraz pristúpime k definovaniu vlastností stránky. Tie sa  sa definujú do tagu <BODY>.  Môže to byť napríklad farba pozadia, textu, odkazov alebo obrázok v pozadí.

Obrázok v pozadí 

Obrázok v pozadí môže byť vo formáte JPG alebo GIF. Môže byť určený relatívnou alebo absolútnou cestou. Ukážeme si to na príklade. Predpokladajme, že adresa našej stránky je www.mojawwwstranka.sk a obrázok s názvom pozadie.jpg mám v adresári images. Ak používam relatívnu cestu tag do tagu <BODY> vpíšeme <body background="images/pozadie.jpg">. Ak chcem použiť absolútnu cestu  bude tag takýto <body background="http://www.mojawwwstranka.sk/ images /pozadie.jpg" >. Absolútna cesta sa používa len málo a preto doporučujem používanie relatívnej cesty.

Farba pozadia

Definícia farby pozadia WWW stránky ma dva významy. Použijeme ju ak nechcete mať v pozadí obrázok ale je dobre použiť ju aj ak obrázok v pozadí máme. Dôvod je, že nie každý musí mať zapnuté zobrazovanie obrázkov. Ak ho zapnuté nemá a my farbu pozadia nedefinujeme zobrazí sa mu biele alebo sivé pozadie, čo nie je veľmi profesionálne. Preto aj ak budeme mať v pozadí obrázok, vždy definujme aj farbu pozadia  a to farbou, ktorá najviac pripomína použitý obrázok.

Farby môžeme definovať dvojako : anglickým názvom alebo hexadecimálne. Anglickým názvom sa dá definovať nasledujúcich 16 farieb :

 AQUA

  tyrkysová            
 BLACK  čierna  
 BLUE  modrá  
 FUCHSIA  fialová  
 GRAY  tmavosivá  
 GREEN  zelená  
 LIME  žltozelená  
 MAROON  gaštanová  
 NAVY  námornícka modrá  
 OLIVE  olivová  
 PURPLE  tmavofialová  
 RED  červená  
 SILVER  strieborná  
 TEAL  sivozelená  
 WHITE  biela  
 YELLOW  žltá  

Hexadecimálne môžeme definovať až 16 miliónov farieb. Tie sú určené pomerom červenej - zelenej - modrej (RGB) v hexadecimálnom tvare. Ak tieto farby zmiešame v najvyššom pomere - FFFFFF, vznikne biela. Naopak, ak ich zmiešame v najnižšom pomere - 000000, vznikne čierna. Napríklad ak chceme mať modré pozadie, môžeme použiť blue a aj #0000FF.

Farba textu

Farbu pozadia definujeme tiež do <BODY> a to značkou TEXT. Definujeme ju rovnako ako farbu pozadia. Napríklad ak chceme aby bol text čierny požijeme  text="black" alebo text="#000000".  Text sa bude zobrazovať čierny, ale iba ak nie je niekde v dokumente určené inak (napríklad v odseku).

Farba odkazov 

Na našej WWW stránke môžeme taktiež definovať farby odkazov. Ide o farby pre odkazy, na ktoré ešte používateľ neklikol (parameter link),  farbu odkazu pri kliknutí myšou (parameter alink) a farbu už navštíveného odkazu (parameter vlink). Nastavenie farieb odkazov je veľmi dôležité. Hovorí návštevníkovi o odkazoch, ktoré už navštívil a ktoré ešte nenavštívil. 

Ak chceme aby boli odkazy modré, pri kliknutí sa zmenili na červené a po navštívení boli napríklad žlté použijeme tento zápis : link="blue" alink="red" vlink="yellow" alebo link="#0000FF" alink="#FF0000" vlink="#FFFF00".

Praktická ukážka

Už vieme, že každá stránka musí mať definovanú farbu, pozadia, textu a odkazov. Teraz si to ukážeme prakticky. Naša ukážková stránka bude mať biele pozadie, čierny text, modré odkazy, červené aktívne odkazy a žlté navštívené odkazy :

<HTML>
<TITLE>Naša prvá WWW stránka</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#00000" link="#0000FF" 
alink="#FF0000" vlink="#FFFF00">

.
.
obsah dokumentu
.
.
</BODY>
</HTML>

Nádpisy

Nádpisy slúžia najmä na členenie stránky. Pri ich používaní platia určité pravidlá : názov stránky by mal byť najväčší a názvy častí alebo kapitol menšie ale navzájom rovnako veľké. Poznáme 6 druhov nadpisov. Sú to <H1>, <H2>, <H3>, <H4>, <H5>, <H6> pričom <H1> je najväčší a <H6> najmenší.   Jednotlivé nadpisy vyzerajú takto :

<H1> Nadpis 1. úrovne </H1>

Nadpis 1. úrovne

<H2> Nadpis 2. úrovne </H2>

Nadpis 2. úrovne

<H3> Nadpis 3. úrovne  </H3>

Nadpis 3. úrovne

<H4> Nadpis 4. úrovne </H4>

Nadpis 4. úrovne

<H5> Nadpis 5. úrovne </H5>

Nadpis 5. úrovne

</H6> Nadpis 6. úrovne </H6>

Nadpis 6. úrovne

V praxi sa však používajú najmä nadpisy <H1>, <H2> a <H3>, pretože nádpisy  <H4> , <H5> a <H6> sú menšie ako normálne písmo. Odporúčam nadpis <H1> použiť na stránke iba raz.

Nabudúce

Do budúceho pokračovania si vyskúšajte kombinovanie farieb na stránke a prácu s nádpismi. V treťom pokračovan nášho seriálu si ukážeme ako zarovnávať nádpisy, vytvoríme si zoznamy s odrážkami a vysvetlíme jednu z najdôležitejších vecí - tvorbu hypertextových odkazov.

 Texty

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

Vítam vás pri čítaní v poradí už tretej časti nášho seriálu o vytváraní www stránok v jazyku HTML. O čom bude dnešná časť ? Dnes si ukážeme prácu s nádpismi, vytvoríme si zoznamy s odrážkami a vysvetlíme jednu z najdôležitejších vecí - tvorbu hypertextových odkazov.  

Práca s nádpismi

V minulej časti sme si k tejto téme vysvetlili len ako meniť veľkosť nadpisov pomocou tagov <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Ako ste si určite všimli, nádpisy sú vždy zarovnávane vľavo. Teraz si ukážeme ako ich zarovnať vľavo (left), vpravo (right) , na stred (center) a do bloku (justify). Tu su príklady na zarovnávanie : 

<H2 align="left">vľavo</H2>

vľavo

<H2 align="right">v pravo</H2>

vpravo

<H2 align="center">na stred</H2>

na stred

<H2 align="justify">do bloku</H2>

do bloku

Nadpisy majú ešte jednu výhodu. Automaticky pred nimi a za nimi nasleduje prechod na nový riadok.
Príklad : 

prvý riadok <H2> nadpis </H2> druhý riadok


Ukážka : 

prvý riadok

nadpis

druhý riadok

Ako sme si už povedali v predchádzajúcej časti s nadpismi treba zaobchádzať veľmi opatrne a najmä nádpis <H1> treba použiť kvôli lepšej prehľadnosti na stránke iba raz a to na názov stránky.

Toľko nádpisy a teraz prejdime k zoznamom. 

Číslovaný zoznam

Číslovaný zoznam sa uvádza tagom <OL> (ordered list) a ukončuje </OL>. Položky v tomto zozname sa uvádzajú tagom <LI>. Každá položka v tomto zozname je označená číslom alebo písmenom. 

Príklad : 

<OL>
<LI>raz 
<LI>dva
<LI>tri
</OL>      

Výsledok príkladu :

  1. raz 
  2. dva
  3. tri

Ako vidíme na výsledku príkladu všetky položky zoznamu sú označené číslami. Označovanie položiek v zozname môžeme definovať parametrom TYPE podľa tejto tabuľky :

TYPE=A veľké písmena (A, B, C ...)
TYPE=a malé písmena (a, b, c ...)
TYPE=I veľké rímske číslice (I, II, III ...)
TYPE=i malé rímske číslice (i, ii, iii ...)
TYPE=1 arabské číslice (1, 2, 3 ...)

Predvolene sú položky v tabuľke číslované od prvého čísla (písmena). Ak chceme číslovať napríklad od tretieho písmena abecedy použijeme parameter START s hodnotou 3.

Príklad :       

<OL TYPE=a START=3>
<LI>raz 
<LI>dva
<LI>tri
</OL>   

Výsledok vyzerá takto :

  1. raz 
  2. dva
  3. tri

Vysvetlenie : 

Položky v zozname sú číslované písmenami, pretože parameter TYPE je nastavený na a. Položky sú číslované od písmena c pretože parameter START je nastavený na 3 a c je tretie písmeno abecedy.

Nečíslovaný zoznam

Nečíslovaný zoznam sa líši od číslovaného najmä tým, že sa uvádza tagom <UL> (unnumbered list) a končí </UL>. Položky sú taktiež uvádzané tagom <IL>. 

Príklad :

<UL>
<LI>raz 
<LI>dva
<LI>tri
</UL>

Výsledok :

  • raz 
  • dva
  • tri

Aj pri nečíslovanom zozname môžeme použiť parameter TYPE. Pri tomto zozname je možné použiť tieto hodnoty :

  • TYPE=disc - plné koliesko
  • TYPE=circle - prázdne koliesko
  • TYPE=square - štvorec

Vnorené zoznamy

Číslované zoznamy môžeme ľubovoľne kombinovať. Môžeme napríklad vnoriť číslovaný do nečíslovaného zoznamu. Dostaneme kombináciu číslovaných a nečíslovaných položiek.

Príklad :

<OL type=1>
   <LI>Prvá číslovaná položka
<UL type=circle>
   <LI>nečíslovaná
   <LI>ďalšia nečíslovaná 
</UL>
    <LI>Druhá číslovaná položka
    <LI>Tretia
    <LI>Štvrtá rozvetvená 
<OL type=a>
     <LI>na prvú
     <LI>druhú
     <LI>a tretiu položku
</OL>
</OL>

Výsledok príkladu  :

  1. Prvá číslovaná položka
    • nečíslovaná
    • ďalšia nečíslovaná
  2. Druhá číslovaná položka
  3. Tretia
  4. Štvrtá rozvetvená
    1. na prvú
    2. druhú
    3. a tretiu položku

Upozornenie : všetky tagy sú párové, preto by sme nemali zabúdať na ich uzatváranie. 

Hypertextové odkazy

Hypertextové odkazy sú jedným z najdôležitejších prvkov webových stránok. Ich základom je element <A> (anchor - kotva). Základná štruktúra hypertextového odkazu je takáto :

<a href="súbor na ktorý sa odkazuje">názov odkazu</a>

Text súbor na ktorý sa odkazuje nahradíme názvom súboru, na ktorý odkazuje. Ak je to súbor s príponou HTM, HTML, ASP,  PHP alebo podobne, otvorí sa daný súbor v okne prehliadača. Ak je to súbor iného typu, prehliadač ponúkne spustenie alebo uloženie tohto súboru alebo spustí aplikáciu, ku ktorej je daný typ súboru asociovaný.   

Text názov odkazu nahradíme slovom alebo vetou, ktorú má používateľ vidieť v prehliadači.

Príklad :

<A HREF="http://www.pcrevue.sk">tento odkaz</A>

Výsledok :

tento odkaz

Tento odkaz nás zavedie na stránku nášho časopisu.  Neodkazuje na konkrétny súbor, predo bude hľadať súbor index alebo default.

Môžeme vytvoriť aj odkaz priamo na súbor na serveri.

Príklad :

<A HREF="http://www.tipyatriky.sk/index.php?id=win17">Tipy a Triky pre Windows</A>

Výsledok :

Tipy a Triky pre Windows

Tento odkaz nás zavedie na stránku servera www.tipyatriky.sk so zameraním na tipy a triky pre Windows

Nabudúce

Do budúcej časti seriálu si môžete precvičiť tvorbu zoznamov, ich vnáranie a tvorbu hypertextových odkazov. V budúcej časti si povieme ešte niečo viac o odkazoch a o obrázkoch.

 Hyperlinky

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

V minulej časti sme začali s hypertextovými odkazmi a dnes budeme pokračovať. Povieme si o nich niečo viac, ukážeme odkazy na časť dokumentu, ďalšie možnosti tagu <a> a niečo o grafike. 

Hypertextové odkazy

Základy hypertextových odkazov už poznáme z minulého dielu. Aby však odkaz fungoval, musíme zadať správnu adresu, na ktorú odkazuje. Pri písaní odkazov rozlišujeme dva typy : absolútne a relatívne. Ako ich budeme používať ?  Tu platí zásada, že pri odkazoch na rovnaký server, na akom je umiestnená stránka sa používajú relatívne odkazy a na iné serveri odkazuj absolútne odkazy. Aký je medzi nimi rozdiel ?

Vezmime si, že máme súbor stranka.htm na serveri www.pcrevue.sk. Jeho adresa je teda www.pcrevue.sk/stranka.htm. V ňom chceme vytvoriť odkaz na súbor index,htm na tom istom serveri. Môžeme použiť relatívny alebo absolútny odkaz.

Keďže sme si povedali pravidlo, podľa ktorého sa odkazy na stránky na tom istom serveri udávajú relatívne použijeme prvú možnosť.  Ak by bol súbor, na ktorý chceme odkázať v nejakom adresári použili by sme takúto relatívnu cestu :

Opačný prípad je, ak je náš súbor z ktoré odkazujeme v nejakom podadresári a chceme odkázať na súbor o úroveň vyššie. Náš súbor je na adrese www.pcrevue.sk/serial/stranka.htm. Chceme odkázať na www.pcrevue.sk/index.htm. Opäť to môžeme urobiť dvoma spôsobmi :

V praxi sa však využívajú najmä relatívne odkazy a absolútne iba ak sú nutné (pri odkaze na stránku na inom serveri).

Hypertextové odkazy na jednotlivé časti dokumnetu

Ak chcete svoj dokument z nejakých dôvodov rozdeliť na viacej častí použijete práve túto voľbu. Časti dokumentu označíte pomocou tagu <A name="názov časti">. Vysvetlíme si to na nasledujúcom príklade :

V prvom rade si potrebujeme definovať názvy častí. V príklade sú to časti s názvami 1cast, 2cast a 3cast. definujeme ich pomocou už spomínaného tagu <A name>. Do týchto časti vložíme požadovaný text a pokračujeme tvorbou hypertextových odkazov. Tie sa tvoria štandardným tagom <A href> s tým rozdiel, že namiesto názvu súboru.prípona použijeme #názov časti. Napríklad <A href="#1cast">.

Ďalšie možností tvorby odkazov

Tag <A href> má ešte niekoľko možností :

Internetová grafika

Aké by boli naše stránky ak by boli bez grafiky ? Dá sa povedať, že grafika je nutnosť ale netreba to preháňať. Začiatoční väčšinou robia chyby v tom, že to s grafikou preháňajú. Predstavme si stránku, na ktorej blikajú všetky tlačidlá, cez obrazovku z času na čas prebehne psík ... Jednoducho úplne nevkusná stránka. A ani rýchlosť jej načítavania nie je najvyššia.  Niekedy dosiahnete lepší efekt správnym skombinovaním písma a farieb. Pri používaní grafiky treba dbať na použitie správneho formátu a optimalizáciu. Internetové prehliadače bežne podporujú formáty JPEG a GIF. Novšie podporujú aj pomaly sa rozbehávajúce PNG.

GIF

JPEG

Každý formát sa hodí na niečo iné. Potom ako si správne vyberieme treba vložiť do HTML stránky kód. Ten je fo formáte <IMG SRC="cesta k obrázku">,  Tag IMG ma množstvo parametrov, z ktorých najdôležitejšie sú :

Výsledok môže vyzerat takto <IMG SRC="images/logo.jpg" ALT="Logo našej firmy" WIDTH="100" HEIGHT="50">

Toto boli niečo ako povinné hodnoty, ktoré by mal obsahovať každý obrázok. Okrem nich existuje ešte aj parameter ALIGN a môže mať nasledujúce hodnoty :

Aby sme si to vedeli predstaviť, je najlepšie vytvoriť nejakú prázdnu stránku a všetky tieto parametre si vyskúšať

Ďalšími menej používanými parametrami sú Border (určuje šírku rámčeku okolo obrázku v pixeloch), Vspace (vertikálny odstup ostatných objektov v pixeloch) a Hspace (horizontálny odstup ostatných objektov v pixeloch).

Obrázky sa dajú samozrejme použiť aj v kombinácii s obrázkami a získáme niečo ako "tlačidlo". Príklad môže vyzerať takto :

 <A HREF="cesta k html dokumentu"><IMG SRC="cesta k obrázku "ALT="popis obrázku" HEIGHT="výška v pixeloch" WIDTH="šírka v pixeloch"></A>

Ako sme si určite všimli okolo nášho obrázku s odkazom je modrý rámček. Automaticky sa pridáva z toho dôvodu, aby sa obrázky s odkazom odlíšili od obrázkov bez odkazu. Tento jav sa však dá odstrániť. Stačí aby sme text upravili tak, že pridáme parameter Border="0" a rámček zmizne.

Záver

Januárovú časť seriálu máme za sebou. Do budúcej časti si môžete precvičovať prácu s obrázkami a možnosťami ich zarovnávania. V budúcej časti sa vrátime k písmu a začneme rozsiahlu tému - tabuľky.

 Tabuľky

Späť na začiatok

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

Definovanie farby hexadecimálne

Týmto spôsobom zapisujeme farbu v tvare #rrggbb, ktorý vyjadruje pomer základných farieb (červená, zelená. modrá). Pre každú farbu sú určené dve miesta, preto s takýmto spôsobom dá definovať 16 581 375 farieb. Ak chceme napísať červený text. použijeme  tag Font s parametrom Color a hodnotou red alebo #FF0000.

Príklad : Ukážka <font color="red"> červeného textu </font>
Ukážka : Ukážka červeného textu

S farbami písma musíme byť veľmi opatrní. Najmä v spojení s pozadím. Nie všetky farby písma sa hodia k určitej farbe pozadia a ak je na stránke viacfarebné písmo, môže to návštevníka zmiasť.

Veľkosť písma

Pomocou parametru Size tagu Font sa dá meniť veľkosť písma. Môžeme to urobiť absolútne a relatívne. Absolútne určujeme veľkosť písma hodnotami 1 až 7 (pričom 3 zodpovedá veľkosti štandardného textu). Relatívne určujeme veľkosť písma vzhľadom na štandardný text. Robíme to pomocou znamienok + (väčšie ako štandardný text) a - (menšie ako štandardný text). Napríklad Size=+1. Pri relatívnom určení veľkosti môže mať parameter Size hodnoty -7 až +7.

Príklad : Normálne písmo a <Font Size=5>písmo veľkosti 5</Font>
            Normálne písmo a písmo veľkosti 5

Príklad : Normálne písmo a <Font Size=+2>písmo o 2 väčšie  </Font>
               Normálne písmo a písmo o 2 väčšie

Pojmom štandardná veľkosť sa myslí veľkosť písma bežného prehliadača. Túto veľkosť môžeme zmeniť pomocou <BASEFONT SIZE=štandardná veľkosť>. Potom sa budú všetky relatívne veľkosti písma odvodzovať od nami definovanej veľkosti.

Typ písma

Posledným parametrom tagu Font je Face, ktorý určuje font, ktorým bude písmo zobrazené. Hodnotou toho parametru je presný(!) názov písma. Ak návštevník stránky takéto písmo nemá, zobrazí sa text štandardným písmom, čo môže viesť k nežiadúcim efektom. Preto sa väčšinou ak parameter uvádzajú dva až štyri typy písma. Určite nie je múdre používať fonty, ktoré má len minimálna skupina užívateľov. Najpoužívanejšie fonty sú Arial, Times New Roman a Courier. V súčasnosti sa veľkej obľube teší aj Helvetica a Verdana.

 

Príklad : <FONT FACE="Verdana, Arial CE">Tento text má byť zobrazený písmo Verdana, ale ak ho  užívateľ nemá, zobrazí sa ako Arial CE. </FONT>

Tag Font sa dá samozrejme skombinovať aj s inými tagmi. Zápisom <B><FONT COLOR="blue">Tučné modré písmo</FONT></B> dostaneme Tučné modré písmo.

Tabuľky

Na vytvorenie jednoduchej tabuľky nám stačia párové tagy Table, TR a TD.   Tag Table označuje začiatok (resp. koniec) tabuľky, TR začiatok (koniec) riadku a TD začiatok (koniec) bunky.  HTML neobsahuje žiaden tag na určenie stĺpcov. Stĺpce sa nastavujú automaticky alebo ich môžeme ovplyvniť hodnotami v definícii bunky.

Príklad jednoduchej tabuľky s dvoma riadkami a troma stĺpcami :

<TABLE>
<TR><TD>jablká</TD><TD>hrušky</TD><TD>slivky</TD></TR>
<TR><TD>pomaranče</TD><TD>mandarinky</TD><TD>
ananásy</TD></TR>
</TABLE>

Výsledok : 
 

jablká hrušky slivky
pomaranče mandarínky ananásy

Ak používame Internet Explorer, tak si určite všimneme, že tabuľka je zobrazená bez mriežky. Mriežka tam síce je, ale jej hodnota je 0. Na jej nastavenie sa používa parameter Border, ktorý umiestnime do elementu Table. Ak tento parameter vynecháme, môžu rôzne prehliadače zobrazovať tabuľku s rôznymi hrúbkami mriežky. definovanie mriežky môže byť napríklad takáto <TABLE border=2>. Naša tabuľka veľmi pekne nevyzerá. So zvýrazneným záhlavím by vyzerala určite lepšie. K tomu slúži párový tag TH, ktorým nahradíme tag TD všade, kde chceme odlíšiť obsah bunky od ostatných. Syntax tagu TH je zhodný s tagom TD.

Parameter align môžeme použiť nielen v tagu TD určuje zarovnávanie bunky. Môžeme ho použiť aj pri tagoch Table alebo TR V prvom prípade sa nastavuje zarovnávanie všetkých buniek v riadku, v druhom volíme umiestnenie tabuľky vzhľadom k okrajom stránky. Treba si zapamätať, že určujúci je vždy parameter menšieho segmentu tabuľky. Znamená to, že ak necháme všetky bunky v riadku zarovnávať doprava a jedu alebo viac buniek tohoto riadku zarovnáme doľava, má definícia zarovnávania buniek prednosť pred definíciou celého riadku.

Príklad :

<TABLE border=2>
<TR><TH>ovocie</TH><TH>kúpa</TH><TH>predaj</TH></TR>
<TR align="right"><TD align="left">jablká</TD><TD>100 kg</TD>
<TD>125 kg</TD></TR>
<TR align="right"><TD align="left">hrušky</TD><TD>50 g</TD>
<TD>48 kg</TD></TR>
</TABLE>

Bunky v druhom a treťom riadku sú zarovnané na pravý okraj, ale bunky v prvom stĺpci majú nastavené zarovnávanie k ľavému okraju. Bunka je menší segment ako riadok, preto bude obsah buniek zarovnaný doľava. Bunky v treťom riadku nemajú nastavené žiadne zarovnávanie, preto prevezmú zarovnávanie platné pre celý riadok.

ovocie kúpa predaj
jablká 100 kg 125 kg
hrušky 50 g 48 kg

V tagoch TD a TR sa dá použiť aj parameter valign. Nie však v tagu table.  Na rozdiel od align, ktorý určuje zarovnávanie vo vodorovnom smere,  valign určuje zvislé zarovnávanie a môže mať nasledujúce hodnoty :

Aby naša tabuľka vyzerala ešte lepšie, doplníme ju o farby. Farbu pozadia určime pomocou parametru bgcolor. Syntax je rovnaký ako pri všetkých nastaveniach farby v jazyku HTML, a to buď slovný alebo hexadecimálny zápis farby. Parameter bgcolor je možné použiť  v tagu Table (farba pozadia pre celú tabuľku), TR (farba pozadia pre celý riadok) a TD (farba pozadia danej bunky).

Príklad :

<TABLE border=2 bgcolor="#EFCC03" align="center">
<TR bgcolor="#EBE125">
<TH>Ovocie</TH><TH>1999</TH><TH>2000</TH><TH>
2001</TH>
</TR>
<TR align="right"><TD align="left">Hrušky</TD><TD>200 kg
</TD><TD>231 kg</TD><TD bgcolor="#EDDE74">300 kg</TD>
</TR><TR align="right"><TD align="left">Jablká</TD><TD>150 kg
</TD><TD>146 kg</TD><TD bgcolor="#EDDE74">168 kg</TD>
</TR><TR align="right"><TD align="left">Slivky</TD><TD>98 kg
</TD><TD bgcolor="#EDDE74">120 kg</TD><TD>72 kg</TD>
</TR><TR align="right" bgcolor="#C0C0C0">
<TD align="left">Celkom</TD><TD>448 kg</TD><TD>479 kg
</TD><TD>540 kg</TD>
</TR>
</TABLE>
 

Výsledok :

 

Ovocie 1999 2000 2001
Hrušky 200 kg 213 kg 300 kg
Jablká 150 kg 146 kg 168 kg
Slivky 98 kg 120 kg 72 kg
Celkom 448 kg 479 kg 540 kg

Myslím, že teraz je na mieste malá rekapitulácia :

Teraz sa pozrieme na prehľad parametrov tagu Table.

Tag Table

Tag TR

Tag TH a TD

Záver

Po dnešnej viac-menej teoretickej časti ovládame už základy tvorby tabuliek ale to ešte nie je všetko. V budúcej časti si ukážeme si využitie tabuliek pri formátovaní stránky.

 Formuláre

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

Na začiatok tohtomesačného pokračovania nášho seriálu si povieme ešte o niektorých tagoch použiteľných v tabuľkách, o využití tabuliek pri formátovaní stránok a prejdeme k základom práce s formulármi. 

Tag Caption

Tento párový tag určuje titulok tabuľky a je použiteľný iba za tagom Table. Umiestnenie nadpisu sa definuje parametrom align s týmito hodnotami :

  • top - nadpis je umiestnený nad tabuľkou
  • bottom - nadpis je umiestnený pod tabuľkou
  • left - nadpis je umiestnený vľavo od tabuľky
  • nadpis je umiestnený vpravo od tabuľky

Tagy THead TBody a TFoot

Tieto tagy prišli až s HTML 4.0. Tag THead určuje hlavičku tabuľky, tag Tbody telo tabuľky a tag TFoot pätu tabuľky. Tieto tagy slúžia na zvýšenie prehľadnosti vytváranej tabuľky. Pri ich zápis platí pravidlo hlava - päta - telo (THead - TFoot - TBody). Výsledok by mohol vyzerať takto :

<TABLE>
<THEAD>
<TR> hlavička tabuľky
</THEAD>
<TFOOT>
<TR> päta tabuľky
</TFOOT>
<TBODY>
<TR> prvý riadok prvej časti tabuľky
<TR> druhý riadok prvej časti tabuľky
<TR> tretí riadok prvej časti tabuľky
</TBODY>
<TBODY>
<TR> prvý riadok druhej časti tabuľky
<TR> druhý riadok druhej časti tabuľky
<TR> tretí riadok druhej časti tabuľky
</TBODY>
</TABLE>
 

Všetky tieto tagy majú nasledujúce parametre :

  • align - vodorovné zarovnávanie textu
  • valign - zvislé zarovnávanie tabuľky
  • char - znak, na ktorý bude text v bunke zarovnaný (napríklad : char = ".")
  • charoff - odsadenie znaku špecifikovaného parametrom char

Tagy Colgroup a Col

K vodorovnému rozdeleniu tabuľky na logické úseky slúžia ako už vieme tagy THead, TFoot a TBody. K zvislému rozdeleniu sa zase používajú tagy Colgroup a Col. Tieto tagy je nutné zaradiť ešte pred prvý riadok tabuľky.

Colgroup spojuje stĺpce, ktoré spolu logický súvisia do väčších celkov a tag Col sa využíva pri jemnejšom definovaní vlastností stĺpcov. Pri obidvoch tagoch je možné definovať vlastnosti pre niekoľko stĺpcov súčasne. Na to slúži atribút span, ktorý hovorí, na koľko stĺpcov sa príslušné nastavenie vzťahuje.

Okrem zarovnávacích parametrov (vysvetlených v prechádzajúcom opise tagov) je možné pomocou atribútu width nastaviť šírku stĺpcov.

Príklad :

<TABLE border=1>
 <COLGROUP span=1 align="left" width=100>
<COLGROUP span=3 align="right" width=75>
 <TR align="center">
<TH>Ovocie</TH>
<TH>január</TH>
<TH>február</TH>
<TH>marec</TH></TR>
 <TR><TD>jablká</TD><TD>10</TD><TD>20
</TD><TD>15</TD></TR> <TR><TD>hrušky</TD>
<TD>15</TD><TD>25</TD><TD>35</TD></TR> <TR><TD>slivky</TD><TD>5</TD><TD>5</TD>
<TD>5</TD></TR><TR><TD>marhule</TD><TD>16
</TD><TD>18</TD><TD>20</TD></TR>
 </TABLE>

 Výsledok :

Ovocie január február marec
jablká 10 20 15
hrušky 15 25 35
slivky 5 5 5
marhule 16 18 20

Zlučovanie buniek

Jazyk HTML umožňuje zlučovať viac stĺpcov a/alebo riadkov do jednej bunky. K tomu slúžia atribúty colspan a rowspan. Môžeme ich napísať do tagu TH alebo TD. Ich hodnota udáva, cez koľko riadkov a/alebo stĺpcov sa bunka rozkladá. Môžeme použiť jeden alebo aj obidva atribúty. Pri použití obidvoch sa bude bunka rozkladať cez viac riadkov a viac stĺpcov.

Príklad :

<TABLE border="1">
<TR><TH rowspan="2"></TH>
<TH colspan="2">Priemer</TH>
<TH rowspan="2">Hnedé oči</TH></TR>
<TR><TH>váha</TH><TH>výška</TH></TR>
<TR><TH>muži</TH><TD>75</TD><TD>182
</TD><TD>40%</TD></TR><TR><TH>ženy
</TH><TD>60</TD><TD>170</TD><TD>43%</TD>
</TR>
</TABLE>
 

Výsledok :

  Priemer Hnedé oči
váha výška
muži 75 182 40%
ženy 60 170 43%

Ak chcete v tabuľkách definovať prázdne bunky, nikdy nepoužívajte <TD></TD> ani <TD> </TD>. Takéto bunky nezobrazia všetky prehliadače zhodne. Najlepšie je použiť neviditeľnú medzeru - &nbsp;

Využitie tabuliek

Základné využitie tabuliek je k presnému umiestneniu textu a grafiky na stránke. Napríklad budeme chcieť, aby text začínal 50 pixelov od ľavého okraja stránky a končil 100 pixelov od pravého okraja stránky. Najlepšie riešenie je vytvoriť tabuľky s veľkosťou  100 % stránky a nulovou šírkou okrajov.

 
<TABLE border=0 width=100%>
<TR><TD width=100>nbsp;</TD><TD>tu bude text</TD>
<TD width="150></TD></TR>
</TABLE>

Ďalším využitím môže byť vytvorenie ovládacích prvkov, u ktorých záleží na presnom umiestnení. Napríklad ak chceme vytvoriť vodorovnú navigačnú lištu. 

<TABLE border=0 width=100%>
<TR><TD width=10% align="center"><a href="odkaz1.htm">popis1
</A></TD>
<TD width=10% align="center"><a href="odkaz2.htm">popis2
</A></TD>
<TD width=10% align="center"><a href="odkaz3.htm">popis3
</A></TD>
. . . . .
<TD width=10% align="center"><a href="odkaz9.htm">popis9
</A></TD>
<TD width=10% align="center"><a href="odkaz10.htm">popis10
</A></TD></TR>
</TABLE>

Pretože sme nepoužili absolútne ale relatívne určenie šírky buniek, bude lišta pri každom rozlíšení zaberať celú šírku obrazovky a jednotlivé ovládacie prvky budú vždy rovnako široké.

Ak sa rozhodnete namiesto jednoduchých textových  odkazov použiť ako odkazy obrázky, môžete pomocou tabuliek vytvoriť napríklad obrázkovú mapu zloženú z niekoľkých častí, ktoré budú odkazovať na rôzne objekty. V takomto prípade sa doporučuje určovať nielen veľkosť jednotlivých buniek, ale i samotných obrázkov kvôli rýchlejšiemu zobrazeniu stránky v prehliadači.

Využitie tabuliek pri navrhovaní vzhľadu stránok je skutočne široké. Stačí sa pozrieť na zdrojový kód niektorých serverov. Všetky weby síce vyzerajú rôzne, ale v drvivej väčšine sú vytvorené tabuľkami.

Doteraz sme informácie návštevníkom len odovzdávali. Dôležitým prvkom internetu je obojstranná komunikácia. K tomu slúžia napríklad diskusné fóra, knihy návštev alebo formuláre. Teraz si ukážeme prácu s formulármi.

Formulár

Celý formulár je uložený medzi tagmi <Form> a </Form>. Má niekoľko dôležitých parametrov :

  • action - určuje adresu skriptu (CGI, PHP alebo ASP), ktorý formulár spracuje. Okrem toho môžeme formulár aj odoslať elektronickou poštou. Využijeme to napríklad ak nemáme skriptovanie povolené. Vtedy bude parameter action vyzerať takto - action=mailto:adresa@server.sk.
  • method - tento parameter má hodnoty get alebo post. Get je vhodný najmä v prípadoch, že data z formulára nevyžadujú žiadne vonkajšie spracovanie. Príkladom je napríklad vyhľadávanie v databáze. V ostatných prípadoch nastavíme parameter method na post. Pri get sa data z formulára pripájajú k URL adrese volaného skriptu, pri post sa odošlú priamo v HTTP.
  • enctype - spôsob kódovania odosielaných dát. Ak budeme data získavať pomocou elektronickej pošty, je najlepšie použiť voľbu text/plain.

Príklad :

<FORM ENCTYPE="text/plain" 
ACTION="mailto:adresa@server.sk" method="post">
.
.
.
vlastný formulár
.
.
.
</FORM>
 

Základné ovládacie prvky

Na konci formulára sa spravidla nachádzajú ovládacie prvky, ktoré zabezpečujú odosielanie dát a zmazanie obsahu celého formulára. Základným stavebným kameňom väčšiny položiek formulára je tag Input, ktorý sám o sebe nič neznamená, ale bez tohto elementu sa určite nezaobídete. Parameter type určuje,  čo sa dotyčná položka premení. Pre odoslanie formulára to bude hodnota submit a pre zmazanie hodnota reset.

Tlačítko na odoslanie formulára :

<INPUT type="submit" value="Odošli>

Tlačítko na zmazanie celého formulára :

<INPUT type="reset" value="Zmaž">

Po stisnutí druhého tlačidla sa formulár vráti do stavu pred vyplnením akýchkoľvek údajov.

 

Textové pole

Textové pole využijete pri získavaní údajov, ako sú meno, priezvisko, e-mail, slová k vyhľadávaniu a podobne. V tomto prípade použijeme tag Input s parametrom text. Ďalej môžeme použiť jeden z nasledujúcich parametrov :

  • name - meno vstupného prvku. Toto meno sa využíva pri spracovaní formulára skriptom a veľmi dôležité je jeho určenie v prípade, že sa údaje odosielajú elektronickou poštou. V takomto prípade vám príde správa, ktorá má štruktúru meno vstupného prvku=užívateľom zadaná hodnota. Každé meno by malo byť vo formulári použité iba raz, aby sme zachovali prehľadnosť. Parameter name sa uvádza pri všetkých  elemtoch Input vo formulári. 
  • value - hodnota, ktorú môže užívateľ meniť. Napríklad value="napíšte svoj e-mail" spôsobí, že pri zobrazení formulára v danom textovom poli napísané napíšte svoj e-mail. 
  • size - udáva veľkosť textového poľa v počte písmen, ktoré budú viditeľné. 
  • maxlenght - určuje maximálny počet písmen, ktoré je možné zadať do textového poľa. 
  • acceskey - klávesová skratka, ktorá presunie kurzor do textového poľa. Ak zadáme napríklad acceskey="k" do textového poľa sa kurzor presunie po stlačení ALT+K. 
  • aling - zarovnávanie textového poľa
  • readonly - zavedenie tohto parametru spôsobí, že textové pole bude síce viditeľné, ale nebude editovateľné

Príklad :

Adresa: <INPUT type="text" name="adresa" value="vyplňte, prosím, svoju adresu" size=30 maxlength=45 accesskey="a" align="left">

Ukážka:

Adresa :

Záver

Nabudúce budeme pokračovať s formulármi, ukážeme si ešte pole pre vstup hesla, urobíme si kompletný formulár, ktorý odošle údaje o používateľovi na e-mail a postúpime k zaškrtávácím a prepínacím poliam.

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

Dnešná časť nášho seriálu sa bude tak, ako tá minulá, venovať formulárom a prácou s nimi.

Pole pre vstup hesla

Určite každý z nás pozná starú Windows "fintu", ktorá pri zadávaní hesla do nejakého vstupného poľa zobrazuje len hviezdičky. Slúži na to, aby vám nikto spoza chrbta neodpozoroval vaše heslo. To sa dá samozrejme obísť, ale tento seriál je o niečom inom. V HTML sa pole pre vstup hesla správa rovnako ako textové pole, iba s už spomínaným zobrazením hviezdičiek. Takéto pole vytvoríte parametrom type, ktorý bude mať hodnotu password. Ostatné atribúty sú rovnaké.

Toto heslo môže byť odhalené napríklad pri posielaní formulára elektronickou poštou, kedy sa stačí iba pozrieť do správy. Asi najbezpečnejší je protokol HTTPS.

Príklad :

Heslo: <INPUT type="password" name="uzivheslo" size=20 maxlength=45 accesskey="a" align="left">

Výsledok s vpísaným textom :

Heslo :

Teraz prejdeme k trochu praktickejšiemu príkladu. Vytvoríme si formulár, ktorý odošle položky meno, priezvisko, adresa a heslo elektronickou poštou.

<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method="post">
Meno: <INPUT type="text" name="meno" value="" size=15 maxlength=30 align="left"><BR>
Priezvisko: <INPUT type="text" name="priezvisko" value="" size=15 maxlength=30 align="left"><BR>
Adresa: <INPUT type="text" name="adresa" value="" size=30 maxlength=45 align="left"><BR>
Heslo: <INPUT type="password" name="heslo" size=20 maxlength=30 align="left"><BR>
<INPUT type="submit" value=" Odošli ">
<INPUT type="reset" value=" Zmaž" >
</FORM>

Výsledok :

Meno:
Priezvisko:
Adresa:
Heslo:

Zaškrtávacie polia

Zaškrtávacie pole je vhodné použiť najmä pri otázkach, na ktoré sa dá odpovedať viacerými spôsobmi alebo štýlom áno / nie. Zaškrtávacie pole sa taktiež definuje tagom Input a jeho parameter type má hodnotu checkbox. Najpoužívanejšie atribúty sú tieto :

  • name - názov pre skupinu zaškrtávacích políčok. Ak patria všetky políčka do rovnakej skupiny, tak majú všetky hodnotu parametra name rovnakú.
  • value - hodnota, ktorá sa odošle skriptu, ak je políčko zaškrtnuté. Ak sa formulár odosiela elektronickou poštou, príjemca dostane výsledok všetkých zaškrtnutých tlačidiel v tvare name=value
  • checked - túto voľbu použijeme pre tlačidlo, ktoré má byť zaškrtnuté po zobrazení formulára, pretože je pravdepodobné, že ho užívateľ zaškrtne.
  • align - zarovnávanie políčka na stránke (má hodnoty left, right, center).

Všetky atribúty si ukážeme na nasledujúcom príklade. Úlohou formulára bude zistiť, aké počítačové časopisy čítajú naši návštevníci :

<B>Ktoré počítačové časopisy Čítate ?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method=post>
<INPUT type="checkbox" name="casopisy" value="pcr" checked>PC Revue<BR>
<INPUT type="checkbox" name="casopisy" value="pcspace">PC Space<BR>
<INPUT type="checkbox" name="casopisy" value="computer">Computer<BR>
<INPUT type="checkbox" name="casopisy" value="chip">Chip<BR>
<INPUT type="checkbox" name="casopisy" value="pcworld">PC World<BR>
<INPUT type="checkbox" name="casopisy" value="ine">Iné<BR>
<INPUT type="submit" value="Odošli data!"><INPUT type="reset" value="Zmaž formulár!"> <BR>
</FORM>

Výsledok :

Ktoré počítačové časopisy čítate ?
 

PC Revue
 PC Space
 Computer
 Chip
 PC World
 Iné
 

Prepínacie polia

Prepínacie pole (radio-button) sú polia, z ktorých môže užívateľ zvoliť (vybrať) vždy len jednu možnosť. Syntax je podobný zaškrtávacím poliam, líši sa len parametrom type, ktorý má hodnotu radio. 

Príklad :

<B>Ktorý počítačový časopis považujete za najlepší  ?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method=post>
<INPUT type="radio" name="casopisy" value="pcr" checked>PC Revue<BR>
<INPUT type="radio" name="casopisy" value="pcspace">PC Space<BR>
<INPUT type="radio" name="casopisy" value="computer">Computer<BR>
<INPUT type="radio" name="casopisy" value="chip">Chip<BR>
<INPUT type="radio" name="casopisy" value="pcworld">PC World<BR>
<INPUT type="radio" name="casopisy" value="ine">Iné<BR>
<INPUT type="submit" value="Odošli data!"><INPUT type="reset" value="Zmaž formulár!"> <BR>
</FORM>

 Ktorý počítačový časopis považujete za najlepší ?
 

PC Revue
 PC Space
 Computer
 Chip
 PC World
 Iné
 

V dokumente je možné nadefinovať skupiny prepínacích polí, vždy si ale dávajte pozor na názov - tlačidlá s rovnakou hodnotou parametru name sa vzájomne ovplyvňujú a nie je možné, aby bolo aktívne viac ako jedno tlačidlo. Pri použití viacerých skupín je nutné, aby každá skupina mala svoj vlastný názov (name). 

Skrytý prvok

Skrytý prvok nám umožňuje odosielať  k spracovaniu dáta, ktoré nie sú viditeľné a nevyplňuje ich užívateľ. Parameter type má hodnotu hidden, dôležité atribúty sú len name, ktorý obsahuje názov a value, ktorý obsahuje zadanú hodnotu. Napríklad <INPUT type="hidden" name="formular" value="dotaznik">.

Textové pole s definovanou veľkosťou 

V predchádzajúcej časti sme si ukázali ako vytvoriť textové pole pomocou parametra type=text. Týmto spôsobom však môžeme vytvoriť pole s iba jedným riadkom, čo nie vždy postačuje. Ak chceme napríklad vytvoriť formulár, ktorým  budú užívatelia vyjadrovať svoj názor na našu stránku musíme použiť párový element TextArea. Ten má nasledujúce parametre :

  • cols - šírka zadávaná v počte znakov
  • rows - výška zadávaná v počte znakov
  • wrap - spôsob zalamovania textu. Hodnota off znamená, že sa text nezalamuje, hodnota virtual, že sa text zalamuje iba na obrazovke, ale odoslaný je ako jediný riadok a hodnota physical znamená, že sa text zalamuje a odosiela vrátane znakov zalomenia.

Príklad :

<B>Názor na stránku</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method=post><BR>
<TEXTAREA cols=40 rows=4 wrap="virtual"></TEXTAREA><BR>
<INPUT type="submit" value=" Odoslať "><INPUT type="reset" value=" Zmazať "><BR>
</FORM>

Názor na stránku

Záver

Na dnes je to všetko. O mesiac budeme s formulármi pokračovať. Dovtedy si  skúste vytvoriť formulár, ktorý bude obsahovať všetky doteraz popísané prvky, a to textové pole, pole pre zadanie hesla, zaškrtávacie pole, prepínacie pole, skrytý prvok a pole s viacerými riadkami.

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

Aj v dnešnom pokračovaní nášho seriálu sa budeme zaoberať formulármi. Tentokrát už posledný raz, pretože témou júnového pokračovania budú rámce. 

Roletové menu a zoznamy

K vytváraniu roletových menu o zoznamov slúži element SELECT, jednotlivé voľby potom uvádzame tagom Option, ktorý môžeme, ale nemusíme uzatvárať. Jednoduchá štruktúra takéhoto menu môže vyzerať následovne :

<SELECT parametre>
<OPTION parametre>možnosť číslo 1
<OPTION parametre>možnosť číslo 2
<OPTION parametre>možnosť číslo 3
.
.
.
<OPTION parametre>možnosť číslo x
</SELECT>

Tag Select má nasledujúce parametre :

 

  • name - označenie formulárového prvku, ktoré je veľmi dôležité a nesmie sa v jednom formulári vyskytovať viackrát.
  • size - určuje, koľko položiek bude súčasne zobrazených. U klasického roletového menu sa nastavuje size na hodnotu 1. Ostatné ponúkané možnosti sa zobrazia až pri rozbalení menu.
  • multiple - tento parameter nemá žiadnu hodnotu. Jeho uvedenie v tagu Select znamená, že užívateľ môže vybrať aj viac ako jednu z ponúkaných položiek. Môže tak urobiť pridržaním klávesy CTRL alebo Shift a kliknutím na položku. 

Tag Option má dva dôležité parametre :

  • selected - určuje, či je položka predvolene vybraná alebo nie
  • value - meno vybranej položky. Tento parameter je dôležitý najmä pre ďalšie spracovanie formulára. 

Príklad :

Chceme vytvoriť formulár, ktorého účelom bude zistiť najčastejšie jedávané ovocie. Použijeme roletové menu : prvok pomenujeme ovocie (name="ovocie"), zobrazovať sa bude vždy len jedna položka (size=1) a bude možné vybrať len jednu položku (parameter multiple neuvedieme). Budem predpokladať, že najviac ľudí jedáva jablká, preto bude voľba jablko prednastavená (u položky jablko bude v tagu Option uvedený parameter selected). Okrem roletového menu bude formulár obsahovať aj tlačidlo na odoslanie :

<FORM name="test" ENCTYPE="text/plain" ACTION="mailto:meno@server.sk">
<B>Aké ovocie jedávate najčastejšie ?</B><BR>
<SELECT name="ovocie" size=1>
<OPTION name="slivka">Slivka
<OPTION name="hruska">Hruška
<OPTION name="jablko" selected>Jablko
<OPTION name="broskyna">Broskyňa
<OPTION name="marhula">Marhuľa
<OPTION name="ine">Iné
</SELECT>
<INPUT type="submit" value=" Odošli ">
</FORM>

Výsledok :

Aké ovocie jedávate najčastejšie ?

 

Obrázok namiesto tlačidla

Sivé tlačidlo nemusí vždy vyhovovať vášmu estetickému cíteniu. Určite ste si už na niektorých serveroch všimli, že sa namiesto tlačidlá používa obrázok s rovnakou funkciou. Pri použití obrázku by ste však mali zvoliť taký, z ktorého je jasné, že slúži na odoslanie formulára. Grafické tlačidlo získame použitím nám už známeho tagu Input s parametrom type=image, obrázok, ktorý chceme použiť ako tlačidlo určime parametrom src=cesta. V našom predchádzajúcom príklade len upravíme predposledný riadok na  <INPUT type="submit" type="image" src="obrazok.jpg">.

Vylepšené tlačidlo (Button)

Pretože tlačidlo vytvorené pomocou elementu Input neponúka príliš široké možnosti, objavil sa vo formáte HTML 4.0 samostatný tag Button. Ten umožňuje oveľa lepšie špecifikovať vlastnosti tlačidla, do ktorého je možné umiestniť objekty ako napríklad obrázky, tabuľky, formátovaný text a podobne. Základné parametre :

  • name - meno prvku, je dôležité najmä vtedy, ak je tlačidlo viazané na nejaký skripty
  • value - hodnota, ktorá je odovzdaná serveru v okamžiku stisnutia tlačidla
  • type - má tri možnosti : submit (odosielanie dát z formulára), reset (vymazanie formulára a nastavenie všetkých polí do predvoleného stavu) a button (tlačidlo, ktoré nevykoná žiadnu akciu s vlastným formulárom, ale vykoná zadaný skript). 
  • disabled - zvolenie tohto parametru spôsobí, že tlačidlo nebude aktívne (nebude sa dať stlačiť)
  • acceskey - definovanie klávesovej skratky, ktorá umožní stlačenie tlačidlá bez použitia myši.

Upravený formulár z predchádzajúceho dielu bude takýto :

<B>Ktoré počítačové časopisy Čítate ?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method=post>
<INPUT type="checkbox" name="casopisy" value="pcr" checked>PC Revue<BR>
<INPUT type="checkbox" name="casopisy" value="pcspace">PC Space<BR>
<INPUT type="checkbox" name="casopisy" value="computer">Computer<BR>
<INPUT type="checkbox" name="casopisy" value="chip">Chip<BR>
<INPUT type="checkbox" name="casopisy" value="pcworld">PC World<BR>
<INPUT type="checkbox" name="casopisy" value="ine">Iné<BR>
<BUTTON name="tlacitko" type="submit" acceskey="O">
<B><U>O</U>doslať data k spracovaniu</B><BR>
<FONT COLOR="blue">v tlačítku Button je možné použiť aj farebný text</FONT><BR>
</BUTTON>
</FORM>

a výsledok :

Ktoré počítačové časopisy Čítate ?
 

PC Revue
 PC Space
 Computer
 Chip
 PC World
 Iné

Okrem farebného textu môžeme do obrázku vkladať ak tabuľky, obrázky a väčšinu prvkov jazyka HTML

Rámčeky vo formulároch (Fieldset a Legend)

K lepšej orientácií  môže pomôcť rozčlenenie jednotlivých prvkov formulára do niekoľkých častí. K tomu slúžia párové tagy Fieldset a Legend. Fieldset ohraničí všetky prvku vo formulári, ktoré umiestnime medzi úvodným a ukončovacím tagom, tenkým rámčekom, čím ich opticky oddelí. Legend nám ponúka vytvorenie popisky tohto rámčeka. Tag Fieldset nemá žiadne podstatné parametre, u tagu Legend je podstatné iba je zarovnávanie vzhľadom k rámčeku pomocou parametru align. Hodnoty sú podobné ako u väčšiny prvkov HTML - top (hore), bottom (dole), left (vľavo) a right (vpravo).  Tu je jednoduchý príklad :

<FORM name="test2" ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk">
<FIELDSET>
<LEGEND align="top">Informácie užívateľovi</LEGEND>
Meno: <INPUT type="text" name="meno" size=30 maxlength=45 align="left"><BR>
Priezvisko: <INPUT type="text" name="priezvisko" size=30 maxlength=45 align="left"><BR>
e-mail: <INPUT type="text" name="email" size=30 maxlength=45 align="left"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND align="top">Konfigurácia počítača</LEGEND>
Procesor:<BR>
<INPUT type="radio" name="procesor" value="pentium4" chcecked>Pentium IV<BR>
<INPUT type="radio" name="procesor" value="pentium3" chcecked>Pentium III<BR>
<INPUT type="radio" name="procesor" value="pentium2" chcecked>Pentium II<BR>
<INPUT type="radio" name="procesor" value="celeron" chcecked>Celeron<BR>
<INPUT type="radio" name="procesor" value="pentiummmx" chcecked>Pentium MMX<BR>
<INPUT type="radio" name="procesor" value="pentium" chcecked>Pentium<BR>
<INPUT type="radio" name="iny" value="pentium" chcecked>Iný<BR>
Modem:<BR>
<INPUT type="checkbox" name="vybava" value="int56" chcecked>Interný 56kB<BR>
<INPUT type="checkbox" name="vybava" value="int33" chcecked>Interný 33.6kB<BR>
<INPUT type="checkbox" name="vybava" value="int28" chcecked>Interný 28.8kB<BR>
<INPUT type="checkbox" name="vybava" value="isdn" chcecked>ISDN modem<BR>
<INPUT type="checkbox" name="vybava" value="iný" chcecked>Iný<BR>
</FIELDSET>
<INPUT type="submit" value="Odoslať data">
</FORM>

Výsledok :

 

Informácie užívateľovi Meno:
Priezvisko:
e-mail:
 
Konfigurácia počítača Procesor:
 Pentium IV
 Pentium III
 Pentium II
 Celeron
 Pentium MMX
 Pentium
 Iný
Modem:
 Interný 56kB
 Interný 33.6kB
 Interný 28.8kB
 ISDN modem
 Iný
 

Záver

Tak to by bolo na dnes všetko. Touto časťou sme tému formuláre skončili. O mesiac sa budeme venovať menej obsiahlej a "milovanej i nenávidenej" - rámcom (frames). Ukážeme si základy ich používania a na záver si povieme o ich výhodách a nevýhodách.  Späť na začiatok

 Rámce

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

Dnes si povieme niečo o rámoch (frames), o ich výhodách i nevýhodách a základoch práce s nimi.

Rámy na prinášajú veľa výhod, na druhej strane však môžu spôsobovať problémy. Rámy však do jazyka HTML rozhodne patria a preto im je venovaná táto časť nášho seriálu. Rámy umožňujú rozdeliť www stránku do niekoľkých navzájom nezávislých okien. V jednej časti tak môže byť napríklad navigačný panel, v druhej reklama a v tretej samotný obsah. Všetko si vysvetlíme na nasledujúcom príklade :

<HTML>
<HEAD>
<TITLE>Dokument s rámami</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="prvy_ram.htm">
<FRAME src="druhy_ram.htm">
</FRAMESET>
<FRAME src="treti_ram.htm">
<NOFRAMES>
<P>Váš prehliadač nepodporuje rámce. Ich obsah si však môžete prezrieť pomocou nasledujúcich odkazov :
<UL>
<LI><A href="prvy_ram.htm">Odkaz na 1. stránku</A>
<LI><A href="druhy_ramy.htm">Odkaz na 2. stránku</A>
<LI><A href="treti_ram.htm">Odkaz na 3. stránku</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

Ak sa vám nezobrazilo nič, bude to tým, že váš prehliadač rámy nepodporuje. Preto sme si pripravili sekciu medzi tagmi <NOFRAMES> a </NOFRAMES>. Táto sekcia zobrazuje alternatívny obsah, pretože inak by sa nezobrazilo nič. Ak sa rozhodnete vytvárať svoje stránky pomocou rámov, nezabúdajte na užívateľov, ktorých prehliadače rámy nepodporujú.

Tag Frameset

Ak ste si pozorne prezreli zdrojový kód nášho príkladu, určite ste zbadali tag, ktorým je nahradený tag Body. Tento tag je Frameset, ktorý definuje rozloženie stránok v okne prehliadača. Jeho základné atribúty sú :

  • cols - definuje počet stĺpcov (vertikálnych stránok) a ich rozmery. Rozmery môžeme určovať dvoma spôsobmi : absolútne počtom pixelov alebo relatívne v percentách veľkosti plochy okna. Element <FRAMESET cols="20%, 80%"> napríklad znamená, že stránka sa rozdelí na dva stĺpce a prvý bude zaberať 20% šírky obrazovky a druhý 80%. Okrem toho môžete použiť aj symbol hviezdičky *. Príklad :

    <FRAMESET cols="15%,150,*">
    definícia jednotlivých rámov
    </FRAMESET>

    V tomto príklade vznikne stránka zložená z troch stĺpcov, pričom prvý bude zaberať 15% obrazovky, druhý bude široký 150 pixelov a tretí zbytok stránky. 

    <FRAMESET cols="1*,250,3*">
    definícia jednotlivých rámov
    </FRAMESET>

    Tentokrát bude prostredný stĺpec široký 250 pixelov, ľavý zaberie štvrtinu zostavajúceho priestoru a pravý potom tri štvrtiny. (ľavý stĺpec ma šírku 1*, pravý 3*, a teda ľavý bude trikrát menší ako pravý). 
  • rows - definuje počet riadkov (horizontálnych stránok) a ich  rozmery. U tohto atribútu platia rovnaké pravidlá ako u atribútu cols. 

    Ak chcete aby sa stránka skladala napríklad z dvoch riadkov a dvoch stĺpcov bude zápis nasledovný :

    <FRAMESET rows="30%,70%" cols="33%,67%">
    definícia jednotlivých rámov
    </FRAMESET>
Vnáranie tagov Frameset

Často sa stretávame so stránkami, ktoré majú v hornej časti jeden rám na reklamu, ďalší je vľavo ma navigáciu a zbytok stránky je vpravo. Ako to dosiahnuť ? Jednoducho. Stačí sa naučiť vnárať tag Frameset. K tomu potrebujete aj trochu predstavivosti. V našom prípade sa stránka skladá z dvoch riadkov - horný tvorí reklamný rám a dolný je rozdelený do dvoch stĺpcov. Budeme teda musieť stránku najprv rozdeliť vodorovne  (<FRAMESET rows="20%, *">) a druhú časť zase zvisle (<FRAMESET cols="100,*">). Tu je okomentovaný príklad :

<HTML>
<HEAD>
<TITLE>Naše ukážková stránka</TITLE>
</HEAD>

<FRAMESET rows="20%, *"> - stránku najprv rozdelíme vodorovne na dve časti
<FRAME src="jedna.htm"> - definujeme obsah hornej časti stránky
<FRAMESET cols="100, *"> - dolnú časť delíme zvisle na dva stĺpce
<FRAME src="dva.htm"> - definujeme obsah ľavého stĺpca
<FRAME src="tri.htm"> - definujeme obsah pravého stĺpca
</FRAMESET> - uzatvárame zvislé rozdelenie stránky
</FRAMESET> - uzatvárame vodorovné rozdelenie stránky

</HTML>

Tag Frame

Vo všetkých príkladom sme použili tag frame ale ešte sme si nepovedali o jeho význame. Jeho význam je jednoduchý - definuje obsah a vlastnosti jednotlivých rámov. Tu sú jeho parametre :

  • src - definuje stránku, ktorá bude zobrazená v danom ráme. Zadáva sa ako adresa k hypertextovému odkazu a to buď relatívne alebo absolútne.
  • name - meno rámu. Tento parameter je dosť dôležitý. Ak napríklad v navigačnom menu zvolíte nejakú položku, musí prehliadač vedieť, v ktorom ráme ju zobraziť.
  • frameborder - určuje, či bude okno oddelené od ostatných rámov. Tento parameter má iba dve hodnoty a to 0 (okno nebude oddelené rámčekom) a 1 (okno bude oddelené rámčekom). Ak na tento parameter zabudnete, väčšina prehliadačov medzi oknami rámček zobrazí a to môže kaziť výsledný dojem.
  • marginwidth - parameter určujúci vzdialenosť obsahu rámca od horného a dolného okraja. Udáva s v pixeloch.
  • marginheight - obdoba parametru marginwidth s tým rozdielom, že definuje vzdialenosť rámca od ľavého a pravého okraja. Tiež sa udáva v pixeloch.
  • noresize - Pri uvedení tohto parametru nebude mať užívateľ možnosť meniť veľkosť rámcov.
  • scrolling - parameter určujúci možnosti rolovania obsahom rámca (či bude na strane rolovacia lišta, ktorá umožní posúvať stránku). Má tri možné hodnoty :
    yes - obsah rámu je možné posúvať, lista bude zobrazená i v prípade, že nie je potrebná.
    no  - obsah rámu nie je možné posúvať, lista nebude zobrazená vôbec. Toto nastavenie sa však  nedoporučujem pretože naši návštevníci môžu používať rôzne rozlíšenia.
    auto - obsah rámu je možné posúvať, lista bude zobrazená iba v prípade, že je potrebná. Táto voľba je najideálnejšia.
    Ak parameter scrolling neuvediete väčšina prehliadačom ho berie ako auto.

 Príklad :

<HTML>
<HEAD>
<TITLE>Stránka s rámami</TITLE>
</HEAD>
<FRAMESET rows="20%, *">
<FRAME src="jedna.htm" name="reklamnybanner" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAMESET cols="100, *">
<FRAME src="dva.htm" name="menu" target="stranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAME src="tri.htm" name="stranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
</FRAMESET>
<NOFRAMES>
obsah pre užívateľov s prehliadačom nepodporujúcim rámce
</NOFRAMES>
</FRAMESET>
</HTML>

Túto stránku si teraz môžete pripraviť. Nazvať ju môžete napríklad rámy.htm a stránky jedna.htm, dva.htm a tri.htm. To týchto stránok vložte zatiaľ iba základné tagy. Teraz už vieme základy práce s rámami. Kúzlo rámov je však v niečom inom, ako je iba načítanie viacerých stránok do okna prehliadača. Už sme si povedali, že slúžia najmä k jednoduchšiemu ovládaniu stránok. Do stránky tri.htm pridajte nejaký ten banner a do stránky dva.htm vytvorte nasledujúce menu :

<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
</BODY>
<UL>
<LI><A href="tri.htm" target="stranka">Úvod</A>
<LI><A href="styri.htm" target="stranka">Software</A>
<LI><A href="pet.htm" target="stranka">Hardware</A>
<LI><A href="sest.htm" target="stranka">Ovládače</A>
</UL>
</BODY>

Dokumenty tri.htm, styri.htm, pet.htm a sest.htm sa budú zobrazovať v zostávajúcej časti stránky podľa toho, na ktorý odkaz užívateľ na stránke dva.htm klikne. Ak sa pozornejšie zadívame do zdrojového kódu, uvidíme parameter target="stranka" ktorý prehliadaču hovorí, aby danú stránku načítal do rámu pomenovaného stránka. 

Tag Base a parameter target

V predchádzajúcom príklade viedli všetky odkazy zo stránky dva.htm do rámu s názvom stranka, takže všetky opakovali ten istý parameter target. Dá sa to však zjednodušiť. Stačí použiť tag Base, ktorý špecifikuje meno cieľového rámu pre celú stránku. S týmto elementom bude naša stránka vyzerať takto :

<HTML>
<HEAD>
<TITLE>Menu</TITLE>
<BASE target="stranka">
</HEAD>
</BODY>
<UL>
<LI><A href="tri.htm">Úvod</A>
<LI><A href="styri.htm">Software</A>
<LI><A href="pet.htm">Hardware</A>
<LI><A href="sest.htm">Ovládače</A>
</UL>
</BODY>

Tým sme stránku skrátili asi o 60 bajtov bez toho, aby sme zmenili jej funkčnosť. Ak budeme chcieť, aby niektorý z odkazov viedol do iného rámu ako je stránka, stačí pri elemente A použiť parameter target, ktorému sa dá prednosť pred tagom Base. Pre prácu s elementom Base a parametrom target je dobré pamätať si niekoľko pravidiel :  

  1. Ak parameter target odkazuje na existujúci rám, bude stránka, na ktorú sa odkazuje, zobrazená v ráme, ktorý má názov zodpovedajúci hodnote parametru target.
  2. Ak stránka obsahuje element Base a odkaz neobsahuje parameter target, bude odkazovaná stránka načítaná do rámu s parametrom Base.
  3. Ak stránka neobsahuje element Base a odkaz neobsahuje parameter target, bude odkazovaná stránka načítaná do rovnakého rámu, ako je stránka s odkazom.

Parameter target nemusí obsahovať len meno okna, do ktorého má byť stránka načítaná, môže mať namiesto toho jednu z týchto hodnôt :

·         target="_self" – dokument sa načíta do rovnakého okna.

·         taget="_parent" – dokument s načíta do okna definovaného najbližším nadradeným tagom Frameset.

·         target="_top" – dokument sa načíta do celého okna prehliadača, čím zruší všetky rámce.

·         target="_blank" – dojde k otvoreniu nového okna prehliadača a dokument sa načíta do tohto okna. Rovnaký efekt dosiahnete vo väčšina prehliadačov tak, že ako hodnotu uvediete meno nedefinovaného rámu.  

Záver

Tak to je na tento mesiac všetko. Nabudúce budeme s rámami pokračovať a povieme si ešte niečo viac o tagoch Noframes a Iframe a začneme sa venovať multimediálnemu rozširovaniu stránok.  
Ale viac až nabudúce  Späť na začiatok

 Multimédiá

 Klikacie mapy

 Ostatné tagy

 Webhosting

 Webdesign