Lebak Cyber Tips dan Trik Komputer
Cara Memasukan Gambar di HTML 5
lebakcyber.net – tag HTML img digunakan untuk menampilkan gambar di halaman website. tag HTML img merupakan tag yang hanya berisi attribut saja, tag penutup tidak dibutuhkan pada elemen tag HTML img tersebut. Dan pada kesempatan kali ini kita akan mencoba tutorial mengenai bagaimana cara memasukan gambar di HTML 5.
Coba perhatikan contoh penggunaan tag HTML img dibawah ini :
<h2>Contoh Memasukan Gambar Di HTML 5 - Lebakcyber.net</h2> <img src="lebakcyber.png" alt="logo lebakcyber"/>
Selanjutnya simpan perintah HTML 5 tersebut dengan nama contohgambar.html didalam satu folder yang sama dimana kalian menyimpan gambar yang ingin kalian masukan. Perhatikan atribut src, atribut tersebut berisi nama dari gambar yang ingin dimasukan. Pada contoh ini saya menggunakan foto dengan nama lebakcyber.png. Jika kalian memiliki foto yang lain, tinggal sesuaikan saja namanya. Contoh dari perintah diatas adalah seperti pada gambar dibawah ini :
Attribut yang Dimiliki oleh tag HTML img
Penggunaan src dan juga alt sangat penting sebagai atribut dari tag img. Adapun pengertian dari tag tersebut adalah seperti dibawah ini :
Atribut src
Atribut src merupakan atribut yang sangat dibutuhkan, atribut ini digunakan untuk mendefinisikan sumber atau path dari gambar yang akan dimasukan. Atribut src memberikan instruksi kepada browser dimana browser harus mengambil gambar yang akan digunakan.
Atribut alt
Atribut alt digunakan sebagai alternatif text pada suatu gambar jika gambar tersebut gagal ditampilkan. Nilai dari atribut alt biasanya berisi penjelasan dari gambar yang ditampilkan, selain itu atribut alt juga sangat berguna untuk SEO pada artikel yang sedang kamu tulis.
Atribut width
Atribut width merupakan atribut opsional, artinya kalian bisa menggunakannya ataupun tidak. Atribut ini digunakan untuk mengatur lebar dari gambar yang ditampilkan. Walaupun sekarang sudah tidak direkomendasikan untuk menggunakan atribut width karena para developer sudah menggunakan css, namun tidak ada salahnya mencoba atribut ini bagi kalian yang baru belajar HTML 5.
Atribut height
Sama seperti atribut width, atribut height juga merupakan atribut optional. Atribut height ini digunakan untuk mengatur tinggi dari gambar yang ingin ditampilkan.
Jadi untuk penggunaan tag img, kalian bisa menambahkan beberapa atribut kedalam tag img tersebut untuk mengatur alt, panjang gambar dan juga tinggi dari suatu gambar.
Semoga tutorial sederhana mengenai bagaimana cara memasukan gambar di HTML 5 ini dapat bermanfaat bagi kalian yang baru saja mempelajari HTML 5. Jangan lupa juga untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial belajar HTML 5 lainnya.
