HTML Bağlantı (Link) Ekleme – Ahmet Cansever
Pazartesi , 20 Kasım 2017
Anasayfa » HTML DERSLERİ » HTML Bağlantı (Link) Ekleme

HTML Bağlantı (Link) Ekleme

HTML de <a> etiketi kullanılarak web sitesi içinde farklı sayfalara, harici web sitelerine, dosyalara yada sayfa içinde belirlenen bir alana bağlantı oluşturulabilir. <a>..</a> etiketinin en temel kullanımı aşağıdaki gibidir.

Şimdi harici bir web sayfası olarak Google‘ a link verelim.

Yukarıdaki kod satırını yazdığımızda aşağıdaki gibi bir bağlantı oluşturmuş oluyoruz.

Google Arama Motoruna Gitmek İçin Tıkla.

İstersek bağlantımızı cümlenin tamamına değil sadece istediğimiz kısmına da verebiliriz. Burada önemli olan <a>..</a> etiketleri arasına yazdığımız metin olacaktır.

Kodlarımızı aşağıdaki gibi değiştirelim.

Sonuç aşağıdaki gibi olacaktır. Yani bağlantı oluşturduğumuz metin sadece “Tıkla” yazısı olacaktır.

Google Arama Motoruna Gitmek İçin Tıkla.

Yukarıdaki örneklerde bağlantıya tıklandığında aynı sekmede açıldığını görmekteyiz. Eğer bağlantı verdiğimiz sayfanın yeni bir tarayıcı sayfası / sekmesinde açılmasını istersek target özniteliğini kullanabiliriz.  Bağlantının farklı sekmede açılmasını sağlamak için target=”_blank” özelliğini kullanmamız gerekecektir.

Alttaki kullanımda bağlantının yeni sekmede açıldığını göreceksiniz.

Google Arama Motoruna Gitmek İçin Tıkla.

 

Site içinde her hangi bir dosyaya(resim, video, belge, müzik vs.) bağlantı vermek için dosyanın konumuna göre dört farklı durum söz konusudur.

  • Bağlantı verilecek sayfa aynı dizindeyse dosyanın tam adı href kısmına yazılır.
  • Bağlantı alt klasörlerdeyse klasor1/klasor2/dosyadi şekilinde alt klasörlere geçip yine dosya adı yazılır. Bu diğer dosyalar içinde geçerlidir.
  • Bağlantı üst klasördeyse  her çıkılacak üst klasör için ../ sembolü kullanılır. Kaç tane üst klasöre çıkılacaksa çıkılacak klasör kadar ../ sembolü kullanılır. (Örn: ../../../ üç üst klasör)
  • Bağlantı üst klasörlerden birinin içindeki bir dosyada ise üst klasöre çıkıp ilgili klasöre girilerek dosya adı bulunur. (Örn: ../../resim/resim1.jpg)

screenshot_2

Yukarıdaki açıklamaları üstteki resimdeki gibi bir web sitesi yapımız olduğunu düşünerek örneklendirelim.

galeri.html sayfasından iletisim.html sayfasına bağlantı vermek için;

index.html sayfasından  iletisim.html sayfasına bağlantı vermek için;

hakkimizda.html sayfasından index.html sayfasına bağlantı vermek için;

iletisim.html sayfasından res1.png dosyasını açmak için;

E-Posta Adresine bağlantı için ise aşağıdaki şekilde kullanımda bulunabilirsiniz.

Örnek olarak iletisim@ahmetcansever.com mail adresine bir bağlantı verelim.

 

E-Posta Gönder

Hakkında Ahmet C

Yorum Yap

Wordpress Tema indir