Načrtovanje in razvoj spletnih aplikacij

Povezave v HTML

Z oznako <a> in lastnostjo href lahko besedilo ali sliko naredimo aktivno, da tvori hiperpovezavo. To pomeni, da se bo uporabniku, če bo kliknil nanj, odprla neka druga datoteka ali pa drug del istega dokumenta. Ta druga datoteka je lahko spletna stran, slika, zvočni dokument, film, različne vrste dokumentov (DOC, XLS, PDF, PS, ZIP ...) ali pa celo program, ki ga lahko poženemo na strežniku.

Aktivno besedilo

Besedilo naredimo aktivno z uporabo elementa <a>. Z lastnostjo href mu določimo ime ciljne datoteke, ki naj se odpre, ko uporabnik klikne na povezavo.

<a href="URL">Besedilo s povezavo</a>

Aktivno besedilo je privzeto v brskalnikih obarvano modro in podčrtano, ko pa povezavo obiščemo, se obarva vijolično, seveda pa te oblikovne lastnosti lahko spremenimo s slogi CSS.

Določitev cilja povezave

Povezave so lahko relativne ali absolutne. Cilj povezave je navadno v zunanjem elementu, če pa je dokument daljši, pa lahko tudi v istem dokumentu.

Relativni način povezave

Če je ciljna datoteka v isti mapi kot spletna stran, kjer imamo povezavo, je dovolj, da napišemo samo njeno ime. Kadar pa je v kateri od podmap, moramo pred imenom napisati pot, kako pridemo do nje iz trenutne mape. Za ločila med imeni map uporabljamo znak /. Za prehod v mapo na višjem nivoju uporabimo .. (dve piki). Relativni način sklicevanja je zelo ugoden, saj poenostavi prestavljanje med seboj povezane skupine datotek iz ene mape v drugo.

Primer relativnih povezav:

Povezava na datoteko <a href="index.html">v isti mapi</a>.  
Povezava na datoteko <a href="podmapa/index.html">v podmapi</a>.  
Povezava na datoteko <a href="podmapa1/podmapa2/index.html">dva nivoja nižje</a>.  
Povezava na datoteko <a href="../../index.html">dva nivoja višje</a>.  
Povezava na datoteko <a href="../podmapa/index.html">v sosednji mapi</a>.

Absolutni način povezave

Absolutno ime datoteke se začne s http://, sledi ime strežnika, nato pa polno ime datoteke (skupaj z relativno potjo glede na korensko mapo strežnika).

Datoteka <a href="http://www.streznik.si/datoteka.html">v korenski mapi</a> strežnika.  
Datoteka <a href="http://www.streznik.si/podmapa/datoteka.html">v podmapi</a> strežnika.

Kadar je ciljna datoteka na istem strežniku, lahko http:// in ime strežnika spustimo. V takem primeru se takšno ime vedno začne z znakom /.

Datoteka <a href="/datoteka.html">v korenski mapi</a> na tem strežniku.  
Datoteka <a href="/podmapa/datoteka.html">v podmapi</a> na tem strežniku.

Kadar je ime datoteke na strežniku prijavljeno kot privzeto, lahko spustimo tudi ime. Takšna imena so običajno default.htm, index.html, index.php ...

Privzeta datoteka <a href="http://www.streznik.si">v korenski mapi</a> strežnika.  
Privzeta datoteka <a href="http://www.streznik.si/podmapa">v podmapi</a> strežnika.   
Privzeta datoteka <a href="/">v korenski mapi</a> na tem strežniku.  
Privzeta datoteka <a href="/podmapa">v podmapi</a> na tem strežniku.

Povezava v istem dokumentu oz. na element na spletni strani

Povezavo lahko naredimo tudi na posamezen element na neki spletni strani. To storimo tako, da elmentu, ki mu želimo prirediti povezavo, predpišemo lastnost id , katere vrednost je poljubno ime, ki si ga lahko izmislimo. id lahko predpišemo skoraj kateremukoli elementu.

<h2 id="podnaslov">Podnaslov</h2>

Na ustrezno označen element priredimo povezavo tako, da naslovu spletne strani na koncu dodamo znak # in oznako elementa oziroma ime ciljne točke.

<a href="datoteka.html#podnaslov">Podnaslov</a>

Kadar je ciljni element na isti spletni strani kot aktivna povezava, lahko ime ciljne strani izpustimo.

<a href="#podnaslov">Podnaslov</a>

Povezava za e-pošto

Povezavo do elktronske pošte naredimo tako, da za vrednost href napišemo mailto: in dodamo želeni elktronski naslov. Ob kliku na tako povezavo se odpre poštni program, ki mora biti nameščen na računalnik, z že odprtim oknom za pošiljanje novega sporočila, kjer so nekatera polja (from, to, subject) že izpolnjena.

<a href="mailto:ime@mail.com"> Pošlji e-pošto.</a> 
<a href="mailto:ime@mail.com?subject=Test"> Pošlji e-pošto.</a> 

Lastnost (atribute) target

Lastnost target določa, kje se odpre povezava. Če lastnost ni določena, se povezava odpre v istem oknu. Kadar želimo odpreti povezavo v novem oknu oz. novem zavihku uporabimo lastnost target="_blank".