Vježba 4.2 - Cilj vježbe je naučiti koristiti relativno adresiranje u odnosu na trenutnu mapu, na primjeru relativnog adresiranja html dokumenata i slika.
Relativno adresiranje u odnosu na trenutnu mapu se može bez preinaka prenositi na web hosting. Također možete cijelu stablastu strukturu zajedno s datotekama premjestiti unutar bilo koje mape i tamo će ispravno raditi. Radi i pod Linuxom i na Windows OS.
relativno adresiranje u odnosu na korijenski direktorij
Relativno adresiranje u odnosu na korijenski direktorij radi bez preinaka na Linux baziranim web hostinzima. Želimo li da radi i pod Windows OS, potrebno je načiniti stablastu strukturu mapa i datoteka u korijenu jednog diska, npr. C: diska.
Na radnoj površini kreirajte mapu Vjezba 4.
U mapi Vjezba 4 načinite stablastu strukturu mapa prema slici 4.2.1.
Mapa Vjezba 4 treba sadržavati mape predlozak i html. Mapa html treba sadržavati mape: tecaj i vjezbe.
Preuzmite i raspakirajte .zip datoteku, pomoću gornje poveznice.
Slike prebacite u mapu predlozak.
U odgovarajućim mapama načinite html datoteke index.html, lekcija4.html i vjezba4-2.html.
Slika 4.2.1
U svakoj od html datoteka načinite osnovnu strukturu html dokumenta.
Dodajte oznaku za utf-8 kôdnu stranicu.
Radite po predlošcima sa slike 4.2.2, slike 4.2.3 i slike 4.2.4.
U body dodajte boju pozadine web stranice ivory.
Svaka html datoteka treba imati odgovarajući naslov na kartici: Relativno adresiranje - trenutna mapa, Lekcija 4 ili Vježba 4.2.
U svakoj html datoteci umetnite odgovarajući naslov h1: Relativno adresiranje u odnosu na trenutnu mapu, Lekcija 4 ili Vjezba 4.2.
Ispod naslova umetnite jednu od slika: adresiranje.jpg, lekcija4.jpg ili vjezba4-2.jpg.
Za umetanje slika koristite relativno adresiranje u odnosu na trenutnu mapu.
Ispod slike stavite vodoravnu crta širine 80%.
Slijedi simbolički popis unutar kojega trebaju biti tri stavke. Stavke popisa trebaju biti veličine slova 20px.
veličina slova: css svojstvo font-size
Želimo li kôdiranjem - unutar samog elementa - postaviti veličinu slova od 20px trebamo css svojstvu font-size dodijeliti vrijednost 20px. To ćemo postići tako da svojstvu style dodijelimo vrijednost font-size: 20px;
Dvije stavke trebaju biti poveznice na preostale dvije html datoteke, a stavka koja nosi naziv trenutne stranice ne smije biti poveznica.
Poveznice obojite u ljubičastu boju (engl. purple).
boja slova: css svojstvo color
Želimo li kôdiranjem - unutar samog elementa - obojiti slova bojom purple trebamo css svojstvu color dodijeliti željenu boju. To ćemo postići tako da svojstvu style dodijelimo vrijednost color: purple;.
Za povezivanje html datoteka koristite relativno adresiranje u odnosu na trenutnu mapu.
Spremite html datoteke u odgovarajuće mape Vjezba 4 pod zadanim imenima.
Otvorite web stranice u web pregledniku. Provjerite rade li poveznice dobro i izgledaju li web stranice istovjetno onima na slici 4.2.2, slici 4.2.3 i slici 4.2.4.
Pogledajte izvorni kôd načinjene web stranice (html dokumenta) u web pregledniku, korištenjem prečaca na tipkovnici Ctrl + U.
Slika 4.2.2
Slika 4.2.3
Slika 4.2.4
Pomoću ftp klijenta u korijenskom direktoriju (engl. root) web hostinga načinite mapu vjezba4-2.
Sažmite sadržaj mape Vjezba 4 (datoteku index.html i mape html i predlozak zajedno s njihovim sadržajem) u jednu .zip datoteku.
Korištenjem ftp klijenta prebacite sažetu .zip datoteku na web hosting u mapu vjezba4-2 i raspakirajte je.
Ako ste za poddomenu odabrali mhorvat, a za server eu5.org, pristupite vašoj web stranici na web hostingu u web pregledniku pomoću poveznice:
http://mhorvat.eu5.org/vjezba4-2/
Automatski će se pokrenuti html datoteka index.html u mapi vjezba4-2.
Provjerite jesu li slike prikazane ispravno i rade li dobro poveznice.
Rješenje vježbe 4.2
Usporedite dobiveni kôd s kôdom rješenja Vježbe 4.2
