HTML, CSS i JAVASCRIPTWEB 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

PaddingSadržaj

MarginBorder

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

10px10px

img {border: 5px dotted grey;

}

10px10px

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!

PaddingSadržaj

MarginBorder

nav {margin : 10px 30px 20px 30px;

}

PADDING I MARGIN - VARIJACIJEarticle {

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-toppadding-bottompadding-leftpadding-right

margin-topmargin-bottommargin-leftmargin-right

nav {border-left: 3px dashed gold;Border-right: 3px dashed gold;

}

BORDER - VARIJACIJEarticle {

border-top : 4px solid gold;}

border-left, border-right, border-top, border-bottom

HTML ELEMENTI ZA GRUPISANJEindex.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ŠKAp#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?