16 – Html Link – Bağlantı Oluşturma

Html sayfasında bağlantı (link) oluşturmak için <a> etiketini kullanırız. Bu html elemanı sayesinde iç veya dış sayfaya bir köprü, bağlantı yani link oluşturmamız sağlanır.

Kullanım şekli:

<a href="hedef url"> Bağlantı Metni</a>

aldığı href attribute sayesinde bağlantı kurulacak hedef belirlenir.

Etiketlerin içerisine yazılan metin kullanacının göreceği kısımdır.

Etiketlerin içerisindeki bağlantı metnine tıklamak, okuyucuyu belirtilen hedef URL adresine gönderecektir.

 <a href="https://www.yazilimdili.net"> Yazılım Dili Web Sayfası </a>

Link Tarayıcı Varsayılanı

Bir link oluşturulduğunda tarayıcılarda varsayılan özelliklere göre şekillenir.

• Ziyaret edilmemiş bir link altı çizgili ve mavi renktedir.
• Ziyaret edilen bir link altı çizgili ve mor renkte olacatır.
• Tıklanırken yani etkin bir bağlantının altı çizili ve kırmızı renk olur.

Html Link Target Attribute (Bağlantının hedef Özelliği)

Bir bağlantı oluşturulduğunda hedef url’nin farklı şekillerde açılmasını sağlar.

Varsayılan olarak hedef url aynı web sayası içerisinde açılacaktır.

Target attribute hedef url’nin nerede açılacağını belirtir:

• _self Varsayılan özelliktir. Bağlantı tıklandığında aynı pencerede açar.
• _blank Sayfayı yeni bir pencerede açar.
• _parent Sayfayı bulunduğu üst çerçevede açar.
• _top Sayfayı aktif pencerenin gövdesinde açar.

 <a target="_blank" href="https://www.yazilimdili.net"> Yazılım Dili Web Sayfası </a>
 <a target="_self" href="https://www.yazilimdili.net"> Yazılım Dili Web Sayfası </a>

Html Bağlantılarda Url Nasıl Yazılır?

Mutlak Url (absolute url) dış bağlantılar için veya Göreceli (relative url) iç bağlantılar kullanarak linklerimizi oluşturulur.

Absolute Url – Mutlak Url

Dış bağlantılar için kullanılan, başka bir web sitesine bağlantı kurulurken yazılan url biçimidir.

Yukarıdaki örneklerde bağlantımızı tam bir url şekilde yazdık. https://www.yazilimdili.net şeklinde. Bu mutlak url örneğidir. Bu kullanım şekli kendi sayfamız haricinde başka bir sayfaya link vermek için kullanılır.

Relative Url – Göreceli Url

İç bağlantılar için kullanılan url yapısıdır. Aynı web sitesi içerisinde, sayfalar arası bağlantı için yazılan url biçimidir.

İç bağlantı oluştururken https://www uzantısı olmadan yazmalıyız.

  <h4>Absolute URL</h4>
  <p><a target="_blank" href="https://www.google.com/">Google</a></p>
  
  <h4>Relative URL</h4>
  <p><a target="_blank" href="/html/html-dersleri/html-nedir/">Html Nedir?</a></p>

Html Bağlantılarda Başlık Kullanımı – title

title attribute kullanarak oluşturduğumuz link üzerine geldiğimizde bize tooltip şeklinde bir bilgi verir.

  <a 
  title="Html Dersleri Hakkında Bilgi" 
  target="_blank" href="/html/html-dersleri/html-nedir/"> Html Nedir?
  </a>

Resim Bağlantı Oluşturma

<img> etiketine bağantı vermek için <a> etiketi içerisinde kullanmamız yeterlidir.

  <a href="/index.php">
  <img src="resim/logo.png" alt="Logo" width="300px"> 
  </a>
  

E-posta Adresine Bağlantı Verme

<a> etiketini kullanarak href attribute içeresinde bulunan mailto özelliğini kullanarak e-posta adresine bağlantı verebiliriz.

  <a href="mailto:[email protected]"> Mail Gönder </a>

Butona Link Verme

Butonun içerisinde bulunan onclick özelliğinden yararlanarak bağlantı verebilirsiniz. Javascript kodları kullanılmaktadır.

Javascript derslerimizden daha detaylı bilgi alabilirsiniz.

   <button onclick="document.location='/index.php'">Ana Sayfa</button>

Yer imi – Bookmark Nedir? Nasıl Oluşturulur?

Bir sayfa içerisinde link oluşturarak gezinmeyi sağlar. Genelde uzun içerikli sayfalarda kullanılmaktadır.

Sayfa başlıklarına veya bir paragraf elemanına bir id ismi tanımlayarak linklerimize bu isimler sayesinde bağlantı verilir. Sayfa içerisinde bir index oluşturabiliriz. Kullanıcı sayfanın en başında içerikleri görerek istediği başlığa gitmesi sağlanabilir.

  
   
    <a href="#b-6"> 6 Numaralı Başlık İçin Tıklayın </a> <br>
    <a href="#b-10"> 10 Numaralı Başlık İçin Tıklayın </a>
    
    <h4 id="b-1">Ben Bir Başlığım -1 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-2">Ben Bir Başlığım -2 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-3">Ben Bir Başlığım -3 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-4">Ben Bir Başlığım -4 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-5">Ben Bir Başlığım -5 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-6">Ben Bir Başlığım -6 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-7">Ben Bir Başlığım -7 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-8">Ben Bir Başlığım -8 </h4>
    <p>Ben Başlığın İçeriğiyim</p>
    
    <h4 id="b-9">Ben Bir Başlığım -9 </h4>
    <p>Ben Başlığın İçeriğiyim</p>

    <h4 id="b-10">Ben Bir Başlığım -10 </h4>
    <p>Ben Başlığın İçeriğiyim</p>

    <h4 id="b-11">Ben Bir Başlığım -11 </h4>
    <p>Ben Başlığın İçeriğiyim</p>

    <h4 id="b-12">Ben Bir Başlığım -12 </h4>
    <p>Ben Başlığın İçeriğiyim</p>

Yukarıdaki örnekte sayfa içeriğimizin çok uzun olduğunu düşünürsek her birine bir id (özel bir kimlik) tanımlayarak bağlantı oluşturmayı sağlayabiliriz.