Halaman ini adalah terjemahan. Halaman ini mungkin mengandung
kesalahan atau kedaluwarsa sehubungan dengan versi bahasa
Inggris. Penterjemah: Edwin Rene
Model skala dari menara Eiffel di Parc Mini-France
HTML5 memperkenalkan sebuah elemen untuk memasukkan gambar
dengan keterangan. (Kita akan memperlihatkan cara untuk melakukan
hal yang sama dengan HTML4 dibawah.)
<figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Eiffel tower">
<figcaption>Model skala dari menara
Eiffel di Parc Mini-France</figcaption></figure>
Sebagai contoh, untuk memposisikan gambar disebelah kanan, jarak
30% dari lebar paragraf sekitar, kita bisa melakukan trik
pengaturan berikut:
Bahkan, hanya dua deklarasi pertama (float and width) yang
diperlukan, sisanya hanya untuk dekorasi.
Menyesuaikan skala gambar
Ada satu masalah disini, bahwa gambarnya bisa jadi terlalu
lebar. Dalam hal ini, gambarnya selalu selebar 136 px dan gambar
tersebut adalah 30% dari teks yang mengelilinginya. Jadi bila
ukuran window terlalu kecil, gambarnya bisa melampaui keterangannya
(cobalah).
Bila anda mengetahui lebar dari seluruh gambar di dokumen
tersebut, anda bisa menambahkan lebar minimum ke keterangan,
seperti berikut:
figure {
min-width: 150px;
}
Saint Tropez dan bentengnya di matahari senja
Cara lain adalah dengan menyesuaikan skala gambar itu sendiri.
Itu adalah apa yang kita telah lakukan dengan gambar di
sebelahkanan ini. Seperti yang ,mungkin dapat anda lihat bila anda
membuat window terlalu lebar, gambar JPEG tidak bisa
menyesuaikannya dengan baik. Tetapi bila gambar tersebut adalah
sebuah diagram atau gambar dalam bentuk SVG, gambarnya akan menyesuaikan skalanya dengan sangat baik.
Berikut adalah mark-up yang ktia gunakan:
<figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<figcaption>Saint Tropez dan bentengnya di
matahari senja</figcaption>
</figure>
Satu satunya penambahan adalah aturang terakhir: hal tersebut
membuat gambar mengikuti lebar bagian dalam dalam bingkai (area
didalam border dan padding).
Memberikan keterangan di atas
Laut Mediterranea dekat Cap Ferrat
HTML memungkinkan memperbolehkan elemen figcaption untuk menjadi
elemen pertama atau terakhir dari sebuat figure dan, tanpa
menggunakan aturan CSS yang mengaturnya, yang memungkinkan
keterangan untuk berada di atas atau di bawah, secara berurut.
Tapi, tidak peduli apa mark-up, Anda juga dapat menentukan di
CSS apakah caption harus muncul di atas atau di bawah gambar. Anda
melakukan itu dengan mengatakan kepada browser bahwa gambar
tersebut harus diformat sebagai sebuah tabel, dengan gambar sebagai
satu-satunya sel dan keterangan sebagai judul tabel. Hanya
menambahkan aturan ini pada style sheet di bagian sebelumnya:
Gaya kami digunakan di halaman ini mencakup perbatasan abu-abu
di sekitar gambar. Sayangnya, ketika kita menggunakan tata letak
meja untuk menempatkan judul di bagian atas atau bawah, kita perlu
menentukan perbatasan berbeda, karena keterangan yang diletakkan di
luar perbatasan meja. Kami memperbaikinya dengan menempatkan bagian
dari perbatasan pada keterangan itu sendiri:
HTML4, tidak seperti HTML5, tidak memiliki unsur yang
menyisipkan gambar dengan keterangannya. Diusulkan (see HTML3), tapi tidak
berhasil masuk ke HTML4. Berikut adalah salah satu cara untuk
mensimulasikan elemen gambar::
<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>
Kemudian pada style sheet Anda menggunakan kelas "figure" untuk
memformat gambar seperti yang Anda inginkan. Misalnya, untuk
memposisikan gambar disebelah kanan, jarak 30% dari lebar paragraf
sekitar, kita bisa melakukan trik pengaturan berikut::
Seperti sebelumnya, hanya dua yang pertama deklarasi (float dan
width) yang penting, sisanya hanya untuk hiasan.
Membuat skala gambar di HTML4
Untuk menghindari bahwa lebar gambar meluap dari batas, dan jika
Anda tahu lebar semua gambar dalam dokumen, Anda dapat menambahkan
lebar minimum untuk DIV, misalnya, seperti ini:
div.figure {
min-width: 150px;
}
Saint Tropez dan benteng di matahari senja
Untuk skala gambar dengan lebar sosok bukan (seperti yang telah
kita lakukan dengan gambar di sebelah kanan), Anda dapat
menambahkan atribut CLASS dan aturan CSS, sangat mirip dengan
contoh HTML5 di atas. Berikut adalah tanda-up kami menggunakan:
<div class=figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<p>Saint Tropez and its
fort in the evening sun
</div>
Tambahannya yang dilakukan hanyalah peraturan yang terakhir:
yang membuat gambar selebar bagian dalam DIV (daerah dalam border
dan padding).
Menaruh keterangan di HTML4
Laut Mediterranea dekat Cap Ferrat
Untuk menempatkan keterangan di atas, tambahkan aturan ini pada
style sheet dari bagian sebelumnya:
div.figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
The '+' menyebabkan aturan untuk mencocokkan P yang mengikuti P.
lain Yang berarti dalam hal ini yang cocok dengan P kedua tokoh
tersebut, salah satu yang berisi judul.
(Teknik ini dapat mengekspos bug di beberapa browser dari
sebelum tahun 2003, terutama bila dikombinasikan dengan skala
gambar, seperti yang saya lakukan di sini.)
Seperti sebelumnya, perbatasan abu-abu yang kami memilih untuk
menempatkan sekitar angka pada halaman ini hanya akan berada di
sekitar gambar itu sendiri dengan teknik ini. Untuk meletakkannya
di sekitar gambardan keterangannya, tambah aturan aturan
berikut:
