1 / 205

Internet Programiranje

Internet Programiranje. Sadržaj predmeta. Cilj predmeta jeste d izajn dinami čkih veb strana koje uključuju interakciju korisnika. Alati koji će se koristiti: ( X ) HTML i CSS JavaScript PHP i MySQL. Raspored predmeta. Prve dve nedelje predavanja – XHTML i CSS

sylvie
Télécharger la présentation

Internet Programiranje

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

  2. Sadržaj predmeta • Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika. • Alati koji će se koristiti: • (X)HTML i CSS • JavaScript • PHP i MySQL

  3. Raspored predmeta • Prve dve nedelje predavanja – XHTML i CSS • Druge dve nedelje vežbe na računarima u laboratoriji paviljona II – XHTML i CSS • Narednetri nedelje predavanja – PHP i MySQL • Narednetri nedelje vežbi u labu paviljona II – PHP i MySQL • Naredne dve nedelje predavanja – JavaScript • Poslednje dve nedelje vežbe u labu paviljona II – JavaScript

  4. Polaganje predmeta • Iz pojedinih modula, XHTML, JavaScript i PHP, se dobija 20, 25 i 15 poena na vežbama, respektivno. • Za XHTML i JavaScript obavezan je jedan blok od 3 časa vežbi, a za PHP su obavezna dva bloka od 3 časa, samo ako su u okviru ovih blokova završeni zadati projekti, uz potvrdu asistenta. • Vežbe se mogu odrađivati samo uz lekarsko opravdanje. • Ostalih 40 poena dobija se na ispitu koji se polaže uz dozvoljenu literaturu.

  5. HTML, XHTML & CSS

  6. Šta je HTML? • HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za prikazivanje veb strana. • HTML stranice imaju ekstenziju.html ili .htm, a nalaze se u određenom direktorijumu servera vezanog na Internet, što ih čini dostupnim na vebu. • Pomoću HTML jezika se generišu dokumenti tipa hipertekst.

  7. Hipertekst • ... je tekst koji sadrživeze ili linkove ka drugim dokumentima ili na samog sebe. • Hipertekst je skup stranica, međusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se može kliknuti. • Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način.

  8. Jezici za opis hiperteksta • Najznačajniji jezici koji opisuju vrste hipertekst: • SGML (Standard Generalized Markup Language) • XML (Extensible Markup Language) • HTML (HyperText Markup Language) • XHTML (Expandable HTML) • CSS (Cascading Style Sheets)

  9. Standardizacija • U prvo vreme HTML se razvijao na adhok način i bio je interpretiran od strane raznih brauzera na različite načine. • Standardizacijom se bavi W3C (WWW Consortium), www.w3c.org koga vodi Tim Berners-Lee • Standardizacija je počela sa HTML 3.2 • HTML je modifikovan tako da odgovara sintaksi XML-a -> XHTML. • Prema standardu XHTML se koristi zajedno sa CSS čime se formatiranje maksimalno izdvaja iz teksta. • Odnos brauzera i standarda se može naći na www.webstandards.org.

  10. HTML vs. XHTML • HTML 4.0 ≈ XHTML 1.0 (usvojen 2000-te) • XHTML je standard koga brauzeri po dogovoru moraju da primenjuju. • XHTML je striktniji u pogledu sintakse što malo otežava programiranje. • XHTML sa CSS jezikom olakšavaju dizajn i ažuriranje velikih veb strana. • XHTML i CSS bolje podržavaju fleksibilni prikaz veb strana. • Stari brauzeri ne podržavaju uvek XHTML.

  11. HTML vs. XHTML • XHTML je osetljiv na veličinu slova. Elementi, atributi i njihove vrednosti su pisane malim slovima. • XHTML zahteva završetak komandi. • XHTML zahteva da atributi uvek budu pod navodnicima, a HTML samo kada sadrže specijalne znake. • XHTML zahteva naredbu DOCTYPE u kojoj se specificira varijanta standarda. • Elementi u HTML-a se opisuju atributima (eng. attributes), a u XHTML-u (properties) osobinama. Neki atributi su potisnuti u XHTML-u. • ...

  12. HTML vs. XHTML • XHTML 1.1 se razvioodstriktneverzije XHTML1.0, alinijezaživeo. • Slična je bila i sudbina standarda XHTML 2.0, koji je prekinuo kompatibilnost unazad sa HTML standardom. • Softverski vendori su uporedo razvijali HTML5, za koga tvrde da je kompatibilan unazad, i posebna pažnja je posvećena kompatibilnosti sa aplikacijama. • HTML5 je našao široku primenu na vebu, iako nije još uvek prihvaćen kao standard. • W3C je osnovao radnu grupu za HTML5, i očekuje se da će ovaj standard biti gotov do kraja 2014-te http://www.w3.org/html/wg/.

  13. Reference • E. Castro, HTML for the World Wide Web with XHTML and CSS, Fifth Edition, Peachpit Press, 2003. • http://www.w3.org/TR/1999/REC-html401-19991224/ • http://www.w3.org/TR/xhtml1/ • http://www.w3.org/TR/html4/index/elements.html • http://www.w3.org/TR/REC-html40/index/attributes.html • http://www.w3.org/TR/CSS2/propidx.html • http://www.webstandards.org/learn/reference/charts/entities/ • http://www.w3schools.com

  14. Alati i (X)HTML • Za generisanje (X)HTML stranice potreban je najobičniji tekst editor, na primer Notepad, Notepad++.Nalazi se u Startmeniju pod Programs -> Accessories. • U MS Word-u, koristitiSave As Plain Text. • Ekstenzija mora biti html • Mogu se koristiti i specijalni alati, na primer WYSIWYG editori: MS Expression Web, Adobe DreamWeaver, WordPress. • Stranica se može videti u okviru veb brouzera: Mozilla Firefox, Google Chrome, Netscape Navigator ili Internet Explorer.

  15. Važan štos • Lako se može videti (X)HTML fajl bilo koje veb strane, i CSS kod, pomoću brauzera. • Mozilla Firefox: Tools -> Web Developer -> Page Source (ili Style Editor) • Internet Explorer: View -> Source, ili Tools -> Developer Tools • Google Chrome: Tools -> View Source (ili Developer Tools)

  16. DOCTYPEkomanda • DOCTYPE komanda određuje verziju jezika i njegovu varijantu i prva je. • Varijante su: • Strict • Transitional • Frameset • Primer: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • Pre DOCTYPE komande često ide i XML komanda: <?xml version="1.0"?>

  17. Pojam taga • (X)HTML komande se pišu u vidu tzv. tagova. • Jedan tag je ustvari komanda koja govori brauzeru šta i kako da uradi tj. na koji način da prikaže sadržaj vaše stranice.

  18. Tagovi • Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr: <html>. • Ovaj tag se nalazi na početku svakog HTML dokumenta i govori brauzeru da je fajl koji je upravo počeo da učitava HTML dokument i da kao takvog treba i da ga prikaže. • Većina tagova ima i početni i završni tag. Završni tag se dobija dodavanjem znaka "/" i označava mesto na kom prestaje dejstvo početnog taga, npr: </html>. • Ovaj tag govori browseru da je to kraj (X)HTML dokumenta.

  19. Tagovi • Prosti tagovi za opisivanje jednostavnih elemenata logičke strukture. Oblika su: <x>. U XHTML-u je obavezno da se završe kosom crtom: <x />. • Složeni tagovi su zagrade oblika <x>y</x> kojima je opisan izgled dela teksta y. • Moguće je koristiti atributeu okviru taga kojima se dodeljuju određene vrednosti: <xa1=v1a2=v2 ...> y </x>. • U XHTML-u elementi (x), atributi (a1,a2), i njihove predefinisane vrednosti (v1,v2) su malim slovima. Vrednosti atributa su uvek pod navodnicima.

  20. Struktura (X)HTML stranice • Minimalna struktura (X)HTML-dokumenta obuhvata tagove: • <html>, </html> - zagrade (X)HTMLteksta; • <head>, </head> - zagrade zaglavlja, sadrži meta-definicije (X)HTMLdokumenta; • <title>, </title> - zagrade za naziv (X)HTMLdokumenta i • <body>, </body> - zagrade teksta (X)HTML dokumenta.

  21. Jezik veb strane • U html tagu može da se specificira Namespace i jezik: <htmlxmlns='http://www.w3.org/1999/xhtml' xml:lang='sr' lang='sr'>

  22. Zaglavlje (X)HTML dokumenta • Sveonošto se napiše u zaglavljudokumenta neće se prikazati u prozoru brauzera već obično služisamodapružinekeinformacije o stranici. • U zaglavlju se specificira azbuka a takođe i naslov veb strane koji gledaju pretraživači: <head><meta http-equiv="content-type" content="text/html; charset=UTF-8“/><title>Google</title></head> • Pričuvanju dokumenta trebaizabratiEncoding UTF-8

  23. Telo (X)HTML dokumenta • Sve ono što je napisano između tagova <body> i </body> predstavlja telo dokumenta • Telo dokumenta pojaviće se kao sadržaj prezentacije u prozoru brauzera.

  24. Izgled stranice DOCTYPE… <html> <head> <title> Ovde je naziv prezentacije </title> </head> <body> Ovde se unosi sve ono sto želite da se vidi u prezentaciji </body> </html>

  25. Komentar • Dodatna opcija omogućava da se obeleži komentar u (X)HTMLobeleženom tekstu koji se neće videti u vizuelizaciji dokumenta. • Na primer: <!-- komentar -->

  26. Jedinice veličina • Jedinice za veličinu slova, ili elemenata su: %, in, cm, mm, em (odnos prema definisanoj veličini fonta), pt (=1/72in), pc (=12pt), px (tačka na ekranu) • % se računa u odnosu na osnovnifont, ako se radi o znakovima, i u odnosu na veličinu roditeljskog elementa ako se radi o elementima. Pri tome veličina roditeljskog elementa mora biti definisana, osim za html element.

  27. Jedinice veličina • Da bi body imao veličinu 100%, odnosno istu kao html element, veličina html elementa mora biti definisana, apsolutno, ili kao 100%. • Jedinice vh i vw označavaju 1/100 visine i širine ekrana, respektivno (CSS3).

  28. Naslovi • Naslovi (engl. headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za naslov ima opšti oblik: <hn> naslovNivoa_n </hn> gde n uzima vrednosti od 1 do 6.

  29. Naslovi <h1> Naslov H1 </h1> <h2> Naslov H2 </h2> <h3> Naslov H3 </h3> • Navedeni kod se na (X)HTML stranici prikazuje na sledeći način: Naslov H1 Naslov H2 Naslov H3

  30. Tagovi za formatiranje

  31. Paragraf • Tag paragrafa je <p>. Paragraf počinje u novom redu. levo centrirano desno • HTML kod koji prikazuje gornji primer je: <p align="left">levo </p> <p align="center">centrirano </p> <p align="right">desno</p> • Inače atribut align je kod XHTML-a potisnut

  32. Parcijalizacija teksta • Tekst se može podeliti na blokove pomoću taga <div>. • Blok počinje u novom redu, kao i tekst posle bloka. • Korisni atributi ovog taga (kaoidrugih) su class i id, i označavaju klasu određenog bloka, i partikularni blok da bi se na njega mogao aplicirati određeni stil. <div class=“EngleskiParagrafi”> <p> Paragraf 1 </p> <p> Paragraf 2 </p> </div>

  33. Izdvajanje teksta • Izdvajanje teksta koji ne počinje u novom redu, se vrši pomoću taga <span>. • Tab span ima iste atribute kao tag div, tj. class i id. Tekst na srpskom <span class=“engl”> text in English </span> nastavak teksta na srpskom.

  34. XHTML Razmak: &#160 •       xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. • Paragraf se može uvući pomoću sledećeg koda: <p> &#160;&#160;&#160;&#160; xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. </p>

  35. HTML Razmak: &nbsp •       xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. • Paragraf se može uvući pomoću sledećeg koda: <p> &nbsp;&nbsp;&nbsp;&nbsp; xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. </p>

  36. Automatski prelom linije <html> <head><title> Rad sa prelomom linije </title> </head> <body> <h1>Come Scroll with me, away to the right, as I listout all of the long answers to themeaning of life accessible only to those that can scroll,scroll, scroll...</h1> </body> </html>

  37. Prelom linije u (X)HTML-u <html> <head><title> Rad sa prelomom linije </title> </head> <body> <h1>Come Scroll with me, away to the right, as I listout all of the long <br /> answers to themeaning of life accessible only to those that can scroll,scroll, scroll...</h1> </body> </html>

  38. Nema preloma linije u HTML-u (potisnut) <html> <head><title> Rad sa prelomom linije </title> </head> <body> <nobr><h1>Come Scroll with me, away to the right, as I listout all of the long answers to themeaning of life accessible only to those that can scroll,scroll, scroll...</h1></nobr> </body> </html>

  39. Atribut title • Atribut title se može dodeliti bilo kom delu veb strane, i njegova vrednost se pojavljuje iznad kursora kada korisnik pređe preko tog dela strane mišem. • Nije potisnut u XHTML-u. • Primer: <div id=“sad” title=“Sadržaj”> Uvod <br /> Razrada <br /> Zaključak </div>

  40. Ubacivanje slika • U okviru (X)HTML stranice slika se prikazuje pomoću <img> taga. • Ovaj tag mora imati bar jedan atribut -src atribut koji definiše naziv, i eventualno lokaciju, grafičkog fajla. • Da bi se promenila originalna veličina slike, željena veličina se može definisati pomoću dva atributa: height i width. <img src="osam.gif" height="50%” width="50%” />

  41. Pozicioniranje slike u HTML-u • Pozicioniranje se vršilo u HTML-u pomoću atributa align, koji je potisnut u XHTML-u. • Vrednosti atributa align mogu biti: • left - postavlja sliku uz levu marginu: <img src="osam.gif" align="left” /> • right - postavlja sliku uz desnu marginu: <img src="osam.gif" align="right“ /> • top - poravnava vrh slike sa vrhom teksta u paragrafu u kome se nalazi: <img src="osam.gif" align="top” /> • bottom - poravnava donjom ivicom sa donjom ivicom teksta: <img src="osam.gif" align="bottom">

  42. Pozicioniranje slike u HTML-u • Vrednosti atributa align mogu biti: • middle - postavlja sliku tako je na donjoj ivici slova na sredini teksta: <img src="osam.gif" align="middle"> • absmiddle - postavlja sliku tako da se sredina slike i sredina teksta poklapaju: <img src="osam.gif" align="absmiddle">

  43. Izgled slike u HTML-u • Prazan prostor između slike i okolnog teksta, ili nekih drugih elemenata stranice, može se definisati pomoću dva atributa: hspace i vspace. Vrednost ova dva atributa se zadaje u pikselima. Ovo su potisnuti atributi. <img src="osam.gif" hspace="50px" vspace="50px"> • U okviru stranice može se definisati i debljina granice pomoću atributa border čija se vrednost zadaje u pikselima. Ovo je potisnut atribut. <img src="osam.gif" border="5px"> • alt atribut će u slučaju da čitač korisnika stranice iz bilo kog razloga ne učita sliku, na onom mestu gde bi trebalo da bude slika prikazati tekst koji predstavlja vrednost ovog atributa. Nije potisnut u XHTML-u. <img src="osam.gif" alt="Broj osam">

  44. Linkovi • Veze između različitih stranica se nazivaju linkovi ili hiperveze. One omogućavaju jednostavan prelazak sa jednog mesta na stranici na drugo mesto unutar same stranice ili na sasvim novoj stranici. • Linkovi koji se mogu definisati u okviru jedne HTML stranice mogu se podeliti na tri grupe: • krajnja pozicija se nalazi na stranici koja se nalazi se na istom serveru gde i stranica sa polaznom pozicijom, • krajnja pozicija se nalazi na stranici se nalazi na drugom serveru, • krajnja pozicija pripada istoj stranici kao i polazna pozicija.

  45. Linkovi • Za sve linkove definicija početne pozicije se dobija korišćenjem taga <a>. Ovo je složeni tag. • Sintaksa ovog taga podrazumeva da se u okviru polazne pozicije opišu: • fizička pozicija polazne pozicije i • fizička lokacija krajnje pozicije. • Polazna pozicija označava na stranici mesto sa koga se prelazi na neki drugi deo te ili druge stranicei definiše se pomoću atributa href: <a href=“imeKrajnjePozicije”> polaznaPozicija </a>

  46. Link na stranicu u okviru istog servera • Najjednostavniji slučaj rada sa linkovima je prelazak na stranicu u okviru istog servera. • Kod ove vrste linkova koristi se tag <a> sa atributom href i nazivom stranice do koje se želi da se napravi veza. <a href="Prva.html"> Veza do stranice Prva.html </a>

  47. Link na stranicu u okviru istog servera • Stranica sa krajnjom pozicijom osim što pripada istoj aplikaciji, odnosno serveru, u opštem slučaju ne mora da se i fizički nalazi u istom direktorijumu gde i stranica sa polaznom pozicijom. • Postoje dva rešenja ovog problema, a to je rad sa apsolutnim i relativnim putanjama • Korišćenje apsolutnih putanja podrazumeva u okviru href atributa navođenje pune putanje do stranice sa krajnjom pozicijom, na primer href=”c:\Aplikacije\Poslovanje\Klijent\Prva.html” • Korišćenje relativnih putanja je mnogo podesnije, jer se zasniva na kretanju u odnosu na direktorijum stranice sa polaznom pozicijom.

  48. Link na stranicu u okviru istog servera • Neka direktorijum X sadrži stranice 1 i 2, Y stranicu 3, a Z stranicu 4 • Za stranicu 1, • relativna adresa stranice 2 je “2.html”; • relativna adresa stranice 3 je “Y/3.html”; • relativna adresa stranice 4 je “Y/Z/4.html”; • Za stranicu 3, • relativna adresa stranice 2 je “../2.html” (simbol .. označava direktorijum iznad direktorijuma gde se nalazi stranica sa polaznom pozicijom); • relativna adresa stranice 4 je “Z/4.html”; • Za stranicu 4, • relativna adresa stranice 2 je “../../2.html”; • relativna adresa stranice 3 je “../3.html”.

  49. Link na stranicu izvan servera • Da bi se pristupilo stranici izvan servera potrebno je navesti celu veb adresu te stranice. Opšti oblik adrese koja se pojavljuje kao vrednost href atributa je sema://domenServera [:port]/putanja/ imeDokumenta • Primer: <a href="http://www.etf.rs/"> Link ka Elektrotehničkom fakultetu </a>

  50. Link na istu stranicu • Za ovu vrstu linkova prvo se napravi oznaka na mestu na stranici gde se nalazi krajnja pozicijia. Oznaka se dobija pomoću atributa id u <a> tagu. • Na polaznoj poziciji navodi se tag sa imenom krajnje pozicije: <a href=“#idKrajnjePozicije"> polaznaPozicija </a> • Na krajnjoj poziciji se navodi tag koji definiše ime krajnje pozicije: <a id=“idKrajnjePozicije”> krajnjaPozicija </a>

More Related