Vježba - HTML relativno adresiranje

Vježba 4.3 - Cilj vježbe je naučiti koristiti relativno adresiranje u odnosu na korijenski direktorij.

krivulja

Vježba 4.3

relativno adresiranje u odnosu na korijenski direktorij

Relativno adresiranje u odnosu na korijenski direktorij, radi na Linux baziranim web hostinzima. Želite li da radi i pod Windows OS, potrebno je načiniti stablastu strukturu mapa i datoteka u korijenu diska, npr. C: diska.

  1. a) Web stranica:
  2. Načinite stablastu strukturu mapa prema slici 4.3.1. Datoteka index.html i mape predlozak i katar se trebaju nalaziti u korijenu hard diska, npr. diska C:.
  3. Mapa predlozak sadrži mape css i slike, a mapa katar sadrži mapu bronca.
  4. Preuzmite i raspakirajte .zip datoteku, pomoću gornje poveznice.
  5. Datoteke i slike prebacite u odgovarajuće mape.
  6. U mapama prema slici 4.3.1, načinite html datoteke: index.html, japan.html, brazil.html, argentina.html i maroko.html.
  7. Relativno adresiranje - vježba 4.3.1
  8. Slika 4.3.1
  9. U svakoj od datoteka umetnite osnovnu strukturu html dokumenta.
  10. Dodajte potrebne <meta> i <title> elemente.
  11. Povežite html datoteku s css datotekom stil.css
  12. vanjska css datoteka
  13. Koristimo gotova css oblikovanja koja se nalaze u datoteci stil.css. Povežite je pomoću <link> elementa unutar <head> odjeljka.

  14. Evo i gotovog rješenja:
  15. <link href="/predlozak/css/stil.css" rel="stylesheet" />

  16. Vatreni - vježba 4.3.2
  17. Slika 4.3.2
  18. Hrvatska - Japan - vježba 4.3.3
  19. Slika 4.3.3
  20. Hrvatska - Brazil - vježba 4.3.4
  21. Slika 4.3.4
  22. Hrvatska - Argentina - vježba 4.3.5
  23. Slika 4.3.5
  24. Hrvatska - Maroko - vježba 4.3.6
  25. Slika 4.3.6
  26. Radite po predlošcima sa slika 4.3.2 do 4.3.6.
  27. Umetnite naslov <h1> i ispod njega podnaslov <h2> zajedno s tekstom. Ispod njih umetnite slike.
  28. Za adresiranje slika i html datoteka koristite relativno adresiranje u odnosu na korijenski direktorij.
  29. Ispod slika stavite vodoravnu crtu <hr /> širine 80%.
  30. Nakon prve crte dodajte numerički popis. Tekst popisa možete pronaći u datoteci preslikaj.txt pohranjenoj u zip datoteci.
  31. Treća stavka popisa treba biti osnažena html elementom <strong>.
  32. Slijedi simbolički popis. Unutar svake stavke popisa ugnijezdite poveznicu na datoteku (ime datoteke ovisi o nazivu države).
  33. Zatim umetnite vodoravnu crtu <hr /> širine 80%.
  34. Nakon crte slijedi četvrta stavka popisa s tekstom koji je poveznica na datoteku maroko.html.
  35. Primjer ugniježđivanja poveznice, unutar stavke popisa:
  36. <li><a href="/katar/japan.html">Japan</a></li>
  37. css oblikovanje web stranice
  38. Ako oblikovanje teksta i slika nije istovjetno onome s predložaka, razlog može biti u pogrješnom povezivanju s css datotekom stil.css.
  39. selektori html elemenata
  40. U css datoteci nalaze se selektori html elemenata. Za ispravan vizualni prikaz treba koristiti html elemente prema uputama.
  41. Spremite html datoteke.
  42. Otvorite web stranice u web pregledniku. Provjerite rade li poveznice dobro i je li izgled web stranica ispravan.
  43. b) Hosting:
  44. Sažmite sadržaj datoteke index.html i mapa predlozak i katar zajedno s njihovim sadržajem u jednu zip datoteku.
  45. Korištenjem ftp klijenta web hostinga, prebacite sažetu zip datoteku na web hosting u korijenski direktorij i raspakirajte je.
  46. Ako ste za poddomenu odabrali mhorvat, a za server eu5.org, pristupite vašoj web stranici pomoću poveznice:
  47. http://mhorvat.eu5.org/

  48. Automatski će se otvoriti web stanica index.html u korijenskom direktoriju.
  49. Provjerite jesu li slike na web hostingu 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

Naši pokrovitelji

Uvod u html

4.8

Izaberi najbolje

Naša preporuka

Cloudinary oglas

Besplatne usluge:

CDN pohrana slika i videa.

AI povećanje slika.

Pretvorba formata slika: webp...

25Gb podataka.

4.5

Zašto ne sada?