1 / 44

NAPREDNI HTML

NAPREDNI HTML. Vježbe iz kolegija "Mrežni servisi" Autor: Krunoslav Žubrinić kruno@laus.hr Dubrovnik, 2005/2006. Sadržaj. Tablice Forma Okviri (eng. frames ). Tablice. prikazuju sadržaj na strukturirani način, u retcima i stupcima u praksi tablice se koriste za:

sezja
Download Presentation

NAPREDNI HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.

More Related