Br internet sitesini yapmaya başlanıldığında olmaz ise olmazlardan bir tanesi de o internet sitesinde kullanacağınız görseller olacaktır. Bu görselleri sadece kullanmakla kalmayıp, boyutunu, yer konumunu, arama motorlara bu resimler hakkında bilgi vermekte sizin göreviniz olacaktır.

 

HTML’ye HTML5 resim etiketleri ile gelen tek yeni şey aslına bakarsanız <picture> etiketidir. Diğer etiketleri olduğu gibi kullanmanızda hiç bir sakında yoktur. Sizlere sırası ile resim etiketi eklerken neler yapılabileceğini, ne gibi özellikler eklenebileceğini göstereceğim.

 

 

HTML5 Resim Etiketleri Nelerdir ?

Şimdi ise sizlere HTML resim nasıl eklenir ve bu ekleyeceğimiz resim dosyasına ne gibi özellikler eklenebileceğini, sağ ve sol tarafa nasıl yaslanabileceği gibi çeşitli özelliklerden bahsedeceğim. Bunları incelemek için ise aşağıda oluşturmuş olduğum akordiyon menü sayesinde takip edebilirsiniz.

 

  • HTML Resim Eklemek

    İlk başta öğrenmemiz gereken şey ise HTML resim eklemek olacaktır. Hiç bilmeyen arkadaşlar için ise sıra sıra adımlar şeklinde giderek hem yeni bir şeyler öğretmek hemde öğrenilen şeylerin üzerine bir şeyler koymaya çalışacağız.

    <img src="resim-adi.jpg">

    Yukarıda yer alan kodu HTML kodlarınız arasından <body> kısmına eklediğinizde resim-adi.jpg dosya gözükecektir. Buraya bir url’den resim yolu yazabilir yada resim dosyanızın uzantısına göre adıyla beraberinde yazdığınızda kolaylıkla o internet sayfası içine ekleyebilirsiniz.

  • HTML Resim Alt Özelliği

    Şimdi ki özelliğimiz ise eğer görüntü ekranda gösterilmez ise bunun yerine gösterilecek resmi tanımlayan bir metin özelliğidir. Hem bu metin resmi tanımlar iken hemde ekleyeceğiniz resim hakkında arama motorlarına bilgi vererek resmin neyi ifade ettiğini belirtmektedir.

    <img src="resim-adi.jpg" alt="deneme resmi">

    Yukarıda yer alan şekilde kullanılır. Asıl amacı ise olası bir sorun ile karşılaşıldığında resmin yerine bu metin gösterilir. Bu sayede bazı uyumluluk sorunundan dolayı yüklenmeyen resimlerin yerinde bu yazı yer alır iken bir yandan da arama motorlarına bu resimde bu var şeklinde bilgilendirme işlemini yapar.

  • HTML Resmin Boyutunu Ayarlamak

    Sizi internet sitenizin her hangi bir sayfasında kullanacağınız bir resim için istediğiniz boyutta görüntülenmesini isteyebilirsiniz. Bunun için ise resme yükseklik ve genişlik değerleri eklemeniz mümkündür. Bu sayede seçtiğiniz resmi o boyutta görüntülenmesini sağlarsınız.

    <img src="resim-adi.jpg" width="500px height="500px">

    Yukarıda yer alan kod kullanıldığında resim 500 piksel  yüksekliğinde ve 500 piksel genişliğinde görünecektir. Piksel değerleri yerine yüzde değerlerini eklemekte mümkündür. Bu sayede resmin boyutuna göre o oranda büyültme yada küçültme işlemi sağlanabilir. HTML resim boyutu ayarlamak için ise diğer bir gösterim şeklide ise:

    <img src="resim-adi.jpg" style="width:500px;height:500px;">

    Yukarıda yer alan kodda still öznitelik ekleyerek HTML ile oluşturulacak internet sayfalarında resmin boyutunu ayarlayabilmek mümkündür.

  • HTML Resmi Arka Plan Yapmak

    İnternet sitesi yapar iken en çok dikkat etmeniz gereken özelliklerden bir tanesi de internet sitesinin arka planı yada her hangi bir metin oluşturduğunuzda onun arka planıdır. Yazıların arkasına yada tüm sitenin arkasına arka plan resmi ekleyerek görünümü güzelleştirebilirsiniz.

    <body style="background-image:url('arka-plan.jpg')">

    Yukarıda yer alan kısımda ki kodu <body> içine eklediğimiz için internet sitesinin arka plan resmi arka-plan.jpg isimli resim dosyası olacaktır. Arka plan resmi olarak ekleyeceğiniz her ne ise tamamen size kalmış bir durumdur. Durum böyle olunca sadece internet sitesinin arka planına değil her hangi bir etikete de bu sayede arka plan resmi ekleyebilirsiniz. Tek yapmanız gereken şey ise <body> yerine ekleyeceğiniz <p>,<h1> etiketi gibi ismini yazmanız yeterli olacaktır.

  • HTML Sayfada Resimleri Konumlandırma

    Küçükken proje ve performans ödevlerinde en çok kullandığımız özelliğin birine geliyoruz hazır mıyız ? Bir resmi paragrafın sol yada sağ tarafına koyarak ve yanından yazmaya başlamak göze hoş gelen ve iyi bir şekilde hitap eden bir görüntüdür. Sizde ekleyeceğiniz resmi paragrafın sol yada sağ tarafına yaslayabilirsiniz.

    <p><img src="gülücük.png" alt="Gülme Emojisi" style="float:right;width:50px;height:50px;"> Bu emoji geçtiğimiz günlerde WhatsApp'ta en çok gönderilen emoji ifadelerinin başında gelmektedir..</p>

    Yukarıda yer alan kodda still içine eklediğimiz float etiketi sayesinde bir resmi sola yada sağa yaslamak mümkündür. Left yada Right yazarak bu resmi konumlandırma işlemini gerçekleştirmeniz mümkündür.

  • HTML <picture> Etiketi Kullanımı

    HTML5, resim kaynaklarını belirtirken daha fazla esneklik sağlamak için <picture> öğesini tanıttı. <Picture> öğesi, her biri farklı görüntü kaynaklarına atıf yapan bir dizi <source> öğesi içerir. Tarayıcı, bu şekilde mevcut görüntü ve / veya aygıta en uygun görüntüyü seçebilir. Her <source> öğesi, imajının ne zaman en uygun olduğunu açıklayan niteliklere sahiptir. Tarayıcı, eşleşen özellik değerlerine sahip ilk <source> öğesini kullanacak ve aşağıdaki <source> öğelerini yoksayacaktır.  

    <picture> <source media="(min-width: 550px)" srcset="resim-1.jpg"> <source media="(min-width: 365px)" srcset="resim-2.jpg"> <img src="resim.jpg" alt="Flowers" style="width:auto;"> </picture>
      Yukarıda yer alan kod sayesinde 550 piksel genişliğinde resim-1.jpg resmi gösterilir iken 365 piksel bir genişlikte tarayıcıdan internet sitesine girildiğinde resim-2.jpg adlı resim gösterilecektir. Buda o boyutta giren kullanıcının aslında aynı resmi değil sunucunuz da bulunan o resmin daha küçültülmüş ve boyutunun az olduğu resmi görecektir. Bu özelliği ekleyerek mobil ve bilgisayardan giren kullanıcılara daha farklı boyutlarda resimler göstererek internet sitesinin yüklenme hızını azaltmış olursunuz.

  • HTML Resme Link Eklemek

    Bir önce ki yazılı ve videolu içeriğimiz de göstermiş olduğumuz HTML resme link ekleme özelliği aslında çok basittir. Bir önce ki dersimizden gelen kişiler aslına bakarsanız bir bakıma zaten bu etiketi biliyor ve tanıyor olacaktır. Eğer bir resme etiket eklemek istiyor iseniz aşağıda ki kodu kullanabilirsiniz.

    <a href="https://webdunya.com"><img src="resim.gif"></a>

    Yukarıda ki kod parçacığı kullanıldığında resim.gif ‘in üzerine tıklanıldığında yukarıda yazmış olduğumuz webdunya.com adlı adrese gidecektir. Bu sayede HTML ‘de resimlere link ekleyebilirsiniz.

 

Yukarıda yazılan kod parçacıkları sayesinde artık HTML resim kodlarını biliyor olacaksınız. Yukarıda yer alan kodları ancak ve ancak deneyerek öğrenebilirsiniz. Sizde yukarıda ki kodlara göz attıktan sonrasında ise yapmanız gereken işlem kendiniz denemeniz ve yukarıda yer olan kodları pekiştirmeniz gerekmektedir.

Gökmen Efsun {efsungokmen}

Teknoloji dünyası sınırsız bir alandır. Bu alanda bilgi paylaştıkça çoğalır.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir