Začetniški vodič po jeziku HTML

KAZALO:

Nazaj


Osnovni pojmi

WWW - World Wide Web (Web) - Svetovni splet

Servis Interneta , ki omogoča pregledovanje spletnih strani.

HTML - HyperText Markup Language

HTML je jezik, ki se uporablja za pisanje spletnih strani. Jezik je sestavljen iz nabora posebnih oznak, ki so neodvisne od platforme. HTML je razvil Tim Berners - Lee iz Evropskega laboratorija fizike delcev v ?enevi (CERN). Jezik se še razvija skupaj s pregledovalniki (Browsers) zato nekatere oznake niso standardizirane.

Kaj je HTML dokument

HTML dokument je tako imenovani ASCII dokument, ki ga oblikujemo s tekstualnimi urejevalniki kot sta Notepad (beležnica) v Windows okolju ali Edit v DOS-u. Z razmahom svetovnega spleta so se pojavili tudi HTML urejevalniki, ki nam omogočajo, da v WYSIWYG (What You See Is What You Get) načinu oblikujemo HTML dokumente.

Kaj so oznake HTML jezika

Osnovne sestavine HTML dokumentov (spletnih strani) so elementi kot so glava dokumenta, tabela, odstavek, seznam, itd. Z oznakami HTML jezika povemo pregledovalnikom spletnih strani, kako naj prikažejo posamezne elemente. Za pisanje oznak veljajo nekatera preprosta pravila:


Moj prvi HTML dokument - Moja prva spletna stran

S programom Notepad (Beležnica) napišimo preprost HTML dokument:

<HTML>
<HEAD>
<TITLE>Enostaven primer spletne strani </TITLE>
</HEAD>
<BODY>
<H1>Murphyevi zakoni računalništva</H1>
<P> Stroji morajo delati. Ljudje morajo misliti.</P>
<P>Naredi sistem, ki ga lahko uporablja vsak butec in ga bodo uporabljali izključno butci.</P>
</BODY>
</HTML>

Primer1.htm

Oznake in elementi HTML jezika

HTML

Ta element pregledovalniku sporoči, da datoteka vsebuje oznake in elemente HTML jezika. Datotekam, ki vsebujejo take oznake dajemo končnice *.html ali krajše *.htm. Ker vsi operacijski sistemi še ne podpirajo dolgih imen datotek je smiselno uporabljati krajšo oznako *.htm (npr.: index.htm, osnovni.htm,...)

HEAD

HTML dokument je razdeljen na dva dela z oznakama HEAD in BODY. V prvem delu (HEAD) definiramo ime dokumenta in zapišemo še druge pomembne podatke dokumenta.

TITLE

Z oznako TITLE določimo ime dokumenta. Ime se izpiše v glavi pregledovalnika. V tem delu pregleduje dokumente tudi servis WAIS. Dolžina imena naj ne bo daljša od 64 znakov.

BODY

Drugi del HTML dokumenta se imenuje BODY. V tem delu je oblikovan dokument, ki ga pregledujemo s pregledovalnikom spletnih strani. Vsi elementi in oznake, ki jih bomo spoznali v nadaljevanju se nanašajo na BODY HTML dokumenta.

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>

Primer2.htm

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>

Primer3a.htm

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>

Primer3b.htm

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>

Primer3c.htm

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>

Primer4.htm

 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>

Primer5.htm

Definicijski seznami

Definicijski seznami so sestavljeni iz oznake za definicijski seznam <DL>, oznake za pojem, ki ga želimo definirati <DT> (definition term) 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>

Primer6.htm

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>

Primer7.htm

Vnaprej oblikovano besedilo

V določenih primerih želimo imeti besedilo oblikovano na naprej določen način (npr.: računalniški program). 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>

Primer8.htm

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.

Primer9.htm

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>

Primer10.htm

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>

Primer11.htm

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.

Najprej naštejmo logične stile:

<DFN>

uporabljamo za nove pojme v besedilu. Običajno je beseda izpisana poševno. (Netscape 3.0 Gold je pregledovalnik svetovnega spleta.)

<EM>

uporabljamo za opombe ali poudarke v besedilu. Običajno je besedilo izpisano poševno. (Za spremembo gesla morate zaprositi administratorja vašega omrežja!)

<CITE>

uporabljamo za naslove knjig, filmov, itd. Običajno je besedilo izpisano poševno. (Pregled slovenskega slovstva) 

<CODE>

uporabljamo za izpis kode računalniških programov. Običajno je besedilo izpisano s črkami enake širine. ( Pogojni stavek ima obliko: If A>B then Write(C); )

