<Primjena HTML i CSS

tehnologija u razvoju mrežnih

stranica/>
#uvod {
Renata_Kramberger: pred.;
}
 Kontakt
• Predavanja
• Renata Kramberger, struč. spec. ing. techn. inf.,
predavač
• renata.kramberger@tvz.hr + MS Teams + Slack
• Vježbe
• Petar Osterman, struč.spec.ing.techn.inf., asistent
• petar.osterman@tvz.hr + MS Teams
• Tomislav Čukelj , struč.spec.ing.techn.inf., asistent
• tomislav.cukelj@tvz.hr + MS Teams
 Materijali
• moj.tvz.hr
• Obavijesti
• Predavanja
• Pripreme za laboratorijske vježbe
• lms-2020.tvz.hr/
• Predavanja
• Pripreme za laboratorijske vježbe
• Zadatci za laboratorijske i seminarske vježbe
• Predaja zadataka
• Kolokviji
• Ispiti
 Opće vijesti – koncept rada
Nastava se održava u obliku:
1. Predavanja
2. Laboratorijskih vježbi
3. Seminarskih vježbi

Ispit je moguće položiti

a) Kolokviranjem
b) Ispitom
 Predavanja
• Izvode se online
• Predavanja će biti snimana unaprijed
• Snimka predavanja će biti objavljena u petak za idući
tjedan
• U terminu predavanja (po rasporedu) će biti
konzultacije:
1. Ukratko ponavljanje sadržaja predavanja
2. Odgovaranje na pitanja vezana uz predavanje
3. Rješavanje dodatnih zadataka za utvrđivanje gradiva
4. Rješavanje nedoumica vezano uz pripreme za
laboratorijske vježbe
5. Rješavanje nedoumica vezano uz seminarske vježbe
 Laboratorijske vježbe
• 9 laboratorijskih vježbi
• Svaka vježba se boduje sa 0-2 boda
• Kako bi pristupili laboratorijskoj vježbi potrebno
je riješiti i predati pripremu (lms-2020.tvz.hr)
• Vježbe su online
• lms-2020.tvz.hr + MS Teams
• Svaki student samostalno kodira stranicu u
skladu sa zadatkom koristeći gradivo naučeno
iz prethodnih predavanja.
• Ukupno 18 bodova
Zadatak za pripremu za vježbe
• U tjednu prije vježbi, biti će objavljen zadatak kojeg je obavezno riješiti
prije (virtualnog) dolaska na (online) laboratorijsku vježbu.

• Svaki student samostalno rješava pripremu i uploada ju na LMS-u na za

to predviđeno mjesto.

• Ako je priprema nepotpuno riješena, nastavnik će oduzeti jedan bod od

ukupno ostvarenog broj bodova na toj laboratorijskoj vježbi.

• Ako je student pripremu prepisao ili predao rješenje koje nije niti blizu
traženom ili je pak prazno, student će iz te laboratorijske vježbe imati nula
bodova.

• Pripremu je potrebno predati prije (virtualnog) dolaska na (online) vježbu.

 Seminarske vježbe
• Seminarske vježbe = projektni zadatak
• Samostalna izrada projekta
• Dodatno utvrđivanje gradiva
• 4 termina predaje seminarske vježbe kroz semestar
• Za svaki termin je određen dio koji mora biti odrađen
• Za svaki dio projekta je moguće dobiti 0-2 boda
• Održavaju se u terminima laboratorijskih vježbi
• Predaja je online
• lms.tvz.hr + MS Teams
• Ukupno nose 8 bodova
Tjedan Datum Predavanje Vježbe Broj bodova

1
05.10.-09.10. Uvod -
2
12.10.-16.10. Jezici za obilježavanje, osnove HTML-a -
3 2
19.10.-23.10. Sidrišta, slike, vanjski okviri, liste Osnove HTML-a
4 2
26.10.-30.10. Tablice i obrasci Sidrišta, slike, vanjski okviri, liste
5 2
02.11.-06.11. CSS osnovno stiliziranje, model kutije Tablice i obrasci
6 2
09.11.-20.11. HTML5 layout, pozicioniranje CSS stiliziranje, model kutije
7 2
16.11.-20.11. - (18.11. praznik) Projektni zadatak
8 2
23.11.-27.11. Plutanje, responzivnost HTML5 layout, pozicioniranje
9 2
30.11.-04.12. Navigacija, bloknost i redačnost Float i responzivnost
10
07.12.-11.12. Radni okviri, rešetka, SEO K1
11 2
14.12.-18.12. CSS3 modularni razvoj weba, tranzicije Rešetka (Bootstrap)
12 2
21.12.-25.12. Font ikone, pseudoelementi Projektni zadatak
13 Fontovi, font ikone, pseudoklase + 2
11.01.-15.01. Flexbox navigacija
14 2
18.01.-22.01. HTML5 video i mape, CSS3 svojstva Projektni zadatak
15 2
25.01.-29.01. Priprema za kolokvij Flexbox, mape, CSS3
16 2
01.02.-05.02. - K2 + predaja projekta
 Grupe za laboratorijske vježbe
