Membuat teks 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

memasukkan gambara di HTML

Jika sebelumnya kita membahas bagaimana memformat text di HTML, maka sekarang kita akan coba ke teknik yang cukup sering kita pakai juga yaitu bagaimana memasukkan gambar ke dalam HTML
Ada 2 tahap untuk memasukkan gambar dalam HTML yaitu:

1. Menentukan lokasi gambar
2. Memasang kode gambar

Lokasi gambar adalah folder dimana gambar itu diletakkan berdasarkan letak file HTML yang mengaksesnya. Misalnya file html-nya ada di folder c:\website dan gambarnya ada di folder c:\website\images dengan nama gambarku.jpg maka berarti lokasi file gambarnya adalah
c:\website\images\gambarku.jpg
dan nanti di kode HTML-nya kita tulis seperti ini:
images/gambarku.jpg
Kemudian untuk memunculkan gambar, kita letakkan kode ini di file HTML:

<img src="LOKASI GAMBAR" alt="TEXT ALTERNATIF" />

LOKASI GAMBAR = lokasi dimana gambar itu berada lengkap dengan nama gambarnya TEXT ALTERNATIF = Text yang muncul jika gambar yang kita tampilkan tidak muncul
Jika mengacu pada contoh diatas, berarti kodenya akan seperti ini:

<img src="images/gambarku.jpg" alt="Ini Gambarku"/>

HTML dasar

Sekarang mari coba menuliskan kode HTML pertama kita. Masih ingat file html pertamax.html yang sudah kita buat di pengenalan HTML sebelumnya? Edit file itu menggunakan Notepad. Saya sendiri menyarankan menggunakan Notepad++ sebuah software yang mirip notepad tapi dikhususkan untuk menulis kode-kode programming. Jika anda sempat, silahkan download notepad++ dulu. Tapi pakai notepad bawaan windows juga oke kok.
Sekarang coba ketik ini di notepad anda.

Apa Kabar Dunia!!!

Simpan file itu dan klik dua kali file pertamax.html. Bagaimana hasilnya?
Yup benar, akan muncul tulisan Apa Kabar Dunia di browser anda. Mudah sekali bukan?

TEXT FORMATING

Sekarang bagaimana memanipulasi tampilan tulisan sehingga menghasilkan tampilan yang keren seperti di website-website pada umumnya. Maka disinilah kita mulai belajar HTML. Kita akan melakukan Markup tulisan sehingga bisa muncul sesuai keinginan.
Manipulasi yang pertama adalah Text Formating. Ini adalah manipulasi bagaimana menampilkan text yang sesuai keinginan. Meliputi bagaimana menebalkan text, memiringkan, memberi garis bawah, dll. Kita mulai yuk. Silahkan lihat tabel berikut:

<strong>	Menebalkan huruf
<em>	Memiringkan huruf
<ins>	Menggarisbawahi huruf
<del>	Mencoret huruf
<kbd>	Membuat huruf keyboard
<sub>	Membuat huruf subscripted
<sup>	Membuat huruf superscripted

Tag HTML memiliki sepasang tanda yaitu pembuka dan penutup. Misalnya tag strong, dia memiliki dua tag untuk pembuka yaitu <strong> dan penutup </strong>. Untuk menggunakannya, anda tinggal memasang text diantara dua tag tersebut. Contohnya jika ingin menebalkan tulisan kita sebelumnya

<strong>Apa Kabar Dunia!!!</strong>

Sekarang cobalah untuk tag-tag yang lain. Seperti ini misalnya:

<strong>Apa Kabar Dunia!!!</strong>
<em>Apa Kabar Dunia!!!</em>
<ins>Apa Kabar Dunia!!!</ins>
<del>Apa Kabar Dunia!!!</del>
<kbd>Apa Kabar Dunia!!!</kbd>
<sub>Apa Kabar Dunia!!!</sub>
<sup>Apa Kabar Dunia!!!</sup>