Cilj vježbe:
Učenik će moći primijeniti stilove i boje na osnovne elemente prilikom uređivanja teksta, moći koristiti različite načina označavanja boja, koristiti element za označavanje poveznice, ugraditi sliku u stranicu

Priprema za vježbu:

Zadatak 1: Na koje se načine u HTML-u mogu naznačiti boje (navedite bar tri različita načina)? Navedite pet različitih imena boja.
Odgovor: Pomoću heksadekadskih kodova, RGB kodova i pomoću imena boja (npr. cyan, red, yellow, green, blue).

Zadatak 2: Što znači kratica CSS? Za što se koristi CSS?
Odgovor: CSS je kratica za "Cascading Style Sheets" i koristi se za opisivanje prezentacijskog dijela HTML dokumenta.

Zadatak 3: . Kako se koristi „inline“ CSS? (pomoć: https://www.w3schools.com/html/html_css.asp )

Odgovor: Dodaje se upisom style atributa u HTML element i koristi se za dodavanje specifičnog stila jednom HTML elementu.

Zadatak 4: Što su poveznice? Koje vrste poveznica znate?

Odgovor: Poveznice su tekstovi koji sadrže vezu između dva sadržaja.

Vježba:

1. Stilovi boja (u zadacima koristite najmanje dva načina za označavanje boja):

A. Napravite stranicu na kojoj će biti dva teksta sa dva podnaslova o proizvoljnoj temi, proizvodu ili predmetu: prvi će tekst govoriti o dobrim osobinama, nosit će podnaslov „Prednosti:“ i bit će napisan crnim tekstom na bijeloj pozadini, drugi dio teksta treba nositi podnaslov „Nedostaci:“ i govoriti o nedostacima bijelim tekstom na crnoj pozadini. U svakom odlomku treba biti bar četiri retka teksta.

TXT datoteka (preuzmite)

TXT datoteka (preuzmite)

B. Napravite stranicu na kojoj ćete uokvireno jedno ispod drugog ispisati nazive godišnjih doba u bojama tipičnim za pojedino godišnje doba. Upotrijebite boje za pozadinu tekstova, za tekstove i za okvire. Boje birajte tako da svi tekstovi budu čitljivi.

2. HTML poveznice

Sintaksa HTML elementa za poveznicu je <a href="url">tekst poveznice</a> pri čemu
atribut href označava odredište poveznice, a “tekst poveznice” vidljiv je korisniku
Podrazumijevano, odredišna stranica bit će prikazana u trenutno otvorenom prozoru
preglednika, no to je moguće promijeniti atributom target, npr.:
_self - podrazumijevano. Otvara dokument u istom prozoru ili tabu.
_blank – otvara dokument u novom prozoru il tabu.
Primjer: <a href="https://www.w3schools.com/" target="_blank">Posjetite W3Schools!</a>

A. Napravite web stranicu o značajnim zagrebačkim lokalitetima (zgradama, trgovima,
parkovima, muzejima...):

1. napravite kratak uvod od tri ili četiri retka teksta
2. navedite poveznice na najmanje pet različitih lokaliteta (na postojeće web stranice)
3. sve se stranice trebaju otvarati u novom tabu preglednika

TXT datoteka (preuzmite)

3. HTML - slike

Sintaksa HTML elementa za ubacivanje (povezivanje) slike u stranicu je: <img src="url"
alt="zamjenskitekst">. Img element je prazan element. Src atribut određuje url slike. Atribut alt
određuje alternativni tekst koji će se prikazati u slučaju da slika ne može iz nekog razloga biti
prikazana.
Za veličinu slike koristite attribute width I height, npr.: <img src="img_girl.jpg" alt="Girl in ajacket" style="width:500px;height:600px;">

A. Obogatite web stranicu o značajnim zagrebačkim lokalitetima slikama. Pripazite da slike budu
jednake širine, te da se ne deformiraju.

TXT datoteka (preuzmite)

Cilj vježbe: Učenik će moći primijeniti stilove i boje na osnovne elemente prilikom uređivanja teksta, moći koristiti različite načina označavanja boja, koristiti element za označavanje poveznice, ugraditi sliku u stranicu

Priprema za vježbu:

​

Zadatak 1: Na koje se načine u HTML-u mogu naznačiti boje (navedite bar tri različita načina)? Navedite pet različitih imena boja. Odgovor: Pomoću heksadekadskih kodova, RGB kodova i pomoću imena boja (npr. cyan, red, yellow, green, blue).

​

Zadatak 2: Što znači kratica CSS? Za što se koristi CSS? Odgovor: CSS je kratica za "Cascading Style Sheets" i koristi se za opisivanje prezentacijskog dijela HTML dokumenta.

​

Zadatak 3: . Kako se koristi „inline“ CSS? (pomoć: https://www.w3schools.com/html/html_css.asp )

Odgovor: Dodaje se upisom style atributa u HTML element i koristi se za dodavanje specifičnog stila jednom HTML elementu.

​

Zadatak 4: Što su poveznice? Koje vrste poveznica znate?

Odgovor: Poveznice su tekstovi koji sadrže vezu između dva sadržaja.

​

Vježba:

​

1. Stilovi boja (u zadacima koristite najmanje dva načina za označavanje boja):

B. Napravite stranicu na kojoj ćete uokvireno jedno ispod drugog ispisati nazive godišnjih doba u bojama tipičnim za pojedino godišnje doba. Upotrijebite boje za pozadinu tekstova, za tekstove i za okvire. Boje birajte tako da svi tekstovi budu čitljivi.

​

2. HTML poveznice

​

Sintaksa HTML elementa za poveznicu je <a href="url">tekst poveznice</a> pri čemu atribut href označava odredište poveznice, a “tekst poveznice” vidljiv je korisniku

Podrazumijevano, odredišna stranica bit će prikazana u trenutno otvorenom prozoru preglednika, no to je moguće promijeniti atributom target, npr.:

_self - podrazumijevano. Otvara dokument u istom prozoru ili tabu.

_blank – otvara dokument u novom prozoru il tabu.

Primjer: <a href="https://www.w3schools.com/" target="_blank">Posjetite W3Schools!</a>

​

A. Napravite web stranicu o značajnim zagrebačkim lokalitetima (zgradama, trgovima, parkovima, muzejima...):

1. napravite kratak uvod od tri ili četiri retka teksta 2. navedite poveznice na najmanje pet različitih lokaliteta (na postojeće web stranice) 3. sve se stranice trebaju otvarati u novom tabu preglednika

​​

​

3. HTML - slike

​

Sintaksa HTML elementa za ubacivanje (povezivanje) slike u stranicu je: <img src="url" alt="zamjenskitekst">. Img element je prazan element. Src atribut određuje url slike. Atribut alt određuje alternativni tekst koji će se prikazati u slučaju da slika ne može iz nekog razloga biti prikazana.

Za veličinu slike koristite attribute width I height, npr.: <img src="img_girl.jpg" alt="Girl in ajacket" style="width:500px;height:600px;">

​

A. Obogatite web stranicu o značajnim zagrebačkim lokalitetima slikama. Pripazite da slike budu jednake širine, te da se ne deformiraju.

Cilj vježbe:
Učenik će moći primijeniti stilove i boje na osnovne elemente prilikom uređivanja teksta, moći koristiti različite načina označavanja boja, koristiti element za označavanje poveznice, ugraditi sliku u stranicu

Zadatak 1: Na koje se načine u HTML-u mogu naznačiti boje (navedite bar tri različita načina)? Navedite pet različitih imena boja.
Odgovor: Pomoću heksadekadskih kodova, RGB kodova i pomoću imena boja (npr. cyan, red, yellow, green, blue).

Zadatak 2: Što znači kratica CSS? Za što se koristi CSS?
Odgovor: CSS je kratica za "Cascading Style Sheets" i koristi se za opisivanje prezentacijskog dijela HTML dokumenta.

Sintaksa HTML elementa za poveznicu je <a href="url">tekst poveznice</a> pri čemu
atribut href označava odredište poveznice, a “tekst poveznice” vidljiv je korisniku

Podrazumijevano, odredišna stranica bit će prikazana u trenutno otvorenom prozoru
preglednika, no to je moguće promijeniti atributom target, npr.:

A. Napravite web stranicu o značajnim zagrebačkim lokalitetima (zgradama, trgovima,
parkovima, muzejima...):

1. napravite kratak uvod od tri ili četiri retka teksta
2. navedite poveznice na najmanje pet različitih lokaliteta (na postojeće web stranice)
3. sve se stranice trebaju otvarati u novom tabu preglednika

Sintaksa HTML elementa za ubacivanje (povezivanje) slike u stranicu je: <img src="url"
alt="zamjenskitekst">. Img element je prazan element. Src atribut određuje url slike. Atribut alt
određuje alternativni tekst koji će se prikazati u slučaju da slika ne može iz nekog razloga biti
prikazana.

A. Obogatite web stranicu o značajnim zagrebačkim lokalitetima slikama. Pripazite da slike budu
jednake širine, te da se ne deformiraju.