HTML (Hypertekst Markup Language)

HTML (Hypertekst Markup Language)

WWW (Word Wide Web) – svetovni splet
Zbirka hipertekstovnih dokumentov, ki so med seboj povezani preko interneta.

HTML HTML (HyperText Markup Language) je jezik, s katerim opišemo gradiva, ki jih želimo objaviti na spletu. Datoteka HTML (uporabljata se končnici .htm ali .html), je običajna znakovna datoteka, kar pomeni, da jo lahko odpremo in urejamo s poljubnimi urejevalniki besedil. Obstajajo pa tudi profesionalni urejevalniki HTML dokumentov, kot sta Adobe Dreamviewer in Microsoft Frontpage.

Dodatni viri za HTML Poglejte si še dodatne vire za učenje HTML in XHTML: Standard HTML 4.01 najdete na: Standard XHTML 2.0 najdete na: Seznam HTML značk in njihovih lastnosti najdete na:

Primer preprostega HTML 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>

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

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

Značka (tag) Značka Lastnosti Elementi
Spletna stran je običajno sestavljena iz različnih vrst elementov, kot so odstavki, slike, tabele, seznami ali posebej oblikovano besedilo. 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 pričneta z znakom <, končata z znakom >, vmes pa je 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 vsako lastnost napišemo presledek, njeno ime, znak = in vrednost lastnosti. Čeprav ni obvezno, je vrednosti priporočljivo pisati v dvojnih narekovajih. Primeri: <b> Krepko </b> <a href=" <table border="1" cellspacing="0">. .. </table> Značka Lastnosti Elementi

Znač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> <td align="left">Obleke</td> <td align="right">EUR </td> <td align="right">EUR 50.20</td> <td align="left">Hrana</td> <td align="right">EUR 500</td> <td align="right">EUR 510</td> </table> 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 pričneta z znakom <, končata z znakom >, vmes pa je 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 vsako lastnost napišemo presledek, njeno ime, znak = in vrednost lastnosti. Vrednosti lastnosti je priporočljivo pisati v dvojnih narekovajih.

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

Pogoste napake HTML programerjev
Značke nimajo zaključka (npr. napisali smo <td> , nismo pa podali </td>). Komentarji nimajo zaključka, zato se vsebina ne vidi. Vrednosti lastnosti niso v dvojnih narekovajih ali pozabimo dodati začetni ali končni dvojni apostrof. Zmotimo se pri poimenovanju značke (npr. namesto <b> napišemo <n> - značko <n> brskalnik ignorira). Značke niso ustrezno vgnezdene. Nekateri brskalniki precej napak ignorirajo, zato znajo prikazati tudi slovnično nepravilno vsebino, ki pa ni ustrezne oblike.

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

Zgradba 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čb html je starš od head in body
<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 dokumenta V glavi opišemo dokument. Z značko <title> moramo določiti 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 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 skupine, obliko posameznih elementov, vključimo lahko pomožne datoteke ... Kar napišemo v glavi, v oknu brskalnika ni vidno. Do teh podatkov pridemo, če to posebej zahtevamo (na primer z ukazom Tools, Page Info v brskalniku Mozilla Firefox). 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= <meta http-equiv="Robots" content="noindex" /> <meta http-equiv="Content-Language" content="en" /> <base href=" /> <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 dokumenta – nadaljevanje
Z oznako <title> določimo naslov HTML dokumenta, ki se prikaže v naslovni 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= - po 5 sekundah se izvede preusmeritev na url naslov <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 dokumenta - nadaljevanje
<base href=" /> 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)

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

Označbe glave <head> Glava HTML dokumenta
<title> Naslov dokumenta <meta> Meta podatki <base> Definira začetni URL sklicevanih dokumentov <basefont> Definira osnovni tip, barvo in velikost pisave dokumenta <script> Del dokumenta, ki vsebuje skript (Javascript, VBScript) <noscript> Del v katerem v katerem ni skript <style> Definira CSS stil

Telo HTML dokumenta V telesu napišemo vse, kar želimo, da brskalnik prikaže v svojem oknu. Običajno tu opišemo besedilo, slike, tabele, sezname in druge elemente, ki sestavljajo spletno stran. 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 primera v brskalniku

Posebni znaki Nekateri znaki v HTML imajo poseben pomen. Ti znaki so < (manjši), > (večji), " (dvojni narekovaj) in & (in). Primer: Znak “<“ zapišemo z < Znak “>” zapišemo z > Če hočemo v HTML zapisati “a>b”, to zapišemo z: a > b. Če jih želimo uporabiti v besedilu, moramo uporabiti njihova imena, določena s standardom SGML. Podrobnejši zapis znakov je podan na: Tudi ASCII znake lahko zapišemo s pomočjo posebnega zapisa v HTML. Podrobnejši opis je podan na:

Fizično oblikovanje besedila
Pri fizičnem oblikovanju besedila natančno določimo, kako želimo, da bo prikazan del besedila. Z uporabo elementa b (bold) bo besedilo izpisano krepko, z elementom i (italic) nagnjeno, če uporabimo element tt (teletype), bo besedilo izgledalo, kot bi bilo napisano na pisalni stroj. Z elementoma big in small lahko besedilo izpišemo večje ali manjše. 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 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, 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 oblikovanju besedila, so različne vrste naslovov (elementi h1, h2, h3, h4, h5 in h6), odstavek (element p) in besedilo s predpisanimi prelomi vrstic (element pre). Od vrstičnih elementov omenimo indeks (element sub) in eksponent (element sup), obstaja pa še precej drugih, ki jih redkeje uporabljamo (na primer elementi em, strong, code, cite address...). 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č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 besedila
<b> Poudarjen tekst <i> Poševen tekst <u> Podčrtan tekst <center> Centriran tekst <p align=“center”> <em> Poudarjen tekst <big> Povečane črke <strong> Poudarjen tekst <small> Pomanjšane črke <sup> Nadpisan tekst <sub> Podpisan tekst <bdo> Krmiljenje izpisa črk od desne proti levi ali obratno <code> Računalniški kodni tekst <tt> tekst kot na pisalnem stroju <kbd> Tekst kot na tipkovnici <var> Spremenljivka <dfn> Definicija <samp> Vzorec <xmp> Neprelomljen <acronym> Akronim <abbr> Okrajšava <address> Naslov <blockquote> Citat <q> Kratka okrajšava <cite> Citat <ins> Dodam tekst <del> Prečrtan tekst <s> Prečrtan tekst <strike> Prečrtan tekst <font> Velikost, tip in barva pisave

Značke, ki se ne 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

Primeri <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 lepe Ljubljanke slovele a lepše od Urške blo ni nobene </cite>

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

Naštevanje- neštevilčni seznami
Za naštevanje uporabimo element <ul> (unordered list), znotraj katerega naštejemo elemente <li> (list item), ki predstavljajo posamezne točke seznama. 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 neš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>Limone</li> <h4>S kvadratki:</h4> <ul type="square">

Številčni seznami Za številčenje uporabimo element <ol> (ordered list), znotraj katerega naštejemo elemente <li> (list item), ki predstavljajo posamezne točke seznama. 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 š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">

Primeri različnih š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">

Opisni seznami Uporabimo element <dl> (definition list), znotraj katerega naštejemo elemente <dt> (definition term) in <dd> (definition description). Prvi predstavljajo pojme, ki jih opisujemo, drugi pa njihove opise. 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 seznamov 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 obratnem vrstnem redu, kot jih odpiramo. 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> <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> <dt> <b> Opombe: </b> </dt> <dd> Recept lahko izboljšaš tako, da dodaš rozine. </dd> </dl>

Značke za delo s seznami
<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

Slike Sliko vstavimo v dokument s pomočjo elementa <img> , ki je brez vsebine, torej nima zaključne značke. Element IMG 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 bločnim elementom. Element <img> ima nekaj pomembnih lastnosti: Z lastnostjo src 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 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 oblike GIF, JPG ali PNG. Z lastnostma width (širina) in height (višina) določimo velikost pravokotnega področja, 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 š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 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 rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko. Z lastnostjo alt 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 slike ne more prikazati (prikaže se namesto slike). 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 besedilom
Za zlivanje slike z besedilom uporabimo lastnost align z vrednostmi left (levo), right (desno), top (navzgor), bottom (navzdol) ali middle (sredinsko). Za določanje praznih pikslov med sliko in besedilom pa uporabimo lastnosti hspace ( število praznih pikslov levo in desno od slike) in vspace (število praznih mest nad in pod sliko).

Primer zlivanja slike z besedilom
<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>

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

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

Povezave 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 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 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 aktivno z uporabo elementa <a> . Z lastnostjo href mu določimo ime ciljne datoteke, ki naj se odpre, ko uporabnik klikne na povezavo. 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=" korenski mapi</a> strežnika. Datoteka <a href=" podmapi</a> strežnika. Privzeta datoteka <a href=" korenski mapi</a> strežnika. Privzeta datoteka <a href=" podmapi</a> strežnika.

Oznake znotraj dokumenta
Skličemo se lahko tudi na določen element na neki spletni strani. Ta element seveda najprej primerno označimo. To storimo tako, da mu predpišemo lastnost id (lahko jo predpišemo kateremu koli elementu), katere vrednost je poljubno ime, ki si ga izmislimo, ali pa ciljno točko določimo s poimenovanim elementom <a> (določimo mu lastnost name). Primeri: <h1 id="naslov">Naslov</h1> <a name="oznaka"></a> Na pravilno označen element ali poimenovano točko se potem skličemo tako, da naslovu spletne strani na koncu dodamo znak # in oznako elementa oziroma ime ciljne točke. Kadar je ciljni element na isti spletni strani kot aktivna povezava, lahko ime ciljne strani izpustimo. <a href="#naslov">Naslov</a> <a href="test.html#oznaka">Oznaka</a>

Nasveta Če dokument HTML vsebuje veliko hiperteksta je potrebno dodati oznake znotraj dokumenta. Če uporabnik klikne na povezavo na oznako, ki je npr. Petdeset odstavkov naprej, mu ne bo potrebno izgubljati časa s pomikom drsnika za nekaj zaslonov naprej. Odsvetujemo vam uporabo predolgih dokumentov, raje jih razbijte na več podstrani.

Povezava na elektronski naslov
Pogosto naletimo tudi na povezave, ki nam ob kliku nanje odprejo poštni program z že odprtim oknom za pošiljanje novega sporočila, kjer so nekatera polja (from, to, subject) že izpolnjena. Tako povezavo naredimo takole: Primera: <a pismo!</a> <a pismo!</a>

Druge lastnosti povezav
Elementu <a> lahko predpišemo tudi lastnost target. Z njo določimo, v katerem oknu ali okvirju naj se odpre nova stran. Vrednost te lastnosti je poljubno ime. Če okno ali okvir s tem imenom obstaja, se bo nova stran prikazala v njem, sicer pa v novem oknu. Kadar lastnosti target damo vrednost _blank, se bo nova stran vedno prikazala v novem oknu. Slabost prikazovanja strani v poimenovanem oknu je, da se, kadar okno s tem imenom že obstaja in je skrito v ozadju, včasih ne postavi na površje pred druga okna. Primera: Prikaži <a href=" target="abc">stran</a> v oknu z imenom abc. Prikaži <a href=" target="_blank">stran</a> v novem oknu.

Povezava s klikom na sliko
Tudi slike lahko naredimo aktivne. Dovolj je, da za vsebino elementa <a> vpišemo sliko. Slika ob tem dobi okvir, ki označuje, da je aktivna. Primer: <a href="test.html"><img src="smesko.gif" alt="Smeško"></a>

Uporaba strežniške aktivne mape na sliki
Če aktivni sliki dodamo še lastnost ismap (brez vrednosti), bodo strežniku poleg zahteve po prikazu dokumenta posredovane še koordinate točke na sliki, kamor je uporabnik kliknil. Pri tem je točka (0,0) v levem zgornjem vogalu slike, koordinata x narašča proti desni, koordinata y pa navzdol. Če bi (v spodnjem primeru) uporabnik kliknil na sliko v točki (25,14), bi strežnik prejel zahtevo po prikazu dokumenta (kaj bo storil s tema parametroma, je odvisno od njegovih nastavitev). Primer: <a href=“ <img src="smesko.gif" ismap alt="Smeško"></a>

Uporaba aktivne mape na strani brskalnika
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 sliki bodo aktivna območja in kateri bodo pripadajoči cilji. To storimo s poimenovanim elementom <map> (da se lahko skličemo nanj), ki mu za vsebino z elementi <area> opišemo vsako območje posebej. Vsako območje opišemo z lastnostmi: Z lastnostjo shape določimo obliko območja. Možne vrednosti lastnosti so default (cela slika), rect (pravokotnik), circle (krog) in poly (poligon). Z lastnostjo coords 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 vrednosti lastnosti shape. Pravokotnik opišemo s koordinatama levega zgornjega in koordinatama desnega spodnjega oglišča, krog podamo s koordinatama središča in polmerom, poligon pa z zaporedjem njegovih oglišč (vsako oglišče podamo z dvema koordinatama). Podatke ločimo z vejicami. Z lastnostjo href določimo naslov datoteke, ki se odpre, ko uporabnik klikne na območje. Z lastnostjo alt 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 postojimo na območju. 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 na strani brskalnika - primer
<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 hiperpovezavami in slikami
<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

Tabele Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev razporedimo elemente, kot so na primer besedila, slike, seznami in celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz posameznih celic. Tabelo opišemo z elementom <table>. Njegova vsebina se prične z morebitnim opisom <caption> , ki se prikaže nad tabelo sredinsko poravnan čez širino celotne tabele. Za opisom lahko z elementi <col >(column) in <colgroup> (column group) določimo lastnosti stolpcev, na koncu pa navedemo še vsebino posameznih celic. Za opis navadnih celic uporabljamo element <td> (table data), za opis naslovnih, ki se običajno pojavljajo v prvi vrstici ali prvem stolpcu pa element <th> (table heading). Celice združujemo v vrstice, ki jih opišemo z elementi <tr> (table row), vrstice pa v skupine (glava, noge in telo), ki jih opišemo z elementi <thead>, <tfoot > in <tbody> (v tem vrstnem redu). Glavo tabele sestavljajo 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č 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).

Primer tabele <tbody> <tr>
<td> </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> <td> </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> <td> </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> <td> </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> </tbody> </table> <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> <thead> <tr> <th colspan="3"> Študent </th> <th colspan="4"> Kolokviji </th> <th rowspan="2"> Točke </th> <th rowspan="2"> Ocena </th> </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> </thead> <tfoot> <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> </tfoot>

Poravnava celic tabele
Posamezni celici (<td>, <th> ), vrstici (<tr> ), stolpcu ( <col> ) ter skupini vrstic (<thead>, <tfoot> in <tbody> ali stolpcev ( <colgroup> ) lahko določimo, kako naj bo poravnana vsebina znotraj njih. Za vodoravno poravnavo uporabimo lastnost align, z vrednostmi left (levo), right (desno), center (sredinsko) ali justify (obojestransko), za navpično poravnavo pa lastnost valign, z vrednostmi top (navzgor), bottom (navzdol), middle (sredinsko) ali baseline (na osnovno črto). <table width="400" border="1"> <tr> <th align="left">Poraba </th> <th align="right">Januar</th> <th align="right">Februar</th> </tr> <td align="left">Oblačila</td> <td align="right">241.10</td> <td align="right">50.20</td> <td align="left">Hrana</td> <td align="right">730.40</td> <td align="right">650.00</td> <th align="left">Vsota</th> <th align="right">971,50</th> <th align="right">700,20</th> </table>

Širina tabele in posameznih stolpcev
Širino celotne tabele nastavimo z lastnostjo width elementa <table> , širino stolpcev pa z lastnostjo width elementov <col> (za posamezen stolpec) ali <colgroup> (za vse stolpce v skupini). Širine lahko nastavimo v pikslih ali procentih (dejanska širina bo v tem primeru odvisna od širine brskalnikovega okna). Primer: <table width="400" border="1" > <tr> <td width="150"> vrstica1_celica1 </td> <td width="250"> vrstica1_celica2 </td> </tr> <td width="150"> vrstica2_celica1 </td> <td width="250"> vrstica2_celica2 </td> </table>

Enote, ki se uporabljajo za nastavljanje širine tabel ali celic v tabelah
Procenti Primer: <table width="80%" > Piksli Primer: <table width="600" > Poglejte si še druge možne enote, ki se uporabljajo v različnih elementih HTML na:

Razmik med celicami in znotraj celice tabele
Na širino tabele vplivajo tudi razmiki med celicami, ki jih nastavimo z lastnostjo cellspacing elementa <table> (njena privzeta vrednost je 1). Z lastnostjo cellpadding pa nastavimo, koliko prostora naj bo med vsebino celice in njenimi robovi. Primer: <table border="1" cellpadding="5" cellspacing="10"> <tr> <td> vrstica1_celica1 </td> <td> vrstica1_celica2 </td> </tr> <td> vrstica2_celica1 </td> <td> vrstica2_celica2 </td> </table>

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

Robovi <h4>Z robom":</h4> <table border="6"> <caption>Moja tabela</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <td>400</td> <td>500</td> <td>600</td> </table> <h4>Z okvirjem="nad":</h4> <table frame="above"> <td>Prva</td> <td>Vrsta</td> <td>Druga</td> <h4>Z okvirjem="spodaj":</h4> <table frame="below"> Za določanje robov okoli tabele in posameznih celic imamo na razpolago tri lastnosti elementa <table>. Z lastnostjo border nastavimo debelino zunanjega roba tabele (robovi posameznih celic imajo vedno debelino 1), z lastnostjo frame določimo, katere dele zunanjega roba želimo imeti. Možne vrednosti so void (nobenega), above (zgornjega), below (spodnjega), hsides (zgornjega in spodnjega), vsides (levega in desnega), lhs (levega), rhs (desnega), box (vse štiri) in border (vse štiri). Z lastnostjo rules določimo, med katerimi celicami želimo imeti robove, njene vrednosti pa so none (nikjer), groups (med skupinami), rows (med vrsticami), cols (med stolpci) ali all (med vsemi celicami). V primeru, da je celica prazna, brskalnik njenih robov ne bo narisal, če pa bi robove kljub temu radi imeli, moramo v celico zapisati nekaj, kar ne bo imelo vidnega učinka (presledek ni dober, ker celice s samimi presledki brskalniki obravnavajo kot prazne). Najbolje je v celico zapisati trdi presledek.

Stolpci Kot smo že omenili, tudi stolpce tabele združujemo v skupine. Temu je namenjen element <colgroup>. Če ga ne navedemo, se predpostavlja, da so vsi stolpci v eni sami skupini. Stolpce v skupini lahko naštejemo z uporabo elementov <col>, ali pa samo določimo njihovo število z lastnostjo span elementa <colgroup> . Vse druge lastnosti tega elementa (width, align, valign) se nanašajo na posamezne stolpce znotraj skupine. Tudi stolpcu (elementu <col>) lahko predpišemo vse te lastnosti. Lastnost span v tem primeru določa, koliko stolpcev ima enake lastnosti (poleg njih so v skupini lahko še drugi stolpci).

Združ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 colspan določimo, čez koliko stolpev naj sega (seveda moramo v tisti vrstici ustrezno zmanjšati število celic), z lastnostjo rowspan 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 preskočimo stolpec, ki ga zaseda celica iz prejšnje vrstice). Primer:  <table border="1" cellpadding="5" cellspacing="0"> <tr> <td colspan="2" align="center"> vrstica1_celica1 </td> </tr> <td> vrstica2_celica1 </td> <td> vrstica2_celica2 </td> </table> <br /> <td rowspan="2" align="center"> vrstica1_celica1 </td> <td> vrstica1_celica2 </td>

Primer združevanja celic
<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> <th align="left"> Fikus </th> <td> 1 liter </td> <td> 0.5 litra </td> <td> litra </td> <th align="left"> Kaktus </th> <td> 0.2 litra </td> <td> </td> <td> do 0.05 litra </td> <th align="left"> Praprot </th> <td> 2.5 litra </td> <td> 1.5 litra </td> </table>

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

Primer tabele <tbody> <tr>
<td> </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> <td> </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> <td> </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> <td> </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> </tbody> </table> <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> <thead> <tr> <th colspan="3"> Študent </th> <th colspan="4"> Kolokviji </th> <th rowspan="2"> Točke </th> <th rowspan="2"> Ocena </th> </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> </thead> <tfoot> <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> </tfoot>

Značke za delo s tabelami
<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) Z delitvijo glavnega okna na več okvirjev dosežemo prikaz več dokumentov HTML hkrati. Običajno razdelimo glavno okno na tri okvirje: kazalo ob strani naslov na vrhu glavni dokument Datoteka HTML, ki opisuje velikost in položaj okvirjev, je sestavljena iz: glave (element <head>) opisa okvirjev (element <frameset>), ki nadomešča telo (element <body> BODY) <frameset rows="..." cols="...">  </frameset> rows - opisuje razdelitev na vrstice cols - opisuje razdelitev na vrstice če predpišemo obe lastnosti (rows in cols), dobimo mrežo okvirjev Velikost (širino stolpca, višino vrstice) določimo absolutno ali relativno. Poglejmo nekaj primerov: rows="25%,*" - dve vrstici, prva zavzame četrtino prostora, druga preostalo cols="400,*" - dva stolpca, prvi je širok 400 pikslov, drugi pa toliko, kolikor ostane cols="400,*,2*" - trije stolpci, prvi je širok 400 pikslov, drugi in tretji si razdelita preostali prostor v razmerju 1:2 cols="400,30%,*" - trije stolpci, prvi 400 pikslov, drugi 30%, tretji kolikor ostane

Primer skupine okvirjev 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 vrsticah
<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 okvirjev v stolpcih in vrsticah
<frameset rows="50%,50%"> <frame src="okvir_a.htm"> <frameset cols="25%,75%"> <frame src="okvir_b.htm"> <frame src="okvir_c.htm"> </frameset>

Primer z okvirji, kjer se pojavijo drsniki
<frameset rows="50%,50%"> <frame src=" <frameset cols="25%,75%"> <frame src=" <frame src=" </frameset>

Opis okvirja <frame>
Element <frame> opisuje en okvir. Nima vsebine niti zaključne značke. Ima pa polno lastnosti, s katerimi opišemo posamezen okvir. name - ime okvirja src - naslov datoteke, ki se prikaže znotraj okvirja scrolling - način prikaza drsnikov (yes=vedno, no=nikoli, auto=kadar je to potrebno) frameborder - ali ima okvir vidne robove (1=da, 0=ne) marginwidth - širina levega in desnega roba v notranjosti okvirja (v pikslih) marginheight - višina zgornjega in spodnjega roba v notranjosti okvirja (v pikslih) noresize - uporabnik ne more spremeniti velikosti okvirja Namesto opisa okvirja (<frame> ) lahko naredimo novo delitev (<frameset> ).

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

Lastnost target Pri uporabi okvirjev pogosto želimo, da se nam po kliku na aktivno povezavo v enem okvirju prikaže vsebina ustreznega dokumenta v drugem. To dosežemo tako, da pri elementu <a> z lastnostjo target določimo, kje želimo prikazati vsebino. Kot vrednost lastnosti target navedemo ime ustreznega okvirja. <a href="..." target="..."> Če okvir z danim imenom ne obstaja, bo vsebina strani prikazana v novem oknu. Kot vrednost lastnosti target lahko navedemo tudi katero od naslednjih vnaprej definiranih vrednosti: _self - odpre dokument v istem oknu _parent - odpre dokument v oknu, ki je oče trenutnega okna _top - odpre dokument v celem oknu (ne samo v okvirju) _blank - odpre dokument v novem, nepoimenovanem oknu

Vrinjeni okvir (iframe)
<html> <body> <p> Nekateri stari brskalniki ne podpirajo takšnih okvirjev . </p> <iframe src=" 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 okvirji
<frame> Definira okvir <frameset> Definira več okvirjev znotraj dokumenta HTML <noframes> Definira, kaj se zgodi, če brskalnik ne prikaže okvirja <iframe> Definira vrinjeni okvir v dokument HTML

Obrazci Obrazec v HTML opišemo z elementom <form>. Med njegove najpomembnejše lastnosti spadajo method, ki določa način prenosa podatkov do strežnika (možni vrednosti sta get in post), enctype določa način kodiranja podatkov, action pa naslov programa (spletne strani), ki bo obdelal v obrazec vnešene podatke. <form method="..." enctype="... " action="..."> ... </form>

Primer 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 in 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 (enovrstičnega) besedila. Z lastnostjo size lahko določimo širino polja v znakih, z lastnostjo maxlength pa omejimo število znakov, ki jih lahko vpišemo v to polje. Lastnost value določa začetno vrednost polja (besedilo, ki je že na začetku vpisano v to polje). 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 jih vnašamo, ne vidimo (namesto njih se prikazujejo zvezdice ali krogci, odvisno od operacijskega sistema). 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="">

Polje za vnos daljšega besedila
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 vnos daljšega besedila je naslednja: <textarea name="..." rows="..." cols="..."> ... </textarea> 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 uporabniškega imena in gesla
 <html> <body> <form method="get" action="obdelaj.aspx"> Ime: <input type="text" name="uporabnik"> <br /> Geslo: <input type="password" name="geslo"> <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 izbiranje ene izmed več vrednosti: polja 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 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 polja (vrednost, ki jo določimo z lastnostjo value). Z lastnostjo checked (ta je brez vrednosti) lahko zahtevamo, naj bo polje že na začetku vklopljeno. 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: podobno 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 podatkov v obrazec, se na strežnik prenesejo vrednosti vseh vklopljenih polj. Sintaksa za polje za izbiranje ene ali več vrednosti je naslednja: <input type="checkbox" name="..." value="..." checked=“checked”> <p> Kakšen disk želite? <br /> 200 GB <input type="checkbox" name="trdi_disk" value="200GB" /> 400 GB <input type="checkbox" name="trdi_disk" value="400GB" /> 600 GB <input type="checkbox" name="trdi_disk" value="600GB" checked="checked"/>

Polja z izbiro - nadaljevanje
Polje za izbiranje ene izmed več vrednosti iz seznama: polje te vrste lahko uporabljamo namesto skupine radijskih gumbov. Polje je sestavljeno iz 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 lastnostjo value pri vsaki opciji posebej (strežnik dobi vrednost izbrane opcije). Z lastnostjo selected lahko določimo, katera opcija bo izbrana na začetku. Vsebina elementa <option>, je besedilo, ki se prikaže v seznamu možnosti. To besedilo je tudi vrednost opcije, kadar vrednosti opcije z lastnostjo value ne predpišemo. Lastnost size določa, koliko opcij želimo videti naenkrat v seznamu možnosti. Če je opcij več, se ob strani prikaže drsnik. Sintaksa za polje za izbiranje ene izmed več vrednosti iz seznama je 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> </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
Polje te vrste lahko uporabljamo namesto skupine gumbov za izbiro. Polje je sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu gumbu. Polje sestavimo podobno, kot polje za izbiro ene izmed več vrednosti iz seznama, le da dodamo lastnost multiple. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenesejo vrednosti vseh izbranih opcij. Več opcij izberemo s pomočjo tipk SHIFT in CTRL. Sintaksa za polje za izbiranje več 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> </p>

Izbiranje ene vrednosti
 <html> <body> <form method="get" action="obdelaj.aspx"> Želel bi si kupiti : <br /> Motor:<input type=“radio" name="vozilo" value="Motor" /> Avto:<input type=“radio" name="vozilo" value="Avto" /> Letalo:<input type=“radio" name="vozilo" value="Letalo" /> <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 vrednosti
 <html> <body> <form method="get" action="obdelaj.aspx"> Želel bi si kupiti : <br /> Motor:<input type="checkbox" name="vozilo" value="Motor" /> Avto:<input type="checkbox" name="vozilo" value="Avto" /> Letalo:<input type="checkbox" name="vozilo" value="Letalo" /> <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 izbir Opcije pri poljih, kjer je možna izbira <select> lahko razdelimo v več skupin. To storimo tako, da več opcij postavimo v skupino, ki jo opišemo z elementom <optgroup>. Posebej 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 definirati podskupine). Z lastnostjo label določimo besedilo, ki se bo pojavilo v seznamu izbir (tega besedila ne bo možno izbrati). 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> </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 , datoteke polje za izbiro datoteke: 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 prenesla na strežnik. Z lastnostjo size 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 pojavi na desni strani polja. Kadar v obrazcu uporabimo to vrsto polja, moramo lastnost method v obrazcu nastaviti na post, lastnost enctype pa na multipart/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 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. <input type="hidden" name="..." value="..."> slika: 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). <input type="image" name="..." src="..." alt="..."> gumb: To je gumb brez posebne vloge. Uporabimo ga lahko, kadar želimo storiti kaj posebnega, kadar bo uporabnik kliknil nanj. Lastnost value določa napis na gumbu, z lastnostjo onClick pa določimo, kaj želimo 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 polj v obrazcu. Lastnost value 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. Ko bo kliknil nanj, se odpre naslednja spletna stran, določena z lastnostjo action v obrazcu. Običajno je tam zapisano ime programa na strežniku, ki bo sprejel, obdelal in shranil podatke, ter sestavil odgovor. Lastnost value 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, datoteka, 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>Skrito polje: <br /> <input type="hidden" name="skrito" value="top-secret"> <p>Slika: <br /> <input type="image" name="smesko" src="smesko.gif" alt="Smeško"> <script type="text/javascript"> function opozorilo() { alert("Ne klikat na ta gumb") } </script> <p>Gumb <br /> <input type="button" value="Klikni" onClick="opozorilo()" > <p>Pošiljanje vsebine obrazca:<br /> <input type="submit" name="poslji" value="Pošlji"> <p>Postavljanje obrazca na zaèetno vrednost<br /> <input type="reset" value="Pobriši">

Gumbi Poleg zgoraj omenjenih gumbov (polja tipa submit, reset, button in image) lahko uporabljamo tudi gumbe, ki jih opišemo z elementom <button>. Vrsto gumba v tem primeru določimo z lastnostjo type, ki ima lahko eno izmed vrednosti button, submit ali reset. Napis in/ali sliko na gumbu vpišemo kot vsebino elementa <button>. Primeri: <button type="button"onClick="...">...</button> <button type="submit">...</button> <button type="reset">...</button>

Opis polj Medtem, ko nekaterim poljem v obrazcu lahko določimo opise (napisi na gumbih), drugim tega brez uporabe dodatnih elementov ne moremo. Pred polje za vnos besedila moramo sami napisati, kaj naj uporabnik vnese, za vsakim izbirnim gumbom moramo sami napisati, kaj tisti gumb pomeni ... Problem je, da če uporabnik klikne na tak opis, se ne zgodi ničesar (izbirni gumb lahko vklopimo samo, če kliknemo nanj). Težavo rešimo z uporabo elementa <label>. Uporabimo ga lahko na dva načina: 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 <label>vsebuje opis in polje za vnos besedila. Ta 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 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 uporabe, kjer opis in polje definiramo vsakega posebej, povežemo pa ju tako, da polju damo neko oznako (definiramo lastnost id), v opisu pa se skličemo nanj (definiramo lastnost for).

Nasveta Uporabljejte element <label> za vsako polje obrazca, saj lahko na ta način lažje razumemo kaj v obrazec vnašamo. Obrazec tudi lažje popravljamo. Če imamo obrazec več vnašalnih polj, vsako polje drugače poimenujte (name=“... “), saj drugače spletna stran, ki obdeluje obrazec ne bo mogla določiti h kateremu polju spada vnesena vrednost.

Definiranje skupine polj
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 metode “post”
<html> <body> <form 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 obrazcih
<form> Definira obrazec <input> Definira polje v obrazcu <textarea> Definira polje v katerem je daljše besedilo <button> Definira gumb <select> Definira element izbirnega seznama <optgroup> Definira več opcij <option> Definira opcijo v obrazcu <label> Definira označbo v obrazcu <fieldset> Definira polje <legend> Definira napis v obrazcu

Barve v dokumentih HTML
Barve lahko določimo na več načinov: Lahko jih zapišemo z besedo (angleška imena barv). XHTML pozna 16 imen (HTML tolmači sicer podpirajo veliko več imen vendar, če želimo, da je dokument veljaven, lahko uporabimo le spodnjih šestnajst). Primer: <body bgcolor="black"> Lahko jih zapišemo kot RGB (Red Green Blue) vrednost. Oblika zapisa #rrggbb (šesnajstiški zapis za posamezne barve). Primer:<body bgcolor="#000000"> Uporabimo lahko tudi funkcijo RGB(rdeča, zelena, modra) (barve zapisane v desetiških vrednostih). Število vseh kombinacij (256 x 256 x 256) več kot 16 mio. Primer: absolutne vrednosti barv: <body bgcolor="rgb(220,30,80)"> ali barve definiramo v procentih: <body bgcolor="rgb(20%,40%,40%)">

