HTML'de img Etiketi ile Web Sitesine Resim Ekleme ve Optimizasyon Teknikleri
Bu eğitim amaçlı projede, HTML kodlama dilinde img src etiketi kullanılarak web sitesine resim eklenmektedir. HTML (Hypertext Markup Language), web sayfalarının yapısını tanımlamak için kullanılan temel bir işaretleme dilidir ve metin, resim, video gibi içeriklerin düzenlenmesine olanak tanır. Görsel içeriklerin web sitelerinde etkili bir şekilde kullanılabilmesi için img etiketi büyük önem taşır. Bu etiket, sayfada görüntülenecek resmin kaynağını belirtmek amacıyla src (source) özniteliğini kullanır. Bu öznitelik, resmin URL'sini veya dosya yolunu içerir ve tarayıcı bu bilgiyi kullanarak resmi yükler ve görüntüler. ## Resim Eklemenin Önemi Web sitelerinde resim kullanmanın birçok avantajı bulunmaktadır. Öncelikle, görseller kullanıcıların dikkatini çeker ve içeriği daha ilgi çekici hale getirir. İyi seçilmiş görseller, metinle birlikte kullanıldığında, okuyucunun ilgisini artırabilir ve bilgiyi daha anlaşılır kılabilir. Ayrıca, resimler, ürünlerin tanıtımı, hizmetlerin gösterimi veya bir hikaye anlatımı gibi çeşitli amaçlarla kullanılabilir. ## img Etiketinin Kullanımı HTML'de img etiketi kullanılırken, yalnızca src özniteliği değil, aynı zamanda alternatif metin (alt) özniteliği de eklenmesi önerilir. Alt metin, resmin yüklenememesi durumunda görüntülenecek metni tanımlar ve görme engelli kullanıcılar için erişilebilirlik sağlar. Örneğin: ```html ``` Bu örnekte, "resim.jpg" dosyası web sayfasında görüntülenecek resmin kaynağını belirtirken, "Açıklayıcı metin burada yer alır" kısmı, resmin içeriğini tanımlayan metni içerir. ## Resim Boyutları ve Performans Web sitelerinde kullanılan resimlerin boyutları da oldukça önemlidir. Büyük boyutlu resimler, sayfa yükleme sürelerini olumsuz etkileyebilir ve kullanıcı deneyimini düşürebilir. Bu nedenle, resimlerin uygun boyut ve formatta kullanılması önerilir. Genellikle JPEG, PNG ve GIF gibi formatlar tercih edilir. Resimlerin boyutunu optimize etmek, web sayfasının performansını artırmak için kritik bir adımdır. ## Sonuç Sonuç olarak, HTML kodlama dilinde img src etiketi kullanarak web sitesine resim eklemek, web tasarımının temel unsurlarından biridir. Görsel içeriklerin etkili kullanımı, kullanıcı deneyimini zenginleştirirken, sayfanın estetik açıdan daha çekici hale gelmesine yardımcı olur. Bu projede, img etiketinin doğru kullanımı ve resim optimizasyonu gibi konular üzerinde durulması, katılımcıların web geliştirme becerilerini geliştirmelerine katkı sağlayacaktır.
Proje Kodu:
<html>
<head>
<title>HTML Örnek Projeler</title>
</head>
<body>
<img src="file:///C:/Users/Robotoryo/Desktop/preview.jpg" width="600" height="600">
</body>
</html>