HTML’de Resim ve Yazı Ekleme: Kapsamlı Bir Kılavuz
HTML (HyperText Markup Language), web sayfaları oluşturmak için kullanılan bir işaretleme dilidir. Resimler ve metin, web sayfalarının temel bileşenleridir ve HTML’de bunları eklemek oldukça kolaydır. Bu makale, HTML’de resim ve metin ekleme konusunda kapsamlı bir kılavuz sağlayacaktır.
Resim Ekleme
HTML’de bir resim eklemek için <img> etiketini kullanırız. Bu etiket, aşağıdaki özniteliklere sahiptir:
- src: Resmin kaynağını belirtir.
- alt: Resmin alternatif metnini belirtir. Bu, resim görüntülenemiyorsa veya ekran okuyucular tarafından okunuyorsa görüntülenir.
- width: Resmin genişliğini piksel cinsinden belirtir.
- height: Resmin yüksekliğini piksel cinsinden belirtir.
Örneğin, aşağıdaki kod bir “logo.png” adlı resmi web sayfasına ekler:
html
<img src="logo.png" alt="Şirket Logosu">
Metin Ekleme
HTML’de metin eklemek için <p> (paragraf) etiketini kullanırız. Bu etiket, aşağıdaki özniteliklere sahiptir:
- align: Metnin hizalanmasını belirtir (sol, sağ veya ortalanmış).
- style: Metnin stilini belirtir (kalın, italik, altı çizili vb.).
Örneğin, aşağıdaki kod “Merhaba Dünya!” metnini web sayfasına ekler:
“`html
Merhaba Dünya!
“`
Resim ve Metni Birlikte Ekleme
Resimleri ve metni birlikte eklemek için <figure> ve <figcaption> etiketlerini kullanabiliriz. <figure> etiketi resmi içerirken, <figcaption> etiketi resmin açıklamasını içerir.
Örneğin, aşağıdaki kod bir “logo.png” adlı resmi ve “Şirket Logosu” açıklamasını web sayfasına ekler:
“`html
“`
Faydalı Siteler ve Dosyalar
- HTML Resim Etiketi Referansı
- HTML Paragraf Etiketi Referansı
- HTML Şekil Etiketi Referansı
- HTML Başlık Etiketi Referansı
Sonuç
HTML’de resim ve metin eklemek, web sayfaları oluşturmanın temel bir yönüdür. Bu kılavuz, bu görevleri gerçekleştirmek için gereken bilgileri sağlamıştır. Yukarıda verilen faydalı siteler ve dosyalar, daha fazla bilgi edinmek ve HTML becerilerinizi geliştirmek için ek kaynaklar sağlayacaktır.