OWS - Vježbe

OBLIKOVANJE WEB-STRANICE
1. Vježba
Što sve mora biti definirano prije nego možemo pristupiti izradi žičanog modela?
Arhitektura informacija, Ishodi stranice, Ciljana publika
Kojim CSS metodama možemo očistiti floatane elemente tako da roditelj element
ubraja visinu svih elemenata koji se pod njim nalaze?
Tzv. "Clearfix" metodom, Dodavanjem "overflow: hidden" atributa
U žičanom modelu striktno je zabranjeno definirati boje, tipografiju ili druga

vizualna obilježja.
Netočno
Navedite par osnovnih tagova koji se nalaze u HTML strukturi i potrebni su za

stvaranje dokumenta.
head, body
Koje sve vrte izrade žičanog modela postoje? Navedite najmanje dvije.
Rukom crtani, Kodirani, Računalom crtani
2. Vježba
Što je mreža?
Dvodimenzionalna struktura horizontalnih i vertikalnih linija koje koristimo za
strukturiranje elemenata stranice
Zlatni rez ili tzv. božanski omjer kojeg često koristimo u dizajnu i umjetnosti, iznosi
koliko?
Približno 1.6
Koje su prednosti korištenja mreže

Daju red, slijed i harmoniju, Mreže olakšavaju dodavanje novih sadržaja u skladu sa
dizajnom
Fleksibilna mreža se prilagođava samo i strogo širini prozora odnosno web

preglednika.
Netočno
U mreži koja ima maksimalan raspon 960 piksela odnosno 12 kolona, koliko iznosi
element koji zauzima 4 kolone i sa lijeve i desne strane ima 10 pixela margine?
Rezultat je broj izražen pixelima.
300
3. Vježba
Koja od navedenih mjernih jedinica ne nudi fleksibilan layout, odnosno layout koji
je ovisan o veličini okoline?
Cm
Koja od navedenih vrijednosti ne pripada position atributu:

Float
Ukoliko niti jednom roditelj elementu ne damo position: relative atribut, u odnosu
na koji element će dani element koji ima position: absolute biti pozicioniran ako mu
mijenjamo atribute kao što su left, right, top ili bottom? Napomena: odgovor je
oblika <element>!
<html>
Atribut float neće utjecati na elemente koji su position s vrijednošću absolute ili
fixed.
Točno.
Maksimalna vrijednost z-index atributa je 1000 i njegova vrijednost ne može imati

negativnu vrijednost, primjerice -1.
Netočno
4. Vježba
Navedite barem 3 vrste navigacija

Tabularna, Breadcrumbs, Off-canvas
Fade in/out tranzicija se ne može vršiti na display: block odnosno display: none
atributu.
Točno
Potpuno je svejedno da li za navigaciju koristimo <ul> ili <ol>.

Netočno
Tri temeljna pitanja na koja odgovara dobra navigacija

Gdje sam trenutno, gdje mogu ići, gdje sam bio
Kako se zove metoda istraživanja za izradu strukture navigacije?

Sortiranje kartica
5. Vježba
Kolika je veličina fonta postavljena standardno ukoliko ju sami ne postavimo u

HTML dokumentu?
16px
Koja 2 atributa mora @font-face sintaksa minimalno imati kako bi definirali font za
našu stranicu?
Font-family i src
Koja je karakteristika web tipografije?

To što se ona rasterizira u trenutku prikazivanja na ekranu
Za font veličine 14 piksela, koja je idealna širina kolumne?

420 piksela
Koja od navedenih vrijednosti za veličinu tipografije jest relativna

Font-size: 4rem
6. Vježba
Koji atributa u CSS-u omogućava da sliku fiksiramo za pozadinu, odnosno da se slika

pomiče kako i mi scrollamo po stranici
background-attachment
Ako ne postavimo niti jednu boju u pozadinu, koju boju odnosno vrijednost će imati
background-color atirbut?
Transparent
Koju vrijednost position atributa imaju gotovo svi elementi standardno osim ako im
drugačije u CSS-u ne zadamo? Odgovor je samo vrijednost bez position atributa.
Static
Koji od slijedećih formata predstavljaju formate slika za web?
SVG, JPEG, GIF
Koja 2 od slijedećih karakteristika nisu jedan od 3 glavnih karakteristika slika za

web:
Kontrast, Format
Koji od sljedećih formata slika mogu biti transparentni?

GIF, SVG, PNG
Sintaksom background-image: url("img_tree.png"), url("img_flwr.png"); možemo

uključiti u CSS-u dvije slike u istom elementu?
Točno
Napišite CSS izraz kojim biste dohvatili pod-izbornik prilikom pomaka miša preko
nekog postojećeg <li> elementa. Napomena: izraz pišite samo korištenjem HTML
oznaka, bez klasa.
li:hover ul
7. Vježba
Koje od navedenoga nisu modeli boja?

VHS, FCS, FCB
Koju boju povezujemo sa vrijednostima otvorenosti, inteligencije, vjerom i
stabilnošću?
Plava
Koji atribut koristimo ako želimo promijeniti boju ruba?

border-color
Koje od navedenih boja predstavljaju tople boje?

Roza, Smeđa, Bordo
Napišite sintaksu kojom ćemo dobiti linearni prijelaz pozadinske boje. Odgovor je
tipa atribut: vrijednost. Ne definirajte boje uvrijednosti!
background: linear-gradient
Navedite 3 razloga važnosti odabira boja

Estetika, Identitet, Uporabljivost
Definirajte polu-transparentnu crnu boju u CSS-u. Ne pišite atribut, već samo

vrijednost!
rgba(0,0,0,0.5)
Navedi nekoliko načina kombiniranja boja
Analogni, komplementarni, monokromatski
Što predstavlja slovo „a“ u RGBA i HSLA modelima boja?
Alpha
Navedite jednu od 3 glavnih komponenti boja
Ton, zasićenost, svjetlina( samo jedna treba)
8. Vježba
Što radi tranistion-timing-function atribut?

Mijenja vrstu animacije
Koja je sintaksa za definiranje animacije

@keyframes
Koje od navedenih atributa ne možemo animirati i tranzicionirati u CSS-u?

Position, display i transition
Napišite vendor prefiks koji koristimo za preglednike Chrome, Safari i Opera
prilikom pisanja CSS atributa koji jos nisu usvojeni.
-webkit-
U keyframes animacijama možemo koristiti samo vrijednost pisane u postotcima.

Netočno
Koja su 3 osnovna oblika u dizajnu?

Apstraktni, organski, geometrijski
Kod animation atributa, koju vrijednost koristimo ako želimo da animacija traje
beskonačno?
infinite
Napišite pravilnu sintaksu za tranziciju koja će kroz raspon od 200ms odraditi

promjenu opaciteta i potom u trajanju od 100ms odraditi animaciju padding
vrijednosti. Konačan odgovor pišete kao transition: vrijednost.
transition: opacity 200ms, padding 100ms;
9. Vježba
Kojim medijskim upitom pokrivamo printere?

@media print
Koju vrijednost mora imati height atribut ako želimo pokriti čitav ekran, bez da
mijenjamo visinu roditelj elemenata? Imajte na umu da postoci neće raditi!
100vh
Ako se element nalazi unutar elementa veličine 640 piksela, a sam element iznosti
230 piksela, koliko će iznositi njegova margina ako je sa svake strane 20 piksela
margine? Vrijednost zapisati samo kao broj u postotku!
3.125%
Koja su 3 glavna načina kreiranja ritma u dizajnu?

Regularni ritam, Progresivni ritam, Tečni ritam
@media atribute je potrebno prefiksirati.

Netočno
Koja vrijednost unutar < meta name = „viewport> atributa omogućava prikaz
stranice u punoj sirini na svim uređajima? Odgovor je oblika atribut=vrijednost
width=device-width
Napišite medijski upit koji pokriva raspon ekrana od najmanje 240 piksela do
najviše 500 piksela. Odgovor je oblika @media only screen vrijednosti bez vitičastih
zagrada na kraju!
@media only screen and (min-width: 240px) and (max-width: 500px)
Koja vrijednost unutar <meta name="viewport"> atributa ograničava korisniku
zumiranje stranice? Odgovor je oblika atribut = vrijednost.
user-scalable=no
10. Vježba
Koji display je u stanju primati padding, margin i ostale vrijednosti koje će utjecati
na njegovu okolinu a da pri tome ima širinu sadržaja koji se u njemu nalazi?
Display: inline-block
Ako je određeni element postavljen kao position: fixed, koja dva atributa moramo
postaviti na nulu kako bi element pokrio čitavu visinu ekrana? Oprez, samo 2
odgovora su točna! Svako netočno nosi negativne bodove.
Top, Bottom
Napišite CSS deklaraciju kojom ćemo dohvatiti svaki paragraf koji ispred sebe već
ima paragraf. Na kraju deklaracije ne treba pisati vitičaste zagrade!
p+p
Koji CSS atribut i vrijednost spriječava pucanje elemenata u novi red ako su
elementi display: inline (svi elementi koji se ponašaju poput teksta)? Drugim
riječima, kako dozvoliti da tekst ostane u jednoj liniji unatoč manjku prostora iz
okoline? Odgovor je formata atribut: vrijednost.
white-space: nowrap
Pomoću kojeg pseudo atributa provjeravamo da li je input tipa radio označen

odnosno selektiran?
checked
Koju os overflow atributa moramo postaviti na koju vrijednost da bismo omogućili

skrolanje po horizontali? Odgovor je formata overflow-os: vrijednost.
overflow-x: scroll
Koje od navedenog predstavlja vrste input elemenata?
Date, Reset, Number
Kako dohvatiti samo onaj <ul> element kojemu je prvi roditelj <nav> element?
Odnosno kako selektirati samo prvi <ul> u nizu, a ne i sve <ul> koji se nalaze u
primjerice nekom <li> elementu?
nav > ul
Kako dohvatiti samo jedan paragraf koji slijedi odmah nakon prvog paragrafa?
p:first-child + p
Koju CSS vrijednost koristimo da float atribut vratimo na pocetno stanje? ( samo
vrijednost)
None ili Initial (oboje prihvaca)
Pitanja iz lekcije
Preklapanjem svih triju boja suptraktivne sinteze dobivamo crnu boju?
Dobivamo nijansu koja nije crna, već tamno-smeđa i kao takva se u printu ne može koristiti
za kontraste
Ako je idealna žuta boja zapisana kao #FF0 u troznamenkastom heksadecimalnom zapisu,
kako izgleda njezin zapis u šesteroznamenkastoj vrijednosti?
#FFFF00
U RGBA modelu boja možemo prikazati više boja nego u heksadecimalnom zapisu?
Možemo prikazati 16 milijuna u oba.
Koji od navedenih preglednika će vendor prefix -webkit- obuhvatiti?
Chrome
Koji od navedenih atributa nudi najbolje performanse u vidu brzine prikazivanja animacije
u sličicama po sekundi?
Transform
Što će se dogoditi ako roditelj elementu ne postavimo visinu?
Oba sloja će se nalaziti van elementa
(Animacija nema utjecaja na ovo. Roditelj ne registrira nikakav sadržaj pod sobom i samim
time treba barem neku visinu, s obzirom da su svi elementi pod njim position: absolute.)
Kakav je to fluidan layout?
Layout koji širinu mijenja ovisno o širini ekrana
Decimalne vrijednosti valja zaokružiti na prvu veću vrijednost kako bismo dobili što točniju
vrijednost u postocima.
Netočno. (Vrijednosti zadržavamo onakvima kakve jesu.)
Koje uređaje pokriva medijski upit koji ima vrijednost screen i max-width: 768px.
Mobilne i tablet uređaje
Transform koji ima translateX odnosno translateY može primati samo vrijednosti izražene
u pikselima (primjerice 250 piksela).
Netočno. (Može primati i u postocima koji su relativni u odnosu na širinu/visinu elementa.)
Koju od navednih vrijednosti dohvaća atribut "for" unutar label elementa?
ID
Kojom display vrijednošću možemo učiniti element vidljivim ako smo ga prethodno sakrili
sa display: none?
Svim vrijednostima osim none

OWS - Vježbe

Uploaded by

Copyright:

Available Formats

You might also like

OWS - Vježbe

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OWS - Vježbe

Uploaded by

Copyright:

Available Formats

OBLIKOVANJE WEB-STRANICE

U žičanom modelu striktno je zabranjeno definirati boje, tipografiju ili druga

Navedite par osnovnih tagova koji se nalaze u HTML strukturi i potrebni su za

Koje su prednosti korištenja mreže

Fleksibilna mreža se prilagođava samo i strogo širini prozora odnosno web

Koja od navedenih vrijednosti ne pripada position atributu:

Maksimalna vrijednost z-index atributa je 1000 i njegova vrijednost ne može imati

Navedite barem 3 vrste navigacija

Potpuno je svejedno da li za navigaciju koristimo <ul> ili <ol>.

Tri temeljna pitanja na koja odgovara dobra navigacija

Kako se zove metoda istraživanja za izradu strukture navigacije?

Kolika je veličina fonta postavljena standardno ukoliko ju sami ne postavimo u

Koja je karakteristika web tipografije?

Za font veličine 14 piksela, koja je idealna širina kolumne?

Koja od navedenih vrijednosti za veličinu tipografije jest relativna

Koji atributa u CSS-u omogućava da sliku fiksiramo za pozadinu, odnosno da se slika

Koja 2 od slijedećih karakteristika nisu jedan od 3 glavnih karakteristika slika za

Koji od sljedećih formata slika mogu biti transparentni?

Sintaksom background-image: url("img_tree.png"), url("img_flwr.png"); možemo

Koje od navedenoga nisu modeli boja?

Koji atribut koristimo ako želimo promijeniti boju ruba?

Koje od navedenih boja predstavljaju tople boje?

Navedite 3 razloga važnosti odabira boja

Definirajte polu-transparentnu crnu boju u CSS-u. Ne pišite atribut, već samo

Što radi tranistion-timing-function atribut?

Koja je sintaksa za definiranje animacije

Koje od navedenih atributa ne možemo animirati i tranzicionirati u CSS-u?

U keyframes animacijama možemo koristiti samo vrijednost pisane u postotcima.

Koja su 3 osnovna oblika u dizajnu?

Napišite pravilnu sintaksu za tranziciju koja će kroz raspon od 200ms odraditi

Kojim medijskim upitom pokrivamo printere?

Koja su 3 glavna načina kreiranja ritma u dizajnu?

@media atribute je potrebno prefiksirati.

Pomoću kojeg pseudo atributa provjeravamo da li je input tipa radio označen

Koju os overflow atributa moramo postaviti na koju vrijednost da bismo omogućili

Preklapanjem svih triju boja suptraktivne sinteze dobivamo crnu boju?

Možemo prikazati 16 milijuna u oba.

Koji od navedenih preglednika će vendor prefix -webkit- obuhvatiti?

Što će se dogoditi ako roditelj elementu ne postavimo visinu?

Oba sloja će se nalaziti van elementa

Kakav je to fluidan layout?

Layout koji širinu mijenja ovisno o širini ekrana

Netočno. (Vrijednosti zadržavamo onakvima kakve jesu.)

Mobilne i tablet uređaje

Netočno. (Može primati i u postocima koji su relativni u odnosu na širinu/visinu elementa.)

Koju od navednih vrijednosti dohvaća atribut "for" unutar label elementa?

Svim vrijednostima osim none

You might also like