Vježba Projektni Zadatak - Izrada Strukturirane Mrežne Stranice S Tablicom, Listom I Poveznicama1

SKRIPTNI JEZICI I WEB PROGRAMIRANJE
15. Projektni zadatak: Izrada strukturirane mrežne stranice s tablicom, listom i

poveznicama
Planirani ishodi učenja:
• izraditi funkcionalno mrežno sjedište
• ugraditi poveznice na vanjske mrežne sadržaje i lokalne poveznice (sidra)
• na zaglavlje dokumenta (naslov i izbornik) primijeniti svojstva max-width, position: fixed i z-index
• na gumbe izbornika primijeniti promjenu RGBA prozirnosti na hover
• ugraditi sliku i na nju primijeniti svojstvo opacity na hover
• mijenjati sliku ovisno o širini zaslona uređaja
• izraditi tablicu, te na njen naslovni redak i stupac primijeniti svojstva position: sticky i z-index
• ugraditi numeriranu i nenumeriranu listu, nenumeriranoj listi postaviti slikovnu grafičku oznaku
Tema mrežnog sjedišta je Mentalno zdravlje mladih.
Prije izrade mrežnog sjedišta istražiti pojmove vezane uz zadanu temu primjerice: anksioznost, fobije, stres, sram,
depresija, panični napadi, poremećaji spavanja, poremećaji u prehrani (bulimija i anoreksija), poremećaji u učenju,
agresivno ponašanje, samoozljeđivanje, suicidalne misli, bipolarni poremećaj, bullying…
Razmislite kako na mentalno zdravlje mladih utječu:
1. narušeni obiteljski odnosi

2. odnosi s vršnjacima
3. društvene mreže i mediji (količina utrošenog vremena, sadržaji koje dijelimo i dobijemo, bullying, ljubavno
bombardiranje, sexting, sharenting, „izazovi“…)
4. količina sna
5. pandemija
6. uporaba psihoaktivnih tvari
7. fizička aktivnost
8. IQ pojedinca
9. religioznost
10. siromaštvo
11. kućni ljubimci i sl.
Važno:
• tekstove osmislite sami

• odaberete ilustrativne fotografije bez kršenja autorskih prava ili ih sami snimite
• Paletu boja i fontova odaberite sami ali vodite računa o dosljednosti i činjenici da je u dizajnu manje-više!
poveznicama
Kreirati mrežno sjedište na zadanu temu s 3 stranice.
Sve stranice strukturirati tako da sadrže slijedeće osnovne elemente:
1. u head postaviti meta tagove za:

• hrvatski jezik
• key words
• description
• povezivanje s vanjskim CSS-om
• ikonicu u kartici preglednika (primjerice mozak)
2. u header postaviti:
• naslovnu sliku koja prati zadanu temu širine max – width
• preko slike naslov (<h1>) centralno poravnat pomoću CSS-a
• navigacijsku traku
• navigacijskim gumbima pomoću CSS-a mijenjaj opacity na hover
• na zaglavlje dokumenta (naslov i izbornik) primijeniti svojstva max-width, position: fixed i z-indeks
<html>
<head>
</head>
<body>
<header> </header>
<main> </main>
<footer> </footer>
</body>
</html>
3. u footer postaviti:
• kontakt podatke jedne institucija ili udruga koje mogu pomoći
• ikonice: facebook-a, instagrama i tweetera s linkovima koji se otvaraju u novoj kartici
• u CSS-u urediti linkove:
▪ a:hover promjena veličine ikonice na veće
• Google mapu s lokacijom ustanove ili udruge
poveznicama
u main postaviti:
• na stranici Važni utjecaji
Mentalno zdravlje mladih

