Bu yazı, bir resmin altına resim yazısı yazma hakkında açıklamaktadır.
Bir Resmin Altına Başlık Nasıl Yazılır?
Bir resmin altına başlık yazmak için aşağıda belirtilen farklı yöntemleri sağlayacağız:
- Yöntem 1: HTML Kullanarak Resim Altyazısı Nasıl Eklenir?
” Unsur mu? - Yöntem 2: “ Kullanarak Resim Altyazısı Nasıl Eklenir? ” Unsur mu?
Yöntem 1: HTML “
” Öğesini Kullanarak Resim Yazısı Nasıl Eklenir? Resim yazısı eklemek için aşağıdaki talimatları izleyin:
- İlk olarak, “ <şekil> ” potansiyel olarak isteğe bağlı bir başlık ile kendi kendine yeten içeriği temsil etmek için kullanılan öğe.
- Ardından, bir “
'paragrafın içindeki etiket' ' etiket. “ kullanarak görüntüyü ekleyin kaynak ' bağlanmak. “ her şey ” özelliği, resim herhangi bir nedenle görüntülenmediyse eklenen içeriği gösterir.
- Görüntü genişliğini “ olarak ayarlayın. 200 piksel ”.
- Sonra '
” etiketi görsele başlık eklemek için kullanılır. Ayrıca, başlığı “ ” etiketlerinin arasına ekleyin:
= 'TSL.png' her şey = 'TSL İçerik Oluşturucuları' Genişlik = '200' >
>Belirtilen başlığa sahip görüntünün görüntülendiğini görebilirsiniz:
Şimdi, CSS kullanarak resim yazısı eklemek için ikinci yönteme geçin.
Yöntem 2: “
” Öğesini Kullanarak Resim Yazısı Nasıl Eklenir?Resim yazısı eklemek için “
” öğesi, verilen talimatları deneyin:
- Oluşturmak ' ” kapsayıcısını açın ve “ adında bir sınıf özelliği ekleyin. görüntü tutucu ”.
- Başlık etiketi ekle ' ” başlığı eklemek için ve başlığı tercihinize göre şekillendirin.
- Başka bir '
' öğesi ekleyin ve bir '” ile birlikte etiketleyin kaynak ”, “ her şey ' ve ' Genişlik ” div kabı arasındaki öznitelikler.
- “ sınıf adıyla üçüncü bir “
” ekleyin. resim yazısı ”. Ardından, başlığı “” etiketleri arasına girin. Ayrıca, “
” elemanı bir satır sonu eklemek için kullanılır:= 'resim tutucu' >
= 'renk:rgb(95, 31, 245)' > HTML Resmi >
= 'TSL.png' her şey = 'TSL İçerik Oluşturucuları' Genişlik = '200' >
= 'img yazısı' >
>
>Resim yazısının başarıyla eklendiği görülmektedir:
Şimdi özellikleri uygulamak için CSS bölümüne geçelim.
CSS'de “.image-holder” stili
İlk olarak, “
'sınıfı olan öğe' .resim tutucu ”. Ardından, aşağıdaki CSS özelliklerini uygulayın: .resim tutucu {
durum : akraba ;
yükseklik : 100 piksel ;
Genişlik : 200 piksel ;
marj : Oto ;
}Yukarıda bahsedilen özelliklerin detayları aşağıda açıklanmıştır:
- “ durum ”, “ olarak ayarlanır akraba ”, tıpkı statik değer gibi, belgenin akışında kalan bir öğenin orijinal konumunu belirtmek için.
- Sonra, ' yükseklik ”, eleman yüksekliğini tanımlamak için kullanılır.
- “ Genişlik ” özelliği, elemanın genişliğini belirtir.
- “ marj ”, “ olarak ayarlanır Oto ” elemanın etrafındaki boşluğu otomatik olarak ayarlamak için.
CSS'de Başlık Stili
Bu adımda, “ isimli iki sınıfa erişeceğiz. görüntü tutucu ' ve ' resim yazısı ” ve aşağıdaki CSS özelliklerini uygulayın:
.resim tutucu .img yazısı {
durum : mutlak ;
Metin hizalama : merkez ;
yazı tipi ağırlığı : gözü pek ;
Genişlik : 200 piksel ;
yükseklik : 50 piksel ;
ayrıldı : 0 piksel ;
renk : #f80909 ;
arka fon : rgb ( 140 , 166 , 253 ) ;
}Yukarıda belirtilen özelliklerin açıklaması aşağıdaki gibidir:
- “ Metin hizalama ” özellik “ olarak ayarlandı merkez ” metin konumunu merkezde hizalamak için.
- Sonraki, ' yazı tipi ağırlığı ”, “ olarak tahsis edilir gözü pek ” görüntü yazısı yazı tipini ayarlamak için.
- Sonra ' renk ” özelliği, erişilen öğenin rengini ayarlamak için kullanılır.
- “ arka fon ” özelliği, öğe arka planının rengini ayarlar.
- “ dahil olmak üzere diğer özellikler durum ”, “ yükseklik ', ve ' Genişlik ” ayrıca ilgili işlevleri uygulamak için de kullanılır.
Çıktı
Bir görselin altına yazı yazma yöntemlerini tartıştık.
Çözüm
Bir resmin altına başlık yazmak için kullanıcılar '
” eleman veya basit bir “ ” konteyner. “” kullanmak için önce “ Görüntüyü ' içine gömmek için ' öğe <şekil> ” öğesi, ardından “
” öğesini kullanın ve etiketleri arasına bir başlık ekleyin. İkinci yaklaşımda, kullanıcılar basitçe ' ” öğesini seçin ve başlığı güzelleştirmek için farklı CSS özellikleri uygulayın. Bu yazı, bir resmin altına resim yazısı yazmanın yöntemlerini gösterdi.