Uvod u Internet
Download
Report
Transcript Uvod u Internet
Uvod u Internet
•
•
•
•
•
•
ARPA-Net Internet
IP adrese / DNS
TCP/IP
Routing
Client / Server
Internet usluge
–
–
–
–
–
WWW
E-mail
FTP
Usenet
Telnet
HTML
World Wide Web
Što je WWW?
World Wide Web - mreža povezanih računala.
Sva računala mogu međusobno komunicirati.
Koristi se zajednički komunikacijski standard nazvan HTTP.
Kako WWW radi?
Informacije su smještene unutar web stranica.
Web stranice se nalaze na računalima koji se zovu web serveri.
Računala koja pregledavaju web stranice nazivaju se web klijenti.
Programi kojima web klijenti pregledavaju web stranice su web
preglednici ili browseri.
Kako browser dohvaća stranicu?
Browser serveru upućuje zahtjev za nekom stranicom.
Zahtjev je dio HTTP standarda čiji je najvažniji dio adresa stranice.
Primjer adrese stranice: http://www.pitagora.hr/stranica.html
HTML
World Wide Web
(izvor http://isc.org)
HTML
WEB Design - problemi
• Različiti web browseri
• Mnoštvo rezolucija/broj boja
– fiksni design
– fleksibilni design
•
•
•
•
•
Problem platforme
Korisničke postavke
Brzina veze
Instalirani fontovi
Problem ispisa
HTML
Web browseri
(izvor http://w3schools.com)
2008
January
IE7
21.2%
IE6
32.0%
IE5
1.5%
Firefox Mozilla Safari
37.2% 1.3%
1.9%
Opera
1.4%
2007
July
January
IE7
20.1%
13.3%
IE6
36.9%
42.3%
IE5
1.5%
3.0%
Firefox Mozilla Safari
34.5% 1.4%
1.5%
31.0% 1.5%
1.7%
Opera
1.9%
1.5%
2006
IE7
December 10.7%
IE6
45.3%
IE5
3.4%
Firefox Mozilla Netscape Opera
30.3% 2.6%
0.2%
1.5%
2005
December
IE6
61.5%
IE5
6.5%
Firefox Mozilla Netscape Opera
24.0% 2.7%
0.4%
1.5%
HTML
Rezolucija, broj boja
(izvor http://w3schools.com)
2007
January
Higher
26.0%
1024x768
54.0%
800x600
14.0%
640x480
0.0%
Unknown
6.0%
2006
July
January
Higher
19.0%
17.0%
1024x768
58.0%
57.0%
800x600
17.0%
20.0%
640x480
0.0%
0.0%
Unknown
6.0%
6.0%
2005
July
January
Higher
14.0%
12.0%
1024x768
55.0%
53.0%
800x600
25.0%
30.0%
640x480
0.0%
0.0%
Unknown
6.0%
5.0%
2007
January
32bit
86.0%
16bit
11.0%
8bit
2.0%
2006
January
32bit
81.0%
16bit
16.0%
8bit
3.0%
2005
January
32bit
72.0%
16bit
25.0%
8bit
3.0%
HTML
Operacijski sustavi
(izvor http://w3schools.com)
2008
January
WinXP W2000
73.6% 4.0%
Win98 Vista
0.4%
7.3%
W2003
1.9%
Linux
3.6%
Mac
4.4%
2007
July
January
WinXP W2000
74.6% 6.0%
76.1% 7.7%
Win98 Vista
0.9%
3.6%
1.0%
0.6%
W2003
2.0%
1.9%
Linux
3.4%
3.6%
Mac
4.0%
3.8%
2006
WinXP W2000
December 75.7% 7.9%
Win98 WinNT
1.0%
0.2%
W2003
1.9%
Linux
3.6%
Mac
3.8%
2005
WinXP W2000
November 71.0% 14.6%
Win98 WinNT
2.7%
0.4%
W2003
1.7%
Linux
3.3%
Mac
3.3%
HTML
JavaScript
(izvor http://w3schools.com)
2007
January
On
94.0%
Off
6.0%
2006
July
January
On
92.0%
90.0%
Off
8.0%
10.0%
2005
July
January
On
90.0%
89.0%
Off
10.0%
11.0%
HTML
HTML
Kako browser prikazuje stranicu?
Sve web stranice sadrže instrukcije za prikazivanje.
Web browser analizira instrukcije i iscrtava stranicu.
Najčešći oblik instrukcija naziva se HTML tag.
Primjer HTML taga: <b>Ovaj je tekst podebljan!</b>
Što je HTML dokument?
HTML je skraćenica od Hyper Text Markup Language.
HTML dokument je tekstualni dokument koji se sastoji od tagova.
Tag kaže browseru kako prikazati stranicu.
HTML dokument mora imati ekstenziju .htm ili .html.
HTML dokument ima definiranu strukturu.
web stranice se nalaze na serveru
koji čeka na zahtjev za dostavljanje
nakon što je zaprimio zahtjev server
šalje stranice putem Internet veza
po dolasku na lokalno računalo web browser
analizira HTML tagove i iscrtava stranicu
HTML
HTML elementi
HTML element
početni tag
završni tag
<tag at1=”vr1” at2=”vr2” ...>Sadržaj</tag>
atribut
vrijednost
tekst ili drugi HTML elementi
Primjer: <p align=”center”>HTML</p>
Primjer jednostukog elementa: <br clear=”all”/>
HTML
Struktura dokumenta
HTML dokument
Zaglavlje
<html>
<head>
<title>
Naslov dokumenta
</title>
</head>
<body>
Tijelo
</body>
</html>
HTML
XHTML
Što je XHTML?
XHTML je skraćenica od EXtensible HyperText Markup Language.
XHTML je tu da zamijeni HTML.
XHTML 1.0 je gotovo identičan kao i HTML 4.01.
XHTML je stroža i preciznija varijanta HTML-a.
Zašto je uveden XHTML?
Postoji mnoštvo nedosljednosti u HTML-u.
<html>
<head>
<title>Ovo je loš HTML</title>
<body>
<b>Loš HTML
</body>
Hoće li gornji HTML dokument biti ispravno prikazan?
HTML
U čemu su zapravo razlike?
XHTML dokumenti moraju imati čvrstu strukturu.
<html>
<head> ... </head>
<body> ... </body>
</html>
XHTML tagovi moraju biti pravilno ugniježdeni.
<b><i>Ovaj tekst nije po XHTML standardu</b></i>
<b><i>Ovaj tekst jest po XHTML standardu</i></b>
Tagovi i atributi se obvezno pišu malim slovima, vrijednosti atributa
moraju biti u navodnicima.
<table width="100%">...</table>
Svi XHTML tagovi moraju biti zatvoreni, čak i jednostruki
Slijedi novi red<br>Novi red
Slijedi novi red<br />Novi red
HTML
HTML vs CSS
The HTML way
Sadržaj
HTML dokument
Stil (izgled)
HTML
HTML vs CSS
The CSS way
HTML dokument
Sadržaj
CSS dokument
Stil (izgled)
HTML
Preglednici ignoriraju
•
•
•
•
•
•
prelaske u novi red
višestruke razmake
tabove
prazne paragrafe
nepoznate tagove
komentare
<!-- komentar -->
HTML
Problem posebnih znakova
HTML
Text u HTML-u
•
Ispis posebnih znakova
razmak
&
<
>
“
€
©
®
&
<
>
"
€
©
®
π
×
÷
£
§
°
±
²
³
µ
×
÷
£
§
°
±
²
³
µ
HTML
Tag <body>
• Atributi
– Boja podloge: bgcolor=“boja”
– Boja slova: text=“boja”
– Margine: leftmargin, rightmargin, topmargin,
bottommargin
<html>
<head>
<title>Primjer taga BODY</title>
</head>
<body bgcolor="yellow" text="red">
Boja podloge ove stranice biti ce zuta a teksta crvena!
</body>
</html>
HTML
Primjer BODY
HTML
Boje u HTML-u
• RGB vrijednost
<body bgcolor=“#112233”>
• ime boje
<body bgcolor=“yellow”>
aqua (00FFFF)
gray (808080)
navy (000080)
silver (C0C0C0)
black (000000)
green (008000)
olive (808000)
teal (008080)
blue (0000FF)
lime (00FF00)
purple (800080)
white (FFFFFF)
fuchsia (FF00FF)
maroon (800000)
red (FF0000)
yellow (FFFF00)
HTML
Text u HTML-u
• Paragraf tagovi
– <p> ... </p>
• Atribut align: <p align=“center; left; right”>
– <div> ... </div>
• Atribut align: <div align=“center; left; right”>
– <h1>...</h1>, <h2>...</h2>, <h6>...</h6>
• Atribut align: <h1 align=“center; left; right”>
HTML
Primjer P
<html>
<head>
<title>
Primjer P taga
</title>
</head>
<body>
P tag opceniti je tag za definiranje paragrafa uz mogucnost poravnavanja!
<p align="right">
Primjer desno poravnatog paragrafa!
</p>
Primjetiti da P tag stvara razmak medju paragrafima!
</body>
</html>
HTML
Primjer DIV
<html>
<head>
<title>
Primjer DIV taga
</title>
</head>
<body>
DIV tag koristi se za odjeljivanje teksta uz mogucnost poravnavanja!
<div align="center">
Kao sto je ovaj!
</div>
Primjetiti da nema razmaka medju paragrafima!
</body>
</html>
HTML
Primjer H tagova
<html>
<head>
<title>
Primjer H tagova
</title>
</head>
<body>
H tagovi koriste se za naslove! Imaju mogucnost poravnavanja!
<h1>Tag H1</h1>
<h2 align="center">Tag H2</h2>
<h3 align="right">Tag H3</h3>
<h4 align="center">Tag H4</h4>
<h5 align="left">Tag H5</h5>
<h6>Tag H6</h6>
Primjetiti da H tagovi takodjer stvaraju paragrafe!
</body>
</html>
HTML
Text u HTML-u
• Tagovi za prikaz teksta
– <b>, <i>, <u>
– <big>, <small>, <sub>, <sup>
– <span>
– <font>
• Atribut face
• Atribut size
• Atribut color
HTML
Primjer B, I i U tagova
<html>
<head>
<title>
Primjer B, I i U tagova
</title>
</head>
<body>
Tag B cini tekst <b>podebljanim</b>!<br>
Tag I cini tekst <i>nakosenim</i>!<br>
Tag U cini tekst <u>potcrtanim</u>!<br>
A mogu se i <b><i>kombinirati</i></b> na <u><i>razne</i> <b>nacine</b></u>.
</body>
</html>
HTML
Primjer BIG, SMALL, SUB, SUP
<html>
<head>
<title>
Primjer BIG, SMALL, SUB i SUB tagova
</title>
</head>
<body>
<p>Tag BIG cini tekst za jedan <big>korak <big>vecim</big></big> od ostatka
recenice!</p>
<p>Tag SMALL cini tekst za jedan korak <small>manjim</small> od ostatka
recenice!</p>
<p>Tagovi SUB i SUP rade <sub>indekse</sub> i <sup>potencije</sup>.</p>
</body>
</html>
HTML
Primjer SPAN
<html>
<head>
<title>
Primjer SPAN taga
</title>
</head>
<body>
Tag SPAN odjeljuje dio teksta od ostatka recenice.
SPAN <span>ne radi</span> paragraf!
Sluzi za dodavanje <span style="color:red">stilova</span> CSS-om!
</body>
</html>
HTML
<font> tag
• Atributi:
– face=“vrsta slova”
• serif, sans-serif, monospace, cursive, fantasy
– size=“velicina”
• apsolutna: 1-7
• relativna: ..., -2, -1, +1, +2, ...
– color=“boja”
HTML
Fontovi
• MS Windows
–
–
–
–
–
Arial
Courier New
Times New Roman
Symbol
Wingdings
• Internet Explorer 4.5+
Arial
Arial Black
Comic Sans
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Webdings
Wingdings
HTML
Primjer FONT
<html>
<head>
<title>Primjeri FONT taga</title>
</head>
<body>
FONT tagom mijenjamo vrstu, velicinu i boju slova<br>
<font face="Arial" size="4" color="green">Ovo je Arial, velicine 4</font>
<font face="Garamond" size="+2" color="red">Ovo je Garamond, velicine 2 vece od
standardne, dakle 5</font>
<br><br>
Moguce je navesti i vise fontova:
<br>
<font face="Verdana, Arial, sans-serif">Ovaj tekst biti ce prikazan u fontu
Verdana, ako ga ne bude onda u fontu Arial a ako nema ni jednog onda u bilo kojem
sans-serif fontu</font>
</body>
</html>
HTML
Text u HTML-u
• Tagovi za pozicioniranje
– <br />
– <center> ... </center>
– <pre>... </pre>
HTML
Primjer BR
<html>
<head>
<title>
Primjer BR taga
</title>
</head>
<body>
Jedini nacin za<br>dobiti<br>novi red unutar<br>istog paragrafa je<br>tag BR!
<p>Drugi paragraf - linija prva<br>
Drugi paragraf - linija druga</p>
Po XHTML standardu<br />trebalo bi i<br />BR tag zatvoriti<br />iako je
jednostruki!
</body>
</html>
HTML
Primjer CENTER
<html>
<head>
<title>
Primjer CENTER taga
</title>
</head>
<body>
CENTER tag koristi se za centriranje teksta!
<center>
Kao sto je ovaj!
</center>
Primjetiti kako center tag NIJE dodatno odmakao tekst od paragrafa iznad
i ispod!
</body>
</html>
HTML
Primjer PRE
<html>
<head>
<title>Primjer taga PRE</title>
</head>
<body>
<pre>
Tag PRE
postuje nacin
na koji je tekst
unutar HTML doku
menta napisan sto znaci
da se svi
razmaci
tabovi
i
prelasci u novi red
vrednuju. Obvezan neki monospace font
</pre>
</body>
</html>
HTML
Text u HTML-u
•
Tagovi za izradu listi
– nenumerirana lista: <ul>
•
Atribut type: <ul type=“disc, circle, square”>
– numerirane lista: <ol>
•
•
Atribut type: <ol type=“1, A, a, I, i”>
Atribut start: <ol start=“broj”>
– element liste: <li>
HTML
Primjer UL i LI tagova
<html>
<head>
<title>Primjeri tagova za izradu listi</title>
</head>
<body>
Nenumerirane liste
<ul>
<li>HTML</li>
<li>Dreamweaver</li>
<li>Flash</li>
<li>Multimedia</li>
<li>Photoshop</li>
<li>JavaScript</li>
</ul>
Primjetit razmak iznad
i ispod liste!
</body>
</html>
HTML
Primjer OL i LI tagova
<html>
<head>
<title>Primjeri tagova za izradu listi</title>
</head>
<body>
Numerirane liste
<ol>
<li>HTML</li>
<li>Dreamweaver</li>
<li>Flash</li>
<li>Multimedia</li>
<li>Photoshop</li>
<li>JavaScript</li>
</ol>
Primjetit razmak iznad
i ispod liste!
</body>
</html>
HTML
Slika u HTML-u
Tag <img />
– src=“file”
– alt=“text”, title=“text”
– align=“bottom; middle; top; left; right”
– border=“broj”
– height=“broj”, width=“broj”
– vspace=“broj”, hspace=“broj”
Primjer: <img src=”slika.gif” height=”100” width=”75” />
HTML
Primjer IMG
<html>
<head>
<title>Primjer IMG taga</title>
</head>
<body>
<p>Evo jedna staticna slika:<img src="zemlja.jpeg" /></p>
<p>A sad evo jedne pomicne:<img src="hacker.gif" /></p>
<p>Primjetiti da se slike ubacuju na isti nacin, bez obzira na njihov format.</p>
</body>
</html>
HTML
Primjer ALIGN atributa – I dio
<html>
<head>
<title>Poravnavanje slike</title>
</head>
<body>
<p>Align atribut kontrolira poravnavanje slike sa okolnim tekstom:</p>
<p>Slika je poravnata svojim donjim rubom uz tekst <img src="nagrada.jpeg" alt="nagrada" align="bottom"></p>
<p>Slika i tekst su centrirani <img src="nagrada.jpeg" alt="nagrada" align="middle"></p>
<p>Slika je poravnata svojim gornjim rubom uz tekst <img src="nagrada.jpeg" alt="nagrada" align="top"></p>
</body>
</html>
HTML
Primjer ALIGN atributa – II dio
<html>
<head>
<title>Poravnavanje slike</title>
</head>
<body>
<p><img src="nagrada.jpeg" alt="nagrada" align="left">
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
</p>
<p><img src="nagrada.jpeg" alt="nagrada" align="right">
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
</p>
</body>
</html>
HTML
Primjer BORDER, HEIGHT i WIDTH
<html>
<head>
<title>Okvir i dimenzije slike</title>
</head>
<body>
<p>Height i width mijenjaju originalne dimenzije slike:<br>
<img src="nagrada.jpeg" width="100" height="150" border="5">dok border
radi okvir oko slike.
</p>
</body>
</html>
HTML
Postavljanje pozadine
<html>
<head>
<title>Primjer postavljanja slike kao pozadine</title>
</head>
<body background="pozadina.jpeg">
<h2>Slika pozadina.jpeg je postavljena kao pozadina ovoj stranici</h2>
<h3>Bitno je da datoteka sa slikom i HTML dokument moraju biti u istoj
mapi!</h3>
</body>
</html>
HTML
Primjer loše pozadine
<html>
<head>
<title>Primjer postavljanja slike kao pozadine</title>
</head>
<body background=“losapozadina.jpeg">
<h2>Slika pozadina.jpeg je postavljena kao pozadina ovoj stranici</h2>
<h3>Bitno je da datoteka sa slikom i HTML dokument moraju biti u istoj
mapi!</h3>
</body>
</html>
HTML
Linkovi
Za izradu linka koristi se tag <a> sa atributima:
href – najvažniji atribut, sadrži adresu dokumenta,
target – mjesto otvaranja novog dokumenta,
title – naslov linka.
Link je veza prema:
drugom dokumentu na istom računalu
<a href=“stranica2.html”>Link</a>
drugom dokumentu negdje na Internetu
<a href=“http://www.pjg-pitagora.hr”>Pitagora</a>
e-mail pretincu
<a href=“mailto:[email protected]”>Pošalji e-mail</a>
HTML
Primjer A
<html>
<head>
<title>Primjer A taga</title>
</head>
<body>
<p>Izrada linka moguca je tagom a!
<a href="stranica2.html">Link</a>
Primjetiti da A tag NE stvara paragraf!
</p>
<p>Ovo je link na stranice Privatne Jezicne Gimnazije
<a href="http://www.pjg-pitagora.hr">Pitagora</a>!
</p>
<p>
<a href="mailto:[email protected]">Pošalji e-mail</a> autoru
</p>
</body>
</html>
HTML
Otvaranje linka u novom prozoru
<html>
<head>
<title>Primjer A taga - otvaranje linka u novom prozoru</title>
</head>
<body>
Za otvaranje linka u novom prozoru potrebno je dodati target atribut sa
vrijednosti _blank
<p>
Ovo je link na stranice Privatne Jezicne Gimnazije
<a href="http://www.pjg-pitagora.hr" target="_blank">Pitagora</a>
koje ce se otvoriti u novom prozoru!
</p>
</body>
</html>
HTML
Slika kao link
<html>
<head>
<title>Primjer A taga - slika kao link</title>
</head>
<body>
Umjesto teksta i slika moze posluziti kao link.
<p>
Ovo je link na stranice Privatne Jezicne Gimnazije
<a href="http://www.pjg-pitagora.hr"><img src="logo-pitagora.jpeg" /></a>
</p>
</body>
</html>
HTML
Mijenjanje boje linka
<html>
<head>
<title>
Mijenjanje boje linka
</title>
</head>
<body link="green" alink="#cc6600" vlink="fuchsia">
Atributima taga body mijenjamo 3 stanja linka.
<ol>
<li> atribut link - boja <a href="stranica1.html">neposjecenog</a> linka</li>
<li> atribut alink - boja <a href="stranica2.html">aktivnog</a> linka</li>
<li> atribut vlink - boja <a href="stranica3.html">posjecenog</a> linka</li>
</ol>
</body>
</html>
HTML
Interni linkovi
• linkovi unutar iste stranice
• koristi se kod dužih stranica
...
označimo dio stranice pomoću
name atributa taga <a>
<a name="izbornik"></a>
...
...
napravimo link na označeni dio
slično kao “obični” link;
umjesto imena datoteke
...
<a href="#izbornik">Izbornik</a>
...
stavimo znak # i ime internog linka
HTML
Tablica
<table>
<tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
<tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
</table>
HTML
<html>
<head>
<title>
Tablica
</title>
</head>
Primjer tablica
<body>
3 su taga odgovorna za izradu tablice: TABLE, TR i TD.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
HTML
Tablica
<table>
<tr> <td colspan=“2”> 12 </td> <td> 3 </td> </tr>
<tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
</table>
HTML
<html>
<head>
<title>
Tablica
</title>
</head>
Primjer tablica - colspan
<body>
Atribut <b>colspan</b> taga <b>td</b> spaja horizontalne celije.
<table border="1">
<tr>
<td colspan="2">12</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
HTML
Tablica
<table>
<tr>
<td rowspan=“2”>
<td> 2 </td><td> 3 </td> </tr>
14
<tr>
</td>
<td> 5 </td> <td> 6 </td> </tr>
</table>
HTML
<html>
<head>
<title>
Tablica
</title>
</head>
Primjer tablica - rowspan
<body>
Atribut <b>rowspan</b> taga <b>td</b> spaja vertikalne celije.
<table border="1">
<tr>
<td rowspan="2">14</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
HTML
Tablica
•
Atributi
–
–
–
–
–
–
–
–
(TABLE) border=“broj”
(TD) rowspan=“broj”, colspan=“broj”
(TABLE) cellspacing=“broj”
(TABLE) cellpadding=“broj”
(TABLE, TD, TR) align=“center; left; right”
(TD, TR) valign=“middle; top; bottom”
(TABLE, TD, TR) width=“broj”, height=“broj”
(TABLE, TD, TR) bgcolor=“boja”, background=“file”
HTML
Primjer tablica – dimenzije i poravnanje
<html>
<head>
<title>Tablica - sirina i visina</title>
</head>
<body>
<table width="50%" height="200" border="5" align="center">
<tr height="25%">
<td>1</td>
<td>2</td>
</tr>
<tr align="right">
<td width="30%">3</td>
<td>4</td>
</tr>
<tr align="center" valign="top">
<td>5</td>
<td valign="bottom">6</td>
</tr>
</table>
</body>
</html>
HTML
Primjer tablica - okvir
<html>
<head>
<title>Tablica - razmak medju celijama</title>
</head>
<body>
<table border="5" cellpadding="10" cellspacing="30" align="center">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
cellspacing
cellpadding
border
HTML
Primjer tablica – podloga
<html>
<head>
<title>Tablica - podloga tablice</title>
</head>
<body>
<table width="300" height="100" border="1" align="center"
background="pozadina.jpeg">
<tr >
<td>1</td>
<td>2</td>
</tr>
<tr bgcolor="cyan">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
HTML
Formulari
• Formularom omogućavamo korisniku unos različitih informacija
• Elementi HTML formulara su:
tekstualno polje (textfield)
polje za unos lozinki (password)
radio botuni
checkbox
izbornik (select)
komandni botuni (button)
prostor za unos teksta (textarea)
HTML
Formulari
- Glavni tag za izradu formulara je <form> - definira početak i kraj formulara
- Svi tagovi za izradu elemenata formulara moraju se nalaziti unutar <form> taga!
<form>
....
....
....
....
....
</form>
HTML
Formulari
Atributi <form> taga
name=“ime”
action=“URL”
method=“get; post”
<form name=“identifikacija” action=“obrada.asp” method=“get”>
....
....
....
Obrada.asp
....
....
</form>
HTML
Metoda slanja GET
Metode slanja podataka
podaci su vidljivi na adresnoj traci browsera
ograničena količina podataka koja se može prenijeti
ne podržava enkripciju podataka
moguće stranicu sa zahtjevom spremiti u Favorites grupu
podržava samo tekst
<form action="obrada.asp" method="get" name=“identifikacija">
....
....
</form>
HTML
Metoda slanja POST
Metode slanja podataka
podaci nisu vidljivi na adresnoj traci browsera
nema ograničenja na količinu podataka koja se može prenijeti
podatke je moguće kriptirati prije slanja
ne postoji mogućnost spremanja zahtjeva u Favorites grupu
podržava i slanje datoteka, ne samo teksta
<form action="obrada.asp" method=“post" name=“identifikacija">
....
....
</form>
HTML
Tagovi za izradu elemenata formulara
–
<input type=“...” />
•
•
•
•
•
•
–
<select> (multiple, name, size)
•
–
text (maxlength, size, name, value)
password (maxlength, size, name, value)
hidden (name, value)
checkbox (checked, name, value)
radio (checked, name, value)
submit, reset, button (name, value)
<option> (selected, value)
<textarea> (cols, rows, name)
HTML
Tekstualno polje i polje za unos lozinke
Izrada tekstualnog polja
tag <input type=“text” />
Izrada polja za unos lozinke
tag <input type=“password” />
Dodatni atributi uz <input type=“text/password” />
name=“ime”
size=“broj”
maxlength=“broj”
value=“tekst”
ime tekstualnog polja (nužno sa slanje!)
veličina
maksimalan broj znakova koji se može upisati
početna vrijedost
Primjer – polje nazvano JMBG, veličine 15 mjesta od kojih je dopušteno
upisati 13, u početku popunjeno sa 3800110101980
<input type=“text” name =“JMBG” value=“3800110101980” size=“15” maxlength=“13” />
HTML
Komandni botuni
Izrada komandnog botuna
za slanje podataka: tag <input type=“submit” />
za poništavanje unosa: tag <input type=“reset” />
programabilan: tag <input type=“button” />
Dodatni atributi uz <input type=“submit;reset;button” />
name=“ime”
value=“tekst”
ime botuna
tekst koji će na botunu pisati
Primjer – botun imena botun1 za slanje podataka s natpisom “Šalji!”
<input type=“submit” name=“botun1” value=“Šalji!” />
HTML
Vježba
Zadatak:
napraviti HTML stranicu sa formularom koja serveru šalje ime korisnika
skripta za prikupljanje podataka ima slijedeće parametre:
• adresa: http://192.168.123.10/formulari/vjezba.php
metoda slanja koju podržava: GET
nužni elementi:
tekstualno polje imena ‘ime’
botun za slanje
HTML
Radio button i checkbox
Izrada radiobuttona
tag <input type=“radio” />
Izrada checkboxa
tag <input type=“checkbox” />
Dodatni atributi uz <input type=“radio;checkbox” />
name=“ime”
value=“tekst”
checked=“checked”
ime elementa
vrijedost koja će se poslati stranici za obradu
checkbox ili radiobutton je inicijalno odabran
Primjer – checkbox nazvan auto, u slučaju da ga korisnik uključi, stranica
za obradu primit će vrijedost auto=da; u startu uključeno
<input type=“checkbox” name =“auto” value=“da” checked=“checked” />Vlastito auto
HTML
Primjer formulara
<html>
<head>
<title>Primjer radiobuttona i checkboxa</title>
</head>
<body>
<form action="obrada.asp" method="get" name=“anketa">
<p>Spol: <br>
<input name="spol" type="radio" value="muski" checked> Muskarac <br>
<input name="spol" type="radio" value="zenski"> Zena
</p>
<p>Strani jezici:<br>
<input name="jezik1" type="checkbox" value="eng" checked> engleski<br>
<input name="jezik2" type="checkbox" value="fra"> francuski<br>
<input name="jezik3" type="checkbox" value="tal"> talijanski
</p>
</form>
</body>
</html>
HTML
Izbornici
Izrada izbornika
tag <select>
tag <option>
<select size=“4” name=“programi”>
<select name=“os”>
<option value=“win95”>Windows 95</option>
<option value=“word”>Microsoft Word</option>
<option value=“win98”>Windows 98</option>
<option value=“excel”>Microsoft Excel</option>
.......
.......
.......
.......
</select>
</select>
Dodatni atributi <select> taga:
name=“ime”
size=“broj”
multiple=“multiple”
ime izbornika
broj redaka (ukoliko nije navedeno imamo padajuću listu)
omogućava odabir više od jedne mogućnosti
Dodatni atributi <option> taga:
value=“tekst”
selected =“selected”
vrijedost koja će se poslati stranici za obradu
definira inicijalni odabir (default)
HTML
<html>
<head>
<title>Primjer izbornika</title>
</head>
Primjer formulara
<body>
<form action="obrada.asp" method="get" name=“anketa">
<p>Odaberite programe koje znate koristiti:
<select name="programi" size="4" multiple>
<option value="word">Microsoft Word</option>
<option value="excel">Microsoft Excel</option>
<option value="powerpoint">Microsoft PowerPoint</option>
<option value="corel">CoreDRAW!</option>
<option value="photoshop">Adobe Photoshop</option>
<option value="indesign">Adobe InDesign</option>
<option value="3d">3D Studio MAX</option>
</select>
</p>
<p>Koji operacijski sustav imate?
<select name="os">
<option value="win95">Windows 95</option>
<option value="win98">Windows 98</option>
<option value="win2k">Windows 2000</option>
<option value="winXP" selected>Windows XP</option>
<option value="mac">MacOS X</option>
<option value="lin">Linux</option>
</select>
</p>
</form>
</body>
</html>
HTML
Prostor za unos teksta (textarea)
Moguće pisanje dužeg teksta
tag <textarea>
<textarea>
Bilo kakav duzi tekst
</textarea >
Dodatni atributi <textarea> taga:
name=“ime”
cols=“broj”
rows=“broj”
ime prostora za unos
broj redaka
broj stupaca
Izrada skrivenog elementa
<input name="adresa" type="hidden" value="[email protected]">
HTML
Primjer formulara
<html>
<head>
<title>Primjer botuna</title>
</head>
<body>
<form action="obrada.asp" method="get" name=“komentar">
<p>Molim vas komentar:
<textarea name="komentar" cols="20" rows="4">samo budite pristojni</textarea>
<input name="adresa" type="hidden" value="[email protected]">
</p>
<p>
<input name="mojbotun" type="button" value="Botun po izboru">
<input name="botun_ponisti" type="reset" value="Reset - Ponisti">
<input name="botun_salji" type="submit" value="Submit - Posalji">
</p>
<p>Komentar ce biti poslan na email autora.</p>
</form>
</body>
</html>
HTML
Domaći rad
Zadatak:
napraviti HTML stranicu sa formularom (po zadanom primjeru)
skripta za prikupljanje podataka ima slijedeće parametre:
• adresa: http://192.168.123.10/formulari/domaci.php
metoda slanja koju podržava: GET
nužni elementi:
Tip
Ime
Vrijednost koju
šalje serveru
Ispis na ekranu
textbox
ime
upisan tekst
textbox
prezime
upisan tekst
padajući
izbornik
radnomj
esto
tajn, prog, diz, dir, tajk Tajnica, Programer,
Dizajner, Generalni
direktor, Tajkun
default Tajnica
padajući
izbornik
pozivni
ZG, DU, ST, SI, ZD
itd..
default 021
texbox
telefon
upisan broj
01, 020, 021, 022, 023
itd...
Ostalo
max 7
znamenki
HTML
Tip
Ime
Vrijednost koju
šalje serveru
Ispis na
ekranu
Ostalo
radiobutton
iskustvo
da, ne
textbox
godineiskust upisan broj
va
max 2
znamenke
checkbox
windows
da
default da
checkbox
word
da
default da
checkbox
excel
da
checkbox
web
da
checkbox
email
da
menu
jezici[]
eng, ita, nje, fra, spa,
rus, ces
textarea
komentar
upisan tekst
default da
Engleski,
Talijanski itd...
default eng,
visine 4 retka
dimenzije 4x20
submit button
Posalji
Posalji
reset button
Ponisti
Ponisti
HTML
Frameset
Što je frameset?
poseban HTML dokument kod kojeg je prozor browsera podijeljen
na više dijelova
u svakom dijelu moguće je prikazati drugi HTML dokument
Prednosti
svaki dio prozora ima svoje klizače
moguće je prikazati sadržaj sa različitih web adresa
dio prozora može uvijek biti fiksan
Mane
kompliciraniji za izradu
problemi sa spremanjem u Favorites grupu
mogući problemi sa pretraživačima Interneta
HTML
Frameset
Kako izgleda frameset dokument?
Zelena.html
Plava.html
Frameset1.html
HTML
Frameset dokument
Karakteristike
Frameset dokument nema <body>...</body> dio!
Umjesto njega tu su <frameset>...</frameset> i <noframes>...</noframes>
Unutar <frameset>...</frameset> dijela definira se raspored frameova
<noframes>...</noframes> dio prikazuje web browser koji nema mogućnost
rada sa frameovima (danas takav browser ne postoji)
<html>
<head>
<title>Frameset</title>
</head>
Frameset1.html
<frameset cols=“50%,50%">
<frame name="lijevi" src="zelena.html">
<frame name="desni" src="plava.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset rows=“*,*">
<frame name="gornji" src="zelena.html">
<frame name="donji" src="plava.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset rows="2*,*" cols="25%,75%">
<frame name="lijevi_gore" src="zelena.html">
<frame name="desni_gore" src="plava.html">
<frame name="lijevi_dolje" src="crvena.html">
<frame name="desni_dolje" src="zuta.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset cols="150,200,100,*">
<frame name="prvi" src="zelena.html">
<frame name="drugi" src="plava.html">
<frame name="treci" src="crvena.html">
<frame name="cetvrti" src="zuta.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset cols="200,50%,*">
<frame name="prvi" src="zelena.html">
<frame name="drugi" src="plava.html">
<frame name="treci" src="crvena.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset rows="*,*">
<frame name="gornji" src="zelena.html" >
<frameset cols="*,*">
<frame name="lijevi" src="plava.html">
<frame name="desni" src="zuta.html">
</frameset>
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Frameset
•
Dodatni atributi taga <frameset>:
–
–
–
–
cols=“broj; postotak; *”
rows=“broj; postotak; *”
frameborder=“1;0”
framespacing=“pixels”
HTML
Frameset
•
Dodatni atributi taga <frame>:
–
–
–
–
–
–
–
name=“ime”
src=“URL”
frameborder=“1;0”
scrolling=“yes;no;auto”
noresize=“noresize”
marginwidth=“broj”
marginheight=“broj”
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset cols="*,*" frameborder="0" framespacing="0">
<frame name="lijevi" src="zelena.html">
<frame name="desni" src="plava.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset rows="*,*" cols="*,*" frameborder="1" framespacing="15"
bordercolor="#3333CC">
<frame name="lijevi_gore" src="zelena.html">
<frame name="desni_gore" src="plava.html">
<frame name="lijevi_dolje" src="crvena.html">
<frame name="desni_dolje" src="zuta.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Primjer frameset
<html>
<head>
<title>Frameset</title>
</head>
<frameset cols="*,*">
<frame name="lijevi" src="zelena.html" scrolling="YES" noresize>
<frame name="desni" src="plava.html">
</frameset>
<noframes>
Vas browser ne podrzava frameove!
</noframes>
</html>
HTML
Frameovi i linkovi
Podsjećanje na linkove:
<a href=“stranica2.html”>Slijedeća stranica</a>
Otvaranje stranice u novom prozoru:
<a href=“stranica2.html” target=“_blank”>Slijedeća stranica</a>
Otvaranje stranice u željenom frameu:
<a href=“stranica2.html” target=“ime_framea”>Slijedeća stranica</a>
HTML
Frameovi i linkovi
<html>
<head>
<title>Primjer frameset i link</title>
</head>
<frameset cols="180,*" frameborder="no">
<frame name="lijevi" src="bijela.html" noresize scrolling="no">
<frame name="desni" src="crvena.html">
</frameset>
</html>
bijela.html
....
<a href="crvena.html" target="desni">CRVENA</a>
....
HTML
Inline frame
•
Frame je moguce postaviti bilo gdje u
dokumentu pomoću taga <iframe>:
–
–
–
–
–
–
–
–
name=“ime”
src=“URL”
frameborder=“1;0”
scrolling=“yes;no;auto”
marginwidth=“broj”
marginheight=“broj”
width=“broj”
height=“broj”
<iframe src="stranica.html" width="400" height="300">
Vaš browser ne podržava unutrašnje frameove
</iframe>
HTML
Meta tagovi
Čemu služi <meta> tag?
dodaje različite informacije o stranici
piše se isključivo unutar zaglavlja HTML dokumenta
generalni oblik: <meta name=“naredba” content=“vrijednost”>
Neke vrijednosti name atributa:
<meta
<meta
<meta
<meta
<meta
<meta
name=“author” content=“ime autora ili tima”>
name=“description” content=“kratak opis stranice”>
name=“keywords” content=“ključne riječi kojima se sadržaj stranice da opisati”>
name=“copyright” content=“podaci o (eventualno) zaštićenoj stranici”>
name=“generator” content=“ime programa u kojem je stranica izrađena”>
name=“robots” content=“all,none,index,noindex,follow,nofollow,noarchive”>
Primjer – izrada web-stranica tvrtke koja se bavi prodajom namještaja
<html>
<head>
<title>Ekstra Interijeri d.o.o.</title>
<meta name="description" content=“Pregled ponude namještaja tvrtke Ekstra Interijeri">
<meta name="keywords" content=“namještaj, prodaja, kuhinje, sobe, oprema, stan">
</head>
<body>
... </body>
</html>
Kako radi Google?
http://www.google.com/support/webmasters/
HTML
Meta tagovi
Druga vrsta <meta> tagova:
kontroliraju manipuliranje stranice od strane web browsera
generalni oblik: <meta http-equiv=“naredba” content=“vrijednost”>
Moguće vrijednosti http-equiv atributa:
<meta http-equiv=“refresh” content=“broj sekundi nakon kojih browser ponovno zatraži stranicu”>
<meta http-equiv=“expires” content=“datum kada sadržaj stranice više nije važeći”>
mora biti u obliku “Wed, 26 Feb 1997 08:21:57 GMT”
<meta http-equiv=“pragma” content=“no-cache”>
<meta http-equiv=“Content-Type” content=“informacije o vrsti teksta na stranici”>
<meta http-equiv=“Content-Language” content=“kod jezika na kojem je sadržaj stranice”>
Primjer – web-stranica sportske kladionice
<html>
<head>
<title>Kladionica Profit</title>
<meta name="description" content="On-line sportska kladionica sa najvećim koeficijentima">
<meta name="keywords" content="sport, klađenje, kladionica, nogomet, tenis, dobitak">
<meta http-equiv="refresh" content="120">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="hr">
</head>
<body>
...
</body>
</html>
HTML