Menambahkan gambar dengan kode HTML.

Belajar menambahkan gambar dengan kode HTML dihalaman blog.
Oleh:
Pada:
Metode menyisipkan gambar dalam postingan :

Metode 1 - Upload

File image
Upload
Copy URL
Kode HTML
  • 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

Search
Copy URL
Kode HTML

Setelah mengetahui tahapan dan persiapan untuk menambahkan gambar kedalam halaman postingan, berikut ini penjelasan tentang kode HTML elemen gambar (image).

Kode dasar HTML gambar.

<img alt='' title='' width='' height='' src=''/>

Sebelum memulai menuliskan kode HTMLnya, ketahui terlebih dahulu atribut yang dibutuhkan pada tag img untuk menyisipkan gambar dipostingan.

Atribut tag <img/>
Namaketerangan
src(source) URL sumber asal / host gambar
widthpanjang dalam px
heighttinggi dalam px
alt(Alternate text) teks alternatif sebagai identitas gambar.
titlejudul teks pada gambar.

Contoh gambar :

Gambar pemandangan anak
source:termonggo.com
Atribut HTML gambar contoh
src='https://i.postimg.cc/k4mXrbbZ/contoh-gambar.webp'
alt='Gambar pemandangan anak'
title='Gambar contoh'
width=''
height=''
Penulisan kode HTML gambar :

  <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 & height

Karena 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 :
Gambar pemandangan anak
source:termonggo.com

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 :
Gambar pemandangan anak
source:termonggo.com

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
Contoh format URL gambar :

https://nama.host/nama-file.jpg

Format file gambar yang paling umum digunakan adalah : .jpg, .jpeg, .png, .gif, .webp.

Postingan terkait : Menambahkan gambar dipostingan.

⇐ Sebelumnya
Selanjutnya ⇒

Posting Komentar

[---- Ads 3 ----]
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Ada yang salah dengan koneksi internet Anda. Silakan sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Pemblokir iklan terdeteksi!.
Pendapatan yang kami peroleh dari iklan digunakan untuk mengelola situs web ini, harap memasukkan situs ini ke daftar putih (whitelist) di pengaturan pemblokir iklan Anda.
Site is Blocked
Sorry! This site is not available in your country.