Osnovne barve v XHTML XHTML podpira naslednje barve:
Več o vseh barvah, ki jih podpira HTML, najdete na:

Primer nijans modre barve

Primer mešanja barve (rdeča in modra)
Več o mešanju barv najdete na

Skupine HTML elementov
Poznamo bločne in vrstične HTML elemente. Bločni elementi so podobni odstavkom, kar pomeni, da se njihova vsebina vedno prične na začetku nove vrstice in lahko zasede več vrstic, medtem ko so vrstični elementi bolj podobni znakom, saj lahko nastopajo kjerkoli v vrstici. Bločni elementi so:dl, ol, ul, div, p, pre, table, hr, blockquote, address, script, noscript form, fieldset. Vrstični elementi so: h1, h2, h3, h4, h5, h6 input, textarea, 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, var, ins, del, bdo, map, script, noscript. Obstaja tudi nekaj elementov, ki ne pripadajo nobeni od naštetih skupin. To so tisti elementi, za katere je točno določeno, kje lahko nastopijo. Sem spadajo korenski element, elementi, ki lahko nastopijo samo v glavi dokumenta, samo v tabeli, seznamu, ... Ti elementi so: html, head, body, title, meta, link, style, base, caption, col, colgroup, thead, tfoot, tbody, tr, td, th, dt, dd, li, param, area, option, optgroup, legend.

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

TIPI INFORMACIJE Cela števila - 105 Realna števila - 105.064
Znaki - a, b, c Kodne tabele znakov - Windows 1250, UTF-8, UTF-16, ISO Latin 1, ISO Latin 2, IBM 852 Nizi znakov (npr. Milan Ojsteršek)

Več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 zbirka Osnovna organizacijska enota z računalnikom zapisanih podatkov Vsaka podatkovna zbirka je določena z imenom in tipom podatkovne zbirke (npr. Moja_slika.jpg)

Tipi podatkovnih zbirk
Slike so v gif, png, tiff, jpeg (jpg), bmp, pcx, tga in pbm formatu. Filmi v mpeg (mpg, mpeg, mpe), quicktime (qt, mov), rv, ram (realvideo), ms-video (avi) formatu, flash (swf) . Zvočna informacija je v au, aiff, waw, mpeg2 (mp2),mp3, ra (real audio), snd, mid formatu. Besedila so v txt, pdf, Tex, dvi, postscript (ps, ai, eps), rtf ali doc formatu. Stisnjene (kompresirane) podatkovne zbirke so v zip, arj, arc, tar, hqx, gz, Z, uue formatu. Windows media formati v asf (Advanced Streaming Format), asx (meta podatki), wma (Windows Media Audio), wmv (Windows Media Video), wax (Windows Media Audio Redirector – meta podatki za wma datoteteke)

MIME MIME (Multipurpose Internet Mail Extensions) je standard za opis sporočil, ki se pošiljajo po internetu. Več informacij najdete na:

Besedilo Strukturiran (structured ) tekst: vsebuje strukturirano informacijo skozi vse besedilo. Večina programov za procesiranje besedil uporablja strukturirani tekst, ki omogoča pravilno oblikovanje besedila, upoštevajoč uporabnikove zahteve (npr. priprava strani, število stolpcev, oznake odstavkov itd.). Označen (marked-up) tekst: besedilo v označenem dokumentu je razširjeno z ukazi, ki določajo, kako naj bo vsebina oblikovana. Takšna oblika predstavitve združuje vsebino, logično strukturo in strukturo za pripravo videza strani. Označeno besedilo je zelo zmogljivo, a zahteva izkušenega uporabnika. Najbolj znan predstavnik takih besedil je LaTeX. Hipertekst (hypertext ): običajno besedilo je organizirano linearno, saj je namenjeno branju v določenem vrstnem redu. Hipertekst vsebuje točke s povezavami do drugih delov istega ali drugega dokumenta. Najbolj priljubljen hipertekstni jezik je HTML.

Operacije nad besedilom
operacije urejanja (editing) vključujejo brisanje, vrivanje, prepisovanje, premikanje, izbiro posameznega znaka, skupine znakov (niza), celotnega stavka ali odstavka. Tudi primerjava in iskanje različnih vzorcev znakov sta pogosti operaciji. oblikovanje (formatting) omogoča npr. spreminjanje videza strani ali določa, katera pisava bo uporabljena v določenem delu besedila. Oblikovanje je lahko neinteraktivno ali interaktivno. Slednje je prijaznejše do uporabnika in tudi bolj priljubljeno, saj tedaj uporabnik vidi na izhodni napravi tisto, kar dejansko ima (WYSIWYG, “what you see is what you get”). stiskanje (compression) besedila uporabimo, kadar želimo zmanjšati redundanco v kodiranju besedila. Najpogosteje uporabljene metode so prilagodljivo Huffmanovo kodiranje in razni na slovarjih temelječi algoritmi (LZ87, LZW). kodiranje (encryption) tekstovne informacije je pomembno na mnogih področjih. Razviti so najrazličnejši pristopi za zavarovanje informacije. jezikovno odvisne operacije vključujejo pravopis, preverjanje slovnice in statistične analize napisanega.

Vključevanje tekstovnih podatkovnih zbirk v dokumente HTML
V 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 - 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 sliko kasneje ponovno prikažemo, vsebujejo:
· Barvni model: Razlikujemo med dvema pojmovanjema barve. Prvo temelji na teoriji človeškega zaznavanja barv, drugo pa na načinih, kako izhodne naprave predstavijo barve. Najpogosteje uporabljeni barvni modeli so RGB, HLS, CMY, YUV in CIE. · Ločljivost (resolution) določa število pikslov - pik na palec (dpi) v 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. · Število kanalov: Ta vrednost določa, koliko barvnih komponent vključuje opis barve piksla, in je odvisna od uporabljenega barvnega modela. · Barvna globina določa število bitov, uporabljenih za kodiranje barve piksla. 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 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. · Prepletanje (interlacing) določa, kako je organizirana informacija o 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 - prepletena. Prva možnost je primernejša za tiskanje, druga pa za prikazovanje na računalniških zaslonih.

Operacije nad slikami Urejanje. Osnovna operacija urejanja na slikah je spreminjanje barve posameznega piksla. Operacije urejanja vključujejo tudi rezanje, kopiranje in lepljenje skupine pikslov. Geometrijske transformacije. Osnovni geometrijski transformaciji sta razteg in rotacija slike. Implementirana sta lahko tudi zrcaljenje in ukrivljanje. Razteg za prevelik skalirni faktor se pri slikah z nizko ločljivostjo odraža v zmanjšani kvaliteti. Filtriranje. Pri filtriranju se nad vsakim pikslom slike uporabi posebna funkcija (filter). Pri tem se kot funkcijski argument uporabi trenutna barva piksla, pogosto pa tudi barvne vrednosti sosednjih pikslov. Rezultat je nova barva piksla. S filtriranjem tvorimo najrazličnejše efekte (npr. izostrenje, iskanje in poudarjanje robov objektov, spreminjanje barvne slike v črno belo). Zlivanje (composing). Ta operacija zlije dve ali več slik v novo sliko. Zlivanje je realizirano z uporabo Boolovih operacij. Pretvorba (conversion). Funkcije pretvorbe vključujejo različne notranje pretvorbe predstavitve slike, ki ne spremenijo videza slike. Tipična pretvorba je zamenjava barvnega modela. Npr. prepleteni barvni model RGB je primeren za računalniške zaslone, medtem ko tiskarji in boljši barvni tiskalniki rajši uporabljajo neprepleteni model CMY.

Originalna slika in zrcaljena slika

Kompresijske metode brez izgub (losless)
Omogočajo, da je restavrirana slika enake kvalitete, kot je bil original pred stiskanjem. · Graphics Interchange Format (GIF) temelji na stiskanju LZW. V tem formatu lahko shranjujemo monokromatske in barvne slike v največ 256 različnih barvah. · Tag Image File Format (TIFF) je bil načrtovan za izmenjavo slik med uporabniškimi programi in rasterskimi razbirnimi napravami. Prvotno je bil uporabljan za namizno založništvo, kasneje pa se je razširil v video aplikacije, medicinske in satelitske posnetke in shranjevanje dokumentov. 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 bitov za vsak piksel). Podprte so različne metode stiskanja, med njimi LZW, RLL in prilagodljivo Huffmanovo kodiranje. · Bitna mapa (BitMaP, BMP) je namenjena shranjevanju slikovnih podatkov v aparaturno neodvisnem formatu pod Microsoftovimi Okni. Ker uporablja le preprosto stiskanje RLL (ali pa sploh nikakršnega stiskanja), so datoteke ekstremno velike in niso primerne za arhiviranje podatkov. BMP lahko shrani po 24 bitov na piksel.

Kompresijske metode z izgubami (lossy)
Dosegajo boljšo stopnjo stiskanja z izločanjem manj pomembnih informacij. Ko sliko restavriramo, je njena kvaliteta nižja, kot je bila pred stiskanjem. Uporabnik nadzira izgubo kvalitete in običajno išče optimum med kvaliteto slike in velikostjo datoteke. Najpomembnejši in najbolj priljubljen format v tej skupini je JPEG.

Slike Sliko vstavimo v dokument s pomočjo elementa <img> , ki je brez vsebine, torej nima zaključne značke. Element <img> 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 bločnim elementom. Element <img> ima nekaj pomembnih lastnosti: Z lastnostjo src 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 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 oblike GIF, JPG ali PNG. Z lastnostma width (širina) in height (višina) določimo velikost pravokotnega področja, 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 š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 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 rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko. Z lastnostjo alt 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 slike ne more prikazati (prikaže se namesto slike). 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)
Človek sliši frekvence med 20 Hz in 20 kHz. V realnosti je zvok analogno valovanje, katerega amplituda je zvezna časovna funkcija. Narava digitalnega signala je drugačna, saj je definiran le v določenih točkah na časovni osi, njegovo amplitudo pa lahko merimo s končnim naborom vrednosti. Zaradi lastnosti digitalne predstavitve je treba analogni signal vzorčiti.

Vzorčenje in kvantizacija (sampling and quantization)
Vzorčimo običajno v enakih časovnih intervalih, katerih pogostost imenujemo vzorčevalna frekvenca.

Osnovne lastnosti digitalnega zvoka
Število kanalov. Večina aplikacij potrebuje dva kanala (stereo), v profesionalnih aplikacijah pa se jih uporablja tudi več (vse do 64). Prepletanje. Kadar imamo več kanalov, so lahko vzorci za vsak kanal shranjeni ločeno - neprepleteno ali pa prepleteno. V drugem primeru je sinhronizacija posameznih kanalov že zagotovljena, prav tako pa je učinkovitejše stiskanje. Vseeno pa pride do razsipavanja prostora na nosilcu (CD-ROM), kadar niso uporabljeni vsi kanali. Kodiranje. Obstajajo različne metode za predstavitev digitalnega zvoka. Danes se najboljši rezultati dosegajo z uporabo standarda, ki ga je razvila Moving Picture Expert Group (MPEG). Standard pokriva tako digitalni zvok kot tudi video. MPEG uporablja štiri različne načine za predstavitev zvoka: en sam kanal, dualni kanal (dva neodvisna kanala, npr. za dva jezika), stereo (dva prepletena kanala) in sestavljeni stereo (le-ta izkorišča redundanco med levim in desnim kanalom).

Operacije z digitalnim zvokom
Urejanje. Digitalni zvok omogoča naključni dostop do shranjenih podatkov. Torej ni potrebe po previjanju traku do določene pozicije. Prav tako omogoča enostavno kopiranje, brisanje in podvajanje izbranih sekvenc. Urejanje je varnejše kot pri analognem zvoku. Izredno lahko je izdelati varnostno kopijo in obdelovati dvojnike. Operacije je možno tudi preklicati (undo). Tudi določiti, kdaj naj se predvajanje ustavi, je lahko in nedvoumno. Ta enostavna operacija ni tako trivialna v primeru analognega zvoka. Zvočni efekti. Z uporabo raznih filtrov lahko tvorimo različne efekte. Tukaj naštevamo samo nekaj možnih: odmev (echoing), izravnavanje (equalisation), zmanjšanje šuma, povečanje ali zmanjšanje hitrosti, tvorba različnih akustičnih okolij (acoustic environment generation).

Midi zapis Vsaka nota je zapisana z višino, glasnostjo, trajanjem in inštrumentom

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

Lastnosti digitalnega videa
Gostota okvirjev (frame rate). Število okvirjev na sekundo je ključnega pomena pri ustvarjanju občutka gibanja. Pri 25 ali več okvirjih na sekundo govorimo o videu s popolnim vtisom gibanja (full-motion video). Vzorčenje (sampling). Digitalni video lahko izdelamo na dva načina: z računalniškim programom (animacijo) ali z vzorčenjem analognega video signala. V drugem primeru je treba analogni signal pretvoriti v digitalnega s procesom, imenovanim vzorčenje. Teorija vzorčenja določa spodnjo mejo frekvence vzorčenja, ki je dvakratna najvišja frekvenca znotraj signala (Nyquistova hitrost). Vsak vzorec je treba še kvantizirati.

Gostota podatkov (data rate). Glede na frekvenco vzorčenja in kvantizacijo razdelimo današnje formate digitalnega videa v dve skupini: formati z visoko in formati z nizko gostoto podatkov. Primeri formatov iz prve skupine so: · International Consultative Committee on Broadcasting Recommendation CCIR 601 (frekvenca vzorčenja MHz in 8 (ali 10) kvantizacijskih bitov za vsako barvno komponento). · Digital composite video (frekvenca vzorčenja za PAL = 4.43 MHz in 8 (ali 10) bitov kvantizacije). · Common Intermediate Format - CIF (frekvenca vzorčenja je 6.75 MHz z 8-bitno kvantizacijo). Pri formatih z visoko gostoto podatkov je treba prenašati okoli 20 Mbytov/s (HDTV). Tega na žalost današnja strojna oprema (mreža in DVD enote) še ne zmore, zato te formate s stiskanjem, zmanjšanjem ločljivosti 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 zmorejo tudi današnji cenejši računalniki. ·

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

Operacije nad digitalnim videom
· Urejanje. V digitalnem videu je omogočen enostaven in hiter naključni dostop do posameznega okvirja. S tem lahko zelo enostavno kopiramo, brišemo ali premikamo izbrane sekvence samo s spreminjanjem indeksov okvirjev. · Tvorba efektov. V digitalnem videu lahko uporabimo veliko število različnih efektov. Mešanje dveh video sekvenc v eno je le eden izmed njih. Drugi je dodajanje računalniško tvorjenih objektov in sekvenc. Enostavno je programirati tudi efekte, ki jih poznamo že iz analognega videa, kot so rezanje, postopno prikazovanje ali izginevanje slike, zavijanje slike, prekrivanje slike z drugo.

Posnetek urejevalnika digitalnega videa

Animacija Pri animaciji ne dobimo okvirjev s procesom kvantizacije, ampak je sekvenca v celoti tvorjena s programi računalniške grafike in animacije. Vsak objekt, predstavljen v sceni, obstaja samo v računalniškem pomnilniku. Sceno in objekte, ki jih animiramo, opišemo v geometrijskem modelirnem sistemu.

Generiranje sekvence okvirjev
Pristop, ki temelji na sceni (scene-based approach). Animacijo tvorimo tako, da preprosto vzamemo sekvenco grafičnih modelov, ki vsak zase predstavljajo celotno sceno. Za primer na sliki bo animacijski program opisal kost in kroglo ločeno za vsak okvir.

Vključitev videa v HTML
<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 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" /> Vključitev hiperpovezave: <object type="text/html" height="100%" width="100%" data="

Objekti v HTML Primeri: Vključitev videa: <object
classid="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 C-8A2F C02"> <param name="BackColor" value=" "> <param name="DayLength" value="1"> Preizkusi:

Objekti v HTML 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-96B " codebase=" /pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <param name="SRC" value="bookmark.swf"> </object> Preizkusi!

Objekti v HTML Vključitev Qicktime videa:
<object width="160" height="144" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase=" <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=" </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" />

ASX (Advanced Stream Redirector) zapis
<ASX VERSION="3.0"> <Title>Holiday 2001</Title> <Entry> <ref href="holiday-1.avi"/> </Entry> <ref href="holiday-2.avi"/> </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

Povezave Več o elementih HTML, ki so povezani z večpredstavnostjo in njihovih lastnostih najdete na: Splošno - QickTime - RealVideo - Media Player -

XHTML (EXtensible HyperText Markup Language )
Uporabljamo ga predvsem zaradi lažje strojne obdelave in analize hiperteksta. Dele hiperteksta lahko vstavljamo kot atributne multimedijske podatke v podatkovno bazo. Iz XHTML hipertekstov lažje naredimo izvlečke in določimo pomen teksta. Prihodnost XHTML je predvsem v povezavi s semantičnim spletom (Sematic Web). Specifikacije trenutne verzije XHTML 2.0 najdete na

XHTML (EXtensible HyperText Markup Language )
Uporablja samo male črke v značkah. Nepravilno: <STRONG> Odebeljeno besedilo. </STRONG> Pravilno: <strong> Odebeljeno besedilo. </strong> Nepravilno: <table WIDTH="100%">Tekst</table> Pravilno: <table width="100%" >Tekst</table> Vsaka značka mora imeti tudi končno značko. Primer: <p> To je odstavek</p> Vgnezdenje značk mora biti pravilno: Nepravilno: <b><i>Ta tekst je poudarjen in poševen</b></i> Pravilno: <b><i> Ta tekst je poudarjen in poševen </i></b>

XHTML - lastnosti V primeru, da značka ne potrebuje zaključne oznake jo moramo zapisati z / in presledkom vmes. Nepravilno: <hr> Pravilno <hr /> Primeri za <br>, <hr> in <img>: To je skok v novo vrstico <br /> Primer vnesene črte <hr /> <img src=“vesel_obraz.gif" alt=“Jaz sem vesel" />

XHTML - lastnosti Lastnosti oz. vrednosti lastnosti ne smemo izpuščati. Nepravilno: <input checked /> Pravilno: <input checked="checked" /> XHTML dokument mora imeti zapisano deklaracijo in naslov. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title> Naslov </title> </head> <body> To je telo XHTML. </body> </html>

XHTML sintaksa Ne smemo uporabljati krajšav v HTML označbah compact, checked, declare, readonly, disabled, selected, defer, ismap, nohref, nowrap, multiple, noresize: Pravilno: <input checked="checked" /> Nepravilno: <input checked> “name” v HTML označbah <a>, <applet>, <frame>, <iframe>, <img> in <map> zamenjamo z id: <img src="picture.gif" id=“Slika 1" /> ali <img src="picture.gif" id="picture1" name=“Slika 1" /> (uporabiti, če generiramo XHTML za starejše brskalnike) <img src="picture.gif" name=“Slika 1" /> Kot prvo vrstico XHTML dokumenta dodamo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ " ali "

Struktura spletnih strani

Neurejena struktura spletnih strani

Dobro definirana struktura spletnih strani

Preplitva struktura spletnih strani

Pregloboka struktura spletnih strani

Uravnovešena struktura spletnih strani

HTML (Hypertekst Markup Language)

Similar presentations

Presentation on theme: "HTML (Hypertekst Markup Language)"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML (Hypertekst Markup Language)

Similar presentations

Presentation on theme: "HTML (Hypertekst Markup Language)"— Presentation transcript:

Similar presentations

About project

Feedback