<KBD>

uporabljamo za vnose preko tipkovnice. Običajno je besedilo izpisano s črkami enake širine. (Za spremembo gesla vnesi ukaz passwd! )

<SAMP>

uporabljamo za prikaz primerov. Običajno je besedilo izpisano s črkami enake širine. (Obvestilo se izpiše v obliki Disk full ali Drive not ready.) 

<STRONG>

uporabljamo za posebej pomembne poudarke ali opozorila v besedilu. Običajno je besedilo izpisano s krepkimi črkami. (OPOZORILO: Preverite ali je tiskalnik vključen!) 

<VAR>

uporabljamo za poimenovanje spremenljivk, ki jih kasneje zamenjamo s konkretnimi vrednostmi ( del imedatoteke - ukaz izbriše datoteko)

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>

Primer12.htm

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>

Primer13.htm

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;. Natančnejši seznam znakov in pripadajočih oznak si lahko ogledate v prilogi A.

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>

Primer14.htm

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>

Primer15.htm

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:

 <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>Moj prvi HTML dokument </A>

Za zgornji zgled velja, da je besedilo Moj prvi HTML dokument povezava na datoteko Primer1.htm. To pomeni, da bo pregledovalnik ob kliku na besedilo Moj prvi HTML dokument, prikazal datoteko Primer1.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="primer1.htm">Moj prvi HTML dokument</A>
<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>

Primer16.htm

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>
  1. č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>
  1. č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:

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>

Primer17.htm

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>

Primer18.htm

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>

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 preje 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>

Primer19.htm

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>

Primer20.htm

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>

Primer21.htm

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>

Primer22.htm

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>

Primer23.htm

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>

Primer24.htm

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>

Primer25.htm

Uporabljena literatura:

NSCA - A Beginner's Guide to HTML

Hribar P., HTML - Programiranje Web strani, Flamingo, Nova Gorica, 1996

Microsoft Internet Explorer Author's Guide and HTML Reference


Priloga A: Seznam znakov ISO - Latin 1

Znak Številska koda HTML opis
A &#192; &Agrave;
a &#224; &agrave;
Á &#193; &Aacute;
á &#225; &aacute;
 &#194; &Acirc;
â &#226; &acirc;
A &#195; &Atilde;
a &#227; &atilde;
Ä &#196; &Auml;
ä &#228; &auml;
A &#197; &Aring;
a &#229; &aring;
A &#198; &AElig;
a &#230; &aelig;
Ç &#199; &Ccedil;
ç &#231; &ccedil;
č &#200; &Egrave;
č &#232; &egrave;
É &#201; &Eacute;
é &#233; &eacute;
E &#202; &Ecirc;
e &#234; &ecirc;
Ë &#203; &Euml;
ë &#235; &euml;
I &#204; &Igrave;
i &#236; &igrave;
Í &#205; &Iacute;
í &#237; &iacute;
Î &#206; &Icirc;
î &#238; &icirc;
I &#207; &Iuml;
i &#239; &iuml;
? &#208; &ETH;
? &#240; &eth;
N &#209; &Ntilde;
n &#241; &ntilde;
O &#210; &Ograve;
o &#242; &ograve;
Ó &#211; &Oacute;
ó &#243; &oacute;
Ô &#212; &Ocirc;
ô &#244; &ocirc;
O &#213; &Otilde;
o &#245; &otilde;
Ö &#214; &Ouml;
ö &#246; &ouml;
Znak Številska koda HTML opis
O &#216; &Oslash;
o &#248; &oslash;
U &#217; &Ugrave;
u &#249; &ugrave;
Ú &#218; &Uacute;
ú &#250; &uacute;
U &#219; &Ucirc;
u &#251; &ucirc;
Ü &#220; &Uuml;
ü &#252; &uuml;
Ý &#221; &Yacute;
ý &#253; &yacute;
? &#222; &THORN;
? &#254; &thorn;
ß &#223; &szlig;
y &#255; &yuml;




Priloga B: Seznam HTML ukazov

