9 Basit Adımda Web Görsellerine HTML Altyazıları ekleyin
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.
Bir HTML Resim Yazısına 9 Adım
Bir resme altyazı ekleyin ve istediğiniz yerde bir araya getirin:
- Web sayfanıza bir resim ekleyin .
- Web sayfanızın HTML'sinde, resmin etrafında bir div etiketi yerleştirin:
- Div etiketine bir style niteliği ekleyin:
style = "" >- Genişlik stili özelliği ile div genişliğini görüntü ile aynı genişliğe ayarlayın:
width: image width px; ">- Çevredeki metinden biraz daha küçük olan altyazılar için div stiline bir font boyutu özelliği ekleyin:
font-size: 80%; ">- Altyazılar, resmin altında ortalanmışlarsa daha iyi görünürler. Bu nedenle, stil niteliğine bir metin hizalama özelliği ekleyin:
text-align: center; " << img src = "URL" alt = "alternatif metin" genişlik = "genişlik" yükseklik = "yükseklik" />- Son olarak, resim ve altyazı arasında, dolgu alt alt stil özelliğine sahip görüntüye stil niteliği ekleyerek biraz fazladan boşluk ekleyin:
style =" altlık doldurma tabanı: 0,5em; " /> - Ardından metin başlığını resmin hemen altına ekleyin:
Bu benim altyazımdır Web sayfasını sunucunuza yükleyin ve bir tarayıcıda test edin.
Altyazı İpuçları
- Genişlikler : CSS boyutları birçok farklı ölçümde olabilir, bu yüzden genellikle ölçüm türünü içermelisiniz. Örneğin: genişlik: 100 px ; 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. İstediğiniz şey buysa, resim yazısı ve resim etiketinden hemen önce bir
etiketi ekleyin.
- Div etiketine bir style niteliği ekleyin: