NAPREDNI HTML

1. NAPREDNI HTML Vježbe iz kolegija "Mrežni servisi" Autor: Krunoslav Žubrinić kruno@laus.hr Dubrovnik, 2005/2006.

2. Sadržaj • Tablice • Forma • Okviri (eng. frames)

3. Tablice • prikazuju sadržaj na strukturirani način, u retcima i stupcima • u praksi tablice se koriste za: • prikaz strukturiranih podataka • pozicioniranje sadržaja na točno određeno mjesto na stranici • sadržaj se smješta u određenu ćeliju

4. HTML oznake tablice • HTML oznake tablice • <table></table> određuje tablicu • <th></th> određuje zaglavlje tablice • <tr></tr> određuje redak tablice • <td></td> određuje ćeliju tablice • <caption></caption> određuje opis tablice tablica zaglavlje redak 1 redak 2

5. Osnovni atributi tablice • debljina okvira (u pixelima) <tableborder="?"> </table> • širina (u % ili pixelima) <tablewidth="?"></table> • u odnosu na širinu prozora preglednika • ako se ne navede tablica zauzima širinu sadržaja <tdwidth="?"></td> • visina (u % ili pixelima) <tableheight="?"></table> • u odnosu na visinu prozora preglednika • ako se ne navede tablica zauzima visinu sadržaja <tdheight="?"></td>

6. Primjer 1 (okvir 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>

7. Primjer 2 (širina i visina tablice) <table width="50%" height="350" border="2"> <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>

8. Primjer 3 (širina i visina ćelije) <table border="2"> <tr> <th width="60%" height="75">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>

9. Osnovni atributi tablice • prazan prostor oko sadržaja ćelije (u pixelima) <tablecellpadding="?"> </table> • ako se ne navede, po defaultu je 1 ili 2 pixela • ako se želi ukloniti treba staviti da je 0 • razmak između ćelija (u pixelima) <tablecellspacing="?"> </table> • ako se ne navede, po defaultu je 1 ili 2 pixela • ako se želi ukloniti treba staviti da je 0

10. Osnovni atributi tablice • horizontalno poravnanje sadržajau ćeliji <tralign="?"> </tr> <tdalign="?"> </td> • left, center ili right <captionalign="?"> </caption> • left, center, right, top ili bottom • vertikalno poravnanje sadržajau ćeliji (samo IE!) <trvalign="?"> </tr> <tdvalign="?"> </td> • top, middle ili bootom

11. Primjer 4 (prostor oko sadržaja) <table border="2" cellpadding="15"> <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>

12. Primjer 5 (razmak između ćelija) <table border="2" cellspacing="15"> <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>

13. Primjer 6 (tablica s razmacima) <table> <tr> <td><img src="pic-1a.gif" width="56" height="102" border="0"></td> <td><img src="pic-1b.gif" width="56" height="102" border="0"></td> <td><img src="pic-1c.gif" width="56" height="102" border="0"></td> </tr> <tr> <td><img src="pic-2a.gif" width="56" height="102" border="0"></td> <td><img src="pic-2b.gif" width="56" height="102" border="0"></td> <td><img src="pic-2c.gif" width="56" height="102" border="0"></td> </tr> </table>

14. Primjer 7 (tablica bez razmaka) <tablecellspacing="0" cellpadding="0" border="0"> <tr> <td><img src="pic-1a.gif" width="56" height="102" border="0"></td> <td><img src="pic-1b.gif" width="56" height="102" border="0"></td> <td><img src="pic-1c.gif" width="56" height="102" border="0"></td> </tr> <tr> <td><img src="pic-2a.gif" width="56" height="102" border="0"></td> <td><img src="pic-2b.gif" width="56" height="102" border="0"></td> <td><img src="pic-2c.gif" width="56" height="102" border="0"></td> </tr> </table>

15. Primjer 8 (poravnanje sadržaja) <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> <td>Ashley Judd</td> </tr> <tr> <td align="center">BW</td> <td>Benjamin Weir</td> </tr> <tr> <td align="center">TLJ</td> <td>Tommy Lee Jones</td> </tr> </table>

16. Spojene ćelije tablice • spojeni redovi <tdrowspan="?"></td> • broj spojenih redova • spojeni stupci <tdcolspan="?"></td> • broj spojenih stupaca

17. Primjer 9 (spojeni redovi ili stupci) <table border="1" cellpadding="10"> <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>

18. Primjer 10 (spojeni redovi i stupci) <table border="1" cellpadding="10"> <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>

19. Forma • služi za interakciju korisnika • korisnik unosi podatke i pokreće odgovarajući program • primjena : • prijava korisnika za pristup web stranici • prikupljanje informacija o posjetiteljima • on-line kupovinu • sučelje prema bazi podataka • unos podataka za pretraživanje stranice • ...

20. Forma • <form></form> element • "action" atribut određuje što će se uraditi s podacima (u koji program će se podaci proslijediti) <form method="post" action="neka_akcija"></form> • akcije: slanje podataka pomoću programa za elektroničku poštu <form method="post" action="mailto:korisnik@domena.hr" enctype="text/plain"></form> pozivanje izvršnog programa na poslužitelju <form method="post" action="program.cgi"></form> prijelaz na drugu html stranicu <form action="nova_stranica.html"></form>

21. Elementi forme • <input /> element je osnovni element forme • vrijednost atributa "type" određuje njegovu namjenu • unos podataka <input type="text" /> • polje za unos lozinke <input type="password" /> • radio button <input type="radio" /> • checkbox <input type="checkbox" /> • ostali važni atributi • "id" jedinstveno označuje element u dokumentu • "value" defaultna vrijednost elementa • "size"veličina polja na ekranu • "maxlength" maksimalna dužina sadržaja

22. Elementi forme (nastavak) • skriveno polje <input type="hidden" /> • npr kada šaljete podatke na mail pomoću cgi programa u takvom podatku se definira e-mail adresa na koju s epodaci šalju • tipka za čišćenje polja forme <input type="reset" /> • tipka za proslijeđivanje podataka forme <input type="submit" /> • vrijednost atributa value mijenja prikaz teksta na tipki • unos veće količine teksta <textarea></textarea> • atributi: rows i cols - broj redaka i stupaca

23. Elementi forme (nastavak) • padajući izbornik (eng. Pull Down List) • definicija izbornika <select></select> • atribut size za broj prikazanih izbora • po defaultu size=1 • ako je broj prikazanih izbora veći od 1 element se naziva izbornik s klizajućom trakom (eng. Scrolling List) • pojedini izbor <option></option> • atribut selected za izabrani podatak

24. Primjer 11 (elementi forme) <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 informatičke časopise?<br /> DA<input type="radio" id="r_da" value="DA" checked="checked" /> NE<input type="radio" id="r_ne" value="NE" /> <br /><br /> Koje informatičke časopise čitate?<br /> Bug<input type="checkbox" id="c1"value="C1" /> Mreža<input type="checkbox" id="c2" value="C2" /> PC chip<input type="checkbox" id="c3" value="C3" /> </form>

25. Izgled u pregledniku

26. Primjer 12 (elementi forme) <form> Komentar: <textarea id="tekst" rows="3" cols="20"></textarea> <br /><br /> Čitate li informatičke č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" /> <input type="submit" id="sub1" /> <input type="reset" id="res1" /> </form>

27. Okviri (eng. frames) • služe za istovremeni prikaz više 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 • može se navesti * - čitav preostali prostor <frameset rows="50%,30%,20"> ili <frameset rows="50%,*,20%"> • skupovi okvira se mogu međusobno ugnježđivati • nedostatak: stanje određenih okvira ne može se zapamtiti (uključiti u "favorites") preglednika

28. Okviri (eng. frames) • <frame ... /> - definira se stranica koja će se prikazivati u određenom okviru • atributi: • src="stranica.html" - stranica koja se otvara • name ili id - naziv okvira (ako se navdede može se pomoću target atributa anchor elementa određena stranica otvoriti u određenom okviru <framesrc="p1.html"name="okvir1"> ... <a href="p1.html"target="okvir1">Otvoristranicu </a> <noframes></noframes> definira izgled stranice koja će se prikazivati u browserima koji nemaju mogućnost rada s okvirima

29. Primjer 13 (skup okira) <html> <head> <title>Ovo je primjer korištenja okvira </title> </head> <frameset rows="50%, 50%" cols="40%, 30%, 30%" > <frame src="p9.html" /> <frame src="p8.html" /> <frame src="p4.html" /> <frame src="p10.html" /> <frame src="p2.html" /> <frame src="p1.html" /> </frameset> <noframes> <body> Prikazuju se 6 dokumenta s primjerima tablica. </body> </noframes> </html>

30. Izgled u pregledniku

31. Primjer 14 <html> <head> <title>Ovo je primjer korištenja okvira </title> </head> <frameset cols="50%,*"> <frameset rows="50%,*"> <frame name="p1" src="p1.html"> <frame name="p2" src="p2.html"> </frameset> <frameset rows ="33%,33%,*"> <frame name="p3" src="p3.html"> <frame name="p4" src="p4.html"> <frame name="p5" src="p5.html"> </frameset> </frameset> <noframes> <body> Prikazuju se 5 dokumenta s primjerima tablica. </body> </noframes> </html>

32. Izgled u pregledniku

33. Primjer 15 <html> <head> <title>Ovo je primjer korištenja okvira </title> </head> <frameset cols="30%,*"> <frame name="index1" src="index1.html"> <frame name="stranica" src="p1.html"> </frameset> <noframes> <body> Prikazuju se primjeri s vježbi. </body> </noframes> </html>

34. Primjer 15 (nastavak) <html> <body> <h2>Primjeri</h2> <a href="p1.html" target="stranica">Okvir tablice</a><br /> <a href="p2.html" target="stranica">Širina i visina tablice</a><br /> <a href="p3.html" target="stranica">Širina i visina ćelije</a><br /> <a href="p4.html" target="stranica">Prostor oko sadržaja</a><br /> <a href="p5.html" target="stranica">Razmak između ćelija</a><br /> <a href="p6.html" target="stranica">Tablica s razmacima</a><br /> <a href="p7.html" target="stranica">Tablica bez razmaka</a><br /> <a href="p8.html" target="stranica">Poravnanje sadržaja</a><br /> <a href="p9.html" target="stranica">Spojeni redovi ili stupci</a><br /> <a href="p10.html" target="stranica">Spojeni redovi i stupci</a><br /> <a href="p11.html" target="stranica">Elementi forme 1</a><br /> <a href="p12.html" target="stranica">Elementi forme 2</a><br /> <a href="p13.html" target="stranica">Okviri 1</a><br /> <a href="p14.html" target="stranica">Okviri 2</a><br /> </body> </html>

35. Izgled u pregledniku

36. Literatura • Vodiči kroz HTML • http://www.w3schools.com/html/ • http://www.w3.org/MarkUp/Guide/Advanced.html • http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html • HTML 4 i XHTML 1 specifikacija • http://www.w3.org/TR/html4/ • http://www.w3.org/TR/xhtml1/ • Popis svih elemenata HTML-a 4 • http://www.w3.org/TR/REC-html40/index/elements.html • Knjige • B. Kennedy, C. Musciano, HTML & XHTML: The Definitive Guide, O'Reilly, 2002

37. Zadatak 1 Napraviti tablicu slijedećeg oblika koja zauzima čitavu širinu preglednika

38. Zadatak 2 Napraviti tablicu slijedećeg oblika

39. Zadatak 3 Napraviti HTML stranicu čij sadržaj je formatiran pomoću tablice Slika: http://www.dubrovnikportal.com/kruno/ms/slike/kompot.jpg

40. Zadatak 4 Napravite jednostavnu formu s 2 polja. Polje komentara ima 4 retka i 25 stupaca. Poslati sadržaj na vašu e-mail adresu pomoću mail klijenta

41. Zadatak 5 Formu iz prethodnog zadatka formatirajte pomoću tablice

42. Zadatak 6 Napravite web stranicu slijedećeg oblika

43. Zadatak 7 Napravite web stranicu slijedećeg formata pomoću okvira. Linkovi su zadaci s vježbi i neka se otvaraju u donjem desnom okviru.

44. Zadatak 8 Isti izgled stranice iz zadatka 7 napravite pomoću tablica. Linkovi neka se otvaraju u novom prozoru preglednika.