Cara Mudah Memasukkan Gambar HTML di Blog
Wednesday, May 13, 2020
Edit
Cara Memasukkan Gambar di Blog dengan Kode HTML - Seringkali di dalam suatu postingan terdapat foto atau gambar pendukung agar postingan terlihat lebih menarik.
Pada artikel kali ini kita akan belajar memahami kode HTML gambar, style, beserta atribut-atributnya.
Kode HTML Dasar Untuk Menambahkan Gambar
Perhatikan, teks berwarna merah merupakan URL gambar, alamat yang mengarah ke tempat di mana gambar tersebut diupload.
Memberi Keterangan Gambar dengan Tag Alt
Robot crawler mesin pencari tidak melihat gambar secara visual seperti pada mata manusia, akan tetapi dalam bentuk teks. Anda dapat memberi keterangan pada gambar yang Anda upload dengan tag alt atau alternate.
Ubah keterangan gambar dengan kata atau kalimat yang mendeskripsikan gambar.
Karena ditujukan untuk dibaca mesin pencari, tag alt tidak akan dapat Anda lihat secara langsung.
Cara melihat tag alt pada gambar dengan cara klik kanan pada gambar, kemudian pilih View Image Info (pada browser Mozilla Firefox).
Pada artikel kali ini kita akan belajar memahami kode HTML gambar, style, beserta atribut-atributnya.
Kode HTML Dasar Untuk Menambahkan Gambar
<img src="https://www.blogger.com/img/blogger-logo-small.png"/>
Perhatikan, teks berwarna merah merupakan URL gambar, alamat yang mengarah ke tempat di mana gambar tersebut diupload.
Memberi Keterangan Gambar dengan Tag Alt
Robot crawler mesin pencari tidak melihat gambar secara visual seperti pada mata manusia, akan tetapi dalam bentuk teks. Anda dapat memberi keterangan pada gambar yang Anda upload dengan tag alt atau alternate.
<img alt="keterangan gambar" src="https://www.blogger.com/img/blogger-logo-small.png"/>
Ubah keterangan gambar dengan kata atau kalimat yang mendeskripsikan gambar.
Karena ditujukan untuk dibaca mesin pencari, tag alt tidak akan dapat Anda lihat secara langsung.
Cara melihat tag alt pada gambar dengan cara klik kanan pada gambar, kemudian pilih View Image Info (pada browser Mozilla Firefox).
Tag Alt gambar akan terlihat pada Associated Text.
Memberi Pesan Pada Gambar dengan Tag Title
Berbeda dengan tag alt, tag title akan muncul dan dapat dilihat ketika kursor mengenai gambar.
<img title="pesan yang ingin disampaikan" src="https://www.blogger.com/img/blogger-logo-small.png"/>
Coba arahkan kursor mouse Anda ke gambar di atas, maka akan terlihat tag title yang disematkan.
Mengatur Lebar dan Tinggi Gambar dengan HTML
Untuk mengatur secara spesifik lebar dan tinggi gambar yang dikehendaki, digunakan atribut width untuk lebar, dan height untuk tinggi. Masing-masing menggunakan ukuran pixel.
<img width="100" height="50" src="https://www.blogger.com/img/blogger-logo-small.png"/>
Tanpa atribut width dan height, gambar akan ditampilkan pada ukuran aslinya.
Memberi Border Pada Gambar
Border merupakan tepi gambar, namun atribut ini tidak valid HTML 5.
<img border="2" src="https://www.blogger.com/img/blogger-logo-small.png"/>
Mengatur Posisi Gambar Terhadap Teks dengan Tag Div Style
Tag div style dapat digunakan untuk mengatur posisi gambar.
Membuat Gambar Rata KiriFloat left untuk mengatur gambar di sebelah kiri.
<div style="float:left;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>
Memberi Pesan Pada Gambar dengan Tag Title
Berbeda dengan tag alt, tag title akan muncul dan dapat dilihat ketika kursor mengenai gambar.
<img title="pesan yang ingin disampaikan" src="https://www.blogger.com/img/blogger-logo-small.png"/>
Coba arahkan kursor mouse Anda ke gambar di atas, maka akan terlihat tag title yang disematkan.
Mengatur Lebar dan Tinggi Gambar dengan HTML
Untuk mengatur secara spesifik lebar dan tinggi gambar yang dikehendaki, digunakan atribut width untuk lebar, dan height untuk tinggi. Masing-masing menggunakan ukuran pixel.
<img width="100" height="50" src="https://www.blogger.com/img/blogger-logo-small.png"/>
Tanpa atribut width dan height, gambar akan ditampilkan pada ukuran aslinya.
Memberi Border Pada Gambar
Border merupakan tepi gambar, namun atribut ini tidak valid HTML 5.
<img border="2" src="https://www.blogger.com/img/blogger-logo-small.png"/>
Mengatur Posisi Gambar Terhadap Teks dengan Tag Div Style
Tag div style dapat digunakan untuk mengatur posisi gambar.
Membuat Gambar Rata KiriFloat left untuk mengatur gambar di sebelah kiri.
<div style="float:left;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>
Posisi gambar di sebelah kiri. Teks akan menyesuaikan mengisi ruang kosong di sebelah kanan gambar. Contoh penggunaan div style float left pada gambar. Gambar akan mengapung di sebelah kiri atas artikel.
Membuat Gambar Rata KananFloat right untuk mengatur gambar di sebelah kanan.
<div style="float:right;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>
Membuat Gambar Rata KananFloat right untuk mengatur gambar di sebelah kanan.
<div style="float:right;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>
Posisi gambar di sebelah kanan. Teks akan menyesuaikan mengisi ruang kosong di sebelah kiri gambar. Contoh penggunaan div style float right pada gambar. Gambar akan mengapung di sebelah kanan atas artikel.
Membuat Gambar Rata TengahText-align center untuk memposisikan gambar di tengah.
<div style="text-align:center;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>Posisi gambar berada di tengah-tengah artikel.
Membuat Gambar Rata TengahText-align center untuk memposisikan gambar di tengah.
<div style="text-align:center;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>Posisi gambar berada di tengah-tengah artikel.
Sebelah kanan dan kiri gambar tidak diisi teks.
Mengatur Jarak Gambar dan Teks dengan Margin
Agar tidak terlalu rapat dengan teks, Anda dapat mengatur jarak antara gambar dengan teks menggunakan margin.
<div style="float:left; margin-right:20px;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>
Mengatur Jarak Gambar dan Teks dengan Margin
Agar tidak terlalu rapat dengan teks, Anda dapat mengatur jarak antara gambar dengan teks menggunakan margin.
<div style="float:left; margin-right:20px;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>
Posisi gambar di sebelah kiri. Teks akan menyesuaikan mengisi ruang kosong di sebelah kanan gambar. Contoh penggunaan div style float left pada gambar. Gambar akan mengapung di sebelah kiri atas artikel.
Nilai margin :
margin-top : tepi atas
margin-bottom : tepi bawah
margin-right : sisi kanan
margin-left : sisi kiri
margin : semua sisi (atas kanan bawah kiri)
Gambar dapat diklik sebagai link jika kode HTML gambar disisipkan pada kode HTML link. Lebih lengkap mengenai link HTML silahkan baca Cara Membuat Link HTML.
<a href="https://cybertricoin.blogspot.co.id/"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></a>
Cara Upload Gambar di Postingan Blog
Untuk dapat memasukkan gambar di postingan, Anda perlu mengupload gambar yang ingin dimasukkan ke hosting blogger.
Caranya silahkan masuk ke post editor. Pilih mode HTML, kemudian klik icon insert image. Upload gambar yang ingin Anda tampilkan.
Nilai margin :
margin-top : tepi atas
margin-bottom : tepi bawah
margin-right : sisi kanan
margin-left : sisi kiri
margin : semua sisi (atas kanan bawah kiri)
Gambar dapat diklik sebagai link jika kode HTML gambar disisipkan pada kode HTML link. Lebih lengkap mengenai link HTML silahkan baca Cara Membuat Link HTML.
<a href="https://cybertricoin.blogspot.co.id/"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></a>
Cara Upload Gambar di Postingan Blog
Untuk dapat memasukkan gambar di postingan, Anda perlu mengupload gambar yang ingin dimasukkan ke hosting blogger.
Caranya silahkan masuk ke post editor. Pilih mode HTML, kemudian klik icon insert image. Upload gambar yang ingin Anda tampilkan.
