Posting ini menjelaskan tentang menulis keterangan di bawah gambar.
Bagaimana Cara Menulis Keterangan di Bawah Gambar?
Untuk menulis keterangan di bawah gambar, kami akan memberikan metode berbeda yang disebutkan di bawah ini:
- Metode 1: Cara Menambahkan Keterangan Gambar Menggunakan HTML “
Elemen? - Metode 2: Cara Menambahkan Keterangan Gambar Menggunakan “ Elemen?
Metode 1: Bagaimana Menambahkan Keterangan Gambar Menggunakan Elemen HTML “
”? Untuk menambahkan keterangan gambar, ikuti petunjuk berikut:
- Pertama, tambahkan “
”, yang digunakan untuk merepresentasikan konten mandiri, berpotensi dengan teks opsional. - Selanjutnya, masukkan “
” tag di dalam paragraf “ ” tag. Tambahkan gambar dengan menggunakan tombol “ src ” atribut. “ semuanya ” menampilkan konten yang ditambahkan jika gambar tidak ditampilkan karena beberapa alasan.
- Atur lebar gambar sebagai “ 200px ”.
- Kemudian, “
” tag digunakan untuk menambahkan keterangan pada gambar. Selain itu, tambahkan keterangan di antara tag “ ”:
= 'TSL.png' semuanya = 'Pembuat Konten TSL' lebar = '200' >
>Anda dapat melihat bahwa gambar dengan keterangan tertentu telah ditampilkan:
Sekarang, lanjutkan ke metode kedua untuk menambahkan keterangan menggunakan CSS.
Metode 2: Bagaimana Menambahkan Keterangan Gambar Menggunakan Elemen “
”?Untuk menambahkan keterangan gambar menggunakan “
” elemen, coba instruksi yang diberikan:
- Membuat ' ” wadah dan tambahkan atribut kelas dengan nama “ image-holder ”.
- Tambahkan tag judul “ ” untuk menyisipkan tajuk dan menata tajuk sesuai pilihan Anda.
- Tambahkan elemen “
” lainnya dan masukkan “” tandai dengan “ src ”, “ semuanya ' dan ' lebar ” di antara wadah div.
- Tambahkan “
” ketiga dengan nama kelas “ img-caption ”. Kemudian, berikan keterangan di antara tag “”. Selain itu, “
” elemen digunakan untuk menambahkan satu jeda baris:= 'pemegang gambar' >
= 'warna: rgb(95, 31, 245)' > Gambar HTML >
= 'TSL.png' semuanya = 'Pembuat Konten TSL' lebar = '200' >
= 'img-caption' >
>
>Dapat diamati bahwa keterangan gambar telah berhasil ditambahkan:
Sekarang, mari beralih ke bagian CSS untuk menerapkan properti.
Gaya '.image-holder' di CSS
Pertama, akses “
' elemen memiliki kelas ' .gambar-pemegang ”. Kemudian, terapkan properti CSS berikut: .gambar-pemegang {
posisi : relatif ;
tinggi : 100px ;
lebar : 200px ;
batas : mobil ;
}Rincian properti yang disebutkan di atas dijelaskan di bawah ini:
- “ posisi ” ditetapkan sebagai “ relatif ” untuk menentukan posisi asli elemen yang tetap berada di aliran dokumen, seperti nilai statis.
- Kemudian, ' tinggi ” digunakan untuk menentukan tinggi elemen.
- “ lebar ” properti menentukan ukuran lebar elemen.
- “ batas ” ditetapkan sebagai “ mobil ” untuk mengatur spasi secara otomatis di sekitar elemen.
Keterangan Gaya dalam CSS
Pada langkah ini kita akan mengakses kedua class dengan nama “ image-holder ' dan ' img-caption ” dan terapkan properti CSS berikut:
.gambar-pemegang .img-caption {
posisi : mutlak ;
perataan teks : tengah ;
font-berat : berani ;
lebar : 200px ;
tinggi : 50px ;
kiri : 0px ;
warna : #f80909 ;
Latar Belakang : rgb ( 140 , 166 , 253 ) ;
}Uraian dari sifat-sifat tersebut di atas adalah sebagai berikut:
- “ perataan teks Properti ” ditetapkan sebagai “ tengah ” untuk menyelaraskan posisi teks di tengah.
- Lanjut, ' font-berat ” dialokasikan sebagai “ berani ” untuk mengatur font keterangan gambar.
- Kemudian, “ warna ” properti digunakan untuk mengatur warna elemen yang diakses.
- “ Latar Belakang ” properti mengatur warna latar belakang elemen.
- Properti lainnya, termasuk “ posisi ”, “ tinggi ', dan ' lebar ” juga digunakan untuk menerapkan fungsi masing-masing.
Keluaran
Kami telah membahas metode untuk menulis keterangan di bawah gambar.
Kesimpulan
Untuk menulis keterangan di bawah gambar, pengguna dapat menggunakan “
' elemen atau sederhana ' ” wadah. Untuk menggunakan “”, pertama, tambahkan “ ” elemen untuk menyematkan gambar di dalam “
”, lalu gunakan elemen “ ” dan tambahkan keterangan di antara tagnya. Pada pendekatan kedua, pengguna cukup menggunakan “ ” elemen dan terapkan properti CSS yang berbeda untuk mempercantik keterangan. Posting ini telah menunjukkan metode untuk menulis keterangan di bawah gambar.
- Pertama, tambahkan “