Project Zeta – HTML 9 Resim Bağlama – Img Etiketi & Özellikleri


0

Merhaba.

HTML eğitimlerimize sayfalarımıza bir resim nasıl bağlanır konusuyla devam ediyoruz.

Yazılarımızda kullanıcılara resim göstererek içeriklerimizi güçlendirmek önemlidir. Ziyaretçilerin sıkılmadan yazdığınız makalelere odaklanmasını sağlarken sayfalarınızda daha fazla vakit geçirmelerini sağlayacaktır. 

Şimdi sayfamıza HTML de nasıl bir resim bağlayabileceğimize bakacağız.

Eklemek demiyoruz çünkü teknik olarak bir HTML dosyasına bir resim eklenmez resimler HTML sayfalarına bağlanır.<img> etiketi, başvurulan resim için bir adres tutma görevi görür.

WebMatrix’i açalım.

Proje yaparken düzenli çalışmanız önemlidir. Projenizin boyutu büyüdükçe düzenli olmanız size süreçlerinizi yönetmekte büyük kolaylıklar sağlayacaktır.

Şimdi öncelikle resimlerimizi projemize ekleyeceğimiz Image isimli bir klasör oluşturalım. Siz istediğiniz ismi verebilirsiniz. Önemli olan şudur, uzun zaman sonra baktığınızda ya da farklı geliştiriciler projenize dahil olduğunda sadece dosyalama sisteminizin bile geliştiriciye bir şeyler anlatabilmesidir.

HTML IMG Etiketi

Şimdi klasöre sağ tıklayıp Var Olan Dosya Ekle seçeneğini kullanarak bilgisayarınızda olan ve bu sayfada kullanmak istediğiniz bir kaç resim ekleyelim.

Farklı bir yöntemle direk resimlerinizi sürükleyip bu klasörün üzerine bırakarak da bu işlemi yapabilirsiniz.

HTML IMG Etiketi

Proje Klasörü Üzerinden Resim Bağlama

Bir HTML belgesine resim eklemek istiyorsak kullanmamız gereken etiket

<img src=”Resim Yolu”> </img>

budur.

Şimdi gelin bunu yapalım.

<img src=”/Image/Logo Site.png”> </img>

Burada img etiketi Image dan geliyor. 

src özelliği source kaynak kelimesinin kısaltması. Yani şunu ifade ediyor göstermem gereken resmin kaynağını gösterin.

En başa koyduğumuz / işareti daha öncesinin Kök Dizin olduğunu ifade eder. Oluşturduğumuz Image klasörü kök dizin içinde olduğu için / işaretinden sonra Image yazarak hangi klasöre gideceğini söylemiş olduk.

/Image/  daha sonra bu klasörün içinden bir resme ulaşacağımız için tekrar / işaretini koyduk ve siteye koymak istediğimiz resmin tam adını girdik. 

/Image/Logo Site.png

işte böylelikle adresi vermiş olduk.

Şimdi bir çalıştırıp bakalım.

Resmi ekledi.

Resim Boyutlandırma 

Ancak bir sorunumuz var resmi var olan boyutuyla olduğu gibi ekledi. Biz bunu logo olarak eklemek istiyoruz ve istediğimiz boyutlarda olsun istiyoruz.

Bunun için width ve height özelliklerini kullanacağız.

İstediğimiz boyuta getirmiş olduk.

Alt Özelliği

Yukarıdaki kodlamayı yaptığınız andan itibaren eğer WebMatrix kullanıyorsanız img elementinin altı çizili ve hata bölümünde ” Element ‘img’ is missing required attribute ‘alt’. “ şeklinde bir hata mesajı alıyor olmalısınız.

Buraya gelmişken kullandığım kelimelerin HTML dilinde ingilizce karşılıklarını da paylaşmış olayım.

Tag yada Etiket dediğimiz kavramlar elementtir.

Bu elementler içinde bulunan özelliklerimiz de attribute’dur

Hata da şunu diyor ımg elementine ait olması zorunlu olan alt özelliği tanımlanmamış.

Alt özelliği HTML 5 ile beraber zorunluluk haline gelmiştir. 

Nedeni de şudur.

Google gibi arama motorları resimlerinizin ne ile alakalı olduğunu alt özelliğine yazdığınız isimlendirme ile anlarlar. Bu yüzden SEO içinde çok önemlidir. HTML ile ilgili yazdığım bu yazıda kullandığım resimlere HTML ve dersin içeriği ile alakalı bir alt metni girdiğimde Google görsellerde arama yapıldığında bu resmin çıkma olasılığı da artar. Bu sayede de kişilerin sizin sayfanıza ziyaret etme olasılığı da artar.

Şimdi bu özelliği kullanalım.

Kullandığım resim Industryolog logosuydu ve alt bilgisinde bunu belirttim. 

Şu an da var olan hatanında gitmiş olduğunu görüyor olmalısınz.

Resim Konumlandırma

HTML 5 ile beraber gelen özelliklerle resimleri kendi elementi içinde yazabildiğimiz özelliklere konumlandırma özellikleri kaldırıldı. İçerik konumlandırma konusunu <div> elementini anlatırken yazacağım.

Farklı Web Sayfasından Link Verme

Resimleri indirip kendi proje dosyamıza ekleyebileceğimiz gibi farklı sayfadaki bir resmin linkini de yol olarak göstererek sayfamızda o resmi kullanabiliriz.

Ben ana sayfamız üzerindeki DNA logomuzun adresini şimdi projemize vereceğim.

Bunun için yapmanız gereken herhangi bir internet sayfası üzerinde bulunan resmin üzerine Sağ Tıklayıp >> Görsel Adresini Kopyala sekmesine tıklamaktır.

src özelliğine bu adresi yazalım.

Resme Link Verme

Sıklıkla gördüğünüz işlemlerden biri de resmi bir link haline getirmektir. Özellikle indirme işlemi yapacağınız sitelerde resimlerin üzerine tıklayarak indirme işlemi yaptırır sayfalar. Hem görselliği artırır hem de gözden kaçmasını önlemiş olurlar. Dikkat çekmek için önemli bir unsurdur. Aynı şekilde o resme tıklayarak farklı sayfaya yönlendirme gibi işlemlerde yapılabilmektedir.

Şimdi bunu yapacağız.

Bir önceki derstende bildiğiniz gibi <a href=””></a> etiketleri link vermek için kullanılıyordu. Linkin görünen hali de etiketin arasına yazdığımız ifadeydi.

Şunu düşünelim yazmamız gereken metin bölgesine yazı yerine img etiketiyle resmi göstersek, böylece resim bir link özelliği kazanmış olmayacak mı? Denemesi bedava. 

Bu dersimizde bu kadardı. Bir sonraki yazımda görüşmek üzere.

 


Like it? Share with your friends!

0
muratbilginer

0 Comments

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