HTML (Hypertekst Markup Language). WWW (Word Wide Web) – svetovni splet Zbirka hipertekstovnih...

HTML (Hypertekst HTML (Hypertekst Markup Language)Markup Language)

WWW (Word WWW (Word Wide Web) – Wide Web) – svetovni spletsvetovni splet Zbirka hipertekstovnih Zbirka hipertekstovnih

dokumentov, ki so med seboj dokumentov, ki so med seboj povezani preko interneta.povezani preko interneta.

HTMLHTML

HTML (HyperText Markup Language) je HTML (HyperText Markup Language) je jezik, s katerim opišemo gradiva, ki jih jezik, s katerim opišemo gradiva, ki jih želimo objaviti na spletu. želimo objaviti na spletu.

Datoteka HTML (uporabljata se Datoteka HTML (uporabljata se končnici .htm ali .html), je običajna končnici .htm ali .html), je običajna znakovna datoteka, kar pomeni, da jo znakovna datoteka, kar pomeni, da jo lahko odpremo in urejamo s poljubnimi lahko odpremo in urejamo s poljubnimi urejevalniki besedil. Obstajajo pa tudi urejevalniki besedil. Obstajajo pa tudi profesionalni urejevalniki HTML profesionalni urejevalniki HTML dokumentov, kot sta Adobe dokumentov, kot sta Adobe Dreamviewer in Microsoft Frontpage.Dreamviewer in Microsoft Frontpage.

Dodatni viri za HTMLDodatni viri za HTML

Poglejte si še dodatne vire za Poglejte si še dodatne vire za učenje HTML in XHTML:učenje HTML in XHTML:http://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/xhtml/default.asp http://www.w3schools.com/xhtml/default.asp http://zaversnik.fmf.uni-lj.si/gradiva/html/http://zaversnik.fmf.uni-lj.si/gradiva/html/

Standard HTML 4.01 najdete na:Standard HTML 4.01 najdete na:http://www.w3.org/TR/REC-html40/ http://www.w3.org/TR/REC-html40/ Standard XHTML 2.0 najdete na:Standard XHTML 2.0 najdete na:http://www.w3.org/TR/xhtml2/ http://www.w3.org/TR/xhtml2/ Seznam HTML značk in njihovih Seznam HTML značk in njihovih

lastnosti najdete na:lastnosti najdete na:http://www.ilovejackdaniels.com/cheat-sheets/html-http://www.ilovejackdaniels.com/cheat-sheets/html-

cheat-sheet/cheat-sheet/

Primer preprostega Primer preprostega HTML dokumentaHTML dokumenta

<html> <body> Za dokumente, ki vsebujejo hipertekst v

jeziku HTML potrebujemo preprost urejevalnik besedila in spletni brskalnik, s katerim preverimo zapisan dokument. Značke, s katerim označujemo vsebino, zapisujemo na začetku in koncu vsebine.

</body></html>

NasvetNasvet

Dokumente HTML smiselno Dokumente HTML smiselno poimenujte. Če je na primer spletna poimenujte. Če je na primer spletna stran namenjena podatkom o stran namenjena podatkom o zaposlenih na FERI, je datoteko s to zaposlenih na FERI, je datoteko s to vsebino dobro poimenovati vsebino dobro poimenovati “zaposleni.htm”. Na ta način bodo “zaposleni.htm”. Na ta način bodo tisti, ki bodo želeli narediti tisti, ki bodo želeli narediti hipertekstovno povezavo na to hipertekstovno povezavo na to stran, to lažje storili.stran, to lažje storili.

NasvetNasvet

Dokumente HTML ustrezno Dokumente HTML ustrezno komentirajte, saj jih boste lažje komentirajte, saj jih boste lažje sami popravljali. Razumljivejši pa sami popravljali. Razumljivejši pa bodo tudi vašim kolegom, ki bodo bodo tudi vašim kolegom, ki bodo za vami prevzeli vzdrževanje teh za vami prevzeli vzdrževanje teh dokumentov. Komentarjev brskalnik dokumentov. Komentarjev brskalnik ne izpiše, služijo vam le za lažje ne izpiše, služijo vam le za lažje razumevanje vaših spletnih strani.razumevanje vaših spletnih strani.

Značka (tag)Značka (tag)

Spletna stran je običajno sestavljena iz različnih vrst Spletna stran je običajno sestavljena iz različnih vrst elementovelementov, , kot so odstavki, slike, tabele, seznami ali posebej oblikovano kot so odstavki, slike, tabele, seznami ali posebej oblikovano besedilo. besedilo.

Opis elementa je v splošnem sestavljen iz treh delov: iz Opis elementa je v splošnem sestavljen iz treh delov: iz začetne značke, vsebine in končne značkezačetne značke, vsebine in končne značke. Začetna in končna . Začetna in končna značka se pričneta z znakom značka se pričneta z znakom <<, končata z znakom , končata z znakom >>, vmes pa je , vmes pa je zapisano ime elementa. V končni znački je pred imenom vedno znak zapisano ime elementa. V končni znački je pred imenom vedno znak //. V začetni znački lahko za imenom določimo lastnosti elementa. Za . V začetni znački lahko za imenom določimo lastnosti elementa. Za vsako lastnost napišemo presledek, njeno ime, znak vsako lastnost napišemo presledek, njeno ime, znak == in vrednost in vrednost lastnosti. Čeprav ni obvezno, je vrednosti priporočljivo pisati v lastnosti. Čeprav ni obvezno, je vrednosti priporočljivo pisati v dvojnih narekovajih. dvojnih narekovajih.

Primeri:Primeri:

<b> Krepko </b> <a href="http://www.feri.uni-mb.si/podrocje.aspx">FERI</a> <table border="1" cellspacing="0">. .. </table>

Značka Lastnosti Elementi

Značka - nadaljevanjeZnačka - nadaljevanje

<table width="400" border="1"> <tr> <th align="left">Kam je šla moja plača? </th> <th align="right">Januar</th> <th align="right">Februar</th> </tr> <tr> <td align="left">Obleke</td> <td align="right">EUR 241.10</td> <td align="right">EUR 50.20</td> </tr> <tr> <td align="left">Hrana</td> <td align="right">EUR 500</td> <td align="right">EUR 510</td> </tr></table> Opis elementa je v splošnem sestavljen iz treh delov: iz začetne Opis elementa je v splošnem sestavljen iz treh delov: iz začetne

značke, vsebine in končne značke. Začetna in končna značka se značke, vsebine in končne značke. Začetna in končna značka se pričneta z znakom pričneta z znakom <<, končata z znakom , končata z znakom >>, vmes pa je zapisano ime , vmes pa je zapisano ime elementa. V končni znački je pred imenom vedno znak elementa. V končni znački je pred imenom vedno znak //. V začetni . V začetni znački lahko za imenom določimo lastnosti elementa. Za vsako znački lahko za imenom določimo lastnosti elementa. Za vsako lastnost napišemo presledek, njeno ime, znak lastnost napišemo presledek, njeno ime, znak == in vrednost in vrednost lastnosti. Vrednosti lastnosti je priporočljivo pisati v dvojnih lastnosti. Vrednosti lastnosti je priporočljivo pisati v dvojnih narekovajih. narekovajih.

NasvetNasvet

Uporabite zamikanje HTML Uporabite zamikanje HTML elementov, če jih gnezdite enega elementov, če jih gnezdite enega v drugega.v drugega.

Pogoste napake HTML Pogoste napake HTML programerjevprogramerjev Značke nimajo zaključka (npr. napisali smo Značke nimajo zaključka (npr. napisali smo

<td><td> , nismo pa podali , nismo pa podali </td></td>).). Komentarji nimajo zaključka, zato se vsebina Komentarji nimajo zaključka, zato se vsebina

ne vidi.ne vidi. Vrednosti lastnosti niso v dvojnih narekovajih Vrednosti lastnosti niso v dvojnih narekovajih

ali pozabimo dodati začetni ali končni dvojni ali pozabimo dodati začetni ali končni dvojni apostrof. apostrof.

Zmotimo se pri poimenovanju značke (npr. Zmotimo se pri poimenovanju značke (npr. namesto namesto <b><b> napišemo napišemo <n><n> - značko - značko <n><n> brskalnik ignorira).brskalnik ignorira).

Značke niso ustrezno vgnezdene.Značke niso ustrezno vgnezdene.

Nekateri brskalniki precej napak ignorirajo, Nekateri brskalniki precej napak ignorirajo, zato znajo prikazati tudi slovnično nepravilno zato znajo prikazati tudi slovnično nepravilno vsebino, ki pa ni ustrezne oblike.vsebino, ki pa ni ustrezne oblike.

NasvetNasvet

Če želite, da se bodo vaši Če želite, da se bodo vaši dokumenti HTML pravilno dokumenti HTML pravilno prikazali v vseh brskalnikih, ji prikazali v vseh brskalnikih, ji preverite s HTML validatorjem.preverite s HTML validatorjem.

Zgradba HTML dokumentovZgradba HTML dokumentov

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html>

 <head> <title> Naslov dokumenta </title> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> </head>  <body> Telo HTML dokumenta. </body> </html>

Drevo HTML označbDrevo HTML označb

<html> <head> <title>Moja domaca stran</title> </head> <body> <h1>Moja domaca stran</h1> <p>Pozdravljeni na moji domaci strani. Moji priljubljeni glasbeniki so:

</p> <ul> <li> Elvis Presley <li> Zoran Predin <li> Eric Clapton </ul> </body></html>

• html je starš od head in body

• head in body sta otroka od html

• p je predhodnik od ul

• ul je naslednik od p

• vsi li so sorodniki

• li je potomec od body

• body je prednik od li

Glava HTML Glava HTML dokumentadokumenta V glavi opišemo dokument. Z značko V glavi opišemo dokument. Z značko <title><title> moramo določiti moramo določiti

naslov, ki se prikaže v naslovni vrstici brskalnika, z drugimi naslov, ki se prikaže v naslovni vrstici brskalnika, z drugimi značkami pa lahko določimo še način kodiranja, ki določa, na kakšen značkami pa lahko določimo še način kodiranja, ki določa, na kakšen način smo zapisali znake, ki jih ni v tabeli ASCII, ključne besede, ki način smo zapisali znake, ki jih ni v tabeli ASCII, ključne besede, ki raznim iskalnikom pomagajo pri uvrščanju spletne strani v ustrezne raznim iskalnikom pomagajo pri uvrščanju spletne strani v ustrezne skupine, obliko posameznih elementov, vključimo lahko pomožne skupine, obliko posameznih elementov, vključimo lahko pomožne datoteke ... Kar napišemo v glavi, v oknu brskalnika ni vidno. Do teh datoteke ... Kar napišemo v glavi, v oknu brskalnika ni vidno. Do teh podatkov pridemo, če to posebej zahtevamo (na primer z ukazom podatkov pridemo, če to posebej zahtevamo (na primer z ukazom ToolsTools, , Page InfoPage Info v brskalniku Mozilla Firefox). v brskalniku Mozilla Firefox).

