Telo - BODY

Kazalo:


Naslovi

HTML jezik pozna šest različnih naslovov. Naslovi so enostavno označeni s številkami od 1 do 6. Glavni naslov se začne s številko 1.

Sintaksa elementa je naslednja:

<Hy> Besedilo naslova </Hy>         y = 1..6

<Hy ALIGN=LEFT|RIGHT|CENTER> Besedilo naslova </Hy>

Primer:

<H1> Ko odpove vse drugo, preberi navodila! </H1>
<H2> Ko odpove vse drugo, preberi navodila! </H2>
<H3> Ko odpove vse drugo, preberi navodila! </H3>
<H4> Ko odpove vse drugo, preberi navodila! </H4>
<H5> Ko odpove vse drugo, preberi navodila! </H5>
<H6> Ko odpove vse drugo, preberi navodila! </H6>

<H1> SLOVENIJA </H1>
<H1 ALIGN=LEFT> SLOVENIJA </H1>
<H1 ALIGN=RIGHT> SLOVENIJA </H1>
<H1 ALIGN=CENTER> SLOVENIJA </H1>

Odstavki

V običajnih urejevalnikih besedil s tipko ENTER povzročimo prelom vrstice oziroma zaključimo odstavek. V HTML dokumentih pa ni tako. Za dolžino vrstice nam ni potrebno skrbeti, ker pregledovalniki sami poskrbijo za ustrezen prelom. Za lažjo predstavo si zapišimo naslednji tekst:

<H1 ALIGN=CENTER> NERECIPROČNI ZAKON PRIČAKOVANJA </H1>
<P> 1. Negativna pričakovanja dajejo negativne rezultate.
    2. Pozitivna pričakovanja dajejo negativne rezultate. </P>

V izvornem dokumentu smo naredili prelom vrstice, vendar je pregledovalnik prelom spregledal. Iz zagate se rešimo tako, da vsak nov odstavek ukažemo z elementom <P>.

Prejšnji primer popravimo na naslednji način:

<H1 ALIGN=CENTER> NERECIPROčNI ZAKON PRIČAKOVANJA </H1>
<P> 1. Negativna pričakovanja dajejo negativne rezultate.</P>
<P> 2. Pozitivna pričakovanja dajejo negativne rezultate.</P>

Sintaksa elementa je naslednja:

<P> Vsebina odstavka </P>

<P ALIGN=LEFT|RIGHT|CENTER > Vsebina odstavka </P>

Opomba:    Oznaka za konec odstavka </P> ni obvezna.

Primer:

<H2> IZVLEČEK IZ UNIVERZALNIH ZAKONOV ZA NAIVNE INŽINIRJE </H2>
<P> Takoj ko boš sestavil stroj, bo na tvoji delovni mizi nekaj delov odveč. </P>
<P> Tranzistor zavarovan z varovalko, bo varovalko varoval tako, da bo crknil prej kot ona.
<P> Deli, ki se jih nikakor ne da sestaviti narobe, bodo sestavljeni prav tako.
<P> Različne poravnave odstavkov!
<P ALIGN=RIGHT> Odstavek je desno poravnan!
<P ALIGN=CENTER>Odstavek je poravnan na sredino! </P>

Seznami

HTML jezik pozna neoštevilčene, oštevilčene in definicijske sezname. Iz osnovnih oblik lahko gradimo tudi ugnezdene sezname, ki pa lahko postanejo nepregledni.

Neoštevilčeni seznami (Unnumbered Lists)

Neoštevilčene sezname začnemo z oznako <UL>, nato posamezne vrstice začenjamo z oznako <LI>. Vrstic ni potrebno končevati z oznako </LI>. Celoten seznam končamo z oznako </UL>.

Sintaksa elementa je naslednja:

<UL>
 <LI> Prva vrstica seznama
 <LI> Druga vrstica seznama
 <LI> Tretja vrstica seznama
 <LI> .......
</UL>

Primer:

<H2> RESNICA O UPRAVLJANJU </H2>
<UL>
<LI> Premisli, preden se odločiš. To ni tvoj denar.
<LI> Vsako dobro upravljanje je izraz velike ideje.
<LI> Nihče se ne trudi, da bi dokazal, da nima prav.
<LI> če je treba kaj dokazati z zapletenimi izračuni se
ne spuščaj v to.
</UL>



Oštevilčeni seznami (Numbered List)

Oštevilčene sezname lahko imenujemo tudi urejeni seznami. Oštevilčeni seznam začnemo z oznako <OL> in končamo z oznako </OL>. Za vrstice seznama uporabljamo enake oznake kot v prejšnjem seznamu <LI>.

Sintaksa elementa je naslednja:

<OL>
 <LI> Prva vrstica seznama
 <LI> Druga vrstica seznama
 <LI> Tretja vrstica seznama
 <LI> .......
</OL>

Primer:

<H2> Hadleyevi zakoni </H2>
<OL>
 <LI> če ti je všeč, nimajo tvoje številke.
 <LI> če ti je všeč in imajo tvoje številko, ti ne pristoji.
 <LI> če ti je všeč in ti pristoji, nimaš dovolj denarja.
 <LI> če ti je všeč in ti pristoji in imaš dovolj denarja, se bo strgalo prvič, ko boš stvar oblekel.
</OL>

Definicijski seznami

Definicijski seznami so sestavljeni iz oznake za definicijski seznam <DL>, oznake za pojem, ki ga želimo definirati <DT> in iz oznake za samo razlago <DD>.

Sintaksa elementa je naslednja:

<DL>
<DT> pojem, ki ga želimo definirati
<DD> razlaga
<DT> pojem, ki ga želimo definirati
<DD> razlaga
<DT> .....
<DD> .....
</DL>

Primer:

<DL>
<DT> Bela svetloba
<DD> Bela svetloba je v resnici mešanica barv. Žarek bele svetlobe je
 sestavljen iz elektromagnetnih valovanj različnih valovnih dolžin.
<DT> Laser
<DD> Laser je naprava, ki oddaja zelo močan snop svetlobnih žarkov.
Snop je zelo tanek in ni podoben navadni svetlobi.
<DT> Diamant
<DD> Diamant je najtrša naravna snov na zemlji. Uporabljajo ga kot
drag kamen ali za razna rezilna ali vrtalna orodja v industriji.
</DL>

Ugnezdeni seznami

Na koncu poglavja o seznamih si oglejmo še ugnezdene sezname.

Primer:

<UL>
<LI>Evropske države
	<OL>
	<LI> Slovenija
	<LI> Francija
	<LI> Italija
	<LI> ....
	</OL>
<LI>Afriške države
	<OL>
	<LI> Egipt
	<LI> Libija
	<LI> Somalija
	<LI> ....
	</OL>
<LI>Azijske države
	<OL>
	<LI> Indija
	<LI> Kitajska
	<LI> Burma
	<LI> ....
	</OL>
</UL>

Vnaprej oblikovano besedilo

V določenih primerih želimo imeti besedilo oblikovano na naprej določen način. Da pregledovalnik obdrži definirano obliko, uporabimo oznako <PRE>. Besedilo je izpisano s črkami enake širine.

Sintaksa elementa je naslednja: 

<PRE>
   Oblikovano besedilo
</PRE>

Primer:

<H2> Primer programa v Turbo Pascalu: </H2>
<PRE>
Program Test;

Uses
	Crt;

Var
	i  :  Integer;
	x,y   : Real;

Begin
	Readln(i);
	Readln(x);
	y:=x/i;
	Writeln(i,x,y);
End.

</PRE>

Zamaknjeni odstavki

Za zamik odstavka v levo uporabimo oznako <BLOCKQUOTE>. Zamike uporabljamo kadar želimo obrniti pozornost na določen del besedila.

Sintaksa elementa je naslednja:

<BLOCKQUOTE>
<P> Zamaknjeni odstavek
<P> Zamaknjeni odstavek
<P> ......
</BLOCKQUOTE>

Primer:

<P> Zajček vpraša:
<BLOCKQUOTE>  "Kje je korenje?"
<P> "Na njivi!" odgovori medved.</BLOCKQUOTE>
<P> Zajček zadovoljen odskaklja dalje.

Prelomi vrstice

Uporaba oznake <P> povzroči presledek med vrsticami besedila, ki ga v določenih primerih ne želimo.

Primer:

<P>Gimnazija in ekonomska
<P>srednja šola Trbovlje
<P>Gimnazijska 10
<P>1420 Trbovlje

Zelo uporabna oznaka za prelom strani je oznaka <BR>.

Sintaksa elementa je naslednja:

besedilo ki ne bo široko celo vrstico <BR>
besedilo v novi vrsti <BR>
besedilo v novi vrsti <BR>
.......... <BR>

Primer:

Gimnazija in ekonomska <BR>
srednja šola Trbovlje <BR>
Gimnazijska 10 <BR>
1420 Trbovlje <BR>

Vodoravne črte

Z oznako <HR> narišemo vodoravno črto, ki sega od levega do desnega roba pregledovalnika. Z vodoravnimi črtami povečamo preglednost dokumentov. Črti lahko spreminjamo debelino (SIZE) in širino (WIDTH ; v odstotkih širine okna).

Sintaksa elementa je naslednja:

<HR>

<HR SIZE=4 WIDTH=50%>

Primer:

<HR>
<P>Gimnazija in ekonomska
<P>srednja šola Trbovlje
<P>Gimnazijska 10
<P>1420 Trbovlje
<P>
<HR SIZE=5 WIDTH=70%>
Gimnazija in ekonomska <BR>
srednja šola Trbovlje <BR>
Gimnazijska 10 <BR>
1420 Trbovlje <BR>
<HR SIZE=7>
<HR SIZE=4>

Oblikovanje znakov

Za oblikovanje znakov ali besed v besedilu lahko uporabljamo dve vrsti stilov. Prvo skupino imenujemo logični stili, drugo pa fizični stili. Rezultati obeh dveh načinov so si zelo podobni, zato je stvar osebne presoje za kateri način se odločimo.

Logični stili znakov
 

<DFN> -- uporabljamo za nove pojme v besedilu. Običajno je beseda izpisana poševno.

<EM> -- uporabljamo za opombe ali poudarke v besedilu. Običajno je besedilo izpisano poševno. 
<CITE> -- uporabljamo za naslove knjig, filmov, itd. Običajno je besedilo izpisano poševno.
<CODE> -- uporabljamo za izpis kode računalniških programov. Običajno je besedilo izpisano s črkami
          enake širine.
<KBD> -- uporabljamo za vnose preko tipkovnice. Običajno je besedilo izpisano s črkami enake širine. 
<SAMP> -- uporabljamo za prikaz primerov. Običajno je besedilo izpisano s črkami enake širine. 
<STRONG> -- uporabljamo za posebej pomembne poudarke ali opozorila vbesedilu. Običajno je besedilo
            izpisano s krepkimi črkami.
<VAR> -- uporabljamo za poimenovanje spremenljivk, ki jih kasneje zamenjamo s konkretnimi vrednostmi

Primer:

<HTML>
<HEAD>
<TITLE>Primeri za logicne stili znakov </TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER> LOGIčNI stili znakov </H2>

<H3>DFN</H3>
Butalci niso kar za pečjo čepeli, nego je marikateri s <DFN>popotnim škornjem</DFN> stopil tudi
v svet in prinesel marsikaj koristnega iz tujine.

<H3>EM</H3>
<EM> Vse stvari same od sebe težijo od slabega k še slabšemu! </EM>

<H3>CITE</H3>
<CITE> Začetniški vodič po jeziku HTML </CITE> vam bo omogočil spoznati osnove HTML jezika.

<H3>CODE</H3>
V mapi <CODE>Dokumenti</CODE> poiščemo datoteko <CODE> Poročilo.doc </CODE>.

<H3>KBD</H3>
V vnosni vrstici zapišemo: <KBD> +A3-(B3*$D$8) </KBD>.

<H3>SAMP</H3>
Ljudska modrost pravi: <SAMP> Osel gre le enkrat na led. </SAMP>

<H3>STRONG</H3>
<STRONG> OPOZORILO: </STRONG> Uporaba nelicenčne programske opreme je kaznivo!

<H3>VAR</H3>
Spremenljivko <VAR>Kolicina</VAR> definiramo kot tip integer.

</BODY>
</HTML>

Fizični stili znakov

HTML jezik pozna definicijo za pet različnih stilov znakov in sicer: krepko, poševno, črke pisalnega stroja (črke enake širine), prečrtano in podčrtano. Oznake za stile so naslednje:

<B> -- krepko 
<I> -- poševno 
<U> -- podčrtano 
<STRIKE> -- prečrtano
<TT> -- črke pisalnega stroja (črke enake širine)

Primer:

<HTML>
<HEAD>
<TITLE>Primeri fizičnih stilov znakov </TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER> FIZIčNI stili znakov </H2>

<H3>B</H3>
<B> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na pregled po domači ulici, 
da so Butalci uživali njeno lepoto. Butalci so bili ponosni na suknjo in so dejali: "Mi smo mi!".</B>

<H3>I</H3>
<I> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na pregled po domači ulici, 
da so Butalci uživali njeno lepoto. Butalci so bili ponosni na suknjo in so dejali: "Mi smo mi!".</I>

<H3>U</H3>
<U> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na pregled po domači ulici, 
da so Butalci uživali njeno lepoto. Butalci so bili ponosni na suknjo in so dejali: "Mi smo mi!".</U>

<H3>STRIKE</H3>
<STRIKE> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na pregled po domači ulici, 
da so Butalci uživali njeno lepoto. Butalci so bili ponosni na suknjo in so dejali: "Mi smo mi!".</STRIKE>

<H3>TT</H3>
<TT> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na pregled po domači ulici, 
da so Butalci uživali njeno lepoto. Butalci so bili ponosni na suknjo in so dejali: "Mi smo mi!".</TT>

</BODY>
</HTML>

Uporaba posebnih znakov v HTML dokumentih

Znaki kot so >, < in & imajo v HTML dokumentih pomen rezerviranih znakov. To pomeni, da jih ne moremo uporabljati v navadnem besedilu, saj bi jih pregledovalniki zamenjevali z HTML oznakami. Zato te znake pišemo v posebni obliki:

&lt; -- oznaka za znak < 
&gt; -- oznaka za znak > 
&amp; -- oznaka za znak &

Na podoben načina lahko uporabljamo tudi znake, ki jih poznamo iz kodne tabele LATIN 1 in pomenijo razširitev osnovne ASCII tabele:

&ouml; -- oznaka za znak , 
&ntilde; -- oznaka za mali n s tildo 
&Egreve; -- oznaka za znak 
&egreve; -- oznaka za znak

OPOZORILO: Pri pisanju posebnih znakov je pomembno ali uporabljamo male ali velike črke - &LT; ni enako &lt;.

Primer:

<HTML>
<HEAD>
<TITLE>Primeri posebnih znakov </TITLE>
</HEAD>

<BODY>

<HR>
<H2>Rezervirani in posebni znaki </H2>
<UL>
   <LI>Rezervirani znaki
	<UL>
	<LI> Tonček &lt; Mihec
	<LI> A &gt; B
	<LI> Mlakar &amp; Co.
	</UL>
   <LI>Posebni znaki
	<UL>
	<LI> M&uuml;ller
	<LI> &ntilde;
	<LI> &Eacute;
	<LI> &eacute;
	<LI> &#249;
	</UL>
</UL>
<HR>

</BODY>
</HTML>

Spreminjanje velikosti in barve pisave

V HTML dokumentih pisavo spreminjamo z elementom <FONT atribut>. Za spreminjanje velikosti uporabljamo atribut SIZE, za spreminjanje barve pa atribut COLOR.

Sintaksa elementa:

<FONT  SIZE=n COLOR=Barva>

n - zavzema vrednosti od 1 do 7 (n lahko izrazimo tudi v relativnih vrednostih glede na osnovno velikost pisave - npr.: +1,+2,..-1,-2)

Barva - izrazimo jo s šestimi šestnajstiškimi ciframi prvi dve predstavljata rdečo, naslednji dve zeleno in zadnji dve modro barvo

Primer zapisa barve:

FF0000 - rdeča barva,       00FF00 - zelena barva,          0000FF - modra barva.

Primer:

<HTML>
<HEAD>
<TITLE>Primeri velikosti  in barve pisave</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER> Pisave različnih velikosti </H2>

<H3>Velikosti pisav</H3>

<FONT SIZE = 1>1.Butalci so gadje!<BR>
<FONT SIZE = 2>2.Butalci so gadje!<BR>
<FONT SIZE = 3>3.Butalci so gadje!<BR>
<FONT SIZE = 4>4.Butalci so gadje!<BR>
<FONT SIZE = 5>5.Butalci so gadje!<BR>
<FONT SIZE = 6>6.Butalci so gadje!<BR>
<FONT SIZE = 7>7.Butalci so gadje!<BR>

<H1>Sprememba barve pisave</H1>
<FONT SIZE = +1 COLOR=FFFFFF> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na 
pregled po domači ulici, da so Butalci uživali njeno lepoto. Butalci so bili ponosni na 
suknjo in so dejali: "Mi smo mi!".<BR>

<H1>Sprememba barve pisave</H1>
<FONT SIZE = +1 COLOR=0000FF> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na 
pregled po domači ulici, da so Butalci uživali njeno lepoto. Butalci so bili ponosni na 
suknjo in so dejali: "Mi smo mi!".<BR>

<H1>Sprememba barve pisave</H1>
<FONT SIZE = +1 COLOR=FF0000> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na 
pregled po domači ulici, da so Butalci uživali njeno lepoto. Butalci so bili ponosni na 
suknjo in so dejali: "Mi smo mi!".<BR>

<H1>Sprememba barve pisave</H1>
<FONT SIZE = -1 COLOR=00FF00> Butalski župan je imel novo suknjo. Tri tedne jo je nosil na 
pregled po domači ulici, da so Butalci uživali njeno lepoto. Butalci so bili ponosni na 
suknjo in so dejali: "Mi smo mi!".<BR>

</BODY>
</HTML>

Utripanje označenega besedila

V HTML dokumentu lahko dosežemo, da določena beseda ali stavek utripa. Ta učinek dosežemo z ukazom <BLINK></BLINK>.

Sintaksa ukaza je naslednja:

<BLINK>Utripajoče besedilo</BLINK>

Primer:

<BLINK>Jaz sem utripalček.</BLINK>

Premikanje besedila po traku

V HTML dokumentu lahko dosežemo premikanje besedila po traku preko spletne strani. Ta učinek dosežemo z ukazom <MARQUEE></MARQUEE>. Z Samim ukazom je povezanih kar nekaj lastnosti.

Lastnosti:

BEHAVIOR -- določimo način premikanja besedila po traku

     SCROLL -- besedilo se pojavi na eni strani traku in izgine na drugi

     SLIDE -- besedilo se premika z ene strani na drugo, kjer se nato ustavi

     ALTERNATE -- smer premikanja se spreminja

BGCOLOR -- izberemo barvo površine, prek katere se premika besedilo

DIRECTION -- izberemo smer premikanja besedila

     LEFT -- besedilo se premika proti levi

     RIGHT -- besedilo se premika proti desni

HEIGHT -- nastavimo višino traku,po katerem se premika besedilo

HSPACE -- odmaknemo besedilo od desnega ali levega roba traku

LOOP -- določimo kolikokrat se besedilo premakne po traku (-1 ali INFINITE - napis se premika stalno)

SCROLLAMOUNT -- premaknemo besedilo za poljubno število točk

SCROLLDELAY -- nastavimo hitrost prenikanja besedila v milisekundah

TRUESPEED -- natančno določimo časovni presledek, po katerem se napis premakne

VSPACE -- nastavimo odmik besedila od zgornjega in spodnjega roba traku

WIDTH -- nastavimo širino traku s premičnim napisom

Sintaksa ukaza je naslednja:

<MARQUEE LASTNOST=vrednost>Premikajoče besedilo</MARQUEE>

Primer:

<HTML>
<HEAD>                        
  <TITLE>Premikanje besedila</TITLE>                                                                       
</HEAD>
<BODY>
<MARQUEE BEHAVIOR=SCROLL DIRECTION=RIGHT>Letim v desno.</MARQUEE>
<MARQUEE BEHAVIOR=SLIDE BGCOLOR=#00FF00>Letim po barvi.</MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE LOOP=3>Letel bom trikrat.</MARQUEE>
</BODY>
</HTML>

Blok besedila

V HTML dokumentu lahko besedilo zapišemo v blok <DIV></DIV> in s tem dosežemo, da je to besedilo ločeno od drugega besedila s prazno vrstico. Ukaz nam omogoča poljubno spreminjanje lastnosti tega besedila.

Sintaksa ukaza je naslednja:

<DIV LASTNOST>Besedilo in slike</DIV>

Primer:

<DIV ALIGN="RIGHT">
    <H3>Naslov</H3>
	   Z ukazom DIV lahko poravnamo večji blok elementov.
</DIV>

Povezave

Največjo moč HTML jezik pokaže pri povezavi besedila in slik v istih ali različnih dokumentih. Pregledovalnik povezavo označi s posebno barvo in stilom besedila. Tudi kazalec se na povezavi iz puščice spremeni v roko z iztegnjenim kazalcem. Tako povezavo z angleškim izrazom imenujemo hipertext link, zato več med seboj povezanih HTML dokumentov imenujemo hipertekst. Oglejmo si sintakso enostavne povezave:

Sintaksa elementa:

<A HREF= naslov dokumenta>besedilo povezave </A>

naslov dokumenta - pot in ime dokumenta na katerega želimo narediti povezavo

besedilo povezave - besedilo, ki v obstoječem dokumentu označuje povezavo.

Izgled enostavne povezave:

<A HREF = Primer1.htm>Slovenija</A>

Za zgornji zgled velja, da je besedilo Slovenija povezava na datoteko Primer2.htm. To pomeni, da bo pregledovalnik ob kliku na besedilo Slovenija, prikazal datoteko Primer2.htm.

Za primer si izdelajmo dokument, ki bo kazalo na naše dosedanje primere:

<HTML>
<HEAD>
<TITLE>Primeri enostavnih povezav</TITLE>
</HEAD>
<BODY>
<H2> Kazalo primerov </H2>
<UL>
<LI><A HREF="primer2.htm">Naslovi</A>
<LI>Odstavki
	<UL>
	<LI><A HREF="primer3a.htm">Primer A</A>
	<LI><A HREF="primer3b.htm">Primer B</A>
	<LI><A HREF="primer3c.htm">Primer C</A>
	</UL>
<LI>Seznami
	<UL>
	<LI><A HREF="primer4.htm">Neoštevilčeni seznami</A>
	<LI><A HREF="primer5.htm">Oštevilčeni seznami</A>
	<LI><A HREF="primer6.htm">Definicijski seznami</A>
	<LI><A HREF="primer7.htm">Ugnezdeni seznami</A>
	</UL>
<LI><A HREF="primer8.htm">Vnaprej oblikovano besedilo</A>
</UL>
</BODY>
</HTML>

Relativni in absolutni naslovi datotek

Povezave med datotekami lahko zapišemo v obliki relativnega naslova datoteke glede na izhodiščno datoteko ali pa v obliki absolutnega naslova datoteke. Za relativne naslove veljajo naslednja preprosta navodila:

    1. Če sta izhodiščna datoteka in klicana datoteka v isti mapi je dovolj, da v povezavi zapišemo samo ime datoteke: 
<A HREF= slika1.gif>  Zastava </A>
    2. Če je klicana datoteka v podmapi glede na izhodiščno datoteko moramo poleg imena datoteke navesi še imena podmap: 
<A HREF=slike/slika1.gif> Zastava </A>
    3. Če je klicana datoteka v mapi, ki je višje, glede na izhodiščno datoteko moramo poleg imena datoteke dodati še ..: 
<A HREF=../slika1.gif> Zastava </A>

Prednosti relativnih naslovov datotek so naslednje:

  • Preselitev skupine dokumentov na druge lokacije ne pretrga povezav med njimi.
  • Strežniki hitreje vzpostavljajo povezave.
  • Manj potrebnega pisanja in zato manjša možnost za napake.

Na žalost vedno ne moremo uporabljati relativne naslove datotek. Kadar so datoteke na drugih strežnikih moramo v povezavah uporabljati absolutne oziroma URL naslove datotek.

URL naslovi

Svetovni splet uporablja Uniform Resource Locator (URL) za določitev lokacije datoteke na različnih strežnikih. URL je sestavljen iz vrste servisa (splet, gopher, ftp, itd.), naslova strežnika in lokacije datoteke. Splošna oblika naslova je:

servis://strežnik.domena [:vhod]/pot/ime datoteke

Možni servisi so:

file -- datoteka na domačem računalniku 
ftp -- datoteka na FTP strežniku 
http -- datoteka na spletnem (WWW) strežniku 
gopher -- datoteka na Gopher strežniku 
WAIS -- datoteka na WAIS strtežniku 
news -- Usnetova skupina novic 
telnet -- povezava s servisom za Telnet

Strežnik in domena predstavljata računalnik na katerem je shranjena datoteka, katero želimo priklicati. Vhod običajno lahko spregledamo.

Za primer zapišimo URL naslov naslednje datoteke:

<A HREF=http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html>

OPOZORILO: Pri pisanju naslovov moramo paziti na velike in male črke. Operacijski sistem UNIX, v nasprotju z DOS-om, razlikuje velike in male črke v imenih datotek. Težavam se najlažje izognemo na ta način, da datoteke vedno poimenujemo z malimi črkami in to upoštevamo pri pisanju naslovov.

Primer:

<HTML>
<HEAD>
<TITLE>Primeri relativnih in absolutnih naslovov datotek</TITLE>
</HEAD>
<BODY>
<H2> POVEZAVE </H2>
<UL>
<LI><A HREF="../cogs.gif">Primer v mapi višje</A>
<LI><A HREF="dokumenti/flag.gif">Primer v podmapi</A>
<LI><A HREF="file://d:/Dokumenti za šolo/Html/DOGRUN_ANIM.gif">Primer absolutnega naslova</A>
</UL>
</BODY>
</HTML>

Povezave na določeni del dokumenta

Poleg povezav med datotekami lahko ustvarjamo tudi povezave med deli istega ali drugega dokumenta. Ta tip povezav imenujemo notranje povezave.

Dolgi dokumenti so nepregledni, zato jih je smiselno razdeliti na logične ali vsebinske sklope. Nato na začetku dokumenta izdelamo kazalo in v kazalu naredimo notranje povezave na dele dolgega dokumenta. Na koncu klicanega dela je koristno narediti povezavo nazaj na kazalo.

Sintaksa notranje povezave je naslednja:

<A HREF=#imelokacije> Besedilo povezave </A>

Seveda v dokumentu moramo označiti mesto lokacije in to storimo z ukazom:

<A NAME=imelokacije></A>

Primer:

<HTML>
<HEAD>
<TITLE>Primeri notranjih povezav  </TITLE>
</HEAD>
<BODY>
<A NAME=SEZ><A>
<H1>Zbirka anekdot<H1>
<BR>
<FONT SIZE=2 COLOR=FF0000>Anekdote so prepisane iz knjige
<CITE> Slavko Krušnik: Smeh stoletij </CITE><BR>
<FONT SIZE=3 COLOR=000000>
<HR>
<H2> Seznam oseb </H2>
<UL>
<LI><A HREF="#GUIL"> Yvette GUILBERT</A>
<LI><A HREF="#GAND"> Luigi Arnaldo Vassallo GANDOLIN</A>
<LI><A HREF="#DEGA"> Charles de GAULLE</A>
<LI><A HREF="#WRIG"> Wilbur WRIGHT</A>
<LI><A HREF="#GUIL"> .......</A>
</UL>
<HR>

<A NAME="GUIL"><A>
<H2>Yvette GUILBERT </H2>
Francoska varitejska igralka in pevka Yvette GUILBERT je bila zelo suha. O svoji fotografiji 
s psičkom je duhovito dejala:
 "To je pes, ki pazi na kost."
<BR>
<BR>
<P ALIGN=RIGHT> <A HREF="#SEZ"> Nazaj</A></P>
<HR>

<A NAME="GAND"><A>
<H2>Luigi Arnaldo Vassallo GANDOLIN </H2>
Gandolin se je hranil v restavraciji. Nekega večera, ko je odhajal, ni našel klobuka. 
Ko je na to opozoril natakarja, se je ta nevljudno zadrl:<BR>
"Sem ga mar pojedel?"<BR>
"Kdo ve," poprime Gandolin, "bil je iz slame!"
<BR>
<BR>
<P ALIGN=RIGHT> <A HREF="#SEZ"> Nazaj</A></P>
<HR>

<A NAME="DEGA"><A>
<H2>Charles de GAULLE </H2>
Neki možakar je rekel de Gaullu:<BR>
"Moji prijatelji niso zadovoljni z vaso politiko."<BR>
"Izberite si druge," mu je svetoval de Gaulle.
<BR>
<BR>
<P ALIGN=RIGHT> <A HREF="#SEZ"> Nazaj</A></P>
<HR>

