Halaman ini adalah terjemahan. Halaman ini mungkin mengandung kesalahan atau kedaluwarsa sehubungan dengan versi bahasa Inggris. Penterjemah: Edwin Rene
Lihat juga index dari semua tips.
Pada halaman ini:
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:
figure { float: right; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 0.5em; padding: 0.5em; }
Bahkan, hanya dua deklarasi pertama (float and width) yang diperlukan, sisanya hanya untuk dekorasi.
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; }
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>
Dan berikut adalah style sheet yang digunakan:
figure { float: right; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 0.5em; padding: 0.5em; } img.scaled { width: 100%; }
Satu satunya penambahan adalah aturang terakhir: hal tersebut membuat gambar mengikuti lebar bagian dalam dalam bingkai (area didalam border dan padding).
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:
figure { display: table; } figcaption { display: table-caption; caption-side: top; }
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:
figure { border-top: none; padding-top: 0; } figcaption { padding: 0.5em; border: thin silver solid; border-bottom: none; }
Model skala menara Eiffel di Parc Mini-France
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::
div.figure { float: right; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 0.5em; padding: 0.5em; }
Seperti sebelumnya, hanya dua yang pertama deklarasi (float dan width) yang penting, sisanya hanya untuk hiasan.
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>
And this is the style sheet:
div.figure { float: right; width: 30%; border: thin silver solid; margin: 0.5em; padding: 0.5em; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; } img.scaled { width: 100%; }
Tambahannya yang dilakukan hanyalah peraturan yang terakhir: yang membuat gambar selebar bagian dalam DIV (daerah dalam border dan padding).
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:
div.figure { border-top: none; padding-top: 0; } div.figure p + p { padding: 0.5em; border: thin silver solid; border-bottom: none; }
Created 17 January 2001;
Last updated Rab 06 Jan 2021 05:40:49 UTC