Imej menambah kehidupan ke halaman web anda dan menarik perhatian penonton. Kapsyen memberikan maklumat tambahan mengenai imej web anda, tetapi mereka boleh sukar untuk ditambahkan ke laman web tanpa kemahiran HTML dan CSS yang canggih. Berikut adalah cara yang boleh dipercayai untuk menambahkan kapsyen yang ringkas, namun menarik, kepada imej yang kekal dengan imej di mana sahaja anda mengalihkannya pada halaman web.
Langkah-langkah untuk Caption Image HTML
-
Tambah imej ke halaman web anda.
-
Dalam HTML untuk halaman web anda, letakkan tag div di sekeliling imej:
-
Tambah atribut gaya kepada tag div:
gaya = ""> -
Tetapkan lebar div ke lebar yang sama dengan imej, dengan sifat gaya lebar:
-
Untuk kapsyen yang sedikit lebih kecil daripada teks di sekeliling, tambahkan saiz saiz fon kepada gaya div:
-
Kapsyen kelihatan paling baik jika mereka berpusat di bawah imej, jadi tambahkan sifat jajaran teks kepada atribut gaya:
-
Akhir sekali, tambahkan sedikit ruang tambahan di antara imej dan kapsyen, dengan menambahkan atribut gaya pada imej dengan sifat gaya padding-bottom:
gaya = "padding-bottom: 0.5em;" />
-
Kemudian tambahkan kapsyen teks secara langsung di bawah imej:
Muat naik laman web ke pelayan anda dan ujinya dalam penyemak imbas.
Petua Taip
- Dimensi CSS boleh dalam banyak ukuran yang berbeza, jadi biasanya anda mesti memasukkan jenis pengukuran. Sebagai contoh:
lebar: 100px; Walau bagaimanapun, dimensi imej HTML sentiasa dalam piksel, jadi anda meninggalkan pengukuran.
lebar = "100"
- Jika anda membuat lebar div lebih luas daripada lebar imej, keterangan boleh muncul di sebelah imej. Jika ini adalah apa yang anda mahu, kemudian tambahkan
tag terus sebelum kapsyen dan selepas tag imej.
