Spletni pregledovalniki (browsers) so programi, ki berejo ukaze v jeziku HTML in glede na to prikazujejo vsebino. Vsako ročno oblikovanje strani (npr. večkratni presledki, prazne vrstice,...) se ignorira. Na primer, če odtipkamo
Danes je lepo vreme.
Opis predstavitvene strani v jeziku HTML je naslednji:
<HTML> <HEAD> <TITLE>Naslov, ki se pojavi v okviru okna</TITLE> </HEAD> <BODY> Vsebina predstavitvene strani </BODY> </HTML>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
Še bolj splošna rešitev za pisanje šumnikov pa je uporaba kode znakov v obliki
&#n;
V primeru pisanja šumnikov s kodami je koristno v glavi dokumenta navesti
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
Na voljo imamo šest nivojev naslovov (headings) h1 do h6. Drugi nivo, ki je uporabljen zgoraj dosežemo z:
<H2>Naslov</H2>
<H2 align=center>Naslov</H2>
Običajne odstavke (paragraphs), katerih širina se prilagaja trenutni velikosti okna, dosežemo z:
<P>
<P align=right> Ta del besedila bo <br> desno poravnan. </P>
Ta del besedila bo desno poravnan.
Na voljo je več različnih stilov.
<B> Besedilo </B>
<I> Besedilo </I>
<U> Besedilo </U>
<TT> Besedilo </TT>
<BLINK> Besedilo </BLINK>
Neoštevilčene sezname (unnumbered lists) dobimo z
<UL> <LI> Prva točka <LI> Druga točka <LI> Tretja točka </UL>
<OL> <LI> Prva točka <UL> <LI> Prva pika prve točke <LI> Druga pika prve točke <LI> Tretja pika prve točke </UL> <LI> Druga točka <LI> Tretja točka </OL>
Če želimo, da je besedilo prikazano tako, kot smo ga natipkali (razlomi vrstic, večkratni presledki,...), moramo uporabiti značko <PRE> (predefined text):
<PRE> Danes je lepo vreme </PRE>
Danes je lepo vreme
Sidra (anchors) so značke, s pomočjo katerih zahtevamo skok na nek drug dokument in prikaz le tega. Uporabljamo lahko relativni naslov (če se dokument nahaja na istem računalniku, morda le na drugem direktoriju) ali pa absolutni naslov (URL - Uniform Resource Locator), če se dokument nahaja na drugem računalniku. Primer klica z relativnim naslovom
<A HREF="poddirektorij/vaja.htm"> Opisno pojasnilo </A>
<A HREF="http://www.fdv.uni-lj.si/"> Fakulteta za družbene vede </A>
<A NAME="Oznaka"> </A>
ki ga uporabimo za skakanje znotraj istega dokumenta z značko
<A HREF="#Oznaka"> Opisno pojasnilo </A>
<A HREF="URL#Oznaka"> Opisno pojasnilo </A>
V dokument vključimo slike z:
<IMG SRC="Naslov in ime datoteke">
<center> <IMG SRC="images_hp.gif"> </center>
<IMG SRC="Naslov in ime datoteke" WIDTH=W HEIGHT=H>
Pritisni na sliko: <a href="http://images.google.si/imghp?hl=sl&tab=wi" ><img src="images_hp.gif"></a>
Če želima na predstavitveno stran vključiti možnost pošiljanje pošte izbrani osebi, to storimo z dodatkom mailto v sidru
Zapis
e-pošta: <A HREF="mailto:x.y@gmail.com"> x.y@gmail.com </A>
S klikom na označeno mesto se prestavimo v program za pošiljanje pošte izbranemu naslovniku.
Tabele so zelo močno orodje v HTML. Kot smo omenili jezik sam ne omogoča natančnega oblikovanja strani, zato ponavadi za ta namen uporabimo tabele (in nekaj zvijač). Oblika dokumenta, ki ga trenutno pregledujete, je npr. določena z uporabo tabel. V besedilo vključimo tabelo z uporabo značke <TABLE>. Značke, ki se uporabljajo v tabelah:
<table> <tr> <td> a </td> <td> b </td> <td> c </td> <tr> <td> aaa </td> <td> bbb </td> <td> ccc </td> </table>
<table border=2 cellpadding=6> <tr> <td> a </td> <td> b </td> <td> c </td> <tr> <td> aaa </td> <td> bbb </td> <td> ccc </td> </table>
<table border=2 cellpadding=6> <tr align=center> <td> a </td> <td colspan=2> b </td> <tr> <td rowspan=2> aaa </td> <td> bbb </td> <td> ccc </td> <tr> <td> bbbb </td> <td> cccc </td> </table>
Za opis barv se uporablja sistem RGB (Red-Green-Blue). Barvo podamo z mešanico teh treh barv, pri čemer je količina vsake od teh treh barv podana s šestnajstiškim številom od 0 do FF (0 do 255). Nekaj primerov:
Poleg zapisa v RGB lahko nekatere osnovne barve pokličemo kar po imenu (npr. red, orange, lightyellow,...). Nekaj primerov barv in odgovarjajočih imen:
<BODY bgcolor=Orange>
<FONT color=Red> Besedilo </FONT>
<TD bgcolor=Orange> Besedilo </TD>
Z okviri razdelimo okno na več delov.
<HTML> <HEAD> <TITLE>Okviri</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> </HEAD> <FRAMESET rows="33%,67%"> <FRAME src="zgornji.htm" name="zgornji"> <FRAME src="spodnji.htm" name="spodnji"> </FRAMESET> </HTML>
<HTML> <HEAD> <TITLE>Okviri</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> </HEAD> <FRAMESET cols="33%,67%"> <FRAME src="levo.htm" name="levi"> <FRAME src="desno.htm" name="desni"> </FRAMESET> </HTML>
<HTML> <HEAD> <TITLE>Okviri</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> </HEAD> <FRAMESET cols="33%,67%"> <FRAME src="levo1.htm" name="levi1"> <FRAMESET rows="33%,67%"> <FRAME src="zgornji1.htm" name="zgornji1"> <FRAME src="spodnji1.htm" name="spodnji1"> </FRAMESET> </FRAMESET> </HTML>
<A HREF="http://www.google.com">http://www.google.com </A>
<A HREF="http://www.najdi.si" target="_blank">http://www.najdi.si </A>
<A HREF="http://www.fdv.uni-lj.si" target="spodnji1">http://www.fdv.uni-lj.si </A>
<HR>
<HR size=10 width=40%>
<CENTER> To bo na sredini </CENTER>
x<SUP>2</SUP>
<FONT SIZE=1>Napisano z velikostjo 1.</FONT> ustvari izpis Napisano z velikostjo 1.
<FONT SIZE=3>Napisano z velikostjo 3.</FONT> ustvari izpis Napisano z velikostjo 3.
<FONT SIZE=7>Napisano z velikostjo 7.</FONT> ustvari izpis Napisano z velikostjo 7.
Obrazec v HTML opišemo z elementom form. Med njegove najpomembnejše lastnosti spadajo method, ki določa način prenosa podatkov do strežnika (možni vrednosti sta get in post), enctype določa način kodiranja podatkov, action pa naslov programa (spletne strani), ki bo obdelal v obrazec vnešene podatke.
<form method="..." enctype="..." action="..."> ... </form>
Pri sestavljanju obrazca imamo na voljo različna polja, ki jih lahko uporabimo. Če želimo vrednost polja po kliku na gumb prenesti na strežnik, moramo polje poimenovati (ime določimo z lastnostjo name).
To je najbolj pogosto polje v obrazcih. Namenjenu je vnosu kratkega (enovrstičnega) besedila. Z lastnostjo size lahko določimo širino polja v znakih, z lastnostjo maxlength pa omejimo število znakov, ki jih lahko vpišemo v to polje. Lastnost value določa začetno vrednost polja (besedilo, ki je že na začetku vpisano v to polje).
<input type="text" name="..." size="..." maxlength="..." value="..." />
To polje je zelo podobno polju za vnos kratkega besedila, edina razlika je, da znakov, ki jih vnašamo, ne vidimo (namesto njih se prikazujejo zvezdice ali krogci, odvisno od operacijskega sistema).
<input type="password" name="..." size="..." maxlength="..." value="..." />
Polja te vrste večkrat imenujemo tudi radijski gumbi. Uporabljamo jih, kadar moramo izbrati največ eno izmed več možnih vrednosti. Vsako polje je lahko vklopljeno ali izklopljeno, pri čemer je vklopljeno lahko največ eno polje v skupini. Ko vklopimo drugo polje, se izklopi tisto, ki je bilo prej vklopljeno. Vsa polja v skupini morajo imeti enako ime. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenese vrednost vklopljenega polja (vrednost, ki jo določimo z lastnostjo value). Z lastnostjo checked (ta je brez vrednosti) lahko zahtevamo, naj bo polje že na začetku vklopljeno.
<input type="radio" name="..." value="..." checked="checked" />
Podobno kot pri radijskih gumbih lahko ustvarimo tudi skupino gumbov za izbiro vrednosti, ki pa se med seboj ne izklapljajo. Velikokrat je v skupini samo en takšen gumb. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenesejo vrednosti vseh vklopljenih polj.
<input type="checkbox" name="..." value="..." checked="checked" />
Polje te vrste lahko uporabljamo namesto skupine radijskih gumbov. Polje je sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu radijskemu gumbu. Vrednost, ki jo dobi strežnik, ko končamo z vnosom podatkov, določimo z lastnostjo value pri vsaki opciji posebej (strežnik dobi vrednost izbrane opcije). Z lastnostjo selected lahko določimo, katera opcija bo izbrana na začetku. Vsebina elementa option, je besedilo, ki se prikaže v seznamu možnosti. To besedilo je tudi vrednost opcije, kadar vrednosti opcije z lastnostjo value ne predpišemo. Lastnost size določa, koliko opcij želimo videti naenkrat v seznamu možnosti. Če je opcij več, se ob strani prikaže drsnik.
<select name="..." size="..."> <option value="..." selected="selected">...</option> ... </select>
Polje te vrste lahko uporabljamo namesto skupine gumbov za izbiro. Polje je sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu gumbu. Polje sestavimo podobno, kot polje za izbiro ene izmed več vrednosti iz seznama, le da dodamo lastnost multiple. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenesejo vrednosti vseh izbranih opcij. Več opcij izberemo s pomočjo tipk SHIFT in CTRL.
<select name="..." size="..." multiple="multiple"> <option value="..." selected="selected">...</option> ... </select>
To polje uporabljamo za vnos daljšega (večvrstičnega) besedila. Z lastnostma rows in cols določimo velikost polja (število vrstic in stolpcev v znakih). Besedilo, ki bi ga želeli imeti v polju že na začetku, vpišemo kot vsebino elementa textarea.
<textarea name="..." rows="..." cols="..."> ... </textarea>
To polje uporabimo, kadar želimo omogoči prenos datoteke na strežnik. Uporabnik bo izbral datoteko na svojem računalniku, ko bo kliknil na gumb za konec vnosa, pa se bo vsebina datoteka prenesla na strežnik. Z lastnostjo size lahko določimo širino polja, začetne vrednosti pa iz varnostnih razlogov ne moremo določiti. Ime datoteke lahko uporabnik vpiše v polje, ali pa pritisne gumb za izbiro datoteko, ki se pojavi na desni strani polja. Kadar v obrazcu uporabimo to vrsto polja, moramo lastnost method v obrazcu nastaviti na post, lastnost enctype pa na multipart/form-data.
<input type="file" name="..." size="..." />
Skritega polja uporabnik ne more videti, niti mu ne more spremeniti vrednosti. Polje te vrste je uporabno za nastavitev vrednosti, ki jih želimo poslati strežniku v vsakem primeru. Vrednost skritega polja lahko spremenimo samo s pomočjo programa v enem od skriptnih jezikov, kot je JavaScript.
<input type="hidden" name="..." value="..." />
Sliko lahko uporabimo namesto gumba za konec vnosa. Ko uporabnik klikne na sliko, bodo podatki, vpisani v obrazec, poslani na strežnik, skupaj s koordinatama, kam na sliko smo kliknili (če je slika poimenovana).
<input type="image" name="..." src="..." alt="..." />
To je gumb brez posebne vloge. Uporabimo ga lahko, kadar želimo storiti kaj posebnega, kadar bo uporabnik kliknil nanj. Lastnost value določa napis na gumbu, z lastnostjo onClick pa določimo, kaj želimo storiti ob kliku (akcijo opišemo s stavkom v programskem jeziku JavaScript).
<input type="button" value="..." onClick="..." />
Skoraj vsak obrazec naj bi imel gumb, s katerim lahko uporabnik zaključi vnos podatkov. Ko bo kliknil nanj, se odpre naslednja spletna stran, določena z lastnostjo action v obrazcu. Običajno je tam zapisano ime programa na strežniku, ki bo sprejel, obdelal in shranil podatke, ter sestavil odgovor. Lastnost value določa napis na gumbu, če pa je gumb poimenovan, se tudi ta vrednost pošlje na strežnik.
<input type="submit" name="..." value="..." />
Z gumbom te vrste lahko kadarkoli vzpostavimo začetno stanje vseh polj v obrazcu. Lastnost value določa napis na gumbu.
<input type="reset" value="..." />
<form action="porocilo.html"><p> Ime in priimek: <input type="text" name="ime" size="30" /><br /> Spol: <input type="radio" name="spol" value="m" /> moški <input type="radio" name="spol" value="z" /> ženski <br /> Starost: <select name="starost"> <option value="<10"> manj kot 10 </option> <option value="10-20"> med 10 in 20 </option> <option value="20-30"> med 20 in 30 </option> <option value="30<"> več kot 30 </option> </select> <br /> Telefon: <input type="text" name="telefon" /> <br /> <input type="submit" value=" OK " /> </p></form>
Poleg zgoraj omenjenih gumbov (polja tipa submit, reset, button in image) lahko uporabljamo tudi gumbe, ki jih opišemo z elementom button. Vrsto gumba v tem primeru določimo z lastnostjo type, ki ima lahko eno izmed vrednosti button, submit ali reset. Napis in/ali sliko na gumbu vpišemo kot vsebino elementa button.
<button type="button" onClick="...">...</button> <button type="submit">...</button> <button type="reset">...</button>
Opcije pri poljih select lahko razdelimo v več skupin. To storimo tako, da več opcij postavimo v skupino, ki jo opišemo z elementom optgroup. Posebej koristno je to pri dolgih seznamih opcij, kjer imamo več med seboj sorodnih opcij (te postavimo v isto skupino). Skupine ne morejo biti gnezdene (znotraj skupine ne moremo definirati podskupine). Z lastnostjo label določimo besedilo, ki se bo pojavilo v seznamu izbir (tega besedila ne bo možno izbrati).
<select name="..." size="..."> <optgroup label="..."> <option value="...">...</option> <option value="...">...</option> ... </optgroup> ... </select>
Medtem, ko nekaterim poljem v obrazcu lahko določimo opise (napisi na gumbih), drugim tega brez uporabe dodatnih elementov ne moremo. Pred polje za vnos besedila moramo sami napisati, kaj naj uporabnik vnese, za vsakim radijskim gumbom moramo sami napisati, kaj tisti gumb pomeni ... Problem je, da če uporabnik klikne na tak opis, se ne zgodi ničesar (radijski gumb lahko vklopimo samo, če kliknemo nanj). Težavo rešimo z uporabo elementa label. Uporabimo ga lahko na dva načina. Najbolje bo, da si ju pogledamo kar na primeru.
<label>Priimek: <input type="text" name="priimek" /></label> <label for="priimek">Priimek:</label> <input type="text" name="priimek" id="priimek" />
V prvem primeru element label vsebuje opis in polje za vnos besedila. Ta način uporabe je primeren, kadar opis in polje nastopata skupaj (vmes ni nič drugega). V večini primerov pa za razmeščanje opisov in polj uporabljamo tabelo, tako da je med njima še kakšna značka za prehod v naslednjo celico ali celo vrstico tabele. V takih primerih nam preostane samo drugi način uporabe, kjer opis in polje definiramo vsakega posebej, povežemo pa ju tako, da polju damo neko oznako (definiramo lastnost id), v opisu pa se skličemo nanj (definiramo lastnost for).
Pri razmeščanju polj nam bo v pomoč element fieldset, s katerim definiramo skupino polj. Skupina se obnaša kot celota, tako da jo je veliko lažje prestavljati in oblikovati. Prikaže se kot pravokotnik z robom, znotraj katerega so razmeščena vse polja te skupine. Skupina ima lahko tudi naslov, ki ga določimo z elementom legend znotraj skupine. Naslov skupine se prikaže na zgornjem robu pravokotnika.
<fieldset> <legend>...</legend> <!-- razmestitev polj --> </fieldset>
Preden polju spremenimo vrednost, ga moramo aktivirati. Aktiviramo ga tako, da kliknimo nanj, lahko pa tudi večkrat pritisnemo tipko TAB. Pri uporabi tipke TAB se polja aktivirajo v takem vrstnem redu, kot so našteta v datoteki HTML. Lahko pa vrstni red spremenimo, če poljem definiramo lastnost tabindex. Pri vsakem polju damo tej lastnosti drugačno vrednost (celo število med 0 in 32767). Polja se aktivirajo po vrsti od tistega z najmanjšo vrednostjo do tistega z največjo vrednostjo. Izjema so polja z vrednostjo 0 in polja brez vrednosti, ki se aktivirajo na koncu v takem vrstnem redu, kot so našteta v datoteki.
Vsakemu polju lahko predpišemo še dve lastnosti brez vrednosti. Prva je lastnost readonly, ki onemogoči spreminjanje vrednosti polja (polje še lahko aktiviramo), druga pa je disabled, ki onemogoči tudi aktiviranje polja in pošiljanje vrednosti na strežnik.