1 / 40

HTML

HTML. Vežba II. 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>. Primer 1. <html> <head>

nasnan
Download Presentation

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

More Related