Gambar menambah kehidupan ke halaman web Anda dan menarik perhatian pemirsa. Keterangan memberikan informasi tambahan tentang gambar web Anda, tetapi mereka bisa sulit untuk ditambahkan ke halaman web tanpa keterampilan HTML dan CSS tingkat lanjut. Berikut adalah metode yang dapat diandalkan untuk menambahkan keterangan yang sederhana namun menarik untuk gambar yang tetap dengan gambar di mana pun Anda memindahkannya di laman web.
Langkah-langkah untuk Gambar HTML
-
Tambahkan gambar ke halaman web Anda.
-
Dalam HTML untuk halaman web Anda, letakkan tag div di sekitar gambar:
-
Tambahkan atribut gaya ke tag div:
style = ""> -
Atur lebar div ke lebar yang sama dengan gambar, dengan properti gaya lebar:
-
Untuk keterangan yang sedikit lebih kecil dari teks di sekitarnya, tambahkan properti font-size ke gaya div:
-
Caption terlihat paling baik jika mereka berpusat di bawah gambar, jadi tambahkan properti text-align ke atribut style:
-
Terakhir, tambahkan sedikit ruang ekstra antara gambar dan teks, dengan menambahkan atribut gaya ke gambar dengan properti bergaya alas bawah:
style = "padding-bottom: 0.5em;" />
-
Kemudian tambahkan teks keterangan langsung di bawah gambar:
Unggah halaman web ke server Anda dan ujilah di browser.
Tips Captioning
- Dimensi CSS dapat memiliki banyak ukuran yang berbeda, jadi Anda biasanya harus menyertakan jenis pengukuran. Sebagai contoh:
lebar: 100px; Namun, dimensi gambar HTML selalu dalam piksel, jadi Anda membiarkan pengukuran tidak aktif.
width = "100"
- Jika Anda membuat lebar div lebih lebar dari lebar gambar, keterangan mungkin muncul di samping gambar. Jika ini yang Anda inginkan, tambahkan a
tag langsung sebelum keterangan dan setelah tag gambar.