• Raspored je utvrđen i objavljen na moj.tvz.hr na stranicama
kolegija.

• Studenti će se samostalno prijavljivati u željenu grupu.

• U grupama nakon 16:00 sati, prednost imaju izvanredni

studenti. Ako u dotičnim grupama ostane slobodno mjesto
nakon što se svi izvanredni studenti prijave, mogu se u njih
prijaviti i redovni studenti. Izvanredni studenti iznimno se
mogu prijaviti i u termine za redovne studente.

• Dolazite u grupu za koju ste se zabilježili, ostale grupe

neće vam biti vidljive na MS Teams prilikom online
izvođenja nastave!

10
Pravo na potpis (izlazak na ispit)
1. Bodovi u labosu
• Student smije sakupiti najviše 3 nule (ne smije imati
nula bodova na više od 3 labosa na kojima je
prisustvovao)
– CILJ: Na svakom labosu dobiti 2 boda!
– U zadnjem dijelu semestra kada su zadatci složeni,
lako se ‘omakne’ nula
• Potrebno je sakupiti 10 od 18 boda za ostvarivanje
potpisa
Pravo na potpis (izlazak na ispit)
2. Izostanci s labosa
• Toleriraju se najviše 2 izostanka (za ta dva izostanka
nije potrebno donositi ispričnice)
• Studenti koji izostanu gube mogućnost sakupljanja
maksimalnog broja bodova
• Nadoknada vježbi - ne postoji

3. Nadoknada bodova s labosa

• Ne postoji
• Nema labosa niti bliceva za nadoknadu na kraju
semestra
Pravo na potpis (izlazak na ispit)
4. Bodovi od projekta
• Potrebno je ostvariti minimalno 4 boda
 Kako do ocjene
a) KOLOKVIRANJEM
ocjena iz labosa -> 40% ukupne ocjene
ocjena s 1. kolokvija -> 30% ukupne ocjene
ocjena s 2. kolokvija -> 30% ukupne ocjene
/* iz svake komponente potrebno je ostvariti pozitivnu ocjenu */

b) REGULARNIM ISPITOM
ocjena iz labosa -> 40% ukupne ocjene
ocjena pismenog ispita -> 60% ukupne ocjene
/* iz svake komponente potrebno je ostvariti pozitivnu ocjenu */

• Kolokviji i ispiti pišu se na računalu.

• U zadanom vremenu potrebno je iskodirati zadanu stranicu (sličan
princip kao i na labosu).
Ocjena s laboratorijskih + seminarskih
vježbi

Bodovi Ocjena
0 - 13 Nedovoljan (1)
14 - 16 Dovoljan (2)
17 - 19 Dobar (3)
20 - 22 Vrlo dobar (4)
23 - 26 Izvrstan (5)
 Kako do ocjene
• Kolokviji i ispiti se održavaju uživo na Vrbiku!
• 1. kolokvij – u tjednu 07.12.-11.12.
• 2. kolokvij – u tjednu 01.02.-05.02.
• Termini bi trebali biti u petak/subotu
• Usmeni ispit nije obavezan

• Ukoliko epidemiološki uvjeti ne budu dopuštali kolokvije

uživo – kolokviji + obavezni usmeni

• Obzirom da usmeni ispit nije obavezan ako je kolokvij

uživo, studenti koji žele pokušati popraviti ocjenu mogu
usmeni zatražiti nakon ostvarene pozitivne ocjene s
kolokvija. Na usmenom ispitu, ocjenu s kolokvija je
moguće povećati, zadržati ili smanjiti.
 Kako do ocjene – kolokvijski rok
• Prvi ispitni rok naziva se još predrok odnosno kolokvijski rok

• Na njemu će se održati ispravak jednog od kolokvija

• Pristupiti mu mogu oni studenti koji su:

• imaju pravo na potpis iz kolegija
• jedan kolokvij su položili (bilo koji)
• na drugi kolokvij nisu izašli ili ga nisu položili (ocjena 0 ili 1)
Kako do ocjene – ostali ispitni rokovi

