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.
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).
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>
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
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.
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%" />
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.
Demikianlah cara menambahkan gambar pada HTML secara lengkap dan detail semoga bermanfaat.
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.
Comments
Post a Comment