Menempatkan image di HTML

Untuk menambahkan image ke dokumen HTML, gunakanlah tag <img>. Tag image bergantung pada atribut dan nilai yang ditentukan untuk menampilkannya. Beginilah caranya kita akan memasukkan image ke dalam dokumen HTML.

1. Ketik <img />. Tag image berada dalam kategori tag spesial HTML yang menutup sendiri. Anda tak perlu memasangkan tag dengan tag image. Cukup dengan satu tag, namun penting untuk menuliskan tag ini secara benar. Ada spasi antara img dan /. Kita akan mengatur image melalui spasi antara img dan /.
2. Klik di sebelah kanan img kemudian tekan spasi pada keyboard kemudian ketik src=””. src merupakan atribut sumber (source) dan kita akan memberikan nilainya yang merupakan url dari image yang akan ditampilkan dalam halaman.
3. Klik antara tanda petik dua kemudian isi dengan url gambar. Kode img anda seharusnya tampak seperti ini di bawah ini:
   <img src="images/belajarhtml.jpg" />
   Kode di atas menyuruh browser web melihat ke dalam folder image dan menampilkan file belajarhtml.jpg. Langkah berikutnya, yakinkan bahwa perlu menambahkan spasi antara tanda petik dengan tag penutup. Selanjutnya, kita bisa menambahkan tag alt yang berfungsi mewakili teks untuk iamge dan diperlukan untuk “memvalidkan” halaman web. Atribut alt membantu mereka yang menggunakan screen reader untuk menavigasikan web. Teks dalam atribut alt juga tampil di browser jika image yang disertakan rusak atau hilang dalam berbagai alasan.
4. Klik sebelah kanan tanda petik setelah belajarhtml.jpg kemudian tekan spasi dan ketik alt=””.
5. Klik di dalam tanda petik dan isikan Belajar HTML.
   Baik atribut src maupun alt diperlukan untuk validitas XHTML. Ada juga atribut opsional yang bisa dipertimbangkan penggunaannya. Kita akan bahas dua atribut opsional ini yaitu height dan width.
6. Klik di sebelah kanan tanda petik akhir pada atribut alt kemudian tekan spasi, selanjutnya ketik width=”180” height=”320”. Atribut ini memberitahukan kepada browser web seberapa besar image yang akan ditampilkan di halaman web. Nilai yang dimasukkan adalah piksel.
7. Pilih File > Save, dan kemudian pratinjau halaman web di browser untuk melihat hasil koding menempatkan image pada html.

HTML5 Kamis, November 19, 2015