Metode 1 - Upload
- Metode 1 adalah metode menambahkan gambar langsung dipostingan..
- Metode 2 memanfaatkan gambar yang berasal dari website lain atau penyedia gambar online. Sehingga tidak memerlukan langkah upload, karena URL gambar bisa langsung dicopy dari website penyedia gambar tersebut.
Metode 2 - Cari & Copy URL
Setelah mengetahui tahapan dan persiapan untuk menambahkan gambar kedalam halaman postingan, berikut ini penjelasan tentang kode HTML elemen gambar (image).
Kode dasar HTML gambar.
Sebelum memulai menuliskan kode HTMLnya, ketahui terlebih dahulu atribut yang dibutuhkan pada tag img untuk menyisipkan gambar dipostingan.
Nama | keterangan |
---|---|
src | (source) URL sumber asal / host gambar |
width | panjang dalam px |
height | tinggi dalam px |
alt | (Alternate text) teks alternatif sebagai identitas gambar. |
title | judul teks pada gambar. |
Contoh gambar :
![Contoh gambar Gambar pemandangan anak](https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp)
src= | 'https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp' |
alt= | 'Gambar pemandangan anak' |
title= | 'Gambar contoh' |
width= | '' |
height= | '' |
<img alt='Gambar pemandangan anak' title='Gambar contoh' src='https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp' width='' height=''/>
Gambar contoh diatas tidak menggunakan atribut width dan height, sehingga gambar ditampilkan sesuai ukuran aslinya.
Contoh jika kode HTML ditambahkan atribut width & heightKarena ukuran dimensi gambar 2:1 (panjang:tinggi), kita gunakan width:200 dan height:100.
Penulisan kode HTML gambar :
<img alt='Gambar pemandangan anak' title='Gambar contoh' src='https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp' width='200' height='100'/>
Hasil :
![Contoh gambar Gambar pemandangan anak](https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp)
Contoh gambar menggunakan width:320 dan height:160
Penulisan kode HTML gambar :
<img alt='Gambar pemandangan anak' title='Gambar contoh' src='https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp' width='320' height='160'/>
Hasil :
![Contoh gambar Gambar pemandangan anak](https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp)
Ukuran dimensi asli gambar contoh diatas adalah 640 x 360, namun dengan kode HTML kita bisa mengkustom ukuran gambar sesuai kebutuhan.
Untuk mengetahui ukuran (dimensi) asli gambar, jika file asal masih tersimpan di perangkat, buka file gambar tersebut lalu periksa detail informasinya.
Tapi jika file gambar sudah diupload, bisa dilihat melalui URLnya (lihat src ditabel atribut gambar contoh diatas), URL gambar biasanya diawali dengan https:// dan diakhiri dengan nama file beserta format filenya. Copy URL tersebut lalu buka tab baru dibrowser, paste dikolom address bar lalu tekan enter. Gambar akan ditampilkan.
Sorot tab halaman tersebut atau buka dijendela baru, dimensi gambar akan ditampilkan.
![tab browser img](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsvf6wSxijSyy9HSDNeLbGhNx6Ka0lgll1BS0UUUbg-T0E_VzfkcQYSAQ7i4KGinrX1rTUyIN1PADOO9GW93yXocPjuLji9OEyOKi2UGwwXA_sKS_Bv4w7sTrslca4wVJpadCi8ibGEpCXDECV-blPoobO0pBu2E0tIojYFfupSa8Fe6-6HlsyGw/s1600-rw/tab%20img.webp)
https://nama.host/nama-file.jpg
Format file gambar yang paling umum digunakan adalah : .jpg, .jpeg, .png, .gif, .webp.
Postingan terkait : Menambahkan gambar dipostingan.