HTML

Prva vrstica vsake HTML datoteke naj bi bila takšna:

<!doctype html public "-//w3c//dtd html 4.0 //EN"> Takšno označevanje je v veljavi od različice 3.2 .

Zagotavljanje slovenskih šumnikov je mogoče na enega od naslednjih dveh načinov:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2"> <meta http-equiv="content-type" content="text/html; charset=Windows-1250"> ISO je mednarodni standard za pisave, Windows pa je interna Microsoftova zadeva. Kljub temu je praksa takšna, da običajno obe pisavi delujeta v vsakem brkljalniku.

Sicer pa je struktura HTML datoteke takšna:

<html> <head> <!-- ukazi (značke/tags) za glavo --> </head> <body> <!-- ukazi in vsebina --> </body> </html>

Kar bomo v tem kratkem tečaju potrebovali v glavi (head), je meta značka za šumnike, navedena že zgoraj. Poleg tega lahko v glavi navedemo še naslov strani, ki bo izpisan v naslovu okna. Naslov naj bo med značkama

<title> in </title>.
.

In sedaj se posvetimo telesu (body). Ukaz je zanimiv sam po sebi, ker je v njem mogoče določiti barvo strani, teksta ter povezav na njej in slike za ozadje.

<body bgcolor=#RRGGBB text=#RRGGBB link=#RRGGBB alink=#RRGGBB vlink=#RRGGBB background=slika.gif>

Barva je navedena v obliki RGB (Red Green Blue = Rdeča Zelena Modra), v šestnajstiški kodi. Koda FFFFFF pomeni belo barvo, 000000 črno, FF0000 pa rdečo. V spodnji tabeli je še nekaj barv.

FFA500 000080 008000 FF6347 87CEFA D2691E E6E6FA 8B0000 FFD700 808000
..........
FFFFFF 000000 808080 FF0000 00FF00 0000FF FFFF00 FF00FF00FFFFF5F5DC
..........

Slika za ozadje se lahko nahaja v istem direktoriju kot html datoteka, lahko pa kjerkoli na spletu, le da je v tem primeru pač treba napisati celoten URL.

Pa se posvetimo vsebini. Tekst lahko v telesu html pišemo brez omejitev, vseeno pa je dobro, da ga razdelimo v odstavke. To dosežemo z značko p na naslednji način:

<p>besedilo odstavka</p> <p>naslednji odstavek</p>

Brkljalnik bo besedilo odstavka sam razdelil na vrstice, ki bodo levo poravnane. Lahko dosežemo, da so vrstice znotraj odstavka poravnane levo, desno ali na sredino, za poravnavo obeh robov (justify) pa avtor te strani ne jamči, da deluje v vseh brskalnikih. Poravnavo v odstavku določimo tako:

<p align=left/right/center/justify>besedilo odstavka</p> Prelom vrstice pa kjerkoli lahko vsilimo z ukazom <br> Vodoravno črto narišemo z ukazom <hr>
Najbolj pomembno pri html je povezovanje. Link ustvarimo s pomočjo značke a (anchor). Najprej si oglejmo kako povezati dve mesti na strani:
<p> <a href="#oznaka">Od tu hočem na oznako</a> </p> <hr> <a name="oznaka">Oznaka je tukaj.

Povezavo kamorkoli v splet naredimo na naslenji način:

<a href="http://www.yahoo.com">Yahoo!</a> <br> <a href="http://www.infonet.si/ostali/Luka/">Demonstrator!</a>
Yahoo!
Demonstrator!

Če povezujemo html datoteko z drugo html datoteko v istem direktoriju na strežniku, pa lahko navedemo samo relativen naslov, torej samo ime datoteke.

Še nekaj o oblikovanju teksta.
Naslov naj bo napisan z velikimi črkami, za to poskrbi značka h (heading), po potebi med značkama za sredinsko poravnavo:
<center> <h1>Naslov</h1> <h2>Podnaslov</h2> <h3>...</h3> <h6>najmanjši naslov</h6> </center>

Naslov

Podnaslov

...

najmanjši naslov

Vendar pa na zgornji način ne smemo oblikovati teksta, ker so definicije velikosti za tekst malodane neodvisne od velikosti za naslove, poleg tega je naslov svoji funkciji primerno oblikovan. Spodaj je nekaj ukazov za oblikovanje teksta:

<center> <b>krepko</b> <br> <i>ležeče</i> <br> <tt>typewriter</tt> <br> <u>podčrtano</u> <br> <!-- izogibajte se ga, izgleda kot link --> <big>veliko</big> <br> <small>majhno</small> <br> napisano<sup>zgoraj</sup> <br> napisano<sub>spodaj</sub> <br> <nobr>brez preloma <wbr>razen po potrebi</nobr> <br> <pre>tako kot je natipkano ! </center> krepko
ležeče
typewriter
podčrtano
veliko
majhno
napisanozgoraj
napisanospodaj
brez preloma razen po potrebi 
tako kot je    natipkano !

Naštevanje v HTML -- nič lažjega.