Važni utjecaji Najčešće mentalne bolesti Samopomoć
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna
Adipiscing elit pellentesque habitant morbi. aliqua. Adipiscing elit pellentesque
Adipiscing diam donec adipiscing tristique. Id habitant morbi. Adipiscing diam donec
aliquet lectus proin nibh nisl condimentum id adipiscing tristique. Id aliquet lectus proin
venenatis. Pellentesque pulvinar pellentesque nibh nisl condimentum id venenatis.
habitant morbi tristique senectus et netus. Pellentesque pulvinar pellentesque
Libero enim sed faucibus turpis in eu mi habitant morbi tristique senectus et netus.
bibendum. In pellentesque massa placerat Libero enim sed faucibus turpis in eu mi
duis ultricies lacus sed turpis. Purus semper bibendum. In pellentesque massa placerat
eget duis at tellus at urna condimentum. duis ultricies lacus sed turpis. Purus
Lacinia at qu is risus sed vulputate odio ut. Ac semper eget duis at tellus at urna
tortor vitae purus faucibus ornare condimentum. Lacinia at quis risus sed
suspendisse. vulputate odio ut. Ac tortor vitae purus
Kontakt podaci
▪ ugraditi dva elementa <section> jedan za tekst, a drugi za sliku

▪ kratki tekst od najmanje dva paragrafa teksta (<p>) (300 riječi) u elementu <article> o
svom osobnom stavu u odnosu mentalne bolesti mladih, oblikovane u vidu dva stupca teksta
 najmanje 5 ključnih riječi naglasiti korištenjem class atributa, oblikovati CSS-om 
paragrafe oblikovati u CSS-u s:
✓ obostranim poravnanjem
✓ width svojstvom
✓ padding – om
▪ jednu ilustrativnu sliku povezanu s temom pozicioniranu desno od paragrafa
▪ na sliku postaviti link na stranicu s koje ste ju preuzeli (ako nije vaša), ako je vaša
dobijete +1 bod
▪ u CSS-u za sliku postaviti :
✓ width,
✓ height i
✓ position svojstva
poveznicama
• na stranici Najčešće mentalne bolesti postaviti:
▪ galeriju od 9 ilustrativnih slika povezanih s temom pozicioniranu lijevo

▪ na slike kao link postaviti link na stranicu s koje ste ju preuzeli (ako nije vaša), ako je vaša za
svaku dobijete +1 bod
▪ u CSS-u slike iz galerije postaviti svojstva:
✓ width
✓ height
✓ display
✓ position
✓ margin
✓ padding
✓ svojstvo blur na hover
▪ nenumeriranu listu od najmanje 5 elemenata s najčešćim mentalnim bolestima koje su povezane
sidrom s kratkim tekstom, pozicionirano desno od galerije slika  na nenumeriranu listu
primijenjene slikovne grafičke oznake
poveznicama
• na stranici Samopomoć postaviti:
Mentalno zdravlje mladih

Važni utjecaji Najčešće mentalne bolesti Samopomoć
▪ tablicu čiji sadržaji korespondiraju s zadanom temom od najmanje 2 stupca i 4 redka -ne
prepisivati sadržaje tablice iz primjera jer ne odgovaraju u potpunosti tematici
▪ tablicu oblikovati tako da prelazi granice vidljivog zaslona i u horizontalnom i u vertikalnom
smislu  na naslovni redak i stupac tablice primijeniti svojstva position: sticky i z-index  u
CSS-u tablici postaviti svojstva:
✓ border
✓ margin
✓ padding
✓ svojstvo promjene boje retka i promjene boje fonta na hover
Na kraju cijelo sjedište provjerite pomoću HTML i CSS validatora!

poveznicama
Element koji se boduje Broj bodova
U headu postavljen hrvatski jezik 5
Postavljena ikonica u kartici preglednika 5
U zaglavlju postavljena naslovna slika sa svojstvom max – width 10
Naslov u zaglavlju centralno poravnat CSS-om 5
Izrađen izbornik s 3 gumba na koje je primijenjeno svojstvo opacity: 0.7; na hover 15
Primijenjena svojstva max-width, position: fixed i z-indeks na zaglavlje 15
U footeru postavljeni kontakt podaci naše škole 5
U footeru postavljene ikonice koje su poveznice na vanjska sjedišta, koje je na hover 10

povećavaju
U footeru postavljena mapa s lokacijom škole, pozicionirana desno 10
Na stranici Važni utjecaji ugrađena dva <section> elementa koja su prikladno 10
dimenzionirana
Napisan članak, postavljen u <article> prikladno formatiran fontom i proredom
5
Na 5 riječi primijenjen atribut class uređen CSS-om
Postavljena slika koja je poveznica, oblikovana i pozicionirana CSS-om 10
Ugrađena galerija od 9 slika koje su poveznice na izvor, na slike primijenjena CSS svojstva:
width, height, display, position, margin, padding, te blur na hover 15
Na stranici Najčešće mentalne bolesti postavljena nenumerirana lista na koju su primijenjene

5
slikovne grafičke oznake, pozicionirana desno od slika s primjenom sidra
Ugrađeni kratki opisi vezani za sidra 10
Na stranici Samopomoć ugrađena tablica od najmanje 2 stupca i 4 redka koja izlazi iz

15
vidljivog dijela zaslona
Na naslovni redak primijenjena svojstva position: sticky i z-indeks 15
Na ćelije tablice primijenjena svojstva border, margin i padding 5
CSS-om oblikovana promjena boje redaka na hover 5

Originalnost tekstova 5
Sklad boja, prikladno oblikovanje fontovima, veličinom fonta i ukupan estetski dojam sjedišta 20
Ukupno 200
poveznicama
Provjera ishoda učenja
Rok za predaju sjedišta je do 12. 02. 2023. u 23:55. Nakon toga ću analizirati svojstva i dodijeliti vam bodove. Na vježbama
23.02.2023. od vas očekujem da prezentirate svoj rad, te da odgovorite na pitanja koja ću postaviti od ugradnji određenih
sadržaja i oblikovanja te da predstavite postavljene sadržaje. Za ovaj projektni zadatak vršnjački ćete vrednovati nekoliko
radova (poveznicu ćete dobiti na nastavi 23.2.2023.).

Vježba Projektni Zadatak - Izrada Strukturirane Mrežne Stranice S Tablicom, Listom I Poveznicama1

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 Projektni Zadatak - Izrada Strukturirane Mrežne Stranice S Tablicom, Listom I Poveznicama1

Uploaded by

Copyright:

Available Formats

SKRIPTNI JEZICI I WEB PROGRAMIRANJE

15. Projektni zadatak: Izrada strukturirane mrežne stranice s tablicom, listom i

Planirani ishodi učenja:

• izraditi funkcionalno mrežno sjedište

• ugraditi poveznice na vanjske mrežne sadržaje i lokalne poveznice (sidra)

• na gumbe izbornika primijeniti promjenu RGBA prozirnosti na hover

• ugraditi sliku i na nju primijeniti svojstvo opacity na hover

• mijenjati sliku ovisno o širini zaslona uređaja

Razmislite kako na mentalno zdravlje mladih utječu:

1. narušeni obiteljski odnosi

• tekstove osmislite sami

Kreirati mrežno sjedište na zadanu temu s 3 stranice.

Sve stranice strukturirati tako da sadrže slijedeće osnovne elemente:

1. u head postaviti meta tagove za:

• na stranici Važni utjecaji

Mentalno zdravlje mladih

▪ ugraditi dva elementa <section> jedan za tekst, a drugi za sliku

• na stranici Najčešće mentalne bolesti postaviti:

▪ galeriju od 9 ilustrativnih slika povezanih s temom pozicioniranu lijevo

• na stranici Samopomoć postaviti:

Mentalno zdravlje mladih

Na kraju cijelo sjedište provjerite pomoću HTML i CSS validatora!

Element koji se boduje Broj bodova

U headu postavljen hrvatski jezik 5

Postavljena ikonica u kartici preglednika 5

U zaglavlju postavljena naslovna slika sa svojstvom max – width 10

Naslov u zaglavlju centralno poravnat CSS-om 5

Izrađen izbornik s 3 gumba na koje je primijenjeno svojstvo opacity: 0.7; na hover 15

Primijenjena svojstva max-width, position: fixed i z-indeks na zaglavlje 15

U footeru postavljeni kontakt podaci naše škole 5

U footeru postavljene ikonice koje su poveznice na vanjska sjedišta, koje je na hover 10

Na stranici Najčešće mentalne bolesti postavljena nenumerirana lista na koju su primijenjene

Na stranici Samopomoć ugrađena tablica od najmanje 2 stupca i 4 redka koja izlazi iz

Na ćelije tablice primijenjena svojstva border, margin i padding 5

CSS-om oblikovana promjena boje redaka na hover 5

Provjera ishoda učenja

You might also like