Prirodno-matematički fakultet u Nišu

Departman za Računarske nauke

Pismeni ispit iz predmeta “Uvod u web programiranje”

Datum zadavanja: 03.07.2021. godine (Jun 2 ispitni rok)

Vreme predviđeno za izradu testa: 120 minuta

Na svom računaru napraviti folder pod nazivom ime_prezime_br.indeksa.

U ovom folderu treba da se nalazi Vaš test. Folder treba da ima sledeću sadržinu:
➢ fajl index.html (u title sekciji napisati svoje ime, prezime i broj indeksa)
➢ fajl stil.css
➢ fajl script.js
➢ folder slike

Veb stranica u desktop formatu treba da izgleda kao što je prikazano na sledećoj slici:

Hederi stranice zauzima njenu celu širinu.

Navigacija u desktop verziji zauzima ¼ stranice, središnji deo sa formom zauzima ½
stranice, dok desni deo sa slikom zauzima takođe ¼ stranice.

Kada je širina ekrana manja od 650px svi elementi treba da se prostoru celom
širinom stranice i treba da se ređaju jedan ispod drugog.

Opšta podešavanja:
➢ Za font na stranici koristiti ‘Lucida Sans’, Verdana, sans-serif
➢ Veličinu i boju fonta ne podešavati, osim ukoliko drugačije nije naglašeno.

Heder stranice
➢ Napisan u odgovarajućem tagu
 ➢ Treba da se prostire celom širinom stranice, i padding sa sve četiri strane
postavljen na 15px
➢ Za pozadinsku boju hedera postaviti #3D8AC7
➢ Treba da sadrži naslov najveće veličine obojen belom bojom i levo poravnat.

Meni
➢ Napisan u odgovarajućem tagu
➢ Zauzima ¼ stranice u desktop, a celu širinu stranice u mobile formatu
➢ Pozadinska boja kartica je #3D8AC7, dok je boja fonta bela (white)
➢ Prostor oko svake kartice je 10px sa sve četiri strane
➢ Udaljenost teksta od ivice kartice je 12px sa sve četiri strane
➢ Kada se kursorom stane preko određene kartice menija, ta kartica treba da
promeni pozadinsku boju u #7FA633.
➢ U zavisnosti od toga na koju karticu menija je korisnik kliknuo, na stranici se
prikazuje odgovarajuća slika (konverzija.png, kursnaLista.png, stednja.png ili
ebanking.png). Slike se nalaze u folderu slike koji je prosleđen uz tekst testa.

Forma:
➢ Napraviti formu kao sa sledeće slike:

➢ Klikom na dugme za izračunavanje ispod forme se vrši ispis u tabeli na

sledeći način:
○ Svaki put kada se klikne na dugme “Potvrdi”, generiše se novi red
tabele. U prvoj ćeliji se ispisuje “Svrha”, a u drugoj ćeliji se ispisuje
“Iznos.
○ Ukoliko je korisnik odabrao da vrši “uplatu”, onda će se tekst ispisivati
zelenom bojom, ukoliko je odabrao “isplatu”, onda će se tekst ispisivati
crvenom bojom.
○ Ispod tabele u paragrafu, plavom bojom i većim fontom, ispisati koliko
je trenutno stanje na računu (na početku pokretanja programa stanje
 na računu je 0 i ono se menja prema uplatama i isplatama koje je
korisnik vršio).
➢ Klikom na dugme “Resetuj”, resetvati sva polja forme

Primer:

Bodovanje Ukupno (100%)

Organizacija fajlova, urednost koda i opšta podešavanja stranice 5%

Responsive stranica 14%

- Raspored elemenata u mobile verziji 7%
- Raspored elemenata u desktop verziji 7%

Heder 5%

Meni 10%

Desni deo stranice 20%

- Samo fiksirana slika na stranici 4%
- Slika koja se menja u zavisnosti od toga na koji element u
meniju je kliknuto 16%

Forma 46%
- HTML forma 10%
- Računanje i ispis 36%