Izgradnja Web aplikacija - WordPress.comIzgradnja Web aplikacija Prof. dr.sc. Dragutin Kermek...

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

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 tablice

Elementi 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


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

Pomoć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%">


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



<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>480</td></tr></tbody>

</table>



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>480</td></tr></tbody>

</table>

</body>

</html>



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


Okvir

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

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

Izgradnja Web aplikacija - WordPress.comIzgradnja Web aplikacija Prof. dr.sc. Dragutin Kermek...

Documents

Transcript of Izgradnja Web aplikacija - WordPress.comIzgradnja Web aplikacija Prof. dr.sc. Dragutin Kermek...