Praktek HTML : Menambahkan Gambar pada Halaman Profil

Dhe997
Setelah mempelajari penerapan list pada HTML, sekarang kita coba terapkan elemen gambar konten yang terdapat di halaman profil yang sebelumnya sudah kita buat. 

Sebelum menerapkannya, silakan unduh resource gambar yang digunakan pada latihan melalui tautan berikut: assets.zip
Pindahkan berkas yang sudah diunduh pada folder yang sama dengan berkas index.html.
2019120318262224afc9134a1b300ae7b05f6ccb8b479b.jpeg
Kemudian lakukan ekstraksi pada berkas assets.zip tersebut dengan melakukan Klik Kanan -> Extract Here. 
Jika berhasil, akan terbentuk folder dengan nama assets. Sampai langkah ini, berkas assets.zip sudah tidak digunakan. Kita bisa menghapusnya.
 201912031827370a6237316bb800e6f4b34fd285c66071.jpeg

Pastikan di dalam folder assets -> image terdapat empat berkas gambar yang akan kita gunakan pada latihan.
201912031828107e6a8441a47855961f4c71835eb93597.jpeg
Silakan buka kembali berkas index.html pada teks editor. Tambahkan elemen gambar di bawah elemen heading sesuai kontennya masing-masing.

  1. <body>

  2.   ……

  3.  

  4.    <h2>Sejarah</h2>

  5.    <img src="assets/image/history.jpg" alt="sejarah">

  6.  

  7.   …….

  8.  

  9.    <h2>Geografis</h2>

  10.    <img src="assets/image/geografis.jpg" alt="geografis">

  11.  

  12.   …….

  13.  

  14.    <h2>Wisata</h2>

  15.  

  16.   …….

  17.  

  18.  

  19.    <h3>Farm House Lembang</h3>

  20.    <img src="assets/image/farm-house.jpg" alt="farm house">

  21.  

  22.  

  23.   …….

  24.  

  25.  

  26.    <h3>Observatorium Bosscha</h3>

  27.    <img src="assets/image/bosscha.jpg" alt="bosscha">

  28.  

  29.  

  30.   …….

  31. </body>



Perhatikan penulisan nilai dari atribut src. Penulisan sedikit berbeda dengan yang telah kita pelajari. Penulisan alamat gambar tidak dimulai dengan https://www, karena kita menggunakan gambar lokal yang ada pada project kita. Sehingga untuk penulisan path-nya mengarah ke lokasi dari berkas gambar tersebut.
Setelah menambahkan elemen gambar, maka halaman akan nampak seperti ini pada browser.
20191203183244c0c113b545ad24f811f4c48f7ca34a97.gif

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.