Contact Us:

670 Lafayette Ave, Brooklyn,
NY 11216

+1 800 966 4564
+1 800 9667 4558

Artikel SEO Murah – Sekarang, mungkin Anda bertanya-tanya bagaimana cara memberikan gambar ke website. Salah satu caranya yaitu dengan memahami cara memasukkan gambar di HTML. Kenapa HTML?

 

Alasannya, HTML adalah salah satu tag yang paling umum digunakan untuk membangun struktur website.  Bahkan, 90,4% website di dunia menggunakan HTML. Jadi, kami cukup merekomendasikan Anda untuk memahami basic HTML.

 

Nah, Anda sudah datang ke tempat yang tepat. Pada artikel ini, Anda akan mengetahui cara memasukkan gambar di HTML. Lengkap dengan cara mengaturnya supaya gambar lebih cantik dan fungsional.

Langkah 1: Memastikan Format Gambar Sudah Sesuai

Langkah pertama yaitu memilih format gambar yang tepat untuk website Anda. Pastikan gambar yang ingin Anda masukkan ke dokumen HTML memiliki format yang sesuai. Jika format gambar tidak kompatibel, kemungkinan besar gambar akan gagal ditampilkan.

 

Langkah 2: Memasukkan Atribut Sumber Gambar pada Tag HTML Images

HTML tidak bisa langsung menampilkan gambar begitu saja. Dengan kata lain, HTML harus mengambil gambar dari suatu tempat penyimpanan atau direktori (drive, website, dan lain-lain). Oleh karena itu, diperlukan atribut untuk memanggil gambar tersebut agar bisa tampil pada browser.

 

Cara Memasukkan Gambar di HTML

Atribut untuk menarik gambar dari server penyimpanan tersebut dinamakan Src. Isi dari atribut ini bisa berupa link menuju direktori ataupun nama file gambar.

Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images

Atribut Alt berfungsi untuk memberikan teks alternatif pada gambar. Jadi, jika karena sebab tertentu gambar gagal ditampilkan, teks alternatif akan muncul sehingga pengunjung website tetap bisa mengidentifikasi gambar.

 

Langkah 4: Mencantumkan Keterangan Gambar

Dari poin sebelumnya, Anda sudah mengerti penggunaan teks alternatif pada gambar. Namun, bagaimana jika Anda ingin mencantumkan keterangan yang bisa pengunjung lihat saat cursor mengarah ke gambar?

 

Cara Mengatur Gambar di HTML

Yuk simak beberapa cara mengatur gambar di HTML berikut in!

BACA JUGA : Bagaimana Cara Membuat Struktur Website yang SEO Friendly ?

Cara 1: Mengubah Dimensi Gambar

Untuk mengatur dimensi gambar, gunakan atribut style. Atribut style mengandung elemen width dan height. Elemen width berfungsi untuk memodifikasi lebar gambar, sedangkan elemen height untuk mengubah tinggi gambar.

 

Cara Menggunakan Property Float di HTML

Cara membuat floating image pun cukup mudah. Anda hanya perlu menyisipkan property float di dalam atribut style.

 

<p>Floating image sebelah kanan<img src=”langit.png” style=”float:right;width:42px;height:42px;”></p>

<p>Floating image sebelah kiri<img src=”langit.png” style=”float:left;width:42px;height:42px;”></p>

Percantik Website dengan Gambar yang Menarik

Nah, sekarang Anda sudah memahami cara memasukkan dan mengatur gambar di HTML. Namun untuk lebih memudahkan, kami juga sudah merangkum pembahasan di atas untuk Anda.

 

Atribut  Fungsi

Src          Memberi tahu lokasi penyimpanan suatu gambar

Alt          Memberikan teks alternatif pada gambar

Title       Mencantumkan tooltips pada gambar

Width    Mengatur dimensi lebar pada gambar

Height   Mengatur dimensi tinggi pada gambar

Border  Memberikan garis tepi pada gambar

Align      Mengatur posisi gambar

Property Float   Mengatur gambar dan menyesuaikan posisi teks di sekitar gambar

Dengan menggunakan kode HTML di atas, Anda sudah bisa memasukkan dan mengatur gambar di website sesuai keinginan. Tapi penting diingat, gambar juga harus sesuai dengan konteks konten agar website tak sekadar cantik tapi juga informatif.

 

Nah, untuk membantu Anda menemukan gambar yang tepat, kami sudah mengumpulkan daftar website penyedia gambar gratis terbaik pada artikel berikut → 6 Website Penyedia Gambar Gratis untuk Konten Website Anda.

 

Semoga artikel ini membantu Anda untuk mempercantik website dengan gambar yang menarik, ya! Akhir kata, selamat mencoba!

Klik disini untuk dapatkan jasa Artikel SEO murah dan berkualitas.