Membuat Text Mengalir di sekeliling Gambar

Ada kalanya kita ingin membuat seperti di majalah-majalah dimana text mengalir di sekeliling gambar. Mungkin akan lebih jelas jika saya tunjukkan gambar ini:

Bagaimana caranya?

Kita akan memasukkan style CSS ke dalam kode gambar sehingga bisa melakukan aneka macam modifikasi. Insya Allah nanti di bagian CSS kita akan pelajari semua lebih rinci. Karena artikel ini bertujuan untuk membuat text yang mengalir di sekeliling gambar, maka kita bahas bagian itu saja dulu ya.

Untuk menambah CSS di kode HTML, kita cukup menambahkan atribut style saja. Sehingga hasilnya seperti ini:

<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:right"/>

Perhatikan, ada tambahan style="float:right" pada atribut images-nya. Pada contoh diatas, saya buat gambar ada di sebelah kanan dan text mengalir di sebelah kirinya. Apabila ingin gambarnya di kiri dan text di kanan, maka kita cukup mengganti kata right dengan left. Gambar bukan? Contohnya seperti ini:

<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:left"/>

Bisa dimengerti kan?

Oke, insya Allah besok kita bahas bagian HTML yang cukup penting dalam SEO yaitu Heading. Doakan mudah-mudahan punya banyak waktu ya.. Thanks

27 thoughts on “Membuat Text Mengalir di sekeliling Gambar

  1. untuk yang text mengalir,setelah saya coba tambahkan style sesuai tutor diatas,mengapa tidak ada perubahan??
    saya edit HTML menggunakan notepad++ sesuai saran anda..
    mohon solusinya,,terima kasih.. ^~^

    • coba seperti ini
      tulis sebuah kalimat sebelum script untuk memunculkan gambar itu.

      contoh :
      Apa Kabar Dunia!!

      semoga membantu

  2. Pingback: Membuat Text Mengalir di sekeliling Gambar – MAHASISWA MP

Leave a Reply

Your email address will not be published. Required fields are marked *