<!DOCTYPE html> <html> <head> <title>Cara Memasukkan Gambar di HTML</title> </head> <body> <p> Ini merupakan contoh gambar pada HTML </p> <img src="langit.png"> </body> </html> Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images Supaya gambar memiliki alt text, Anda perlu menambahkan atribut alt text di dalam tag <img>. <img src="langit.png" alt="Gambar_Langit"> Untuk penggunaan atribut alt text dalam dokumen HTML bisa Anda temukan pada cara di bawah ini. <!DOCTYPE html> <html> <head> <title>Cara Memasukkan Gambar di HTML</title> </head> <body> <p> Ini merupakan contoh gambar pada HTML </p> <img src="langit.png" alt="Gambar_Langit"> </body> </html> Langkah 4: Mencantumkan Keterangan Gambar Jawabannya yaitu dengan menambahkan atribut title di dalam tag <img>. Setelah menggunakan atribut ini, maka gambar bisa memiliki tooltips atau pesan yang muncul saat cursor diarahkan ke objek. Selain itu, halaman website juga tetap luas karena keterangan gambar tidak memakan tempat. Tooltips pada dokumen HTML bisa Anda dapatkan melalui syntax ini. <img src="langit.png" alt="Gambar_Langit" title="Ini adalah langit pagi"> Penempatan syntax atribut title silakan melihat contoh berikut. <!DOCTYPE html> <html> <head> <title>Cara Memasukkan Gambar di HTML</title> </head> <body> <p> Ini merupakan contoh gambar pada HTML </p> <img src="langit.png" alt="Gambar_Langit" title="Ini adalah langit pagi"> </body> </html> Cara 1: Mengubah Dimensi Gambar Atribut style cukup sederhana, berikut syntax-nya. <img src="langit.png" alt="Gambar_Langit" style="width:500px;height:400px;"> Cara menggunakan atribut style juga mudah, cukup tempelkan kode ini pada text editor Anda. <!DOCTYPE html> <html> <head> <title>Cara Memasukkan Gambar di HTML</title> </head> <body> <p> Ini merupakan contoh gambar pada HTML </p> <img src="langit.png" alt="Gambar_Langit" style="width:500px;height:400px;"> </body> </html> Penting diingat, ketetapan ukuran gambar dalam dokumen HTML adalah pixel (px). Jadi, meski Anda tidak mencantumkan satuan dalam atribut Width dan Height, browser akan tetap menampilkan gambar dalam ukuran pixel. Cara 2: Memberikan Bingkai Gambar Anda juga bisa mengatur sendiri level ketebalan border sesuai keinginan, lho. Caranya yaitu dengan mengubah nilai di dalam atribut border. Atribut border itu sendiri dapat ditulis dengan syntax berikut: <img src="langit.png" border="5"> Secara lengkapnya, Anda bisa memasukkan syntax ini pada text editor. <!DOCTYPE html> <html> <head> <title>Cara Memasukkan Gambar di HTML</title> </head> <body> <p> Ini merupakan contoh gambar pada HTML </p> <img src="langit.png" border="5"> </body> </html> Cara 3: Mengatur Posisi Gambar Anda bisa menempatkan gambar ke berbagai posisi: kiri, kanan, tengah, atas, dan bawah. Namun, setiap posisi memiliki syntax yang sedikit berbeda. Berikut adalah kode HTML untuk mengatur gambar ke masing-masing posisi. <img src="langit.png" align="left"> <img src="langit.png" align="right"> <img src="langit.png" align="middle"> <img src="langit.png" align="top"> <img src="langit.png" align="bottom"> Untuk penerapan syntax di atas dalam dokumen HTML bisa dilihat pada contoh di bawah. <!DOCTYPE html> <html> <head> <title>Cara Memasukkan Gambar di HTML</title> </head> <body> <p>Ini adalah contoh gambar langit:<img src="langit.png" style="width:500px;height:400px;" align="middle"> dengan align="middle"</p> </body> </html>
