SlideShare a Scribd company logo
1 of 35
Download to read offline
HTML, CSS i JAVASCRIPT
WEB TEHNOLOGIJE - PREDAVANJE 3.
SEE ICT - STARTIT CENTAR
PROGRAM PREDAVANJA I VEŽBI
● Pozicioniranje elemenata - najvažniji segment CSS jezika;
● Margin, padding - css box model;
● Napredni CSS : Inline, Inline-block, Block
● CSS i raspoređivanje elemenata na strani
● Projekat: Web Sajt
CSS - ZEN GARDEN - DEMONSTRACIJA SILE CSS-A
http://www.csszengarden.com
CSS - ZEN GARDEN - DEMONSTRACIJA SILE CSS-A
KAKO BROWSER PRIKAZUJE HTML ELEMENTE?
HTML
HEAD BODY
TITLE P
CSS - “BOX” MODEL
<p>Računarsko razmišljanje je velika vizija koja bi trebalo
da vodi edukatore, istraživače i praktičare dok zajedno
radimo na tome da se pogled čitavog društva prema ovom
polju promeni. </p>
<p>Računarsko razmišljanje podrazumeva korišćenje
istraživačkog razmišljanja u otkrivanju rešenja. Uključuje
planiranje, učenje i raspoređivanje u prisustvu
neizvesnosti.</p>
<p>Učiti kodiranju jednako je učiti pisanju. Znate tehniku,
skraćenice, slova, oznake, ali je na kraju, ono što
iskomunicirate najbitnije. Svakako, znati kodirati je dobra
početna pozicija za kvalitetan posao ovih dana, ali će vam
poznavanje razmišljanja omogućiti da na stalno-promenljivom
tržištu ostanete kompetitivni.</p>
???
???
<p>Računarsko razmišljanje podrazumeva korišćenje
istraživačkog razmišljanja u otkrivanju rešenja. Uključuje
planiranje, učenje i raspoređivanje u prisustvu
neizvesnosti.</p>
CSS - “BOX” MODEL
Padding
Sadržaj
Margin
Border
CSS “BOX” MODEL - PADDING
Padding - CSS svojstvo
h1 {
padding : 10px
}
10px
10px
Top, Right, Bottom, Left
10px
10px
CSS “BOX” MODEL - BORDER
p {
padding : 10px;
border: 1px solid green;
}
Border: debljina - stil - bojaBorder - CSS svojstvo
10px
10px
img {
border: 5px dotted grey;
}
10px
10px
CSS “BOX” MODEL - MARGIN
img {
padding : 20px;
border: 5px dashed gold;
margin: 30px;
}
Margin - CSS svojstvo
30px
60px
30px
30px 30px
30px
30px
<p>Računarsko razmišljanje podrazumeva korišćenje
istraživačkog razmišljanja u otkrivanju rešenja. Uključuje
planiranje, učenje i raspoređivanje u prisustvu
neizvesnosti.</p>
CSS - “BOX” MODEL - PONOVO!
Padding
Sadržaj
Margin
Border
nav {
margin : 10px 30px 20px 30px;
}
PADDING I MARGIN - VARIJACIJE
article {
padding : 10px;
}
Top Right Bottom Left
ul {
padding : 15px 25px;
}
Top Left
Bottom Right
10px
10px
10px
10px
10px
30px
20px
30px
15px
25px
15px
25px
PADDING I MARGIN - VARIJACIJE
a {
padding-top : 10px;
margin-left: 20px;
border: 1px solid gold;
}
10px
20px
padding-top
padding-bottom
padding-left
padding-right
margin-top
margin-bottom
margin-left
margin-right
nav {
border-left: 3px dashed gold;
Border-right: 3px dashed gold;
}
BORDER - VARIJACIJE
article {
border-top : 4px solid gold;
}
border-left, border-right, border-top, border-bottom
HTML ELEMENTI ZA GRUPISANJE
index.html:
<h1>The color of love is <span>red.</span></h1>
style.css:
span {
color:red
}
SPAN - koristi se za grupisanje teksta
ELEMENTI ZA GRUPISANJE TEKSTA I DRUGIH ELEMENATA
DIV - koristi se za grupisanje drugih HTML elemenata
<p>Sumirajući svoje utiske, i studenti i njihova profesorka zaključili su
da je ekonomija bazirana na teškoj industriji stvar prošlosti – kako u
Srbiji, tako i na čitavom Balkanu.</p>
<div>
<p>Kao neko ko je rođen u Beogradu, jako sam ponosna na pozitivne
utiske koje je naša poseta ostavila mojim MBA studentima.</p>
<p>Za mnoge od studenata, koji se inače posebno zanimaju za
preduzetništvo, kulminacija posete je bila naša saradnja sa
StartLabs-om i prilika da upoznaju mlade preduzetnike iz regiona,
kao i da im savetima pomognu u daljem radu i probijanju na
svetsko tržište.</p>
</div>
<p>Ono sa čime ostajemo jeste IT industrija kojoj treba još više
podsticaja, čitav niz sektora koji kreiraju dodatne poslove i biznis
atmosfera koja može biti nosilac značajnijih ekonomskih promena u
godinama koje dolaze – promena u kojima će male tehnološke kompanije koje
izvoze svoje usluge na globalno tržište igrati ključnu ulogu, a koje će
inspirisati buduće preduzetnike na putu ka sopstvenim poslovnim
poduhvatima.</p>
HTML - SLAGANJE ELEMENATA U BROWSERU
<img src=”...”> <img src=”...”> <img src=”...”>
<p>...</p>
<p>...</p>
HTML - SLAGANJE ELEMENATA U BROWSERU
<p>...</p>
HTML - SLAGANJE ELEMENATA U BROWSERU
<p>...</p>
<p>...</p>
<p>...</p>
<img src=”...”> <img src=”...”> <img src=”...”>
???
KAKO BROWSER ISCRTAVA WEB STRANU?
● Elementi koji se slažu jedan pored drugog:
strong, a, img, span …
● Elementi koji zauzimaju celu širinu - slažu se jedan ispod drugog:
p, article, aside, h1..h6, div, header, footer, nav, ul, ol, li…
KAKO BROWSER ISCRTAVA WEB STRANU?
INLINE ELEMENTI : BROWSER IH SLAŽE JEDAN PORED DRUGOG!
<img src="mountain.jpg">
<span>Poznavanje kodiranja je dobra početna pozicija za kvalitetan
posao ovih dana.</span>
<a href='http://www.startit.rs'>Pročitajte više...</a>
Poznavanje kodiranja je dobra početna pozicija za kvalitetan posao ovih
dana. Pročitajte više...
KAKO BROWSER ISCRTAVA WEB STRANU?
BLOCK ELEMENTI : BROWSER IH SLAŽE JEDAN ISPOD DRUGOG!
<h1>Internet i poslovanje</h1>
<p>Mogućnosti koje nudi internet u savremenom
poslovanju ne mogu se porediti ni sa jednim
dosadašnjim rešenjem.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
INLINE I BLOCK - CSS PODRŠKA
p#main {
display:block;
}
span.marker {
display:inline;
}
a.external {
display:block;
}
li {
display:inline;
}
CSS DISPLAY - ODREĐUJE KAKO ĆE BROWSER DA PRIKAŽE ELEMENT
RAZMEŠTANJE ELEMENATA U CSS-u
RAZMEŠTANJE ELEMENATA NA WEB STRANI
FLOAT - SE KORISTI ZA PRERASPODELU ELEMENATA NA STRANI
RAZMEŠTANJE ELEMENATA U CSS-u
<h1>Curriculum Vitae</h2>
<h2>Petar Petrović</h2>
<p>Intent to get a position to utilize my
skills and abilities into practice for mutual
growth and benefit and make endeavors towards
the way which is innovative, creative & excel
in my field.</p>
CSS FLOAT SVOJSTVO!
<img src="petar.jpg">
img {
float:right;
}
float:none;
float:left;
float:right;
PRIMENA “FLOAT” SVOJSTVA
RAZMEŠTAJ ELEMENATA NA WEB STRANI
CSS “FLOAT” - OSOBINE
“CLEAR” U CSS-u - BRIŠE DEJSTVO PRETHODNE DIREKTIVE “FLOAT”
footer {
clear:both;
}
clear: none;
clear: left;
clear: right;
clear: both;
PRIMENA “CLEAR” SVOJSTVA
“FLOAT” I “CLEAR” U KOMBINACIJI - MOĆNO ORUŽJE
CSS PREKLAPANJE - OVERFLOW
OVERFLOW - KONTROLIŠE ŠTA SE DEŠAVA KADA SADRŽAJ ELEMENTA
IZLAZI VAN NJEGOVOG OKVIRA - “PRAVOUGAONIKA”
VEŽBA - IZRADA WEB SAJTA
● CSS Box model - padding, border, margin
● HTML Elementi za grupisanje teksta i drugih elemenata - SPAN i DIV
● Inline i Block Elementi
● CSS Float - pojam i upotreba za raspored elemenata na strani
● CSS Overflow - za kontrolu sadržaja elementa
ŠTA SMO DANAS NAUČILI?
● Napraviti galeriju slika u CSS-u
● Unaprediti sajt picerije CSS-om za pozicioniranje
● Instalirati Chrome plugin za auto-refresh strane https://chrome.google.
com/webstore/detail/refresh-monkey/ljngnafhejmefmijjoedbclkadhacebd/related?hl=en
● BONUS: istražiti FLEXBOX - način za pozicioniranje elemenata
DOMAĆI ZADATAK
● Tilt - Render page in 3D - https://addons.mozilla.org/en-US/firefox/addon/tilt/
● HTML5 - email časopis - http://html5weekly.com
● CSS Tricks - koristan sajt o CSS-u - https://css-tricks.com
● Smashing Magazine - https://www.smashingmagazine.com
KORISNI LINKOVI
HVALA VAM NA PAŽNJI!
PITANJA?

More Related Content

HTML, CSS i Javascript Web tehnologije - 3. predavanje - Startit.rs

  • 1. HTML, CSS i JAVASCRIPT WEB TEHNOLOGIJE - PREDAVANJE 3. SEE ICT - STARTIT CENTAR
  • 2. PROGRAM PREDAVANJA I VEŽBI ● Pozicioniranje elemenata - najvažniji segment CSS jezika; ● Margin, padding - css box model; ● Napredni CSS : Inline, Inline-block, Block ● CSS i raspoređivanje elemenata na strani ● Projekat: Web Sajt
  • 3. CSS - ZEN GARDEN - DEMONSTRACIJA SILE CSS-A http://www.csszengarden.com
  • 4. CSS - ZEN GARDEN - DEMONSTRACIJA SILE CSS-A
  • 5. KAKO BROWSER PRIKAZUJE HTML ELEMENTE? HTML HEAD BODY TITLE P
  • 6. CSS - “BOX” MODEL <p>Računarsko razmišljanje je velika vizija koja bi trebalo da vodi edukatore, istraživače i praktičare dok zajedno radimo na tome da se pogled čitavog društva prema ovom polju promeni. </p> <p>Računarsko razmišljanje podrazumeva korišćenje istraživačkog razmišljanja u otkrivanju rešenja. Uključuje planiranje, učenje i raspoređivanje u prisustvu neizvesnosti.</p> <p>Učiti kodiranju jednako je učiti pisanju. Znate tehniku, skraćenice, slova, oznake, ali je na kraju, ono što iskomunicirate najbitnije. Svakako, znati kodirati je dobra početna pozicija za kvalitetan posao ovih dana, ali će vam poznavanje razmišljanja omogućiti da na stalno-promenljivom tržištu ostanete kompetitivni.</p> ??? ???
  • 7. <p>Računarsko razmišljanje podrazumeva korišćenje istraživačkog razmišljanja u otkrivanju rešenja. Uključuje planiranje, učenje i raspoređivanje u prisustvu neizvesnosti.</p> CSS - “BOX” MODEL Padding Sadržaj Margin Border
  • 8. CSS “BOX” MODEL - PADDING Padding - CSS svojstvo h1 { padding : 10px } 10px 10px Top, Right, Bottom, Left 10px 10px
  • 9. CSS “BOX” MODEL - BORDER p { padding : 10px; border: 1px solid green; } Border: debljina - stil - bojaBorder - CSS svojstvo 10px 10px img { border: 5px dotted grey; } 10px 10px
  • 10. CSS “BOX” MODEL - MARGIN img { padding : 20px; border: 5px dashed gold; margin: 30px; } Margin - CSS svojstvo 30px 60px 30px 30px 30px 30px 30px
  • 11. <p>Računarsko razmišljanje podrazumeva korišćenje istraživačkog razmišljanja u otkrivanju rešenja. Uključuje planiranje, učenje i raspoređivanje u prisustvu neizvesnosti.</p> CSS - “BOX” MODEL - PONOVO! Padding Sadržaj Margin Border
  • 12. nav { margin : 10px 30px 20px 30px; } PADDING I MARGIN - VARIJACIJE article { padding : 10px; } Top Right Bottom Left ul { padding : 15px 25px; } Top Left Bottom Right 10px 10px 10px 10px 10px 30px 20px 30px 15px 25px 15px 25px
  • 13. PADDING I MARGIN - VARIJACIJE a { padding-top : 10px; margin-left: 20px; border: 1px solid gold; } 10px 20px padding-top padding-bottom padding-left padding-right margin-top margin-bottom margin-left margin-right
  • 14. nav { border-left: 3px dashed gold; Border-right: 3px dashed gold; } BORDER - VARIJACIJE article { border-top : 4px solid gold; } border-left, border-right, border-top, border-bottom
  • 15. HTML ELEMENTI ZA GRUPISANJE index.html: <h1>The color of love is <span>red.</span></h1> style.css: span { color:red } SPAN - koristi se za grupisanje teksta
  • 16. ELEMENTI ZA GRUPISANJE TEKSTA I DRUGIH ELEMENATA DIV - koristi se za grupisanje drugih HTML elemenata <p>Sumirajući svoje utiske, i studenti i njihova profesorka zaključili su da je ekonomija bazirana na teškoj industriji stvar prošlosti – kako u Srbiji, tako i na čitavom Balkanu.</p> <div> <p>Kao neko ko je rođen u Beogradu, jako sam ponosna na pozitivne utiske koje je naša poseta ostavila mojim MBA studentima.</p> <p>Za mnoge od studenata, koji se inače posebno zanimaju za preduzetništvo, kulminacija posete je bila naša saradnja sa StartLabs-om i prilika da upoznaju mlade preduzetnike iz regiona, kao i da im savetima pomognu u daljem radu i probijanju na svetsko tržište.</p> </div> <p>Ono sa čime ostajemo jeste IT industrija kojoj treba još više podsticaja, čitav niz sektora koji kreiraju dodatne poslove i biznis atmosfera koja može biti nosilac značajnijih ekonomskih promena u godinama koje dolaze – promena u kojima će male tehnološke kompanije koje izvoze svoje usluge na globalno tržište igrati ključnu ulogu, a koje će inspirisati buduće preduzetnike na putu ka sopstvenim poslovnim poduhvatima.</p>
  • 17. HTML - SLAGANJE ELEMENATA U BROWSERU <img src=”...”> <img src=”...”> <img src=”...”>
  • 18. <p>...</p> <p>...</p> HTML - SLAGANJE ELEMENATA U BROWSERU <p>...</p>
  • 19. HTML - SLAGANJE ELEMENATA U BROWSERU <p>...</p> <p>...</p> <p>...</p> <img src=”...”> <img src=”...”> <img src=”...”> ???
  • 20. KAKO BROWSER ISCRTAVA WEB STRANU? ● Elementi koji se slažu jedan pored drugog: strong, a, img, span … ● Elementi koji zauzimaju celu širinu - slažu se jedan ispod drugog: p, article, aside, h1..h6, div, header, footer, nav, ul, ol, li…
  • 21. KAKO BROWSER ISCRTAVA WEB STRANU? INLINE ELEMENTI : BROWSER IH SLAŽE JEDAN PORED DRUGOG! <img src="mountain.jpg"> <span>Poznavanje kodiranja je dobra početna pozicija za kvalitetan posao ovih dana.</span> <a href='http://www.startit.rs'>Pročitajte više...</a> Poznavanje kodiranja je dobra početna pozicija za kvalitetan posao ovih dana. Pročitajte više...
  • 22. KAKO BROWSER ISCRTAVA WEB STRANU? BLOCK ELEMENTI : BROWSER IH SLAŽE JEDAN ISPOD DRUGOG! <h1>Internet i poslovanje</h1> <p>Mogućnosti koje nudi internet u savremenom poslovanju ne mogu se porediti ni sa jednim dosadašnjim rešenjem.</p> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul>
  • 23. INLINE I BLOCK - CSS PODRŠKA p#main { display:block; } span.marker { display:inline; } a.external { display:block; } li { display:inline; } CSS DISPLAY - ODREĐUJE KAKO ĆE BROWSER DA PRIKAŽE ELEMENT
  • 25. RAZMEŠTANJE ELEMENATA NA WEB STRANI FLOAT - SE KORISTI ZA PRERASPODELU ELEMENATA NA STRANI
  • 26. RAZMEŠTANJE ELEMENATA U CSS-u <h1>Curriculum Vitae</h2> <h2>Petar Petrović</h2> <p>Intent to get a position to utilize my skills and abilities into practice for mutual growth and benefit and make endeavors towards the way which is innovative, creative & excel in my field.</p> CSS FLOAT SVOJSTVO! <img src="petar.jpg"> img { float:right; } float:none; float:left; float:right;
  • 27. PRIMENA “FLOAT” SVOJSTVA RAZMEŠTAJ ELEMENATA NA WEB STRANI
  • 28. CSS “FLOAT” - OSOBINE “CLEAR” U CSS-u - BRIŠE DEJSTVO PRETHODNE DIREKTIVE “FLOAT” footer { clear:both; } clear: none; clear: left; clear: right; clear: both;
  • 29. PRIMENA “CLEAR” SVOJSTVA “FLOAT” I “CLEAR” U KOMBINACIJI - MOĆNO ORUŽJE
  • 30. CSS PREKLAPANJE - OVERFLOW OVERFLOW - KONTROLIŠE ŠTA SE DEŠAVA KADA SADRŽAJ ELEMENTA IZLAZI VAN NJEGOVOG OKVIRA - “PRAVOUGAONIKA”
  • 31. VEŽBA - IZRADA WEB SAJTA
  • 32. ● CSS Box model - padding, border, margin ● HTML Elementi za grupisanje teksta i drugih elemenata - SPAN i DIV ● Inline i Block Elementi ● CSS Float - pojam i upotreba za raspored elemenata na strani ● CSS Overflow - za kontrolu sadržaja elementa ŠTA SMO DANAS NAUČILI?
  • 33. ● Napraviti galeriju slika u CSS-u ● Unaprediti sajt picerije CSS-om za pozicioniranje ● Instalirati Chrome plugin za auto-refresh strane https://chrome.google. com/webstore/detail/refresh-monkey/ljngnafhejmefmijjoedbclkadhacebd/related?hl=en ● BONUS: istražiti FLEXBOX - način za pozicioniranje elemenata DOMAĆI ZADATAK
  • 34. ● Tilt - Render page in 3D - https://addons.mozilla.org/en-US/firefox/addon/tilt/ ● HTML5 - email časopis - http://html5weekly.com ● CSS Tricks - koristan sajt o CSS-u - https://css-tricks.com ● Smashing Magazine - https://www.smashingmagazine.com KORISNI LINKOVI
  • 35. HVALA VAM NA PAŽNJI! PITANJA?