Post on 18-Feb-2018
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 1/25
Izgradnja Web aplikacijaIzgradnja Web aplikacija
Prof. dr.sc. Dragutin Kermek
Sveučilište u Zagrebu
Fakultet organizacije i informatike
Pavlinska 2, Varaždin 42000
dkermek@foi.hr
4. dio
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin2Izgradnja Web aplikacija - FOI
Uvod u jezik HTML. Osnovne HTML oznake. Formatiranjedokumenta.
Formatiranje primjenom kaskadnih stilskih listova.
Tablice. Okviri.
Formulari/forme.
Alati za sastavljanje sadržaja Web dokumenata i izradu Web aplikacija.
HTML jezik
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 2/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin3Izgradnja Web aplikacija - FOI
Zadatak
Pažljivo gledajte sljedeće slike!
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin4Izgradnja Web aplikacija - FOI
http://www.foi.hr/
http://www.foi.hr/
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 3/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin5Izgradnja Web aplikacija - FOI
http://www.uky.edu/
http://www.uky.edu/
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin6Izgradnja Web aplikacija - FOI
http://www.whitehouse.gov/
http://www.whitehouse.gov/
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 4/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin7Izgradnja Web aplikacija - FOI
http://cnn.com
http://cnn.com
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin8Izgradnja Web aplikacija - FOI
http://www.hinet.hr/
http://www.hinet.hr/
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 5/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin9Izgradnja Web aplikacija - FOI
http://www.microsoft.com/
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin10Izgradnja Web aplikacija - FOI
http://www.yahoo.com/
http://www.yahoo.com/
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 6/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin11Izgradnja Web aplikacija - FOI
Zadatak
Što je zajedničko prikazanim stranicama?
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin12Izgradnja Web aplikacija - FOI
Tablica
Prikazivanje grupnih podataka kao i strukturiranje dokumenata vrlo često
podliježu modelu tablice. Oznake tablice <table>... </table>
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE -- table element --
%attrs; -- %coreattrs, %i18n, %events --
summary %Text; #IMPLIED -- purpose/structure for speech output--
width %Length; #IMPLIED -- table width --
border %Pixels; #IMPLIED -- controls frame width around table --
frame %TFrame; #IMPLIED -- which parts of frame to render --
rules %TRules; #IMPLIED -- rulings between rows and cols --
cellspacing %Length; #IMPLIED -- spacing between cells --
cellpadding %Length; #IMPLIED -- spacing within cells --
>
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 7/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin13Izgradnja Web aplikacija - FOI
Elementi tabliceElementi tablice možemo podijeliti u dvije grupe:
•glavni elementi – potrebni za definiranje naslova, redaka i ćelija
•pomoćni elementi – pružaju dodatne mogućnosti kod definiranja tablice.
•Uglavnom se manje koriste.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin14Izgradnja Web aplikacija - FOI
Glavni elementi tablice
Glavni elementi tablice su:
•Naslov <caption>...</caption>
•Redak <tr>...</tr>
•Ćelija <td>...</td>
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 8/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin15Izgradnja Web aplikacija - FOI
Glavni elementi tablice / 1.
<table>
<caption>Stanje robe na skladištu</caption>
<tr>
<td>Sifra</td>
<td>Naziv</td>
<td>Kolicina</td>
<td>Cijena</td></tr>
<tr>
<td>747851025010</td>
<td>Internet Info</td>
<td>1</td>
<td>100</td></tr>
<tr>
<td>401997601419</td>
<td>Iomega ZIP</td>
<td>4</td>
<td>95</td></tr>
</table>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin16Izgradnja Web aplikacija - FOI
Glavni elementi tablice / 2.
Tablice/Primjer00 – Glavni elementi tablice
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 9/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin17Izgradnja Web aplikacija - FOI
Formatiranje rubova i razmaka ćelija
<table border=“1” cellpadding=“5” cellspacing=“1”>
<caption>Stanje robe na skladištu</caption>
<tr>
<td>Sifra</td>
<td>Naziv</td>
<td>Kolicina</td>
<td>Cijena</td></tr>
<tr>
<td>747851025010</td>
<td>Internet Info</td>
<td>1</td>
<td>100</td></tr>
<tr>
<td>401997601419</td>
<td>Iomega ZIP</td>
<td>4</td>
<td>95</td></tr>
</table>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin18Izgradnja Web aplikacija - FOI
Formatiranje rubova i razmaka ćelija / 1.
Tablice/Primjer01 – Formatiranje rubova i razmaka ćelija
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 10/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin19Izgradnja Web aplikacija - FOI
Formatiranje širine tablice
<table border=“1” cellpadding=“5” cellspacing=“1” width=“75%”>
<caption>Stanje robe na skladištu</caption>
<tr>
<td>Sifra</td>
<td>Naziv</td>
<td>Kolicina</td>
<td>Cijena</td></tr>
<tr>
<td>747851025010</td>
<td>Internet Info</td>
<td>1</td>
<td>100</td></tr>
<tr>
<td>401997601419</td>
<td>Iomega ZIP</td>
<td>4</td>
<td>95</td></tr>
</table>
width=“780”
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin20Izgradnja Web aplikacija - FOI
Formatiranje širine tablice / 1.
Talice/Primjer02 – Formatiranje širine tablice
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 11/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin21Izgradnja Web aplikacija - FOI
Formatiranje širine ćelija
<table border=“1” cellpadding=“5” cellspacing=“1” width=“75%”>
<caption>Stanje robe na skladištu</caption>
<tr>
<td width=“25%”>Sifra</td>
<td width=“40%”>Naziv</td>
<td width=“15%”>Kolicina</td>
<td width=“20%”>Cijena</td></tr>
<tr>
<td>747851025010</td>
<td>Internet Info</td>
<td>1</td>
<td>100</td></tr>
<tr>
<td>401997601419</td>
<td>Iomega ZIP</td>
<td>4</td>
<td>95</td></tr>
</table>
width=“80”
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin22Izgradnja Web aplikacija - FOI
Formatiranje širine ćelija / 1.
Tablice/Primjer03 – Formatiranje širine ćelija
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 12/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin23Izgradnja Web aplikacija - FOI
Formatiranje boja ćelija
<table border=“1” cellpadding=“5” cellspacing=“1” width="75%">
<caption><b>Stanje robe na skladištu</b></caption>
<tr bgcolor=“chocolate”>
<td width="25%">Sifra</td>
<td width="40%">Naziv</td>
<td width="15%">Kolicina</td>
<td width="20%">Cijena</td></tr>
<tr bgcolor=“sandybrown”>
<td>747851025010</td>
<td>Internet Info</td>
<td>1</td>
<td>100</td></tr>
<tr bgcolor=“sandybrown”>
<td>401997601419</td>
<td>Iomega ZIP</td>
<td>4</td>
<td>95</td></tr>
</table>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin24Izgradnja Web aplikacija - FOI
Formatiranje boja ćelija / 1.
Tablice/Primjer04 – Formatiranje boja
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 13/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin25Izgradnja Web aplikacija - FOI
Spajanje ćelija<caption><b>Stanje robe na skladištu</b></caption>
<tr bgcolor=“chocolate” align=“middle”>
<td width="25%">Sifra</td>
<td width="40%">Naziv</td>
<td width="10%">Kolicina</td>
<td width="12%">Cijena</td>
<td width="13%">Iznos</td></tr>
<tr bgcolor=“sandybrown”>
<td align=“middle”>747851025010</td>
<td>Internet Info</td>
<td align=“right”>1</td>
<td align=“right”>100</td>
<td align=“right”>100</td></tr>
<tr bgcolor=“sandybrown”>
<td align=“middle”>401997601419</td><td>Iomega ZIP</td>
<td align=“right”>4</td>
<td align=“right”>95</td>
<td align=“right”>380</td></tr>
<tr bgcolor=“brown”>
<td colspan=“4” align=“middle”>u k u p n o</td>
<td align=“right”>480</td></tr>
</table>
rowspan=“2”
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin26Izgradnja Web aplikacija - FOI
Spajanje ćelija / 1.
Tablice/Primjer06 – Spajanje ćelija
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 14/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin27Izgradnja Web aplikacija - FOI
Pomoćni elementi tablicePomoćni elementi elementi tablice su:
•Grupa stupaca <colgroup>...</colgroup>
•Stupac <col>...</col>
•Zaglavlje tablice <thead>...</thead>
•Tijelo tablice <tbody>...</tbody>
•Ćelija zaglavlja tablice <th>...</th>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin28Izgradnja Web aplikacija - FOI
Pomoćni elementi tablice / 1.
<table border=“1” cellpadding=“5” cellspacing=“1” width="75%">
<caption><b>Stanje robe na skladištu</b></caption>
<colgroup>
<col align="center">
<colgroup>
<col align="left">
<colgroup>
<col span="3" align="right">
<thead valign="middle" bgcolor=“chocolate” align=“center”>
<tr>
<th width="25%">Sifra</td>
<th width="40%">Naziv</td>
<th width="10%">Kolicina</td>
<th width="12%">Cijena</td><th width="13%">Iznos</td></tr>
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 15/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin29Izgradnja Web aplikacija - FOI
Pomoćni elementi tablice / 2.<tbody bgcolor=“sandybrown”>
<tr>
<td>747851025010</td>
<td>Internet Info</td>
<td>1</td>
<td>100</td>
<td>100</td></tr>
<tr>
<td>401997601419</td>
<td>Iomega ZIP</td>
<td>4</td>
<td>95</td>
<td>380</td></tr>
<tr bgcolor=“brown”>
<td colspan=“4” align=“middle”>u k u p n o</td>
<td>480</td></tr></tbody></table>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin30Izgradnja Web aplikacija - FOI
Pomoćni elementi tablice / 3.
Tablice/Primjer07 – Pomoćni elementi tablice
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 16/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin31Izgradnja Web aplikacija - FOI
Formatiranje tablice primjenom CSS<html><head>
<link href=“PzaWeb.css" rel="stylesheet" type="text/css">
<body>
<table class=“tablica1” border=“1” cellpadding=“5” cellspacing=“1” width="75%">
<caption class=“tablica1”><b>Stanje robe na skladištu</b></caption>
<colgroup>
<col align="center">
<colgroup>
<col align="left">
<colgroup>
<col span="3" align="right">
<thead class=“tablica1”>
<tr>
<th width="25%">Sifra</td>
<th width="40%">Naziv</td><th width="10%">Kolicina</td>
<th width="12%">Cijena</td>
<th width="13%">Iznos</td></tr>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin32Izgradnja Web aplikacija - FOI
Formatiranje tablice primjenom CSS / 1.
<tbody class=“tablica1”>
<tr class=“tablica1_redak1”>
<td>747851025010</td>
<td>Internet Info</td>
<td>1</td>
<td>100</td>
<td>100</td></tr>
<tr class=“tablica1_redak2”>
<td>401997601419</td>
<td>Iomega ZIP</td>
<td>4</td>
<td>95</td>
<td>380</td></tr>
<tr class=“tablica1_podnozje”><td colspan=“4” align=“middle”>u k u p n o</td>
<td>480</td></tr></tbody>
</table>
</body>
</html>
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 17/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin33Izgradnja Web aplikacija - FOI
Formatiranje tablice primjenom CSS / 2.<style>
table.tablica1
{
border-bottom: outset;
border-left: outset;
border-right: outset;
border-top: outset
}
caption.tablica1
{
color: mediumblue
}
tbody.tablica1
{
border-bottom: thin;
border-left: thin; border-right: thin;
border-top: thin
}
...
</style>
Tablice/PzaWeb.css – Datoteka CSS stilova
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin34Izgradnja Web aplikacija - FOI
Formatiranje tablice primjenom CSS / 3.
Tablice/Primjer08 – Formatiranje tablice primjenom CSS
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 18/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin35Izgradnja Web aplikacija - FOI
Formatiranje tablice primjenom CSS / 4.
Tablice/Primjer09 – Formatiranje tablice primjenom CSS
Tablice/PzaWeb1.css – Datoteka CSS stilova
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin36Izgradnja Web aplikacija - FOI
Formatiranje tablice primjenom CSS / 5.
Tablice/Primjer09_1 – Formatiranje tablice primjenom CSS
Tablice/PzaWeb3.css – Datoteka CSS stilova
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 19/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin37Izgradnja Web aplikacija - FOI
Tablica u tablici<tbody class=“tablica1”>
<tr class=“tablica1_redak1”>
<td>knuth, d.e.</td>
<td>
<table border="1" width="100%">
<tr>
<td width="50%">the art of computer programming</td>
<td width="50%">
<p align="center">book</td>
</tr>
<tr>
<td width="50%">tex</td>
<td width="50%">
<p align="center">computer language</td>
</tr>
<tr><td width="50%">concrete mathematics</td>
<td width="50%">
<p align="center">book</td>
</tr>
</table>
</td>
</tr>
Tablica kao sadržaj ćelije
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin38Izgradnja Web aplikacija - FOI
Tablica u tablici / 1.
Tablice/Primjer10 – Tablica u tablici
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 20/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin39Izgradnja Web aplikacija - FOI
OkvirOkvir je neovisan prozor odnosno podprozor. Podaci mogu biti prikazani u više
okvira tako da se može jedan okvir puniti podacima iz drugog okvira i sl.
Moguće je:
•grupirati okvire u skupove,
•uključiti okvir u drugi okvir.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin40Izgradnja Web aplikacija - FOI
Okvir / 1.
Skup okvira<frameset
cols="columnwidthlist"
rows="rowheightlist"
border="pixwidth"
bordercolor="color"
frameborder="yes"|"no"
onblur="jscode"
onfocus="jscode"
onload="jscode"
onunload="jscode"
>
...</frameset>
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 21/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin41Izgradnja Web aplikacija - FOI
Okvir / 2.Okvir<frame
bordercolor="color"
frameborder="yes"|"no"
marginheight="marginheight"
marginwidth="marginwidth"
name="framename"
noresize
scrolling="yes"|"no"|"auto"
src="url"
>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin42Izgradnja Web aplikacija - FOI
Okvir / 3.
<frameset rows="80,*" frameborder="0" border="0" framespacing="0">
<frame src="gore.html" name="gore">
<frameset cols="*,30%" frameborder="0" border="0" framespacing="0">
<frame src="dolje_lijevo.html" name="dolje_lijevo">
<frame name="dolje_desno">
<noframes>
<body>
<P>Ovaj preglednik ne podrzava okvire!
</body>
</noframes>
</frameset>
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 22/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin43Izgradnja Web aplikacija - FOI
Okvir / 4.<p><img src="slika.jpg" usemap="#mapa1"></p>
<map name="mapa1">
<area href="pravokutnik.html" alt="pravokutnik" target="dolje_desno"
shape="rect" coords="123,66,270,133">
<area href="krug.html" alt="krug" target="dolje_desno" shape=“circle”
coords="392,200,60">
<area href="poliedar.html"alt="poliedar" target="dolje_desno" shape="poly"
coords="125,265,152,193,240,190,267,264,197,310">
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin44Izgradnja Web aplikacija - FOI
Okvir / 5.
Okviri/Primjer12 – Okvir
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 23/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin45Izgradnja Web aplikacija - FOI
Interni okvirInterni okvir je pravokutni prostor unutar normalnog toka sadržaja dokumenta. U
taj prostor može se puniti bilo koji HTML dokument ili dinamičkim putem
upisivati sadržaj.
U svojem ponašanju ima sličnosti s <frame> elementom samo bez potrebe za
<frameset>.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin46Izgradnja Web aplikacija - FOI
Interni okvir / 1.
Interni okvir<iframe
name=“elementidentifier"
src="location"
align="alignment"
height="height"
width="width"
scrolling=“featureswitch"
frameborder="yes"|"no"
>
</iframe>
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 24/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin47Izgradnja Web aplikacija - FOI
Interni okvir / 2.<iframe src="dolje_lijevo.html" frameborder=“no" width="800" height="500">
</iframe>
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin48Izgradnja Web aplikacija - FOI
Interni okvir / 3.
Okviri/Primjer12_3 – Interni okvir
7/23/2019 Iwa 04 Tablice Okviri
http://slidepdf.com/reader/full/iwa-04-tablice-okviri 25/25
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin49Izgradnja Web aplikacija - FOI
Korištena i dodatna literatura
http://www.w3.org/TR/html4/
http://www.w3.org/TR/2000/REC-xhtml1-20000126/
http://dmoz.org/Computers/Data_Formats/Markup_Languages/HTML/
http://tidy.sourceforge.net/
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2
http://www.htmlhelp.com/reference/css
http://www.html.net/tutorials/css/
http://xhtml.com/en/css/reference/