<A NAME="WRIG"><A>
<H2>Wilbur WRIGHT</H2>
Pionir ameriškega letalstva Wilbur WRIGHT je bil na slvnostni pojedini, prirejena njemu na čast. 
Proti koncu so vsi trdovratno zahtevali naj spregovori družbi. Wright je nazadnje vstal in rekel:<BR>
"V naravi vsi ptiči letajo. Samo papiga govori. Jaz pa letam in ne znam govoriti."<BR>
Nato je sedel.
<BR>
<BR>
<P ALIGN=RIGHT> <A HREF="#SEZ"> Nazaj</A></P>
<HR>

</BODY>
</HTML>

Pošiljanje pošte (Mailto)

V HTML dokumentu lahko enostavno omogočimo bralcu, da pošlje elektronsko pošto avtorju ali odgovorni osebi dokumenta. Klic pošte ustvarimo tako, da v povezavo vključimo ukaz mailto in naslov prejemnika pošte.

Sintaksa ukaza je naslednja:

<A HREF=mailto:naslovnik@strežnik>Ime naslovnika</A>

Primer:

<A HREF=mailto:karel.grcar@guest.arnes.si>Karel Grčar</A>

Barve povezav

V HTML dokumentu lahko določimo barvo podčrtanega besedila, ki pomeni povezavo z drugo spletno stranjo. Vsaki povezavi lahko določimo tri različne barve, ki nam označujejo: neobiskano povezavo, obiskano povezavo in aktivno povezavo. Če barv ne nastavljamo je povezava privzeto modre barve.

Lastnosti:

LINK -- neobiskana povezava

VLINK -- obiskana povezava

ALINK -- aktivna povezava

Sintaksa ukaza je naslednja:

<BODY LASTNOST="barva">

Primer:

<BODY LINK="#00FF00" VLINK="#FF6CCF" ALINK="#FF8000">

Vključevanje slik v HTML dokumente

Večina pregledovalnikov omogoča pregledovanje slik, ki so vključene v HTML dokumente. Najbolj razširjena formata slik sta *.GIF in *.JPG. Drugačne formate je smiselno pretvoriti v prej omenjena formata. Slike v dokumentih upočasnijo pregledovanje dokumentov, zato je potrebno skrbno izbrati slike, ki jih bomo vključili v dokument.

Sliko vključimo z ukazom:

<IMG SRC=ImeSlike>

ImeSlike - URL naslov slike

Za pisanje naslovov slik veljajo enaka pravila, kot za pisanje naslovov povezanih datotek.

Primer:

<HTML>
<HEAD>
<TITLE>Primeri prikazovanja slik  </TITLE>
</HEAD>
<BODY>
<IMG SRC =Slika01.jpg>
<IMG SRC =Slika02.gif>
<IMG SRC =Slika03.gif>
<IMG SRC =Slika04.gif>
</BODY>
</HTML>

Spreminjanje velikosti slike

Velikost slike lahko prilagodimo lastnim željam z atributoma HEIGHT (višina slike) in WIDTH (širina slike). Velikost slike izrazimo v točkah (pixels). Sprememba velikosti slike lahko povzroči tudi popačitev.

Za primer spremenimo velikost slike Slika04.gif:

<IMG SRC =Slika04.gif HEIGHT=100 WIDTH=65>

Primer:

<HTML>
<HEAD>
<TITLE>Primeri prikazovanja slik  </TITLE>
</HEAD>
<BODY>

<IMG SRC =Slika04.gif>
<IMG SRC =Slika04.gif HEIGHT=100 WIDTH=90>
<IMG SRC =Slika04.gif HEIGHT=50 WIDTH=45>
<IMG SRC =Slika04.gif HEIGHT=25 WIDTH=20>
<BR>

<IMG SRC =Slika04.gif><BR>
<IMG SRC =Slika04.gif HEIGHT=200 WIDTH=45><BR>
<IMG SRC =Slika04.gif HEIGHT=100 WIDTH=200>
</BODY>
</HTML>

Poravnava slik in okoliškega besedila

Pri prikazovanju slik imamo več možnosti. Slike lahko prikažemo ločene od besedila in poravnane na levi rob, desni rob ali na sredino. Ob sliki lahko poravnamo tudi besedilo z atributom ALIGN. Oglejmo si nekaj možnosti:

Običajno se besedilo nadaljuje na spodnjem robu slike. Če želimo poravnamo spremeniti moramo uporabiti atribut ALIGN.

Ta tekst je poravnan na vrhu slike z naslednjim ukazom: (<IMG SRC=posta.gif ALIGN = TOP>).
Potrebno je opozoriti, da pregledovalniki poravnajo samo prvo vrstico besedila, ostalo besedilo pa premaknejo pod sliko.

Ta tekst je poravnan na sredino slike z ukazom: (<IMG SRC=posta.gif ALIGN = CENTER>). Tudi v tem primeru je poravnana samo ena vrstica besedila.

Primer:

<HTML>
<HEAD>
<TITLE>Primeri prikazovanja slik</TITLE>
</HEAD>
<BODY>
<HR>
<H3>Slika brez poravnave</H3>
<IMG SRC =Slika04.gif>
Maskota olimpijskih iger ATLANTA 1996
<HR>
<H3>Poravnava TOP</H3>
<IMG ALIGN=TOP SRC =Slika04.gif >
Maskota olimpijskih iger ATLANTA 1996
<HR>
<H3>Poravnava CENTER</H3>
<IMG SRC =Slika04.gif ALIGN=CENTER>
Maskota olimpijskih iger ATLANTA 1996
<HR>
</BODY>

Z ukazom (<IMG SRC=posta.gif ALIGN = LEFT>) dosežemo, da je slika na levem robu besedilo pa na desni strani slike. Ta ukaz ne velja samo za eno vrstico besedila, ampak za celotno besedilo.


Z ukazom (<IMG SRC=posta.gif ALIGN = RIGHT>) dosežemo, da je slika na desnem robu besedilo pa na levi strani slike. Ta ukaz ne velja samo za eno vrstico besedila, ampak za celotno besedilo.


Če želimo prikazati slike brez besedila - na primer: logotip organizacije - oblikujemo odstavek v katerem je samo slika. Z atributom za poravnavo odstavka poravnamo tudi sliko v odstavku. Ukazi za samostojno sliko na sredini strani so:

<P ALIGN=CENTER>
<IMG SRC=zemlja.gif>
</P>

Primer:

<HTML>
<HEAD>
<TITLE>Primeri</TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<IMG SRC="zemlja pleše.gif">
</P>
<H3>članek o novi tipkovnici</H3>
<H4>članek je povzet iz revije MONITOR letnik 95 </H4>
<BR>
<BR>

<IMG  SRC="Slika05.gif" ALIGN=TOP><B>ALIGN=TOP</B>
Ste že kdaj videli tipkovnico, ob kateri dobite dve disketi z gonilniki in
(dokaj debelim) priročnikom za uporabo? Jaz še ne, zato me je nova Microsoftova
 tipkovnica dokaj presenetila. No, ja, najprej me je presenetila njena oblika,
a nanjo sem se navadil že ob branju recenzij v tujem tisku. če je še niste videli,
si najprej oglejte njeno sliko, mnogo lažje boste razumeli, o čem govorim.<BR>
<IMG  SRC="Slika05.gif" ALIGN=CENTER> <B>ALIGN=CENTER</B>
Microsoft Natural Keyboard se na svojstven način vključuje v razred "prelomljenih
 tipkovnic". Prvi je bil seveda Apple, ki je že pred več kot letom dal na trg
