Zadaca 2018

Prva zadaća iz WEB programiranja
Prva domaća zadaća iz WEB programiranja
HTML i CSS
Izrada osobne WEB stranice

NAPOMENA: Cilj prve domaće zadaće je izgradnja statičkog dijela vaše osobne WEB stranice koja će
stajati na WEB poslužitelju pitagora.mathos.hr. Osobne WEB stranice počeli ste kreirati na
prvim vježbama pa će vam materijali s prvih vježbi (s naglaskom na WEB stranicama koje ste
napravili) značajno pomoći u rješavanju sljedećih zadataka.
1. Osnovne informacije za <head>

Koristite UTF-8 kodnu stranicu. Naslov stranice (unutar elementa <title></title>) može
imati sljedeći oblik:
Ime i prezime – Naslovna stranica
ili
Ime i prezime – Životopis
itd…
ovisno o sadržaju stranice.
2. Struktura vaše WEB stranice
Slika 1. Struktura WEB stranice
1
Zaglavlje
Zaglavlje mora sadržavati sljedeće elemente:
• naziv sveučilišta i odjela, adresu broj telefona i faks

• Logo Odjela za matematiku
• Ima i prezime studenta
• informaciju da se radi o osobnoj stranici studenta Odjela za matematiku (proizvoljno)
• traku s linkovima na sljedeće stranice:
o Naslovna stranica
o Životopis
o Seminarski radovi
o Područje interesa
o Linkovi
Linkovi moraju bit stilizirani pomoću vanjskog stila tako da su centrirani u zaglavlju i da se
nalaze u podnožju zaglavlja.
Pored obveznog broja stranica u prethodnoj listi, možete dodati i stranice po vlastitom
izboru.
NAPOMENA: Ukoliko želite biti kreativni, u zaglavlje možete dodati sliku kao pozadinu ali tako da ona
ne smanjuje preglednost informacija u zaglavlju. Ukoliko se odlučite na sliku u pozadini zaglavlja,
traka sa linkovima mora stajati ispod slike. Pazite na logo (koji je također slika).
VAŽNA NAPOMENA: Za pozicioniranje i stiliziranje svih elemenata na vašim WEB stranicama

koristite isključivo CSS preko vanjskih lista stilova. Što više budete koristili CSS, zadaća će biti bolje
ocjenjena.
Za pozicioniranje i definiranje blokova vaše WEB stranice koristite element div (vaša stranica treba
imati blokovsku strukturu).
Linkovi
U lijevoj traci (vidi Slika 1) napravite meni s linkovima koji se nalaze u traci zaglavlja. Dodajte posebne
efekte linkovima koristeći vanjsku listu stilova (koristeći pseudoklase link, visited, hover, active).
Sadržaj
Ovaj dio stranice se mijenja. Primjerice, stranica zivotopis.html u ovom dijelu sadrži vaš životopis. Na
naslovnoj stranici indeks.html možete staviti osnovne podatke o vama (ime i prezime, adresa
(ako želite), e-mail, broj telefona (ako želite), itd..) i fotografiju.
Na stranici zivotopis.html napišite vaš životopis koristeći liste (možete slijediti način s vježbi)
koje ćete urediti i stilizirati preko CSS-a.
Na stranici za seminarski_radovi.html napravite tablicu koja ima 5 stupaca. Prvi stupac neka
se zove Studij, drugi stupac Godina studija, treći Naziv kolegija, četvrti stupac Seminarski rad a peti
Datoteka. U prvom stupcu pišete naziv studija (Preddiplomski, Diplomski, Nastavnički, itd…). U drugi
2
stupac pišete godinu studija (1. godina, 2. godina, itd…). Neka redak u prvom stupcu razapinje sve
retke u drugom stupcu u kojima je upisana godina tog studija (vidi nazive izabranih seminara i njihove
kratke opise. Zatim, na naslove seminara u tablici koje ste izabrali i opisali u listi, dodajte link koji će
dovesti do opisa u listi (link koji upućuje na nekakav sadržaj u istoj stranici).
Tabela 1). U treću stupac napišite naziv kolegija iz kojeg ste radili seminarski rad. Neka redak u
drugom stupcu razapinje sve retke u trećem stupcu u kojima je upisan naziv kolegija s godine studija
u retku iz drugog stupca (vidi nazive izabranih seminara i njihove kratke opise. Zatim, na naslove
seminara u tablici koje ste izabrali i opisali u listi, dodajte link koji će dovesti do opisa u listi (link koji
upućuje na nekakav sadržaj u istoj stranici).
Tabela 1). U četvrtom stupcu upišite naziv seminarskog rada. . Neka redak u trećem stupcu razapinje
sve retke u četvrtom stupcu u kojima je upisan naziv seminarskog rada iz kolegija u retku trećeg
stupca (vidi nazive izabranih seminara i njihove kratke opise. Zatim, na naslove seminara u tablici koje
ste izabrali i opisali u listi, dodajte link koji će dovesti do opisa u listi (link koji upućuje na nekakav
sadržaj u istoj stranici).
Tabela 1). U četvrtom stupcu upišite ekstenziju datoteke (ili sliku koja opisuje tip dokumenta) na koju
ćete postaviti link. Ispod tabele napravite definicijsku listi koja će sadržavati nazive izabranih
seminara i njihove kratke opise. Zatim, na naslove seminara u tablici koje ste izabrali i opisali u listi,
dodajte link koji će dovesti do opisa u listi (link koji upućuje na nekakav sadržaj u istoj stranici).
Tabela 1 Izgled tablice
Godina
Studij Naziv kolegija Seminarski rad Datoteka
studija
Matematički
aspekti
.doc .pdf .tex
računalnih
Uvod u
znanosti
računarstvo
Enkapsulacija i
1. godina polimorfizam u .doc .pdf
C++
Preddiplomski
Teorem o
studij
srednjoj
Integralni račun .pdf
vrijednosti i
posljedice
Proširenja
.pdf .tex
Uvod u teoriju kvadratnih polja
2. godina
brojeva Diofantske
.pdf
jednadžbe
3
Podnožje
Stavite informacije o autoru stranice i navedite autorska prava, godinu, itd…
Primjerice:
Copyright © 2010 Ime i prezime. Sva prava pridržana.
Stil i veličinu fonta podesite tako da odgovara podnožju (pogledajte WEB stranice koje imaju
podnožje)
3. Smjernice prilikom stiliziranja i upotrebe CSS-a

Za pozicioniranje osnovnih elemenata vaše WEB stranice koristite div elemente koje ćete preko klasa
i identifikatora selektora (u CSS-u) pozicionirati, definirati određeni font u bloku, prored, itd…
Blokove u sadržaju stranice možete uokviriti, dodati boju pozadine tako da stranica ostane čitljiva.

Zadaca 2018

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

Zadaca 2018

Uploaded by

Copyright:

Available Formats

Prva zadaća iz WEB programiranja

Prva domaća zadaća iz WEB programiranja

Izrada osobne WEB stranice

1. Osnovne informacije za <head>

Ime i prezime – Naslovna stranica

Ime i prezime – Životopis

ovisno o sadržaju stranice.

2. Struktura vaše WEB stranice

Slika 1. Struktura WEB stranice

Zaglavlje mora sadržavati sljedeće elemente:

• naziv sveučilišta i odjela, adresu broj telefona i faks

VAŽNA NAPOMENA: Za pozicioniranje i stiliziranje svih elemenata na vašim WEB stranicama

Tabela 1 Izgled tablice

Stavite informacije o autoru stranice i navedite autorska prava, godinu, itd…

Copyright © 2010 Ime i prezime. Sva prava pridržana.

3. Smjernice prilikom stiliziranja i upotrebe CSS-a

You might also like