<ul type=square> <!-- type=circle/disc --> <li>element <li>element </ul> <ol type=a start=24> <!-- type=A/a/I/i/1 --> <li>prvi element <li>drugi element <li>tretji element </ol>
  • element
  • element
  1. prvi element
  2. drugi element
  3. tretji element

Vstavljanje slik ni nič težje od pisanja linkov. Sintaksa:

<img src="URL" alt="ta tekst se pokaže, če ni slike" width=PIX height=PIX> ta tekst se pokaže, če ni slike

Slika ima sicer še nekaj atributov glede poravnav, preskočimo jih in se posvetimo bolj zanimivim stvarem.

Slika je lahko hkrati tudi link:

<a href="URL1"><img src="URL2" border=N></a>
avtor teh strani

novi demonstrator

. . .

Najbolj zanimivo pa je, kadar slika vsebuje več linkov, t.i. clickable map. Oglejmo si spodnji primer, kjer gre pravzaprav za navigacijsko sliko za to stran.

<img src="navigacija.gif" usemap="#navig" border=0> <map name="navig"> <area coords="0,0,150,60" href="#struktura"> <area coords="120,60,210,110" href="#barve"> <area coords="210,0,399,60" href="#odstavek"> <area coords="250,60,399,120" href="#link"> <area coords="0,140,120,190" href="#naslov"> <area coords="275,140,399,205" href="#tekst"> <area coords="50,200,170,270" href="#slika"> <area coords="205,205,350,270" href="#tabela"> <area coords="29,269,130,318" href="#okvirji"> <area coords="269,269,370,315" href="#stili"> </map>

Tabele

Tabele največkrat igrajo vlogo oblikovanja strani. Seveda pa so uporabne tudi kot običajne tabele za katerokoli vrsto podatkov.

<table width=50% border=2> <th colspan=3>Naslov tabele</th> <tr> <!-- naznanja vrstico --> <td> podatek v tabeli <td>podatek 2 <td> podatek 3 <tr> <td colspan=2> razširjen podatek <td rowspan=2> podatek 5 <tr><td bgcolor=#000000><font color=#FFFFFF> podatek<br> v drugi barvi </table>
Naslov tabele
podatek v tabeli podatek 2 podatek 3
razširjen podatek podatek 5
podatek
v drugi barvi

Še malce pojasnila:

  • table vsebuje generalne lastnosti tabele, pomembne so še
    • cellspacing=N prostor med celicami
    • cellpadding=M med robom celice in tekstom
    • border=0 kadar s tabelo oblikujemo
  • th (table heading) celica z naslovom tabele
  • tr (table row) začetek nove vrstice
  • td (table data) začetek nove celice
    • bgcolor=#RRGGBB določimo barvo celice
    • background=URL določimo ozadje celice
    • font color=#RRGGBB skoraj edini način,
      da spremenimo barvo teksta
Tabelo moramo vedno zaključiti z ukazom </table> sicer je brkljalnik ne prikaže. Ostali zaključki niso nujno potrebni.
<hr size=10>

Okvirji

Poskusimo prikazati našo stran tako, da je vseskozi na njej meni z izbirami, ki ga ustvarimo na poljuben način. Okno brskalnika bo razdeljeno na dva dela, kot je prikazano na grafični način spodaj (simulirano s tabelo).

Moja stran z menijem - brskalnik
m e n i
moja
stran

Seveda je lahko okno brskalnika razdeljeno tudi počez, ne samo po dolgem:

Moja stran z menijem - brskalnik
m
e
n
i		 moja
stran

Takšno razdelitev dosežemo s pomočjo okvirjev (angl. frames). Okno brskalnika razdelimo na dva ali več okvirjev s pomočjo html datoteke, v kateri ni ukaza <body> in ki samo kaže na datoteki, ki vsebujeta meni in mojo stran.

Pa poskusimo narediti stran, razdeljeno po dolgem, z menijem v zgornjem, ozkem okvirju. Najprej napišimo datoteko z menijem. To je čisto navadna html datoteka, ki kaže v mojo stran ali na več mojih podstrani, ki so samostojne html datoteke.

menu.html
<html> <body> <a href="mojastran.html#oznaka" target="velikiokvir">Na oznako.</a> <a href="mojapodstran.html" target="velikiokvir">Na podstran.</a> </body> </html>

Od običajne html datoteke se razlikuje po lastnsoti target v linku (anchor). Ta lastnost pove brskalniku v katerem okvirju naj prikaže stran, ki je navedena v lastnosti href. Pri tem navedemo ime okvirja (poimenujemo ga sami, kako -- o tem spodaj) ali pa uporabimo eno izmed rezerviranih besed (ki je ne smemo uporabiti za ime okvirja):

_blank
stran prikažemo v na novo odprtem oknu brskalnika;
_parent
stran prikažemo v hierarhično višjem okvirju;
_self
v istem okvirju kot je link (ta vrednost je privzeta);
_top
v hierarhično najvišjem okvirju (oziroma se znebimo okvirjev).

Naredimo sedaj še datoteko, kjer bomo postavili okvirje. Poimenujmo jo kar index.html, zakaj pa bo povedal demonstrator pri vajah.

