pinterduit blog logo Pinterduit.com

Platform ngeblog asli buatan lokal, menulis itu untuk melepas beban bukan untuk menambah beban







Home » Internet



Cara Menambahkan Gambar Di HTML

ERNDT • Internet • 2 Sep 2020 • 11 Dilihat • publish




Pinterduit.com - Kali ini kita akan membahas cara menambahkan gambar di HTML. Tapi sebelumnya bagi anda yang belum tahu apa itu HTML simak dulu penjelasan singkat berikut ini.

Pengertian HTML



HTML adalah kepanjangan dari "hypertext markup language" adalah sebuah bahasa markah yang dikhususkan untuk membangun sebuah website. Misalnya blog yang sedang anda akses ini juga dibangun salah satunya dengan menggunakan kode HTML. Nah di dalam syntax html itu ada bermacam macam seperti tag untuk membuat tautan, tabel, cetak tebal, cetak miring, dan gambar (yang akan kita bahas kali ini).

Contoh Kode HTML Sederhana "hello world!"



Berikut ini adalah contoh sederhana dari penulisan kode HTML untuk hello world!

<html>
<head>
<title>
Hello World !
</title>
</head>
<body>
Ini adalah contoh halaman HTML pertama saya
</body>
</html>

Cara Menambah Gambar Pada HTML Dengan Tag <img>



Berikut ini adalah cara menambahkan gambar pada html yaitu dengan tag <img> contoh kodenya adalah seperti ini

<img src="logo.jpg" />

atribut src pada tag img digunakan untuk mengambil source gambar. Dalam contoh diatas gambar src adalah berkas gambar dengan nama berkas logo.jpg dan berada pada direktori yang sama. Misalkan ingin mengambil gambar dari situs eksternal bisa juga. Contoh kode nya

<img src="http://google.com/logo.jpg" />


kode diatas menampilkan gambar dari sumber google.com

Cara Mengatur Tinggi Dan Lebar Gambar HTML



Anda juga bisa mengatur tinggi dan lebar gambar html dengan atribut "height" untuk tinggi dan atribut "width" untuk mengatur lebar. Contoh penggunaannya sebagai berikut.

<img src="logo.jpg" height="100px" />

kode diatas menampilkan gambar html dengan tinggi 100 pixel. Contoh kode lainnya.

<img src="logo.jpg" width="100px" />

kode diatas menampilkan gambar html dengan lebar 100 pixel. Bisa juga mengatur lebar atau tinggi otomatis sesuai ukuran layar dengan kode berikut.

<img src="logo.jpg" width="100%" />


kode diatas akan menampilkan gambar html dengan lebar gambar menyesuaikan lebar layar. Atau kata lainnya gambar full screen.

Fungsi Tag "Alt" Pada Gambar HTML



Anda juga bisa menambahkan tag "alt" pada gambar. Tag alt atau alternative ini berfungsi sebagai keterangan alternative tentang gambar html yang bersangkutan. Misalnya gambar kita tentang bunga mawar maka kita harus memberikan tag alt="bunga mawar" agar lebih SEO Friendly dan juga keterangan pengganti saat gambar rusak / gagal dimuat.

Contoh kode lengkapnya sebagai berikut.

<img src="mawar.jpg" alt ="bunga mawar" width="100%" />


Menambahkan Atribut "rel" Pada Gambar HTML



Tag "rel" atau relative juga merupakan atribut tambahan yang digunakan sebagai pelengkap misalnya memberitahukan kepada mesin pencari untuk tidak mengindex gambar tersebut dengan atribut "noindex" . Berikut contoh penggunaannya.

<img src="mawar.jpg" alt ="bunga mawar" width="100%" rel="noindex" />

Oh iya mengenai urutan atribut ini boleh dibolak balik bebas urutannya.

Penutup



Demikianlah cara menambahkan gambar pada HTML secara lengkap dan detail semoga bermanfaat.




Artikel ini diterbitkan untuk Pinterduit.com dengan judul Cara Menambahkan Gambar Di HTML




Bagikan Artikel Ini
full html code

link

BB Code