Cara Memasukkan Gambar Html Di Blog

Cara Memasukkan Gambar di Blog dengan Kode HTML - Seringkali di dalam suatu postingan terdapat foto atau gambar pendukung semoga postingan terlihat lebih menarik.

Pada artikel kali ini kita akan mencar ilmu memahami aba-aba HTML gambar, style, beserta atribut-atributnya.

Kode HTML Dasar Untuk Menambahkan Gambar

Perhatikan, teks berwarna merah merupakan URL gambar, alamat yang mengarah ke kawasan di mana gambar tersebut diupload.

Memberi Keterangan Gambar dengan Tag Alt

Robot crawler mesin pencari tidak melihat gambar secara visual menyerupai pada mata manusia, akan tetapi dalam bentuk teks. Anda sanggup 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 sanggup 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 sanggup dilihat saat kursor mengenai gambar.

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, dipakai atribut width untuk lebar, dan height untuk tinggi. Masing-masing memakai ukuran pixel.

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.

Mengatur Posisi Gambar Terhadap Teks dengan Tag Div Style

Tag div style sanggup dipakai untuk mengatur posisi gambar.

Membuat Gambar Rata Kiri

Float 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 Kanan

Float 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 Tengah

Text-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 sanggup mengatur jarak antara gambar dengan teks memakai margin.

<div style="float:left; margin-right:20px;"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></div>

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)

Membuat Gambar Menjadi Link Yang Dapat Diklik

Gambar sanggup diklik sebagai link kalau aba-aba HTML gambar disisipkan pada aba-aba HTML link. Lebih lengkap mengenai link HTML silahkan baca Cara Membuat Link HTML.

<a href="https://duarupa.blogspot.co.id/"><img src="https://www.blogger.com/img/blogger-logo-small.png"/></a>

Cara Upload Gambar di Postingan Blog

Untuk sanggup 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.

Sekian artikel Cara Memasukkan Gambar di Blog dengan Kode HTML. Jika ada pertanyaan sanggup disampaikan di kolom komentar di bawah.
Sumber https://duarupa.blogspot.com/