GAMBAR DAN KETERANGAN GAMBAR

Scale model of the Eiffel tower in Parc Mini-France

HTML tidak memiliki sebuah elemen yang memungkinkan kita untuk memasukkan sebuah gambar dengan keterangannya. Meskipun pernah diusulkan (lihat HTML3), tapi tidak berhasil muncul di HTML4. Berikut adalah sebuah cara untuk mensimulasi elemen gambar seperti itu:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in Parc Mini-France
</div>

Lalu di dalam style sheet tersebut anda menggunakan class "figure" untuk menformat gambar tersebut seperti yang anda inginkan. Sebagai contoh, untuk menposisikannya di sebelah kanan, dengan tempat sebesar 25% dari paragraf yang mengelilinginya, aturan berikut bisa melakukan trik tersebut:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Bahkan hanya dua deklarasi pertama yang (float and width) yang penting, sisanya hanyalah dekorasi.

source : kliksini

Posted in: Design,How to