Html Resim Ekleme Ve Boyutlandırma
Resimler, web sitesi tasarımında önemli bir rol oynar. Bir resmi web sayfasına eklemek ve boyutlandırmak, kullanıcı deneyimini iyileştirme, görsel çekicilik sağlama ve içeriği daha etkileyici hale getirme açısından büyük önem taşır. Bu makalede, html kullanarak resim ekleme ve boyutlandırma işlemlerini nasıl gerçekleştirebileceğinizi açıklayacağım.
Öncelikle, bir resmi web sayfasına eklemek için etiketini kullanırız. Bu etiket, “src” özelliği ile resmin kaynak dosyasını belirtir. Örneğin,
şeklinde bir kod ile “resim.jpg” adlı bir resmi web sayfasına ekleyebilirsiniz.
Ancak, tek başına bir resim eklemek yeterli değildir. Resim boyutunu da ayarlamak gereklidir. Bu, hem görsel olarak hoş bir görünüm sağlamak hem de sayfa yüklenme hızını iyileştirmek için önemlidir.
Resmin boyutunu ayarlamak için, html’de “width” ve “height” özelliklerini kullanırız. Örneğin, şeklinde bir kod ile resmin genişliği 400 piksel, yüksekliği ise 300 piksel olarak ayarlanır.
Ancak, resmi boyutlandırmak için sadece piksel cinsinden ölçüler kullanmak pratik olmayabilir. Bu nedenle, çoğu durumda resim boyutlandırmak için yüzdelik bir değer kullanmak daha uygundur. Örneğin, şeklinde bir kod ile resmi genişlik ve yükseklik değerlerinin yüzde 50’si kadar boyutlandırabilirsiniz.
Ayrıca, resmin hizalamasını da belirlemek isteyebilirsiniz. Bunun için “align” özelliğini kullanabilirsiniz. Örneğin, şeklinde bir kod ile resmi sağa hizalayabilirsiniz. Bu, resmin metin ile uyumlu bir şekilde sayfa üzerinde yerleştirilmesini sağlar.
Son olarak, resimlere alternatif metin eklemek de önemlidir. Bu, görüntü yüklenemediğinde veya tarayıcı görme engelli kullanıcılar için yardımcı bir metin sağlamak için yapılır. Alternatif metni eklemek için “alt” özelliğini kullanırız. Örneğin, şeklinde bir kod ile resme “Hoş geldiniz!” alternatif metni ekleyebilirsiniz.
Bu makalede, html kullanarak resim ekleme ve boyutlandırma işlemlerini öğrendiniz. Resimlerin web sitesi tasarımında önemi büyüktür ve doğru bir şekilde eklenip boyutlandırıldığında büyük bir etki yaratabilirler. HTML’nin bu basit işaretleriyle, resimleri sayfanızda güzel bir şekilde göstermek için ihtiyacınız olan temel bilgilere sahipsiniz.
