HTML’de Div ve Resim Ekleme: Kapsamlı Bir Kılavuz
HTML (HyperText Markup Language), web sayfaları oluşturmak için kullanılan temel bir işaretleme dilidir. Div’ler ve resimler, web sayfalarının yapı taşlarıdır ve kullanıcı deneyimini geliştirmek için hayati önem taşır. Bu makale, HTML’de div ve resim ekleme konusunda kapsamlı bir kılavuz sağlayacaktır.
Div’ler
Div’ler, HTML’de bölümleri veya kapsayıcıları temsil eden bloklar oluşturmak için kullanılan öğelerdir. Web sayfalarını yapılandırmak, içerik düzenlemek ve stil uygulamak için kullanılırlar.
Div Oluşturma:
Bir div oluşturmak için <div> etiketini kullanın. Örneğin:
“`html
“`
Div’lere Sınıflar ve Kimlikler Ekleme:
Div’lere, stil uygulamak ve JavaScript ile etkileşime geçmek için sınıflar ve kimlikler ekleyebilirsiniz. Sınıflar, noktalı (.) ile başlarken, kimlikler ise keskin işaret (#) ile başlar. Örneğin:
“`html
“`
Resimler
Resimler, web sayfalarına görsel ilgi ve bilgi eklemek için kullanılır. HTML’de resimler <img> etiketi kullanılarak eklenir.
Resim Ekleme:
Bir resim eklemek için <img> etiketini kullanın ve src özniteliğine resmin yolunu belirtin. Örneğin:
html
<img src="image.jpg" alt="Resim Açıklaması">
Resim Öznitelikleri:
<img> etiketi, resmin görünümünü ve davranışını kontrol eden çeşitli özniteliklere sahiptir. En yaygın öznitelikler şunlardır:
- src: Resmin yolunu belirtir.
- alt: Resmin alternatif metnini belirtir (görüntülenemediğinde).
- width: Resmin genişliğini piksel olarak belirtir.
- height: Resmin yüksekliğini piksel olarak belirtir.
Div ve Resimleri Birlikte Kullanma
Div’ler ve resimler genellikle web sayfalarında birlikte kullanılır. Div’ler, resimleri düzenlemek ve stil uygulamak için kapsayıcılar olarak kullanılabilir. Örneğin:
“`html
“`
Bu kod, “image-container” sınıfına sahip bir div oluşturur ve içine “image.jpg” adlı bir resim ekler. Div’e bir sınıf eklemek, stil uygulamak için CSS kullanmanıza olanak tanır.
Faydalı Siteler ve Dosyalar
Sonuç
Div’ler ve resimler, HTML’de web sayfaları oluşturmak için temel öğelerdir. Bu öğeleri etkili bir şekilde kullanarak, iyi yapılandırılmış, görsel olarak çekici ve kullanıcı dostu web sayfaları oluşturabilirsiniz. Bu kılavuz, HTML’de div ve resim ekleme konusunda sağlam bir temel sağlamıştır.