Primer:Primer:<title> Priročnik za jezik HTML </title> <meta http-equiv="Content-Type" content="text/html"; charset="windows-1250" /><meta name="Author" content="Milan Ojsteršek" /> <meta name="Keywords" content="HTML, priročnik" /> <meta name="Description" content="Priročnik za jezik HTML za začetnike" /> <meta name="Generator" content="Notepad" /> <meta http-equiv="Refresh" content="5;url=http://www.feri.uni-mb.si"><meta http-equiv="Robots" content="noindex" /> <meta http-equiv="Content-Language" content="en" /><base href="http://www.feri.uni-mb.si/csferi/" /> <style type="text/css"> p {color: #FF0000;} </style><link rel="StyleSheet" type="text/css" href="stil.css" /> <script type="text/javascript" src="program.js"></script>

Glava HTML Glava HTML dokumenta – dokumenta – nadaljevanje nadaljevanje

Z oznako Z oznako <title><title> določimo naslov HTML dokumenta, ki se prikaže v naslovni določimo naslov HTML dokumenta, ki se prikaže v naslovni vrstici.vrstici.

<title> Priročnik za jezik HTML </title> Z oznako <meta> na spletno stran dodamo informacije o njej. Na izbiro

imamo več možnosti. – <meta name="Description" content="Priročnik za jezik HTML za

začetnike" /> - Opis spletne strani– <meta name="Keywords" content="HTML, priročnik" /> - Ključne

besede, ki so pomembne pri indeksiranju iskalnikov ( ti rangirajo dokumente s ključnimi besedami višje)

– <meta name="Author" content="Milan Ojsteršek" /> - Avtor dokumenta– <meta http-equiv="Content-Type" content="text/html";

charset="windows-1250" /> - Definiranje MIME tipa dokumenta (text/HTML) in kodiranje (windows-1250, UTF-8...)

– <meta http-equiv="Content-Language" content="en" /> - Jezik v katerem je dokument

– <meta http-equiv="Refresh" content="5;url=http://www.feri.uni-mb.si"> - po 5 sekundah se izvede preusmeritev na url naslov http://www.feri.uni-mb.si

– <meta http-equiv="Robots" content="noindex" /> - Z oznako Robots (noindex) preprečimo, da bi nas pajek poindexsiral (da bi se naša spletna stran pojavila npr. v Google).

Glava HTML Glava HTML dokumenta - dokumenta - nadaljevanjenadaljevanje <base href="http://www.feri.uni-mb.si/csferi/" /> Z oznako

<base> določimo osnovni url naslov za reference, ki imajo relativne naslove glede na ta naslov

<style type="text/css"> p {color: #FF0000;} </style> - z oznako <style> določimo CSS stil v glavi dokumenta

<link rel="StyleSheet" type="text/css" href="stil.css" /> - z oznako <link> določimo, kje se nahaja zunanja datoteka (v tem primeru vključimo datoteko stil.css s stilom CSS), ki jo bomo vključili v glavo dokumenta

<script type="text/javascript" src="program.js"></script> - z oznako <script> vključimo datoteko skript v glavo dokumenta (v tem primeru vključimo datoteko Javascript program.js)

NasvetNasvet

Uporabljajte HTML označbe glave. Uporabljajte HTML označbe glave. Vsak dokument naj ima vsaj Vsak dokument naj ima vsaj <title>,<title>, definiran kodni format, definiran kodni format, opis in ključne besede.opis in ključne besede.

Označbe glaveOznačbe glave

<head><head> Glava HTML dokumentaGlava HTML dokumenta

<title><title> Naslov dokumentaNaslov dokumenta

<meta><meta> Meta podatkiMeta podatki

<base><base> Definira začetni URL sklicevanih Definira začetni URL sklicevanih dokumentovdokumentov

<basefont><basefont> Definira osnovni tip, barvo in velikost Definira osnovni tip, barvo in velikost pisave dokumentapisave dokumenta

<script><script> Del dokumenta, ki vsebuje skript (Javascript, Del dokumenta, ki vsebuje skript (Javascript, VBScript)VBScript)

<noscript><noscript> Del v kateremDel v katerem v katerem ni skript v katerem ni skript

<style><style> Definira Definira CSS CSS stilstil

Telo HTML dokumentaTelo HTML dokumenta

V telesu napišemo vse, kar želimo, da brskalnik prikaže v V telesu napišemo vse, kar želimo, da brskalnik prikaže v svojem oknu. Običajno tu opišemo besedilo, slike, tabele, svojem oknu. Običajno tu opišemo besedilo, slike, tabele, sezname in druge elemente, ki sestavljajo spletno stran. sezname in druge elemente, ki sestavljajo spletno stran.

Primer:Primer:<body> <p> To je besedilo, zapisano v navadnem odstavku.</p> <p> To je drugi odstavek besedila. Vidimo, da brskalnik

med dvema odstavkoma naredi nekaj praznega prostora. Če med besedami napišemo več kot samo en presledek, jih bo brskalnik obravnaval kot enega.<br /> Tudi skok v novo vrstico bo naredil šele, ko mu zmanjka prostora v tekoči vrstici, razen če to posebej ne zahtevamo, kot smo to storili na koncu prejšnjega stavka. </p>

<pre> Besedilo, v katerem so razlomi vrstic in presledki med besedami pomembni, zapišemo z elementom

pre. Stranski učinek je uporaba pisave, kjer so vsi znaki enake

širine, vendar to lahko spremenimo z uporabo stilov CSS. </pre>

</body>

Izgled prejšnjega Izgled prejšnjega primera v brskalnikuprimera v brskalniku

Posebni znakiPosebni znaki

Nekateri znaki v HTML imajo poseben pomen. Ti znaki Nekateri znaki v HTML imajo poseben pomen. Ti znaki so so << (manjši), (manjši), >> (večji), (večji), "" (dvojni narekovaj) in (dvojni narekovaj) in && (in). (in). – Primer: Primer:

Znak “<“ zapišemo z Znak “<“ zapišemo z << Znak “>” zapišemo z Znak “>” zapišemo z >> Če hočemo v HTML zapisati “a>b”, to zapišemo z: a Če hočemo v HTML zapisati “a>b”, to zapišemo z: a >> b. b.

Če jih želimo uporabiti v besedilu, moramo uporabiti Če jih želimo uporabiti v besedilu, moramo uporabiti njihova imena, določena s standardom SGML. njihova imena, določena s standardom SGML. Podrobnejši zapis znakov je podan na: Podrobnejši zapis znakov je podan na: http://www.w3schools.com/tags/ref_entities.asphttp://www.w3schools.com/tags/ref_entities.asp

Tudi ASCII znake lahko zapišemo s pomočjo Tudi ASCII znake lahko zapišemo s pomočjo posebnega zapisa v HTML. Podrobnejši opis je podan posebnega zapisa v HTML. Podrobnejši opis je podan na:na:http://www.w3schools.com/tags/ref_ascii.asphttp://www.w3schools.com/tags/ref_ascii.asp

Fizično oblikovanje Fizično oblikovanje besedilabesedila

Pri fizičnem oblikovanju besedila natančno določimo, kako Pri fizičnem oblikovanju besedila natančno določimo, kako želimo, da bo prikazan del besedila. Z uporabo elementa želimo, da bo prikazan del besedila. Z uporabo elementa bb (bold) bo besedilo izpisano krepko, z elementom (bold) bo besedilo izpisano krepko, z elementom ii (italic) (italic) nagnjeno, če uporabimo element nagnjeno, če uporabimo element tttt (teletype), bo besedilo (teletype), bo besedilo izgledalo, kot bi bilo napisano na pisalni stroj. Z elementoma izgledalo, kot bi bilo napisano na pisalni stroj. Z elementoma bigbig in in smallsmall lahko besedilo izpišemo večje ali manjše. lahko besedilo izpišemo večje ali manjše.

Primeri:Primeri: To je <b> krepko </b> besedilo. To je <i> nagnjeno </i> besedilo. To je <tt> natipkano </tt> besedilo. To je <big> veliko </big> besedilo. To je <big><big> vecje </big></big> besedilo. To je <big><big><big> še vecje </big></big></big> besedilo. To je <small> majhno </small> besedilo. To je <small><small> manjše </small></small> besedilo. To je <small><small><small> še manjše </small></small></small>

besedilo.

Logično oblikovanje Logično oblikovanje besedilabesedila

Pri logičnem oblikovanju določimo, kakšne vrste je posamezen del besedila Pri logičnem oblikovanju določimo, kakšne vrste je posamezen del besedila (glavni naslov, podnaslov, odstavek, definicija ...), brskalnik pa se sam odloči, (glavni naslov, podnaslov, odstavek, definicija ...), brskalnik pa se sam odloči, kako bo to prikazal. Pri tem mu lahko predlagamo, kako naj kaj oblikuje, a več o kako bo to prikazal. Pri tem mu lahko predlagamo, kako naj kaj oblikuje, a več o tem, ko bomo obravnavali CSS. Bločni elementi, ki jih uporabljamo pri logičnem tem, ko bomo obravnavali CSS. Bločni elementi, ki jih uporabljamo pri logičnem oblikovanju besedila, so različne vrste naslovov (elementi oblikovanju besedila, so različne vrste naslovov (elementi h1h1, , h2h2, , h3h3, , h4h4, , h5h5 in in h6h6), odstavek (element ), odstavek (element pp) in besedilo s predpisanimi prelomi vrstic (element ) in besedilo s predpisanimi prelomi vrstic (element prepre). Od vrstičnih elementov omenimo indeks (element ). Od vrstičnih elementov omenimo indeks (element subsub) in eksponent ) in eksponent (element (element supsup), obstaja pa še precej drugih, ki jih redkeje uporabljamo (na ), obstaja pa še precej drugih, ki jih redkeje uporabljamo (na primer elementi primer elementi em, strong, code, cite addressem, strong, code, cite address...). ...).

Primeri:Primeri: <h1> Naslov</h1>

<h2> Podnaslov </h2> <h3> Podpodnaslov</h3> <h4> Naslov na 4. nivoju</h4> <h5> Naslov na 5. nivoju</h5> <h6> Naslov na 6. nivoju</h6> <p> Odstavek </p> <pre> Besedilo z dolocenimi prelomi vrstic </pre> <p>H<sub>2</sub>O</p> <p><em>E</em> = <em>m</em> <em>c</em><sup>2</sup></p>

Osnovne značkeOsnovne značke

Te so: <h1> do <h6> - Naslovi in podnaslovi

<p> - Odstavek

<br /> - Skok v novo vrstico

<hr /> - Vodoravna črta

 Komentar

<pre> Besedilo, ki ga zapišemo v hipertekstu, spletni brskalnik prikaže enako ne glede na to koliko presledkov, skokov v novo vrstico naredimo. Če želimo, da brskalnik upošteva presledke, skoke v novo vrstico, uporabimo značko <pre>.

Značke za formatiranje Značke za formatiranje besedilabesedila

<b><b> Poudarjen tekstPoudarjen tekst<i><i> Poševen tekstPoševen tekst<u><u> Podčrtan tekstPodčrtan tekst<center><center> Centriran tekst Centriran tekst <p align=“center”><p align=“center”><<emem>> Poudarjen tekstPoudarjen tekst<big><big> Povečane črkePovečane črke<<strongstrong>> Poudarjen tekstPoudarjen tekst<<smallsmall>> Pomanjšane črkePomanjšane črke<<supsup>> Nadpisan tekstNadpisan tekst<<subsub>> Podpisan tekstPodpisan tekst<<bdobdo>> Krmiljenje izpisa črk od desne proti levi ali obratnoKrmiljenje izpisa črk od desne proti levi ali obratno<<codecode>> Računalniški kodni tekstRačunalniški kodni tekst<<tttt>> tekst kot na pisalnem strojutekst kot na pisalnem stroju<<kbdkbd>> Tekst kot na tipkovniciTekst kot na tipkovnici<var><var> SpremenljivkaSpremenljivka<<dfndfn>> Definicija Definicija <<sampsamp>> VzorecVzorec<xmp><xmp> Neprelomljen Neprelomljen <<acronymacronym>> AkronimAkronim<<abbrabbr>> OkrajšavaOkrajšava<<addressaddress>> NaslovNaslov<<blockquoteblockquote>> CitatCitat<q><q> Kratka okrajšavaKratka okrajšava<<citecite>> CitatCitat<<insins>> Dodam tekst Dodam tekst <del><del> Prečrtan tekstPrečrtan tekst<s><s> Prečrtan tekstPrečrtan tekst<<strikestrike>> Prečrtan tekstPrečrtan tekst<<fontfont>> Velikost, tip in barva pisaveVelikost, tip in barva pisave

Značke, ki se ne Značke, ki se ne uporabljavo večuporabljavo več<b> uporabi <strong> <s> uporabi <del> <strike> uporabi <del> <u> uporabi CSS <listing> uporabi <pre> <plaintext> uporabi <pre> <xmp> uporabi <pre> <font> uporabi CSS

PrimeriPrimeri

<abbr title="et cetera">etc.</abbr><br /> <acronym title="World Wide Web">WWW</acronym><br /><address> Milan Ojsteršek, <br /> Smetanova 17, 2000 Maribor</address> <br /><bdo dir="rtl">Tekst od desne proti levi</bdo><br /><bdo dir="ltr">Tekst od leve proti desni</bdo><br /><em>Poudarjen tekst</em><br /><strong>Poudarjen tekst</strong><br /><dfn>Definicija</dfn><br /><code>Raèunalniška koda</code><br /><samp>Primer raèunalniške kode</samp><br /><kbd>Kot na tipkovnici</kbd><br /><var>Spremenljivka</var><br /><cite>Citat: <br />So lepeLjubljanke slovele a lepše od Urške blo ni nobene </cite>

SeznamiSeznami

Sezname v HTML uporabimo, kadar Sezname v HTML uporabimo, kadar želimo po vrsti našteti več stvari. želimo po vrsti našteti več stvari. Obstaja več vrst seznamov, ki jih Obstaja več vrst seznamov, ki jih uporabljamo za naštevanje, številčenje uporabljamo za naštevanje, številčenje ali opisovanje. ali opisovanje.

Poznamo:Poznamo:– neštevilčne,neštevilčne,– številčne inštevilčne in– opisne.opisne.

Naštevanje- Naštevanje- neštevilčni seznamineštevilčni seznami

Za naštevanje uporabimo element Za naštevanje uporabimo element <ul><ul> (unordered list), znotraj katerega naštejemo (unordered list), znotraj katerega naštejemo elemente elemente <li><li> (list item), ki predstavljajo (list item), ki predstavljajo posamezne točke seznama. posamezne točke seznama.

Primer:Primer:<ul> <li> Uvod v svetovni splet </li> <li> Matematika </li> <li> Uvod v računalništvo </li> <li> Uporabniška programska oprema </li> </ul>

Primeri različnih Primeri različnih neštevilčnih seznamovneštevilčnih seznamov<h4>S pikami:</h4> <ul type="disc"> <li>Jabolka</li> <li>Banane</li> <li>Llimone</li> <li>Oranže</li> </ul>

<h4>S krogi:</h4> <ul type="circle"> <li>Jabolka</li> <li>Banane</li> <li>Limone</li> <li>Oranže</li> </ul>

<h4>S kvadratki:</h4> <ul type="square"> <li>Jabolka</li> <li>Banane</li> <li>Limone</li> <li>Oranže</li> </ul>

Številčni seznamiŠtevilčni seznami

Za številčenje uporabimo element Za številčenje uporabimo element <ol><ol> (ordered list), znotraj katerega naštejemo (ordered list), znotraj katerega naštejemo elemente elemente <li><li> (list item), ki predstavljajo (list item), ki predstavljajo posamezne točke seznama. posamezne točke seznama.

Primer:Primer:<ol> <li> Uvod v svetovni splet </li> <li> Matematika </li> <li> Uvod v računalništvo </li> <li> Uporabniška programska oprema </li> </ol>

Primeri različnih Primeri različnih številčnih seznamovštevilčnih seznamov

<h4>Uporaba velikih črk za alineje</h4> <ol type="A"> <li>Jabolka</li> <li>Banane</li> <li>Limone</li> <li>Oranže</li> </ol>

<h4>Uporaba malih črk za alineje</h4> <ol type="a"> <li>Jabolka</li> <li>Banane</li> <li>Limone</li> <li>Oranže</li> </ol>

Primeri različnih Primeri različnih številčnih seznamovštevilčnih seznamov

<h4>Uporaba velikih rimskih črk za alineje</h4> <ol type="I"> <li>Jabolka</li> <li>Banane</li> <li>Limone</li> <li>Oranže</li> </ol>

<h4>Uporaba malih rimskih črk za alineje</h4> <ol type="i"> <li>Jabolka</li> <li>Banane</li> <li>Limone</li> <li>Oranže</li> </ol>

Opisni seznamiOpisni seznami

Uporabimo element Uporabimo element <dl><dl> (definition list), znotraj (definition list), znotraj katerega naštejemo elemente katerega naštejemo elemente <dt><dt> (definition term) (definition term) in in <dd><dd> (definition description). Prvi predstavljajo (definition description). Prvi predstavljajo pojme, ki jih opisujemo, drugi pa njihove opise. pojme, ki jih opisujemo, drugi pa njihove opise.

Primer:Primer:<dl> <dt> USS </dt> <dd> Uvod v svetovni splet </dd> <dt> MA </dt> <dd> Matematika </dd> <dt> UR </dt> <dd> Uvod v računalništvo </dd> <dt> UPO </dt> <dd> Uporabniška programska oprema </dd> </dl>

Gnezdenje seznamovGnezdenje seznamov Omenjene vrste seznamov lahko tudi gnezdimo. To pomeni, da lahko naredimo seznam znotraj Omenjene vrste seznamov lahko tudi gnezdimo. To pomeni, da lahko naredimo seznam znotraj

drugega seznama (kot točko ali njen del). Pri tem moramo paziti, da značke zaključujemo v drugega seznama (kot točko ali njen del). Pri tem moramo paziti, da značke zaključujemo v obratnem vrstnem redu, kot jih odpiramo. obratnem vrstnem redu, kot jih odpiramo.

Primer:Primer:<dl> <dt> <b> Sestavine za biskvit:</b></dt> <dd> <ul> <li> 100g moke, </li> <li> 10g sladkorja, </li> <li> skodelica vode, </li> <li> 2 jajci, </li> <li> sol, poper. </li> </ul> </dd> <dt> <b>Postopek:</b> </dt> <dd> <ol> <li> zmešaj suhe sestavine, </li> <li> dolij vodo, </li> <li> mešaj 10 minut, </li> <li> daj v pečico, ki je zagreta na 300 stopinj Celzija. </li> </ol> </dd> <dt> <b> Opombe: </b> </dt> <dd> Recept lahko izboljšaš tako, da dodaš rozine. </dd> </dl>

Značke za delo s Značke za delo s seznamiseznami<ul> Neštevilčni seznam<ol> Številčni seznam<li> Alineja seznama<dir> Imenik – neštevilčni seznam<dl> Seznam definicij <dt> Definicija <dd> Opis definicije<menu> Meni - neštevilčni seznam

SlikeSlike Sliko vstavimo v dokument s pomočjo elementa Sliko vstavimo v dokument s pomočjo elementa <img><img> , ki je brez vsebine, torej nima , ki je brez vsebine, torej nima

zaključne značke. Element zaključne značke. Element IMGIMG je vrstični element, kar pomeni, da se slika v dokumentu je vrstični element, kar pomeni, da se slika v dokumentu obnaša kot en velik znak. Če želimo večjo sliko prikazati samostojno, jo moramo obdati z obnaša kot en velik znak. Če želimo večjo sliko prikazati samostojno, jo moramo obdati z bločnim elementom. Element bločnim elementom. Element <img><img> ima nekaj pomembnih lastnosti: ima nekaj pomembnih lastnosti:

Z lastnostjo Z lastnostjo srcsrc določimo naslov slike (ime datoteke). Če se slika nahaja v isti mapi kot določimo naslov slike (ime datoteke). Če se slika nahaja v isti mapi kot spletna stran, je za vrednost lastnosti dovolj napisati samo ime datoteke, kako se sestavi spletna stran, je za vrednost lastnosti dovolj napisati samo ime datoteke, kako se sestavi naslov datoteke, ki se nahaja kje drugje (v drugi mapi, na drugem strežniku), pa je naslov datoteke, ki se nahaja kje drugje (v drugi mapi, na drugem strežniku), pa je podrobneje opisano v poglavju o aktivnih povezavah. Slika mora biti zapisana na datoteki podrobneje opisano v poglavju o aktivnih povezavah. Slika mora biti zapisana na datoteki oblike GIF, JPG ali PNG. oblike GIF, JPG ali PNG.

Z Z lastnostma lastnostma widthwidth (širina) in (širina) in heightheight (višina) določimo velikost pravokotnega področja, (višina) določimo velikost pravokotnega področja, namenjenega prikazu slike. Če velikosti ne predpišemo, bo slika prikazana v njeni originalni namenjenega prikazu slike. Če velikosti ne predpišemo, bo slika prikazana v njeni originalni velikosti (kot je zapisano na datoteki). Če podamo samo širino ali samo višino, bo slika tako velikosti (kot je zapisano na datoteki). Če podamo samo širino ali samo višino, bo slika tako široka oziroma visoka, kot smo zahtevali, pri čemer bo razmerje med njeno širino in višino široka oziroma visoka, kot smo zahtevali, pri čemer bo razmerje med njeno širino in višino ohranjeno (slika ne bo popačena). Če pa podamo širino in višino, bo prikazana slika točno ohranjeno (slika ne bo popačena). Če pa podamo širino in višino, bo prikazana slika točno tako velika, kot smo zahtevali (pri tem se lahko slika tudi popači). Priporočljivo je, da vedno tako velika, kot smo zahtevali (pri tem se lahko slika tudi popači). Priporočljivo je, da vedno podamo obe dimenziji slike. Samo tako bo brskalnik lahko že med nalaganjem strani podamo obe dimenziji slike. Samo tako bo brskalnik lahko že med nalaganjem strani rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko. rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko.

Z lastnostjo Z lastnostjo altalt na kratko opišemo, kaj se nahaja na sliki. Opis slike se prikaže, če z miško na kratko opišemo, kaj se nahaja na sliki. Opis slike se prikaže, če z miško nekaj sekund počivamo na njej (prikaže se v rumenem okvirčku) ali pa če pregledovalnik nekaj sekund počivamo na njej (prikaže se v rumenem okvirčku) ali pa če pregledovalnik slike ne more prikazati (prikaže se namesto slike). slike ne more prikazati (prikaže se namesto slike).

Primeri:Primeri:<img src="smesko.gif" alt="Smeško originalne velikosti" />

<img src="smesko.gif" width="70" alt="Smeško širine 70" /> <img src="smesko.gif" height="200" alt="Smeško višine 200" /> <img src="smesko.gif" width="70" height="200" alt="Smeško širine 70 in višine 200" />

Zlivanje slike z Zlivanje slike z besedilombesedilom Za zlivanje slike z besedilom uporabimo Za zlivanje slike z besedilom uporabimo

lastnost lastnost align align z vrednostmi z vrednostmi leftleft (levo), (levo), rightright (desno), (desno), toptop (navzgor), (navzgor), bottombottom (navzdol) ali (navzdol) ali middlemiddle (sredinsko). (sredinsko).

Za določanje praznih pikslov med sliko Za določanje praznih pikslov med sliko in besedilom pa uporabimo lastnosti in besedilom pa uporabimo lastnosti hspace hspace ( število praznih pikslov levo in ( število praznih pikslov levo in desno od slike) in desno od slike) in vspace vspace (število (število praznih mest nad in pod sliko).praznih mest nad in pod sliko).

Primer zlivanja slike z Primer zlivanja slike z besedilombesedilom

<h1> Fakulteta za elektrotehniko, računalništvo in informatiko </h1> <p><img src="feri.jpg" alt="FERI" align="left" hspace="20" vspace="20" width="300"/> Fakulteta za elektrotehniko računalništvo in informatiko (FERI) je znanstvena institucija z izraženim regionalnim,

nacionalnim in mednarodnim pomenom. Regionalnost se odraža v tesni povezanosti z industrijo v mestu Maribor in okolici, v kateri se tudi zaposli pretežni del diplomantov in podiplomskih študentov. Nacionalnega pomena so predvsem inštituti kot sestavni deli FERI ter centri znanja, ki opravljajo diseminacijo temeljnih in aplikativnih znanj v celoten prostoru Republike Slovenije. Mednarodni pomen izkazuje fakulteta z vpetostjo v mednarodne raziskovalne tokove s številnimi mednarodnimi projekti, izmenjavo študentov in profesorjev, objavami v uglednih znanstvenih revijah, nastopih na mednarodnih konferencah in organizacijo le-teh. Uresničevanje regionalnega nacionalnega in mednarodnega poslanstva poskušajo delavci na FERI doseči predvsem:

</p> <ul> <li>z ustvarjanjem novega znanja iz elektrotehniških, računalniških in informacijskih, telekomunikacijskih,

mehatronskih in medijsko-komunikacijskih ved na osnovi znanosti in raziskovanja ter </li> <li>s skrbjo za stalni prenos znanja v okolje s kakovostnim pedagoškim delom. </li> </ul>

NasvetNasvet

Uporabite predefinirano dolžino Uporabite predefinirano dolžino slike (width) ali višino (height), saj slike (width) ali višino (height), saj bodo tako spletne strani boljše bodo tako spletne strani boljše oblikovane in ne bodo odvisne od oblikovane in ne bodo odvisne od velikosti okna brskalnika ali od velikosti okna brskalnika ali od ločljivosti (resolucije) slike. ločljivosti (resolucije) slike. Brskalnik strani z vnaprej določeno Brskalnik strani z vnaprej določeno višino ali širino slike tudi hitreje višino ali širino slike tudi hitreje prikaže.prikaže.

Pogosta napakaPogosta napaka

Če sočasno nastavite dolžino in Če sočasno nastavite dolžino in širino slike, lahko sliko popačite, širino slike, lahko sliko popačite, če spremenite razmerje med če spremenite razmerje med dolžino in širino slike, ki je v dolžino in širino slike, ki je v originalni sliki.originalni sliki.

PovezavePovezave

Del besedila lahko naredimo aktivnega. To pomeni, da se bo uporabniku, če bo Del besedila lahko naredimo aktivnega. To pomeni, da se bo uporabniku, če bo kliknil nanj, odprla neka druga datoteka ali pa drug del istega dokumenta. Ta druga kliknil nanj, odprla neka druga datoteka ali pa drug del istega dokumenta. Ta druga datoteka je lahko spletna stran, slika, različne vrste dokumentov (DOC, XLS, PDF, datoteka je lahko spletna stran, slika, različne vrste dokumentov (DOC, XLS, PDF, PS, ZIP ...) ali pa celo program, ki ga lahko poženemo na strežniku. Aktivno besedilo PS, ZIP ...) ali pa celo program, ki ga lahko poženemo na strežniku. Aktivno besedilo je običajno modro obarvano in podčrtano, ko pa povezavo obiščemo, se obarva je običajno modro obarvano in podčrtano, ko pa povezavo obiščemo, se obarva vijolično (te oblikovne lastnosti lahko spremenimo s stili). Besedilo naredimo vijolično (te oblikovne lastnosti lahko spremenimo s stili). Besedilo naredimo aktivno z uporabo elementa aktivno z uporabo elementa <a><a> . Z lastnostjo . Z lastnostjo hrefhref mu določimo ime ciljne mu določimo ime ciljne datoteke, ki naj se odpre, ko uporabnik klikne na povezavo. datoteke, ki naj se odpre, ko uporabnik klikne na povezavo.

Primeri:Primeri:Sklic na datoteko <a href="test.html">v isti mapi.</a>

Sklic na datoteko <a href="podmapa/test.html">v podmapi.</a> Sklic na datoteko <a href="podmapa1/podmapa2/test.html">dva nivoja nižje.</a> Sklic na datoteko <a href="../../test.html">dva nivoja višje.</a> Sklic na datoteko <a href="../podmapa/test.html">v sosednji mapi.</a> Datoteka <a href="http://www.streznik.com/test.html">v korenski mapi</a>

strežnika. Datoteka <a href="http://www.streznik.com/podmapa/test.html">v podmapi</a> strežnika.

Privzeta datoteka <a href="http://www.streznik.com">v korenski mapi</a> strežnika. Privzeta datoteka <a href="http://www.streznik.com/podmapa">v podmapi</a> strežnika.

Oznake znotraj Oznake znotraj dokumentadokumenta

Skličemo se lahko tudi na določen element na neki spletni Skličemo se lahko tudi na določen element na neki spletni strani. Ta element seveda najprej primerno označimo. To strani. Ta element seveda najprej primerno označimo. To storimo tako, da mu predpišemo lastnost storimo tako, da mu predpišemo lastnost idid (lahko jo (lahko jo predpišemo kateremu koli elementu), katere vrednost je predpišemo kateremu koli elementu), katere vrednost je poljubno ime, ki si ga izmislimo, ali pa ciljno točko določimo poljubno ime, ki si ga izmislimo, ali pa ciljno točko določimo s poimenovanim elementom s poimenovanim elementom <a><a> (določimo mu lastnost (določimo mu lastnost namename). ). Primeri:Primeri:

<h1 id="naslov">Naslov</h1> <a name="oznaka"></a>

Na pravilno označen element ali poimenovano točko se Na pravilno označen element ali poimenovano točko se potem skličemo tako, da naslovu spletne strani na koncu potem skličemo tako, da naslovu spletne strani na koncu dodamo znak dodamo znak ## in oznako elementa oziroma ime ciljne in oznako elementa oziroma ime ciljne točke. Kadar je ciljni element na isti spletni strani kot točke. Kadar je ciljni element na isti spletni strani kot aktivna povezava, lahko ime ciljne strani izpustimo.aktivna povezava, lahko ime ciljne strani izpustimo.

Primeri: Primeri: <a href="#naslov">Naslov</a> <a href="test.html#oznaka">Oznaka</a>

NasvetaNasveta

Če dokument HTML vsebuje veliko Če dokument HTML vsebuje veliko hiperteksta je potrebno dodati oznake hiperteksta je potrebno dodati oznake znotraj dokumenta. Če uporabnik znotraj dokumenta. Če uporabnik klikne na povezavo na oznako, ki je klikne na povezavo na oznako, ki je npr. Petdeset odstavkov naprej, mu ne npr. Petdeset odstavkov naprej, mu ne bo potrebno izgubljati časa s pomikom bo potrebno izgubljati časa s pomikom drsnika za nekaj zaslonov naprej.drsnika za nekaj zaslonov naprej.

Odsvetujemo vam uporabo predolgih Odsvetujemo vam uporabo predolgih dokumentov, raje jih razbijte na več dokumentov, raje jih razbijte na več podstrani.podstrani.

Povezava na Povezava na elektronski naslovelektronski naslov Pogosto naletimo tudi na povezave, ki nam ob kliku nanje Pogosto naletimo tudi na povezave, ki nam ob kliku nanje

odprejo poštni program z že odprtim oknom za pošiljanje odprejo poštni program z že odprtim oknom za pošiljanje novega sporočila, kjer so nekatera polja (novega sporočila, kjer so nekatera polja (fromfrom, , toto, , subjectsubject) že izpolnjena. Tako povezavo naredimo takole: ) že izpolnjena. Tako povezavo naredimo takole:

Primera:Primera:

<a href="mailto:[email protected]?subject=Zdravo%20kako%20si%20kaj?">Pošlji pismo!</a>

<a href="mailto:[email protected]?cc=¸[email protected]&[email protected]&subject=Vabilo%20na%20zabavo&body=Povabljen%20si%20na%20zabavo,%20ki%20bo%2020.7%20v%20Samsari!">Pošlji pismo!</a>

Druge lastnosti Druge lastnosti povezavpovezav Elementu Elementu <a><a> lahko predpišemo tudi lastnost lahko predpišemo tudi lastnost targettarget. .

Z njo določimo, v katerem oknu ali okvirju naj se Z njo določimo, v katerem oknu ali okvirju naj se odpre nova stran. Vrednost te lastnosti je poljubno odpre nova stran. Vrednost te lastnosti je poljubno ime. Če okno ali okvir s tem imenom obstaja, se bo ime. Če okno ali okvir s tem imenom obstaja, se bo nova stran prikazala v njem, sicer pa v novem oknu. nova stran prikazala v njem, sicer pa v novem oknu. Kadar lastnosti Kadar lastnosti targettarget damo vrednost damo vrednost _blank_blank, se bo , se bo nova stran vedno prikazala v novem oknu. Slabost nova stran vedno prikazala v novem oknu. Slabost prikazovanja strani v poimenovanem oknu je, da se, prikazovanja strani v poimenovanem oknu je, da se, kadar okno s tem imenom že obstaja in je skrito v kadar okno s tem imenom že obstaja in je skrito v ozadju, včasih ne postavi na površje pred druga okna. ozadju, včasih ne postavi na površje pred druga okna.

Primera:Primera:Prikaži <a href="http://www.feri.uni-mb.si" target="abc">stran</a> v oknu z imenom abc.

Prikaži <a href="http://www.feri.uni-mb.si" target="_blank">stran</a> v novem oknu.

Povezava s klikom na Povezava s klikom na slikosliko

Tudi slike lahko naredimo aktivne. Dovolj je, da za Tudi slike lahko naredimo aktivne. Dovolj je, da za vsebino elementa vsebino elementa <a><a> vpišemo sliko. Slika ob tem vpišemo sliko. Slika ob tem dobi okvir, ki označuje, da je aktivna. dobi okvir, ki označuje, da je aktivna.

Primer:Primer:<a href="test.html"><img src="smesko.gif" alt="Smeško"></a>

Uporaba strežniške Uporaba strežniške aktivne mape na slikiaktivne mape na sliki

Če aktivni sliki dodamo še lastnost Če aktivni sliki dodamo še lastnost ismapismap (brez (brez vrednosti), bodo strežniku poleg zahteve po prikazu vrednosti), bodo strežniku poleg zahteve po prikazu dokumenta posredovane še koordinate točke na sliki, dokumenta posredovane še koordinate točke na sliki, kamor je uporabnik kliknil. Pri tem je točka (0,0) v kamor je uporabnik kliknil. Pri tem je točka (0,0) v levem zgornjem vogalu slike, koordinata levem zgornjem vogalu slike, koordinata xx narašča narašča proti desni, koordinata proti desni, koordinata yy pa navzdol. Če bi (v pa navzdol. Če bi (v spodnjem primeru) uporabnik kliknil na sliko v točki spodnjem primeru) uporabnik kliknil na sliko v točki (25,14), bi strežnik prejel zahtevo po prikazu (25,14), bi strežnik prejel zahtevo po prikazu dokumenta dokumenta http://www.feri.uni-mb.si?25,14?25,14 (kaj bo storil s (kaj bo storil s tema parametroma, je odvisno od njegovih tema parametroma, je odvisno od njegovih nastavitev). nastavitev).

Primer:Primer:<a href=“http://www.feri.uni-mb.si"><img src="smesko.gif" ismap alt="Smeško"></a>

Uporaba aktivne mape Uporaba aktivne mape na strani brskalnikana strani brskalnika Sliko lahko naredimo aktivno tudi tako, da bodo različna območja slike Sliko lahko naredimo aktivno tudi tako, da bodo različna območja slike

določala različne cilje. V tem primeru moramo najprej definirati, kje na določala različne cilje. V tem primeru moramo najprej definirati, kje na sliki bodo aktivna območja in kateri bodo pripadajoči cilji. To storimo s sliki bodo aktivna območja in kateri bodo pripadajoči cilji. To storimo s poimenovanim elementom poimenovanim elementom <map><map> (da se lahko skličemo nanj), ki mu za (da se lahko skličemo nanj), ki mu za vsebino z elementi vsebino z elementi <area><area> opišemo vsako območje posebej. Vsako opišemo vsako območje posebej. Vsako območje opišemo z lastnostmi: območje opišemo z lastnostmi: – Z lastnostjo Z lastnostjo shapeshape določimo obliko območja. Možne vrednosti lastnosti so določimo obliko območja. Možne vrednosti lastnosti so

defauldefaultt (cela slika), (cela slika), rectrect (pravokotnik), (pravokotnik), circlecircle (krog) in (krog) in polypoly (poligon). (poligon). – Z lastnostjo Z lastnostjo coordscoords določimo položaj in velikost območja na sliki. Število in določimo položaj in velikost območja na sliki. Število in

pomen podatkov, ki jih napišemo za vrednost te lastnosti, je odvisno od pomen podatkov, ki jih napišemo za vrednost te lastnosti, je odvisno od vrednosti lastnosti vrednosti lastnosti shapeshape. Pravokotnik opišemo s koordinatama levega . Pravokotnik opišemo s koordinatama levega zgornjega in koordinatama desnega spodnjega oglišča, krog podamo s zgornjega in koordinatama desnega spodnjega oglišča, krog podamo s koordinatama središča in polmerom, poligon pa z zaporedjem njegovih oglišč koordinatama središča in polmerom, poligon pa z zaporedjem njegovih oglišč (vsako oglišče podamo z dvema koordinatama). Podatke ločimo z vejicami. (vsako oglišče podamo z dvema koordinatama). Podatke ločimo z vejicami.

– Z lastnostjo Z lastnostjo hrefhref določimo naslov datoteke, ki se odpre, ko uporabnik klikne na določimo naslov datoteke, ki se odpre, ko uporabnik klikne na območje. območje.

– Z lastnostjo Z lastnostjo altalt na kratko opišemo, kaj območje predstavlja, oziroma kam nas na kratko opišemo, kaj območje predstavlja, oziroma kam nas bo pripeljal klik nanj. Opis se prikaže v rumenem okvirčku, ko z miško bo pripeljal klik nanj. Opis se prikaže v rumenem okvirčku, ko z miško postojimo na območju. postojimo na območju.

Primer: Primer: <map name="obmocja">

<area shape="rect" coords="8,7,77,44" href="pravokotnik.html" alt="Pravokotnik"> <area shape="circle" coords="135,45,33" href="krog.html" alt="Krog"> <area shape="poly" coords="46,62,95,13,144,62" href="trikotnik.html" alt="Trikotnik"> </map> <img src="liki.png" alt="Geometrijski liki" usemap="#obmocja">

Uporaba aktive mape Uporaba aktive mape na strani brskalnika - na strani brskalnika - primerprimer

<p> Kliknite na enega od planetov:</p> <img src ="planets.gif" width ="145" height ="126" alt="Planeti" usemap ="#planetmap" border="0"/>

<map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sonce" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Merkur" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venera" /></map>

Značke za delo s Značke za delo s hiperpovezavami in hiperpovezavami in slikamislikami<a> Povezava na zunanji

dokument ali labela znotraj dokumenta

<link>Definicija relacije med dvema povezanima dokumentoma

<img> Slika<map> Slikovna mapa<area> Področje znotraj slikovne

mape

TabeleTabele

Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev razporedimo elemente, kot so na primer besedila, slike, seznami in razporedimo elemente, kot so na primer besedila, slike, seznami in celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz posameznih celic. posameznih celic.

Tabelo opišemo z elementom Tabelo opišemo z elementom <table><table>.. Njegova vsebina se prične z Njegova vsebina se prične z morebitnim opisom morebitnim opisom <caption><caption> , ki se prikaže nad tabelo sredinsko , ki se prikaže nad tabelo sredinsko poravnan čez širino celotne tabele. Za opisom lahko z elementi poravnan čez širino celotne tabele. Za opisom lahko z elementi <<colcol >(>(column) in column) in <<colgroup>colgroup> (column group) določimo lastnosti (column group) določimo lastnosti stolpcev, na koncu pa navedemo še vsebino posameznih celic. stolpcev, na koncu pa navedemo še vsebino posameznih celic.

Za opis navadnih celic uporabljamo element Za opis navadnih celic uporabljamo element <td><td> (table data), za (table data), za opis naslovnih, ki se običajno pojavljajo v prvi vrstici ali prvem opis naslovnih, ki se običajno pojavljajo v prvi vrstici ali prvem stolpcu pa element stolpcu pa element <th><th> (table heading). Celice združujemo v (table heading). Celice združujemo v vrstice, ki jih opišemo z elementi vrstice, ki jih opišemo z elementi <tr><tr> (table row), vrstice pa v (table row), vrstice pa v skupine (glava, noge in telo), ki jih opišemo z elementi skupine (glava, noge in telo), ki jih opišemo z elementi <<theadthead>,>, <<tfoottfoot > > in in <<tbody>tbody> (v tem vrstnem redu). Glavo tabele sestavljajo (v tem vrstnem redu). Glavo tabele sestavljajo vrstice, ki se pri izpisu ponovijo na vrhu vsake strani, noge tabele pa vrstice, ki se pri izpisu ponovijo na vrhu vsake strani, noge tabele pa vrstice, ki se ponovijo na dnu vsake strani. Tabela lahko ima več vrstice, ki se ponovijo na dnu vsake strani. Tabela lahko ima več teles. Če so glava in noge prazni in je telo eno samo, nam značk za teles. Če so glava in noge prazni in je telo eno samo, nam značk za telo ni potrebno pisati (dovolj je samo opisati njegovo vsebino). telo ni potrebno pisati (dovolj je samo opisati njegovo vsebino).

Primer Primer tabeletabele

<table cellspacing="0" frame="box" rules="groups">

<caption> <i>Rezultati kolokvijev</i> </caption>

<colgroup width="100"> <col align="center"> <col span="2">

</colgroup> <colgroup span="4" width="60" align="center"></colgroup> <colgroup width="80" align="center"></colgroup> <colgroup width="80" align="center"></colgroup> <thead> <tr>

<th colspan="3"> Študent </th> <th colspan="4"> Kolokviji </th> <th rowspan="2"> Točke </th> <th rowspan="2"> Ocena </th> </tr> <tr> <th> Številka </th>

<th align="left"> Priimek </th><th align="left"> Ime </th>

<th> 1. </th><th> 2. </th><th> 3. </th><th> 4. </th>

</tr> </thead> <tfoot>

<tr> <td> </td><td> </td><td> Max. </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td> <td> 400 </td><td> <b>10</b> </td> </tr></tfoot>

<tbody> <tr> <td> 15627384 </td><td> Ojsteršek </td><td> Milan </td> <td> 56 </td><td> 73 </td><td> 49 </td><td> 82 </td> <td> 260 </td><td> <b>7</b> </td> </tr> <tr> <td> 71254262 </td><td> Bregant </td><td> Albin</td> <td> 83 </td><td> 95 </td><td> 92 </td><td> 87</td> <td> 357 </td><td> <b>9</b> </td> </tr> <tr> <td> 65376253 </td><td> Nima </td><td> Pojma </td> <td> 15 </td><td> 32 </td><td> 22 </td><td> 47 </td> <td> 116 </td><td> <b>neg.</b> </td> </tr> <tr> <td> 18464674 </td><td> Horvat</td><td> Branko </td> <td> 73 </td><td> 77 </td><td> 84 </td><td> 67 </td> <td> 301 </td><td> <b>8</b> </td> </tr> </tbody></table>

Poravnava celic tabelePoravnava celic tabele<table width="400" border="1"> <tr> <th align="left">Poraba </th> <th align="right">Januar</th> <th align="right">Februar</th> </tr> <tr> <td align="left">Oblačila</td> <td align="right">241.10</td> <td align="right">50.20</td> </tr> <tr> <td align="left">Hrana</td> <td align="right">730.40</td> <td align="right">650.00</td> </tr> <tr> <th align="left">Vsota</th> <th align="right">971,50</th> <th align="right">700,20</th> </tr></table>

Posamezni celici Posamezni celici (<td>(<td>, , <th><th> ), vrstici ( ), vrstici (<tr><tr> ), stolpcu ( ), stolpcu ( <col><col> ) ter skupini vrstic ) ter skupini vrstic (<thead>(<thead>, , <tfoot><tfoot> in in <tbody><tbody> ali stolpcev ali stolpcev ( ( <colgroup><colgroup> ) lahko določimo, kako naj bo ) lahko določimo, kako naj bo poravnana vsebina znotraj njih. Za poravnana vsebina znotraj njih. Za vodoravno poravnavo uporabimo lastnost vodoravno poravnavo uporabimo lastnost alignalign, z vrednostmi , z vrednostmi leftleft (levo), (levo), rightright (desno), (desno), centercenter (sredinsko) ali (sredinsko) ali justifyjustify (obojestransko), za navpično poravnavo pa (obojestransko), za navpično poravnavo pa lastnost lastnost valignvalign, z vrednostmi , z vrednostmi toptop (navzgor), (navzgor), bottombottom (navzdol), (navzdol), middlemiddle (sredinsko) ali (sredinsko) ali baselinebaseline (na osnovno črto). (na osnovno črto).

Širina tabele in Širina tabele in posameznih stolpcev posameznih stolpcev Širino celotne tabele nastavimo z lastnostjo Širino celotne tabele nastavimo z lastnostjo widthwidth elementa elementa

<table><table> , širino stolpcev pa z lastnostjo , širino stolpcev pa z lastnostjo widthwidth elementov elementov <col><col> (za (za posamezen stolpec) ali posamezen stolpec) ali <colgroup><colgroup> (za vse stolpce v skupini). Širine (za vse stolpce v skupini). Širine lahko nastavimo v pikslih ali procentih (dejanska širina bo v tem lahko nastavimo v pikslih ali procentih (dejanska širina bo v tem primeru odvisna od širine brskalnikovega okna). primeru odvisna od širine brskalnikovega okna).

Primer:Primer:

<table width="400" border="1" >

<tr> <td width="150"> vrstica1_celica1 </td> <td width="250"> vrstica1_celica2 </td> </tr> <tr> <td width="150"> vrstica2_celica1 </td> <td width="250"> vrstica2_celica2 </td> </tr></table>

Enote, ki se uporabljajo Enote, ki se uporabljajo za nastavljanje širine za nastavljanje širine tabel ali celic v tabelahtabel ali celic v tabelah Procenti Procenti Primer: Primer: <table width="80%" >

Piksli Piksli Primer: Primer: <table width="600" >

Poglejte si še druge možne enote, ki se uporabljajo v različnih elementih HTML na: http://www.w3schools.com/css/css_units.asp

Razmik med celicami Razmik med celicami in znotraj celice tabelein znotraj celice tabele Na širino tabele vplivajo tudi razmiki med celicami, ki Na širino tabele vplivajo tudi razmiki med celicami, ki

jih nastavimo z lastnostjo jih nastavimo z lastnostjo cellspacingcellspacing elementa elementa <table><table> (njena privzeta vrednost je 1). Z lastnostjo (njena privzeta vrednost je 1). Z lastnostjo cellpaddingcellpadding pa nastavimo, koliko prostora naj bo pa nastavimo, koliko prostora naj bo med vsebino celice in njenimi robovi.med vsebino celice in njenimi robovi.

Primer:Primer:<table border="1" cellpadding="5" cellspacing="10"> <tr> <td> vrstica1_celica1 </td> <td> vrstica1_celica2 </td> </tr> <tr> <td> vrstica2_celica1 </td> <td> vrstica2_celica2 </td> </tr></table>

Ozadje pri tabeli in Ozadje pri tabeli in celicahcelicah<h4>Ozadje pri tabeli in v celicah:</h4> <table border="1" bgcolor="yellow">  <tr> <td bgcolor="red">Prva</td>  <td>Vrsta</td> </tr> <tr> <td background="bgdesert.jpg"> Druga</td>  <td>Vrsta</td> </tr></table>

RoboviRobovi

<h4>Z robom":</h4>

<table border="6"> <caption>Moja tabela</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr></table>

<h4>Z okvirjem="nad":</h4><table frame="above"> <tr> <td>Prva</td> <td>Vrsta</td> </tr> <tr> <td>Druga</td> <td>Vrsta</td> </tr></table>

<h4>Z okvirjem="spodaj":</h4><table frame="below"> <tr> <td>Prva</td> <td>Vrsta</td> </tr> <tr> <td>Druga</td> <td>Vrsta</td> </tr></table>

Za določanje robov okoli tabele in posameznih Za določanje robov okoli tabele in posameznih celic imamo na razpolago tri lastnosti elementa celic imamo na razpolago tri lastnosti elementa <table>.<table>. Z lastnostjo Z lastnostjo borderborder nastavimo debelino nastavimo debelino zunanjega roba tabele (robovi posameznih celic zunanjega roba tabele (robovi posameznih celic imajo vedno debelino 1), z lastnostjo imajo vedno debelino 1), z lastnostjo frameframe določimo, katere dele zunanjega roba želimo imeti. določimo, katere dele zunanjega roba želimo imeti. Možne vrednosti so Možne vrednosti so voidvoid (nobenega), (nobenega), aboveabove (zgornjega), (zgornjega), belowbelow (spodnjega), (spodnjega), hsideshsides (zgornjega in spodnjega), (zgornjega in spodnjega), vsidesvsides (levega in (levega in desnega), desnega), lhslhs (levega), (levega), rhsrhs (desnega), (desnega), boxbox (vse (vse štiri) in štiri) in borderborder (vse štiri). Z lastnostjo (vse štiri). Z lastnostjo rulesrules določimo, med katerimi celicami želimo imeti določimo, med katerimi celicami želimo imeti robove, njene vrednosti pa so robove, njene vrednosti pa so nonenone (nikjer), (nikjer), groupsgroups (med skupinami), (med skupinami), rowsrows (med vrsticami), (med vrsticami), colscols (med stolpci) ali (med stolpci) ali allall (med vsemi celicami). (med vsemi celicami). V primeru, da je celica prazna, brskalnik njenih V primeru, da je celica prazna, brskalnik njenih robov ne bo narisal, če pa bi robove kljub temu robov ne bo narisal, če pa bi robove kljub temu radi imeli, moramo v celico zapisati nekaj, kar ne radi imeli, moramo v celico zapisati nekaj, kar ne bo imelo vidnega učinka (presledek ni dober, ker bo imelo vidnega učinka (presledek ni dober, ker celice s samimi presledki brskalniki obravnavajo celice s samimi presledki brskalniki obravnavajo kot prazne). Najbolje je v celico zapisati trdi kot prazne). Najbolje je v celico zapisati trdi presledek. presledek.

StolpciStolpci

Kot smo že omenili, tudi stolpce tabele Kot smo že omenili, tudi stolpce tabele združujemo v skupine. Temu je namenjen združujemo v skupine. Temu je namenjen element element <colgroup><colgroup>. Če ga ne navedemo, se . Če ga ne navedemo, se predpostavlja, da so vsi stolpci v eni sami skupini. predpostavlja, da so vsi stolpci v eni sami skupini.

Stolpce v skupini lahko naštejemo z uporabo Stolpce v skupini lahko naštejemo z uporabo elementov elementov <col><col>, ali pa samo določimo njihovo , ali pa samo določimo njihovo število z lastnostjo število z lastnostjo spanspan elementa elementa <colgroup><colgroup> . . Vse druge lastnosti tega elementa (Vse druge lastnosti tega elementa (widthwidth, , alignalign, , valignvalign) se nanašajo na posamezne stolpce ) se nanašajo na posamezne stolpce znotraj skupine. Tudi stolpcu (elementu znotraj skupine. Tudi stolpcu (elementu <col><col>) ) lahko predpišemo vse te lastnosti. Lastnost lahko predpišemo vse te lastnosti. Lastnost spanspan v tem primeru določa, koliko stolpcev ima enake v tem primeru določa, koliko stolpcev ima enake lastnosti (poleg njih so v skupini lahko še drugi lastnosti (poleg njih so v skupini lahko še drugi stolpci). stolpci).

Združevanje celicZdruževanje celic

Več sosednjih celic lahko združimo v večjo celico, pri tem pa se nova celica lahko razteza čez več vrstic ali stolpcev. Celici z lastnostjo Več sosednjih celic lahko združimo v večjo celico, pri tem pa se nova celica lahko razteza čez več vrstic ali stolpcev. Celici z lastnostjo colspancolspan določimo, čez koliko stolpev naj sega (seveda moramo v tisti vrstici ustrezno zmanjšati število celic), z lastnostjo določimo, čez koliko stolpev naj sega (seveda moramo v tisti vrstici ustrezno zmanjšati število celic), z lastnostjo rowspanrowspan pa, čez pa, čez koliko vrstic naj sega (v tem primeru moramo paziti, da v naslednjih vrsticah zmanjšamo število celic - pri naštevanju celic v vrstici koliko vrstic naj sega (v tem primeru moramo paziti, da v naslednjih vrsticah zmanjšamo število celic - pri naštevanju celic v vrstici preskočimo stolpec, ki ga zaseda celica iz prejšnje vrstice). preskočimo stolpec, ki ga zaseda celica iz prejšnje vrstice).

Primer:Primer: <table border="1" cellpadding="5" cellspacing="0">

<tr> <td colspan="2" align="center"> vrstica1_celica1 </td> </tr> <tr> <td> vrstica2_celica1 </td> <td> vrstica2_celica2 </td> </tr></table>

<br /><br />



<table border="1" cellpadding="5" cellspacing="0">

<tr> <td rowspan="2" align="center"> vrstica1_celica1 </td> <td> vrstica1_celica2 </td> </tr> <tr> <td> vrstica2_celica2 </td> </tr></table>

Primer združevanja Primer združevanja celiccelic<table border="1" cellpadding="5"> <caption> Koliko vode potrebujejo rože? </caption> <tr> <td rowspan="2" align="center"> Roža </td> <th colspan="3"> Tedenska poraba vode </th> </tr> <tr align="center" valign="baseline"> <td> <i>v sončnem<br>vremenu</i> </td> <td> <i>v oblačnem<br>vremenu</i> </td> <td> <i>pozimi</i> </td> </tr> <tr> <th align="left"> Fikus </th> <td> 1 liter </td> <td> 0.5 litra </td> <td> 0.2 - 0.5 litra </td> </tr> <tr> <th align="left"> Kaktus </th> <td> 0.2 litra </td> <td> </td> <td> do 0.05 litra </td> </tr> <tr> <th align="left"> Praprot </th> <td> 2.5 litra </td> <td> 1.5 litra </td> <td> 1.5 litra </td> </tr></table>

Gnezdenje tabelGnezdenje tabel

Vsebina celice je lahko karkoli: poljubno Vsebina celice je lahko karkoli: poljubno besedilo, slika, seznam ali pa celo druga besedilo, slika, seznam ali pa celo druga tabela. Zato tabele velikokrat nastopajo tabela. Zato tabele velikokrat nastopajo kot elementi za razporejanje drugih kot elementi za razporejanje drugih elementov (besedila, slik, tabel, elementov (besedila, slik, tabel, seznamov ...) na spletni strani. S tem pa seznamov ...) na spletni strani. S tem pa ni priporočljivo pretiravati, saj lahko koda ni priporočljivo pretiravati, saj lahko koda HTML postane zelo nepregledna (pogosto HTML postane zelo nepregledna (pogosto najdemo primere gnezdenja tabel do najdemo primere gnezdenja tabel do nivoja pet ali celo več). nivoja pet ali celo več).

Primer Primer tabeletabele

<table cellspacing="0" frame="box" rules="groups">

<caption> <i>Rezultati kolokvijev</i> </caption>

<colgroup width="100"> <col align="center"> <col span="2">

</colgroup> <colgroup span="4" width="60" align="center"></colgroup> <colgroup width="80" align="center"></colgroup> <colgroup width="80" align="center"></colgroup> <thead> <tr>

<th colspan="3"> Študent </th> <th colspan="4"> Kolokviji </th> <th rowspan="2"> Točke </th> <th rowspan="2"> Ocena </th> </tr> <tr> <th> Številka </th>

<th align="left"> Priimek </th><th align="left"> Ime </th>

<th> 1. </th><th> 2. </th><th> 3. </th><th> 4. </th>

</tr> </thead> <tfoot>

<tr> <td> </td><td> </td><td> Max. </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td> <td> 400 </td><td> <b>10</b> </td> </tr></tfoot>

<tbody> <tr> <td> 15627384 </td><td> Ojsteršek </td><td> Milan </td> <td> 56 </td><td> 73 </td><td> 49 </td><td> 82 </td> <td> 260 </td><td> <b>7</b> </td> </tr> <tr> <td> 71254262 </td><td> Bregant </td><td> Albin</td> <td> 83 </td><td> 95 </td><td> 92 </td><td> 87</td> <td> 357 </td><td> <b>9</b> </td> </tr> <tr> <td> 65376253 </td><td> Nima </td><td> Pojma </td> <td> 15 </td><td> 32 </td><td> 22 </td><td> 47 </td> <td> 116 </td><td> <b>neg.</b> </td> </tr> <tr> <td> 18464674 </td><td> Horvat</td><td> Branko </td> <td> 73 </td><td> 77 </td><td> 84 </td><td> 67 </td> <td> 301 </td><td> <b>8</b> </td> </tr> </tbody></table>

Značke za delo s Značke za delo s tabelamitabelami<table> Definira tabelo<caption> Definira napis tabele<th> Definira naslov tabele<tr> Definira vrstico tabele<td> Definira celico tabele<thead> Definira glavo tabele<tbody> Definira telo tabele<tfoot> Definira spodnji del tabele<col> Definira kolono tabele<colgroup> Definira skupino kolon tabele

Okvirji (frames)Okvirji (frames)

Z delitvijo glavnega okna na več okvirjev dosežemo prikaz več dokumentov HTML hkrati. Z delitvijo glavnega okna na več okvirjev dosežemo prikaz več dokumentov HTML hkrati. Običajno razdelimo glavno okno na tri okvirje: Običajno razdelimo glavno okno na tri okvirje:

– kazalo ob strani kazalo ob strani – naslov na vrhu naslov na vrhu – glavni dokument glavni dokument

Datoteka HTML, ki opisuje velikost in položaj okvirjev, je sestavljena iz: Datoteka HTML, ki opisuje velikost in položaj okvirjev, je sestavljena iz: – glave (element glave (element <head><head>) ) – opisa okvirjev (element opisa okvirjev (element <frameset><frameset>), ki nadomešča telo (element ), ki nadomešča telo (element <body><body> BODYBODY))

<frameset rows="..." cols="..."><frameset rows="..." cols="...">  

</frameset></frameset>

rowsrows - opisuje razdelitev na vrstice - opisuje razdelitev na vrstice colscols - opisuje razdelitev na vrstice - opisuje razdelitev na vrstice če predpišemo obe lastnosti (če predpišemo obe lastnosti (rowsrows in in colscols), dobimo mrežo okvirjev ), dobimo mrežo okvirjev

Velikost (širino stolpca, višino vrstice) določimo absolutno ali relativno. Poglejmo nekaj Velikost (širino stolpca, višino vrstice) določimo absolutno ali relativno. Poglejmo nekaj primerov: primerov:

– rows="25%,*"rows="25%,*" - dve vrstici, prva zavzame četrtino prostora, druga preostalo - dve vrstici, prva zavzame četrtino prostora, druga preostalo – cols="400,*"cols="400,*" - dva stolpca, prvi je širok 400 pikslov, drugi pa toliko, kolikor ostane - dva stolpca, prvi je širok 400 pikslov, drugi pa toliko, kolikor ostane – cols="400,*,2*"cols="400,*,2*" - trije stolpci, prvi je širok 400 pikslov, drugi in tretji si razdelita preostali prostor v - trije stolpci, prvi je širok 400 pikslov, drugi in tretji si razdelita preostali prostor v

razmerju 1:2 razmerju 1:2 – cols="400,30%,*"cols="400,30%,*" - trije stolpci, prvi 400 pikslov, drugi 30%, tretji kolikor ostane - trije stolpci, prvi 400 pikslov, drugi 30%, tretji kolikor ostane

Primer skupine Primer skupine okvirjev v treh stolpcihokvirjev v treh stolpcih<html>

<frameset cols="25%,50%,25%">

<frame src="okvir_a.htm"> <frame src="okvir_b.htm"> <frame src="okvir_c.htm">

</frameset>

</html>

Primer okvirjev v treh Primer okvirjev v treh vrsticahvrsticah<html>

<frameset rows="25%,50%,25%">

<frame src="okvir_a.htm"> <frame src="okvir_b.htm"> <frame src="okvir_c.htm">

</frameset>

</html>

Primer kombinacije Primer kombinacije okvirjev v stolpcih in okvirjev v stolpcih in vrsticahvrsticah

<frameset rows="50%,50%">

<frame src="okvir_a.htm">

<frameset cols="25%,75%"> <frame src="okvir_b.htm"> <frame src="okvir_c.htm"> </frameset>

</frameset>

Primer z okvirji, kjer se Primer z okvirji, kjer se pojavijo drsnikipojavijo drsniki<frameset rows="50%,50%">

<frame src="http://www.msn.com/">

<frameset cols="25%,75%"> <frame src="http://www.feri.uni-mb.si/podrocje.aspx"> <frame src="http://www.cs.feri.uni-mb.si/podrocje.aspx"> </frameset>

</frameset>

Opis okvirja <frame> Opis okvirja <frame>

Element Element <frame><frame> opisuje en okvir. Nima vsebine niti opisuje en okvir. Nima vsebine niti zaključne značke. Ima pa polno lastnosti, s katerimi opišemo zaključne značke. Ima pa polno lastnosti, s katerimi opišemo posamezen okvir. posamezen okvir.

namename - ime okvirja - ime okvirja srcsrc - naslov datoteke, ki se prikaže znotraj okvirja - naslov datoteke, ki se prikaže znotraj okvirja scrollingscrolling - način prikaza drsnikov ( - način prikaza drsnikov (yesyes=vedno, =vedno, nono=nikoli, =nikoli,

autoauto=kadar je to potrebno) =kadar je to potrebno) frameborderframeborder - ali ima okvir vidne robove ( - ali ima okvir vidne robove (11=da, =da, 00=ne) =ne) marginwidthmarginwidth - širina levega in desnega roba v notranjosti - širina levega in desnega roba v notranjosti

okvirja (v pikslih) okvirja (v pikslih) marginheightmarginheight - višina zgornjega in spodnjega roba v - višina zgornjega in spodnjega roba v

notranjosti okvirja (v pikslih) notranjosti okvirja (v pikslih) noresizenoresize - uporabnik ne more spremeniti velikosti okvirja - uporabnik ne more spremeniti velikosti okvirja Namesto opisa okvirja (Namesto opisa okvirja (<frame><frame> ) lahko naredimo novo ) lahko naredimo novo

delitev (delitev (<frameset><frameset> ). ).

Element Element <noframes> <noframes> <frame> <frame> <noframes><noframes>

  </noframes></noframes>

Brskalnik, ki omogoča prikaz okvirjev, bo Brskalnik, ki omogoča prikaz okvirjev, bo vsebino elementa vsebino elementa <noframes><noframes> ignoriral, tisti, ignoriral, tisti, ki ga ne omogoča, pa bo to vsebino izpisal. To ki ga ne omogoča, pa bo to vsebino izpisal. To značko uporabimo v primeru, če vsebino z značko uporabimo v primeru, če vsebino z okvirji zahteva brskalnik, ki ne prikazuje okvirji zahteva brskalnik, ki ne prikazuje okvirjev.okvirjev.

Element Element <noframes><noframes> postavimo kot vsebino postavimo kot vsebino elementa elementa <frameset><frameset> . .

Lastnost targetLastnost target

Pri uporabi okvirjev pogosto želimo, da se nam po kliku na Pri uporabi okvirjev pogosto želimo, da se nam po kliku na aktivno povezavo v enem okvirju prikaže vsebina ustreznega aktivno povezavo v enem okvirju prikaže vsebina ustreznega dokumenta v drugem. To dosežemo tako, da pri elementu dokumenta v drugem. To dosežemo tako, da pri elementu <a> z lastnostjo <a> z lastnostjo targettarget določimo, kje želimo prikazati določimo, kje želimo prikazati vsebino. Kot vrednost lastnosti vsebino. Kot vrednost lastnosti targettarget navedemo ime navedemo ime ustreznega okvirja. ustreznega okvirja.

<a href="..." target="..."> <a href="..." target="...">

Če okvir z danim imenom ne obstaja, bo vsebina strani Če okvir z danim imenom ne obstaja, bo vsebina strani prikazana v novem oknu. Kot vrednost lastnosti prikazana v novem oknu. Kot vrednost lastnosti targettarget lahko navedemo tudi katero od naslednjih vnaprej lahko navedemo tudi katero od naslednjih vnaprej definiranih vrednosti: definiranih vrednosti:

_self_self - odpre dokument v istem oknu - odpre dokument v istem oknu _parent_parent - odpre dokument v oknu, ki je oče trenutnega okna - odpre dokument v oknu, ki je oče trenutnega okna _top_top - odpre dokument v celem oknu (ne samo v okvirju) - odpre dokument v celem oknu (ne samo v okvirju) _blank_blank - odpre dokument v novem, nepoimenovanem oknu - odpre dokument v novem, nepoimenovanem oknu

Vrinjeni Vrinjeni okvir okvir (iframe)(iframe)

<html><body> <p> Nekateri stari brskalniki ne podpirajo takšnih okvirjev . </p> <iframe src="http://www.feri.uni-mb.si" height="400" width="300" align= "left"marginwidth="3" marginheight="3"></iframe> <ul> <li>Element <strong>frame</strong> opisuje en okvir. Nima vsebine niti zakljuène znacke. Ima pa polno lastnosti, s katerimi opišemo posamezen okvir.

</li> <li>name - ime okvirja </li> <li><strong>src </strong>- naslov datoteke, ki se prikaže znotraj okvirja </li> <li><strong>scrolling </strong> - nacin prikaza drsnikov (yes=vedno, no=nikoli, auto=kadar je to potrebno) </li> <li><strong>frameborder </strong>- ali ima okvir vidne robove (1=da, 0=ne) </li> <li><strong>marginwidth </strong>- širina levega in desnega roba v notranjosti okvirja (v pikslih) </li> <li><strong>marginheight </strong>- višina zgornjega in spodnjega roba v notranjosti okvirja (v pikslih)</li> <li><strong>noresize</strong> - uporabnik ne more spremeniti velikosti okvirja </li> <li>Namesto opisa okvirja (<strong>frame<strong> ) lahko naredimo novo delitev (<strong>frameset><strong>). </li> </ul> </body></html>

Značke za delo z Značke za delo z okvirjiokvirji<frame><frame> DefiniraDefinira okvirokvir<frameset><frameset> DefiniDefinirara več okvir več okvirjev jev

znotraj znotraj dokumenta HTMLdokumenta HTML

<<noframesnoframes>> DefiniraDefinira, kaj se zgodi, , kaj se zgodi, če če brskalnik ne brskalnik ne prikaže prikaže okvirjaokvirja

<<iframeiframe>> Definira vrinjeni Definira vrinjeni okvir okvir v v dokument HTMLdokument HTML

ObrazciObrazci

Obrazec v HTML opišemo z elementom Obrazec v HTML opišemo z elementom <form><form>. . Med njegove najpomembnejše lastnosti spadajo Med njegove najpomembnejše lastnosti spadajo methodmethod, ki določa način prenosa podatkov do , ki določa način prenosa podatkov do strežnika (možni vrednosti sta strežnika (možni vrednosti sta getget in in postpost), ), enctypeenctype določa način kodiranja podatkov, določa način kodiranja podatkov, actionaction pa naslov programa (spletne strani), ki pa naslov programa (spletne strani), ki bo obdelal v obrazec vnešene podatke. bo obdelal v obrazec vnešene podatke.

<form method="..." enctype="... " action="...">...</form>

Primer obrazcaPrimer obrazca

<html><body>

<form method="get" action="obdelaj.aspx"> Vnesi osebne podatke; <br /> Ime: <input type="text" name="ime"> <br />

Priimek: <input type="text" name="priimek"><br /> <input type="submit" name="poslji" value="Pošlji"><br /></form>

</body></html>

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: ime=Milan&priimek=Ojsteršek&poslji=Pošlji

Polja za vnos besedila Polja za vnos besedila in geslain gesla

Pri sestavljanju obrazca imamo na voljo različna polja, ki jih lahko uporabimo. Če želimo vrednost polja po kliku na gumb prenesti na strežnik, moramo polje poimenovati (ime določimo z lastnostjo name).

Polje za vnos kratkega besedila: to je najbolj pogosto polje v obrazcih. Namenjenu je vnosu kratkega o je najbolj pogosto polje v obrazcih. Namenjenu je vnosu kratkega (enovrstičnega) besedila. Z lastnostjo (enovrstičnega) besedila. Z lastnostjo sizesize lahko določimo širino polja v znakih, z lastnostjo lahko določimo širino polja v znakih, z lastnostjo maxlengthmaxlength pa pa omejimo število znakov, ki jih lahko vpišemo v to polje. Lastnost omejimo število znakov, ki jih lahko vpišemo v to polje. Lastnost valuevalue določa začetno vrednost polja določa začetno vrednost polja (besedilo, ki je že na začetku vpisano v to polje). (besedilo, ki je že na začetku vpisano v to polje). Sintaksa za polje za vnos kratkega besedila je naslednja: Sintaksa za polje za vnos kratkega besedila je naslednja:

<input type="text" name="..." size="..." maxlength="..." value="...">

Polje za vnos gesla: to polje je zelo podobno polju za vnos kratkega besedila, edina razlika je, da znakov, ki o polje je zelo podobno polju za vnos kratkega besedila, edina razlika je, da znakov, ki jih vnašamo, ne vidimo (namesto njih se prikazujejo zvezdice ali krogci, odvisno od operacijskega sistema). jih vnašamo, ne vidimo (namesto njih se prikazujejo zvezdice ali krogci, odvisno od operacijskega sistema). Sintaksa za polje za vnos gesla je naslednja:Sintaksa za polje za vnos gesla je naslednja:

<input type="password" name="..." size="..." maxlength="..." value="...">

Primer:

<p> Vnos kratkega besedila: <input type="text" name="besedilo" size="30" maxlength="50"

value="HTML je"></p>

<p> Vnos skritega gesla: <input type="password" name="sifra" size="20" maxlength="20“

value=""></p>

Polje za vnos daljšega Polje za vnos daljšega besedilabesedila Polje za vnos daljšega besedila: to polje

uporabljamo za vnos daljšega (večvrstičnega) besedila. Z lastnostma rows in cols določimo velikost polja (število vrstic in stolpcev v znakih). Besedilo, ki bi ga želeli imeti v polju že na začetku, vpišemo kot vsebino elementa <textarea> Sintaksa za polje za Sintaksa za polje za vnos daljšega besedila je naslednja:vnos daljšega besedila je naslednja: <textarea name="..." rows="..." cols="...">...</textarea>

Primer:Primer:<p> Vnos daljšega besedila: <textarea name="dolg_tekst" rows="10" cols="30">

Vpiši daljše besedilo - največ deset vrstic:</textarea></p>

Primer vnosa Primer vnosa uporabniškega imena in uporabniškega imena in geslagesla<html> <body>

<form method="get" action="obdelaj.aspx"> Ime: <input type="text" name="uporabnik"> <br /> Geslo: <input type="password" name="geslo">

<br /><input type="submit" name="poslji"

value="Pošlji"><br /> </form> <p>Za geslo ki ga vtipkate, brskalnik pokaže samo pikice.

</p> </body></html>

Polja za izbiro Polja za izbiro

Polja za izbiranje ene izmed več vrednosti: ppolja te vrste večkrat imenujemo tudi radijski gumbi. Uporabljamo jih, olja te vrste večkrat imenujemo tudi radijski gumbi. Uporabljamo jih, kadar moramo izbrati največ eno izmed več možnih vrednosti. Vsako polje je lahko vklopljeno ali izklopljeno, pri čemer je kadar moramo izbrati največ eno izmed več možnih vrednosti. Vsako polje je lahko vklopljeno ali izklopljeno, pri čemer je vklopljeno lahko največ eno polje v skupini. Ko vklopimo drugo polje, se izklopi tisto, ki je bilo prej vklopljeno. Vsa polja v vklopljeno lahko največ eno polje v skupini. Ko vklopimo drugo polje, se izklopi tisto, ki je bilo prej vklopljeno. Vsa polja v skupini morajo imeti enako ime. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenese vrednost vklopljenega skupini morajo imeti enako ime. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenese vrednost vklopljenega polja (vrednost, ki jo določimo z lastnostjo polja (vrednost, ki jo določimo z lastnostjo valuevalue). Z lastnostjo ). Z lastnostjo checkedchecked (ta je brez vrednosti) lahko zahtevamo, naj bo (ta je brez vrednosti) lahko zahtevamo, naj bo polje že na začetku vklopljeno. polje že na začetku vklopljeno. Sintaksa za polje za izbiranje ene od vrednosti je naslednja:Sintaksa za polje za izbiranje ene od vrednosti je naslednja:<input type=“radio" name="..." value="..." checked=“checked”>

Primer:<p> Vnesite vaš spol: <br /> <input type="radio" name="spol" value="moski" > Moški <br /> <input type="radio" name=“spol" value="zenski" checked="checked"> Ženski </p>

Polja za izbiro več vrednosti: p podobno kot pri radijskih gumbih lahko ustvarimo tudi skupino gumbov za izbiro odobno kot pri radijskih gumbih lahko ustvarimo tudi skupino gumbov za izbiro vrednosti, ki pa se med seboj ne izklapljajo. Velikokrat je v skupini samo en takšen gumb. Ko končamo z vnosom vrednosti, ki pa se med seboj ne izklapljajo. Velikokrat je v skupini samo en takšen gumb. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenesejo vrednosti vseh vklopljenih polj. podatkov v obrazec, se na strežnik prenesejo vrednosti vseh vklopljenih polj. Sintaksa za polje za izbiranje ene ali več Sintaksa za polje za izbiranje ene ali več vrednosti je naslednja:vrednosti je naslednja:

<input type="checkbox" name="..." value="..." checked=“checked”>

Primer:<p> Kakšen disk želite? <br /> 200 GB <input type="checkbox" name="trdi_disk" value="200GB" /> <br /> 400 GB <input type="checkbox" name="trdi_disk" value="400GB" /> <br /> 600 GB <input type="checkbox" name="trdi_disk" value="600GB" checked="checked"/> </p>

Polja z izbiro - Polja z izbiro - nadaljevanjenadaljevanje PPolje za izbiranje ene izmed več vrednosti iz seznamaolje za izbiranje ene izmed več vrednosti iz seznama: : ppolje te vrste olje te vrste

lahko uporabljamo namesto skupine radijskih gumbov. Polje je sestavljeno izlahko uporabljamo namesto skupine radijskih gumbov. Polje je sestavljeno iz

seznama opcij, kjer je vsaka opcija enakovredna enemu radijskemu gumbu. seznama opcij, kjer je vsaka opcija enakovredna enemu radijskemu gumbu. Vrednost, ki jo dobi strežnik, ko končamo z vnosom podatkov, določimo z Vrednost, ki jo dobi strežnik, ko končamo z vnosom podatkov, določimo z lastnostjo lastnostjo valuevalue pri vsaki opciji posebej (strežnik dobi vrednost izbrane pri vsaki opciji posebej (strežnik dobi vrednost izbrane opcije). Z lastnostjo opcije). Z lastnostjo selectedselected lahko določimo, katera opcija bo izbrana na lahko določimo, katera opcija bo izbrana na začetku. Vsebina elementa začetku. Vsebina elementa <option><option>, je besedilo, ki se prikaže v seznamu , je besedilo, ki se prikaže v seznamu možnosti. To besedilo je tudi vrednost opcije, kadar vrednosti opcije z možnosti. To besedilo je tudi vrednost opcije, kadar vrednosti opcije z lastnostjo lastnostjo valuevalue ne predpišemo. Lastnost ne predpišemo. Lastnost sizesize določa, koliko opcij želimo določa, koliko opcij želimo videti naenkrat v seznamu možnosti. Če je opcij več, se ob strani prikaže videti naenkrat v seznamu možnosti. Če je opcij več, se ob strani prikaže drsnik. drsnik. Sintaksa za polje za izbiranje ene izmed več vrednosti iz seznama je Sintaksa za polje za izbiranje ene izmed več vrednosti iz seznama je naslednja:naslednja:

<select name="..." size="..."> <option value="..." selected>...</option> ...</select>Primera:<p> Kakšen disk želite? <br /> <select name="trdi_disk"> <option value="200GB">200GB</option> <option value="400GB">400GB</option> <option value="600GB">600GB</option> </select></p>

<p> Kakšen disk želite? <br /> <select name="trdi_disk"> <option value="200GB">200GB</option> <option value="400GB"selected="selected">400GB</option> <option value="600GB">600GB</option> </select></p>

Polje za izbiranje več vrednosti iz seznama PPolje te vrste lahko uporabljamo namesto skupine gumbov za izbiro. Polje je olje te vrste lahko uporabljamo namesto skupine gumbov za izbiro. Polje je

sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu gumbu. sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu gumbu. Polje sestavimo podobno, kot polje za izbiro ene izmed več vrednosti iz Polje sestavimo podobno, kot polje za izbiro ene izmed več vrednosti iz seznama, le da dodamo lastnost seznama, le da dodamo lastnost multiplemultiple. Ko končamo z vnosom podatkov v . Ko končamo z vnosom podatkov v obrazec, se na strežnik prenesejo vrednosti vseh izbranih opcij. Več opcij obrazec, se na strežnik prenesejo vrednosti vseh izbranih opcij. Več opcij izberemo s pomočjo tipk SHIFT in CTRL. izberemo s pomočjo tipk SHIFT in CTRL. Sintaksa za polje za izbiranje več Sintaksa za polje za izbiranje več vrednosti iz seznamaje naslednja:vrednosti iz seznamaje naslednja:

<select name="..." size="..." multiple ="multiple" > <option value="..." selected>...</option> ...</select>

Primer:

<p> Kakšen disk želite? <br /> <select name="trdi_disk" multiple ="multiple" > <option value="200GB">200GB</option> <option value="400GB"selected="selected">400GB</option> <option value="600GB">600GB</option> </select></p>

Izbiranje ene vrednostiIzbiranje ene vrednosti

<html> <body>

<form method="get" action="obdelaj.aspx"> Želel bi si kupiti : <br /> Motor:<input type=“radio" name="vozilo" value="Motor" /> <br /> Avto:<input type=“radio" name="vozilo" value="Avto" /> <br /> Letalo:<input type=“radio" name="vozilo" value="Letalo" /> <br /> <input type="submit" name="poslji" value="Pošlji"><br /> </form> </body></html>

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: vozilo=Avto&&poslji=Pošlji

Izbiranje večih Izbiranje večih vrednostivrednosti<html> <body>

<form method="get" action="obdelaj.aspx"> Želel bi si kupiti : <br /> Motor:<input type="checkbox" name="vozilo" value="Motor" /> <br /> Avto:<input type="checkbox" name="vozilo" value="Avto" /> <br /> Letalo:<input type="checkbox" name="vozilo" value="Letalo" /> <br /> <input type="submit" name="poslji" value="Pošlji"><br /> </form> </body></html>

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: vozilo=Motor&vozilo=Letalo&poslji=Pošlji

Skupine izbirSkupine izbir

Opcije pri poljihOpcije pri poljih, kjer je možna izbira, kjer je možna izbira <<selectselect>> lahko razdelimo v več skupin. To storimo lahko razdelimo v več skupin. To storimo tako, da več opcij postavimo v skupino, ki jo opišemo z elementom tako, da več opcij postavimo v skupino, ki jo opišemo z elementom <<optoptggrouproup>>. Posebej . Posebej koristno je to pri dolgih seznamih opcij, kjer imamo več med seboj sorodnih opcij (te koristno je to pri dolgih seznamih opcij, kjer imamo več med seboj sorodnih opcij (te postavimo v isto skupino). Skupine ne morejo biti gnezdene (znotraj skupine ne moremo postavimo v isto skupino). Skupine ne morejo biti gnezdene (znotraj skupine ne moremo definirati podskupine). Z lastnostjo definirati podskupine). Z lastnostjo labellabel določimo besedilo, ki se bo pojavilo v seznamu določimo besedilo, ki se bo pojavilo v seznamu izbir (tega besedila ne bo možno izbrati). izbir (tega besedila ne bo možno izbrati). Primer:Primer:

<form method="get" action="obdelaj.aspx"> Želel bi si kupiti : <br /> <select name="nakup" > <optgroup label="Prevozno sredstvo"> <option value="motor">Motor</option> <option value="avto">Avto</option> <option value="jahta">Jahta</option> </optgroup> <optgroup label="Nepremičnina"> <option value="stanovanje">Stanovanje</option> <option value="hiša">Hiša</option> <option value="vikend">Vikend</option> </optgroup> </select> <input type="submit" name="poslji" value="Pošlji"><br /> </form>

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: nakup=motor&poslji=Pošlji

Gumbi, slike , datotekeGumbi, slike , datoteke

polje za izbiro datoteke: To polje uporabimo, kadar želimo omogoči prenos datoteke na strežnik. Uporabnik bo To polje uporabimo, kadar želimo omogoči prenos datoteke na strežnik. Uporabnik bo izbral datoteko na svojem računalniku, ko bo kliknil na gumb za konec vnosa, pa se bo vsebina datoteka izbral datoteko na svojem računalniku, ko bo kliknil na gumb za konec vnosa, pa se bo vsebina datoteka prenesla na strežnik. Z lastnostjo prenesla na strežnik. Z lastnostjo sizesize lahko določimo širino polja, začetne vrednosti pa iz varnostnih razlogov lahko določimo širino polja, začetne vrednosti pa iz varnostnih razlogov ne moremo določiti. Ime datoteke lahko uporabnik vpiše v polje, ali pa pritisne gumb za izbiro datoteko, ki se ne moremo določiti. Ime datoteke lahko uporabnik vpiše v polje, ali pa pritisne gumb za izbiro datoteko, ki se pojavi na desni strani polja. Kadar v obrazcu uporabimo to vrsto polja, moramo lastnost pojavi na desni strani polja. Kadar v obrazcu uporabimo to vrsto polja, moramo lastnost methodmethod v obrazcu v obrazcu nastaviti na nastaviti na postpost, lastnost , lastnost enctypeenctype pa na pa na multipart/form-datamultipart/form-data. .

<input type="file" name="..." size="...">skrito polje: Skritega polja uporabnik ne more videti, niti mu ne more spremeniti vrednosti. Polje te vrste je Skritega polja uporabnik ne more videti, niti mu ne more spremeniti vrednosti. Polje te vrste je

uporabno za nastavitev vrednosti, ki jih želimo poslati strežniku v vsakem primeru. Vrednost skritega polja uporabno za nastavitev vrednosti, ki jih želimo poslati strežniku v vsakem primeru. Vrednost skritega polja lahko spremenimo samo s pomočjo programa v enem od skriptnih jezikov, kot je JavaScript. lahko spremenimo samo s pomočjo programa v enem od skriptnih jezikov, kot je JavaScript.

<input type="hidden" name="..." value="...">slika: Sliko lahko uporabimo namesto gumba za konec vnosa. Ko uporabnik klikne na sliko, bodo podatki, vpisani v Sliko lahko uporabimo namesto gumba za konec vnosa. Ko uporabnik klikne na sliko, bodo podatki, vpisani v

obrazec, poslani na strežnik, skupaj s koordinatama, kam na sliko smo kliknili (če je slika poimenovana). obrazec, poslani na strežnik, skupaj s koordinatama, kam na sliko smo kliknili (če je slika poimenovana). <input type="image" name="..." src="..." alt="...">gumb: To je gumb brez posebne vloge. Uporabimo ga lahko, kadar želimo storiti kaj posebnega, kadar bo To je gumb brez posebne vloge. Uporabimo ga lahko, kadar želimo storiti kaj posebnega, kadar bo

uporabnik kliknil nanj. Lastnost uporabnik kliknil nanj. Lastnost valuevalue določa napis na gumbu, z lastnostjo določa napis na gumbu, z lastnostjo onClickonClick pa določimo, kaj želimo pa določimo, kaj želimo storiti ob kliku (akcijo opišemo s stavkom v programskem jeziku JavaScript). storiti ob kliku (akcijo opišemo s stavkom v programskem jeziku JavaScript).

<input type="button" value="..." onClick="..." >gumb za nastavitev začetnega stanja: Z gumbom te vrste lahko kadarkoli vzpostavimo začetno stanje vseh Z gumbom te vrste lahko kadarkoli vzpostavimo začetno stanje vseh

polj v obrazcu. Lastnost polj v obrazcu. Lastnost valuevalue določa napis na gumbu. določa napis na gumbu. <input type="reset" value="...">gumb za konec vnosa: Skoraj vsak obrazec naj bi imel gumb, s katerim lahko uporabnik zaključi vnos podatkov. Skoraj vsak obrazec naj bi imel gumb, s katerim lahko uporabnik zaključi vnos podatkov.

Ko bo kliknil nanj, se odpre naslednja spletna stran, določena z lastnostjo Ko bo kliknil nanj, se odpre naslednja spletna stran, določena z lastnostjo actionaction v obrazcu. Običajno je tam v obrazcu. Običajno je tam zapisano ime programa na strežniku, ki bo sprejel, obdelal in shranil podatke, ter sestavil odgovor. Lastnost zapisano ime programa na strežniku, ki bo sprejel, obdelal in shranil podatke, ter sestavil odgovor. Lastnost valuevalue določa napis na gumbu, če pa je gumb poimenovan, se tudi ta vrednost pošlje na strežnik. določa napis na gumbu, če pa je gumb poimenovan, se tudi ta vrednost pošlje na strežnik.

<input type="submit" name="..." value="...">

Primer: slika, Primer: slika, datoteka, gumbidatoteka, gumbi

<p>Naloži datoteko: <br /> <input type="file" name="datoteka" size="30"></p>

<p>Gumb Pošlji: <br /> <input type="button" value="Pošlji!"></p>

<p>Skrito polje: <br /> <input type="hidden" name="skrito" value="top-secret"></p>

<p>Slika: <br /> <input type="image" name="smesko" src="smesko.gif" alt="Smeško"></p>

<script type="text/javascript">function opozorilo(){alert("Ne klikat na ta gumb")}</script>

<p>Gumb <br /> <input type="button" value="Klikni" onClick="opozorilo()" ></p>

<p>Pošiljanje vsebine obrazca:<br /> <input type="submit" name="poslji" value="Pošlji"></p>

<p>Postavljanje obrazca na zaèetno vrednost<br /> <input type="reset" value="Pobriši"> </p>

GumbiGumbi

Poleg zgoraj omenjenih gumbov (polja tipa Poleg zgoraj omenjenih gumbov (polja tipa submitsubmit, , resetreset, , buttonbutton in in imageimage) lahko ) lahko uporabljamo tudi gumbe, ki jih opišemo z uporabljamo tudi gumbe, ki jih opišemo z elementom elementom <<buttonbutton>>. Vrsto gumba v tem . Vrsto gumba v tem primeru določimo z lastnostjo primeru določimo z lastnostjo typetype, ki ima , ki ima lahko eno izmed vrednosti lahko eno izmed vrednosti buttonbutton, , submitsubmit ali ali resetreset. Napis in/ali sliko na gumbu . Napis in/ali sliko na gumbu vpišemo kot vsebino elementa vpišemo kot vsebino elementa <<buttonbutton>>..

Primeri:Primeri:<button type="button"onClick="...">...</button><button type="submit">...</button><button type="reset">...</button>

Opis poljOpis polj

Medtem, ko nekaterim poljem v obrazcu lahko določimo opise (napisi na Medtem, ko nekaterim poljem v obrazcu lahko določimo opise (napisi na gumbih), drugim tega brez uporabe dodatnih elementov ne moremo. Pred gumbih), drugim tega brez uporabe dodatnih elementov ne moremo. Pred polje za vnos besedila moramo sami napisati, kaj naj uporabnik vnese, za polje za vnos besedila moramo sami napisati, kaj naj uporabnik vnese, za vsakim vsakim izbirnimizbirnim gumbom moramo sami napisati, kaj tisti gumb pomeni ... gumbom moramo sami napisati, kaj tisti gumb pomeni ... Problem je, da če uporabnik klikne na tak opis, se ne zgodi ničesar (Problem je, da če uporabnik klikne na tak opis, se ne zgodi ničesar (izbirniizbirni gumb lahko vklopimo samo, če kliknemo nanj). Težavo rešimo z uporabo gumb lahko vklopimo samo, če kliknemo nanj). Težavo rešimo z uporabo elementa elementa <<labellabel>>. Uporabimo ga lahko na dva načina. Uporabimo ga lahko na dva načina::

Primera:Primera:<label>Priimek: <input type="text" name="priimek" /></label><label for="priimek">Priimek:</label> <input type="text" name="priimek"

id="priimek" />

V prvem primeru element V prvem primeru element <<labellabel>>vsebuje opis in polje za vnos besedila. Ta vsebuje opis in polje za vnos besedila. Ta način uporabe je primeren, kadar opis in polje nastopata skupaj (vmes ni nič način uporabe je primeren, kadar opis in polje nastopata skupaj (vmes ni nič drugega). V večini primerov pa za razmeščanje opisov in polj uporabljamo drugega). V večini primerov pa za razmeščanje opisov in polj uporabljamo tabelo, tako da je med njima še kakšna značka za prehod v naslednjo celico tabelo, tako da je med njima še kakšna značka za prehod v naslednjo celico ali celo vrstico tabele. V takih primerih nam preostane samo drugi način ali celo vrstico tabele. V takih primerih nam preostane samo drugi način uporabe, kjer opis in polje definiramo vsakega posebej, povežemo pa ju tako, uporabe, kjer opis in polje definiramo vsakega posebej, povežemo pa ju tako, da polju damo neko oznako (definiramo lastnost da polju damo neko oznako (definiramo lastnost idid), v opisu pa se skličemo ), v opisu pa se skličemo nanj (definiramo lastnost nanj (definiramo lastnost forfor). ).

NasvetaNasveta

Uporabljejte element Uporabljejte element <label><label> za vsako za vsako polje obrazca, saj lahko na ta način lažje polje obrazca, saj lahko na ta način lažje razumemo kaj v obrazec vnašamo. razumemo kaj v obrazec vnašamo. Obrazec tudi lažje popravljamo. Obrazec tudi lažje popravljamo.

Če imamo obrazec več vnašalnih polj, Če imamo obrazec več vnašalnih polj, vsako polje drugače poimenujte vsako polje drugače poimenujte ((name=“... “), saj drugače spletna stran, ), saj drugače spletna stran, ki obdeluje obrazec ne bo mogla določiti ki obdeluje obrazec ne bo mogla določiti h kateremu polju spada vnesena h kateremu polju spada vnesena vrednost.vrednost.

Definiranje skupine Definiranje skupine poljpolj

Pri razmeščanju polj nam bo v pomoč element <fieldset>, s katerim definiramo skupino polj. Skupina se obnaša kot celota, tako da jo je veliko lažje prestavljati in oblikovati. Prikaže se kot pravokotnik z robom, znotraj katerega so razmeščena vse polja te skupine. Skupina ima lahko tudi naslov, ki ga določimo z elementom <legend> znotraj skupine. Naslov skupine se prikaže na zgornjem robu pravokotnika.

Primer:

<fieldset>

<legend>

Moji podatki:

</legend>

<form method="get" action="obdelaj.aspx">

Višina <input type="text" size="3">

Teža <input type="text" size="3">

</form>

</fieldset>

<p>Če se okrog polj višina in teža ni pojavil okvir, je vaš brskalnik star</p>

Pošiljanje s pomočjo Pošiljanje s pomočjo metode “post”metode “post”

<html> <body> <form action="mailto:[email protected]" method="post" enctype="text/plain">

<h3>Ta obrazec naj se pošlje Milanu Ojsteršku.</h3> Ime: <input type="text" name="ime" value="tvoje ime?" size="20"><br /> Elektronski naslov: <input type="text" name="mail"value="tvoj elektronski naslov?"

size="20"><br/> Tvoj komentar: <br/><textarea name="komentar" rows="10" cols="30"> Vpiši tvoj

komentar - največ deset vrstic:</textarea> <br/><br/> <input type="submit" value="Pošlji"><input type="reset" value="Počisti">

</form> </body></html>

Uporabljene oznake v Uporabljene oznake v obrazcihobrazcih<form><form> Definira obrazecDefinira obrazec<input><input> Definira polje vDefinira polje v obrazcuobrazcu<<textareatextarea>> Definira Definira poljepolje v katerem je v katerem je daljše daljše

besedilobesedilo <button><button> Definira gumbDefinira gumb<select><select> Definira Definira element izbirnega seznamaelement izbirnega seznama<<optgroupoptgroup>> Definira več opcijDefinira več opcij<option><option> Definira Definira opcijo v obrazcuopcijo v obrazcu<label><label> Definira označbo Definira označbo v obrazcuv obrazcu<<fieldsetfieldset>> Definira poljeDefinira polje<legend><legend> Definira napis v Definira napis v obrazcuobrazcu

Barve v dokumentih Barve v dokumentih HTMLHTML Barve lahko določimo na več načinovBarve lahko določimo na več načinov::

– Lahko jih zapišemoLahko jih zapišemo z besedo z besedo (angleška imena barv). XHTML pozna 16 (angleška imena barv). XHTML pozna 16 imen (HTML tolmači sicer podpirajo veliko več imen vendar, če želimo, da imen (HTML tolmači sicer podpirajo veliko več imen vendar, če želimo, da je dokument veljaven, lahko uporabimo le spodnjih šestnajst).je dokument veljaven, lahko uporabimo le spodnjih šestnajst). Primer: Primer: <body bgcolor="black">

– Lahko jih zapišemo kot RGB (Red Green Blue) vrednost. Oblika zapisa Lahko jih zapišemo kot RGB (Red Green Blue) vrednost. Oblika zapisa #rrggbb#rrggbb (šesnajsti (šesnajstišški zapis za posamezne barve). ki zapis za posamezne barve).

Primer:Primer:<body bgcolor="#000000">

– Uporabimo lahko tudi funkcijo Uporabimo lahko tudi funkcijo RGB(rdeča, zelena, modra)RGB(rdeča, zelena, modra) (barve (barve zapisane v desetiških vrednostih)zapisane v desetiških vrednostih). . Število vseh kombinacij (256 x 256 x Število vseh kombinacij (256 x 256 x 256) več kot 16 mio.256) več kot 16 mio.Primer:Primer:absolutne vrednosti barv: absolutne vrednosti barv: <body bgcolor="rgb(220,30,80)"> ali barve definiramo v procentih:ali barve definiramo v procentih: <body bgcolor="rgb(20%,40%,40%)">

Osnovne barve v Osnovne barve v XHTMLXHTML XHTML podpira naslednje barve:XHTML podpira naslednje barve:

Več o vseh barvah, ki jih podpira HTML, najdete na: Več o vseh barvah, ki jih podpira HTML, najdete na: http://www.w3schools.com/html/html_colornames.asphttp://www.w3schools.com/html/html_colornames.asp

Primer nijans modre Primer nijans modre barvebarve

Primer mešanja barve Primer mešanja barve (rdeča in modra)(rdeča in modra)

Več o mešanju barv najdete na http://www.w3schools.com/html/html_colorsfull.asp

Skupine HTML Skupine HTML elementovelementov Poznamo Poznamo bločnbločnee in vrstičn in vrstičnee HTML HTML elementelementee. . Bločni Bločni

elementielementi so podobni odstavkom, kar pomeni, da se njihova so podobni odstavkom, kar pomeni, da se njihova vsebina vedno prične na začetku nove vrstice in lahko vsebina vedno prične na začetku nove vrstice in lahko zasede več vrstic, medtem ko so zasede več vrstic, medtem ko so vrstični elementivrstični elementi bolj bolj podobni znakom, saj lahko nastopajo kjerkoli v vrstici. podobni znakom, saj lahko nastopajo kjerkoli v vrstici. – Bločni elementi so:Bločni elementi so:dl, ol, uldl, ol, ul, , div, p, pre, table, hr, blockquote, div, p, pre, table, hr, blockquote,

address, script, noscript form, fieldsetaddress, script, noscript form, fieldset.. – Vrstični elementi so: Vrstični elementi so: h1, h2, h3, h4, h5, h6 input, textarea, h1, h2, h3, h4, h5, h6 input, textarea,

select, button, label a, b, i, tt, span, br, big, small, sub, sup, img, select, button, label a, b, i, tt, span, br, big, small, sub, sup, img, object, em, strong, abbr, acronym, cite, code, dfn, kbd, q, samp, object, em, strong, abbr, acronym, cite, code, dfn, kbd, q, samp, var, ins, del, bdo, map, script, noscriptvar, ins, del, bdo, map, script, noscript..

Obstaja tudi nekaj elementov, ki ne pripadajo nobeni od Obstaja tudi nekaj elementov, ki ne pripadajo nobeni od naštetih skupin. To so tisti elementi, za katere je točno naštetih skupin. To so tisti elementi, za katere je točno določeno, kje lahko nastopijo. Sem spadajo korenski določeno, kje lahko nastopijo. Sem spadajo korenski element, elementi, ki lahko nastopijo samo v glavi element, elementi, ki lahko nastopijo samo v glavi dokumenta, samo v tabeli, seznamu, ... dokumenta, samo v tabeli, seznamu, ... Ti elementi so: Ti elementi so: html, head, body, title, meta, link, style, base, caption, col, html, head, body, title, meta, link, style, base, caption, col, colgroup, thead, tfoot, tbody, tr, td, th, dt, dd, li, param, colgroup, thead, tfoot, tbody, tr, td, th, dt, dd, li, param, area, option, optgroup, legendarea, option, optgroup, legend..

VečpredstavnostVečpredstavnost

Na internetu se danes pojavlja Na internetu se danes pojavlja množica različnih datotek. Nekatere množica različnih datotek. Nekatere si lahko predvajamo (zvok, video, si lahko predvajamo (zvok, video, animacija), nekatere lahko beremo animacija), nekatere lahko beremo (gola besedila (txt), hipertekst (gola besedila (txt), hipertekst (htm), strukturirana besedila (doc, (htm), strukturirana besedila (doc, pdf...)), nekatere lahko gledamo pdf...)), nekatere lahko gledamo ( slike), nekatere so interaktivne ( slike), nekatere so interaktivne (flash datoteke, java programčki).(flash datoteke, java programčki).

TIPI INFORMACIJETIPI INFORMACIJE

Cela števila - Cela števila - 105105 Realna števila - Realna števila - 105.064105.064 Znaki - a, b, cZnaki - a, b, c

Kodne tabele znakov - Kodne tabele znakov - Windows Windows 1250, UTF-8, UTF-16, ISO Latin 1, ISO 1250, UTF-8, UTF-16, ISO Latin 1, ISO Latin 2, IBM 852Latin 2, IBM 852

Nizi znakov (npr. Milan Ojsteršek)Nizi znakov (npr. Milan Ojsteršek)

Večpredstavni tipiVečpredstavni tipi

Statični večpredstavni tipi:

Besedilo

Slike

Grafika

Dinamični večpredstavni tipi

Digitalni zvok

Digitalni video

Animacija

Interaktivne vsebine

Spreminjajo se dinamično, zato morajo biti predvajani v realnem času, da je dosežen pričakovan efekt.

Podatkovna zbirkaPodatkovna zbirka

Osnovna organizacijska enota Osnovna organizacijska enota z računalnikom zapisanih z računalnikom zapisanih podatkovpodatkov

Vsaka podatkovna zbirka je Vsaka podatkovna zbirka je določena z imenom in tipom določena z imenom in tipom podatkovne zbirke (npr. podatkovne zbirke (npr. Moja_slika.jpg)Moja_slika.jpg)

Tipi podatkovnih zbirkTipi podatkovnih zbirk SSlikelike so so v gif, v gif, png, png, tiff, jpeg (jpg), bmp, pcx, tga in pbm tiff, jpeg (jpg), bmp, pcx, tga in pbm

formatu. formatu. FilmiFilmi v mpeg (mpg, mpeg, mpe), quicktime (qt, mov), v mpeg (mpg, mpeg, mpe), quicktime (qt, mov), rv, rv,

ram (realvideo), ram (realvideo), ms-video (avi) formatums-video (avi) formatu, flash (swf) , flash (swf) . . ZvočnaZvočna informacija informacija je v au, je v au, aiff, aiff, waw, mpeg2 (mp2),waw, mpeg2 (mp2),mp3, mp3, ra ra

(real audio), (real audio), sndsnd, mid, mid formatu. formatu. BesedilaBesedila soso v txt, v txt, pdf, pdf, Tex, dvi, postscript (ps, ai, eps), rtf Tex, dvi, postscript (ps, ai, eps), rtf

ali doc formatu. ali doc formatu. Stisnjene (kompresirane) pStisnjene (kompresirane) podatkovne zbirkeodatkovne zbirke so so v zip, arj, v zip, arj,

arc, tar, hqx, gz, Z, uue formatu. arc, tar, hqx, gz, Z, uue formatu. Windows media formatiWindows media formati v v asfasf (Advanced Streaming (Advanced Streaming

Format)Format), asx (meta podatki), wma, asx (meta podatki), wma (Windows Media Audio) (Windows Media Audio), , wmvwmv (Windows Media Video) (Windows Media Video), wax, wax (Windows Media Audio (Windows Media Audio RedirectorRedirector – meta podatki za wma datoteteke – meta podatki za wma datoteteke))

MIMEMIME

MIME (MIME (MMultipurpose ultipurpose IInternet nternet MMail ail EExtensions) xtensions) je standard za opis je standard za opis sporočil, ki se pošiljajo po internetu.sporočil, ki se pošiljajo po internetu.

Več informacij najdete na: Več informacij najdete na: http://www.w3schools.com/media/media_mimeref.ashttp://www.w3schools.com/media/media_mimeref.aspp

BesediloBesedilo

Strukturiran (Strukturiran (structured structured ) tekst: ) tekst: vsebuje strukturirano vsebuje strukturirano informacijo skozi vse besedilo. Večina programov za informacijo skozi vse besedilo. Večina programov za procesiranje besedil uporablja strukturirani tekst, ki omogoča procesiranje besedil uporablja strukturirani tekst, ki omogoča pravilno oblikovanje besedila, upoštevajoč uporabnikove pravilno oblikovanje besedila, upoštevajoč uporabnikove zahteve (npr. priprava strani, število stolpcev, oznake zahteve (npr. priprava strani, število stolpcev, oznake odstavkov itd.).odstavkov itd.).

Označen (Označen (marked-upmarked-up) tekst: ) tekst: besedilo v označenem besedilo v označenem dokumentu je razširjeno z ukazi, ki določajo, kako naj bo dokumentu je razširjeno z ukazi, ki določajo, kako naj bo vsebina oblikovana. Takšna oblika predstavitve združuje vsebina oblikovana. Takšna oblika predstavitve združuje vsebino, logično strukturo in strukturo za pripravo videza vsebino, logično strukturo in strukturo za pripravo videza strani. Označeno besedilo je zelo zmogljivo, a zahteva strani. Označeno besedilo je zelo zmogljivo, a zahteva izkušenega uporabnika. Najbolj znan predstavnik takih besedil izkušenega uporabnika. Najbolj znan predstavnik takih besedil je LaTeX. je LaTeX.

Hipertekst (Hipertekst (hypertext hypertext ): ): običajno besedilo je organizirano običajno besedilo je organizirano linearno, saj je namenjeno branju v določenem vrstnem redu. linearno, saj je namenjeno branju v določenem vrstnem redu. Hipertekst vsebuje točke s povezavami do drugih delov istega Hipertekst vsebuje točke s povezavami do drugih delov istega ali drugega dokumenta. Najbolj priljubljen hipertekstni jezik je ali drugega dokumenta. Najbolj priljubljen hipertekstni jezik je HTML.HTML.

Operacije nad Operacije nad besedilombesedilom

operacije urejanja (editing)operacije urejanja (editing) vključujejo brisanje, vrivanje, vključujejo brisanje, vrivanje, prepisovanje, premikanje, izbiro posameznega znaka, skupine znakov prepisovanje, premikanje, izbiro posameznega znaka, skupine znakov (niza), celotnega stavka ali odstavka. Tudi primerjava in iskanje različnih (niza), celotnega stavka ali odstavka. Tudi primerjava in iskanje različnih vzorcev znakov sta pogosti operaciji.vzorcev znakov sta pogosti operaciji.

oblikovanje (formatting) oblikovanje (formatting) omogoča npr. spreminjanje videza strani ali omogoča npr. spreminjanje videza strani ali določa, katera pisava bo uporabljena v določenem delu besedila. določa, katera pisava bo uporabljena v določenem delu besedila. Oblikovanje je lahko neinteraktivno ali interaktivno. Slednje je prijaznejše Oblikovanje je lahko neinteraktivno ali interaktivno. Slednje je prijaznejše do uporabnika in tudi bolj priljubljeno, saj tedaj uporabnik vidi na izhodni do uporabnika in tudi bolj priljubljeno, saj tedaj uporabnik vidi na izhodni napravi tisto, kar dejansko ima (WYSIWYG, “what you see is what you napravi tisto, kar dejansko ima (WYSIWYG, “what you see is what you get”).get”).

stiskanje (compression)stiskanje (compression) besedila uporabimo, kadar želimo zmanjšati besedila uporabimo, kadar želimo zmanjšati redundanco v kodiranju besedila. Najpogosteje uporabljene metode so redundanco v kodiranju besedila. Najpogosteje uporabljene metode so prilagodljivo Huffmanovo kodiranje in razni na slovarjih temelječi prilagodljivo Huffmanovo kodiranje in razni na slovarjih temelječi algoritmi (LZ87, LZW).algoritmi (LZ87, LZW).

kodiranje (encryption)kodiranje (encryption) tekstovne informacije je pomembno na mnogih tekstovne informacije je pomembno na mnogih področjih. Razviti so najrazličnejši pristopi za zavarovanje informacije.področjih. Razviti so najrazličnejši pristopi za zavarovanje informacije.

jezikovno odvisne operacije jezikovno odvisne operacije vključujejo pravopis, preverjanje slovnice vključujejo pravopis, preverjanje slovnice in statistične analize napisanega. in statistične analize napisanega.

Vključevanje tekstovnih Vključevanje tekstovnih podatkovnih zbirk v podatkovnih zbirk v dokumente HTMLdokumente HTMLV telesu dokumenta HTML: Primer:Sklic na datoteko s pdf besedilom <a href="HTML.pdf">Osnove

HTML</a>

V glavi dokumenta HTML:Primera:<link rel="StyleSheet" type="text/css" href="style.css" /> <script type="text/javascript" src="program.js"></script>

TIPI INFORMACIJE - SLIKATIPI INFORMACIJE - SLIKA

Bitna slika - vsaka točka na zaslonu predstavljena z barvo Vektorska slika (slika je predstavljena z obliko in barvo

Podatki, ki jih je treba shraniti, da lahko Podatki, ki jih je treba shraniti, da lahko sliko kasneje ponovno prikažemo, sliko kasneje ponovno prikažemo, vsebujejo:vsebujejo:

Barvni modelBarvni model: Razlikujemo med dvema pojmovanjema barve. Prvo : Razlikujemo med dvema pojmovanjema barve. Prvo temelji na teoriji človeškega zaznavanja barv, drugo pa na načinih, kako temelji na teoriji človeškega zaznavanja barv, drugo pa na načinih, kako izhodne naprave predstavijo barve. Najpogosteje uporabljeni barvni izhodne naprave predstavijo barve. Najpogosteje uporabljeni barvni modeli so RGB, HLS, CMY, YUV in CIE.modeli so RGB, HLS, CMY, YUV in CIE.

Ločljivost (resolution)Ločljivost (resolution) določa število pikslov - pik na palec (dpi) v določa število pikslov - pik na palec (dpi) v digitalni sliki. Tipični ločljivosti računalniških zaslonov sta 300 ali 600 dpi, digitalni sliki. Tipični ločljivosti računalniških zaslonov sta 300 ali 600 dpi, medtem ko boljši tiskalniki in tiskarski stroji potrebujejo do 2400 dpi.medtem ko boljši tiskalniki in tiskarski stroji potrebujejo do 2400 dpi.

Število kanalov:Število kanalov: Ta vrednost določa, koliko barvnih komponent vključuje Ta vrednost določa, koliko barvnih komponent vključuje opis barve piksla, in je odvisna od uporabljenega barvnega modela. opis barve piksla, in je odvisna od uporabljenega barvnega modela.

Barvna globina Barvna globina določa število bitov, uporabljenih za kodiranje barve določa število bitov, uporabljenih za kodiranje barve piksla. piksla. Posamezni kanal je lahko kodiran z različnim številom bitov. Posamezni kanal je lahko kodiran z različnim številom bitov. Najpogostejše vrednosti so 1, 2, 4 in 8 bitov na kanal. Na primer v modelu Najpogostejše vrednosti so 1, 2, 4 in 8 bitov na kanal. Na primer v modelu RGB je lahko rdeča (R) komponenta predstavljena s 5 biti, zelena (G) z 8 RGB je lahko rdeča (R) komponenta predstavljena s 5 biti, zelena (G) z 8 biti in modra (B) z 11 biti, kar daje skupno 24 bitov na piksel.biti in modra (B) z 11 biti, kar daje skupno 24 bitov na piksel.

Prepletanje (interlacing)Prepletanje (interlacing) določa, kako je organizirana informacija o določa, kako je organizirana informacija o barvah pikslov. Ta informacija je lahko ločena - neprepletena (npr. najprej barvah pikslov. Ta informacija je lahko ločena - neprepletena (npr. najprej rdeča komponenta za vse piksle, nato zelena in nato modra) ali mešana - rdeča komponenta za vse piksle, nato zelena in nato modra) ali mešana - prepletena. Prva možnost je primernejša za tiskanje, druga pa za prepletena. Prva možnost je primernejša za tiskanje, druga pa za prikazovanje na računalniških zaslonih.prikazovanje na računalniških zaslonih.

Operacije nad slikamiOperacije nad slikami

Urejanje. Urejanje. Osnovna operacija urejanja na slikah je spreminjanje barve Osnovna operacija urejanja na slikah je spreminjanje barve posameznega piksla. Operacije urejanja vključujejo tudi rezanje, kopiranje in posameznega piksla. Operacije urejanja vključujejo tudi rezanje, kopiranje in lepljenje skupine pikslov.lepljenje skupine pikslov.

Geometrijske transformacije. Geometrijske transformacije. Osnovni geometrijski transformaciji sta Osnovni geometrijski transformaciji sta razteg in rotacija slike. Implementirana sta lahko tudi zrcaljenje in razteg in rotacija slike. Implementirana sta lahko tudi zrcaljenje in ukrivljanje. Razteg za prevelik skalirni faktor se pri slikah z nizko ločljivostjo ukrivljanje. Razteg za prevelik skalirni faktor se pri slikah z nizko ločljivostjo odraža v zmanjšani kvaliteti.odraža v zmanjšani kvaliteti.

Filtriranje. Filtriranje. Pri filtriranju se nad vsakim pikslom slike uporabi posebna Pri filtriranju se nad vsakim pikslom slike uporabi posebna funkcija (filter). Pri tem se kot funkcijski argument uporabi trenutna barva funkcija (filter). Pri tem se kot funkcijski argument uporabi trenutna barva piksla, pogosto pa tudi barvne vrednosti sosednjih pikslov. piksla, pogosto pa tudi barvne vrednosti sosednjih pikslov. Rezultat je nova Rezultat je nova barva piksla. S filtriranjem tvorimo najrazličnejše efekte (npr. izostrenje, barva piksla. S filtriranjem tvorimo najrazličnejše efekte (npr. izostrenje, iskanje in poudarjanje robov objektov, spreminjanje barvne slike v črno iskanje in poudarjanje robov objektov, spreminjanje barvne slike v črno belo). belo).

Zlivanje (composing).Zlivanje (composing). Ta operacija zlije dve ali več slik v novo sliko. Ta operacija zlije dve ali več slik v novo sliko. Zlivanje je realizirano z uporabo Boolovih operacij.Zlivanje je realizirano z uporabo Boolovih operacij.

Pretvorba (conversion). Pretvorba (conversion). Funkcije pretvorbe vključujejo različne notranje Funkcije pretvorbe vključujejo različne notranje pretvorbe predstavitve slike, ki ne spremenijo videza slike. Tipična pretvorbe predstavitve slike, ki ne spremenijo videza slike. Tipična pretvorba je zamenjava barvnega modela. Npr. prepleteni barvni model RGB pretvorba je zamenjava barvnega modela. Npr. prepleteni barvni model RGB je primeren za računalniške zaslone, medtem ko tiskarji in boljši barvni je primeren za računalniške zaslone, medtem ko tiskarji in boljši barvni tiskalniki rajši uporabljajo neprepleteni model CMY.tiskalniki rajši uporabljajo neprepleteni model CMY.

Originalna slika Originalna slika in in zzrcaljena slikarcaljena slika

KKompresijske metode brez izgub ompresijske metode brez izgub (losless)(losless)

OOmogočajo, da je restavrirana slika enake kvalitete, kot je bil mogočajo, da je restavrirana slika enake kvalitete, kot je bil original predoriginal pred stiskanjem.stiskanjem.

Graphics Interchange Format (GIF)Graphics Interchange Format (GIF) temelji na stiskanju LZW. V tem temelji na stiskanju LZW. V tem formatu lahko shranjujemo monokromatske in barvne slike v največ 256 formatu lahko shranjujemo monokromatske in barvne slike v največ 256 različnih barvah.različnih barvah.

Tag Image File Format (TIFF)Tag Image File Format (TIFF) je bil načrtovan za izmenjavo slik med je bil načrtovan za izmenjavo slik med uporabniškimi programi in rasterskimi razbirnimi napravami. Prvotno je bil uporabniškimi programi in rasterskimi razbirnimi napravami. Prvotno je bil uporabljan za namizno založništvo, kasneje pa se je razširil v video uporabljan za namizno založništvo, kasneje pa se je razširil v video aplikacije, medicinske in satelitske posnetke in shranjevanje dokumentov. aplikacije, medicinske in satelitske posnetke in shranjevanje dokumentov. Podpira barvna modela CMY in RGB in lahko predstavlja črno bele slike, slike Podpira barvna modela CMY in RGB in lahko predstavlja črno bele slike, slike v več sivinah (do 256 vrednosti sivin) in slike v polnem naboru barv (24 v več sivinah (do 256 vrednosti sivin) in slike v polnem naboru barv (24 bitov za vsak piksel). Podprte so različne metode stiskanja, med njimi LZW, bitov za vsak piksel). Podprte so različne metode stiskanja, med njimi LZW, RLL in prilagodljivo Huffmanovo kodiranje.RLL in prilagodljivo Huffmanovo kodiranje.

Bitna mapa (BitMaP, BMP)Bitna mapa (BitMaP, BMP) je namenjena shranjevanju slikovnih podatkov je namenjena shranjevanju slikovnih podatkov v aparaturno neodvisnem formatu pod Microsoftovimi Okni. Ker uporablja le v aparaturno neodvisnem formatu pod Microsoftovimi Okni. Ker uporablja le preprosto stiskanje RLL (ali pa sploh nikakršnega stiskanja), so datoteke preprosto stiskanje RLL (ali pa sploh nikakršnega stiskanja), so datoteke ekstremno velike in niso primerne za arhiviranje podatkov. BMP lahko shrani ekstremno velike in niso primerne za arhiviranje podatkov. BMP lahko shrani po 24 bitov na piksel.po 24 bitov na piksel.

KKompresijske metode z ompresijske metode z izgubami (lossyizgubami (lossy)) DDosegajo boljšo stopnjo stiskanja z osegajo boljšo stopnjo stiskanja z

izločanjem manj pomembnih izločanjem manj pomembnih informacij. Ko sliko restavriramo, je informacij. Ko sliko restavriramo, je njena kvaliteta nižja, kot je bila pred njena kvaliteta nižja, kot je bila pred stiskanjem. Uporabnik nadzira izgubo stiskanjem. Uporabnik nadzira izgubo kvalitete in običajno išče optimum kvalitete in običajno išče optimum med kvaliteto slike in velikostjo med kvaliteto slike in velikostjo datoteke. Najpomembnejši in najbolj datoteke. Najpomembnejši in najbolj priljubljen format v tej skupini je priljubljen format v tej skupini je JPEG. JPEG.

SlikeSlike Sliko vstavimo v dokument s pomočjo elementa Sliko vstavimo v dokument s pomočjo elementa <img><img> , ki je brez vsebine, torej nima , ki je brez vsebine, torej nima

zaključne značke. Element zaključne značke. Element <img><img> je vrstični element, kar pomeni, da se slika v dokumentu je vrstični element, kar pomeni, da se slika v dokumentu obnaša kot en velik znak. Če želimo večjo sliko prikazati samostojno, jo moramo obdati z obnaša kot en velik znak. Če želimo večjo sliko prikazati samostojno, jo moramo obdati z bločnim elementom. Element bločnim elementom. Element <img><img> ima nekaj pomembnih lastnosti: ima nekaj pomembnih lastnosti:

Z lastnostjo Z lastnostjo srcsrc določimo naslov slike (ime datoteke). Če se slika nahaja v isti mapi kot določimo naslov slike (ime datoteke). Če se slika nahaja v isti mapi kot spletna stran, je za vrednost lastnosti dovolj napisati samo ime datoteke, kako se sestavi spletna stran, je za vrednost lastnosti dovolj napisati samo ime datoteke, kako se sestavi naslov datoteke, ki se nahaja kje drugje (v drugi mapi, na drugem strežniku), pa je naslov datoteke, ki se nahaja kje drugje (v drugi mapi, na drugem strežniku), pa je podrobneje opisano v poglavju o aktivnih povezavah. Slika mora biti zapisana na datoteki podrobneje opisano v poglavju o aktivnih povezavah. Slika mora biti zapisana na datoteki oblike GIF, JPG ali PNG. oblike GIF, JPG ali PNG.

Z Z lastnostma lastnostma widthwidth (širina) in (širina) in heightheight (višina) določimo velikost pravokotnega področja, (višina) določimo velikost pravokotnega področja, namenjenega prikazu slike. Če velikosti ne predpišemo, bo slika prikazana v njeni originalni namenjenega prikazu slike. Če velikosti ne predpišemo, bo slika prikazana v njeni originalni velikosti (kot je zapisano na datoteki). Če podamo samo širino ali samo višino, bo slika tako velikosti (kot je zapisano na datoteki). Če podamo samo širino ali samo višino, bo slika tako široka oziroma visoka, kot smo zahtevali, pri čemer bo razmerje med njeno širino in višino široka oziroma visoka, kot smo zahtevali, pri čemer bo razmerje med njeno širino in višino ohranjeno (slika ne bo popačena). Če pa podamo širino in višino, bo prikazana slika točno ohranjeno (slika ne bo popačena). Če pa podamo širino in višino, bo prikazana slika točno tako velika, kot smo zahtevali (pri tem se lahko slika tudi popači). Priporočljivo je, da vedno tako velika, kot smo zahtevali (pri tem se lahko slika tudi popači). Priporočljivo je, da vedno podamo obe dimenziji slike. Samo tako bo brskalnik lahko že med nalaganjem strani podamo obe dimenziji slike. Samo tako bo brskalnik lahko že med nalaganjem strani rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko. rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko.

Z lastnostjo Z lastnostjo altalt na kratko opišemo, kaj se nahaja na sliki. Opis slike se prikaže, če z miško na kratko opišemo, kaj se nahaja na sliki. Opis slike se prikaže, če z miško nekaj sekund počivamo na njej (prikaže se v rumenem okvirčku) ali pa če pregledovalnik nekaj sekund počivamo na njej (prikaže se v rumenem okvirčku) ali pa če pregledovalnik slike ne more prikazati (prikaže se namesto slike). slike ne more prikazati (prikaže se namesto slike).

Primeri:Primeri:<img src="smesko.gif" alt="Smeško originalne velikosti" />

<img src="smesko.gif" width="70" alt="Smeško širine 70" /> <img src="smesko.gif" height="200" alt="Smeško višine 200" /> <img src="smesko.gif" width="70" height="200" alt="Smeško širine 70 in višine 200" />

Digitalni zvok (digital audio)Digitalni zvok (digital audio)

Človek sliši frekvence med 20 Hz in 20 Človek sliši frekvence med 20 Hz in 20 kHz. V realnosti je zvok analogno kHz. V realnosti je zvok analogno valovanje, katerega amplituda je zvezna valovanje, katerega amplituda je zvezna časovna funkcija. Narava digitalnega časovna funkcija. Narava digitalnega signala je drugačna, saj je definiran le v signala je drugačna, saj je definiran le v določenih točkah na časovni osi, njegovo določenih točkah na časovni osi, njegovo amplitudo pa lahko merimo s končnim amplitudo pa lahko merimo s končnim naborom vrednosti. Zaradi lastnosti naborom vrednosti. Zaradi lastnosti digitalne predstavitve je treba analogni digitalne predstavitve je treba analogni signal vzorčiti. signal vzorčiti.

VVzorčenje in kvantizacija (sampling andzorčenje in kvantizacija (sampling and quantization)quantization)

VVzorčimo običajno v enakih zorčimo običajno v enakih časovnih intervalih, katerih časovnih intervalih, katerih pogostost imenujemo vzorčevalna pogostost imenujemo vzorčevalna frekvenca. frekvenca.

Osnovne lastnosti Osnovne lastnosti digitalnega zvokadigitalnega zvoka

ŠŠtevilo kanalovtevilo kanalov. Večina aplikacij potrebuje dva kanala . Večina aplikacij potrebuje dva kanala (stereo), v profesionalnih aplikacijah pa se jih uporablja tudi (stereo), v profesionalnih aplikacijah pa se jih uporablja tudi več (vse do 64). več (vse do 64).

PPrepletanjerepletanje. Kadar imamo več kanalov, so lahko vzorci za . Kadar imamo več kanalov, so lahko vzorci za vsak kanal shranjeni ločeno - neprepleteno ali pa prepleteno. vsak kanal shranjeni ločeno - neprepleteno ali pa prepleteno. V drugem primeru je sinhronizacija posameznih kanalov že V drugem primeru je sinhronizacija posameznih kanalov že

zagotovljena, prav tako pa je učinkovitejše stiskanje. zagotovljena, prav tako pa je učinkovitejše stiskanje. Vseeno pa pride do razsipavanja prostora na nosilcu (CD-Vseeno pa pride do razsipavanja prostora na nosilcu (CD-ROM), kadar niso ROM), kadar niso uporabljeni vsi kanali.uporabljeni vsi kanali.

KKodiranje. odiranje. Obstajajo različne metode za predstavitev Obstajajo različne metode za predstavitev digitalnega zvoka. Danes se najboljši rezultati dosegajo z digitalnega zvoka. Danes se najboljši rezultati dosegajo z uporabo standarda, ki ga je razvila Moving Picture Expert uporabo standarda, ki ga je razvila Moving Picture Expert Group (MPEG). Group (MPEG). Standard pokriva tako digitalni zvok kot tudi Standard pokriva tako digitalni zvok kot tudi video. MPEG uporablja štiri različne načine za predstavitev video. MPEG uporablja štiri različne načine za predstavitev zvoka: en sam kanal, dualni kanal (dva neodvisna kanala, npr. zvoka: en sam kanal, dualni kanal (dva neodvisna kanala, npr. za dva jezika), stereo (dva prepletena kanala) in sestavljeni za dva jezika), stereo (dva prepletena kanala) in sestavljeni stereo (le-ta izkorišča redundanco med levim in desnim stereo (le-ta izkorišča redundanco med levim in desnim kanalom).kanalom).

Operacije z digitalnim Operacije z digitalnim zvokomzvokom

UUrejanje. rejanje. Digitalni zvok omogoča naključni dostop do Digitalni zvok omogoča naključni dostop do shranjenih podatkov. shranjenih podatkov. Torej ni potrebe po previjanju traku Torej ni potrebe po previjanju traku do določene pozicije. Prav tako omogoča enostavno do določene pozicije. Prav tako omogoča enostavno kopiranje, brisanje in podvajanje izbranih sekvenc. kopiranje, brisanje in podvajanje izbranih sekvenc. Urejanje je varnejše kot pri analognem zvoku. Izredno Urejanje je varnejše kot pri analognem zvoku. Izredno lahko je izdelati varnostno kopijo in obdelovati dvojnike. lahko je izdelati varnostno kopijo in obdelovati dvojnike. Operacije je možno tudi preklicati (undo). Tudi določiti, Operacije je možno tudi preklicati (undo). Tudi določiti, kdaj naj se predvajanje ustavi, je lahko in nedvoumno. Ta kdaj naj se predvajanje ustavi, je lahko in nedvoumno. Ta enostavna operacija ni tako trivialna v primeru enostavna operacija ni tako trivialna v primeru analognega zvoka.analognega zvoka.

ZZvovoččni efekti. ni efekti. Z uporabo raznih filtrov lahko tvorimo Z uporabo raznih filtrov lahko tvorimo različne efekte. Tukaj naštevamo samo nekaj možnih: različne efekte. Tukaj naštevamo samo nekaj možnih: odmev (echoing), izravnavanje (equalisation), zmanjšanje odmev (echoing), izravnavanje (equalisation), zmanjšanje šuma, povečanje ali zmanjšanje hitrosti,šuma, povečanje ali zmanjšanje hitrosti, tvorba različnih tvorba različnih akustičnih okolij (acousticakustičnih okolij (acoustic environment generation). environment generation).

Midi zapis Midi zapis

VVsaka nota saka nota je zapisana je zapisana z višino, z višino, glasnostjoglasnostjo, , trajanjem trajanjem in in inštrumentoinštrumentomm

Vključitev zvoka v Vključitev zvoka v HTMLHTML<bgsound src="beatles.mid" /> - element <bgsound> podpira samo

Microsoft Internet Explorer

<img dynsrc="horse.wav" /> - lastnost dysrc podpira samo Microsoft Internet Explorer

<embed src="beatles.mid” width="50%“ height="50%"></embed> - element <embed> podpirajo trenutni brskalniki, vendar to

ni v standardu HTML 4.01 ali XHTML 1.0, zato ga ne uporabljajte. Uporabljajte raje element <object>

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="liar.wav" /> </object>

<a href="beatles.mid"> Zaigraj mi nekaj od skupine Beatles </a> - uporaba povezave

Digitalni videoDigitalni video

Tako kot analogni video (celuloidni Tako kot analogni video (celuloidni filmski trak) tudi digitalni sestoji iz filmski trak) tudi digitalni sestoji iz okvirjev - zaporedja slik. V digitalnem okvirjev - zaporedja slik. V digitalnem videu so okvirji digitalne slike. videu so okvirji digitalne slike. Prednosti digitalnega videa nasproti Prednosti digitalnega videa nasproti analognemu so očitne. Na primer: analognemu so očitne. Na primer: digitalni video ne izgublja kakovosti s digitalni video ne izgublja kakovosti s številom predvajanj, kopiranje in številom predvajanj, kopiranje in distribucija sta hitra, nudi močna distribucija sta hitra, nudi močna orodja za editiranje. orodja za editiranje.

Lastnosti digitalnega Lastnosti digitalnega videavidea Gostota okvirjev (frame rate). Gostota okvirjev (frame rate). Število okvirjev na Število okvirjev na

sekundo je ključnega pomena pri ustvarjanju občutka sekundo je ključnega pomena pri ustvarjanju občutka gibanja. Pri 25 ali več okvirjih na sekundo govorimo o gibanja. Pri 25 ali več okvirjih na sekundo govorimo o videu s popolnim vtisom gibanja (full-motion video).videu s popolnim vtisom gibanja (full-motion video).

Vzorčenje (sampling). Vzorčenje (sampling). Digitalni video lahko izdelamo Digitalni video lahko izdelamo na dva načina: z računalniškim programom (animacijo) na dva načina: z računalniškim programom (animacijo) ali z vzorčenjem analognega video signala. V drugem ali z vzorčenjem analognega video signala. V drugem primeru je treba analogni signal pretvoriti v primeru je treba analogni signal pretvoriti v digitalnega s procesom, imenovanim vzorčenje. Teorija digitalnega s procesom, imenovanim vzorčenje. Teorija vzorčenja določa spodnjo mejo frekvence vzorčenja, ki vzorčenja določa spodnjo mejo frekvence vzorčenja, ki je dvakratna najvišja frekvenca znotraj signala je dvakratna najvišja frekvenca znotraj signala (Nyquistova hitrost). Vsak vzorec je treba še (Nyquistova hitrost). Vsak vzorec je treba še kvantizirati.kvantizirati.

Lastnosti digitalnega Lastnosti digitalnega videavidea

GGostota podatkov (data rate). ostota podatkov (data rate). Glede na frekvenco vzorčenja in Glede na frekvenco vzorčenja in kvantizacijo razdelimo današnje formate digitalnega videa v dve skupini: kvantizacijo razdelimo današnje formate digitalnega videa v dve skupini: formati z visoko in formati z nizko gostoto podatkov.formati z visoko in formati z nizko gostoto podatkov. Primeri formatov iz Primeri formatov iz prve skupine so: prve skupine so:

International Consultative Committee on Broadcasting Recommendation International Consultative Committee on Broadcasting Recommendation 601 - CCIR 601601 - CCIR 601 (frekvenca vzorčenja 3.375 MHz in 8 (ali 10) (frekvenca vzorčenja 3.375 MHz in 8 (ali 10) kvantizacijskih bitov za vsako barvno komponento).kvantizacijskih bitov za vsako barvno komponento).

Digital composite videoDigital composite video (frekvenca vzorčenja za PAL = 4.43 MHz in 8 (ali (frekvenca vzorčenja za PAL = 4.43 MHz in 8 (ali 10) bitov kvantizacije).10) bitov kvantizacije).

Common Intermediate Format - CIF Common Intermediate Format - CIF (frekvenca vzorčenja je 6.75 MHz z 8-(frekvenca vzorčenja je 6.75 MHz z 8-bitno kvantizacijo).bitno kvantizacijo).

Pri formatih z visoko gostoto podatkov je treba prenašati okoli Pri formatih z visoko gostoto podatkov je treba prenašati okoli 220 0 Mbytov/sMbytov/s (HDTV) (HDTV). Tega na žalost današnja strojna oprema (mreža in . Tega na žalost današnja strojna oprema (mreža in DVD DVD enoteenote) še ne zmore, zato te formate s stiskanjem, zmanjšanjem ločljivosti ) še ne zmore, zato te formate s stiskanjem, zmanjšanjem ločljivosti in zniževanjem gostote okvirjev pretvarjamo v formate z nižjo gostoto in zniževanjem gostote okvirjev pretvarjamo v formate z nižjo gostoto podatkov . Na ta način pade zahtevana hitrost prenosa na 1 Mbit/s, kar podatkov . Na ta način pade zahtevana hitrost prenosa na 1 Mbit/s, kar zmorejo tudi današnji cenejši računalniki. zmorejo tudi današnji cenejši računalniki.

Lastnosti digitalnega Lastnosti digitalnega videavidea Stiskanje (compression).Stiskanje (compression). Za zmanjšanje ogromne Za zmanjšanje ogromne

množine zahtevanega pomnilniškega prostora množine zahtevanega pomnilniškega prostora potrebujemo zmogljivo tehniko stiskanja z visoko potrebujemo zmogljivo tehniko stiskanja z visoko stopnjo stiskanja. Za stiskanje digitalnega videa lahko stopnjo stiskanja. Za stiskanje digitalnega videa lahko uporabljamo tehnike z izgubami, saj izgubljena uporabljamo tehnike z izgubami, saj izgubljena kvaliteta posameznega okvirja pogosto ni opazna. kvaliteta posameznega okvirja pogosto ni opazna. Stopnjo stiskanja dvigujejo s tako imenovanim Stopnjo stiskanja dvigujejo s tako imenovanim stiskanjem med okvirji (interframe compression). stiskanjem med okvirji (interframe compression). Najdejo se razlike med zaporednimi slikami in potem Najdejo se razlike med zaporednimi slikami in potem stiskajo le te. Restavriranje nekompresiranega videa stiskajo le te. Restavriranje nekompresiranega videa mora biti opravljeno v realnem času. Najuspešnejši mora biti opravljeno v realnem času. Najuspešnejši standard za stiskanje digitalnega videa je MPEG, ki bo standard za stiskanje digitalnega videa je MPEG, ki bo obravnavan v naslednjem poglavju.obravnavan v naslednjem poglavju.

Operacije nad Operacije nad digitalnim videomdigitalnim videom

UUrejanje. rejanje. V digitalnem videu je omogočen enostaven V digitalnem videu je omogočen enostaven in hiter naključni dostop do posameznega okvirja. S in hiter naključni dostop do posameznega okvirja. S tem lahko zelo enostavno kopiramo, brišemo ali tem lahko zelo enostavno kopiramo, brišemo ali premikamo izbrane sekvence samo s spreminjanjem premikamo izbrane sekvence samo s spreminjanjem indeksov okvirjev. indeksov okvirjev.

TTvorba efektov.vorba efektov. V digitalnem videu lahko uporabimo V digitalnem videu lahko uporabimo veliko število različnih efektov. Mešanje dveh video veliko število različnih efektov. Mešanje dveh video sekvenc v eno je le eden izmed njih. Drugi je sekvenc v eno je le eden izmed njih. Drugi je dodajanje računalniško tvorjenih objektov in sekvenc. dodajanje računalniško tvorjenih objektov in sekvenc. Enostavno je programirati tudi efekte, ki jih poznamo Enostavno je programirati tudi efekte, ki jih poznamo že iz analognega videa, kot so rezanje, postopno že iz analognega videa, kot so rezanje, postopno prikazovanje ali izginevanje slike, zavijanje slike, prikazovanje ali izginevanje slike, zavijanje slike, prekrivanje slike z drugo.prekrivanje slike z drugo.

Posnetek urejevalnika Posnetek urejevalnika digitalnega videadigitalnega videa

AnimacijaAnimacija

Pri animaciji ne dobimo okvirjev s Pri animaciji ne dobimo okvirjev s procesom kvantizacije, ampak je procesom kvantizacije, ampak je sekvenca v celoti tvorjena s programi sekvenca v celoti tvorjena s programi računalniške grafike in animacije. Vsak računalniške grafike in animacije. Vsak objekt, predstavljen v sceni, obstaja objekt, predstavljen v sceni, obstaja samo v računalniškem pomnilniku.samo v računalniškem pomnilniku.

Sceno in objekte, ki jih animiramo, Sceno in objekte, ki jih animiramo, opišemo v geometrijskem modelirnem opišemo v geometrijskem modelirnem sistemu. sistemu.

Generiranje sekvence Generiranje sekvence okvirjevokvirjev Pristop, ki temelji na sceni (scene-based approach). Pristop, ki temelji na sceni (scene-based approach).

Animacijo tvorimo tako, da preprosto vzamemo sekvenco Animacijo tvorimo tako, da preprosto vzamemo sekvenco grafičnih modelov, ki vsak zase predstavljajo celotno sceno. grafičnih modelov, ki vsak zase predstavljajo celotno sceno. Za primer na sliki bo animacijski program opisal kost in Za primer na sliki bo animacijski program opisal kost in kroglo ločeno za vsak okvir.kroglo ločeno za vsak okvir.

Vključitev videa v Vključitev videa v HTMLHTML

<img dynsrc= "video.avi" /> - lastnost dysrc podpira samo Microsoft Internet Explorer

<embed src "video.avi" /> - element <embed> podpirajo trenutni brskalniki, vendar to ni v standardu HTML 4.01 ali XHTML 1.0, zato ga ne uporabljate. Uporabljajte raje element <object>

<object data="video.avi" type="video/avi" />

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name=“ime_datoteke" value=" video.avi " /> </object>

<a href= "video.avi" > Pokaži mi moj najljubši video </a> - uporaba povezave

Objekti v HTMLObjekti v HTML

Z elementom <object> lahko vključimo vse večpredstavne tipe datotek v HTML.

Primeri objektov:

Vključitev slike:<object height="100%" width="100%" type="image/jpeg" data="audi.jpg"> </object> Preizkusi:

Vključitev zvočne datoteke:<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name= " ime_datoteke" value="liar.wav" /> </object>Preizkusi:Preizkusi:

Vključitev hiperpovezave:Vključitev hiperpovezave:<object type="text/html" height="100%" width="100%"data="http://www.feri.uni-mb.si"></object>


Primeri:Primeri:Vključitev videa: Vključitev videa: <objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="FileName" value="3d.wmv" /></object>Preizkusi!!

Vključitev koledarja:<object width="100%" height="80%"classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02"><param name="BackColor" value="14544622"><param name="DayLength" value="1"></object>

Preizkusi:


Vključitev grafike:

<object width="200" height="200"classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"><param name="Line0001"value="setFillColor(255, 0, 255)"><param name="Line0002"value="Oval(-100, -50, 200, 100, 30)"></object>

Preizkusi:

Vključitev Flasha:<object width="400" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-

444553540000" codebase="http://download.macromedia.com /pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">

<param name="SRC" value="bookmark.swf"> </object>

Preizkusi!


Vključitev Qicktime videa:Vključitev Qicktime videa:<object width="160" height="144"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="sample.mov"><param name="autoplay" value="true"><param name="controller" value="false"><embed src="sample.mov" width="160" height="144"autoplay="true" controller="false"pluginspage="http://www.apple.com/quicktime/download/"></embed></object>

Vključitev Real video veda:<object width="320" height="240"classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"><param name="controls" value="ImageWindow" /><param name="autostart" value="true" /><param name="src" value="male.ram" /></object>

ASX (Advanced Stream ASX (Advanced Stream Redirector) Redirector) zapiszapis<ASX VERSION="3.0">

<Title>Holiday 2001</Title><Entry>

<ref href="holiday-1.avi"/></Entry><Entry>

<ref href="holiday-2.avi"/></Entry><Entry>

<ref href="holiday-2.avi"/></Entry>

</ASX>

Preberite nekaj o formatih za zapis zvokovnih informacij, formatih za zapis videa, MPEG, MPEG-7 , AVI, ASX, ASF, WMA, MP3, RealVideo, RealAudio, WMV in QuickTime

PovezavePovezave

Več o elementih HTML, ki so povezani z Več o elementih HTML, ki so povezani z večpredstavnostjo in njihovih lastnostih večpredstavnostjo in njihovih lastnostih najdete na:najdete na:– Splošno - Splošno -

http://www.w3schools.com/media/media_tagref.asphttp://www.w3schools.com/media/media_tagref.asp – QickTime - QickTime -

http://www.w3schools.com/media/media_quicktime.ahttp://www.w3schools.com/media/media_quicktime.aspsp

– RealVideo - RealVideo - http://www.w3schools.com/media/media_realvideo.ahttp://www.w3schools.com/media/media_realvideo.aspsp

– Media Player - Media Player - http://www.w3schools.com/media/media_playerref.ashttp://www.w3schools.com/media/media_playerref.aspp

XHTML (XHTML (EEXXtensible tensible HHyperyperTText ext MMarkup arkup

LLanguage anguage )) Uporabljamo ga predvsem zaradi lažje Uporabljamo ga predvsem zaradi lažje

strojne obdelave in analize hiperteksta. strojne obdelave in analize hiperteksta. Dele hiperteksta lahko vstavljamo kot Dele hiperteksta lahko vstavljamo kot atributne multimedijske podatke v atributne multimedijske podatke v podatkovno bazo.podatkovno bazo.

Iz XHTML hipertekstov lažje naredimo Iz XHTML hipertekstov lažje naredimo izvlečke in določimo pomen teksta.izvlečke in določimo pomen teksta.

Prihodnost XHTML je predvsem v Prihodnost XHTML je predvsem v povezavi s semantičnim spletom povezavi s semantičnim spletom (Sematic Web). (Sematic Web).

Specifikacije trenutne verzije XHTML 2.0 Specifikacije trenutne verzije XHTML 2.0 najdete na najdete na http://www.w3.org/TR/xhtml2/http://www.w3.org/TR/xhtml2/

XHTML (XHTML (EEXXtensibletensible H HyperTextyperText MMarkuparkup L Languageanguage ))

Uporablja samo male črke v značkah.Uporablja samo male črke v značkah.– Nepravilno: Nepravilno: <STRONG><STRONG> Odebeljeno besedilo. Odebeljeno besedilo. </STRONG></STRONG>– Pravilno: Pravilno: <strong><strong> Odebeljeno besedilo. Odebeljeno besedilo. </strong></strong> – Nepravilno:Nepravilno: <table WIDTH="100%"><table WIDTH="100%">TekstTekst</table></table>– Pravilno:Pravilno: <table width="100%" ><table width="100%" >TekstTekst</table></table>

Vsaka značka mora imeti tudi končno značko.Vsaka značka mora imeti tudi končno značko. Primer: Primer: <p><p> TTo je odstaveko je odstavek</p></p>

Vgnezdenje značk mora biti pravilno:Vgnezdenje značk mora biti pravilno:– Nepravilno: Nepravilno: <b><i><b><i>Ta tekst je poudarjen in poševenTa tekst je poudarjen in poševen</b></i></b></i> – Pravilno: Pravilno: <b><i><b><i> Ta tekst je poudarjen in poševenTa tekst je poudarjen in poševen </i></b></i></b>

XHTML - lastnostiXHTML - lastnosti

V primeru, da značka ne potrebuje V primeru, da značka ne potrebuje zaključne oznake jo moramo zapisati zaključne oznake jo moramo zapisati z / in presledkom vmes.z / in presledkom vmes.

Nepravilno: Nepravilno: <hr><hr>Pravilno Pravilno <hr /><hr /> Primeri za Primeri za <br>,<br>, <hr><hr> in in <img>:<img>: TTo je skok v novo vrstico o je skok v novo vrstico <br /><br /> Primer vnesene črte Primer vnesene črte <hr /><hr /> <img src=<img src=“vesel_obraz“vesel_obraz.gif" alt=“.gif" alt=“Jaz Jaz

sem veselsem vesel" />" />

XHTML - lastnostiXHTML - lastnosti

Lastnosti oz. vrednosti lastnosti ne smemo izpuščati.Lastnosti oz. vrednosti lastnosti ne smemo izpuščati.– Nepravilno: Nepravilno: <input checked /><input checked />– Pravilno: Pravilno: <input checked="checked" /><input checked="checked" />

XHTML dokument mora imeti zapisano deklaracijo in naslov. XHTML dokument mora imeti zapisano deklaracijo in naslov.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><html> <head><head>

<title><title> Naslov Naslov </title></title></head></head>

<body><body>To je telo XHTML.To je telo XHTML.

</body></body></html></html>

XHTML sintaksaXHTML sintaksa

Ne smemo uporabljati krajšav v HTML označbah Ne smemo uporabljati krajšav v HTML označbah compactcompact, , checkedchecked, , declare declare, , readonlyreadonly, , disableddisabled, , selectedselected, , deferdefer, , ismapismap, , nohrefnohref, , nowrap nowrap, , multiplemultiple,, noresizenoresize::

Pravilno:Pravilno: <input checked="checked" /> <input checked="checked" /> Nepravilno:Nepravilno: <input checked> <input checked> ““name” v HTML označbah <name” v HTML označbah <aa>>, , <<appletapplet>>, , <<frameframe>>, , <<iframeiframe>>, , <<imgimg> in > in

<<mapmap> zamenjamo z id:> zamenjamo z id:Pravilno:Pravilno: <img src="picture.gif" id=“<img src="picture.gif" id=“Slika 1Slika 1" />" /> ali ali <img src="picture.gif" id="picture1" name=“<img src="picture.gif" id="picture1" name=“Slika 1Slika 1" />" /> (uporabiti, če (uporabiti, če

generiramo XHTML za starejše brskalnike)generiramo XHTML za starejše brskalnike)Nepravilno: Nepravilno: <img src="picture.gif" name=“<img src="picture.gif" name=“Slika 1Slika 1" />" /> Kot prvo vrstico XHTML dokumenta dodamoKot prvo vrstico XHTML dokumenta dodamo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ali <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Struktura spletnih Struktura spletnih stranistrani

Prva Web stran

Druga Web stran

Neurejena struktura Neurejena struktura spletnih stranispletnih strani

Dobro definirana Dobro definirana struktura spletnih struktura spletnih stranistrani

Preplitva struktura Preplitva struktura spletnih stranispletnih strani

Pregloboka struktura Pregloboka struktura spletnih stranispletnih strani

Uravnovešena Uravnovešena struktura spletnih struktura spletnih

stranistrani

HTML (Hypertekst Markup Language). WWW (Word Wide Web) – svetovni splet Zbirka hipertekstovnih...

Documents

Transcript of HTML (Hypertekst Markup Language). WWW (Word Wide Web) – svetovni splet Zbirka hipertekstovnih...