LV6

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

Odgovorite na pitanja pisano u bilježnicu

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.

Pomoću heksadekadskih kodova, RGB kodova i pomoću imena boja (npr. cyan, red, yellow, green, blue).

2. Što znači kratica CSS? Za što se koristi CSS?

CSS je kratica za "Cascading Style Sheets" i koristi se za opisivanje prezentacijskog dijela HTML dokumenta.

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

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

4. Što su poveznice? Koje vrste poveznica znate?

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

IZVOĐENJE VJEŽBE

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.

6vjezba_1a.txt

Download TXT • 651B

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.

6vjezba_1b.txt

Download TXT • 851B

2. HTML poveznice

Sintaksa HTML elementa za poveznicu je tekst poveznice 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: Posjetite W3Schools!

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 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.:

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

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