Görüntüler web sayfalarınıza hayat katıyor ve izleyicilerin dikkatini çekiyor. Altyazılar web görselleriniz hakkında ek bilgi sağlar, ancak gelişmiş HTML ve CSS becerileri olmadan web sayfalarına eklemek zor olabilir. Burada, web sayfası üzerinde taşıdığınız her yerde, resimle kalan bir görüntüye basit, ancak çekici bir resim yazısı eklemek için güvenilir bir yöntem.
HTML Resim Altyazısı Adımları
-
Web sayfanıza bir resim ekleyin.
-
Web sayfanızın HTML'sinde, resmin çevresine bir div etiketi yerleştirin:
-
Div etiketine bir stil özelliği ekleyin:
style = ""> -
Genişlik stili özelliği ile div genişliğini görüntü ile aynı genişliğe ayarlayın:
-
Çevredeki metinden biraz daha küçük olan altyazılar için div stiline bir font boyutu özelliği ekleyin:
-
Altyazılar, resmin altında ortalanmışlarsa en iyi görünür. Bu nedenle, stil özelliklerine bir metin hizalama özelliği ekleyin:
-
Son olarak, resim ile altyazı arasında, dolgu stili alt stili özelliği ile resme bir stil özelliği ekleyerek biraz fazladan boşluk ekleyin:
style = "padding-bottom: 0.5em;" />
-
Ardından metin başlığını resmin hemen altına ekleyin:
Web sayfasını sunucunuza yükleyin ve bir tarayıcıda test edin.
Altyazı İpuçları
- CSS boyutları birçok farklı ölçümde olabilir, bu yüzden genellikle ölçüm türünü içermelisiniz. Örneğin:
genişlik: 100px; Bununla birlikte, HTML resim boyutları her zaman piksel cinsinden olur, bu nedenle ölçümü kapatırsınız.
genişlik = "100"
- Div genişliğini görüntü genişliğinden daha geniş yaparsanız, resim resmin yanında görünebilir. Eğer istediğin buysa, o zaman
altyazının hemen önüne ve resim etiketinin arkasına yapıştırın.
