HTML

Uvod
XHTML 1.1
Elementi

Povezave

Del besedila lahko naredimo aktivnega. 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, različne vrste dokumentov (DOC, XLS, PDF, PS, ZIP ...) ali pa celo program, ki ga lahko poženemo na strežniku. Aktivno besedilo je običajno obarvano modro in podčrtano, ko pa povezavo obiščemo, se obarva vijolično (te oblikovne lastnosti lahko spremenimo s stili). 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.

Določitev cilja

Ime ciljne datoteke lahko določimo na več načinov. Če je 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). To je relativni način sklicevanja, ki je zelo ugoden, saj poenostavi prestavljanje med seboj povezane skupine datotek iz ene mape v drugo.

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

Če je ciljna datoteka na strežniku, lahko uporabimo tudi absolutni način sklicevanja. 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). Kadar je ciljna datoteka na istem strežniku, lahko http:// in ime strežnika spustimo (potem se bo takšno ime vedno začelo z znakom /), če pa 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 ...

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

Skličemo se lahko tudi na posamezen element na neki spletni strani. Ta element seveda najprej primerno označimo. To storimo tako, da mu predpišemo lastnost id (lahko jo predpišemo skoraj kateremukoli elementu), katere vrednost je poljubno ime, ki si ga lahko izmislimo.

<h1 id="naslov">Naslov</h1>

Na pravilno označen element se potem skličemo tako, da naslovu spletne strani na koncu dodamo znak # in oznako elementa oziroma ime ciljne točke. Kadar je ciljni element na isti spletni strani kot aktivna povezava, lahko ime ciljne strani izpustimo.

<a href="#naslov">Naslov</a>
<a href="test.html#naslov">Naslov</a>

Pogosto naletimo tudi na povezave, ki nam ob kliku nanje odprejo poštni program z že odprtim oknom za pošiljanje novega sporočila, kjer so nekatera polja (from, to, subject) že izpolnjena. Tako povezavo naredimo takole:

Pošlji <a href="mailto:dedek.mraz@mail.com">sporočilo</a>.
Pošlji <a href="mailto:dedek.mraz@mail.com?subject=Testno%20sporocilo">sporočilo</a>
z danim naslovom.

Verjetno ste opazili, da je treba znake v naslovu, ki niso črke ali številke, posebej opisati. Tak opis začnemo z znakom %, ki mu sledita dve šestnajstiški števki. Ker je koda presledka enaka 32, presledek opišemo z zaporedjem %20.

Aktivne slike

Tudi slike lahko naredimo aktivne. Dovolj je, da za vsebino elementa a vpišemo sliko. Slika ob tem dobi okvir, ki označuje, da je aktivna.

<a href="test.html"><img src="smesko.png" alt="Smeško"></a>

Če aktivni sliki dodamo še logično lastnost ismap, bodo strežniku poleg zahteve po prikazu dokumenta posredovane še koordinate točke na sliki, kamor je uporabnik kliknil. Pri tem je točka (0,0) v levem zgornjem vogalu slike, koordinata x narašča proti desni, koordinata y pa navzdol. Če bi (v spodnjem primeru) uporabnik kliknil na sliko v točki (25,14), bi strežnik prejel zahtevo po prikazu dokumenta test.html?25,14 (kaj bo storil s tema parametroma, je odvisno od njegovih nastavitev).

<a href="test.html"><img src="smesko.png" ismap="ismap" alt="Smeško"></a>

Sliko lahko naredimo aktivno tudi tako, da bodo različna območja slike določala različne cilje. V tem primeru moramo najprej definirati, kje na sliki bodo aktivna območja in kateri bodo pripadajoči cilji. To storimo z elementom map, ki mu predpišemo lastnost id (da se lahko skličemo nanj). Za vsebino mu naštejemo aktivna območja, pri čemer vsako območje opišemo z elementom area. Ta ima lastnosti:

Če točko, kamor je kliknil uporabnik, pokriva več območij, ima prednost tisto, ki se v seznamu območij pojavi prej. Opis območij povežemo s sliko prek lastnosti usemap, katere vrednost je oznaka elementa map.

Shrani liki.html
<img src="liki.png" alt="Geometrijski liki" usemap="obmocja" />
<map id="obmocja">
   <area shape="rect" coords="8,7,77,44" href="rect.html" alt="Pravokotnik" />
   <area shape="circle" coords="135,45,33" href="circle.html" alt="Krog" />
   <area shape="poly" coords="46,62,95,13,144,62" href="poly.html" alt="Trikotnik" />
</map>

Trenutno ta način uporabe aktivnih območij deluje samo, če je spletna stran zapisana in označena kot dokument XML. Tega pa Internet Explorer ne podpira, zato se je v XHTML 1.1 temu najbolje izogibati. V prejšnjih različicah so aktivna območja podprta na malo drugačen način.