iwa 04 tablice okviri

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

[email protected]

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




Zadatak

Pažljivo gledajte sljedeće slike!


http://www.foi.hr/

http://www.foi.hr/




http://www.uky.edu/

http://www.uky.edu/


http://www.whitehouse.gov/

http://www.whitehouse.gov/




http://cnn.com

http://cnn.com


http://www.hinet.hr/

http://www.hinet.hr/




http://www.microsoft.com/


http://www.yahoo.com/

http://www.yahoo.com/




Zadatak

Što je zajedničko prikazanim stranicama?


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

>




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.


Glavni elementi tablice

Glavni elementi tablice su:

•Naslov <caption>...</caption>

•Redak <tr>...</tr>

•Ćelija <td>...</td>




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>


Glavni elementi tablice / 2.

Tablice/Primjer00 – Glavni elementi tablice




Formatiranje rubova i razmaka ćelija

<table border=“1” cellpadding=“5” cellspacing=“1”>


<tr>

<td>Sifra</td>

<td>Naziv</td>

<td>Kolicina</td>


<tr>

<td>747851025010</td>


<td>1</td>

<td>100</td></tr>

<tr>

<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>


Formatiranje rubova i razmaka ćelija / 1.

Tablice/Primjer01 – Formatiranje rubova i razmaka ćelija




Formatiranje širine tablice

<table border=“1” cellpadding=“5” cellspacing=“1” width=“75%”>


<tr>

<td>Sifra</td>

<td>Naziv</td>

<td>Kolicina</td>


<tr>

<td>747851025010</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”


Formatiranje širine tablice / 1.

Talice/Primjer02 – Formatiranje širine tablice




Formatiranje širine ćelija

<table border=“1” cellpadding=“5” cellspacing=“1” width=“75%”>


<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>1</td>

<td>100</td></tr>

<tr>

<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>

width=“80”


Formatiranje širine ćelija / 1.

Tablice/Primjer03 – Formatiranje širine ćelija




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>1</td>

<td>100</td></tr>


<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>


Formatiranje boja ćelija / 1.

Tablice/Primjer04 – Formatiranje boja




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>


<td align=“middle”>747851025010</td>


<td align=“right”>1</td>


<td align=“right”>100</td></tr>


<td align=“middle”>401997601419</td><td>Iomega ZIP</td>




<tr bgcolor=“brown”>

<td colspan=“4” align=“middle”>u k u p n o</td>


</table>

rowspan=“2”


Spajanje ćelija / 1.

Tablice/Primjer06 – Spajanje ćelija




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>


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>




Pomoćni elementi tablice / 2.<tbody bgcolor=“sandybrown”>

<tr>

<td>747851025010</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>


Pomoćni elementi tablice / 3.

Tablice/Primjer07 – Pomoćni elementi tablice




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>


Formatiranje tablice primjenom CSS / 1.

<tbody class=“tablica1”>

<tr class=“tablica1_redak1”>

<td>747851025010</td>


<td>1</td>

<td>100</td>

<td>100</td></tr>


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




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



Tablice/Primjer08 – Formatiranje tablice primjenom CSS





Tablice/Primjer09 – Formatiranje tablice primjenom CSS

Tablice/PzaWeb1.css – Datoteka CSS stilova



Tablice/Primjer09_1 – Formatiranje tablice primjenom CSS

Tablice/PzaWeb3.css – Datoteka CSS stilova




Tablica u tablici<tbody class=“tablica1”>


<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


Tablica u tablici / 1.

Tablice/Primjer10 – Tablica u tablici




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.


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>




Okvir / 2.Okvir<frame

bordercolor="color"


marginheight="marginheight"

marginwidth="marginwidth"

name="framename"

noresize

scrolling="yes"|"no"|"auto"

src="url"

>


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>




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


Okvir / 5.

Okviri/Primjer12 – Okvir




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


Interni okvir / 1.

Interni okvir<iframe

name=“elementidentifier"

src="location"

align="alignment"

height="height"

width="width"

scrolling=“featureswitch"


>

</iframe>




Interni okvir / 2.<iframe src="dolje_lijevo.html" frameborder=“no" width="800" height="500">

</iframe>


Interni okvir / 3.

Okviri/Primjer12_3 – Interni okvir




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/

iwa 04 tablice okviri

Documents