GAMBAR PADA HTML
Assalamu'alaikum Wr. Wb
Hai teman-teman semua, terima kasih masih mengunjungi blog saya yang sederhana dan kurang rapi ini.. Semoga kalian tidak bosan membaca tulisan saya yang sedikit acak2an, maklum lah saya gak pintar untuk merangkai kata-kata menjadi sebuah tulisan yang enak untuk dibaca..
Sebelumnya kita sudah belajar mengenai LINK pada HTML, nah kesempatan kali ini kita akan belajar mengenai Gambar pada HTML, karena diawal-awal untuk sintak-sintak dasarnya sudah kita pelajari, untuk kali ini saya hanya akan mengulang sedikit biar gak lupa.
Sintak :
<img src="url" alt="some_text" style="width:width;height:height;">
Nah, saya akan mengulik sebentar tentang sintak diatas, kalau dilihat sintak diatas bukan hanya sintak-sintak yang ada pada HTML bukan? Ya, kalau kalian sudah pernah dengar tentang CSS, pasti kalian tahu kalau atribut
"style="width:width;height:height;"
merupakan sintak yang ada pada CSS, sekadar untuk pengenalan saja, sebenarnya berdasarkan referensi yang saya dapatkan di W3Schools, pada bab-bab sebelumnya sudah dibahas mengenai HTML CSS, jadi yang dibahas itu cuma CSS dasar yang digunakan untuk mendukung penggunaan sintak dasar HTML. Tapi, untuk CSS sendiri akan saya ulas satu per satu apabila tutorial mengenai HTML ini sudah selesai kita bahas, jadi biar tidak bingung nantinya. Pada kesempatan berikutnya akan saya posting mengenai HTML CSS tapi hanya untuk pengenalan dan dasar-dasarnya saja.
Kali ini saya hanya akan mengulas cara untuk membuat gambar berada disebelah kanan/kiri teks menggunakan property Float.
Langsung saja untuk sintaknya :
<img src="url" alt="some_text" style="width:width;height:height; float:right/left">
Contoh gambar berada disebelah kanan teks :
Hasilnya :
Contoh gambar berada disebelah kiri teks :
Hasilnya :
Berdasarkan uraian diatas dapat disimpulkan bahwa untuk membuat gambar berada disebelah kanan/kiri teks menggunakan property "Float" pada atribut "Style".
Nah, bagaimana? Ada yang bingung atau belum paham? Silakan tinggalkan jejak pada komentar.
Sekian postingan dari saya. Terima kasih.
Referensi :
http://www.w3schools.com/html/html_images.asp
Wassalamu'alaikum Wr. Wb