Vežba II
Dodavanje slika na Web stranicu Slike se na Web stranicu postavljaju korišćenjem oznake <img>, koja najčešće sadrži atribut src koji čitaču saopštava putanju do datoteke sa slikom <img src=“putanja/datoteka”>
Primer 22. <html> <head> <title> Dodavanje slike </title> </head> <body> <img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" /> </body> </html> Snimite dokument pod nazivom Primer22.html na D disk (D:\Grupa I\HTML\Primer22.html)
Dodavanje slika na Web stranicu Postoji nekoliko atributa koji kontrolišu sliku u prozoru čitača: alt – obezbeđuje rezervni tekst za čitač koji ne prikazuje slike ili one čiji su korisnici isključili opciju prikazivanja slike – koriste čitači i kao pomoćni tekst (tekst koji se prikazuje u polju blizu pokazivača miša na ekranu, kad je pokazivač na slici) height i width – definišu veličinu slike koja se prikazuje u prozoru čitača – zadaje se u pikselima ili u procentima širine prozora Web čitača border – zadaje u pikselima debljinu okvira koji čitač treba da nacrta oko slike Ako se slika koristi kao hiperveza, čitač će oko nje nacrtati okvir, pa se preporučuje da se atribut border postavlja na nulu
Primer 23. <html> <head> <title> Dodavanje slike </title> </head> <body> <img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" width="400" height="175" alt="Photo of Florida Sunset" border="3"/> </body> </html> Snimite dokument pod nazivom Primer23.html na D disk (D:\Grupa I\HTML\Primer23.html)
Menjanje poravnanja teksta i slike Čitač Weba će podrazumevano prikazivati objekte HTML dokumenta redosledom kojim ih pronalazi – jedan za drugim sleva na desno, od vrha ka dnu Čitač će staviti objekat uz levu marginu stranice samo ako je već stigao do desne margine reda u kome je trenutno
Primer 24. <html> <head> <title> Dodavanje slike </title> </head> <body> <img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" width="400" height="175" alt="Photo of Florida Sunset" border="3"/> Ilustracija </body> </html> Snimite dokument pod nazivom Primer24.html na D disk (D:\Grupa I\HTML\Primer24.html)
Primer 25. Sledeći kod pokazuje redosled slika i teksta. Oznaka <p> govori čitaču da prikaže tekst koji prati sliku u redu ispod slike: <html> <head> <title> Dodavanje slike </title> </head> <body> <img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" width="400" height="175" alt="Photo of Florida Sunset" border="3"/> <p> Ilustracija </p> </body> </html> Snimite dokument pod nazivom Primer25.html na D disk (D:\Grupa I\HTML\Primer25.html)
Primer 26. Snimite dokument pod nazivom Primer26.html na D disk <head> <title> Dodavanje slike </title> </head> <body> <div align="center"> <img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg“ width="400" height="175"alt="Photo of Florida Sunset" border="3"/> <p> Ilustracija </p> </div> </body> </html> Snimite dokument pod nazivom Primer26.html na D disk (D:\Grupa I\HTML\Primer26.html)
Korišćenje horizontalnih linija Organizovanje Web stranice – korišćenjem horizontalnih linija za odvajanje sadržaja različite vrste Oznaka za unos horizontalne linije je <hr /> Za definisanje izgleda atributa mogu se koristiti sledeći atributi: align - horizontalno poravnanje linije noshade - linija bez senčenja color - boja linije size - određuje debljinu horizontalne linije u pikselima width - dužina linije u pikselima ili u procentima širine prozora Web čitača (na primer 50% čitač će nacrtati liniju dužine koja odgovara polovini širine ekrana)
Primer 27. <html> <head> <title> Horizontalne linije </title> </head> <body> <hr /> <hr width=“20%” /> <hr width=“100%” /> <hr width=“20” /> <hr width=“50” /> <hr width=“100” /> </body> </html> Snimite dokument pod nazivom Primer27.html na D disk (D:\Grupa I\HTML\Primer27.html)
Primer 28. <html> <head> <title> Horizontalne linije </title> </head> <body> <hr width=“60%” align=“left” /> <hr width=“60%” align=“right” /> <hr width=“60%” align=“center” /> </body> </html> Snimite dokument pod nazivom Primer28.html na D disk (D:\Grupa I\HTML\Primer28.html)
Primer 29. Snimite dokument pod nazivom Primer29.html na D disk <head> <title> Horizontalne linije </title> </head> <body> <hr width="60%" size="3" color="#ff0000" /> <hr width="60%" size="8" /> <hr width="60%" size="15" /> <hr width="60%" size="1" noshade="noshade" /> <hr width="60%" size="3" noshade="noshade" /> <hr width="60%" size="8" noshade="noshade" /> </body> </html> Snimite dokument pod nazivom Primer29.html na D disk (D:\Grupa I\HTML\Primer29.html)
Dodavanje hipertekstualne veze na Web stranicu Hipertekstualna veza – reč ili grupa reči koje posetilac treba da pritisne da bi čitač Weba preuzeo Web stranicu (ili drugu datoteku) sa Web servera Najčešće je hipertekstualna veza podvučen tekst – jedna boja se koristi za stranice koje još nisu posećene, a druga za već posećene stranice Za pravljenje hipertekstualne veze koriste se oznake: <a href=“”></a>
Primer 30. Snimite dokument pod nazivom Primer30.html na D disk <head><title> Hipertekstualne veze </title></head> <body> <a href="D:\Grupa I\HTML\Primer 1.html"> Pritisnite ovde da biste prešli na Primer 1</a> <p> Posetite <a href="http://www.yahoo.com">Yahoo!</a></p> <p> Pošalji mi <a href="mailto:hej@zdravo.co.yu"> mail! </a> </p> <p> Posetite <a href="http://www.exclusive.co.yu/onama.htm"> <img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" width="200" height="170"></a></p> <p> <a href="http://www.home.com/cars/corvette.zip"> Pritisnite ovde </a> da preuzmete moje nove korvete </p> </body> </html> Snimite dokument pod nazivom Primer30.html na D disk (D:\Grupa I\HTML\Primer30.html)
HTML tabele
HTML tabele HTML tabele pružaju dve značajne mogućnosti: Tabelarno prikazivanje teksta i brojeva Precizno raspoređivanje objekata na Web stranici Tabele se čitaju s leva na desno – pružaju vrlo pregledan uvid u podatke koji su stavljeni u ćelije Dizajniranje Web stranica može se započeti crtanjem matrice sa redovima i kolonama (tj.tabele) koja po visini i širini odgovara veličini stranice – potom se raspoređuje sadržaj stranice u ćelije po redovima i kolonama
HTML oznake pomoću kojih se prave tabele Osnovne HTML oznake za pravljenje tabele čitaču Weba govore koji deo HTML datoteke da stavi u tabelu i koje podatke iz tog dela da grupiše u redove ćelija: <table> </table> govori čitaču da je tekst između ove dve oznake tabela <tr> </tr> govori čitaču da podaci i možda naslovi između ovih oznaka treba da se nađu u zasebnom redu tabele <td> </td> govori čitaču da su HTML oznake, atributi i tekst (ako ga ima) između ove dve oznake sadržaj (tj. podaci) koji čitač Weba treba da prikaže u koloni tabele
Primer 31. <html> <head> <title> Tabela 1 </title> </head> <body> <table border=“1”> <tr><td>1</td> <td>2</td> <td>3</td></tr> <tr><td>4</td> <td>5</td> <td>6</td></tr> </table> </body> </html> Snimite dokument pod nazivom Primer31.html na D disk (D:\Grupa I\HTML\Primer31.html)
Primer 32. Snimite dokument pod nazivom Primer32.html na D disk <head> <title> Tabela 2 </title> </head> <body> <table border=“1”> <tr><td>A</td> <td>B</td></tr> <tr><td>C</td> <td>D</td></tr> <tr><td>E</td> <td>F</td></tr> </table> </body> </html> Snimite dokument pod nazivom Primer32.html na D disk (D:\Grupa I\HTML\Primer32.html)
Dodavanje ivica, zaglavlja i naslova Atribut border kada se postavi u oznaku <table> govori čitaču debljinu linije (u pikselima) koja će oivičiti svaku ćeliju i samu tabelu <caption></caption> govori čitaču da tekst između ovih oznaka treba da oblikuje u stilu naslova (većina čitača podeblja font) <th> </th> govori čitaču da tekst između ovih oznaka treba da formatira kao zaglavlje
Primer 33. <html> <head> <title> Zaglavlje u redu </title> </head> <body> <table border=“1”> <caption> Zaglavlje u redu </caption> <tr><th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td>1.vrsta, Proizvod 1</td> <td>1.vrsta, Proizvod 2</td></tr> <tr><td>2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td></tr> </table> </body> </html> Snimite dokument pod nazivom Primer33.html na D disk (D:\Grupa I\HTML\Primer33.html)
Primer 34. Snimite dokument pod nazivom Primer34.html na D disk <head> <title> Zaglavlje u koloni </title> </head> <body> <table border=“1”> <caption> Zaglavlje u koloni </caption> <tr><th>Naslov 1</th> <td>1.vrsta, Proizvod 1</td> <td>1.vrsta, Proizvod 2</td></tr> <tr><th>Naslov 2</th> <td>2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td></tr> </table> </body> </html> Snimite dokument pod nazivom Primer34.html na D disk (D:\Grupa I\HTML\Primer34.html)
Ćelije koje se protežu na više kolona ili više redova Za postavljanje ćelije duž više redova, koristi se atribut rowspan u oznaci ćelije <td> ili <th> Za postavljanje ćelije duž više kolona atribut colspan u oznaci ćelije <td> ili <th>
Primer 35. <html> <head><title> Različite širine i visine ćelija </title></head> <body> <table border="1"> <tr><th>Naslov 1</th> <th>Naslov 2</th> <th>Naslov 3</th> </tr> <tr><td rowspan="2">vrsta1&2, kolona 1</td> <td>vrsta 1, kolona 2</td> <td rowspan="2"> vrsta 1&2, kolona 3 </td> </tr> <tr><td>vrsta 2, kolona 2</td></tr> <tr><td colspan="2">vrsta 2, kolona 1&2</td> <td> vrsta 3, kolona 3 </td> </tr> </table> </body> </html> Snimite dokument pod nazivom Primer35.html na D disk (D:\Grupa I\HTML\Primer35.html)
Primer 36. Snimite dokument pod nazivom Primer36.html na D disk <body> <table border="1"> <tr><th>Naslov 1</th> <th>Naslov 2</th> <th>Naslov 3</th> <th>Naslov 4</th> </tr> <tr><td rowspan="2">vrsta 1&2, kolona 1</td> <td>vrsta 1, kolona 2</td> <td colspan="2" rowspan="2">vrsta 1&2, kolona 3&4</td></tr> <tr><td>vrsta 2, kolona 2</td></tr> <tr><td>vrsta 3, kolona 1</td> <td>vrsta 3, kolona 2</td> <td>vrsta 3, kolona 3</td> <td>vrsta 3, kolona 4</td> </tr> <tr><td colspan="3">vrsta 4, kolona 1&2&3</td> <td>vrsta 4, kolona 4</td></tr> </table> </body> Snimite dokument pod nazivom Primer36.html na D disk (D:\Grupa I\HTML\Primer36.html)
Vežba II