Kurs HTML, CSS i Javascript web tehnologija
3. predavanje - HTML5 elementi i uvod u CSS
Kurs je održan u okviru projekta besplatne obuke građana i u organizaciji Startit centra - više informacija na www.startit.rs
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
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
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
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=”...”>
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
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;
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