Tambahkan Teks HTML ke Gambar Web dalam 9 Langkah Mudah
Gambar menambah kehidupan ke halaman web Anda dan menarik perhatian pemirsa. Teks 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.
9 Langkah-langkah untuk Gambar HTML
Tambahkan keterangan ke gambar dan pindahkan mereka ke mana pun Anda mau:
- Tambahkan gambar ke halaman web Anda.
- Dalam HTML untuk halaman web Anda, tempatkan 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 :
width: lebar gambar px; ">- Untuk keterangan yang sedikit lebih kecil dari teks di sekitarnya, tambahkan properti font-size ke gaya div:
ukuran font: 80%; ">- Caption terlihat terbaik jika mereka berpusat di bawah gambar, jadi tambahkan properti text-align ke atribut style:
text-align: center; "> < img src = "URL" alt = "teks alternatif" lebar = "lebar" tinggi = "tinggi" />- Akhirnya, tambahkan sedikit ruang ekstra antara gambar dan judul, dengan menambahkan atribut gaya ke gambar dengan properti gaya alas bawah :
style =" padding-bottom: 0.5em; " /> - Kemudian tambahkan teks keterangan langsung di bawah gambar:
Ini adalah keterangan saya Unggah halaman web ke server Anda dan ujilah di browser.
Tips Captioning
- Lebar : Dimensi CSS dapat memiliki banyak ukuran yang berbeda, jadi Anda biasanya harus menyertakan jenis pengukuran. Misalnya: lebar: 100 px ; 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 tag
langsung sebelum keterangan dan setelah tag gambar.
- Tambahkan atribut gaya ke tag div: