HTML

Vjebe iz kolegija Raunalni praktikum 2"
OSNOVE HTML-A
1
Tomislav Volari volaric.tomislav@gmail.com
Mostar, 2010/11
Internet i WWW
HTML
osnovni elementi HTMLa
osnovni elementi
hiperveze
osnovno formatiranje teksta i sadraja
liste
posebni znakovi
prikaz slika
tablice
forme
okviri
2
Sadraj
Internet
3
www.fpmoz.ba www.google.com
www.yahoo.com
server
TCP/IP protokol
WWW=World Wide Web
stvoren je 1989. godine na CERN-u
bazira se na hipertekstu (povezivanju sadraja)
WWW je biblioteka multimedijalnih dokumenata
smjetenih na raunalima irom svijeta dostupnih putem
Interneta
dokumenti se nazivaju web stranice
4
WWW
web poiva na 3 mehanizma:
1. jedinstvenom adresiranju sadraja putem URL-a
(Uniform Resource Locator)
2. protokolima za pristup sadrajima (http - HyperText
Transfer Protocol)
3. hipertekstualnoj organizaciji i pristupu sadrajima
(HTML jezik)
5
WWW
WWW
6
http://www.fpmoz.ba/index.hml
URL
klijent
HTML=HyperText Markup Language
jezik za opis strukture dokumenta
najvanija osobina HTML dokumenta je
hipertekstualnost (povezivanje sadraja)
HTML dokument je tekstualna datoteka koja se sastoji
od HTML elemenata
7
HTML
8
Primjer HTML stranice
<table id = "prva_tablica">
<tr>
<td> Prva elija </td>
</tr>
</table>
<hr />
9
Koncepti HTMLa
element
atribut
vrijednost atributa
oznake
esto se na web stranici na isti sadraj primjenjuje vie
elemenata
takvi elementi ne smiju se preklapati ve moraju biti
ugnjeeni (eng. nested)
10
Ugnjeivanje
Ugnjeivanje
<p>
<b>Neki sadraj
</b>
</p>
Preklapanje
<p>
<b>Neki sadraj
</p>
</b>
HTML dokument <html></html>

poetna i zavrna oznaka svakog dokumenta
svi ostali elementi moraju biti ugnjeeni unutar ovoga
HTML dokument dijeli se na 2 osnovna dijela
zaglavlje dokumenta <head></head>
tijelo dokumenta <body></body>
<frameset></frameset>
11
Struktura HTML dokumenta
zaglavlje dokumenta <head></head>
unutar zaglavlje unose se odreeni "meta" podaci koji opisuju
dokument npr. naslov dokumenta, kodna stranica, kljune rijei,...
naslov dokumenta <title></title>
meta podaci
<meta name="keywords" content=raunalni
praktikum 2, osnove HTMLa" />
meta name="author" content=Tomo" />
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
12
Zaglavlje HTML dokumenta
<html>
<head>
<title>Prva HTML stranica</title>
</head>
<body>
Ovo je moja prva HTML stranica!
</body>
</html>
13
HTML dokument
Izgled u pregledniku
14
naslovi (6 razina naslova <h1>-<h6>)
<h1>Ovo je naslov razine 1</h1>
...
odlomci <p>Ovo je odlomak</p>
prijelaz u novi redak <br />
vodoravna crta za odvajanje odlomaka <hr />
komentar <!- Ovo je komentar -->
ne prikazuje se u web pregledniku
15
Elementi HTML-a
<html>
<head><title>Druga HTML stranica</title></head>
<body>
<h1>Ovo je moja druga HTML stranica</h1>
<h2>HTML</h2>
<p>HTML je izvorni jezik za prikazivanje sadraja na webu.<br
/>
Razvijen je 1989. godine na CERN-u Europskom laboratoriju za
nukleranu fiziku u enevi.

<hr />
Tim Berners-Lee, istraiva na CERN-u, predloio je distribuirani
informacijski sustav za pohranu informacija. Sustav je bio baziran
na Hipertekstu.
</p>
</body>
</html>
16
HTML dokument
17
hiperveza je veza izmeu HTML dokumenta i drugog sadraja
(drugi HTMLdokument, tekst, slika,...)
18
Hiperveza
<a href="drugi_dokument.html">
Ovo je link na drugi dokument</a>
a - "sidro" (eng. anchor) href hyperlink reference
prikazuje se kao plavi podcrtani tekst (ukoliko specifinim
stilom nije drugaije definirano)
"adresiranje" drugog dokumenta koji se poziva moe se
provesti na razliite naine
ako se drugi dokument nalazi na drugom web posluitelju,
navodi se puna adresa posluitelja i naziv dokumenta
ako se dokument nalazi na istom web posluitelju i istom
direktoriju kao html stranica putanju nije potrebno navoditi
19
Hiperveza
<a href="http://www.unidu.hr/index.html"> Tekst linka</a>
<a href="index.html">Tekst linka</a>
hiperveza moe pokazivati na odreeno mjesto u HTML
dokumentu
odredina mjesta (knjike oznake) moraju biti posebno
imenovana vrijednou atributa "name" <a> elementa ili
"id" atributa bilo kojeg (npr. <h1>) elementa
20
Hiperveza
<a href="drugi_dokument.html#mjesto2"> Ovo je link na odreeno
mjesto u drugom dokumentu</a>
<a name = "mjesto2">Odredite</a>
ili
<h1 id = "mjesto2">Odredite</h1>
stranica se moe otvoriti u novom prozoru (atr. target)
ili u odreenom okviru (frame)
hiperlinkovi mogu biti posebnih vrsta:
slanje elektronike pote
pristup datotekama na ftp serveru
21
Hiperveza
<a href="drugi_dokument.html" target="_blank">
Ovo je link na drugi dokument</a>
<a href="mailto:mail@server.hr">E-mail</a>
<a href="ftp://ftp.server.hr/datoteka">FTP adresa</a>
<a href="drugi_dokument.html" target="lijeviOkvir">
Ovaj dokument e se otvoriti u lijevom okviru</a>
<html>
<head>
<title>Primjer linkova</title>
</head>
<body>
<a href="http://www.google.com/index.html">Ovo je
link na drugi dokument</a><br />
<a href="#mjesto2">Ovo je link na dno ovog
dokumenta</a><br />
<a href="mailto:korisnik@server.hr">E-mail</a><br />
<a href="ftp://ftp.carnet.hr/README"> FTP
datoteka</a><br /><br /><br /><br /><br /><br />
<a name="mjesto2">Odredite</a>
</body>
</html>
22
HTML dokument
23
oznake za formatiranje znaenja teksta
24
Osnovno formatiranje teksta
<strong>Ovaj tekst je jako
naglaen</strong>
<em>Ovaj tekst je
naglaen</em>
<code>Ovo je programski
kod</code>
<cite>Ovo je citat</cite>
oznake za formatiranje fizikog izgleda teksta
25
Osnovno formatiranje teksta
<b>Ovaj tekst je
podebljan</b>
<i>Ovaj tekst je
nakoen</i>
Ovo je indeks<sub>1</sub>
Ovo je
potencija<sup>2</sup>
<tt>Ovo je font fiksne
irine</tt>
<html>
<head><title>Trea HTML stranica</title></head>
<body>
<h1>Ovo je moja trea HTML stranica</h1>
<h2>HTML</h2>
<p>HTML je izvorni jezik za <strong>prikazivanje
sadraja</strong> na webu.<br />
Razvijen je 1989. godine na CERN-u<sup>1</sup> <em> Europskom
laboratoriju za nukleranu fiziku u enevi.</em>

<hr /><big>Tim Berners-Lee</big>, istraiva na <def>CERN-
u</def>, predloio je distribuirani informacijski sustav za
pohranu informacija. <br />
<code>Sustav je bio baziran na hipertekstu.</code>
</p>
</body>
</html>
26
HTML dokument
27
prikazom u pregledniku gubi se poetno formatiranje sadraja
28
Osnovno formatiranje sadraja
<html>
<head>
<title></title>
</head>
<body>
///\\___
(@ @)
+----oOO----(_)-----------+
| I ja uim |
| osnove |
| HTML-a |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</body>
</html>
ouvanje formatiranja sadraja
oznake <pre></pre>
tekst se prikazuje fontovima fiksne irine
29
Osnovno formatiranje sadraja
<html>
<head>
<title></title>
</head>
<body>
<pre>
///\\___
(@ @)
+----oOO----(_)-----------+
| I ja uim |
| osnove |
| HTML-a |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</pre>
</body>
</html>
liste slue za organizaciju sadraja na web stranici
poredana lista (ordered list)
<ol></ol> kreira listu
neporedana lista (unordered list)
<ul></ul> kreira listu
elementi liste (za obje vrste liste)
<li></li> elementi liste
30
Liste
poredana lista (eng. ordered list) je lista kod koje su elementi nabrojani jedan
ispod drugoga i svaki element oznaen je rednim brojem
koristi se kada je redoslijed elemenata vaan
31
Poredana lista
<ol>
<li>prvi element liste</li>
<li>drugi element liste</li>
<li>trei element liste</li>
</ol>
neporedana lista (eng. unordered list) je lista kod koje su elementi nabrojani jedan
ispod drugoga, a svaki element oznaen je tokom
koristi se kada nije vaan redoslijed elemenata u listi
32
Neporedana lista
<ul>
<li>prvi element liste</li>
<li>drugi element liste</li>
<li>trei element liste</li>
</ul>
Unutar <ul>/<ol> elementa smije se nalaziti samo <li> element
<ul>/<ol> ne smiju biti u istoj razini s <li> elementom
Ugnjeena <ul>/<ol> lista dolazi unutar <li>
33
Ugnjeivanje listi
Pogreno
<ul>
<li>ispitivanje znanja</li>
<ul>
<li>seminarski </li>
<li>kolokviji</li>
</ul>
<li>predavanja</li>
</ul>
Ispravno
<ul>
<li>ispitivanje znanja
<ul>
<li>seminarski </li>
<li>kolokviji</li>
</ul>
</li>
<li>predavanja</li>
</ul>
znakovi koji u HTML-u imaju posebno znaenje u tekstu se moraju
prikazivati na poseban nain, znakovnim ili numerikim kodovima
na poetku imaju znak & (ampersand), a na kraju toku-zarez
najee koriteni posebni znakovi:
34
Posebni znakovi
Znak
Za prikaz
koristiti
znakovni kod
... ili
numeriki
< < <
> > >
" " "
' '
znak razmaka
Pogreno
<html>
<head>
<title>Kod prve HTML
stranice</title>
</head>
<body>
Podebljani tekst se prikazuje
izmeu oznaka <b> i </b>
</body>
</html>
35
HTML dokument
elimo prikazati HTML kod :
36
HTML dokument
elimo prikazati HTML kod:
Ispravno
<html>
<head>
<title>Kod prve HTML stranice</title>
</head>
<body>
Podebljani tekst se prikazuje
izmeu oznaka < b > i <
/b >
</body>
</html>
u HTML dokumentu mogu se ubaciti i slike
za prikaz se koristi <img> element
<img src="slika.jpg" alt="Moja prva slika"
height="160" width="160" border="2" />
src - naziv i putanja slike koja se prikazuje
alt - tekst koji opisuje sliku koji se prikazuje u sluaju ako nije mogu prikaz slike
height i width - visina i irina slike
border - definira okvir oko slike
align ("left" , "right", "bottom", "middle", "top" -
poravnanje u odnosu na odlomak
slike se mogu koristiti i kao linkovi
<a href="http://www.fpmoz.hr/">
<img src="slika.jpg" alt="Moja prva slika"
height="159" width="143" border="2" /></a>
37
Prikaz slike
HTML dokument
38
<html>
<head><title>Primjer slike</title></head>
<body>
<img src="http://www.timdizajn.com/praktikum/slike/kosarka.jpg" alt="Prva slika"
height="160"
width="160"
border="2"
align="right"/>
<a href="http://www.fpmoz.ba/">
<img src="http://www.timdizajn.com/praktikum/slike/Windows_8.png"
alt=windows"
height="160"
width="160"
border="2" /></a>
</body>
</html>
39
prikazuju sadraj na strukturirani nain, u recima i
stupcima
u praksi tablice se koriste za:
prikaz strukturiranih podataka
pozicioniranje sadraja na tono odreeno mjesto na
stranici
sadraj se smjeta u odreenu eliju
40
Tablice
HTML oznake tablice
<table></table> odreuje tablicu
<th></th> odreuje zaglavlje tablice
<tr></tr> odreuje redak tablice
<td></td> odreuje eliju tablice
<caption></caption> odreuje opis (naslov) tablice
41
HTML oznake tablice
zaglavlje zaglavlje
elija elija
elija elija
redak 1
zaglavlje
redak 2
tablica
Opis/naslov tablice
debljina okvira (u pixelima)
<table border="?"> </table>
irina (u % ili pixelima)
<table width="?"> </table>
u odnosu na irinu prozora preglednika
ako se ne navede tablica zauzima irinu sadraja
<td width="?"> </td>
visina (u % ili pixelima)
<table height="?"> </table>
u odnosu na visinu prozora preglednika
ako se ne navede tablica zauzima visinu sadraja
<td height="?"> </td>
42
Osnovni atributi tablice
<table border="2">
<caption>Glumci i glumice</caption>
<tr>
<th>Inicijali</th>
<th>Ime i prezime</th>
</tr>
<tr>
<td>AJ</td>
<td>Ashley Judd</td>
</tr>
<tr>
<td>BW</td>
<td>Benjamin Weir</td>
</tr>
<tr>
<td>TLJ</td>
<td>Tommy Lee Jones</td>
</tr>
</table>
43
Primjer 1 (okvir tablice)
<table width="50%" height="300"
border="2">
<tr>
<th>Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
44
Primjer 2 (irina i visina tablice)
<table border="2">
<tr>
<th width="60%"
height="75">Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
45
Primjer 3 (irina i visina elije)
prazan prostor oko sadraja elije (u pixelima)
<table cellpadding="?"> </table>
ako se ne navede, po defaultu je 1 ili 2 pixela
ako se eli ukloniti treba staviti da je 0
Ime Prezime
cellpadding
46
razmak izmeu elija (u pixelima)
<table cellspacing="?"> </table>
ako se ne navede, po defaultu je 1 ili 2 pixela
ako se eli ukloniti treba staviti da je 0
Ime Prezime
cellspacing
47
horizontalno poravnanje sadraja u eliji
<tr align="?"> </tr>
<td align="?"> </td>
left, center ili right
<caption align="?"> </caption>
left, center ili right
vertikalno poravnanje sadraja u eliji
<tr valign="?"> </tr>
<td valign="?"> </td>
top, middle ili bottom
<caption align="?"> </caption>
top ili bottom
48
<table border="2" cellpadding="15">
<tr>
<th>Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
49
Primjer 4 (prostor oko sadraja)
<table border="2" cellspacing="15">
<tr>
<th>Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
50
Primjer 5 (razmak izmeu elija)
<table>
<tr>
<td><img src="pic-1a.gif" width="56"
height="102" border="0"></td>
<td><img src="pic-1b.gif" width="56"
<td><img src="pic-1c.gif" width="56"
</tr>
<tr>
</tr>
</table>
51
Primjer 6 (tablica s razmacima)
<table cellspacing="0" cellpadding="0"
border="0">
<tr>
</tr>
<tr>
</tr>
</table>
52
Primjer 7 (tablica bez razmaka)
<table border="2">
<caption align="bottom">Glumci i
glumice</caption>
<tr align="left">
<th>Inicijali</th>
<th align="left">Ime i
prezime</th>
</tr>
<tr>
<td align="center">AJ</td>
</tr>
<tr>
<td align="center">BW</td>
</tr>
<tr>
<td align="center">TLJ</td>
</tr>
</table>
53
Primjer 8 (poravnanje sadraja)
spojeni redovi
<td rowspan="?"> </td>
broj spojenih redova
spojeni stupci
<td colspan="?"> </td>
broj spojenih stupaca
54
Spojene elije tablice
<tr align="center">
<th rowspan="2">Godina</th>
<th colspan="3">Studenti</th>
</tr>
<tr align="center">
<th>1. godina</th>
<th>2. godina</th>
<th>3. godina</th>
</tr>
<tr align="center">
<td>2003</td>
<td>35</td>
<td>28</td>
<td>18</td>
</tr>
<tr align="center">
<td>2004</td>
<td>45</td>
<td>15</td>
<td>14</td>
</tr>
</table>
55
Primjer 9 (spojeni redovi ili stupci)
<tr align="center">
<th rowspan="2">Godina</th>
<th colspan="3">Studenti</th>
</tr>
<tr align="center">
<th>1. godina</th>
<th>2. godina</th>
<th>3. godina</th>
</tr>
<tr align="center">
<td valign="bottom">2003</td>
<td rowspan="2" colspan="3">
Nema upisanih</td>
</tr>
<tr align="center">
<td>2004</td>
</tr>
</table>
56
Primjer 10 (spojeni redovi i stupci)
slui za interakciju korisnika
korisnik unosi podatke i pokree odgovarajui program
primjena :
prijava korisnika za pristup web stranici
prikupljanje informacija o posjetiteljima
on-line kupovinu
suelje prema bazi podataka
unos podataka za pretraivanje stranice
...
57
Forma
<form></form> element
"action" atribut odreuje to e se uraditi s podacima (u koji program e
se podaci proslijediti)
<form method="post" action="neka_akcija"></form>
akcije:
slanje podataka pomou programa za elektroniku potu
<form method="post" action="mailto:korisnik@domena.hr"
enctype="text/plain"></form>
pozivanje izvrnog programa na posluitelju
<form method="post" action="program.cgi"></form>
prijelaz na drugu html stranicu
<form action="nova_stranica.html"></form>
58
Forma
<input /> element je osnovni element forme
vrijednost atributa "type" odreuje njegovu namjenu
unos podataka <input type="text" />
polje za unos lozinke <input type="password" />
radio button <input type="radio" />
checkbox <input type="checkbox" />
ostali vani atributi
name" imenuje element forme
npr svi checkbox-ovi koji pripadaju istoj skupini moraju imati istu vrijednost atributa
name
"value" defaultna vrijednost elementa
"size" veliina polja na ekranu
"maxlength" maksimalna duina sadraja
59
Elementi forme
skriveno polje
<input type="hidden" />
npr kada aljete podatke na mail pomou cgi programa u takvom podatku se
definira e-mail adresa na koju s epodaci alju
tipka za ienje polja forme
<input type="reset" />
tipka za proslijeivanje podataka forme
<input type="submit" />
vrijednost atributa value mijenja prikaz teksta na tipki
unos vee koliine teksta
<textarea></textarea>
atributi: rows i cols - broj redaka i stupaca
60
Elementi forme (nastavak)
padajui izbornik (eng. Pull Down List)
definicija izbornika <select></select>
atribut size za broj prikazanih izbora
po defaultu size=1
ako je broj prikazanih izbora vei od 1 element se naziva izbornik s
klizajuom trakom (eng. Scrolling List)
pojedini izbor <option></option>
atribut selected za izabrani podatak
61
Elementi forme (nastavak)
Primjer 11 (elementi forme)
62
<form action="p1.html">
E-mail:
<input type="text" id="email" value="korisnik@server.hr" />
<br /><br />
Lozinka:
<input type="password" id="lozinka" size="20"/>
<br /><br />
itate li informatike asopise?<br />
DA <input type="radio" name= "cit" value="DA" checked="checked" />
NE <input type="radio" name= "cit" value="NE" />
<br /><br />
Koje informatike asopise itate?<br />
Bug<input type="checkbox" name="c1" value="C1" />
Mrea<input type="checkbox" name="c2" value="C2" />
PC chip<input type="checkbox" name="c3" value="C3" />
</form>
63
64
Primjer 12 (elementi forme)
<form>
Komentar:
<textarea id="tekst" rows="3" cols="20"></textarea>
<br /><br />
itate li informatike asopise?
<select id="izbor">
<option value="DA">Da</option>
<option value="NE">Ne</option>
</select><br />
Studenti:
<select id="studenti" size="3">
<option value="ivo">Ivo Ivi</option>
<option value="ana" selected>Ana Ani</option>
<option value="pero">Pero Peri</option>
</select>
<input type="submit" value="Potvrdi" id="sub0" /><br />
<input type="submit" id="sub1" />
<input type="reset" id="res1" />
</form>
slue za istovremeni prikaz vie web stranica u
browseru
<frameset></frameset> definira skup stranica koji e
se istovremeno prikazivati u pregledniku
obavezan je jedan od atributa: ili rows ili cols
navodi se irina svakog pojedinog okvira u postotku ili pikselima
moe se navesti * - itav preostali prostor
<frameset rows="50%,30%,20"> ili
<frameset rows="50%,*,20%">
skupovi okvira se mogu meusobno ugnjeivati
nedostatak: stanje odreenih okvira ne moe se zapamtiti
(ukljuiti u "favorites") preglednika
65
Okviri (eng. frames)
<frame ... /> - definira se stranica koja e se prikazivati
u odreenom okviru
atributi:
src="stranica.html" - stranica koja se otvara
name ili id - naziv okvira (ako se navede moe se pomou target atributa
anchor elementa odreena stranica otvoriti u odreenom okviru
66
Okviri (eng. frames)
<noframes></noframes> definira izgled stranice koja e
se prikazivati u browserima koji nemaju mogunost rada
s okvirima
<frame src="p1.html" name="okvir1">
...
<a href="p1.html" target="okvir1">Otvori stranicu </a>
Primjer 13 (skup okira)
67
<html>
<head>
<title>Ovo je primjer koritenja okvira </title>
</head>
<frameset rows="50%, 50%" cols="40%, 30%, 30%" >
<frame src="p2-9.html" />
</frameset>
<noframes>
<body>
Prikazuju se 6 dokumenta s primjerima tablica.
</body>
</noframes>
</html>
68
Primjer 14
69
<html>
<head>
</head>
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame name="p1" src="p2-1.html">
</frameset>
<frameset rows ="33%,33%,*">
</frameset>
</frameset>
<noframes>
<body>
Prikazuju se 5 dokumenta s primjerima tablica.
</body>
</noframes>
</html>
70
Primjer 15 (frameset)
71
<html>
<head>
</head>
<frameset cols="30%,*">
<frame name="index1" src="index1.html">
<frame name="stranica" src="p2-1.html">
</frameset>
<noframes>
<body>
Prikazuju se primjeri s vjebi.
</body>
</noframes>
</html>
Primjer 15 (lijevi okvir)
72
<html>
<body>
<h2>Primjeri</h2>
<a href="p2-1.html" target="stranica">Okvir tablice</a><br />
<a href="p2-2.html" target="stranica">irina i visina tablice</a><br />
<a href="p2-3.html" target="stranica">irina i visina elije</a><br />
<a href="p2-4.html" target="stranica">Prostor oko sadraja</a><br />
<a href="p2-5.html" target="stranica">Razmak izmeu elija</a><br />
<a href="p2-6.html" target="stranica">Tablica s razmacima</a><br />
<a href="p2-7.html" target="stranica">Tablica bez razmaka</a><br />
<a href="p2-8.html" target="stranica">Poravnanje sadraja</a><br />
<a href="p2-9.html" target="stranica">Spojeni redovi ili stupci</a><br />
<a href="p2-10.html" target="stranica">Spojeni redovi i stupci</a><br />
<a href="p2-11.html" target="stranica">Elementi forme 1</a><br />
<a href="p2-12.html" target="stranica">Elementi forme 2</a><br />
<a href="p2-13.html" target="stranica">Okviri 1</a><br />
<a href="p2-14.html" target="stranica">Okviri 2</a><br />
</body>
</html>
73
ponekad elimo ukljuiti itavu web stranicu unutar druge
74
Inline frame
<iframe src="p1.html" name="okvir1" width="300" height="200"
frameborder="1"></iframe>
atributi iframe elementa
src stranica koja se ubacuje
width i height irina i visina okvira
frameborder debljina linije oko okvira (0-nema okvira)
marginwidth irina praznog prostora izmeu sadraja i
horizontalne margine
marginheight irina praznog prostora izmeu sadraja i
vertikalne margine
scrolling (yes, no, auto) prikazivanje klizaa
Primjer 16
75
<html>
<head><title>Primjer iframe</title></head>
<body>
<h1>Ovo je moja HTML stranica s iframe-om</h1>
<h2>HTML</h2>
<p>HTML je izvorni jezik za <strong>prikazivanje sadraja</strong> na webu.<br />
Razvijen je 1989. godine na CERN-u <em> Europskom laboratoriju za nukleranu fiziku u enevi.</em>
<iframe src="2-11.html" frameborder="1" width="400" height="250 align="center" scrolling=yes">
</iframe>
<hr />Tim Berners-Lee, istraiva na CERN-u, predloio je distribuirani informacijski sustav za pohranu
informacija.
<code>Sustav je bio baziran na hipertekstu.</code>
</p>
</body>
</html>
76
na samom poetku dokumenta navodi se definicija
tipa HTML dokumenta
npr
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
kae web pregledniku kojem tipu stranica pripada
kako bi validatori mogli provesti kontrolu ispravnosti
dokumenta
XHTML dokument je XML dokument i provjera se vri
pomou DTD pravila
77
Definicija tipa XHTML dokumenta
za stranice raene po HTML 4 standardu
Transitional//EN"
transitional.dtd">
za stranice raene po XHTML standardu
Strict//EN"
strict.dtd">
za stranice sa skupom okvira (frameset)
Frameset//EN"
frameset.dtd">
78
Tipovi XHTML dokumenta
Nemate naznaen encoding, pa browseri ne znaju
kako prikazati stranicu. Encodinga koji podravaju
hrvatske dijakritike ima vie (ISO, UTF-8 i Windows)
Odmah iza <head> upiite ovaj kod:
Ne vide mi se hrvatska slova! (, , , , )
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1250" />

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Vjebe iz kolegija Raunalni praktikum 2"

HTML dokument <html></html>

You might also like