Html One Page : HTML vježba 3.3 : Bartol plus

Vježba 3.3

Na radnoj površini načinite mapu Vjezba 3.
U mapi Vjezba 3 načinite podmapu slike.
Preuzmite i raspakirajte .zip datoteku pomoću gornje poveznice.
Slike iz .zip datoteke premjestite u mapu slike.
U html editoru kreirajte novu datoteku one-page-web.html.
Umetnite osnovnu strukturu html dokumenta.
Dodajte potrebne <meta> i <title> elemente.
Slika 3.2
Radite po predlošku sa slike 3.2.
Pomoću svojstva style obojite pozadinu cijele web stranice u boju slonovače (engl. ivory). Koristite css svojstvo background-color.
U <body> elementu povećajte veličinu teksta (engl. font-size) na 125% radi ljepšeg izgleda.
Element <body> iz prethodnog zadatka izgleda:

<body style="background-color: ivory; font-size: 125%;">

Dodajte naslov <h1> s tekstom kao na slici.
Naslov <h1> pomoću css svojstva text-align poravnajte po sredini (vrijednost svojstva center).
Umetnite tri tekstne poveznice: Sunce, Makovi i Neboder. Svaka poveznica povezuje s jednim od istoimenih <h2> naslova. Sve tri poveznice umetnite unutar uglatih zagrada [ i ]
Slijede tri skupine - podnaslov, poveznica i slika. Unutar svake skupine umetnite:

Podnaslov <h2>, s tekstom: Sunce, Makovi ili Neboder.
Tekst [Idi na vrh] kao poveznicu s <h1> naslovom.
Sliku iz mape slike prema predlošku: sliku sunce-i-trava.jpg, alt vrijednosti Sunce i trava, sliku makovi-u-polju.jpg, alt vrijednosti Makovi u polju ili sliku moderni-neboder.jpg, alt vrijednosti Moderni neboder.

Html naslovu ili podnaslovu koji je odredište, dodjelite željenu naziv identifikatora (svojstvo id), npr. id="top".
Naziv identifikatora, stavite kao vrijednost href svojstva poveznice. Kako bi web preglednik prepoznao da se radi o identifikatoru, a ne adresi web stranice, potrebno je ispred vrijednosti staviti oznaku ljestve #. Tako ćete dobiti vrijednost svojstva, npr. href="#top". Ona određuje mjesto na web stranici na koje će poveznica "skočiti", na klik korisnika.
Spremite datoteku u mapu Vjezba 3.
Otvorite html dokument one-page-web.html u web pregledniku i provjerite radi li dobro, tj. je li prikaz isti kao na slici 3.3.

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

Rješenje vježbe 3.3: HTML - One Page Website