Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML PowerPoint Presentation

HTML

134 Vues Download Presentation
Télécharger la présentation

HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HTML Vežba II

  2. Pravljenje uređenih lista • U uređenim listama Web sadržaj se organizuje po abecednom ili numeričkom redosledu • Elementi uređene liste postavljaju se između početne i završne oznake <ol></ol>, a svaki elemenat nalazi se u okviru oznaka <li></li>

  3. Primer 1. <html> <head> <title> Primer uređene liste </title> </head> <body> <h2> ProgramLoad </h2> <ol> <li>Insert CD into Computer </li> <li>Click the Start Icon </li> <li>Load the Program </li> <li>Play the Game </li> </ol> </body> </html> Snimite dokument pod nazivom Primer1.html na D disk (D:\Grupa II\HTML 1\Primer1.html)

  4. Uređene liste • Čitač Weba podrazumevano prikazuje arapske brojeve (1,2,3,...) ispred svakog elementa i to tako što prvi elemenat numeriše jedinicom • Atribut type postavljen u početnu oznaku omogućava korišćenje slova ili rimskih brojeva: • <ol type=“1”> - prikazuje elemente koristeći arapske brojeve (podrazumevano) • <ol type=“a”> - prikazuje elemente koristeći mala slova • <ol type=“A”> -prikazuje elemente koristeći velika slova • <ol type=“i”> -prikazuje elemente koristeći rimske brojeve malim slovima • <ol type=“I”> -prikazuje elemente koristeći rimske brojeve velikim slovima

  5. Uređene liste • Atribut start omogućava početak liste različit od broja jedan (ili abecedno slovo različito od a) • <ol type=“1” start=“5”> lista će početi od broja 5 • <ol type=“a” start=“5”> lista će početi od slova e, jer je to peto slovo abecede

  6. Primer 2. <html> <head> <title> Primer uređene liste </title> </head> <body> <h2> ProgramLoad </h2> <ol type=“a” start=“5”> <li>Insert CD into Computer </li> <li>Click the Start Icon </li> <li>Load the Program </li> <li>Play the Game </li> </ol> </body> </html> Snimite dokument pod nazivom Primer2.html na D disk (D:\Grupa II\HTML 1\Primer2.html)

  7. Neuređene liste • U neuređenim listama koriste se simboli da bi se označio svaki element liste – pružaju mogućnost grupisanja tekstualnih elemenata kad redosled nije bitan • Elementi neuređene liste postavljaju se između početne i završne oznake <ul></ul>, a svaki elemenat nalazi se u okviru oznaka <li></li> • Čitač će podrazumevano prikazati punu crnu tačku (•) ispred svakog elementa

  8. Primer 3. <html> <head> <title> Primer neuređene liste </title> </head> <body> <h2> Lista za kupovinu </h2> <ul> <li>Hleb </li> <li>Mleko </li> <li>Margarin </li> <li>Šećer </li> </ul> </body> </html> Snimite dokument pod nazivom Primer3.html na D disk (D:\Grupa II\HTML 1\Primer3.html)

  9. Neuređene liste • Atribut typepostavljen u početnu oznaku omogućava korišćenje drugačijih oznaka elemenata neuređene liste: • <ul type=“disc”> - Prikazuje elemente koristeći punu crnu tačku (podrazumevano) • <ul type=“square”> - prikazuje elemente koristeći kvadrat crnih ivica • <ul type=“circle”> - prikazuje elemente koristeći crnu kružnicu (tj.obris kruga)

  10. Primer 4. <html> <head> <title> Primer neuređene liste </title> </head> <body> <h2> Lista za kupovinu </h2> <ul type=“circle”> <li>Hleb </li> <li>Mleko </li> <li>Margarin </li> <li>Šećer </li> </ul> </body> </html> Snimite dokument pod nazivom Primer4.html na D disk (D:\Grupa II\HTML 1\Primer4.html)

  11. Ugnežđene liste • Ugnežđene liste mogu biti uređene ili neuređene • Nastaju umetanjem oznaka ugnežđene liste unutar skupa početnih i završnih oznaka spoljašnje liste

  12. Primer 5. <html> <head> <title> Primer ugnežđene liste </title> </head> <body> <h2> ProgramLoad </h2> <ol> <li>Insert CD into Computer </li> <li>Click the Start Icon </li> <li>Load the Program </li> <ol type=“a”> <li>Double click the game icon </li> <li>Enter serial number </li> <li>Double click the game icon </li> </ol> <li>Play the Game </li> </ol> </body></html> Snimite dokument pod nazivom Primer5.html na D disk (D:\Grupa II\HTML 1\Primer5.html)

  13. Pravljenje lista definicije • Lista termina uz koje stoji definicija • Čitač Weba uvlači svaku definiciju u sledeći red, ispod termina koji se definiše • U listi definicija koja se definiše između elemenata <dl></dl> koriste se dve vrste elemenata: • <dt></dt> - početna i završna oznaka termina koji treba da bude opisan ili definisan • <dd></dd> - početna i završna oznaka opisa (definicije) – označava jedan ili više pasusa uvučenog opisnog teksta

  14. Primer 6. <html> <head> <title> Primer liste definicija </title> </head> <body> <h2 align=“center”> HTML osnove </h2> <dl> <dt> <b> Osnovne HTML oznake </b></dt> <dd>HTML oznake su naredbe koje govore browser-u (čitaču) šta i kako da uradi tj. na koji način da prikaže sadržaj stranice.</dd> <dt> <b>Oznaka za prelom reda </b> </dt> <dd>Oznaka za prelom reda govori čitaču da pređe u sledeći red pre nego što prikaže ono što se još nalazi na strani.</dd> </dl> </body> </html> Snimite dokument pod nazivom Primer6.html na D disk (D:\Grupa II\HTML 1\Primer6.html)

  15. Dodavanje slika na Web stranicu • Slike se na Web stranicu postavljaju korišćenjem oznake <img>, koja najčešće sadrži atribut srckoji čitaču saopštava putanju do datoteke sa slikom • <img src=“putanja/datoteka”>

  16. Primer 7. <html> <head> <title> Dodavanje slike </title> </head> <body> <img src=”C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" > </body> </html> Snimite dokument pod nazivom Primer7.html na D disk (D:\Grupa II\HTML 1\Primer7.html)

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

  18. Primer 8. <html> <head> <title> Dodavanje slike </title> </head> <body> <img src="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 Primer8.html na D disk (D:\GrupaII\HTML 1\Primer8.html)

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

  20. Primer 9. <html> <head> <title> Primer slike i teksta </title> </head> <body> <img src="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 Primer9.html na D disk (D:\Grupa II\HTML 1\Primer9.html)

  21. Primer 10. • 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> Primer slike i teksta </title> </head> <body> <img src="C:/Documents and Settings/All Users/Documents/My Pictures/SamplePictures/Sunset.jpg" width="400" height="175"alt="Photo of Florida Sunset" border="3"> <p> Ilustracija </p> </body> </html> Snimite dokument pod nazivom Primer10.html na D disk (D:\GrupaII\HTML 1\Primer10.html)

  22. Primer 11. <html> <head> <title> Primer slike i teksta </title> </head> <body> <center><img src="C:/Documents and Settings/All Users/Documents/My Pictures/SamplePictures/Sunset.jpg" width="400" height="175“alt="Photo of Florida Sunset" border="3"> <p> Ilustracija</p></center> </body> </html> Snimite dokument pod nazivom Primer11.html na D disk (D:\GrupaII\HTML 1\Primer11.html)

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

  24. Primer 12. <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 Primer12.html na D disk (D:\GrupaII\HTML 1\Primer12.html)

  25. Primer 13. <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 Primer13.html na D disk (D:\GrupaII\HTML 1\Primer13.html)

  26. Primer 14. <html> <head> <title>Horizontalne linije </title> </head> <body> <hr width=“60%” size=“3” color="red"> <hr width=“60%” size=“8”> <hr width=“60%” size=“15”> <hr width=“60%” size=“1” noshade> <hr width=“60%” size=“3” noshade> <hr width=“60%” size=“8” noshade> </body> </html> Snimite dokument pod nazivom Primer14.html na D disk (D:\GrupaII\HTML 1\Primer14.html)

  27. 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 • Naječšć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>

  28. Primer 15. <html> <head> <title> Hipertekstualne veze </title></head> <body> <a href="D:\Grupa I\HTML 1\Primer 1.html">Pritisnite ovde da biste prešli na Primer1</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="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 Primer15.html na D disk (D:\GrupaII\HTML 1\Primer15.html)

  29. HTML tabele

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

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

  32. Primer 16. <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 Primer16.html na D disk (D:\GrupaII\HTML 1\Primer16.html)

  33. Primer 17. <html> <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 Primer17.html na D disk (D:\GrupaII\HTML 1\Primer17.html)

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

  35. Primer 18. <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 Primer18.html na D disk (D:\Grupa II\HTML 1\Primer18.html)

  36. Primer 19. <html> <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 Primer19.html na D disk (D:\Grupa II\HTML 1\Primer19.html)

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

  38. Primer 20. <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 Primer20.html na D disk (D:\Grupa II\HTML 1\Primer20.html)

  39. Primer 21. <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> <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></html> Snimite dokument pod nazivom Primer21.html na D disk (D:\GrupaII\HTML 1\Primer21.html)

  40. HTML Vežba II