Upload
trinhlien
View
228
Download
1
Embed Size (px)
Citation preview
Od HTML – a do PHP – a
Stefan Stanimirović
Departman za računarske nauke Prirodno – matematički fakultet
Univerzitet u Nišu Email: [email protected]
2
Š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
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
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
Veb serveri
Veb server je softver koji sluša zahteve za veb stranama
Primeri:
Apache
Microsoft Internet
Information Server (IIS)
6
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
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
Veb jezici
Asynchronous JavaScript and XML (Ajax): pristupanje podacima za veb aplikacije
eXtensible Markup Language (XML): meta-jezik za opis podataka
9
HTML & CSS
10
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
XHTML
Koristi XML kao format za označavanje
XML + HTML = XHTML
Standardizovan u 2000. godini
Striktna XHTML stranica predstavlja proširenje HTML tagova
12
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Ugnježdene liste (nastavak)
• Harry Potter characters:
• Harry Potter
• Hermione
• Ron
• LOTR characters:
• Frodo
• Bilbo
• Sam output
32
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
Č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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
background-image
body {
background-image: url("images/draft.jpg");
}
CSS
68
background-repeat
repeat (default), repeat-x, repeat-y, ili no-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
69
background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
70
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
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
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
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
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
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
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
CSS za sekcije stranice
Poželjno je stilizovati individualne elemente, grupe elemenata i sekcije teksta za kreiranje kompleksnih rasporeda stranica
78
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
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
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
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
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
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
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
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
CSS Margine
p {
margin: 50px;
background-color: fuchsia;
} CSS
output
This is a second paragraph
This is a first paragraph
87
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
PHP
89
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
URL i veb serveri (nastavak)
91
Web/Application Server
Apache, Websphere
SW(Java Servlets, XML Files)
Database
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
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
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
Š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
Životni ciklus PHP zahteva
96
Hello world!
User’s computer Server computer
Hello.php
Hello World!
97
<?php
print "Hello, world!";
?> PHP
Hello world!
output
Prikaz PHP skripta
98
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
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
Aritmetički operatori
+ - * / % . ++ --
= += -= *= /= %= .=
Mnogi operatori pokreću automatsku konverziju: 5 + "7" kao rezultat vraća 12
101
Komentari
102
# single-line comment
// single-line comment
/*
multi-line comment
*/ PHP
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
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
if/else naredba
105
if (condition) {
statements;
} elseif (condition) {
statements;
} else {
statements;
}
PHP
for petlja
106
for (initialization; condition; update) {
statements;
}
PHP
for ($i = 0; $i < 10; $i++) {
print "$i squared is " . $i * $i . ".\n";
}
PHP
while petlja
107
while (condition) {
statements;
} PHP
do {
statements;
} while (condition);
PHP
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
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
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
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
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
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
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
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