際際滷

際際滷Share a Scribd company logo

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

M
Milovan Jovii

Kurs HTML, CSS i Javascript web tehnologija 3. predavanje - HTML5 elementi i uvod u CSS Kurs je odr転an u okviru projekta besplatne obuke graana i u organizaciji Startit centra - vi邸e informacija na www.startit.rs

1 of 35
Downloaded 35 times
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 rasporeivanje 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>Raunarsko razmi邸ljanje je velika vizija koja bi trebalo da vodi edukatore, istra転ivae i praktiare dok zajedno radimo na tome da se pogled itavog dru邸tva prema ovom polju promeni. </p> <p>Raunarsko razmi邸ljanje podrazumeva kori邸enje istra転ivakog razmi邸ljanja u otkrivanju re邸enja. Ukljuuje planiranje, uenje i rasporeivanje u prisustvu neizvesnosti.</p> <p>Uiti kodiranju jednako je uiti pisanju. Znate tehniku, skraenice, slova, oznake, ali je na kraju, ono 邸to iskomunicirate najbitnije. Svakako, znati kodirati je dobra poetna pozicija za kvalitetan posao ovih dana, ali e vam poznavanje razmi邸ljanja omoguiti da na stalno-promenljivom tr転i邸tu ostanete kompetitivni.</p> ??? ???
<p>Raunarsko razmi邸ljanje podrazumeva kori邸enje istra転ivakog razmi邸ljanja u otkrivanju re邸enja. Ukljuuje planiranje, uenje i rasporeivanje 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>Raunarsko razmi邸ljanje podrazumeva kori邸enje istra転ivakog razmi邸ljanja u otkrivanju re邸enja. Ukljuuje planiranje, uenje i rasporeivanje 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>Sumirajui svoje utiske, i studenti i njihova profesorka zakljuili 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 roen 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 inae 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 znaajnijih ekonomskih promena u godinama koje dolaze promena u kojima e male tehnolo邸ke kompanije koje izvoze svoje usluge na globalno tr転i邸te igrati kljunu ulogu, a koje e inspirisati budue preduzetnike na putu ka sopstvenim poslovnim poduhvatima.</p>
HTML - SLAGANJE ELEMENATA U BROWSERU <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...>
<p>...</p> <p>...</p> HTML - SLAGANJE ELEMENATA U BROWSERU <p>...</p>
HTML - SLAGANJE ELEMENATA U BROWSERU <p>...</p> <p>...</p> <p>...</p> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> ???
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=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/"mountain.jpg"> <span>Poznavanje kodiranja je dobra poetna pozicija za kvalitetan posao ovih dana.</span> <a href='http://www.startit.rs'>Proitajte vi邸e...</a> Poznavanje kodiranja je dobra poetna pozicija za kvalitetan posao ovih dana. Proitajte vi邸e...
KAKO BROWSER ISCRTAVA WEB STRANU? BLOCK ELEMENTI : BROWSER IH SLA貼E JEDAN ISPOD DRUGOG! <h1>Internet i poslovanje</h1> <p>Mogunosti 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 PODRKA p#main { display:block; } span.marker { display:inline; } a.external { display:block; } li { display:inline; } CSS DISPLAY - ODREUJE KAKO E BROWSER DA PRIKA貼E ELEMENT
RAZMETANJE ELEMENATA U CSS-u
RAZMETANJE ELEMENATA NA WEB STRANI FLOAT - SE KORISTI ZA PRERASPODELU ELEMENATA NA STRANI
RAZMETANJE 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=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/"petar.jpg"> img { float:right; } float:none; float:left; float:right;
PRIMENA FLOAT SVOJSTVA RAZMETAJ ELEMENATA NA WEB STRANI
CSS FLOAT - OSOBINE CLEAR U CSS-u - BRIE DEJSTVO PRETHODNE DIREKTIVE FLOAT footer { clear:both; } clear: none; clear: left; clear: right; clear: both;
PRIMENA CLEAR SVOJSTVA FLOAT I CLEAR U KOMBINACIJI - MONO ORU貼JE
CSS PREKLAPANJE - OVERFLOW OVERFLOW - KONTROLIE TA SE DEAVA 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 NAUILI?
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 - nain za pozicioniranje elemenata DOMAI 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 rasporeivanje 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>Raunarsko razmi邸ljanje je velika vizija koja bi trebalo da vodi edukatore, istra転ivae i praktiare dok zajedno radimo na tome da se pogled itavog dru邸tva prema ovom polju promeni. </p> <p>Raunarsko razmi邸ljanje podrazumeva kori邸enje istra転ivakog razmi邸ljanja u otkrivanju re邸enja. Ukljuuje planiranje, uenje i rasporeivanje u prisustvu neizvesnosti.</p> <p>Uiti kodiranju jednako je uiti pisanju. Znate tehniku, skraenice, slova, oznake, ali je na kraju, ono 邸to iskomunicirate najbitnije. Svakako, znati kodirati je dobra poetna pozicija za kvalitetan posao ovih dana, ali e vam poznavanje razmi邸ljanja omoguiti da na stalno-promenljivom tr転i邸tu ostanete kompetitivni.</p> ??? ???
  • 7. <p>Raunarsko razmi邸ljanje podrazumeva kori邸enje istra転ivakog razmi邸ljanja u otkrivanju re邸enja. Ukljuuje planiranje, uenje i rasporeivanje 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>Raunarsko razmi邸ljanje podrazumeva kori邸enje istra転ivakog razmi邸ljanja u otkrivanju re邸enja. Ukljuuje planiranje, uenje i rasporeivanje 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>Sumirajui svoje utiske, i studenti i njihova profesorka zakljuili 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 roen 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 inae 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 znaajnijih ekonomskih promena u godinama koje dolaze promena u kojima e male tehnolo邸ke kompanije koje izvoze svoje usluge na globalno tr転i邸te igrati kljunu ulogu, a koje e inspirisati budue preduzetnike na putu ka sopstvenim poslovnim poduhvatima.</p>
  • 17. HTML - SLAGANJE ELEMENATA U BROWSERU <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...>
  • 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=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> <img src=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/...> ???
  • 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=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/"mountain.jpg"> <span>Poznavanje kodiranja je dobra poetna pozicija za kvalitetan posao ovih dana.</span> <a href='http://www.startit.rs'>Proitajte vi邸e...</a> Poznavanje kodiranja je dobra poetna pozicija za kvalitetan posao ovih dana. Proitajte vi邸e...
  • 22. KAKO BROWSER ISCRTAVA WEB STRANU? BLOCK ELEMENTI : BROWSER IH SLA貼E JEDAN ISPOD DRUGOG! <h1>Internet i poslovanje</h1> <p>Mogunosti 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 PODRKA p#main { display:block; } span.marker { display:inline; } a.external { display:block; } li { display:inline; } CSS DISPLAY - ODREUJE KAKO E BROWSER DA PRIKA貼E ELEMENT
  • 25. RAZMETANJE ELEMENATA NA WEB STRANI FLOAT - SE KORISTI ZA PRERASPODELU ELEMENATA NA STRANI
  • 26. RAZMETANJE 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=/slideshow/html-css-i-javascript-web-tehnologije-3-predavanje-startitrs/60988005/"petar.jpg"> img { float:right; } float:none; float:left; float:right;
  • 27. PRIMENA FLOAT SVOJSTVA RAZMETAJ ELEMENATA NA WEB STRANI
  • 28. CSS FLOAT - OSOBINE CLEAR U CSS-u - BRIE DEJSTVO PRETHODNE DIREKTIVE FLOAT footer { clear:both; } clear: none; clear: left; clear: right; clear: both;
  • 29. PRIMENA CLEAR SVOJSTVA FLOAT I CLEAR U KOMBINACIJI - MONO ORU貼JE
  • 30. CSS PREKLAPANJE - OVERFLOW OVERFLOW - KONTROLIE TA SE DEAVA 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 NAUILI?
  • 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 - nain za pozicioniranje elemenata DOMAI 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?