Yanyana Resim ve Yazı Ekleme: HTML ve CSS ile Kolay Bir Kılavuz
Bir web sayfasına resim ve metni yanyana yerleştirmek, görsel ilgi çekiciliği artırmak ve içeriğinizi daha ilgi çekici hale getirmek için yaygın bir tekniktir. HTML ve CSS kullanarak bunu kolayca başarabilirsiniz.
HTML Yapısı
Resim ve metni yanyana yerleştirmek için öncelikle bir HTML yapısı oluşturmanız gerekir. Bunun için aşağıdaki kodu kullanabilirsiniz:
“`html
Başlık
Metin içeriği
“`
Bu kod, iki div öğesi içeren bir üst div öğesi oluşturur. İlk div öğesi (image) resmi içerirken, ikinci div öğesi (text) metin içeriğini içerir.
CSS Stilleri
HTML yapısını oluşturduktan sonra, resim ve metni yanyana yerleştirmek için CSS stilleri uygulamanız gerekir. Aşağıdaki CSS kodunu kullanabilirsiniz:
“`css
.container {
display: flex;
flex-direction: row;
}
.image {
width: 50%;
}
.text {
width: 50%;
padding: 20px;
}
“`
Bu CSS kodu, üst div öğesine (container) esnek bir düzen uygular ve esnek öğelerin yatay olarak sıralanmasını sağlar. Ardından, resim div öğesine (%50 genişlik) ve metin div öğesine (%50 genişlik ve 20 piksel dolgu) boyutlar uygular.
Örnek
Yukarıdaki HTML ve CSS kodlarını bir araya getirerek aşağıdaki örneği oluşturabilirsiniz:
“`html
Başlık
Metin içeriği
“`
Bu örnek, resim ve metni yanyana yerleştiren bir web sayfası oluşturacaktır.
İpuçları
- Resim ve metnin boyutlarını ve konumunu ayarlamak için CSS stillerini kullanın.
- Resim ve metin arasında boşluk bırakmak için dolgu veya kenar boşluğu kullanın.
- Resim ve metnin duyarlı olmasını sağlamak için yüzde birimleri kullanın.
- Erişilebilirlik için resim açıklamaları ekleyin.