tipkovnico z ločenim levim in desnim delom. Potem so sledili Keytronic, Lexmark in
morda še kdo, zadnji pa se je v igro vključil Microsoft.<BR>

<IMG  SRC="Slika05.gif" ALIGN=BOTTOM><B>ALIGN=BOTOOM</B>
 Izdelali so tipkovnico, ki za razliko od prejšnjih ni prelomljena. Tipke ima razdeljene
v dve skupini, vendar ne moremo nastavljati kota med njimi, niti višine naklona tipkovnice.
Popolnoma v stari Microsoftovi maniri: "Mi vemo, kaj je za vas najboljše." Tokrat
imajo celo prav. Od vseh naštetih tipkovnic (in vsaj bežno sem se uspel poigrati z vsemi) je
Lexmarkova daleč najbolj nastavljiva, Microsoftova pa najuporabnejša. Vidi se, da so
porabili precej časa za proučevanje tipkanja. "Naravne tipkovnice" se privadimo
zelo hitro, tako da je po daljšem delu z njo težko preiti na navadno.  <BR>

<IMG  SRC="Slika05.gif" ALIGN=LEFT><B>ALIGN=LEFT</B>
Vse to velja predvsem za tiste, ki znajo pravilno desetprstno tipkati. Vsi, ki so se
naučili tipkati sami, običajno uporabljajo obe roki za pokrivanje srednjega dela tipkovnice,
kar jim lahko pri prehodu prinese precej težav. Na vseh prelomljenih tipkovnicah je območje,
ki ga dosega leva roka, jasno ločeno od območja desne. Še več težav bi imeli dvoprstni
tipkarji, katerim nova tipkovnica tako ali tako ni namenjena. Poleg razdeljenega srednjega
dela tipkovnice je sprememb še nekaj. Velika preslednica je postavljena v sredino, tako da
jo lahko pritiskamo z obema palcema. Svetleče diode, ki prikazujejo stanja tipk za
zaklepanje (Caps, Num in Scroll Lock), so prestavili v sredino. Med krmilko (Ctrl) in
izmenjalko (Alt) je postavljena nova tipka z narisanim zaščitnim znakom Oken, s katero
prikličemo upravljalnik opravil (Task Manager). Druga nova tipka, ki jo najdemo le na
desni strani tipkovnice, še nima točno določene vloge. Microsoft poskuša prepričati
programerje, da bi v novih programih ta tipka priklicala menu z najpogostejšimi
operacijami, ki jih lahko v tistem trenutku izvedemo.<BR>

<IMG  SRC="Slika05.gif" ALIGN=RIGHT><B>ALIGN=RIGHT</B>
Pred tipkami je dovolj velika površina, na katero postavimo roke. Sprednja vrsta
tipk (krmilka, kontrolka, preslednica in nove tipke) je večja od drugih in rahlo
ukrivljena. Celota ima rahlo dvignjen zadni del, kar ustreza tipkanju sede, za
stoječe tipkanje (recimo na sejmih) pa uporabimo podstavek, ki dvigne sprednji del,
tako da je višji od zadnjega. Zadnja sprememba je priključni kabel, ki ni zvit,
je pa zelo dolg. Največji minus je mehanika pod tipkami, ki je (milo rečeno)
drugorazredna. Občutek pri tipkanju ni ravno najboljši, pa tudi hod tipk je
morda rahlo premajhen, kar bo vsekakor odvrnilo nekaj kupcev.

</BODY>
</HTML>

Uporaba slik v povezavah

Na spletnih straneh lahko za povezavo uporabimo tudi sliko. Taka povezava se obnaša enako kot povezava preko dela besedila.

Sintaksa povezave je naslednja:

<A HREF=naslov dokumenta/slike><IMG SRC=naslov/imeslike></A>

Primer:

<HTML>
<HEAD>
<TITLE>Primer povezave s slikami  </TITLE>
</HEAD>
<BODY>

<H2> Preko male slike odpremo veliko sliko</H2>
<A HREF="zemlja.gif"><IMG SRC="zemlja.gif" WIDTH=40></A>

<H2> Preko slike odpremo spletno stran</H2>
<A HREF="primer22.htm"><IMG SRC="slika06.gif"></A>

</BODY>
</HTML>

Oblikovanje slik občutljivih na dotik

V prejšnjem primeru smo spoznali, kako nam slika lahko služi kot povezava z drugimi HTML dokumenti. V nadaljevanju pa bomo spoznali, da lahko različni deli slike pomenijo povezave na različne HTML dokumente. To pomeni, da eno sliko lahko uporabimo za vrsto povezav.

Na izbrani sliki izberemo površine, ki jih želimo povezati z ostalimi dokumenti. Površine so lahko pravokotniki, krogi ali poligoni. Da bi lahko odčitali prave koordinate površin si lahko pomagamo z grafičnim programom. Ko so nam koordinate znane oblikujemo mapo (seznam) s koordinatami in ustreznimi povezavami.

Sintaksa mape:

<MAP NAME = imemape>
<AREA SHAPE=rect | circle | poly | default COORDS=x,y,.. HREF=naslov>
......
......
</MAP>
Ime površine:
Oblika površine in koordinate:
RECT
Pravokotnik; koordinate: x1,y1,x2,y2
CIRCLE
Krog; koordinate središča: x, y, radij: r
POLY
Poligon; koordinate ogljišč poligona x1,y1,..,xn,yn
DEFAULT
Ostala površina, ki ni zajeta v oblikah

Ko smo oblikovali mapo postavimo še sliko z naslednjim ukazom: 

<IMG BORDER=0 SRC="slika.gif" USEMAP="#imemape">

Primer:

<HTML>
<HEAD>
<TITLE>Primer slike občutljive na dotik  </TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><FONT COLOR="GREEN">ZELENJAVA</H1>

<MAP NAME="zelenjava">
<AREA SHAPE=RECT COORDS="185,230,335,400" HREF="primer24a.htm">
<AREA SHAPE=CIRCLE COORDS="400,276,80" HREF="primer24b.htm">
<AREA SHAPE=POLY COORDS="495,250,476,214,536,211,567,279,
509,302" HREF="primer24c.htm">
</MAP>

<P ALIGN=CENTER>
<IMG  SRC="slika01.gif" USEMAP="#zelenjava">
</P>
</BODY>
</HTML>

Alternativno besedilo slike

Nekateri spletni pregledovalniki, ki tečejo v tekstualnem načinu, ne morejo prikazati slik. Včasih pa tudi uporabniki sami izključijo prikazovanje slik in s tem pospešijo pregledovanje spletnih strani. Z uporabo atributa ALT dosežemo, da na spletni strani namesto slike dobimo izpisano besedilo, ki ga zapišemo v atributu. V novejših pregledovalnikih se nam alternativno besedilo izpiše pred prenosom celotne slike.

Sintaksa ukaza je naslednja:

<IMG SRC = zemlja.gif ALT=Slika Zemlje>

OPOZORILO: Uporaba alternativnega besedila je koristna pri vseh slikah, ki jih vključujemo v naše dokumente.

Slike ozadja spletnih strani