• Na svim ostalim ispitnim rokovima vrijedi pravilo da

pismenom dijelu ispita mogu pristupiti samo oni studenti
koji su ostvarili pravo na potpis
• Usmeni ispit nije obavezan

• Ukoliko epidemiološki uvjeti ne budu dopuštali ispite

uživo – pismeni online + obavezni usmeni

• Obzirom da usmeni ispit nije obavezan ako je pismeni

ispit uživo, studenti koji žele pokušati popraviti ocjenu
mogu usmeni zatražiti nakon ostvarene pozitivne
ocjene s pismenog ispita. Na usmenom ispitu, ocjenu s
ispita je moguće povećati, zadržati ili smanjiti.
 Etično ponašanje
• Svako prepisivanje i korištenje
nedozvoljenih materijala kao i tuđih kodova
biti će najstrože kažnjeno.
• Studenti mogu očekivati sankcije poput:
• Dodjeljivanje negativnih bodova za određenu
aktivnost / vježbu
• Oduzimanje svih bodova na aktivnosti / vježbu
• Uputu za napuštanje ispita sa padom ispita
• Ukidanje prava na potpis
• Nemogućnost izlaska na ispit
• Ponovni upis kolegija iduće godine
 Ponavljači
• Studenti koji ponavljaju kolegij i ostvarili su
pravo na potpis mogu prenijeti bodove
• Potrebno je javiti se meni na mail do kraja drugog
tjedna nastave!
• Studenti također mogu ponovno pohađati
laboratorijske vježbe
• Ti studenti se odriču bodova od prošle akademske
godine
• Zahtjevi studenata koji će dolaziti tijekom semestra
da im se bodovi ipak priznaju, neće se uvažavati
 Ponavljači
• Moraju predati projekt bez obzira na prijenos
bodova!
• utvrđivanje gradiva
• upoznavanje sa novim gradivom uvedenim u ovoj ak.
godini
• Kada se prijave svi studenti koji prenose
bodove će oni biti raspoređeni po grupama za
vježbe ili će za njih biti otvoren dodatan termin
Studenti s iskustvom – projektno polaganje
vježbi
• Studenti koji dobro i suvereno vladaju ovim područjem
mogu umjesto klasičnih laboratorijskih vježbi raditi na
projektnom zadatku (konstrukcijskom) u dogovoru s
nositeljem kolegija
• Potrebno je javiti se najkasnije do drugog predavanja
• Podrazumijeva se izvrsnost u svim nastavnim
jedinicama s kolegija (a ne tek raspoznavanje gradiva
na razini ‘instalirati ću WordPress temu’)

22
Što ćemo zapravo raditi na kolegiju?
 Cilj kolegija
• Upoznati studente s teoretskim i praktičnim
radom u HTML-u i CSS-u
• Kodiranje vlastite mrežne stranice
• Proces izrade suvremenog weba
• Frontend
Svijet weba
Svijet weba
 Razlikovati
• Statične web stranice <> dinamične web
aplikacije

• Klijent <> poslužitelj

• Frontend <> backend

/*na kolegiju se ne bavimo backend tehnologijama*/

 Cilj
• Početak vašega rada na internetu i osnova za druge
kolegije na TVZ-u:
• Oblikovanje WEB stranica,
• Interaktivno programiranje na WEB-u,
• Programiranje WEB aplikacija,
• Pretražnici i navigacija na WEB-u
• Napredne baze podataka,
• Razvoj aplikacija na Android platformi,
• Razvoj web aplikacija u ASP.NET MVC tehnologiji,
• ...
 Cilj
• Kolegij se neće baviti dizajnom, kodiraju se web
stranice u skladu s danim predlošcima
• Ovo znači „konkretan” posao na labosima
• NEMA ni dobrog razvojnog inženjera
(developera) niti dizajnera web-stranica / web-
aplikcija bez poznavanja mogućnosti i
ograničenja jezika kojim se izrađuju web-
stranice
Literatura na vježbama / kolegiju
• Unaprijeđena predavanja u skladu s novim
tehnologijama
• Kodovi s predavanja
• W3schools
• Literatura iz ‘zlatnog listića’

30
 Alati
• Moguće je koristiti više alata:
• Notepad++ (rudimentalan)
• Visual Studio Code
• Brackets
• Sublime
• ...
• Na kolokviju/ispitu će biti Visual Studio Code
• https://code.visualstudio.com/
• Chrome i Mozilla Firefox su standardni prebirnici
(browseri) na kolegiju.

• Ne radimo u WYSIWYG uređivačima!

Kako kreirati web stranicu?

<demo />