od html a do php a - university of nišpmf.ni.ac.rs/pmf/vesti/uvod u web programiranje.pdf · od...
TRANSCRIPT
![Page 1: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/1.jpg)
Od HTML – a do PHP – a
Stefan Stanimirović
Departman za računarske nauke Prirodno – matematički fakultet
Univerzitet u Nišu Email: [email protected]
![Page 2: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/2.jpg)
2
![Page 3: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/3.jpg)
Šta je internet?
Kolekcija računarskih mreža koje koriste protokol za razmenu podataka
World Wide Web (WWW) predstavlja kolekciju svih veb sajtova i stranica, dok je internet veći pojam koji obuhvata različite servise kao što su email, četovanje, online igre, itd.
3
![Page 4: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/4.jpg)
Zanimljive činjenice iz istorije interneta
Nastao kao projekat Ministarstva Odbrane SAD-a. Početni projekat je nosio ime ARPANET (1960-70)
E-mail je „rođen“ 1971
Do 1987. internet je obuhvatao skoro 30.000 hostova
Tim Berners-Lee je kreirao WWW 1989-91
4
![Page 5: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/5.jpg)
Zanimljive činjenice iz istorije interneta
Popularni veb pregledači: Netscape - 1994
IE – 1995
Popularni sajtovi:
Amazon.com - 1995
Google - Januar 1996
Wikipedia - 2001
MySpace - 2003
Facebook - Februar 2004
5
![Page 6: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/6.jpg)
Veb serveri
Veb server je softver koji sluša zahteve za veb stranama
Primeri:
Apache
Microsoft Internet
Information Server (IIS)
6
![Page 7: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/7.jpg)
Veb pregledač
Softver koji prihvata i prikazuje dokumente sa veb servera Mozilla Firefox
Microsoft Internet Explorer (IE)
Apple Safari
Google Chrome
Opera
Stranica koja se traži locira se preko URL - Uniform Resource Locator
Primer: http://dept.ju.edu/cs/index.html
7
![Page 8: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/8.jpg)
Veb jezici
Hypertext Markup Language (HTML): koristi se za pisanje veb stranica
Cascading Style Sheets (CSS): koristi se za stilizovanje veb strana
PHP Hypertext Processor (PHP): dinamičko kreiranje stranica na veb serveru
JavaScript: interaktivne veb stranice sa klijentske strane
8
![Page 9: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/9.jpg)
Veb jezici
Asynchronous JavaScript and XML (Ajax): pristupanje podacima za veb aplikacije
eXtensible Markup Language (XML): meta-jezik za opis podataka
9
![Page 10: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/10.jpg)
HTML & CSS
10
![Page 11: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/11.jpg)
Hypertext Markup Language
(HTML)
Opisuje sadržaj i strukturu informacija na veb stranici
Nije isto kao prezentacija (prikaz na ekranu)
Okružuje sadržaj otvorenim i zatvorenim etiketama (eng. tags)
Ime svakog taga predstavlja element
sintaksa: <element> sadrzaj </element>
primer: <p>This is a paragraph</p>
11
![Page 12: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/12.jpg)
XHTML
Koristi XML kao format za označavanje
XML + HTML = XHTML
Standardizovan u 2000. godini
Striktna XHTML stranica predstavlja proširenje HTML tagova
12
![Page 13: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/13.jpg)
Struktura XHTML strane
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
information about the page
</head>
<body>
page contents
</body>
</html> HTML
Datoteka se snima pod .html ekstenzijom Sadržaj strane nalazi se između tagova Head predstavlja opis strane Body sadrži telo dokumenta
13
![Page 14: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/14.jpg)
Naslov strane <title>
Nalazi se unutar head taga
Prikazuje se na jezičku web pregledača i u spisku obeleživača (bookmarks)
… <head> <title> HARRY POTTER AND THE DEATHLY HALLOWS
- PART 2 </title>
</head>
… HTML
14
![Page 15: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/15.jpg)
Paragraf <p>
Nalazi se unutar <body> taga
Razmaci i tabovi ne utiču na izlaz
… <body> <p> Harry Potter and the Deathly Hallows,
the last book in the series, begins directly after the
events of the sixth book.
Voldemort has completed his ascension to power and
gains control of the Ministry of Magic</p>
</body>
… HTML
Harry Potter and the Deathly Hallows, the last book in the series, begins
directly after the events of the sixth book. Voldemort has completed his
ascension to power and gains control of the Ministry of Magic output
15
![Page 16: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/16.jpg)
Naslovi <h1>, <h2>, … <h6>
Svaki tag ima značenje koji je vezan za strukturu i sadržaj, a ne za stil
Treba koristiti zbog boljeg stila i kompatibilnosti sa veb pregledačima
<h1> Harry Potter </h1>
<h2> Books </h2>
<h3> Harry Potter and the Philosopher’s Stone </h3> HTML
Harry Potter Books Harry Potter and the Philosopher’s Stone output
16
![Page 17: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/17.jpg)
Horizontalna linija <hr />
Obično se koristi za odvajanje sekcija u dokumentu
Tagovi koji su početni i završni u isto vreme zatvaraju se sa />
<p> First paragraph </p>
<hr />
<p> Second Paragraph </p>
HTML
First Paragraph
Second Paragraph output
17
![Page 18: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/18.jpg)
Blokovski i redovski elementi
Blokovski elementi (block elements) prostiru se duž celog ekrana
Primeri: paragrafi, liste, tabele
Pregledač ubacuje beli prostor pre i posle između blokovskih elemenata da bi ih razdvojio
18
![Page 19: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/19.jpg)
Redovski elementi
Redovski elementi (inline elements) zauzimaju samo onoliko prostora koliko je potrebno za prikaz sadržaja Primeri: boldirani tekst, delovi koda, slike
U jednom redu je moguće prikazati više redovskih elemenata, a ugnježdavaju se u jedan blokovski element
19
![Page 20: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/20.jpg)
Još HTML tagova
Neki tagovi mogu sadržati dodatne informacije koje se nazivaju atributi
Sintaksa: <element attribute="value" attribute="value"> content </element>
Primer: <a href="page2.html">Next page</a>
20
![Page 21: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/21.jpg)
Još HTML tagova
Neki tagovi nemaju sadržaj, te su oni otvoreni i zatvoreni u isto vreme
Sintaksa: <element attribute="value" attribute="value" />
Primer: <hr />
Primer: <img src=“Harry.jpg" alt="pic of Harry Potter" />
21
![Page 22: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/22.jpg)
Veze <a>
Vrednost href atributa je odredišna URL adresa
Veze (linkovi) su redovski elementi, te se oni navode unutar blokovskih elemenata, poput p ili h1
<p>
Search
<a href="http://www.google.com/">Google</a>
now!
</p> HTML
Search Google now!
output
22
![Page 23: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/23.jpg)
Veze <a>
Tipovi URL adresa:
Apsolutni: ka drugim veb stranicama
Relativni: ka drugim stranama unutar trenutnog veb sajta
<p><a href=“deathlyHallows-book.html">Harry Potter and the Deathly Hallows Book</a></p>
<p><a href="http://en.wikipedia.org” title="Search">Wikipedia</a></p>
HTML
Harry Potter and the Deathly Hallows
Wikipedia output
23
![Page 24: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/24.jpg)
Ugnježdavanje tagova
Tagovi moraju da se ugnježdavaju pravilno: završni tag mora da odgovara najskorije otvorenom tagu
Većina pregledača se trudi da prikaže tačan rezultat, ali to i dalje nije validan XHTML
Loše <p>
<a href=" deathlyHallows-book.html"> Harry Potter and the
Deathly Hallows Book </p>
<p>
This text also links to Harry Potter Book</a>
</p>
HTML
24
![Page 25: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/25.jpg)
Slike <img>
U src atributu slike navodi se putanja do slike
Atribut alt predstavlja opis slike, i prikazuje se ukoliko slika nije pronađena na navedenoj putanji
<img src="images/tobby.jpg" alt=“Tobby from Harry Potter" /> HTML
25
![Page 26: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/26.jpg)
Slike <img>
Slike mogu postati linkovi ukoliko se navode unutar <a> taga
Vrednost koja se navede unutar title atributa slike pojavljuje se kao „tooltip“
<a href="http://harrypotter.net/">
<img src="images/dumbledore.jpg" alt=“Dumbledore from Harry Potter"
title="Alas! Ear wax!"/>
</a> HTML
26
![Page 27: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/27.jpg)
Prelom teksta <br>
br treba da se zatvara sa />
br se koristi za prelazak u novi red unutar nekog paragrafa
<p>One Ring to rule them all, One Ring to find them, <br
/> One Ring to bring them all and in the darkness bind
them.</p>
<p> In the Land of Mordor where the Shadows lie. </p>
HTML
One Ring to rule them all, One Ring to find them,
One Ring to bring them all and in the darkness bind them
In the Land of Mordor where the Shadows lie. output
27
![Page 28: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/28.jpg)
Komentari <!-- … -- >
Komentari se mogu koristiti i za sakrivanje određenih delova strane
Komentari se ne mogu ugnježdavati i ne mogu sadržati --
<!-- My web page, by Bob Student
CSE 380, Fall 2048 -->
<p>CS courses are <!-- NOT --> a lot of fun!</p>
HTML
CS courses are a lot of fun!
output
28
![Page 29: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/29.jpg)
Naglašavanje teksta <em>,
<strong>
em: emphasized (naglašeni) tekst (obično u kurzivu)
strong: strongly emphasized (strogo naglašeni) tekst (obično bold)
<p>
HTML is <em>really</em>,
<strong>REALLY</strong> fun!
</p>
HTML
HTML is really REALLY fun!
output
29
![Page 30: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/30.jpg)
Neuređene liste: <ul>, <li>
ul (Unordered List ) predstavlja nabrojivu listu elemenata (bullets) – blokovski element
li (List Item) predstavlja pojedinačnu stavku u listi – blokovski element
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul> HTML
• No shoes
• No shirt
• No problem! output
30
![Page 31: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/31.jpg)
Ugnježdene liste
<ul>
<li>Harry Potter characters:
<ul>
<li>Harry Potter</li>
<li>Hermione</li>
<li>Ron</li>
</ul>
</li>
<li>LOTR characters:
<ul>
<li>Frodo</li>
<li>Bilbo</li>
<li>Sam</li>
</ul>
</li>
</ul> HTML
31
![Page 32: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/32.jpg)
Ugnježdene liste (nastavak)
• Harry Potter characters:
• Harry Potter
• Hermione
• Ron
• LOTR characters:
• Frodo
• Bilbo
• Sam output
32
![Page 33: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/33.jpg)
Uređene liste: <ol>, <li>
ol (Ordered List) predstavlja numerisanu listu elemenata
<p>Apple business model:</p>
<ol>
<li>Beat Microsoft</li>
<li>Beat Google</li>
<li>Conquer the world!</li>
</ol> HTML
Apple business model:
1. Beat Microsoft
2. Beat Google
3. Conquer the world output
33
![Page 34: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/34.jpg)
Česte greške sa listama
Ukoliko lista ostane otvorena, sadržaj koji sledi ostaje uvučen
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
<p>Paragraph after list...</p> HTML
• No shoes
• No shirt
• No problem!
Paragraph after list... output
34
![Page 35: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/35.jpg)
Greške sa ugnježdenim listama
Moderni pregledači će najverovatnije tačno prikazati rezultat iako je XHTML nevalidan
<ul>
<li>Harry Potter characters:</li>
<ul>
<li>Harry Potter</li>
<li>Hermione</li>
<li>Ron</li>
</ul>
</li>
<li>LOTR characters:
<ul>
<li>Frodo</li>
<li>Bilbo</li>
<li>Sam</li>
</ul>
</ul> HTML
35
![Page 36: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/36.jpg)
Definicione liste: <dl>, <dt>,
<dd>
dl predstavlja listu definicija
dt predstavlja term, dok dd predstavlja njegovu definiciju
<dl>
<dt>newbie</dt> <dd>one who does not have mad skills</dd>
<dt>jaded</dt> <dd>tired, bored, or lacking enthusiasm </dd>
<dt>frag</dt> <dd>a kill in a shooting game</dd>
</dl> HTML
newbie
one who does not have mad skills
jaded
Tired, bored, or lacking enthusiasm
frag
a kill in a shooting game output
36
![Page 37: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/37.jpg)
Tabele: <table>, <tr>, <td>
table definiše tabelarno okruženje, tr
(Table Row) predstavlja red (vrstu) table, dok td (Table Data) predstavlja podatak u redu
Korisno za pregledno prikazivanje podataka
1,1 1,2 okay
2,1 real wide 2,2
<table>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table> HTML
output
37
![Page 38: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/38.jpg)
Naslov i natpis tabele: <th>,
<caption> <table>
<caption>My important data</caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table> HTML
output
Column 1 Column 2
1,1 1,2 okay
2,1 real wide 2,2
My important data
Sadržaj unutar <th> taga unutar vrste prikazuje se unutar zaglavlja tabele
Natpis označava smisao podataka u tabeli
38
![Page 39: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/39.jpg)
Citati <blockquote>
<blockquote> se koristi za duge
citate
<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
<p>Fourscore and seven years ago, our fathers brought
forth
on this continent a new nation, conceived in liberty, and
dedicated to the proposition that all men are created
equal.</p>
</blockquote> HTML
As Lincoln said in his famous Gettysburg Address:
Fourscore and seven years ago, our fathers brought forth on this continent a new
nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
output
39
![Page 40: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/40.jpg)
Redovski citat: <q>
Za kratke citate koristi se <q> tag
Zašto se koristi, umesto da se napiše <p>Quoth the Raven, "Nevermore."</p>
Pošto su navodnici specijalni karakteri, oni ne bi trebalo da se direktno navode unutar XHTML-a, već kao "
Korišćenjem <q> taga može se primeniti CSS stil
<p>Quoth the Raven, <q>Nevermore.</q></p>
HTML
Quoth the Raven, “Nevermore.”
output
40
![Page 41: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/41.jpg)
Veb standardi
Zašto koristiti XHTML i veb standarde?
XHTML je rigidniji i strukturiraniji jezik
Interoperabilan je između različitih veb pregledača
Veća verovatnost da će se stranica pravilno prikazivati i u starim i u novim verzijama veb pregledača
Može se razmenjivati sa drugim XML podacima: SVG (graphics), MathML, MusicML, itd.
44
![Page 42: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/42.jpg)
W3C XHTML Validator
Proverava da li HTML kod zadovoljava striktne XHTML specifikacije
Restriktivniji je od veb pregledača koji može pravilno prikazati i nepravilne HTML stranice
<p>
<a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml11"
alt="Validate" />
</a>
</p> HTML
45
![Page 43: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/43.jpg)
Meta-tagovi: <meta>
Metapodaci sadrže podatke o veb stranici (koju koriste veb pregledači, serveri za pretragu, ...)
Navode se unutar <head> taga
Neki meta-tagovi koriste http-equiv atribut umesto imena
<meta name="description"
content=“Harry Potter Official Website." /> <meta name="keywords" content="harry potter, harry potter
and the deathly hallows, deathly hallows, ministry of
magic, resurrection stone, clock of invisibility" />
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" /> HTML
46
![Page 44: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/44.jpg)
Meta tagovi za pomoć veb pretraživačima i serverima
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="refresh" content="5;url=http://www.bjp.com" />
<meta http-equiv="Content-Type"
content="type of document (character encoding)" />
<meta http-equiv="refresh"
content="how often to refresh the page (seconds)" />
</head> HTML
47
![Page 45: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/45.jpg)
Meta tagovi za opis stranice
<head>
<meta name="author"
content="web page's author" />
<meta name="revised"
content="web page version and/or last modification date"
/>
<meta name="generator"
content="the software used to create the page" />
<meta name="description"
content="how you want search engines to display your page"
/>
<meta name="keywords"
content="words to associate with your page (comma
separated)" />
</head> HTML
48
![Page 46: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/46.jpg)
Cascading Style Sheets (CSS)
Definiše izgled, raspored i prezentaciju informacija na veb stranici
HTML opisuje sadržaj stranice
Opisuje kako se informacija prikazuje, a ne šta se prikazuje
Može se uključiti unutar HTML dokumenta ili zasebnom .css fajlu
49
![Page 47: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/47.jpg)
Osnovna CSS sintaksa
Svaki CSS fajl sadrži pravila
Svako pravilo počinje selektorom
Selektor bira određene HTML elemente i na njih primenjuje stilove zadate property-jem
selector {
property: value;
property: value;
...
property: value;
} CSS
p {
font-family: sans-serif;
color: red;
} CSS
50
![Page 48: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/48.jpg)
Dodavanje CSS fajla: <link>
Jedna HTML stranica može uključiti više CSS fajlova
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
51
![Page 49: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/49.jpg)
Uključivanje CSS komandi: <style>
CSS komande se mogu uključiti i unutar HTML stranice
Tada te komande važe samo unutar te stranice
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
52
![Page 50: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/50.jpg)
CSS stil kao HTML atribut
CSS komande mogu se navoditi kao vrednost style atributa bilo kog HTML taga
Tada taj stil važi samo za taj HTML tag
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML
This is a paragraph
output
53
![Page 51: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/51.jpg)
CSS boje p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above output
color Boja teksta unutar elementa
background-color Pozadinska boja elementa
54
![Page 52: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/52.jpg)
Specifikacija boja
Imena boja: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow
RGB kodovi: red, green, and blue komponente od 0 (none) do 255 (full) hex kodovi: RGB vrednosti u heksadecimalnom brojnom sistemu od 00 (0, none)
do FF (255, full)
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above. output
55
![Page 53: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/53.jpg)
Grupisanje stilova
Selektor može odabrati više HTML elemenata razdvojene zarezom
Individualni elementi mogu imati dodatno svoje stilove
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
output
This h2 uses the above styles.
56
![Page 54: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/54.jpg)
CSS komentari /*…*/
Komentari u jednom redu // nisu podržani u CSS – u
HTML komentari <!-- ... --> takođe nisu podržani u CSS – u
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
57
![Page 55: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/55.jpg)
CSS fontovi
property value
font-family Definiše font
font-size Definiše veličinu fonta
font-style Uključuje ili isključuje italic stil
font-weight Uključuje ili isključuje bold stil
58
![Page 56: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/56.jpg)
font-family
Fontovi koji sadrže više reči u svom imenu stavljaju se pod navodnicima
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above. output
59
![Page 57: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/57.jpg)
font-family
Može se navesti više fontova od najvećeg do najmanjeg prioriteta
Generički fontovi: serif, sans-serif, cursive, fantasy, monospace
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
60
![Page 58: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/58.jpg)
font-size
jedinice: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em Ugrađene veličine: xx-small, x-small, small, medium, large, x-
large, xx-large, smaller, larger Procentualne veličine: 90%, 120%
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
61
![Page 59: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/59.jpg)
font-weight, font-style
Bilo koji od gornjih stilova se može pojedinačno uključiti ili isključiti
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
62
![Page 60: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/60.jpg)
CSS tekst
property value
text-align Poravnanje teksta unutar HTML elementa
text-decoration Ukrasi poput podvučenog teksta
line-height, word-spacing, letter-spacing
Praznine između različitih delova teksta
text-indent Uvlačenje prvog slova paragrafa
63
![Page 61: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/61.jpg)
text-align
text-align može biti left, right, center ili justify
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
The Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
64
![Page 62: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/62.jpg)
text-decoration
Ukras može biti overline, line-through, blink, ili none
Efekti se mogu kombinovati:
text-decoration: overline underline;
p {
text-decoration: underline;
} CSS
This paragraph uses the style above.
output
65
![Page 63: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/63.jpg)
list-style-type
ol { list-style-type: lower-roman; }
CSS
Moguće vrednosti: i. none : No marker ii. disc (default), circle, square iii. Decimal: 1, 2, 3, etc. iv. decimal-leading-zero: 01, 02, 03, etc. v. lower-roman: i, ii, iii, iv, v, etc. vi. upper-roman: I, II, III, IV, V, etc. vii. lower-alpha: a, b, c, d, e, etc. viii. upper-alpha: A, B, C, D, E, etc. x. lower-greek: alpha, beta, gamma, etc. others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
66
![Page 64: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/64.jpg)
CSS pozadina
property value
background-color Boja pozadine
background-image Pozadinska slika
background-position Pozicija pozadinske slike
background-repeat Da li se, i kako, ponavlja pozadinska slika
background-attachment Da li se pozadisnka slika pomera sa stranicom
background Skraćenica za postavljanje svih pozadinskih osobina
67
![Page 65: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/65.jpg)
background-image
body {
background-image: url("images/draft.jpg");
}
CSS
68
![Page 66: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/66.jpg)
background-repeat
repeat (default), repeat-x, repeat-y, ili no-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
69
![Page 67: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/67.jpg)
background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
70
![Page 68: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/68.jpg)
HTML id atribut
HTML elementu može se dodati id atribut Njegova vrednost mora biti jedinstvena na
stranici, tj. može se iskoristiti samo jedanput
<p>Coding Horror! Coding Horror!</p>
<p id="mission">Our mission is to combine programming and
<q>human</q> factors with geekiness!</p>
HTML
Coding Horror! Coding Horror!
Our mission is to combine programming and “human” factors with geekiness! output
71
![Page 69: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/69.jpg)
CSS id selektor
Stil se primenjuje samo na element čija je vrednost id atributa jednaka „mission“
#mission {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
} CSS
Coding Horror! Coding Horror!
Our mission is to combine programming and “human” factors with geekiness! output
72
![Page 70: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/70.jpg)
HTML class atribut
Preko class atributa, HTML elementi se mogu grupisati i na tu grupu primeniti stil
Za razliku od id-a, vrednost class atributa se može koristiti više puta
<p class="shout">Coding Horror! Coding Horror!</p>
<p class="special">See our special deal on Droids!</p>
<p class="special">Today only!</p> HTML
Coding Horror! Coding Horror!
See our special deal on Droids!
Today only! output
73
![Page 71: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/71.jpg)
CSS class selektor
CSS stil se primenjuje na više HTML elemenata
.special {
background-color: yellow;
font-weight: bold;
}
p.shout {
color: red;
font-family: cursive;
} CSS
Coding Horror! Coding Horror!
output
See our special deal on Droids!
Today only!
74
![Page 72: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/72.jpg)
CSS class selektor
HTML element može imati više klasa
<p class="shout">Coding Horror! Coding Horror!</p>
<p class="special">See our special deal on Droids!</p>
<p class="special shout">Today only!</p> HTML
Coding Horror! Coding Horror!
output
See our special deal on Droids!
Today only!
75
![Page 73: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/73.jpg)
CSS Pseudo klase
a:link { color: #FF0000; } /* unvisited link */
a:visited { color: #00FF00; } /* visited link */
a:hover { color: #FF00FF; } /* mouse over link */
CSS
Buy Early Buy Often!
output
76
![Page 74: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/74.jpg)
CSS Pseudo klase
class description
:active Aktivan ili elektovan element
:focus Element koji je u fokusu (preko tastature)
:hover Element preko kojeg je pozicioniran kursor
:link Veza koja još nije posećena
:visited Veza koja je već posećena
:first-letter Prvo slovo teksta
:first-line Prvi red teksta
:first-child Element koji se pojavljuje prvi unutar datog elementa
77
![Page 75: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/75.jpg)
CSS za sekcije stranice
Poželjno je stilizovati individualne elemente, grupe elemenata i sekcije teksta za kreiranje kompleksnih rasporeda stranica
78
![Page 76: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/76.jpg)
Sekcije stranice: <div>
<div> služi za logičko grupisanje elemenata na stranici
Podrazumevano se ne prikazuje na stranici, ali je blokovski element
<div class="shout">
<h2>Coding Horror! Coding Horror!</h2>
<p class="special">See our special deal on Droids!</p>
<p>We'll beat any advertised price!</p>
</div> HTML
Coding Horror! Coding Horror!
We’ll beat any advertised price!
output
See our special deal on Droids!
79
![Page 77: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/77.jpg)
Sekcije teksta: <span>
<span> služi za redovsko grupisanje elemenata na stranici
<h2>Coding Horror! Coding Horror!</h2>
<p>See our <span class="special“>spectacular</span> deal on Droids!</p>
<p>We'll beat <span class="shout“> any advertised price</span>!</p>
HTML
Coding Horror! Coding Horror!
See our spectacular deal on Droids!
We’ll beat any advertised price!
output
80
![Page 78: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/78.jpg)
CSS Box Model
Svaki HTML element sastoji se od: Sadržaja
Okvira oko elementa
Padinga – praznine između sadržaja elementa i okvira
Margine – praznine između okvira elementa i ostalih HTML elemenata
81
![Page 79: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/79.jpg)
CSS okvir
Border: Tri komponente: Debljina: px, pt, em, ili thin, medium, thick
Stil: none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid
Boja
h2 { border: 5px solid red; }
CSS
output
This is a heading.
82
![Page 80: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/80.jpg)
CSS okvir
property description
border-color, border-width, border-style
Okvir sa sve 4 strane
border-bottom, border-left, border-right, border-top
Okvir sa pojedinačne strane
border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width
Pojedinačni stil na pojedinačnoj strani
83
![Page 81: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/81.jpg)
CSS Pading
property description
padding Postavlja pading na sve 4 strane
padding-bottom
Postavlja pading na pojedinačnim stranama
padding-left
padding-right
padding-top
84
![Page 82: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/82.jpg)
CSS Pading
p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }
CSS
This is a first paragraph.
This is a second paragraph.
output
This is a heading
85
![Page 83: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/83.jpg)
CSS Margine
property description
margin Postavlja marginu na sve 4 strane
margin-bottom
Postavlja marginu na pojedinačnim stranama
margin-left
margin-right
margin-top
86
![Page 84: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/84.jpg)
CSS Margine
p {
margin: 50px;
background-color: fuchsia;
} CSS
output
This is a second paragraph
This is a first paragraph
87
![Page 85: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/85.jpg)
W3C CSS Validator
jigsaw.w3.org/css-validator/
Proverava da li CSS fajl zadovoljava CSS specifikacije
<p>
<a href="http://jigsaw.w3.org/css-
validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS
output
88
![Page 86: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/86.jpg)
PHP
89
![Page 87: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/87.jpg)
URL i veb serveri
Kada se ukuca URL u pregledaču: Vaš kompjuter traži IP adresu servera na
kojem se nalazi stranica uz pomoć DNS-a
Vaš pregledač se povezuje na tu IP adresu i šalje zahtev za zadatim fajlom
Softver na serveru (npr. Apache) uzima fajl sa lokalnog diska na serveru
Server šalje fajl veb pregledaču
90
http://server/path/file
![Page 88: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/88.jpg)
URL i veb serveri (nastavak)
91
Web/Application Server
Apache, Websphere
SW(Java Servlets, XML Files)
Database
![Page 89: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/89.jpg)
URL i veb serveri (nastavak)
Nekada URL sadrže program koji veb server treba da pokrene, a zatim prihvata rezultat i šalje pregledaču
U ovom primeru, serveru facebook.com nalaže se da pokrene program home.php i da se prikaže rezultat pokretanja programa
92
http://www.facebook.com/home.php
![Page 90: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/90.jpg)
Veb programiranje na serverskoj
strani
Stranice na serverskoj strani predstavljaju programe napisane u jednom od mnogobrojnih veb programskih jezika i okruženja
Primeri: PHP, Java/JSP, Ruby on Rails, ASP.NET, Python, Perl
93
![Page 91: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/91.jpg)
Veb programiranje na serverskoj
strani (nastavak)
Takođe zvano i server side scripting:
Dinamički menja i dodaje sadržaj veb strane
Odgovara na zahteve korisnika poslate kroz HTML forme
Pristupa lokalnim fajlovima i bazama podataka, i vraća rezultat veb pregledaču
Prilagođava veb strane tako da budu korisne pojedinačnim korisnicima
Obezbeđuje sigurnost pošto se kod sa serverske strane ne može videti u pregledaču
94
![Page 92: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/92.jpg)
Šta je PHP?
"PHP Hypertext Preprocessor"
Jezik koji se izvršava na serverskoj strani Koristi se za pravljenje dinamičkih veb
stranica Prikazuje različit sadržaj u zavisnosti od
konteksta
Interaguje sa drugim servisima, na primer, bazama podataka
Ima mogućnost autentifikacije korisnika
PHP se može ugraditi u XHTML kod
95
![Page 93: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/93.jpg)
Životni ciklus PHP zahteva
96
Hello world!
User’s computer Server computer
Hello.php
![Page 94: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/94.jpg)
Hello World!
97
<?php
print "Hello, world!";
?> PHP
Hello world!
output
![Page 95: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/95.jpg)
Prikaz PHP skripta
98
![Page 96: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/96.jpg)
Promenljive
Imena promenljivih su „case-sensitive“, i uvek počinju znakom $
PHP je slabo tipiziran jezik - promenljive su implicitno deklarisane po operatoru dodele (ne piše se tip promenljive)
99
$user_name = “mundruid78"; $age = 16;
$drinking_age = $age + 5;
$this_class_rocks = TRUE; PHP
$name = expression; PHP
![Page 97: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/97.jpg)
Promenljive
Osnovni tipovi: int, float, boolean, string, array, object, NULL Uz pomoć funkcije is_type ispituje se tip
promenljive, na primer is_string Funkcija gettype vraća tip promenljive kao
string
PHP u mnogim slučajevima automatski konvertuje promenljive iz jednog u drugi tip: string → int automatska konverzija sa + int → float automatska konverzija sa /
type-cast sa (type): $age = (int) "21";
100
![Page 98: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/98.jpg)
Aritmetički operatori
+ - * / % . ++ --
= += -= *= /= %= .=
Mnogi operatori pokreću automatsku konverziju: 5 + "7" kao rezultat vraća 12
101
![Page 99: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/99.jpg)
Komentari
102
# single-line comment
// single-line comment
/*
multi-line comment
*/ PHP
![Page 100: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/100.jpg)
Tip string
Pojedinačnim karakterima stringa pristupa se preko indeksa koji se navodi u uglastim zagradama []
Ne postoji char tip podataka, svaki karakter je string
Spajanje stringova vrši se uz pomoć . (tačke), a ne + 5 + "2 turtle doves" === 7
5 . "2 turtle doves" === "52 turtle doves"
103
$favorite_food = "Ethiopian";
print $favorite_food[2];
$favorite_food = $favorite_food . " cuisine";
print $favorite_food;
PHP
![Page 101: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/101.jpg)
Interpretirani stringovi
Stringovi između ““ su interpretirani To znači da će promenljive navedene
između njih prikazivati svoju vrednost Stringovi između ‘’ nisu interpretirani
104
$age = 16;
print "You are " . $age . " years old.\n";
print "You are $age years old.\n"; # You are 16 years old.
PHP
print ' You are $age years old.\n '; # You are $age years old. \n PHP
![Page 102: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/102.jpg)
if/else naredba
105
if (condition) {
statements;
} elseif (condition) {
statements;
} else {
statements;
}
PHP
![Page 103: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/103.jpg)
for petlja
106
for (initialization; condition; update) {
statements;
}
PHP
for ($i = 0; $i < 10; $i++) {
print "$i squared is " . $i * $i . ".\n";
}
PHP
![Page 104: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/104.jpg)
while petlja
107
while (condition) {
statements;
} PHP
do {
statements;
} while (condition);
PHP
![Page 105: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/105.jpg)
Primer
108
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSE 190 M: Embedded PHP</title> </head> <body> <?php for ($i = 1; $i <= 10; $i++) { print "<p> I can count to $i! </p>\n"; }?> </body> </html>
PHP
![Page 106: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/106.jpg)
Primer - output
109
I can count to 1!
I can count to 2!
I can count to 3!
I can count to 4!
I can count to 5!
I can count to 6!
I can count to 7!
I can count to 8!
I can count to 9!
I can count to 10!
output
![Page 107: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/107.jpg)
Primer
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSE 190 M: Embedded PHP</title> </head> <body> <?php for ($i = 5; $i >= 1; $i--) { ?> <p> <?= $i ?> bottles of beer on the wall, <br /> <?= $i ?> bottles of beer. <br /> Take one down, pass it around, <br /> <?= $i - 1 ?> bottles of beer on the wall. </p> <?php } ?> </body> </html> PHP
![Page 108: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/108.jpg)
Primer - output
111
5 bottles of beer on the wall, 5 bottles of beer. Take one down, pass it around, 4 bottles of beer on the wall. 4 bottles of beer on the wall, 4 bottles of beer. Take one down, pass it around, 3 bottles of beer on the wall. 3 bottles of beer on the wall, 3 bottles of beer. Take one down, pass it around, 2 bottles of beer on the wall. 2 bottles of beer on the wall, 2 bottles of beer. Take one down, pass it around, 1 bottles of beer on the wall. 1 bottles of beer on the wall, 1 bottles of beer. Take one down, pass it around, 0 bottles of beer on the wall.
output
![Page 109: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/109.jpg)
Nizovi u PHP - u
112
$name = array(); # create $name = array(value0, value1, ..., valueN); $name[index] # get element value $name[index] = value; # set element value $name[] = value; # append $a = array(); # empty array (length 0) $a[0] = 23; # stores 23 at index 0 (length 1) $a2 = array("some", "strings", "in", "an", "array"); $a2[] = "Ooh!"; # add string to end (at index 5)
PHP
![Page 110: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/110.jpg)
Funkcije nad nizovima
113
$tas = array("MD", "BH", "KK", "HM", "JP"); for ($i = 0; $i < count($tas); $i++) { $tas[$i] = strtolower($tas[$i]); } # ("md", "bh", "kk", "hm", "jp") $morgan = array_shift($tas); # ("bh", "kk", "hm", "jp") array_pop($tas); # ("bh", "kk", "hm") array_push($tas, "ms"); # ("bh", "kk", "hm", "ms") array_reverse($tas); # ("ms", "hm", "kk", "bh") sort($tas); # ("bh", "hm", "kk", "ms") $best = array_slice($tas, 1, 2); # ("hm", "kk")
PHP
![Page 111: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/111.jpg)
Primer
114
<?php $stooges = array("Larry", "Moe", "Curly", "Shemp"); for ($i = 0; $i < count($stooges); $i++) { print "<p>Moe slaps {$stooges[$i]}</p>"; }?> <hr/> <?php foreach ($stooges as $stooge) { print "<p>Moe slaps $stooge</p>"; # even himself! } ?>
PHP
![Page 112: Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±](https://reader031.vdocuments.site/reader031/viewer/2022020213/5a72911a7f8b9a93538dcd82/html5/thumbnails/112.jpg)
Primer - output
115
Moe slaps Larry
Moe slaps Moe
Moe slaps Curly
Moe slaps Shemp ------------------------------------------------------------------------------------------------------------------------------------ Moe slaps Larry
Moe slaps Moe
Moe slaps Curly
Moe slaps Shemp
output