Novejši pregledovalniki omogočajo uporabo slik za ozadje spletnih strani. Nekateri uporabniki so nad to možnostjo navdušeni, drugi pa možnost odklanjajo. V splošnem pa velja pravilo, da mora biti ozadje takšno, da je besedilo lahko berljivo. To pomeni, da med ozadjem in besedilom mora biti dovolj velik kontrast. če izberemo temno ozadje mora biti besedilo svetlo in obratno. Za podlago izberemo majhno sliko, ki jo pregledovalnik ponovi tolikokrat, da zapolni celotno stran. Velike slike se prenašajo počasi in se jih zato izogibamo.

Sintaksa ukaza:

<BODY BACKGROUND=imedatoteke.gif>

Primer:

<BODY BACKGROUND=podloga.gif>

Barva ozadja

Običajno pregledovalniki prikazujejo črno besedilo na sivi podlagi. Seveda lahko pisec spletne strani barve spremeni po lastnem okusu. Tudi v tem primeru velja, da mora biti stran berljiva, zato pretiravanje ni priporočljivo. če sami niste prepričani o pravilnosti izbire se posvetujete z ostalimi uporabniki.

Z ustreznimi atributi lahko spremenite barvo strani (BGCOLOR), barvo besedila (TEXT), barvo povezav (LINK) in barvo obiskanih povezav (VLINK). Barvo izrazimo jo s šestimi šestnajstiškimi ciframi - prvi dve predstavljata rdečo, naslednji dve zeleno in zadnji dve modro barvo.

Sintaksa ukaza:

<BODY BGCOLOR=#BARVA1 TEXT=#BARVA2 LINK=#BARVA3>

BARVA1, BARVA2, BARVA3 - številka barve v obliki RRZZMM

Primer:

<BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK=#FF0000>

Tabele

Tabele so v oblikovanje HTML dokumentov prinesle veliko novih možnosti. Poleg prikazovanja tabelarnih podatkov, tabele pomenijo tudi nov pristop v oblikovanje spletnih strani. V začetku se nam bodo elementi tabele zdeli nerazumljivi, vendar že po nekaj primerih boste spoznali pravo vrednost tabele. V spodnji tabeli so predstavljeni elementi tabele.

ELEMENTI TABELE
ELEMENTI RAZLAGA
<TABLE> ... </TABLE> oblikovanje tabele v HTML dokumentu. Z atributom BORDER določimo tabeli obrobe.
<CAPTION> ... </CAPTION> oblikovanje naslova tabele. Običajno je naslov na vrhu na sredini tabele. Z uporabo atributa ALIGN=BOTTOM dosežemo, da je naslov pod tabelo. Pri oblikovanju naslova so nam na voljo tudi drugi atributi, ki jih uporabljamo za oblikovanje besedila.
<TR> ... </TR> oblikovanje vrstice tabele. Z atributi oblikujemo lastnosti celotne vrstice (ALIGN (LEFT, CENTER, RIGHT); VALIGN (TOP, MIDDLE, BOTTON))
<TH> ... </TH> oblikujemo celice, ki predstavljajo glavo tabele. Običajno je besedilo poudarjeno in poravnano na sredino.
<TD> ... </TD> oblikujemo vsebino celic tabele. Običajno je besedilo poravnano na levo po višini pa na sredino.
Atributi tabele
Atributi Razlaga
ALIGN (LEFT, CENTER, RIGHT) Vodoravna poravnava besedila v celici.
VALIGN (TOP, MIDDLE, BOTTON) Navpična poravnava besedila v celici.
COLSPAN=n Število združenih stolpcev v celico.
ROWSPAN=n Število združenih vrstic v celico.
OPOZORILO: Atributi uporabljeni v <TH> ... </TH> in v <TD> ... </TD> so nadrejeni običajnim poravnavam v <TR> ... </TR>.

Splošni izgled oblikovane tabele

<TABLE> -- začetek oblikovanja tabele

<CAPTION> naslov tabele </CAPTION> -- oblikovanje naslova tabele

<TR> -- začetek oblikovanja prve vrstice

<TH> vsebina celice </TH> -- prva celica v prvi vrstici (glava tabele)

.......

.......

<TH> vsebina celice </TH> -- zadnja celica v prvi vrstici (glava tabele)

</TR> -- konec oblikovanja prve vrstice

<TR> -- začetek oblikovanja druge vrstice

<TD> vsebina celice </TD> -- prva celica v drugi vrstici

.......

.......

<TD> vsebina celice </TD> -- zadnja celica v drugi vrstici

</TR> -- konec oblikovanja druge vrstice

......

......

<TR> -- začetek oblikovanja zadnje vrstice

<TD> vsebina celice </TD> -- prva celica v zadnji vrstici

.......

.......

<TD> vsebina celice </TD> -- zadnja celica v zadnji vrstici

</TR> -- konec oblikovanja zadnje vrstice

</TABLE> -- konec oblikovanja tabele

Primer:

<HTML>
<HEAD>
<TITLE>Primer tabele  </TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Tabela dežurstev </H1>
<HR>

<TABLE BORDER=1 >
<CAPTION> Dežurstvo za 43. teden </CAPTION>
<TR>
<TH WIDTH=100>Datum </TH>
<TH WIDTH=100>Janez </TH>
<TH WIDTH=100>Jože </TH>
<TH WIDTH=100>Marija </TH>
</TR>

<TR ALIGN=CENTER>
<TD>12.3.1997 </TD>
<TD>prosto </TD>
<TD><IMG SRC="point.gif" </TD>
<TD>prosto </TD>
</TR>
<TR ALIGN=CENTER>
<TD>13.3.1997 </TD>
<TD>dežurstvo doma </TD>
<TD><IMG SRC="point.gif" </TD>
<TD>prosto </TD>
</TR>
<TR ALIGN=CENTER>
<TD>14.3.1997 </TD>
<TD><IMG SRC="point.gif" </TD>
<TD>prosto </TD>
<TD>dežurstvo doma </TD>
</TR>
<TR ALIGN=CENTER>
<TD>15.3.1997 </TD>
<TD>prosto </TD>
<TD BGCOLOR=yellow><IMG SRC="point.gif" </TD>
<TD BGCOLOR=RED><IMG SRC="point.gif"</TD>
</TR>
<TR ALIGN=CENTER>
<TD >16.3.1997 </TD>
<TD>prosto </TD>
<TD>prosto </TD>
<TD BGCOLOR=yellow><IMG SRC="point.gif" </TD>
</TR>
</TABLE>

<HR>
</BODY>
</HTML>

Okvirji

Z okvirji razdelimo površino pregledovalnika na več samostojnih površin, prek katerih prikazujemo različne spletne strani. V enem izmed okvirjev najpogosteje prikažemo povezave z izbirami, v drugem pa poljubno vsebino.

FRAMESET -- ukaz s katerim razdelimo spletno stran na več samostojno delujočih strani

Lastnosti:

  • COLS -- Okvirje razporedimo v navpične pasove. Njihovo širino podamo v točkah (pt), odstotkih širine spletne strani (%) ali z zvezdico (*). Zadnja izbira omogoča, za označeni okvir zavzame ves preostali del strani. Posamezne vrednosti za širino ločimo z vejico.
  • ROWS -- Okvirje razporedimo vodoravno, tako, da so okvirji postavljeni eden pod drugim.
  • BORDERS -- Prilagodimo širino vseh okvirjev v dokumentu. Pri vrednosti 0 postanejo robovi nevidni.
  • BORDERCOLOR -- Izberemo barvo okvirja.
  • FRAMEBORDER -- Če lastnosti dodelimo vrednost YES, prikažemo okvirje v 3D obliki.

FRAME -- določimo obliko novega, samostojnega okvirja na spletni strani