index.html
<html> <frameset rows="50,*" frameborder=yes border=2> <frame name="maliokvir" src="menu.html" noresize scrolling="no"> <frame name="velikiokvir" src="mojastran.html" scrolling="auto"> </frameset> </html>

Uporabili smo dva nova ukaza, <frameset> in <frame>. S prvim smo definirali okvirje, z drugim pa opisali posamezen okvir. Oglejmo si še pomen lastnosti:

  • frameset
    rows="pic,rel%,*"
    s to lastnostjo povemo kako bo okvir razdeljen: v tem primeru na tri vrstice, prva bo visoka pic pikslov, druga rel% višine okna (ali hierarhično višjega okvirja), tretja pa kolikor ostane. Namesto na vrstice lahko okno ali okvir razdelimo na
    cols="10%,*"
    stolpce po istem kopitu;
    frameborder
    določimo ali naj brskalnik pokaže mejo med okvirji (yes) ali ne (no);
    border
    določimo velikost meje med okvirji.
  • frame
    name
    poimenujemo okvir, da se potem z lastnostjo linka target lahko nanj skličemo;
    src
    navedemo URL strani, ki naj se prva prikaže v tem okvirju;
    scrolling
    določimo ali naj brskalnik pokaže drsnike ob straneh okvirja, možne izbire so yes, no in auto ;
    noresize
    prepovemo obiskovalcu premikanje meje okvirja.

Nagradno vprašanje: kako z okvirji razdelimo brskalnikovo okno na spodnji način?

Moja stran z menijem - brskalnik
m e n i _ 1
m
e
n
i
-
2		 moja
stran

Tudi to stran lahko prikažemo z menijem:

in to v novem oknu.

Stili

Style sheets uporabljamo za oblikovanje in barvanje pisav v dokumentu, pa tudi za določanje oblikovnih lastnosti drugim elementom html strani. Style sheets lahko uporabimo na naslednje načine:

  • povežemo html stran z *.css datoteko, ki vsebuje definicije stilov, <link rel=stylesheet href="URL" type="text/css">
  • definicije zapišemo v bloku znotraj heada, <style> <!-- definicije --> </style>
  • definicijo dodamo v značko html ukaza. <p style="definicije">

V definicijah navedemo kakšna naj bo oblika za posamezen tip html značke, recimo da bi hoteli vsak naslov h1 zapisati v rumeni pisavi tipa sans-serif. V bloku ukazov (znotraj heada ali pa v posebni datoteki) bi to naredili tako:

h1 {color:#FFCC00;font-family:Arial,SansSerif,MS Sans Serif} Vsaka h1 značka bo obarvana in bo izpisana v ustrezni pisavi (če jo ima obiskovalec na svojem računalniku). Kaj pa če nočemo vseh h1 značk enako obarvati? V definicije zapišimo: h1.rumen {color:#FFCC00;font-family:Arial,SansSerif,MS Sans Serif} h1.crn {color:#000000;font-family:Arial,SansSerif,MS Sans Serif} Kadar uporabimo h1 značko na strani s tako definiranimi stili, moramo navesti katerega hočemo uporabiti: <h1 class="rumen">Rumen naslov</h1> <h1 class="crn">Črn naslov</h1> Kadar hočemo eno samo definicijo stila uporabiti za več različnih značk (ukazov), ime značke izpustimo: .rumen {color:#FFCC00;font-family:Arial,SansSerif,MS Sans Serif} .crn {color:#000000;font-family:Arial,SansSerif,MS Sans Serif} Sedaj lahko vsakemu ukazu priredimo enega od navedenih stilov: <h1 class="crn">Črn naslov</h1> <p class="rumen">Rumen odstavek.</p> No, sintaksa je torej takšna:
značka.ime {specifikacija:lastnost,lastnost;specifikacija:lastnost}
Nekaj specifikacij in lastnosti je tule navedenih:

specifikacija
background:
lastnost je lahko URL slike za ozadje ali pa #RRGGBB koda;
color:
barva teksta (#RRGGBB koda);
font-family:
pisava;
font-size:
velikost pisave v enotah
  • pt
  • in
  • cm
  • px
  • %;
font-style:
slog pisave je lahko
  • italic
  • normal
  • oblique
  • small caps;
font-weight:
debelina pisave pa je lahko
  • extra-light
  • light
  • demi-light
  • medium
  • demi-bold
  • bold
  • extra-bold;
line-height:
razdalja med vrsticami v istih enotah kot velikost pisave;
margin-left:
margin-right:
margin-top:
navedemo debelino roba v enotah kot zgoraj;
text-align:
poravnava teksta je lahko
  • left
  • center
  • right
text-decoration:
tekst okrasimo na naslednje načine:
  • none
  • italic
  • underline
  • line-through
  • overline
  • blink
text-indent:
zamik teksta v enotah;

in še majčkeno opozorilce: definirajte stile v bloku znotraj heada, da jih bo demonstrator lahko pregledal.

Marko Budiša (c) 2000, 2001
Te strani so namenjene vajam pri laboratorijskem delu, lahko jih uporabite tudi za individualno učenje, za druge uporabe se obrnite na avtorja.