Preuzmite i raspakirajte .zip datoteku, pomoću gornje poveznice.
Sadržaj tekstnih datoteka odlomak1.txt i odlomak2.txt možete koristiti kao sadržaj prvog i drugog odlomka u obadva html dokumenta.
U tekst editoru načinite osnovnu strukturu html dokumenata: prva.html i druga.html.
Dodajte oznaku za utf-8 kôdnu stranicu.
Radite po predlošcima sa slike 1.1.1 i slike 1.1.2.
Slika 1.1.1
Slika 1.1.2
Gumb Povećaj
Pomoću gumba Povećaj koji se nalazi u gornjem desnom kutu slike, možete povećati sliku predloška, kako bi bolje vidjeli što i kako trebate napraviti.
Stilska pravila umetnite unutar <style> elementa.
Svakoj html datoteci dodajte:
Element za naziv web stranice Prva stranica, odnosno Druga stranica na kartici web preglednika.
Naslov <h1> zajedno s odgovarajućim tekstom.
Prvi odlomak <p> s tekstom iz datoteke odlomak1.txt.
U html dokumentu prva.html dodajte simbolički popis, a u dokumentu druga.html brojčani popis, s tekstom prema predlošku.
Drugi naslov <h2> s odgovarajućim tekstom.
Drugi odlomak <p> zajedno s tekstom iz datoteke odlomak2.txt.
Na kraju umetnite poveznicu <a>, koja klikom na odgovarajući tekst, u html dokumentu prva.html otvara html dokument druga.html, u html dokumentu druga.html otvara html dokument prva.html.
Obadva html dokumenta trebate vizualno oblikovati prema predlošku sa slike 1.1.1 i slike 1.1.2. Trebate koristiti selektore naziva elementa. Osim selektora elemenata dopušteno je koristiti na svakoj stranici još samo dva selektora klase.
Pomoću jednog selektora klase oblikujte boju teksta i pozadine prvog odlomka i istaknutog teksta (iste boje teksta i pozadine) unutar drugog odlomka.
Pomoću drugog selektora klase oblikujte boju teksta i pozadine drugog odlomka i istaknutog teksta (iste boje teksta i pozadine) unutar prvog odlomka.
Za oblikovanje istaknutog teksta unutar prvog i drugog odlomka, koristite linijski html element <span>.
Ispred početka istaknutog dijela teksta umetnite početnu oznaku <span> elementa, a na njegovom kraju, završnu oznaku </span>.
<span> elementu, dodijelite svojstvo class. Npr.
Početak teksta <span class="boja2">istaknuti tekst</span> kraj teksta.
Nije dopušteno koristiti selektor naziva elementa za oblikovanje izgleda elementa odlomka <p>, nego trebate korisititi selektor klase .
U dokumentu prva.html za boju teksta i pozadine, možete koristiti iste boje kao na predlošku: darkgreen, firebrick, gold, yellow, darkred, ivory, cornflowerblue, darkblue i chartreuse.
U dokumentu druga.html za boju teksta i pozadine, možete koristiti iste boje kao na predlošku: darkgreen, darkorange, gray, blue, lemonchiffon, blueviolet, black, ivory i wheat.
Pomoću univerzalnog selektora postavite vrijednost odmaka (engl. padding) i rubnice (engl. margin) svih html elemenata na 10px.
* {
padding: 10px;
margin: 10px;
}
Neka selektor body, uz oblikovanje boje pozadine, postavite vrstu fonta svih html elementa na web stranici, uporabom css svojstva font-family:
Pomoću selektora naslova h1 i h2, uz ostala oblikovanja, dodajte debljinu slova naslova, uporabom css svojstva font-weight:
font-weight: 100;
Pomoću selektora klase, koji istovremeno oblikuju boju teksta i pozadine dijela drugog odlomaka, dodajte i dvostruki razmak između redaka, uporabom css svojstva line-height:
line-height: 2;
Pomoću selektora span postavite vrijednost odmaka (engl. padding) i rubnice (engl. margin) samo za span elemente na nulu:
span {
padding: 0;
margin: 0;
}
Spremite html dokumente u mapu Vjezba 1, pod zadanim imenima.
Otvorite web stranicu prva.html u web pregledniku i provjerite je li izgled istovjetan onom na slici 1.1.1 i radi li poveznica.
Za web stranicu druga.html, provjerite je li izgled istovjetan onom na slici 1.1.2 i radi li poveznica.
Rješenje vježbe 1.1
Usporedite dobiveni kôd, s kôdom rješenja Vježbe 1.1
