Html blok i linijski elementi : HTML vježba 1.3 : Bartol plus

Vježba 1.3

Na radnoj površini načinite mapu Vjezba 1.
Preuzmite i raspakirajte .zip datoteku pomoću gornje poveznice. Slike premjestite u mapu Vjezba 1.
U html editoru kreirajte novu datoteku pozadina.html.
Umetnite osnovnu strukturu html dokumenta.
Dodajte potrebne <meta> i <title> elemente.
Slika 1.3
Pomoću svojstva style elementa <body> obojite pozadinu cijele web stranice u boju slonovače (engl. ivory). Koristite css svojstvo background-color.
css svojstvo: background-color
Za promjenu boje pozadine koristite css svojstvo background-color. Naziv css svojstva mora slijediti dvotočka :, a iza nje oznaka boje. Engleski naziv za boju slonovače je ivory.
<body> elementu dodajte rubnicu (engl. margin) širine 25px radi ljepšeg izgleda.
Element <body> iz prethodnog zadatka izgleda:

<body style="background-color: ivory; margin: 25px;">

Dodajte naslov <h1> s tekstom kao na slici 1.3. Obojite pozadinu naslova u boju čokolade (engl. chocolate).
Debljina teksta naslova <h1> i podnaslova <h2> je 100. Koristite css svojstvo font-weight.
css svojstvo: font-weight
Css svojstvo font-weight omogućava promjenu debljine teksta. Dopuštene vrijednosti su brojevi od 100 do 900, u koracima od 100. Debljina slova ovisi i o vrsti fonta, odnosno omogućava li on tu debljinu slova ili ne.
Element <h1> iz prethodnog zadatka izgleda:

<h1 style="background-color: chocolate; font-weight: 100;">

Ispod naslova umetnite prvi podnaslov <h2> s odgovarajućim tekstom. Obojite pozadinu naslova u boju mokasina (engl. moccasine). Postavite odgovarajuću debljinu slova (100).
Nakon podnaslova, slijedi odlomak. Pozadinu riječi linijski obojite naranđastom bojom (engl. orange).
Ispod odlomka umetnite drugi podnaslov <h2>. Oblikujte ga istim stilom kao i prvi podnaslov.
Ispod drugog podnaslova, umetnite tri slike, jednu iza druge, sa sljedećim svojstvima:

Naziv prve slike (vrijednost svojstva src) je home1.jpg, druge home2.jpg, a treće home3.jpg.
Svakoj slici dodajte svojstvo alt koji sadrži tekst koji biva pročitan slijepim i slabovidnim osobama: Prvoj slici dodajte tekst Dome slatki dome!, drugoj Čaj za dvoje, a trećoj Čudesni maslačak.
Dodajte svojstvo title za prikaz naziva pojedine slike s vrijednostima: Jezero za prvu sliku, Čaj za drugu sliku i Maslačak za treću sliku.

<img src="home1.jpg" alt="Dome slatki dome!" title="Jezero" />

Spremite datoteku u mapu Vjezba 1, pod imenom pozadina.html i otvorite je u web pregledniku. Pogledajte obavlja li ispravno sve zadaće, koje treba izvršiti!
Koliko blok, a koliko linijskih elemenata se nalazi na web stranici?
Što se događa s položajem slika, kada smanjujemo širinu zaslona?

Usporedite dobiveni kôd s kôdom rješenja Vježbe 1.3

Rješenje vježbe 1.3: Html blok i linijski elementi