Lastnosti:

  • BORDERCOLOR -- Določa barvo robov izbranega okvirja.
  • FRAMEBORDER -- Prikaz robov samostojnih področij dokumenta.
  • MARGINHEIGHT -- Določa zamik podatkov od zgornjega in spodnjega roba okvirja v točkah.
  • MARGINWIDTH -- Določa zamik podatkov od levega in desnega roba okvirja v točkah.
  • NAME -- Zapiše ime okvirja.
  • NORESIZE -- Preprečimo spreminjanje velikosti okvirjev.
  • SCROLLING -- Določimo prikaz drsnikov v okvirju. (YES - vedno vidni, NO - nikoli vidni, AUTO - vidni, ko podatki presegajo višino in širino okvirja.)
  • SRC -- Vpišemo pot do podatkov oz. spletne strani, ki bo prikazana v okvirju.

Primer:

<HTML>

<FRAMESET COLS="20%, *">
      <FRAME SRC="primer1.htm">
      <FRAME SRC="primer2.htm">
</FRAMESET>

</HTML>

OPOZORILO: Ukaz FRAMESET v dokumentu vnesemo med glavo in telo.

Obrazci

Na spletno stran lahko vstavimo obrazec, v katerega vpišemo in shranimo poljubne podatke. Jezik HTML podpira izdelavo in prikaz obrazcev, pri shranjevanju in obdelavi vpisanih podatkov pa si moramo žal pomagati s posebnimi jeziki. (JAVA, ...) Vse ukaze za vpis podatkov moramo omejiti z elementoma <FORM> in </FORM>. Za obliko polja v obrazcu poskrbi ukaz INPUT TYPE. Na voljo imamo štiri osnovne oblike:

  • TEXT ali TEXTAREA -- polje za vpis besedila
  • CHECKBOX -- kvadratki za potrditev
  • RADIOBUTTON -- izbirni gumbi
  • SELECTIONLIST -- seznami

V obrazcih lahko uporabimo dva gumba:

  • SUBMIT -- podatke posreduje oziroma shrani
  • RESET -- vrne vsebino vseh polj v obrazcu na začetne vrednosti

Ogrodje obrazca

Vse definicije polj v obrazcu moramo vključiti v blok FORM. Temu lahko priredimo dve lastnosti, ki določata način vpisovanja podatkov. Prva lastnost se imenuje METHOD in tu imamo na voljo dve izbiri: POST in GET. Obe omogočata shranjevanje podatkov. Druga lastnost se imenuje ACTION. Tukaj podamo naslov, kjer je shranjen program, ki bo podatke shranil oziroma obdelal.

Primer:


<FORM METHOD="POST"  ACTION="pot/zapis.pl">
   ... V blok zapišemo ukaze za zapis ali izbiro podatkov ...
</FORM>

Elementi obrazca

Z ukazom INPUT TYPE določimo vrsto polja oz. elementa v obrazcu. Uporabimo lahko naslednja polja.

TEXT

Polje TEXT prikaže okence za vnos besedila. Običajno gre za krajše besedilo (ime, priimek). Vsakemu definiranemu polju obrazca moramo prirediti spremenljivko, ki jo bo program uporabil pri označevanju vpisanega besedila. To storimo z lastnostjo NAME. Lastnost VALUE zapiše v polje za vnos besedila privzeto besedilo, ki ga zagledamo v obrazcu, preden karkoli vpišemo. Z lastnostjo SIZE omejimo velikost okenca za vnos besedila na določeno število znakov.

Primer:


<FORM METHOD="POST"  ACTION="pot/zapis.pl">
     <INPUT TYPE="TEXT" NAME="ime" SIZE=15 VALUE="Vpiši ime">
</FORM>

SUBMIT in RESET

Gumbe prikažemo z ukazom INPUT TYPE, ki mu določimo spremenljivko SUBMIT ali RESET. Besedilo, ki bo izpisano na gumbu, izberemo s parametrom VALUE.

Primer:

...
   <INPUT TYPE="SUBMIT" VALUE="Vpis">
   <INPUT TYPE="RESET" VALUE="Izbris">
...

CHECKBOX

Z ukazom CHECKBOX postavimo v obrazec kvadratek za potrditev. Ta dopušča uporabniku, da potrdi eno ali več izbir, ki so mu na voljo. Izbiro potrdimo s klikom na kvadratek, v katerem se nato pokaže križec. Kot privzeto je lahko kvadratek označen (CHECKED) ali pa ne. Celoten izraz je sestavljen iz ukaza INPUT TYPE, ki mu sledi oblika polja CHECKBOX. Tudi tu določimo ime spremenljivke, pod katero bo shranjena izbira - NAME.

Primer:

...
   <INPUT TYPE="CHECKBOX" NAME="vrednost1">bela barva<br>
   <INPUT TYPE="CHECKBOX" NAME="vrednost2">modra barva<br>
...

RADIO

Izbirni gumbi omogočajo izbiro ene ali več možnosti. Označeno izbiro prepoznamo po črni piki v krogcu, potrdimo pa jo s klikom. Izbirni gumb prikažemo preko ukaza INPUT TYPE in RADIO. Vrednost parametra NAME določa ime spremenljivke, s parametrom VALUE pa povemo, če je izbirni gumb kot privzeto označen.

Primer:

...
   <INPUT TYPE="RADIO" NAME="vrednost1" VALUE=1izbira CHECKED>bela barva<br>
   <INPUT TYPE="RADIO" NAME="vrednost1" VALUE=2izbira>zelena barva<br>
   <INPUT TYPE="RADIO" NAME="vrednost1" VALUE=3izbira>rdeča barva<br>
   <INPUT TYPE="RADIO" NAME="vrednost1" VALUE=4izbira>črna barva<br>
...

Seznami

V seznamu elementov se lahko odločimo za eno ali več izbir. Tudi v tem primeru lahko določimo, katera izbira bo označena kot privzeta. Seznam elementov prikažemo v bloku <SELECT> in </SELECT>, posamezne izbire pa naštejemo z ukazom OPTION. Lastnost NAME določa ime spremenljivke. Z lastnostjo MULTIPLE lahko v seznamu izberemo več elementov. pri ukazu MULTIPLE si lahko pomagamo z lastnostjo SIZE, ki določa število elementov v seznamu. Ko iz ukaza SELECT izpustimo ukaza MULTIPLE in SIZE, prikaže spletni pregledovalnik padajoči seznam.

Primer:

...
   <SELECT NAME="Spisek1">
        <OPTION SELECTED>bela barva
        <OPTION>zelena barva
        <OPTION>rdeča barva
   </SELECT>
...
...
   <SELECT NAME="Spisek2" MULTIPLE SIZE="6">
        <OPTION SELECTED>bela barva
        <OPTION>zelena barva
        <OPTION>rdeča barva
   </SELECT>
...

Besedno polje

Ukaz TEXTAREA prikaže polje, v katerega lahko vpišemo več vrstic besedila. Pri tem lahko uporabimo lastnosti:

  • COLS -- določa širino polja za vpis besedila
  • ROWS -- določa višino polja za vpis besedila
  • NAME -- določa ime spremenljivke, kamor se shrani zapisano besedilo po kliku gumba SUBMIT

Primer:

...
   <TEXTAREA NAME="zapis" ROW=50 COLS=50>
   Veliko polje za vpis.
   </TEXTAREA>
...

Ta website koda je bila prekopirana od Aleša Cimpriča