relativno adresiranje u odnosu na korijenski direktorij
Relativno adresiranje u odnosu na korijenski direktorij, radi 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činite stablastu strukturu mapa prema slici 4.3.1. Datoteka index.html i mape predlozak i katar se trebaju nalaziti na disku C: (znači - između ostalih - zajedno s mapama Program Files i Windows).
Mapa predlozak treba sadržavati mape css i slike. A mapa katar treba sadržavati mapu bronca.
Preuzmite i raspakirajte .zip datoteku, pomoću gornje poveznice.
Datoteke i slike prebacite u odgovarajuće mape.
U mapama prema slici 4.3.1, načinite html datoteke: index.html, japan.html, brazil.html, argentina.html i maroko.html.
Slika 4.3.1
U svakoj od html datoteka načinite osnovnu strukturu html dokumenta.
Dodajte oznaku za utf-8 kôdnu stranicu.
Povežite html datoteku s vanjskom css datotekom stil.css
vanjska css datoteka
U ovom zadatku koristimo css oblikovanja, koja su već umetnuta u vanjsku datoteku stil.css. Datoteka stil.css se mora nalaziti u mapi css i povežite je sa svakom od html datoteka, pomoću html elementa <link>. <link> element treba umetnuti unutar <head> elementa.
Radite po predlošcima sa slike 4.3.2, slike 4.3.3, slike 4.3.4, slike 4.3.5 i slike 4.3.6.
Svaka html datoteka treba imati odgovarajući naslov na kartici: za index.html je to Hrvatska bronca, za japan.html: Hrvatska - Japan, za brazil.html: Hrvatska - Brazil i tako dalje prema tome obrascu.
U svakoj html datoteci umetnite naslov <h1>: Hrvatska bronca i podnaslov <h2>: Svjetsko prvenstvo u Kataru 2022.
Ispod naslova treba umetnuti dvije ili tri slike. Jednu ili dvije slike zastave: prva je uvijek hrvatska zastava, a druga je od momčadi s kojom smo igrali utakmicu (osim u datoteci index.html koja ima samo hrvatsku zastavu). Treća slika je: vatreni.jpg.
Za umetanje slika koristite relativno adresiranje u odnosu na korijenski direktorij.
Ispod slike treba biti vodoravna crta <hr /> širine 80%.
U svim html datotekama osim index.html, ispod crte umetnite numerički popis, unutar kojega trebaju biti četiri stavke <li>. Umetnite odgovarajući tekst u svakoj datoteci. Zadani tekst možete pročitati u predlošcima slika po kojima izrađujete datoteke. Treća stavka treba biti osnažena html elementom <strong>.
Ispod toga, svaka html datoteka treba imati simbolički popis, u kojemu je unutar svake stavke <li> ugniježdena poveznica na odgovarajući html dokument. Tekst poveznica je: Japan, Brazil i Argentina. Zatim dolazi vodoravna crta hr širine 80% i na kraju četvrta stavka i tekst četvrte poveznice: Bronca - Maroko.
Za povezivanje html datoteka koristite relativno adresiranje u odnosu na korijenski direktorij.
Primjer ugniježđivanja poveznice, unutar stavke popisa:
<li><a href="/katar/japan.html">Japan</a></li>
css oblikovanje web stranice
Ako vam oblikovanje teksta i slika na web stranici nije istovjetno onome sa slika predložaka, razlog može biti u tome što se niste ispravno povezali s css datotekom stil.css u kojoj se nalaze css oblikovanja. Drugi razlog može biti ne korištenje html elemenata po uputama. Stilska oblikovanja su vezana za html elemente!
Spremite html datoteke u odgovarajuće mape pod zadanim imenima.
Otvorite web stranice u web pregledniku. Provjerite rade li poveznice dobro i je li izgled web stranica istovjetan onima na slici 4.3.2, slici 4.3.3, slici 4.3.4, slici 4.3.5 i slici 4.3.6.
Pogledajte izvorni kôd načinjene web stranice (html dokumenta) u web pregledniku, korištenjem prečaca na tipkovnici Ctrl + U.
Slika 4.3.2
Slika 4.3.3
Slika 4.3.4
Slika 4.3.5
Slika 4.3.6
Sažmite sadržaj datoteke index.html i mapa predlozak i katar zajedno s njihovim sadržajem u jednu zip datoteku.
Korištenjem ftp klijenta web hostinga, prebacite sažetu zip datoteku na web hosting u korijenski direktorij 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/
Automatski će se pokrenuti html datoteka index.html u korijenskom direktoriju.
Provjerite jesu li slike prikazane ispravno i rade li dobro poveznice.
Rješenje vježbe 4.3
Usporedite dobiveni kôd s kôdom rješenja Vježbe 4.3
