Bilişim İzle | Bilişim Teknolojileri Sitesi

HTML Etiketler 5

Bağlantı (Köprü – Link) oluşturmanın nasıl yapıldığını öğreneceğiz.

HTML Etiketler 5

Bağlantı (Köprü – Link) Oluşturma

Web sayfalarında tıklandığında başka sayfalara gitmemizi sağlayan linkler oluşturmak için <a>…</a> etiketi kullanılır.

Parametre

Değer

Açıklama

href

URL

Sayfa adı

Resim adı

Bölüm adı

E-posta adresi

Linkin tıklandığında gideceği hedefin adresidir. Bu bir başka sitenin URL’si, site içindeki başka bir sayfanın yada resmin adı, aynı sayfa içindeki bölümün adı veya e-posta adresi olabilir.

name

İsteğe bağlı
bir isim olabilir

Aynı sayfa içinde linkler oluşturmak için linkin gideceği yerde işaret oluşturmak için kullanılır. Bir başka deyişle sayfa içinde bölüm oluşturmak için kullanılır. Sonra aynı sayfadaki linkler bu bölümlere yönlendirilir.

target

_blank
_parent
_self
_top

_blank: Bağlantıyı yeni bir pencerede açar.

_parent: Açılan bağlantı, açık sayfanın yerinde bağlantıyı açar.

_self: Bağlantıyı aynı pencere içerisinde açar.

_top: Bağlantıyı aynı pencere içerisinde sayfanın en üstünden itibaren açar.

Genel olarak 4 çeşit bağlantı vardır. Bunlar;

  • Site içi bağlantılar
  • Site dışı bağlantılar
  • Sayfa içi bağlantılar
  • E-posta adresine bağlantı

1.Site İçi Bağlantılar

Site içi bağlantılar ile kendi sitemiz içindeki farklı bir sayfaya link veririz. Gidilecek olan sayfanın adresi bulunduğumuz sayfaya göre yazıldığı için göreceli yol kullanılmış olur. Göreceli yollarda; “Bulunduğumuz yere göre gitmek istediğim sayfa nerede kalıyor?” sorusunu sormak gerekir.

anasayfa hiyerarşisi

Eğer gitmek istediğimiz sayfa;

  • Bulunduğumuz yerde ise: <a href=“sayfa.html”>Git</a>
  • Bir üst dizinde ise: <a href=“../html”>Git</a>
  • İki üst dizinde ise: <a href=“../../html”>Git</a>
  • Bir alt dizinde ise: <a href=“dizin/html”>Git</a>
  • İki alt dizinde ise: <a href=“dizin1/dizin2/sayfa.html”>Git</a>

Bir üst dizine çıkmak için ../ kullandık. Bir dizine girmek için dizin/ ifadesi kullanılmıştır. Buradan örnekle diyelim ki bir üst dizindeki videolar dizininde bulunan flash.html sayfasına giden bir link vermek istersek:

<a href=“../videolar/flash.html”>Git</a> şeklinde bir adres yazmalıyız.

2.Site Dışı Bağlantılar

Site dışı bağlantılar, tıklandığında başka bir siteye giden bağlantılardır. Bu tür bağlantılarda gidilecek sitenin tam URL’si yazılmalıdır.

Örnek 1: Aşağıdaki site dışına verilen bağlantıyı oluşturalım.

Google arama motoruna gitmek için <a href=“http://www.google.com.tr”>tıklayınız.</a>

Linkin üzerinde gelindiği zaman tarayıcının alt kısmında hedefi görülmektedir. Bu sayede linke tıklamadan nereye gideceği, adresin yanlış olup olmadığı kontrol edilebilir.

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

3.Sayfa İçi Bağlantılar

İçeriği çok uzun olan sayfalarda kullanılan bağlantılardır. Genellikle sayfa içindeki başlıklar en üstte bir liste şeklinde verilir. İlgili başlığa tıklandığında aynı sayfa içinde o başlığın açıklandığı kısma gidilir. Bunun için gidilecek yere bir işaret konulur. Bu işareti koymak için <a name=“işaret adı”></a> etiketi kullanılır.

Örneğin;  Anakart’a tıklandığında git1’e gidilecekse öncelikle git1 yazısına bir işaret koymak gerekir sonra Aakart yazısına bu işarete gidecek şekilde bağlantı verilir. İşarete giden bağlantıda adresin önüne # işareti konulur.

Örnek 2: Aşağıdaki sayfa içine verilen bağlantıyı oluşturalım.

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

Örnek 3: Aşağıdaki sayfa içine verilen bağlantıları oluşturalım.

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

4.E-Posta Adresine Bağlantı

Sayfa içerisinde tıklandığında e-posta adresine mail göndermek için kullanılan bağlantılardır. Bu bağlantılara tıklandığında sistemdeki e-posta programı (Outlook, Thunderbird, Kmail, …) mail göndermek için açılır. Href ile mail adresi belirtilirken önüne mailto: ifadesi eklenir.

Örnek 4: bilisimizle@gmail.com adresine mail gönderen linki oluşturalım.

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

BİR YORUM YAZIN

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

ZİYARETÇİ YORUMLARI - 0 YORUM

Henüz yorum yapılmamış.

Bilisimizle.com - Bilişim Teknolojileri, Yazılım, Donanım, Elektronik, Eğitim Videoları, Deneme Sınavları, Öğretmen Evrak, Ders Notları, Kodlama... | 2016-2020