HTML Image atau Gambar
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.
Untuk menampilkan gambar dengan kode HTML, maka HTML 5 juga bisa menyajikannya dengan menggunakan kode
<img src=" " alt=" " width=" " height=" ">
Arti kode tersebut adalah
1. <img>
img adalah singkatan dari image (gambar) merupakan kode atau tag HTML untuk menampilkan gambar. Kode ini tidak memiliki penutup (tidak ada </img>).
2. src=" "
src adalah singkatan dari source (sumber), artinya alamat gambar yang akan ditampilkan, bisa berupa:
a. URL (contoh: src="https://example.com/gambar.jpg")
b. Path lokal (contoh: src="images/foto.png")
Jika src=" " dikosongkan, maka tidak ada gambar yang akan ditampilkan.
3. alt=" "
alt adalah singkatan dari alternative text, artinya teks alternatif yang akan ditampilkan jika gambar gagal dimuat. Juga berguna untuk aksesibilitas, seperti pembaca layar untuk pengguna tunanetra.
Contoh: alt="Foto pemandangan pegunungan"
4. width=" " height=" "
width artinya lebar gambar, height artinya tinggi gambar.
Digunakan untuk mengatur ukuran gambar secara eksplisit.
Satuan default (ukuran normal) adalah piksel (px), kecuali ditentukan lain (misalnya %).
Contoh: width="300" artinya lebar gambar 300 piksel.
Jika dikosongkan, maka ukuran gambar mengikuti ukuran aslinya.
Langkah-langkahnya
1. Tulislah perintah berikut
<!DOCTYPE html>
<html>
<body>
</body>
</html>
secara manual di halaman kosong di Google Docs.
2. Tulislah kode paragraf
<p> </p> yang diletakkan ke dalam kode <body></body>
sehingga kode menjadi
<!DOCTYPE html>
<html>
<body>
<p> </p>
</body>
</html>
3. Kemudian lakukan penyisipan kode image ke paragraf
Alamat image berikut saya persiapkan untuk disisipkan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg
Masukkan alamat image ini
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg
ke dalam tanda kutip di kode src=" "
sehingga kode menjadi
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg" alt=" " width=" " height=" ">
Kemudian masukkan teks GAMBAR DARI BLOGGER ke kode alt=" "
sehingga kode menjadi
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg” alt="GAMBAR DARI BLOGGER" width=" " height=" ">
Kemudian masukkan bilangan 300 ke kode width=" " dan bilangan 340 ke kode height=" ">
sehingga kode menjadi
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg” alt="GAMBAR DARI BLOGGER" width="300" height="340">
Kemudian kode tersebut dimasukkan ke dalam kode paragraf <p> </p> sehingga kode menjadi
<!DOCTYPE html>
<html>
<body>
<p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg" alt="GAMBAR DARI BLOGGER" width="300" height="340">
</p>
</body>
</html>
Sekarang kode keseluruhannya menjadi
<!DOCTYPE html>
<html>
<body>
<p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg” alt="GAMBAR DARI BLOGGER" width="300" height="340">
</p>
</body>
</html>
4. Copy-lah seluruh kode tersebut
5. Kemudian beralih ke Blogger.
Bukalah akun Blogger anda.
Pilihlah menu Tampilan HTML (yang berada di sebelah atasnya menu Tampilan Menulis)
Di halaman menu Tampilan HTML inilah kita paste semua kode yang sudah kita copy dari Google Docs.
6. Pilihlah Publikasikan
Maaf, beberapa langkah sudah saya potong karena saya pikir anda sudah menguasai dan hafal langkah-langkah tersebut sehingga tidak perlu semua langkah secara detail ditampilkan di sini untuk selanjutnya.
Kode selengkapnya berikut:
<!DOCTYPE html>
<html>
<body>
<p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg” alt="GAMBAR DARI BLOGGER" width="300" height="340">
</p>
</body>
</html>
hasil tampilannya sebagai berikut
