Označevalni jeziki Označevalni jeziki
HTML:
HTML:
uvod, uvod,
osnovne oznake
osnovne oznake . .
Uvod Uvod
HTML je označevalni jezik s katerim HTML je označevalni jezik s katerim označujemo dokumente, namenjene označujemo dokumente, namenjene
branju na spletu.
branju na spletu.
Sodi v družino SGML: Sodi v družino SGML:
• spletni dokumenti so razred SGML, spletni dokumenti so razred SGML,
• opis oznak HTML je Document Type Definition opis oznak HTML je Document Type Definition razreda.
razreda.
HTML je standardiziran. Za razvoj HTML je standardiziran. Za razvoj standarda skrbi W
standarda skrbi W 3 3 C. C.
Uvod Uvod
Microsoft in Netscape poskušata Microsoft in Netscape poskušata
uveljaviti svoje nestandardne oznake.
uveljaviti svoje nestandardne oznake.
S tem se zmanjšuje interoperabilnost S tem se zmanjšuje interoperabilnost dokumentov, označenih s HTML.
dokumentov, označenih s HTML.
Najvarneje je uporabljati standardne Najvarneje je uporabljati standardne oznake, ker jih razumejo vsi spletni oznake, ker jih razumejo vsi spletni
pregledovalniki.
pregledovalniki.
Uvod Uvod
Definicija sintakse HTML je dokaj elastična. Definicija sintakse HTML je dokaj elastična.
Dokumenti v HTML pogosto kršijo tudi tako Dokumenti v HTML pogosto kršijo tudi tako liberalno definicijo, ker brkljalniki tolerirajo liberalno definicijo, ker brkljalniki tolerirajo
pogoste napake.
pogoste napake.
Četudi je nek “nepravilen” dokument Četudi je nek “nepravilen” dokument
trenutno uporaben, ni nobene garancije, trenutno uporaben, ni nobene garancije,
da bo uporaben tudi v bodoče. Skoraj da bo uporaben tudi v bodoče. Skoraj
zanesljivo bo prišlo do težav v življenjski zanesljivo bo prišlo do težav v življenjski
dobi dokumenta.
dobi dokumenta.
Uvod Uvod
Od uveljavitve WWW je bila specifikacija Od uveljavitve WWW je bila specifikacija
HTML nekajkrat spremenjena in dopolnjena.
HTML nekajkrat spremenjena in dopolnjena.
Skupni imenovalec sprememb je vedno bolj Skupni imenovalec sprememb je vedno bolj striktna sintaksa jezika.
striktna sintaksa jezika.
Zgodnje specifikacije HTML so določale Zgodnje specifikacije HTML so določale privzeti videz vsakega elementa jezika, privzeti videz vsakega elementa jezika,
vendar je že verzija 2 začela uvajati vendar je že verzija 2 začela uvajati
“abstraktne” elementa (npr.
“abstraktne” elementa (npr.
<strong>...</strong>).
<strong>...</strong>).
Zdaj so vsi elementi “abstraktni”. Pri pravilni Zdaj so vsi elementi “abstraktni”. Pri pravilni rabi jezika je njihov videz določen posebej – rabi jezika je njihov videz določen posebej –
z ločenimi navodili v Cascading Style Sheets
z ločenimi navodili v Cascading Style Sheets
Uvod Uvod
Trenutno veljavna verzija 4.01 Trenutno veljavna verzija 4.01 (december 1999), ki je tudi
(december 1999), ki je tudi dokončna.
dokončna.
Razvoj označevalnih jezikov se Razvoj označevalnih jezikov se
osredotoča na XML, oziroma njegovo osredotoča na XML, oziroma njegovo
delno zlitje s HTML – XHTML.
delno zlitje s HTML – XHTML.
Uvod Uvod
Besedilo, označeno s HTML je v formatu Besedilo, označeno s HTML je v formatu ASCII, zato minimalno obremenjuje
ASCII, zato minimalno obremenjuje omrežje.
omrežje.
Nebesedilni deli dokumenta so samostojne Nebesedilni deli dokumenta so samostojne datoteke
datoteke v formatih, odvisnih od v formatih, odvisnih od podatkovnega tipa
podatkovnega tipa . .
Oznake HTML interpretira odjemalec na Oznake HTML interpretira odjemalec na uporabnikovem računalniku.
uporabnikovem računalniku.
Uvod Uvod
Običajna Običajna oblika oblika oznake: oznake:
<oznaka>...označeni del dokumenta...</oznaka>
<oznaka>...označeni del dokumenta...</oznaka>
<oznaka> <oznaka> uvaja strukturno ločen del uvaja strukturno ločen del
dokumenta in določa njegovo oblikovanje.
dokumenta in določa njegovo oblikovanje.
</oznaka> </oznaka> zaključuje strukturni del in zaključuje strukturni del in preklicuje njegovo oblikovanje.
preklicuje njegovo oblikovanje.
Novejši standardi HTML zahtevajo, da ima Novejši standardi HTML zahtevajo, da ima vsaka
vsaka oznaka tudi svoj preklic. oznaka tudi svoj preklic.
Uvod Uvod
Osnovna struktura dokumenta: glava in Osnovna struktura dokumenta: glava in telo.
telo.
<html>
<html>
<head>
<head>
</head>
</head>
<body>
<body>
</body>
</body>
</html>
</html>
Uvod Uvod
V glavi so: V glavi so:
• naslov okna z dokumentom, naslov okna z dokumentom,
• splošna navodila za interpretacijo dokumenta (npr. splošna navodila za interpretacijo dokumenta (npr.
nabor znakov);
nabor znakov);
• ključne besede, ki opisujejo vsebino dokumenta, ključne besede, ki opisujejo vsebino dokumenta,
• navodila avtonomnim programskim agentom, ki navodila avtonomnim programskim agentom, ki zbirajo podatke o spletnih dokumentih za
zbirajo podatke o spletnih dokumentih za iskalnike...
iskalnike...
Vsebine glave na zaslonu ni videti. Vsebine glave na zaslonu ni videti.
Noben del glave ali telesa ni obvezen. Noben del glave ali telesa ni obvezen.
V telesu je vsebina dokumenta. V telesu je vsebina dokumenta.
Glava dokumenta Glava dokumenta
<html>
<html>
<head>
<head>
<title>Naslov mojega dokumenta<
<title>Naslov mojega dokumenta< /title> / title>
< < /head> / head>
<body>
<body>
< < /body> / body>
< < / / html> html>
Glava dokumenta Glava dokumenta
Določanje nabora znakov, primernega Določanje nabora znakov, primernega za slovenska besedila:
za slovenska besedila:
<meta http-equiv=
<meta http-equiv= “ “ Content-Type Content-Type ” ” content="text/html; charset=
content="text/html; charset= ISO-8859-2” ISO-8859-2” > >
Določanje ključnih besed, ki opisujejo Določanje ključnih besed, ki opisujejo vsebino dokumenta:
vsebino dokumenta:
< < META name="keywords" content=“ META name="keywords" content=“ library library , , digital library”>
digital library”>
Glava dokumenta Glava dokumenta
Prepoved avtonomnim programskim Prepoved avtonomnim programskim agentom, da bi indeksirali dokument:
agentom, da bi indeksirali dokument:
<meta name="robots"
<meta name="robots" c c ontent="noindex,nofollow"> ontent="noindex,nofollow">
Formatiranje odstavkov Formatiranje odstavkov
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Naslov mojega prvega Dokumenta</TITLE>
<TITLE>Naslov mojega prvega Dokumenta</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<P>Kdo bi
<P>Kdo bi si mislil, da si mislil, da bodo take neumnosti brali
bodo take neumnosti brali pri poukupri pouku.<.<//P>P>
<P>Jaz
<P>Jaz žže ne.</e ne.</P>P>
</BODY>
</BODY>
</HTML>
</HTML>
Naslovi poglavij Naslovi poglavij
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Naslov mojega prvega
<TITLE>Naslov mojega prvega ddokumenta</TITLE>okumenta</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<H1>Naslov poglavja</H1>
<H1>Naslov poglavja</H1>
V tem poglavju je cel kup podpoglavij.
V tem poglavju je cel kup podpoglavij.
<H2>Prvo podpoglavje</H2>
<H2>Prvo podpoglavje</H2>
Ki pa tudi ni iz enega kosa...
Ki pa tudi ni iz enega kosa...
<H3>Prvo podpodpoglavje</H3>
<H3>Prvo podpodpoglavje</H3>
</BODY>
</BODY>
</HTML>
</HTML>
V standardu so definirani nivoji
poglavij 1 – 6 (H1 – H6).
Naštevanja: neoštevilčene alineje Naštevanja: neoštevilčene alineje
Kaj potrebujem na vajah?
Kaj potrebujem na vajah?
<UL>
<UL>
<LI>Jabolka,<
<LI>Jabolka,<//LI> LI>
<UL>
<UL>
<LI>jonatan,<
<LI>jonatan,<//LI> LI>
<LI>zlati delišes,<
<LI>zlati delišes,<//LI> LI>
</UL>
</UL>
<LI>hruške,<
<LI>hruške,<//LI>LI>
<LI>svinčnik.<
<LI>svinčnik.<//LI>LI>
</UL>
</UL>
Naštevanja: oštevilčene alineje Naštevanja: oštevilčene alineje
Zakaj pridem včasih na faks?
Zakaj pridem včasih na faks?
<OL>
<OL>
<LI>Zaradi družbe,<
<LI>Zaradi družbe,<//LI>LI>
<LI>ker drugače ne morem oditi s faksa,<
<LI>ker drugače ne morem oditi s faksa,<//LI>LI>
<LI>nimam pojma.<
<LI>nimam pojma.<//LI> LI>
</OL>
</OL>
Naštevanja: definicije Naštevanja: definicije
Rad bi razložil nekaj pomembnih strokovnih pojmov.
Rad bi razložil nekaj pomembnih strokovnih pojmov.
<DL>
<DL>
<DT>Računalnik<
<DT>Računalnik<//DT>DT>
<DD>Naprava, ki dela sama. Njen pomen za informatiko in
<DD>Naprava, ki dela sama. Njen pomen za informatiko in knjizničarstvo mi je neznan. <knjizničarstvo mi je neznan. <//DD>DD>
<DT>Informatika<
<DT>Informatika<//DT>DT>
<DD>Predmet, ki je ob urah, ko pošten človek spi po kosilu. <
<DD>Predmet, ki je ob urah, ko pošten človek spi po kosilu. <//DD>DD>
</DL>
</DL>
Poudarjanje delov besedila Poudarjanje delov besedila
<P<P>V strokovnem besedilu ponavadi mrgoli besed, ki jim >V strokovnem besedilu ponavadi mrgoli besed, ki jim pravimopravimo
<I>terminus technicus</I>, nekatere med njimi so celo
<I>terminus technicus</I>, nekatere med njimi so celo
<B>zelo pomembne</B>. Tako besedilo se da enostavno pisati z
<B>zelo pomembne</B>. Tako besedilo se da enostavno pisati z računalnikom, <KBD>moja stara mama pa še vedno raje piše
računalnikom, <KBD>moja stara mama pa še vedno raje piše s pisalnim strojem.</KBD><
s pisalnim strojem.</KBD></P/P>>
Spreminjanje velikosti in barve Spreminjanje velikosti in barve
pisave pisave
V HTML dokumentih pisavo spreminjamo z elementom V HTML dokumentih pisavo spreminjamo z elementom
<FONT atribut>. Za spreminjanje velikosti uporabljamo
<FONT atribut>. Za spreminjanje velikosti uporabljamo atribut SIZE, za spreminjanje barve atribut COLOR ter za atribut SIZE, za spreminjanje barve atribut COLOR ter za
spreminjanje pisave atribut FACE.
spreminjanje pisave atribut FACE.
Oblika elementa: Oblika elementa:
• <FONT SIZE=n COLOR=Barva FACE=vrsta pisave> </FONT> <FONT SIZE=n COLOR=Barva FACE=vrsta pisave> </FONT>
• n - zavzema vrednosti od 1 do 7 (n lahko izrazimo tudi v n - zavzema vrednosti od 1 do 7 (n lahko izrazimo tudi v
relativnih vrednostih glede na osnovno velikost pisave - npr.:
relativnih vrednostih glede na osnovno velikost pisave - npr.:
+1,+2,..-1,-2) +1,+2,..-1,-2)
• Barva - izrazimo jo s šestimi šestnajstiškimi ciframi prvi dve Barva - izrazimo jo s šestimi šestnajstiškimi ciframi prvi dve predstavljata rdečo, naslednji dve zeleno in zadnji dve modro predstavljata rdečo, naslednji dve zeleno in zadnji dve modro
barvo.
barvo.
Primer zapisa barve: Primer zapisa barve:
• FF0000 - rdeča barva, FF0000 - rdeča barva,
• 00FF00 - zelena barva, 00FF00 - zelena barva,
• 0000FF - modra barva. 0000FF - modra barva.
Poravnava elementov v HTML Poravnava elementov v HTML
dokumentu.
dokumentu.
V HTML dokumentu uporabljamo poravnave za V HTML dokumentu uporabljamo poravnave za urejanje dokumenta. Za poravnave se uporablja urejanje dokumenta. Za poravnave se uporablja
atribut align=center,left,right. Poravnave lahko atribut align=center,left,right. Poravnave lahko
uporabljamo:
uporabljamo:
poravnavo odstavkov poravnavo odstavkov
• <P align="center">...</P> <P align="center">...</P>
poravnavo tabel poravnavo tabel
• <TABLE align="center">...</TABLE> <TABLE align="center">...</TABLE>
Povezave Povezave
• Največjo moč HTML jezik pokaže pri povezavi besedila in Največjo moč HTML jezik pokaže pri povezavi besedila in slik v istih ali različnih dokumentih. Pregledovalnik
slik v istih ali različnih dokumentih. Pregledovalnik
povezavo označi s posebno barvo in stilom besedila. Tudi povezavo označi s posebno barvo in stilom besedila. Tudi
kazalec se na povezavi iz puščice spremeni v roko z kazalec se na povezavi iz puščice spremeni v roko z
iztegnjenim kazalcem. Tako povezavo z angleškim
iztegnjenim kazalcem. Tako povezavo z angleškim
Hipertekstni kazalci Hipertekstni kazalci
Bistvo hipertekstnega in hiper (multi) Bistvo hipertekstnega in hiper (multi) medijskega dokumenta so kazalci na medijskega dokumenta so kazalci na
druge dokumente ali dele dokumentov.
druge dokumente ali dele dokumentov.
Ločimo Ločimo : :
• kazalce na druge dokumente, kazalce na druge dokumente,
• kazalce na druge dele istega dokumenta, kazalce na druge dele istega dokumenta,
• kazalce na nebesedilne podatkovne tipe, ki kazalce na nebesedilne podatkovne tipe, ki jih jih
vključimo v isti dokument, ali vključimo v isti dokument, ali
prikažemo kot nove dokumente. prikažemo kot nove dokumente.
Hipertekstni kazalci: struktura Hipertekstni kazalci: struktura
<A HREF=“http://www.nekaj.si” < A HREF=“http://www.nekaj.si” >klikni sem > klikni sem< </A /A > >
Oznaka za
hipertekstni kazalec
URL dokumenta,
ki ga želimo priklicati
Del besedila, ki
deluje kot sidro kazalca
Preklic hipertekstnega
kazalca
Hipertekstni kazalci Hipertekstni kazalci
<A HREF="html_p.html">HTML</A> kot oznacevalni jezik in
<A HREF="html_p.html">HTML</A> kot oznacevalni jezik in
<A HREF="http://www.w3.org/www.html"> WWW</A> kot globalna
<A HREF="http://www.w3.org/www.html"> WWW</A> kot globalna
omrezna aplikacija, sta udejanila stari sen <A HREF="#tn">Teda omrezna aplikacija, sta udejanila stari sen <A HREF="#tn">Teda Nelsona</A>. Nelsona</A>.
. . . . . .
<A NAME="tn">Ted Nelson</A> je v svoji knjigi Literary Machines
<A NAME="tn">Ted Nelson</A> je v svoji knjigi Literary Machines opisalopisal projekt Xanadu, v katerem je predlagal gradnjo svetovne projekt Xanadu, v katerem je predlagal gradnjo svetovne knjiznice na
knjiznice na racunalniskem omrezju. Pri tem je prvic uporabil izraz racunalniskem omrezju. Pri tem je prvic uporabil izraz hipertekst.
hipertekst.
b
c d
Hipertekstni kazalci Hipertekstni kazalci
<A HREF="html_p.html">HTML</A> kot oznacevalni jezik in
<A HREF="html_p.html">HTML</A> kot oznacevalni jezik in
<A HREF="http://www.w3.org/www.html"> WWW</A> kot globalna
<A HREF="http://www.w3.org/www.html"> WWW</A> kot globalna
omrezna aplikacija, sta udejanila stari sen <A HREF="#tn">Teda omrezna aplikacija, sta udejanila stari sen <A HREF="#tn">Teda Nelsona</A>. Nelsona</A>.
. . . . . .
<A NAME="tn">Ted Nelson</A> je v svoji knjigi Literary Machines
<A NAME="tn">Ted Nelson</A> je v svoji knjigi Literary Machines opisalopisal projekt Xanadu, v katerem je predlagal gradnjo svetovne projekt Xanadu, v katerem je predlagal gradnjo svetovne knjiznice na
knjiznice na racunalniskem omrezju. Pri tem je prvic uporabil izraz racunalniskem omrezju. Pri tem je prvic uporabil izraz hipertekst.
hipertekst.
b
c d
Hipertekstni kazalci Hipertekstni kazalci
<A HREF="html_p.html">HTML</A> kot oznacevalni jezik in
<A HREF="html_p.html">HTML</A> kot oznacevalni jezik in
<A HREF="http://www.w3.org/www.html"> WWW</A> kot globalna
<A HREF="http://www.w3.org/www.html"> WWW</A> kot globalna
omrezna aplikacija, sta udejanila stari sen <A HREF="#tn">Teda omrezna aplikacija, sta udejanila stari sen <A HREF="#tn">Teda Nelsona</A>. Nelsona</A>.
. . . . . .
<A NAME="tn">Ted Nelson</A> je v svoji knjigi Literary Machines
<A NAME="tn">Ted Nelson</A> je v svoji knjigi Literary Machines opisalopisal projekt Xanadu, v katerem je predlagal gradnjo svetovne projekt Xanadu, v katerem je predlagal gradnjo svetovne knjiznice na
knjiznice na racunalniskem omrezju. Pri tem je prvic uporabil izraz racunalniskem omrezju. Pri tem je prvic uporabil izraz hipertekst.
hipertekst.
b
c d
Hipertekstni kazalci Hipertekstni kazalci
<IMG SRC="knjiga.jpg"><
<IMG SRC="knjiga.jpg"><BRBR>Naj bo ta slika simbol nase dejavnosti. >Naj bo ta slika simbol nase dejavnosti.
Ce kliknes <A HREF="faca.jpg">semle</A>, pa bos videl, kaj si Ce kliknes <A HREF="faca.jpg">semle</A>, pa bos videl, kaj si mislim o njej.
mislim o njej.
b
c
b
Tabele Tabele
Pri oblikovanju tabele moramo definirati Pri oblikovanju tabele moramo definirati in opisati vsako
in opisati vsako celico celico posebej posebej . .
Opis tabele oklepata oznaki Opis tabele oklepata oznaki < < T T A A BLE BLE > > in in
</
</ T T A A BLE BLE > > . .
Opis vrstice oklepata oznaki Opis vrstice oklepata oznaki < < TR> TR > in in </ </ TR TR > > . .
Opis celice oklepata oznaki Opis celice oklepata oznaki < < TD TD > > in in </ </ TD TD > > . .
Tabele Tabele
<TABLE border="1">
<TABLE border="1">
<TR>
<TR>
<TD> <TD>prva celicaprva celica</TD></TD>
<TD> <TD>in druga celica,in druga celica,</TD></TD>
</TR>
</TR>
<TR>
<TR>
<TD> <TD>pa tretja celicapa tretja celica</TD></TD>
<TD> <TD>in še četrta.in še četrta.</TD></TD>
</TR>
</TR>
</TABLE>
</TABLE>
Slike Slike
Večina pregledovalnikov omogoča pregledovanje Večina pregledovalnikov omogoča pregledovanje slik, ki so vključene v HTML dokumente. Najbolj slik, ki so vključene v HTML dokumente. Najbolj
razširjena formata slik sta *.GIF in *.JPG. Drugačne razširjena formata slik sta *.GIF in *.JPG. Drugačne
formate je smiselno pretvoriti tadva omenjena formate je smiselno pretvoriti tadva omenjena
formata. Slike v dokumentih upočasnijo formata. Slike v dokumentih upočasnijo
pregledovanje dokumentov, zato je potrebno pregledovanje dokumentov, zato je potrebno
skrbno izbrati slike, ki jih bomo vključili v skrbno izbrati slike, ki jih bomo vključili v
dokument.
dokument.
Sliko vključimo z ukazom: Sliko vključimo z ukazom:
• <IMG SRC=ImeSlike (URL naslov slike)></IMG> <IMG SRC=ImeSlike (URL naslov slike)></IMG>
Pri slikah pa lahko uporabimo tudi oznako Border, Pri slikah pa lahko uporabimo tudi oznako Border, s katero damo sliki poljubno debelo obrobo.
s katero damo sliki poljubno debelo obrobo.
• <IMG Border="1" SRC=ImeSlike></IMG> <IMG Border="1" SRC=ImeSlike></IMG>
Pošiljanje pošte (Mailto) Pošiljanje pošte (Mailto)
V HTML dokumentu lahko enostavno V HTML dokumentu lahko enostavno
omogočimo bralcu, da pošlje elektronsko omogočimo bralcu, da pošlje elektronsko
pošto avtorju ali odgovorni osebi pošto avtorju ali odgovorni osebi
dokumenta. Klic pošte ustvarimo tako, da dokumenta. Klic pošte ustvarimo tako, da
v povezavo vključimo ukaz mailto in v povezavo vključimo ukaz mailto in
naslov prejemnika pošte.
naslov prejemnika pošte.
Oblika ukaza je naslednja: Oblika ukaza je naslednja:
