Vježba Problemski Zadatak

SKRIPTNI JEZICI I WEB PROGRAMIRANJE
23. Problemski zadatak: Izrada strukturirane mrežne stranice s tablicom, listom i poveznicama
Provjeravaju se slijedeći ishodi učenja za učenika:
• Spaja više HTML dokumenata u funkcionalno mrežno sjedište

• Ugrađuje lokalne poveznice i poveznice na vanjske mrežne sadržaje
• primjenjuje svojstva max-width, position: fixed i z-index
• primjenjuje promjenu RGBA prozirnosti na hover
• ugrađuje slikovne sadržaje i na njih primjenjuje promjenu svojstva opacity na hover
• oblikuje tablicu CSS svojstvima prema uputi
• mijenja grafičke i znakovne oznake elementima popisa
U prilogu zadatku nalazi se mapa sa svim potrebnim dokumentima.
• U <head> na svim stranicama postavite meta elemente za: 
❖ hrvatski jezik (utf-8)
❖ ključne riječi (key words)
❖ opis (description)
❖ ikonu orla u kartici preglednika
U sekciji <header> postavljeni su:

• naslov stranice: Kopački rit koji treba centralno poravnati u CSS-u
• simbolička liste sa stranicama:
o index.html
o zivotinje.html
o biljke.html
o galerija.html
o ostali_parkovi.html
❖ dodajte poveznice na pojedine stranice
❖ kreirajte horizontalni izbornik
❖ uklonite oblikovanja poveznicama
❖ uredite poveznice kao gumbe CSS-om
❖ na hover neka im se zamijene boja teksta i boja pozadine gumba
U sekciji <footer> postavljeni su:
• adresa i kontakt podatci parka prirode Kopački rit
❖ e-mail uredite tako da se na klik otvara mogućnost slanja e-pošte
• dodane su funkcionalne poveznice na društvene mreže,
❖ njih uredite u vidu ikonica
❖ podesite da se otvaraju u novoj kartici
• ugrađena je Google karta Kopačkog rita
❖ nju pozicionirajte lijevo a uz nju adresu, kontakt podatke i poveznice na društvene mreže
❖ promijenite veličinu karte tako da bude visine 100 px i širine 300 px
❖ Neka sve stranice imaju isto zaglavlje, izbornik i podnožje, a različite sadržaje u glavnom dijelu stranice.
U sekciji <main> stranice index.html postavljeni:

• naslov Baranjska močvara oblikujte oznakom <h2>
❖ centrirajte ga CSS-om
• nekoliko odlomaka teksta
❖ obostrano ih poravnajte u CSS-u
U sekciji <main> stranice zivotinje.html ugrađeni su:

• naslov Životinje močvare oznakom <h2>,
• simbolička listu <ul> koja sadrži popis od 10 životinja koje žive u parku
• elementi liste sastoje se od naziva na hrvatskom i latinskom jeziku
❖ nazive na latinskom uredite tako da budu ispisani kurzivom (italic)
❖ uredite grafičke oznake tako da oznaka bude sličica (orao, žaba i sl.)
❖ listi oblikujte lijevu marginu od 20vw i padding od 5vw (ne elementima liste nego cijeloj listi)
U sekciji <main> stranice biljke.html ugrađeni su:

• naslov Biljke močvare oznakom <h2>
• poredana listu <ol> koja sadrži popis od 5 biljaka koje možemo naći u parku
❖ listi oblikujte lijevu marginu od 20vw i padding od 5vw
❖ uredite oznake tako da budu mala slova abecede
U sekciji <main> stranice galerija.html ugrađeni su:

• naslov Ljepote rita oznakom <h2>
• galerija od 9 slika
❖ svim img oznakama dodajte atribut alt
❖ neka sve slike budu dimenzija 500 px* 280 px
❖ slike rasporedite po 3 u 3 reda
❖ galeriju pozicionirajte u sredinu (horizontalno)
❖ podesite u CSS-u da im se na hoover mijenja opacity na 0.8
U sekciji <main> stranice ostali_parkovi.html ugrađeni su:

• naslov Parkovi Hrvatske oznakom <h2>
• tablica s popisom parkova hrvatske
❖ tablicu CSS-om oblikujte na slijedeći način:
❖ redak zaglavlja tablice ima boju pozadine po tvom izboru i bijeli tekst,
❖ ostali redci trebaju imati tekst boje zaglavlja,
❖ iste boje trebaju biti i okviri (border) tablice,
❖ uklonite dvostruke okvire (border-collapse),
❖ na hover cijeli redak tablice iznad kojega je pokazivač miša treba dobiti isto oblikovanje kao i redak zaglavlja tablice,
❖ tablica neka bude u sredini stranice (u horizontalnom smislu)
❖
❖ Zaglavlju u CSS-u dodajte pozadinsku sliku koja neka ima svojstvo max-width.
❖ Uvezite 2 fonta, primijenite jedan na naslove a drugi na sadržaje (tekst paragrafa, tekst u tablici),
❖ boje uskladite tematski
Raspodjela ocjena po bodovima
Element koji se boduje Broj bodova

Postavljeni meta elementi za jezik, zapisane ključne riječi, opis i ugrađena ikonica katice u 1
pregledniku
Povezan vanjski CSS dokument 1
U zaglavlju postavljena naslovna slika sa svojstvom max – width 2
Naslov h1 u zaglavlju centralno poravnat CSS-om 1
Izrađen funkcionalan horizontalni izbornik s 5 poveznica na stranice 2
Izbornik CSS-om oblikovan u vidu gumba kojima se na hover zamijene boja pozadine i boja teksta 2
e-mail oblikovan tako da se na klik otvara servis za e-poštu 1
Kao poveznice na društvene mreže postavljene ikone 1
Poveznice na društvene mreže otvaraju se u novoj kartici preglednika 1
U podnožju oblikovan razmještaj elemenata kontakt podaci, poveznice u vidu ikonica i karta 3
Promijenjena veličina ugrađene karte 1
U mainu svih stranica postavljen centriran h2 naslov 1
U mainu stranice index.html paragrafi teksta obostrano poravnati CSS-om 2
U mainu stranice zivotinje.html simbolička lista (10 životinja) oblikovana s grafičkom oznakom u
1
vidu ikonice životinje
Listi oblikovana lijeva margina i pading 2
Dio imena na latinskom oblikovan kao kurziv 1
U mainu stranice biljke.html oblikovana poredana lista s oznakama a, b, .. 1
U mainu stranice galerija.html svim slikama dodan alternativni tekst 1
Slike raspoređene u 3 reda po 3 slike u redu 3
Cijela galerija pozicionirana centralno u horizonlatlnom smilsu 1
Primijenjeno svojstvo opacity na hover na slike u CSS-u 1
U mainu stranice ostali_pakrovi.html tablica oblikovana prema uputi:
redak zaglavlja tablice ima boju pozadine po tvom izboru i bijeli tekst, ostali redci imaju tekst boje
zaglavlja, iste boje trebaju biti i okviri tablice, uklonjeni dvostruki okviri, na hover cijeli redak 5
tablice iznad kojega je pokazivač miša treba dobiti isto oblikovanje kao i redak zaglavlja tablice,
cijela tablica neka centralno pozicionirana
Sklad boja, prikladno oblikovanje fontovima, veličinom fonta i ukupan estetski dojam sjedišta 5
Ukupno 40
Bodova Ocjena
26 - 40 odličan
31 - 35 vrlo dobar
26 - 30 dobar
20 – 25 dovoljan
0 – 19 nedovoljan
Provjera ishoda učenja
Nastavnica će analizirati pojedine elemente i dodijeliti broj bodova prema rubrici.

Vježba Problemski Zadatak

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

Vježba Problemski Zadatak

Uploaded by

Copyright:

Available Formats

SKRIPTNI JEZICI I WEB PROGRAMIRANJE

Provjeravaju se slijedeći ishodi učenja za učenika:

• Spaja više HTML dokumenata u funkcionalno mrežno sjedište

U prilogu zadatku nalazi se mapa sa svim potrebnim dokumentima.

• U <head> na svim stranicama postavite meta elemente za:

U sekciji <header> postavljeni su:

U sekciji <main> stranice index.html postavljeni:

U sekciji <main> stranice zivotinje.html ugrađeni su:

U sekciji <main> stranice biljke.html ugrađeni su:

U sekciji <main> stranice galerija.html ugrađeni su:

U sekciji <main> stranice ostali_parkovi.html ugrađeni su:

Raspodjela ocjena po bodovima

Element koji se boduje Broj bodova

Provjera ishoda učenja

Nastavnica će analizirati pojedine elemente i dodijeliti broj bodova prema rubrici.

You might also like