Bahasa

Halaman ini adalah terjemahan. Halaman ini mungkin mengandung kesalahan atau kedaluwarsa sehubungan dengan versi bahasa Inggris. Penterjemah:Edwin Rene

Web Style Sheets CSS tips & tricks

Lihat juga index dari semua tips.

Pada halaman ini:

Gambar & keterangan

Eiffel tower

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:

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.

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;
}

St. Tropez

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>

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).

Memberikan keterangan di atas

Cap Ferrat

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:

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;
}

Gambar & keterangan di HTML4

Eiffel tower

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.

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;
}

St. Tropez

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).

Menaruh keterangan di HTML4

Cap Ferrat

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;
}
Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

Created 17 January 2001;
Last updated Kam 09 Nov 2017 04:41:00 UTC

Bahasa

Tentang terjemahan