12_splet

8/2/2019 12_Splet

http://slidepdf.com/reader/full/12splet 1/93

Univerza v Ljubljani ..: Fakulteta za elektrotehniko:..

[ LDOS ] ..: Laboratorij za digitalno obdelavo signalov, slik in videa :..

Svetovni spletWord Wide Web

dr. Urban Burnik

8/2/2019 12_Splet




Zgodovina Interneta

1945 Memex ( Vannevar Bush, “As we may think”, Atlantic Monthly, July, 1945 ) 1969 vzpostavljena prva povezava med dvema oddaljenima računalnikoma na univerzi UCLA

(ZDA) po protokolu, ki je bil predhodnik TCP/IP: začetek ARPAnet (vojska) 1972 prva javna e-pošta, kmalu zatem tudi prenos datotek (ftp) 1973/74 TCP/IP v (približno) dokončni obliki 1979 Usenet

1989 svetovni splet (WWW). Tim Berners-Lee -ideja. Revolucija z razvojem grafičnihbrskalnikov: – 1991 WorldWideWeb (browser & editor) - Tim Berners-Lee je izdelal spletni strežnik, urejevalnik

HTML dokumentov in spletni brskalnik. Uporaba jezika HTML in protokola HTTP

–1993 Marc Andreessen skupaj s sodelavci izdela prvi grafični spletni brskalnik MOSAIC

– 1995 Netscape Navigator – prehod iz akademsko/vladno/vojaških sfer v vsakodnevno življenje

1990 ARPAnet pretvorejen v Internet, prehod iz državne v privatno (podjetniško) upravljanje

8/2/2019 12_Splet


8/2/2019 12_Splet




Internet in splet

World Wide Web, ali preprosto splet je množica informacij, do katerihdostopamo preko računalnikov v omrežju.

Internet je omrežje računalnikov, pri čemer vloga posameznih računalnikov ni omejena na vlogo odjemalca ali strežnika spletnih gradiv.

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html




















8/2/2019 12_Splet




WWW (Word Wide Web) – svetovni splet

Zbirka hipertekstovnihdokumentov, ki so med sebojpovezani preko interneta.


















8/2/2019 12_Splet




Osnovni gradniki spleta

Tri osnove za delovanje spleta so:

– Infrastruktura poimenovanja ( URI )

– Protokol za izmenjavo sporočil ( HTTP )

– Jezik za opis in interpretacijo dokumentov ( HTML )
















8/2/2019 12_Splet




URI (Uniform Resource Identificator)

IETF URI Working Group http://www.ics.uci.edu/pub/ietf/uri/

http://www.ics.uci.edu/pub/ietf/uri/


8/2/2019 12_Splet




URI (Uniform Resource Identifier)

Dostop in delo z dokumenti na spletu zahteva enoličen način njihove identifikacije.URI je univerzalen način poimenovanja virov in ni odvisen od trenutne lokacije

hrambe dokumenta ali njegovih vrednosti. URI je enoličen kazalec na poljuben dokument. Metoda zahteve lahko obsega

operacije kot so pridobivanje, brisanje, sprememba ali urejanje.

na primer

http://www.foo.com/coolpic.gif je URI.

URL je njegov omrežni naslov .



























8/2/2019 12_Splet




URL (Uniform resource locator)

Ime protokola določa, kako brskalnik dostopa do storitve. – http - identificira datoteko nameščeno na spletnem strežniku,

– file - identificira datoteko na lastnem računalniku (npr.file:///D:\nice\knjiga\iskanje\01.htm),

– ftp - identificira datoteko, ki jo lahko prenesemo iz strežnika FTP (npr.ftp://ftp.switch.ch/ ),

– mailto - pošiljanje elektronskih sporočil na elektronski naslov v omrežju (npr.mailto:[email protected] ),

– news - identificira prispevek iz skupine novic (npr. news:comp.lang.c ),

– telnet - identificira datoteko na strežniku za Telnet.
























ftp://ftp.switch.ch/

mailto:[email protected]




ftp://ftp.switch.ch/

8/2/2019 12_Splet




HTTP (Hypertext Transfer Protocol)

HTTP je najpogostejši način za prenos spletnih dokumentov .

HTTP določa obliko in pomen sporočil med spletnimi odjemalci in strežniki. HTTP je protokol request-response (zahteva-odvziv)

Odjemalec pošlje zahtevo, na katero odgovori strežnik .

HTTP je stateless (brezstanjski) protokol

Odjemalec in strežnik posamezne zahteve obravnavata neodvisno glede na

prejšnje zahteve zato sistem za vzdrževanje stanj ni potreben. HTTP prenos podatkov poteka preko IP

8/2/2019 12_Splet




Spletni strežnik

Spletni

strežnik

HTTP zahteva

HTTP odziv

(vsebina)

Komunikacija HTTP

– Odjemalec in strežnik vzpostavita TCP povezavo

– Odjemalec zahteva vsebine

– Strežnik posreduje odziv

– Odjemalec in strežnik zapretapovezavo (običajno)

Spletni

odjemalec

8/2/2019 12_Splet




Spletna vsebina

Spletni strežnik odjemalcu posreduje vsebino

– vsebina: zaporedje bitov ustreznega MIME (Multipurpose Internet MailExtensions) tipa

Primeri MIME tipov

– text/html HTML dokument

– text/plain besedilo brez oblikovanja

– application/postscript Postcript dokument

– image/gif Slika v GIF formatu

– image/jpeg Slika v JPEG formatu

U i L bl i F k l l k h ik

8/2/2019 12_Splet




GET zahteva Apache Server / IE

GET /test.html HTTP/1.1

Accept: */*

Accept-Language: en-us

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)

Host: euro.ecom.cmu.edu

Connection: Keep-Alive

CRLF (\r\n)

U i Lj blj i F k l l k h ik

8/2/2019 12_Splet




GET odziv / Apache Server

HTTP/1.1 200 OK

Date: Thu, 22 Jul 1999 04:02:15 GMT

Server: Apache/1.3.3 Ben-SSL/1.28 (Unix)

Last-Modified: Thu, 22 Jul 1999 03:33:21 GMT

ETag: "48bb2-4f-37969101"

Accept-Ranges: bytes

Content-Length: 79

Keep-Alive: timeout=15, max=100

Connection: Keep-Alive

Content-Type: text/html

CRLF

<html> <head><title>Test page</title></head>

<body>

<h1>Test page</h1>

</html>

U i Lj blj i F k lt t l kt t h ik

8/2/2019 12_Splet




Statična in dinamična vsebina

Vsebina kot odgovor na HTTP zahtevek je lahko statična or dinamična .

– Statična vsebina: shranjen dokuemnt na spletnem strežniku• Primer: HTML datoteke, slike….

– Dinamična vsebina: se sproti generira v strežniku glede na zahtevo• Primer: RTV spored iz SQL baze podatkov.

Kljub vsemu:

– Vse spletne vsebine nastanejo kot posledica datotek s katerimi upravlja strežnik.

Uni rz v Lj blj ni F k lt t l kt t hnik

8/2/2019 12_Splet




Sklici

URLji za statično vsebino:

– http://www.cs.cmu.edu:80/index.html

– http://www.cs.cmu.edu/index.html

– http://www.cs.cmu.edu

URLji za dinamično vsebino :

– http://www.cs.cmu.edu:8000/cgi-bin/adder?15000&213

Univerza v Ljubljani : Fakulteta za elektrotehniko:

8/2/2019 12_Splet




Dinamično generiranje vsebin

Odjemalec Strežnik

Vsebina

Vsebina

Zahteva

Generiraj

Test.php

Odjemalec polje zahtevo strežniku.

Če zahteva URI vsebuje sklic na

dinamično vsebino strežnik toprepozna in ustrezno ukrepa.

Strežnik zažene proces za generiranjedinamične vsebine kakršno zahtevaURI.

Proces vrne generirane vsebine Strežnik prestreže odziv in ga

posreduje odjemalcu.


8/2/2019 12_Splet




Kako Internet deluje?

Enoten protokol TCP/IP

Podatki potujejo v obliki paketov, ki vsebujejo:

– naslov pošiljatelja in prejemnika – vrsto paketa (določa prioriteto)

– informacije, pomembne za odkrivanje napak (dolžina, “checksum”)

Arhitektura odjemalec-strežnik (angl. client-server)

– odjemalec (npr. Internet Explorer) pošlje zahtevo (get)

– strežnik odgovori (pošlje dokument ali obvestilo o napaki)


8/2/2019 12_Splet




IP naslovi

enolični 32-bitni naslov.

4 razredi omrežij: A, B, C in D.

netid – številka omrežja

hostid – številka računalnika v omrežju

164.8.252.3.

– 1 do 127 - razred A.

–128 do 191 - razred B.

– 192 do 233 - razred C.

– 234 do 255 – razred D.


8/2/2019 12_Splet




Naslovi računalnikov in dokumentov

URL, npr.http://www.fe.uni-lj.si/knjiznica/index.htm

–protokol (http), domena (www.sp.uni-lj.si), pot (knjiznica) in ime datoteke(index.htm)

– vstopno stran (npr. www.xxx.com/index.htm) imenujemo domača stran, skupinopovezanih strani (na istem strežniku-domeni) pa spletno mesto

Domenski naslov, npr. www.fe.uni-lj.si

IP naslov, npr. 195.250.198.67


8/2/2019 12_Splet




Storitve omrežja

imenski strežnik (DNS): omogoča spletnemu odjemalcu, da identificiraspletni strežnik s pomočjo imena strežnika ( hostname) (e.g., www.att.com),

namesto z neposrednim številskim IP naslovom. Povezava se vzpostavi preko protokola Transmission Control Protocol

(TCP).

Aplikaciji si izmenjata HTTP sporočila


8/2/2019 12_Splet


U ve a v jubljani ..: Fa u teta za elektrotehniko:..


DNS

Storitve poimenovanja

– ime računalnika: virs.fe..uni-lj.si

– pot do datoteke: /urbanb/vaje/index.html

Fizični naslov – naslov IP: 164.8.252.9

– ethernet naslov: 2:60:8c:2:b0:2a

Storitev poimenovanja = imenik – Ključen sestavni del


8/2/2019 12_Splet


j j z


DNS - primer delovanja

http://www.cdk3.net:8888/WebExamples/earth.html

URL

Resource ID (IP številka, številka vrat, pot)

Mrežni naslov

2:60:8c:2:b0:5a datoteka

Spletni strežnik

55.55.55.55 WebExamples/earth.html8888

DNS

poizvedba

Socket


8/2/2019 12_Splet


j j z


Tabela: sprošno spletno izrazoslovje

DefinicijaPojem

Množica informacij, dostopnih preko računalnikov v omrežju.

Nelinearno urejanje ali povezovanje soodvisnih dokumentov z namenom

lažje navigacije v strukturi.Svetovna zbirka medsebojno povezanih omrežij, ki temelji na IP protokolu.

Dokument na spletu, dostopen preko URI

Zbirka povezanih spletnih strani Aplikacija za ogled spletne strani

WWW/Splet

Hypertext

Internet

Spletna stran

SpletiščeBrskalnik


8/2/2019 12_Splet


j j z


Tabela: Terminologija spletnih virov in sporočil

Definition Term

Omrežni podatek ali storitev povezan z URIOsnovna enota komunikacije s HTTP

Komponenta odgovorna za pošiljanje/prejem sporočilaKontrolni del sporočilaInformacija prenešena v telesu sporočila

VirSporočiloPošiljatelj/prejemnik

Glava

Entiteta


8/2/2019 12_Splet



Vsebina na spletu

Različen format zapisa: – HTML

–PostScript

Vir je lahko: – Statična datoteka na spletu – Dinamično generirana vsebina na zahtevo

Vsak HTTP prenos obsega dve sporočili: – Zahteva

• pošlje jo odjemalec – Odziv

• pošlje ga strežnik


8/2/2019 12_Splet



HTML

HTML je standardiziran opis dokumentov s hipersklici v besedilnemformatu.

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

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


8/2/2019 12_Splet



Dodatni viri za HTML

HTML in XHTML:

– http://www.w3schools.com/html/default.asp

– http://www.w3schools.com/xhtml/default.asp

Standard HTML 4.01: http://www.w3.org/TR/REC-html40/

Standard XHTML 2.0: http://www.w3.org/TR/xhtml2/

Seznam HTML značk in njihovih lastnosti:

http://www.ilovejackdaniels.com/cheat-sheets/html-cheat-sheet/


http://www.w3schools.com/html/default.asp

http://www.w3schools.com/xhtml/default.asp

http://www.w3.org/TR/REC-html40/

http://www.w3.org/TR/xhtml2/













http://www.w3schools.com/xhtml/default.asp

http://www.w3schools.com/html/default.asp






8/2/2019 12_Splet



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 katerimioznačujemo vsebino, zapisujemo na začetku in koncu vsebine.

</body></html>


OS b d l bd l l l k d

8/2/2019 12_Splet



Značka (tag)

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

Opis elementa:

– Začetna značka <html>

– Vsebina

– Končna značka. </html>

V začetni znački lahko za imenom določimo lastnosti elementa.<b> Krepko </b>

<a href="http://www.fe.uni-lj.si/index.html">FE</a>

<table border="1" cellspacing="0">. .. </table>


[LDOS] L b ij di i l bd l i l lik i id

































8/2/2019 12_Splet



Značka – primer tabele<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>

Uporabite zamikanje HTMLelementov, če jih gnezdite enega v drugega.


[LDOS] L b ij di it l bd l i l lik i id







































8/2/2019 12_Splet



Pogoste napake

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čnidvojni 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čnonepravilno vsebino, ki pa ni ustrezne oblike.

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


[LDOS] L b t ij di it l bd l i l lik i id


























http://validator.w3.org/

http://validator.w3.org/

8/2/2019 12_Splet



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>


[LDOS] : Laboratorij za digitalno obdelavo signalov slik in videa:

8/2/2019 12_Splet



Drevo HTML označb<html><head><title>Moja domača stran</title>

</head><body><h1>Moja domača stran</h1><p>Moji priljubljeni glasbeniki so: </p><ul><li> Elvis Presley <li> Zoran Predin<li> Eric Clapton

</ul></body>

</html>

html je roditeljhead in body

head in body sta otrokahtml

p je predhodnik ul

ul je naslednik p vsi li so sorodnikili je potomec od body

body je prednik od li



8/2/2019 12_Splet



Glava HTML dokumenta

<title> Priročnik za jezik HTML </title><meta http-equiv="Content-Type" content="text/html"; charset="windows-1250" /><meta name="Author" content= “Urban Burnik" />

<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.ldos.si"><meta http-equiv="Robots" content="noindex" /><meta http-equiv="Content-Language" content="en" /><base href ="http://www.ldos.si/csslo/" />

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



8/2/2019 12_Splet



HTML<title> Priročnik za jezik HTML </title>

določimo naslov HTML dokumenta, ki se prikaže v naslovni vrstici. Z oznako<meta> Dodatne informacije o strani. 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= “Urban Burnik" /> - 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.ldos.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).<base href ="http://www.ldos.si/csslo/" /> 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)

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



http://www.w3schools.com/media/media_mimeref.asp


8/2/2019 12_Splet



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


[LDOS] : Laboratorij za digitalno obdelavo signalov, slik in videa:

http://www.w3schools.com/tags/tag_head.asp

http://www.w3schools.com/tags/tag_title.asp

http://www.w3schools.com/tags/tag_meta.asp

http://www.w3schools.com/tags/tag_base.asp

http://www.w3schools.com/tags/tag_basefont.asp

http://www.w3schools.com/tags/tag_script.asp

http://www.w3schools.com/tags/tag_noscript.asp

http://www.w3schools.com/tags/tag_style.asp

http://www.w3schools.com/tags/tag_style.asp

http://www.w3schools.com/tags/tag_noscript.asp

http://www.w3schools.com/tags/tag_script.asp

http://www.w3schools.com/tags/tag_basefont.asp

http://www.w3schools.com/tags/tag_base.asp

http://www.w3schools.com/tags/tag_meta.asp

http://www.w3schools.com/tags/tag_title.asp

http://www.w3schools.com/tags/tag_head.asp

8/2/2019 12_Splet



Telo HTML dokumenta

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

Primer:<body>

<p> To je besedilo, zapisano v navadnem odstavku.</p>

<p> Vidimo, da brskalnik med dvema odstavkoma naredi nekaj praznega prostora. Če med besedaminapiš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, kotsmo to storili na koncu prejšnjega stavka. </p>

<pre> Besedilo, v katerem so razlomi vrstic in presledki med besedami pomembni, zapišemo zelementom pre. Stranski učinek je uporaba pisave, kjer so vsi znaki enake širine, vendar to lahkospremenimo z uporabo stilov CSS. </pre>

</body>


[LDOS] ..: Laboratorij za digitalno obdelavo signalov, slik in videa:..

8/2/2019 12_Splet



Izgled prejšnjega primera v brskalniku



8/2/2019 12_Splet


[ ] j z g g ,

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 sstandardom SGML. Podrobnejši zapis znakov je podan na:

http://www.w3schools.com/tags/ref_entities.asp Tudi ASCII znake lahko zapišemo s pomočjo posebnega zapisa v HTML.

Podrobnejši opis je podan na: http://www.w3schools.com/tags/ref_ascii.asp

Univerza v Ljubljani ..: Fakulteta za elektrotehniko:..[ LDOS ] ..: Laboratorij za digitalno obdelavo signalov, slik in videa :..

http://www.w3schools.com/tags/ref_entities.asp

http://www.w3schools.com/tags/ref_ascii.asp


http://www.w3schools.com/tags/ref_entities.asp











8/2/2019 12_Splet


[ ] j z g g ,

Fizično oblikovanje besedila

Pri fizičnem oblikovanju besedila natančno določimo, kako želimo, da boprikazan 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.
































8/2/2019 12_Splet


[ ] j z g g

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 prilogič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 redkejeuporabljamo (na primer elementi em, strong, code, cite address...).




























8/2/2019 12_Splet


j z g g

Primeri:

<h1> Naslov</h1>

<h2> Podnaslov </h2><h3> Podpodnaslov</h3>

<h4> Naslov na 4. nivoju</h4>



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




























8/2/2019 12_Splet


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 kolikopresledkov, skokov v novo vrstico naredimo. Če želimo, da brskalnik upošteva presledke, skoke v novo vrstico, uporabimo značko <pre>.




http://www.w3schools.com/tags/tag_hn.asp

http://www.w3schools.com/tags/tag_p.asp

http://www.w3schools.com/tags/tag_br.asp

http://www.w3schools.com/tags/tag_hr.asp

http://www.w3schools.com/tags/tag_comment.asp

http://www.w3schools.com/tags/tag_pre.asp

http://www.w3schools.com/tags/tag_pre.asp






http://www.w3schools.com/tags/tag_hr.asp

http://www.w3schools.com/tags/tag_br.asp

http://www.w3schools.com/tags/tag_p.asp

http://www.w3schools.com/tags/tag_hn.asp

8/2/2019 12_Splet


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


http://www.w3schools.com/tags/tag_font_style.asp


http://www.w3schools.com/tags/tag_u.asp

http://www.w3schools.com/tags/tag_center.asp

http://www.w3schools.com/tags/tag_phrase_elements.asp




http://www.w3schools.com/tags/tag_sup.asp


http://www.w3schools.com/tags/tag_bdo.asp







http://www.w3schools.com/tags/tag_acronym.asp

http://www.w3schools.com/tags/tag_abbr.asp

http://www.w3schools.com/tags/tag_address.asp

http://www.w3schools.com/tags/tag_blockquote.asp

http://www.w3schools.com/tags/tag_q.asp


http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_strike.asp


http://www.w3schools.com/tags/tag_font.asp

http://www.w3schools.com/tags/tag_font.asp



http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_ins.asp


http://www.w3schools.com/tags/tag_q.asp

http://www.w3schools.com/tags/tag_blockquote.asp

http://www.w3schools.com/tags/tag_address.asp

http://www.w3schools.com/tags/tag_abbr.asp

http://www.w3schools.com/tags/tag_acronym.asp







http://www.w3schools.com/tags/tag_bdo.asp







http://www.w3schools.com/tags/tag_center.asp

http://www.w3schools.com/tags/tag_u.asp



8/2/2019 12_Splet


Primeri<abbr title="et cetera">etc.</abbr><br /><acronym title="World Wide Web">WWW</acronym><br /><address>

Urban Burnik, <br />

Tržaška 25, 1000 Ljubljana</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 slovelea lepše od Urške blo ni nobene </cite>


8/2/2019 12_Splet


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.


8/2/2019 12_Splet


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>


8/2/2019 12_Splet


Primeri neštevilčnih seznamov <h4>S pikami:</h4>

<ul type="disc">

<li>Jabolka</li>

<li>Banane</li></ul>

<h4>S krogi:</h4>

<ul type="circle">

<li>Jabolka</li>

<li>Banane</li>

</ul>

<h4>S kvadratki:</h4><ul type="square">

<li>Jabolka</li>

<li>Banane</li>

</ul>


8/2/2019 12_Splet


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


8/2/2019 12_Splet


Primeri š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>


8/2/2019 12_Splet


Opisni seznami

Uporabimo element <dl> (definition list), znotraj katereganaš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>


8/2/2019 12_Splet


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>

</ul></dd><dt> <b>Postopek:</b> </dt><dd>

<ol><li> penasto umešaj sestavine, </li><li> dolij vodo, </li>

<li> mešaj 10 minut, </li><li> daj v pečico, ki je zagreta na 200 stopinj Celzija. </li>

</ol></dd><dt> <b> Opombe: </b> </dt><dd> Recept lahko izboljšaš tako, da dodaš rozine. </dd>

</dl>


8/2/2019 12_Splet


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


http://www.w3schools.com/tags/tag_ul.asp

http://www.w3schools.com/tags/tag_ol.asp

http://www.w3schools.com/tags/tag_li.asp

http://www.w3schools.com/tags/tag_dir.asp

http://www.w3schools.com/tags/tag_dl.asp

http://www.w3schools.com/tags/tag_dt.asp

http://www.w3schools.com/tags/tag_dd.asp

http://www.w3schools.com/tags/tag_menu.asp

http://www.w3schools.com/tags/tag_menu.asp

http://www.w3schools.com/tags/tag_dd.asp

http://www.w3schools.com/tags/tag_dt.asp

http://www.w3schools.com/tags/tag_dl.asp

http://www.w3schools.com/tags/tag_dir.asp

http://www.w3schools.com/tags/tag_li.asp

http://www.w3schools.com/tags/tag_ol.asp

http://www.w3schools.com/tags/tag_ul.asp

8/2/2019 12_Splet


Slike

Sliko vstavimo v dokument s pomočjo značke <img> , ki je brez vsebine, torej nimazaključne značke. <img> je vrstični element – slika se v dokumentu obnaša kot en velik znak. Če želimo večjo sliko prikazati samostojno, jo moramo obdati z bločnimelementom.

Z lastnostjo src določimo naslov slike (ime datoteke). Obsega lokalno ime ali celotnopot do vira. Slika mora biti zapisana v datoteki oblike GIF, JPG ali PNG.

Z lastnostma width (širina) in height (višina) določimo velikost prikaza slike. Če velikosti ne podamo, bo slika prikazana v originalni velikosti. Če podamo samo širinoali samo višino, bo slika tako široka oziroma visoka, kot smo zahtevali, pri čemer borazmerje med njeno širino in višino ohranjeno. Če pa podamo širino in višino, boprikazana slika točno tako velika, kot smo zahtevali (pri tem se lahko slika tudipopači). Priporočljivo je, da podamo obe dimenziji slike, saj s tem brskalnik mednalaganjem strani rezervira ustrezno velik prostor, za prikaz slike.


8/2/2019 12_Splet


Slike 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 slikene 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 širine70 in višine 200" />


8/2/2019 12_Splet


Slika skupaj 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 uporabimo lastnosti hspace(število praznih pikslov levo in desno od slike) in vspace (število praznih mest nad inpod sliko).


8/2/2019 12_Splet


Povezave

Del besedila je lahko aktiven – ob kliku se odpre druga datotekaali 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 nastrežniku. Aktivno besedilo je običajno modro obarvano inpodčrtano, ko pa povezavo obiščemo, se obarva vijolično (teoblikovne lastnosti lahko spremenimo s stili). Besedilo naredimoaktivno z uporabo elementa <a> . Z lastnostjo href mudoločimo ime ciljne datoteke, ki naj se odpre, ko uporabnik klikne na povezavo.


8/2/2019 12_Splet


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.


8/2/2019 12_Splet


Oznake znotraj dokumenta

Skličemo se lahko tudi na določen element na neki spletni strani. Ta element seveda najprejprimerno označimo. To storimo tako, da mu predpišemo lastnost id (lahko jo predpišemokateremu 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 spletnestrani na koncu dodamo znak # in oznako elementa oziroma ime ciljne točke. Kadar je ciljnielement na isti spletni strani kot aktivna povezava, lahko ime ciljne strani izpustimo.

Primeri:

<a href="#naslov">Naslov</a>

<a href="test.html#oznaka">Oznaka</a>


8/2/2019 12_Splet


Povezava na elektronski naslov

Pogosto naletimo tudi na povezave, ki namob kliku nanje odprejo poštni program z žeodprtim oknom za pošiljanje novega

sporočila, kjer so nekatera polja (from, to,subject) že izpolnjena. Tako povezavonaredimo takole:

Primera:

<a href="mailto:[email protected]?subject=Zdravo">Pošlji!</a><a href="mailto:[email protected]

[email protected]&[email protected]&subject=Vabilo%20na%20zabavo&body =Povabljen%20si%20na%20zabavo!">Pošlji!</a>


D l i

8/2/2019 12_Splet


Druge lastnosti povezav

Elementu <a> lahko predpišemo tudi lastnost target. Z njo določimo, v kateremoknu ali okvirju naj se odpre nova stran. Vrednost te lastnosti je poljubno ime. Čeokno ali okvir s tem imenom obstaja (<title>), se bo nova stran prikazala v njem,

sicer pa v novem oknu. Kadar lastnosti target priredimo vrednost _blank, se bo novastran vedno prikazala v novem oknu. Slabost prikazovanja strani v poimenovanemoknu je, da se, kadar okno s tem imenom že obstaja in je skrito v ozadju, včasih nepostavi na površje pred druga okna.

Primera:

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

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


Z čk d l hi i i lik i

8/2/2019 12_Splet


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


T b l

http://www.w3schools.com/tags/tag_a.asp

http://www.w3schools.com/tags/tag_link.asp

http://www.w3schools.com/tags/tag_img.asp

http://www.w3schools.com/tags/tag_map.asp

http://www.w3schools.com/tags/tag_area.asp

http://www.w3schools.com/tags/tag_area.asp

http://www.w3schools.com/tags/tag_map.asp

http://www.w3schools.com/tags/tag_img.asp

http://www.w3schools.com/tags/tag_link.asp

http://www.w3schools.com/tags/tag_a.asp

8/2/2019 12_Splet


Tabele Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev razporedimo elemente, kot so na

primer besedila, slike, seznami in druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih

lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz celic.

Tabelo opišemo z elementom <table>. Njegova vsebina se prične z morebitnim opisom<caption>. 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čajnopojavljajo 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 tabelesestavljajo 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 teloeno samo, nam značk za telo ni potrebno pisati (dovolj je samo opisati njegovo vsebino).


P i

8/2/2019 12_Splet


Primer

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


V č b l h

8/2/2019 12_Splet


Več o tabelah

Širina tabele in posameznih stolpcev http://www.w3schools.com/css/css_units.asp

Ozadje pri tabeli in celicah<table border="1" bgcolor="yellow"> <tr>

…</table>

Združevanje celic<td ="center colspan="2" align="center"> vrstica1_celica1 </td>

…<td rowspan="2" align "> vrstica1_celica1 </td>

Gnezdenje tabel


Z čk d l b l i

http://www.w3schools.com/css/css_units.asp

http://www.w3schools.com/css/css_units.asp

8/2/2019 12_Splet


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


Ok i ji (f )

http://www.w3schools.com/tags/tag_table.asp

http://www.w3schools.com/tags/tag_caption.asp

http://www.w3schools.com/tags/tag_th.asp

http://www.w3schools.com/tags/tag_tr.asp

http://www.w3schools.com/tags/tag_td.asp

http://www.w3schools.com/tags/tag_thead.asp

http://www.w3schools.com/tags/tag_tbody.asp

http://www.w3schools.com/tags/tag_tfoot.asp

http://www.w3schools.com/tags/tag_col.asp

http://www.w3schools.com/tags/tag_colgroup.asp

http://www.w3schools.com/tags/tag_colgroup.asp

http://www.w3schools.com/tags/tag_col.asp

http://www.w3schools.com/tags/tag_tfoot.asp

http://www.w3schools.com/tags/tag_tbody.asp

http://www.w3schools.com/tags/tag_thead.asp

http://www.w3schools.com/tags/tag_td.asp

http://www.w3schools.com/tags/tag_tr.asp

http://www.w3schools.com/tags/tag_th.asp

http://www.w3schools.com/tags/tag_caption.asp

http://www.w3schools.com/tags/tag_table.asp

8/2/2019 12_Splet


Okvirji (frames) Z delitvijo glavnega okna na več okvirjev dosežemo prikaz več dokumentov HTML (običajno 3):

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

Element <noframes> <frame><noframes>



</noframes>


P i

8/2/2019 12_Splet


Primer

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


Opis ok irj <fr me>

8/2/2019 12_Splet


Opis okvirja <frame>

Element <frame> opisuje en okvir. Nima vsebine niti zaključne značke. Ima papolno 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> ).


Značke za delo z okvirji

8/2/2019 12_Splet


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

http://www.w3schools.com/tags/tag_frame.asp

http://www.w3schools.com/tags/tag_frameset.asp

http://www.w3schools.com/tags/tag_noframes.asp

http://www.w3schools.com/tags/tag_iframe.asp

http://www.w3schools.com/tags/tag_iframe.asp

http://www.w3schools.com/tags/tag_noframes.asp

http://www.w3schools.com/tags/tag_frameset.asp

http://www.w3schools.com/tags/tag_frame.asp

8/2/2019 12_Splet


Obrazci

Obrazec v HTML opišemo z elementom<form>. Med njegove najpomembnejšelastnosti spadajo method, ki določa načinprenosa podatkov do strežnika (možni vrednosti sta get in post), enctype določanač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>


Pošiljanje s pomočjo metode “post”

8/2/2019 12_Splet


Pošiljanje s pomočjo metode “post”<html>

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

<h3>Ta obrazec naj se pošlje po pošti.</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>


Dodatna polja

8/2/2019 12_Splet


Dodatna polja

Polja za vnos besedila in gesla

Polja za izbiro

Polje za izbiranje več vrednosti iz seznama Izbiranje ene vrednosti

Izbiranje več vrednosti (checkbox)

Gumbi, slike, datoteke


Uporabljene oznake v obrazcih

8/2/2019 12_Splet


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

http://www.w3schools.com/tags/tag_form.asp

http://www.w3schools.com/tags/tag_input.asp

http://www.w3schools.com/tags/tag_textarea.asp

http://www.w3schools.com/tags/tag_button.asp

http://www.w3schools.com/tags/tag_select.asp

http://www.w3schools.com/tags/tag_optgroup.asp

http://www.w3schools.com/tags/tag_option.asp

http://www.w3schools.com/tags/tag_label.asp

http://www.w3schools.com/tags/tag_fieldset.asp

http://www.w3schools.com/tags/tag_legend.asp

http://www.w3schools.com/tags/tag_legend.asp

http://www.w3schools.com/tags/tag_fieldset.asp

http://www.w3schools.com/tags/tag_label.asp

http://www.w3schools.com/tags/tag_option.asp

http://www.w3schools.com/tags/tag_optgroup.asp

http://www.w3schools.com/tags/tag_select.asp

http://www.w3schools.com/tags/tag_button.asp

http://www.w3schools.com/tags/tag_textarea.asp

http://www.w3schools.com/tags/tag_input.asp

http://www.w3schools.com/tags/tag_form.asp

8/2/2019 12_Splet


Barve v dokumentih HTML

Barve lahko določimo na več načinov : – Lahko jih zapišemo z besedo (angleška imena barv).

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%)">


Skupine HTML elementov

8/2/2019 12_Splet


Skupine HTML elementov

Poznamo bločne in vrstične HTML elemente. Bločni elementi so podobniodstavkom, 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 boljpodobni 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. Toso tisti elementi, za katere je točno določeno, kje lahko nastopijo. Semspadajo korenski element, elementi, ki lahko nastopijo samo v glavidokumenta, 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.


MIME

8/2/2019 12_Splet


MIME

MIME ( Multipurpose Internet Mail Extensions) je standard za opis sporočil, kise pošiljajo po internetu.

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


Vključevanje tekstovnih podatkovnih zbirk v dokumente HTML














8/2/2019 12_Splet


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>


Vključitev videa v HTML






















8/2/2019 12_Splet


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 toni v standardu HTML 4.01 ali XHTML 1.0, zato ga ne uporabljate. Uporabljajte rajeelement <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


Povezave

























8/2/2019 12_Splet


Povezave

Več o elementih HTML, ki so povezani z večpredstavnostjo in njihovih lastnostih najdete na: – Splošno - http://www.w3schools.com/media/media_tagref.asp

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

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

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


XHTML (EXtensible HyperText Markup Language )







http://www.w3schools.com/media/media_tagref.asp

http://www.w3schools.com/media/media_quicktime.asp

http://www.w3schools.com/media/media_realvideo.asp

http://www.w3schools.com/media/media_playerref.asp


http://www.w3schools.com/media/media_realvideo.asp

http://www.w3schools.com/media/media_quicktime.asp

http://www.w3schools.com/media/media_tagref.asp












8/2/2019 12_Splet


XHTML (EXtensible HyperText Markup Language )

Uporabljamo ga predvsem zaradi lažje strojne obdelave in analizehiperteksta. 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



Neurejena struktura spletnih strani


























8/2/2019 12_Splet


Neurejena struktura spletnih strani


Dobro definirana struktura spletnih strani













8/2/2019 12_Splet


Dobro definirana struktura spletnih strani


8/2/2019 12_Splet



Tehnologija Web 2.0












8/2/2019 12_Splet


g j

Bogate interaktivne spletne aplikacije (npr. AJAX)

Semantični XHTML, HTML markup

Mikroformatiranje vsebine s semantičnimi podatki

(socialno) označevanje vsebin -> semantični splet Formatiranje CSS (Cascading Style Sheets)

Spletni protokoli REST in SOAP

RSS / ATOM

Čisti in pomenski URL naslovi

Spletni dnevniki (Weblog), Wiki, forumi [aktivna udeležba uporabnikov]

Hibridne spletne aplikacije (mashup)

Poskus standardizacije uporabljanih tehnologij


AJAX?




































8/2/2019 12_Splet


J

Asynchronous Javascript and XML (MS remote scripting -> 2005!)

Razvijalski vzorec, ki vključuje širok nabor obstoječih tehnologij:

– Standardiziran prikaz s pomočjo XHTML in CSS – Dinamičen prikaz preko DOM – Izmenjava in manipulacija podatkov s pomočjo XML (ali z JSON) in XSL-T

– Asinhrono pridobivanje podatkov s pomočjo XmlHttp – ... in JavaScript, ki vse skupaj povezuje v celoto

Za interaktivne spletne aplikacije

Asinhrono delovanje: posamezen kos spletne strani je v interakciji

X-platform


mikroformat


































8/2/2019 12_Splet


<div>

<div>Joe Doe</div>

<div>The Example Company</div>

<div>604-555-1234</div>

<a href="http://example.com/">http://example.com/</a>

</div>

hCard microformat markup

<div class="vcard">

<div class="fn">Joe Doe</div>

<div class="org">The Example Company</div>

<div class="tel">604-555-1234</div>

<a class="url" href="http://example.com/">http://example.com/</a>

</div>


CSS



























8/2/2019 12_Splet


Jezik za opis načina prikaza dokumenta

Oblikovanje besedil ločeno od hierarhije


REST

















8/2/2019 12_Splet


Način ahrhitekture programske opreme za porazdeljene hipermedijskesisteme

Vmesnik za preprosto izmenjavo podatkov preko HTTP Ideja:

– VIRI (resources)

– Manipulacija omrežnih komponent z viri omogoča različno predstavitev istih virov.


RSS/Atom

























8/2/2019 12_Splet


Agregacija vsebin, zbiranje, obveščanje

Način za objavljanje vsebin, ki se

pogosto menjajo Povzetek ali polno besedilo

Lažje spremljanje sprememb; posebnaprogramska oprema


Dopolnilne spletne storitve






















8/2/2019 12_Splet


p p

Na primer:

– Spletni medpomnilnik

• Shranjevanje pogosto iskanih dokumentov v bližini uporabnikov .• Skramba (cache) je lahko:

– v spletnem brskalniku

– v spletnem strežniku

– na poti me strežnikom in odjemalcem

– Multimedijsko strujanje

• Odjemalec prikazuje vsebino sproti medtem ko se prenaša (namesto nalaganja celotne vsebine in naknadnega ogleda)


Spletni promet podatkov

































8/2/2019 12_Splet


p p p

Uporabnik pričakuje hiter odziv .

Dejavniki vpliva na kvaliteto:

–DNS overhead

– Omrežni zastoji (congestion)

– Preobremenjeni strežniki

Analiza zapisov (log) pogosto pomaga pri identifikaciji težav.















12_splet

Documents