HTML element Atributi Standard / Specifikacija
!DOCTYPE   HTML 3.2
A    
A HREF HTML 2
A NAME HTML 2
A TARGET Netscape
A TITLE HTML 3.2
ADDRESS   HTML 2
APPLET   HTML 3.2
APPLET ALIGN HTML 3.2
APPLET ALT HTML 3.2
APPLET CODE HTML 3.2
APPLET CODEBASE HTML 3.2
APPLET HEIGHT HTML 3.2
APPLET HSPACE HTML 3.2
APPLET NAME HTML 3.2
APPLET PARAM NAME HTML 3.2
APPLET VSPACE HTML 3.2
APPLET WIDTH HTML 3.2
AREA    
AREA COORDS IE 3.0
AREA HREF IE 3.0
AREA NOHREF IE 3.0
AREA SHAPE IE 3.0
AREA TARGET Netscape
B   HTML 2.0
BASE    
BASE HREF HTML 2.0
BASE TARGET Netscape
BASEFONT    
BASEFONT COLOR Netscape 2.0
BASEFONT FACE Netscape 2.0
BASEFONT SIZE Netscape
BGSOUND    
BGSOUND LOOP IE 3.0
BGSOUND SRC IE 3.0
BIG   HTML 3.2
BLOCKQUOTE   HTML 2.0
BODY   HTML 2.0
BODY ALINK HTML 2.0
BODY BACKGROUND HTML 3.2
BODY BGCOLOR Netscape
BODY BGPROPERTIES IE 2.0
BODY LEFTMARGIN IE 2.0
BODY LINK Netscape
BODY TEXT Netscape
BODY TOPMARGIN IE 2.0
BODY VLINK Netscape
BR    
BR CLEAR HTML 3.2
CAPTION    
CAPTION ALIGN HTML 3.2
CENTER   Netscape
CITE   HTML 2.0
CODE   HTML 2.0
COL   HTML 3.2
COL ALIGN HTML 3.2
COL SPAN HTML 3.2
COLGROUP   HTML 3.2
COLGROUP ALIGN HTML 3.2
COLGROUP VALIGN HTML 3.2
COMMENT   HTML 2.0
DD   HTML 2.0
DFN   HTML 2.0
DIR   HTML 2.0
DIV   HTML 3.2
DL   HTML 2.0
DT   HTML 2.0
EM   HTML 2.0
EMBED   HTML 2.0
EMBED SRC HTML 2.0
EMBED WIDTH HTML 2.0
EMBED HEIGHT HTML 2.0
EMBED PALETTE HTML 2.0
EMBED NAME HTML 2.0
EMBED OPTIONAL PARAM HTML 2.0
FONT    
FONT COLOR IE 3.0
FONT FACE IE 3.0
FONT SIZE Netscape
FORM    
FORM ACTION HTML 2.0
FORM METHOD HTML 2.0
FORM TARGET Netscape
FRAME    
FRAME FRAMEBORDER IE 3.0
FRAME MARGINHEIGHT Netscape
FRAME MARGINWIDTH Netscape
FRAME NAME Netscape
FRAME NORESIZE Netscape
FRAME SCROLLING Netscape
FRAME SRC Netscape
FRAMESET    
FRAMESET COLS Netscape
FRAMESET FRAMEBORDER IE 3.0
FRAMESET FRAMESPACING IE 3.0
FRAMESET ROWS Netscape
Hn   HTML 2
Hn ALIGN HTML 3.2
HR   HTML 2
HR ALIGN HTML 3.2
HR COLOR IE 3.0
HR NOSHADE Netscape
HR SIZE Netscape
HR WIDTH Netscape
HTML   HTML 2.0
I   HTML 2.0
IFRAME    
IFRAME FRAMEBORDER IE 3.0
IFRAME MARGINHEIGHT Netscape
IFRAME MARGINWIDTH Netscape
IFRAME NAME Netscape
IFRAME NORESIZE Netscape
IFRAME SCROLLING Netscape
IFRAME SRC Netscape
IMG    
IMG ALIGN HTML 3.2
IMG ALT HTML 2
IMG BORDER HTML 3.2
IMG CONTROLS IE 3.0
IMG DYNSRC IE 3.0
IMG HEIGHT HTML 3.2
IMG HSPACE HTML 3.2
IMG ISMAP HTML 3.2
IMG LOOP IE 3.0
IMG SRC HTML 2
IMG START IE 3.0
IMG USEMAP IE 3.0
IMG VSPACE HTML 3.2
IMG WIDTH HTML 3.2
INPUT    
INPUT ALIGN HTML 2.0
INPUT CHECKED HTML 2.0
INPUT MAXLENGTH HTML 2.0
INPUT NAME HTML 2.0
INPUT SIZE HTML 2.0
INPUT SRC HTML 2.0
INPUT TYPE HTML 2.0
INPUT TYPE=CHECKBOX HTML 2.0
INPUT TYPE=HIDDEN HTML 2.0
INPUT TYPE=IMAGE HTML 2.0
INPUT TYPE=PASSWORD HTML 2.0
INPUT TYPE=RADIO HTML 2.0
INPUT TYPE=RESET HTML 2.0
INPUT TYPE=SUBMIT HTML 2.0
INPUT TYPE=TEXT HTML 2.0
INPUT TYPE=TEXTAREA HTML 2.0
INPUT VALUE HTML 2.0
ISINDEX   HTML 2.0
ISINDEX ACTION Netscape
ISINDEX PROMPT HTML 3.2
KBD   HTML 2.0
LI   HTML 2.0
LI TYPE Netscape
LI VALUE Netscape
LINK   IE 3.0
LISTING   HTML 2.0
MAP    
MAP NAME IE 3.0
MARQUEE   IE 3.0
MARQUEE ALIGN IE 3.0
MARQUEE BEHAVIOR IE 3.0
MARQUEE BGCOLOR IE 3.0
MARQUEE DIRECTION IE 3.0
MARQUEE HEIGHT IE 3.0
MARQUEE HSPACE IE 3.0
MARQUEE LOOP IE 3.0
MARQUEE SCROLLAMOUNT IE 3.0
MARQUEE SCROLLDELAY IE 3.0
MARQUEE VSPACE IE 3.0
MARQUEE WIDTH IE 3.0
MENU   HTML 2
META    
META CONTENT Netscape
META HTTP-EQUIV Netscape
META NAME HTML 3.2
NOBR   Netscape
NOFRAMES   Netscape
OBJECT   IE 3.0
OBJECT ALIGN IE 3.0
OBJECT BORDER IE 3.0
OBJECT CLASSID IE 3.0
OBJECT CODEBASE IE 3.0
OBJECT CODETYPE IE 3.0
OBJECT DATA IE 3.0
OBJECT DECLARE IE 3.0
OBJECT HEIGHT IE 3.0
OBJECT HSPACE IE 3.0
OBJECT NAME IE 3.0
OBJECT SHAPES IE 3.0
OBJECT STANDBY IE 3.0
OBJECT TYPE IE 3.0
OBJECT USEMAP IE 3.0
OBJECT VSPACE IE 3.0
OBJECT WIDTH IE 3.0
OL   HTML 2
OL START Netscape
OL TYPE Netscape
OPTION   HTML 2
OPTION SELECTED HTML 2
OPTION VALUE HTML 2
P   HTML 2
P ALIGN HTML 3.2
PLAINTEXT   HTML 2
PRE   HTML 2
S   HTML 2
SAMP   HTML 2
SCRIPT   HTML 3.2
SCRIPT LANGUAGE HTML 3.2
SELECT   HTML 2
SELECT MULTIPLE HTML 2
SELECT NAME HTML 2
SELECT SIZE HTML 2
SMALL   HTML 3.2
SPAN   HTML 3.2
STRIKE   HTML 2
STRONG   HTML 2
STYLE   IE 3.0
SUB   HTML 3.2
SUP   HTML 3.2
TABLE    
TABLE ALIGN HTML 3.2
TABLE BACKGROUND IE 3.0
TABLE BGCOLOR IE 3.0
TABLE BORDERCOLOR IE 3.0
TABLE BORDERCOLORDARK IE 3.0
TABLE BORDERCOLORLIGHT IE 3.0
TABLE FRAME HTML 3.2
TABLE RULES HTML 3.2
TBODY   HTML 3.2
TD    
TD ALIGN HTML 3.2
TD BGCOLOR IE 3.0
TD BORDERCOLOR IE 3.0
TD BORDERCOLORDARK IE 3.0
TD BORDERCOLORLIGHT IE 3.0
TD VALIGN IE 3.0
TFOOT   HTML 3.2
TH    
TH ALIGN HTML 3
TH BGCOLOR IE 3.0
TH BORDERCOLOR IE 3.0
TH BORDERCOLORDARK IE 3.0
TH BORDERCOLORLIGHT IE 3.0
TH VALIGN IE 3.0
THEAD   HTML 3
TITLE   HTML 2
TR    
TR ALIGN HTML 3
TR BGCOLOR IE 3.0
TR BORDERCOLOR IE 3.0
TR BORDERCOLORDARK IE 3.0
TR BORDERCOLORLIGHT IE 3.0
TR VALIGN IE 3.0
TT   HTML 2
U   HTML 2
UL   HTML 2
VAR   HTML 2
WBR   Netscape
XMP   HTML 2