HTML Resim ve Bağlantı(Link) Ekleme

iStock_000004926002XSmall-300x199

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

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 ;

<img src=”manzara.jpg” alt=”Manzaramız”  width=”50px” height=”60px” />

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.jpgolarak verilebilir. Fakat herhangi bir sitedeki resim eklenecekse sitenin adresi (http://….) 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. İD 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;

[stextbox id="alert"]
<html>
<head>
<title>Bağlantı Ekleme</title>
</head>
<body>
<a href="www.google.com" target="_blank"> Google sitesine gitmek için tıklayın </a>
</body>
</html>
[/stextbox]

 

–>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;

link

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:burak.kaplan> 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;

[stextbox id=”alert”]

<html>
    <head>
      <title>Sayfamızın içinde gezinme</title>
    <body>
      <p>
      <a name="top"></a>
      </p>
      <p>
       <a href="#bottom">Sayfa Sonuna Git</a> </br> Burası sayfamızın başı
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br />
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </p>
       <p><a href="#top">Sayfa Başına Git</a>
        <a name="bottom"></a>
        <br/> Burası sayfamızın sonu</p>
    </body>
</html>
[/stextbox]
 sayfasonu sayfabasi

You may also like...

1 Response

  1. tesekurler işime yaradı.

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.