HTML Görüntüleri Nedir ve Web Sayfanız Nasıl Değiştirilir?

Bu makale size ayrıntılı ve kapsamlı bir HTML Görüntüleri bilgisi ve web sayfanızın güzel görünmesi için bunları nasıl ekleyip değiştiremeyeceğinizi sağlayacaktır.

Görseller, bir web sayfasının görünümünü iyileştirdiği ve müşteri etkileşimini artırdığı için web sayfasının çok önemli bir parçasıdır. Birden fazla web sitesinin USP'si, web sayfalarında farklı görüntüleri nasıl düzenledikleri ve ona tatlar nasıl ekledikleri ile ilgilidir. Bunda Görseller makalesinde, aşağıdaki sırayla HTML kullanarak bir web sayfasına görsellerin nasıl yerleştirileceğini anlayacağız:



HTML'de Görüntü Nasıl Eklenir

Bir web sayfasına bir görüntü yerleştirmek için HTML size etiket. Hatırlanması gereken bir diğer önemli nokta ise, kapanış etiketi yok. scr öznitelik, sistemden / sunucudan bir url veya görüntü yolu olabilen görüntünün yolunu belirtmek için kullanılır. Önce HTML kullanarak bir web sayfasına resim yerleştirmenin temel sözdizimi ile başlayalım.



Sözdizimi

img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>

Basit kod



HTML Görüntülerini Web Sayfasına Gömme  

Diğer etiketlere benzer şekilde, ile ilişkili çeşitli öznitelikler vardır. etiket. Her birine tek tek bakalım, ihtiyaçlarını ve nasıl kullanılacağını anlayalım.

HTML Görüntü Etiketleri

  • alt Attribute

Alt özelliği, bir resmin alternatif metnidir. Alt özniteliğinin kullanılmasının nedeni, görüntünün herhangi bir nedenle yüklenememesi durumunda görüntü hakkında fikir veren alternatif bir metnin görünmesi gerektiğidir. Resmin yüklenmemesinin nedenleri, yavaş internet bağlantısı veya resim sağlanan kaynakta yer almıyor olabilir vb. Olabilir.



Görüntü, HTML dosyasının bulunduğu klasörün içinde bulunuyorsa, dosyanın adını doğrudan belirtebilirsiniz. Aksi takdirde, görüntü dosyasının mutlak yolunu sağlamanız gerekir.

Alt özelliğinin değeri, resmi açıklamalıdır.

Misal

 Edureka Logosu
HTML Görüntülerini Web Sayfasına Gömme edureka logosu 

salesforce'da uygulama nasıl oluşturulur
  • Bir Görüntünün Genişliği ve Yüksekliği

Stil niteliği, bir görüntünün yüksekliğini ve genişliğini ayarlamak için kullanılır. Stil niteliğinde CSS stilini belirtirsiniz.

HTML Görüntülerini Web Sayfasına Gömme  

HTML kullanarak bir web sayfasına bir görüntü yerleştirirken önemli noktalardan bazıları şunlardır:

  • Genişlik ve yükseklik nitelikleri piksel cinsinden tanımlanır.
  • Bir görüntünün genişliğini ve yüksekliğini yüzde olarak da tanımlayabilirsiniz. Yüzdeyi tüm web sayfasına göre dikkate alacaktır.
   
  • Yalnızca birini belirtirseniz, diğerini buna göre ayarlar.
  • URL kullanarak Görüntüleri Gömme

HTML ayrıca, görüntüyü başka bir sunucudan yalnızca URL'yi belirterek seçebileceğiniz esneklik de sağlar. Görüntüleri barındırmak ve ardından bu görüntüleri URL kullanarak yerleştirmek için ayrı bir sunucu kullanabilirsiniz.

HTML Görüntülerini Web Sayfasına Gömme  

  • Bağlantı Olarak Görüntü

Resmi, kullanıcının resme tıklayıp yeni bir web sayfasına gidebileceği bir bağlantı olarak da kullanabilirsiniz. Bunu yapmak için, sadece gün içinde etiket.

HTML Görüntülerini Web Sayfasına Gömme  

CSS float özelliğini kullanarak da görüntünün hizalamasını ayarlayabilirsiniz. Tüm CSS özelliğinin stil özniteliğinde belirtilmesi gerekir.

HTML Resmi Resim, metnin sağında kayar. Resim, metnin solunda yüzer.

Bu, HTML tarafından sağlanan önemli özelliklerden biridir. etiketi bir görüntü haritasının tanımlanmasına yardımcı olur. Bir görüntü haritasının ne olduğunu merak ediyor olmalısın. Bir resim haritası, tıklanabilir alanlara sahip bir resimdir

HTML Resmi  

Ayrıca bir web sayfasına arka plan resmi de ekleyebilirsiniz. Stil etiketinde CSS özelliğini, yani arka plan resmini kullanmanız ve bunu HTML öğesine eklemeniz yeterlidir.

HTML Resmi

Arka plan görüntüsü

BODY öğesi

java'da tarayıcı sınıfı nasıl kullanılır

Bununla bu HTML Görseller Blogunun sonuna geldik.Şimdi yukarıdaki parçacıkları çalıştırdıktan sonra, HTML'ye nasıl resim ekleneceğini anlamış olacaksınız. Umarım bu blog bilgilendirici ve size değer katar.

Göz atın eğitmen liderliğindeki canlı eğitim ve gerçek yaşam proje deneyimi ile birlikte gelir. Bu eğitim, sizi arka uç ve ön uç web teknolojileriyle çalışma becerilerinde uzman hale getirir. Web Geliştirme, jQuery, Angular, NodeJS, ExpressJS ve MongoDB eğitimlerini içerir.

Bizim için bir sorunuz mu var? Lütfen 'HTML Görseller' blogunun yorumlar bölümünde bahsedin, size geri döneceğiz.