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

HTML, CSS i JAVASCRIPT
WEB TEHNOLOGIJE - PREDAVANJE 4.
SEEICT - STARTIT CENTAR

PROGRAM PREDAVANJA I VEŽBI
● Slike kao pozadinska dekoracija elemenata
● Visina i širina “block” elemenata
● Inline-block: Najbolje od oba sveta
● Raspoređivanje i slaganje elemenata u slojevima

SLIKE - KAO POZADINE ELEMENATA

Section.news {
background-image: url(‘brooklyn-museum.png’);
background-position : center center;
background-repeat : no-repeat;
background-color : orange;
background-size : cover;
}

● Background-position: top, right, left, bottom, center
● Background-position: px, %
● Background-size: cover, contain
● Background-size: px
● Background-repeat: repeat, repeat-x, repeat-y, no-repeat

HTML ELEMENTI - VELIČINA
WIDTH I HEIGHT - BLOCK ELEMENTI
article.enterprise {
width : 100px;
height : 300px
} HEIGHT
WIDTH

HTML ELEMENTI - WIDTH I HEIGHT
HEIGHT
WIDTH
MARGIN PADDING

HTML ELEMENTI - WIDTH I HEIGHT
article.news {
width : 400px;
height : 200px;
}
but the company's services and cloud products
continue to help generate new revenue. The earnings
won't please Wall Street investors though, many of
whom were hoping to see Microsoft's stock surge and
reclaim its 1999 record.
HEIGHT
WIDTH
ELEMENTIMA SE RETKO ZADAJE FIKSNI HEIGHT - ZBOG SADRŽAJA KOJI NE MOŽEMO DA PREDVIDIMO!

CSS PRIKAZIVANJE ELEMENATA: INLINE, BLOCK
IMG, A, SPAN - INLINE ELEMENTI
Poznavanje kodiranja je dobra početna
pozicija za kvalitetan posao ovih dana. Pročitajte više...
H1, P, UL - BLOCK ELEMENTI

Index.html:
<a class=’contact’ href=”mailto:office@itdogadjaji.com”>Pošaljite nam Email</a>
Style.css:
a.contact {
background: gold
width : 200px;
height: 100px;
}
HTML ELEMENTI - ŠIRINA I VISINA
WIDTH I HEIGHT SVOJSTVA SE IGNORIŠU KOD INLINE ELEMENATA!

CSS PRIKAZIVANJE ELEMENATA - PODSEĆANJE : FLOAT

CSS - INLINE, BLOCK ILI… NEŠTO TREĆE?

CSS - INLINE-BLOCK
● Elementi se ređaju jedan pored drugog (slično kao
inline elementi)
● Elementima se može davati fiksna širina i visina
ul.gallery li {
display : inline-block;
}
INLINE-BLOCK : PRAKTIČNO REŠENJE ZA ELEMENTE KOJI SE SLAŽU JEDAN DO DRUGOG

CSS - INLINE-BLOCK
INLINE, INLINE-BLOCK, BLOCK - MOĆNI KADA SE PRAVILNO KORISTE

POREDAK HTML ELEMENATA
QUOTE
RELATIVNO POZICIONIRANJE - ZA FINO PODEŠAVANJE POZICIJE ELEMENTA!

RELATIVNO POZICIONIRANJE
.quote {
position:relative;
top:-30px;
right : 80px;
}
TOP, BOTTOM, LEFT, RIGHT - MODIFIKATORI POZICIJE ELEMENTA
MAIN ARTICLE
QUOTE

RELATIVNO POZICIONIRANJE
● Zgodno kada je potrebno “fino” podešavanje
pozicije nekog elementa
● Nije za kompleksnije raspoređivanje elemenata
● Ne menja “tok” strane niti utiče na druge
elemente

NAVIGACIJA (MENI) NA STRANI - REŠENJE!

NAVIGACIJA (MENI) NA STRANI - REŠENJE!
APSOLUTNO POZICIONIRANJE - ELEMENT NE UTIČE NA DRUGE ELEMENTE
NAV
SECTION.CONTENT
UL.MENU
ul.menu {
position : absolute;
left : 90px;
top : 20px;
}

OSOBINE APSOLUTNOG POZICIONIRANJA
● Top, bottom, left, right - računaju se u odnosu na parent element
● Ne utiče na raspored okolnih elemenata - browser nije “rezervisao” mesto na strani za
njega
APSOLUTNO POZICIONIRANJE - ZA ELEMENTE KOJI SE SLAŽU U “SLOJEVIMA”

ELEMENT POZICIONIRAN U ODNOSU NA BODY
index.html:
<body>
<nav> . . .</nav>
<article> . . . </article>
<div class=’modal’> . . . </div>
</body>
Style.css:
.modal {
left : 40%;
top : 20px;
}

ELEMENT POZICIONIRAN U ODNOSU NA MODAL!
index.html:
<div class=’modal’>
<h1>Modal Title</h1>
<p class=’body’>One fine body...</p>
<a href=’#close’>Close</a>
<a href=’#save’>Save Changes</a>
<div class=’close’></div>
</div>
Style.css:
.modal {
left : 40%;
top : 20px;
}
.close {
top : 10px;
right : 10px;
}

APSOLUTNO POZICIONIRAN ELEMENT - ISCRTAVA SE U ODNOSU NA SVOJ RELATIVNI KONTEJNER!
index.html:
<header>
<nav>
MAIN NAVIGATION
</nav>
<section class='subnav'>
SUBNAVIGATION
</section>
</header>
style.css:
header {
position:relative;
}
.subnav {
position:absolute;
top:30px;
}

RESPONSIVE DESIGN - CSS KOJI SE PRILAGOĐAVA VELIČINI EKRANA

● Background - CSS svojstvo za kreativne stranice
● Dimenzionisanje elemenata - width i height
● Inline-block kao jednostavan alat za raspoređivanje elemenata
● Apsolutno i relativno pozicioniranje
ŠTA SMO DANAS NAUČILI?

ČEGA JOŠ SVE IMA A NISMO POMENULI?
● HTML: SVG, VIDEO, OBJECT, Forme, Tabele, RGBA boje…
● CSS Animacije
● HAML, SASS i LESS preprocesori - olakšanje u pisanju HTML-a i CSS-a
● CSS Biblioteke - Normalize.css, Bootstrap, Foundation...
● Responzivni dizajn i FlexBox pozicioniranje
● Kompleksniji CSS selektori i pseudo selectori, tipografija, Email kodiranje, CSS
optimizacije, Pisanje CSS-a u velikim projektima, CSS nasleđivanje...

● Prethodne sajtove koje smo radili: CV, Sajt za Piceriju, Blog, Galeriju, Test Sajt
- pregledati i preraditi da koriste sve pogodnosti novonaučenih stvari: HTML5
tagova i CSS deklaracija
● Intervjuisati preduzetnika koji nema sajt i napraviti mu sajt - od početka
● Slack Channel - kursindjija.slack.com
DOMAĆI ZADATAK

● Smashing Magazine - magazin o web designu - https://www.smashingmagazine.com
● A List Apart - Web dizajn magazin - http://alistapart.com
● Normalize.css - https://necolas.github.io/normalize.css/
● Twitter Bootstrap CSS Framework - http://getbootstrap.com
● Foundation CSS Framework - http://foundation.zurb.com
● HTML5 Demos - http://codepen.io/ge1doot/pens/popular/
KORISNI LINKOVI

HVALA VAM NA PAŽNJI!
PITANJA?

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

Recommended

Recommended

More Related Content

More from Milovan Jovičić

More from Milovan Jovičić (7)

Recently uploaded

Recently uploaded (9)

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