Anasayfa / Html / Html Resim ve Bağlantı (Link) Ekleme

Html Resim ve Bağlantı (Link) Ekleme

Html sayfanıza resim eklemek ya da link vermek istediğinizde kullanmanız gereken etiketlerden bahsedeceğim ve örnekle anlatacağım.

HTML RESİM EKLEME

Bir resmi html sayfamıza eklemek için kullanacağımız etiket <img> dir. Bu etiketin birkaç özelliği vardır

src => Ekleyeceğimiz resmin yolu yazılır
alt => Resmin üstüne geldiğimizde çıkacak yazı yazılır
height => Resmin yüksekliği girilir (piksel cinsinden)
width => Resmin eni girilir (piksel cinsinden)
border => Resme çerçeve eklersek,çerçevenin kalınlığı yazılır (piksel cinsinden)

Bu özelliklerin kullanımına örnek olarak ;

Bu kodda resmimizin genişliği,yüksekliği,yolu ve açıklama kısmı belirtildi   Buradaki manzara.jpg adresi,html dosyalarımızın olduğu klasörde ise resmimizin adresi doğrudan manzara.jpg olarak verilebilir.Fakat herhangi bir sitedeki resim eklenecekse sitenin adresi (https://….) verilmelidir

BAĞLANTI EKLEME

Bağlantı derken neyi kasdediyoruz önce onu açıklayalım. Aşağıdaki gibi üzerine tıklandığında belirtilen adrese giden yapılardır

ÖRNEK : Google adresine gitmek için tıkla Bunu html kodları ile yapmak istersek kullanacağımız etiket <a> dır.Bu etiket açıldığında kapatılması gerekir  (</a> ) . Bu etiketin de kendine has özellikleri bulunmaktadır. Bunları aşağıda inceleyelim;

href => En önemli özelliktir.Gidilecek sayfanın adresi belirtilir.Başka sitelere gitmekle beraber,içinde bulunduğumuz sayfanın en altına veya en üstüne de gidilebilir.Bunun için #adres yapısı kullanılır

name =>Bağlantımıza verilecek özel bir isimdir. ID gibi düşünebiliriz.Özel erişimlerde kullanılır

target =>Bağlantımızın yeni sekmede mi yoksa  içinde bulunduğumuz sitenin yerine mi açılacağını gösterir   Bu anlattığımıza örnek verelim;

–>target  kısmına “_blank” yazarsak yeni sekmede açacaktır.  target=”_self “ yazarsak aynı pencerede açacaktır Buradaki kod parçasını Notepad programında yapıştırıp,uzantısını .html olarak kaydederseniz üzerine tıkladığınızda aşağıdaki çıktıyı elde edeceksiniz.

 

 

Ek Bilgiler : –>Yazımızın altındaki çizgiyi kaldırmak istersek  <a> etiketinin özellik kısmına style=”text-decoration: none”  eklemeliyiz

–>Link rengini değiştirmek istiyorsak <body> etiketinin özelliklerine link=”renk_adi” kısmını eklemeliyiz.Yani <body link=”red”> yaparsak linklerimiz kırmızı renkli olacaktır

–>İmlecimizi linkin üzerine getirdiğimizde veya linkten ayırdığımızda,link renginin değişmesini istiyorsak <a> etiketinin özelliklerine onmouseover=”this.style.color=’red'” onmouseout=”this.style.color=’green'” kodunu ekleyelim

–>Link değil de mail yollamak istiyorsak <a href=mailto:mehmet.kirazli> Mail göndermek için TIKLA </a> etiket yapısını kullanmalıyız

Bağlantı ekleme konusunda eklenecek linkin yeni bir sayfaya gitmesine örnek verdik. Şimdi,aynı sayfa içinde sayfanın en altına veya en üstüne gitmesine örnek verelim;

Sayfamızın en altına gitmek için sayfamızda en alta kadar boşluk koymamız gerekiyor ki bastığımızda en alta gitsin ve en alttaki linke tıkladığımızda da en üste gidebilsin.Bunun için yazdığımız kod şu şekilde olacaktır;

Mehmet Kirazlı

İstanbul Eyüp'te ikamet ediyorum. Giresun Alucra'lıyım. Bilgisayar Mühendisliği bölümünden 2013 yılında mezun oldum. "Yeni Başlayanlar için Java 8" kitabının yazarıyım. Şu anda özel bir firmada Mobil Yazılım Geliştirme Uzmanı olarak çalışıyorum.

İlginizi Çekebilir

html dersleri

Html Listeleme Yapısı

Yapacağımız html sayfalarında bazı yazılarımızı maddeler halinde listelemek isteyebiliriz. Yazacağımız listeyi sıralı ve sırasız olarak …

25 Yorumlar

  1. tşk ler paylaşım için

  2. gerçekten güzel paylaşım aramaktan iyidir herkes böyle olsa 🙂

  3. gercekten cok acıklayıcı ve güzel bir site

  4. Faydalı paylaşım. Faydalı Bilgi. Emeğiniz için teşekkürler

  5. süper wep siteniz var

  6. Peki Mehmet Bey, bu göstereceğimiz resim ftp de bulunan images klasöründeyse nasıl yapacağız?

  7. harika teşekkürler

  8. Abi siteye girince beli bir süre bekliyip link e tıklama kodunu paylaşırmısın

  9. cok bilgilendirinci begendim zevkle okudum emegi gecene tesekkurler

  10. Petek Temizleme

    Bilgiler için teşekkür ederim.

  11. bilgiler için teşekkürler pekiştirici oldu

  12. çok teşekkürler bilgilendirici oldu

  13. ŞişliGünlükEv

    Merhabalar siteniz çok faydalı bilgiler verdi emeği geçen herkese çok teşekkür eder başarılarınızın devamını dileriz.

  14. istanbul şehirlerarası nakliyat

    merhaba çok güzel olmuş

  15. Faydalı bilgiler için teşekkürler.

  16. wep siteniz çok güzel

  17. başka sayfadaki resmi bilgisayarıma kaydetmeden oluşturduğum sayfaya nasıl çekebilirim?

  18. Tavsiyelerini için teşekkür ederiz Bilgi paylaştıkça büyür. Kolay Gelsin.

  19. Merhabalar bir blog sayfası açmak istiyorum ve sayfalar arası yönlendirmeler yapmak için (Sayfaya gitmek için buraya tıklayınız gibi) ne yapmam gerekiyor. Bu konuyla ilgili bir yazınız var mı acaba ?

  20. Yeni Yetme Yazılımcı

    Hocam merhabalar, resim e tıkladığımza bir siteye gitmek istiyorsak yani resim e bağlantı eklemek istiyorsak ne yapmalıyız ?

Bir cevap yazın

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