HTML

HTML Bağlantı (Anchor) Etiketi: Web Sayfalarına Etkileşim Verme

Web sayfalarında en çok kullanılan etiketlerden biri bağlantı etiketidir ve bu etiket <a> ile tanımlanır. Buradaki “a” harfi, İngilizce’de “anchor” (çapa) anlamına gelen kelimenin baş harfidir. Bağlantı etiketi, kullanıcıları bir sayfadan başka bir sayfaya yönlendirmek amacıyla kullanılır ve web dünyasında hayati bir rol oynar.

Bağlantılar, yalnızca başka bir web sayfasına yönlendirme yapmakla sınırlı değildir. Aynı zamanda aynı sayfada farklı bir noktaya, bir dış siteye, bir e-posta adresine, telefon numarasına, bir belgeye veya görsele de yönlendirme yapılabilir. Bu esneklik, bağlantı etiketini çok yönlü bir araç haline getirir ve web sitelerinin kullanıcı etkileşimini artırmasına olanak tanır.

Bu makalede, HTML’de bağlantı etiketinin nasıl kullanıldığını detaylı bir şekilde inceleyeceksiniz. Farklı sayfa türlerine, dosyalara ve e-postalara nasıl bağlantı verebileceğinizi öğrenerek, kendi web sayfalarınızda daha etkili ve işlevsel bağlantılar oluşturabileceksiniz.

Bağlantı Etiketi Nasıl Oluşturulur?

Bağlantı etiketleri, HTML’de <a> ve </a> etiketleri arasına yerleştirilen içerikle tanımlanır. Bu etiketlerin arasında yer alan metin veya görsel, kullanıcının tıklayarak yönlendirileceği bağlantı unsuru haline gelir. En temel kullanımda, bir bağlantı etiketi şu şekildedir:

Burada href niteliği, bağlantının hedefini belirten ve zorunlu olan bir özelliktir. href, “hyperlink reference” anlamına gelir ve bağlantı yapılacak web adresini, belgeyi veya e-posta gibi diğer kaynakları tanımlar. Bu nitelik olmadan bir bağlantı işlevsel hale gelmez ve bağlantının nereye yönlendirdiği anlaşılamaz.

Bağlantı etiketinin içerisinde yer alan metin veya görsel, kullanıcı tarafından görülen ve tıklanabilir olan kısmı oluşturur. Doğru kullanıldığında bu etiket, sitenizin hem kullanılabilirliğini hem de arama motorları açısından değerini artırır.

Bağlantı etiketiyle ilgili detaylı örnekleri adım adım incelemek için hazırladığımız dosyayı kullanacağız. Aşağıdaki baglanti-ders.zip dosyasını Visual Studio Code (VSCode) ile açarak örnekleri uygulamaya başlayabilirsiniz. Her adımda, bağlantı etiketinin farklı kullanım alanlarını keşfedeceğiz ve öğrendiklerimizi pekiştireceğiz.

Bu yazıda, bağlantı etiketinin hem basit hem de gelişmiş kullanımlarına yönelik pratik örnekler sunacağız. Bağlantı etiketinin temel kullanımından başlayarak, farklı hedeflere nasıl yönlendirme yapabileceğinizi ve nitelikleri nasıl özelleştirebileceğinizi öğreneceksiniz.

Haydi başlayalım!

HTML Bağlantı Örnekleri

Görseldeki klasör yapısına göre örneklerinizi hazırlayalım. Bu yapı üzerinden bağlantı etiketini kullanarak çeşitli dosya ve sayfalara nasıl yönlendirme yapabileceğinizi göstereceğim. Klasör yapınız şu şekilde:

  • belge klasöründe: cities.csv, ornek.pdf
  • res klasöründe: dori.png, logo.png
  • sayfa klasöründe: urun1.html, urun2.html
  • video klasöründe: computer.mp4
  • Ana dizinde: blog.html, hakkimizda.html, index.html

Aynı dizindeki sayfaya bağlantı verme

index.html dosyasından ana dizinde bulunan hakkimizda.html dosyasına bağlantı vermek için şu şekilde bir kod yazabilirsiniz:

Farklı bir dizindeki sayfaya bağlantı verme

index.html dosyasından sayfa klasöründeki urun1.html dosyasına dosyasına bağlantı vermek için şu şekilde bir kod yazabilirsiniz:

PDF dosyasına bağlantı verme

index.html dosyasından belge klasöründe bulunan ornek.pdf dosyasına bağlantı vermek isterseniz:

Not: target="_blank" ifadesi, bağlantının yeni bir sekmede açılmasını sağlar.

Resim dosyasına bağlantı verme

index.html dosyasından res klasöründeki logo.png dosyasını kullanarak bir bağlantı oluşturmak için:

Resme Tıklanabilir Bağlantı Verme

Bir resme tıklanabilir bağlantı vermek için, bağlantı verilecek resim (<img>) etiketini <a></a> etiketleri arasına yerleştirmeniz gerekir. Bu sayede kullanıcılar, resme tıkladıklarında belirlediğiniz sayfaya yönlendirilir.

Örneğin, hakkimizda.html sayfasında yer alan bir logoya tıklayarak kullanıcıları index.html sayfasına yönlendirmek için şu kodu kullanabilirsiniz:

Bu örnekte, <a href=”index.html”> etiketiyle logoya tıklayan ziyaretçiler, ana sayfa olan index.html sayfasına yönlendirilir. Aynı zamanda <img src=”res/logo.png”> etiketiyle res klasöründeki logo görseli sayfada görüntülenir.

Üst Dizindeki Bir Dosyaya Bağlantı Verme

Üst dizindeki bir dosyaya bağlantı vermek için ../ sembolü kullanılır. Bu sembol, bir üst dizine çıkmanızı sağlar. Ne kadar üst dizine çıkmak istiyorsanız, o kadar ../ eklemelisiniz. Bu yöntem, dosya yapısında daha üst seviyedeki dosyalara kolayca erişim sağlar.

Örnek: urun1.html Dosyasından hakkimizda.html Dosyasına Bağlantı Verme

urun1.html dosyası sayfa klasöründeyken, hakkimizda.html dosyası bir üst dizindedir. Bu durumda bağlantı şu şekilde verilebilir:

Bu bağlantı, urun1.html sayfasından bir üst dizine çıkarak hakkimizda.html dosyasına yönlendirme yapar.

Örnek: urun1.html Dosyasında Logoya Tıkladığında index.html Dosyasına Bağlantı Verme

urun1.html dosyasından index.html dosyasına bağlantı vermek için yine bir üst dizine çıkmanız gerekir. Aşağıda, logoya tıklanıldığında ana sayfaya yönlendiren bir örnek bulunuyor:

Bu örnekte, önce sayfa klasöründen bir üst dizine çıkılır ve index.html sayfasına yönlendirme yapılır. Ayrıca, res klasöründeki logo.png görseli sayfada gösterilir.

Harici Bir Sayfaya Bağlantı Verme

HTML’de, bir web sayfasından tamamen farklı bir web sitesine yönlendirme yapmak için harici bağlantılar kullanılır. Harici bir sayfaya bağlantı vermek, tıpkı dahili bir bağlantı vermek kadar basittir. Ancak bu durumda, href niteliğine tam URL adresi yazılır. Harici bir bağlantı genellikle kullanıcıyı başka bir web sitesine yönlendirmek için kullanılır.

Harici bağlantılar, http:// veya https:// ile başlar ve genellikle bu tür bağlantılar, yeni bir sekmede açılması için target=”_blank” niteliği ile birlikte kullanılır.

Aşağıda, sayfasından Google web sitesine harici bir bağlantı vermek için kullanılan bir örnek yer almaktadır:

Bu örnekte:

  • href="https://www.google.com" ile Google’ın tam URL’si kullanılarak bağlantı verilmektedir.
  • target="_blank" niteliği, bağlantının yeni bir tarayıcı sekmesinde açılmasını sağlar. Bu, ziyaretçilerin mevcut sayfadan ayrılmadan bağlantıya tıklamalarına olanak tanır.

Harici bağlantılar, başka sitelere referans vermek, kaynak göstermek veya işbirliği yaptığınız web sitelerine yönlendirmek için oldukça kullanışlıdır.

Mail ve Telefon Bağlantıları Verme

HTML’de sadece web sayfalarına değil, aynı zamanda e-posta adreslerine ve telefon numaralarına da bağlantı verebilirsiniz. Bu bağlantılar, kullanıcıların doğrudan e-posta göndermesini veya bir telefon araması başlatmasını sağlar. Aşağıda bu tür bağlantıların nasıl oluşturulacağına dair detaylar ve örnekler bulabilirsiniz.

1. E-posta Bağlantısı Verme

Bir e-posta bağlantısı oluşturmak için mailto: protokolü kullanılır. Kullanıcı bu bağlantıya tıkladığında, varsayılan e-posta istemcisi açılır ve belirttiğiniz e-posta adresine yeni bir e-posta yazmaya yönlendirilir.

Örnek: E-posta Bağlantısı

Bu örnekte:

  • href="mailto:ornek@mail.com" niteliği, e-posta gönderilecek adresi tanımlar.
  • Kullanıcı bağlantıya tıkladığında, varsayılan e-posta uygulaması açılarak belirtilen adrese e-posta göndermek için bir pencere açılacaktır.

2. Telefon Bağlantısı Verme

Bir telefon numarasına bağlantı vermek için tel: protokolü kullanılır. Bu, özellikle mobil cihazlarda kullanışlıdır, çünkü kullanıcılar bağlantıya tıklayarak doğrudan bir telefon araması başlatabilirler.

Örnek: Telefon Numarası Bağlantısı

Bu örnekte:

  • href="tel:+905551234567" ile bağlantıya tıklayan kişi, bu telefon numarasını aramaya yönlendirilir. Telefon numarası uluslararası formatta belirtilmiştir (+90 Türkiye’nin uluslararası kodudur).

3. WhatsApp Bağlantısı Verme

Kullanıcıların WhatsApp üzerinden sizinle iletişime geçmesi için https://wa.me/ protokolünü kullanabilirsiniz.

Örnek: WhatsApp Bağlantısı

Bu örnekte:

  • href="https://wa.me/905551234567" ile kullanıcılar tıkladığında, WhatsApp uygulaması açılır ve belirtilen numaraya mesaj göndermek için hazır hale gelir.

4. Skype Bağlantısı Verme

Kullanıcıların Skype üzerinden bir arama başlatabilmesi için skype: protokolü kullanılır.

Örnek: Skype Bağlantısı

Bu örnekte:

  • skype:skype.kullanici.adi?call ile Skype’ta belirttiğiniz kullanıcı adına bir arama yapılır.

Bu tür bağlantılar, kullanıcı etkileşimini artırmak ve kolay iletişim sağlamak için oldukça etkili yöntemlerdir.

Sayfa İçinde Bir Noktaya Bağlantı Verme

Sayfa içinde belirli bir noktaya bağlantı vermek için, öncelikle bağlantı verilecek noktaya id tanımlaması yapmanız gerekir. Bu sayede, kullanıcı bağlantıya tıkladığında sayfanın belirli bir kısmına hızlıca yönlendirilir.

Adım 1: Bağlantı Verilecek Noktaya ID Tanımlaması Yapma

Örneğin, blog.html sayfasındaki <h2>Paragraf</h2> başlığına bağlantı vermek için bu başlığın yanına bir id ekleyelim:

Bu örnekte, <h2> etiketine id="bolum1" tanımlaması yapıldı.

Adım 2: Sayfanın Üst Kısmında Bağlantı Oluşturma

Şimdi sayfanın üst kısmında, bu başlığa yönlendiren bir bağlantı oluşturalım:

Bu örnekte:

  • href="#bolum1" ifadesi, sayfanın içindeki bolum1 id’sine atıfta bulunur. Kullanıcı bu bağlantıya tıkladığında sayfa otomatik olarak ilgili başlığa kaydırılır.

Sayfanın Alt Kısmından Üst Kısıma Bağlantı Verme

Aynı yöntemle, sayfanın alt kısmındaki bir bağlantıyı kullanarak kullanıcıları üst kısımdaki belirli bir noktaya yönlendirebilirsiniz. Bu, uzun sayfalarda gezinmeyi kolaylaştırarak kullanıcı deneyimini artırır.

Adım 1: Üst Kısımda ID Tanımlaması

Öncelikle, sayfanın üst kısmında yer alan başlığa bir id verilmesi gerekiyor. Bu, kullanıcının sayfanın alt kısmında bulunan bir bağlantıya tıkladığında sayfanın üst kısmındaki bu başlığa hızlıca yönlendirilmesine olanak tanır.

Aşağıdaki gibi, sayfanın üst kısmındaki <h1> etiketine id tanımlaması yapabiliriz:

Adım 2: Sayfanın en alt kısmında, kullanıcıların sayfanın üst kısmındaki başlığa hızlıca dönmelerini sağlamak için bir “Yukarı Çık” bağlantısı oluşturabiliriz. Bunun için sayfanın alt kısmına şu kodu ekleyeceğiz:

Bu bağlantı, kullanıcıların tıkladıklarında sayfanın üst kısmındaki Blog Sayfası başlığına yönlendirilmesini sağlar.

Bağlantı Etiketinde Kullanılan Nitelikler

HTML’de bağlantı etiketi (<a>) ile birlikte kullanılan birkaç önemli nitelik vardır. Bu nitelikler, bağlantının işlevselliğini ve kullanıcı deneyimini geliştirmek için kritik öneme sahiptir. İşte en yaygın kullanılan bağlantı niteliği ve işlevleri:

download: Bu nitelik, bağlantının bir dosya indirme işlemi gerçekleştirmesi için kullanılır. Kullanıcı, bu bağlantıya tıkladığında, belirtilen dosya otomatik olarak indirilir. Örneğin, download="belge.pdf" ile kullanıcı, belge.pdf dosyasını indirir.

href: Bu nitelik, bağlantının hedefini belirtir. Bir web adresi, dosya yolu veya e-posta adresi gibi kaynakları tanımlar. Bağlantı işlevsel hale gelmesi için href niteliği zorunludur. Örneğin, href="index.html" yazıldığında kullanıcı, tıkladığında belirtilen sayfaya yönlendirilir.

target: Bu nitelik, bağlantının açılacağı alanı tanımlar. En yaygın kullanımı, _blank değerini kullanarak bağlantının yeni bir sekmede açılmasını sağlamaktır. Örneğin, target="_blank" ifadesi ile kullanıcı, bağlantıya tıkladığında mevcut sayfadan ayrılmadan yeni bir sekmede belirtilen sayfayı görebilir.

title: Bu nitelik, bağlantının üzerine gelindiğinde görünen bir ipucu metni sağlar. Kullanıcılar, bağlantının ne hakkında olduğunu daha iyi anlayabilmek için bu niteliği kullanarak daha fazla bilgi edinebilirler. Örneğin, title="Ana Sayfa" ifadesi, bağlantının üzerine gelindiğinde “Ana Sayfa” metninin görünmesini sağlar.

rel: Bu nitelik, bağlantının niteliğini tanımlar ve arama motorları ile kullanıcılar için bilgi sağlar. Örneğin, rel="nofollow" değeri, arama motorlarına bu bağlantının takip edilmemesi gerektiğini belirtir.

DeğerAçıklama
alternateAlternatif bir kaynak olduğunu belirtir.
authorBağlantının yazarına yönlendirdiğini belirtir.
bookmarkSayfanın yer imi olarak eklenebileceğini gösterir.
externalDış bir web sitesine yönlendirdiğini belirtir.
helpKullanıcılara yardım veya destek sağladığını gösterir.
licenseBağlantının lisans bilgilerini içerdiğini belirtir.
nextSonraki sayfaya veya içeriğe yönlendirdiğini belirtir.
nofollowArama motorlarına bu bağlantının takip edilmemesi gerektiğini belirtir.
noreferrerTarayıcıdan referans bilgisinin gönderilmemesi gerektiğini belirtir.
prevÖnceki sayfaya veya içeriğe yönlendirdiğini belirtir.
relatedİlişkili veya benzer içeriklere yönlendirdiğini gösterir.
noopenerBağlantıya tıklandığında, yeni sekmenin önceki sayfaya erişim izni olmaması gerektiğini belirtir.
tagİçerik etiketlerini tanımlar.

Bu tablo, rel niteliği ile ilgili değerlerin açıklamalarını detaylı bir şekilde sunmaktadır. Kullanım amacına göre bu değerler, bağlantılara eklenerek arama motorları ve kullanıcılar için daha fazla bilgi sağlar.

Bağlantı Örnekleri

Örneklere başlamadan önce, yukarıdaki görseli yeniden hatırlayalım. Aşağıdaki yapı, görselin yeniden yazılmış halini kapsıyor. Aşağıdaki soruları bu görsele uygun olarak yapacağız.

Soru 1: index.html dosyasından blog.html dosyasına bağlantı verin.

Soru 2: urun1.html dosyasından index.html dosyasına bağlantı verin.

Soru 3: urun2.html dosyasından hakkimizda.html dosyasına bağlantı verin.

Soru 4: blog.html dosyasından video/ klasöründeki computer.mp4 dosyasına bağlantı verin.

Soru 5: hakkımızda.html dosyasından sayfa/urun1.html dosyasına bağlantı verin.

Soru 6: urun1.html dosyasından dori.png dosyasına bağlantı verin.

Soru 7: blog.html dosyasından urun2.html dosyasına bağlantı verin.

Soru 8: index.html dosyasından belge/cities.csv dosyasına bağlantı verin.

Soru 9: hakkımızda.html dosyasına tıkladığınızda tasarimkodlama.com web sitesine bağlantı verilsin.

Soru 10: blog.html dosyasından belge/ornek.pdf dosyasına bağlantı verin.

Soru 11: urun1.html ve urun2.html dosyalarından res/dori.png resmine indirme bağlantısı verin.

Soru 12: index.html dosyasından video/computer.mp4 dosyasını oynatacak bir bağlantı verin.

Soru 13: hakkımızda.html logo resmine tıklandığında index.html dosyasına giden bir bağlantı verin.

Soru 14: blog.html dosyasındaki listede bulunan tüm yazılara bağlantı verin.

Soru 15: hakkımızda.html dosyasındaki listede bulunan tüm yazılara bağlantı verin.

Soru 16: urun1.html ve urun2.html dosyasındaki listede bulunan tüm yazılara bağlantı verin.

Soru 17: index.html dosyasındaki listede bulunan tüm yazılara bağlantı verin.

Soru 18: index.html, hakkimizda.html, urun1.html ve urun2.html dosyalarında logolara tıkladığınızda index.html dosyasına bağlantı verin.

Soru 19: index.html dosyasından yazilimkodlama.com sitesindeki bir makaleye harici bir bağlantı verin.

Soru 20: hakkımızda.html dosyasında destek@tasarimkodlama.com adresine tıklandığında e-posta uygulamasını açacak şekilde bir bağlantı verin.

Soru 21: blog.html dosyasında +90 555 123 45 67 numarasına tıkladığında telefon arama uygulamasını açacak şekilde bir bağlantı verin.

Soru 22: urun1.html dosyasında WhatsApp üzerinden iletişim kurmak için “Mesaj Gönder” butonuna tıklandığında +90 555 123 45 67 numarasına yönlendirecek bir bağlantı oluşturun.

Soru 23: urun2.html dosyasından tasarimkodlama.com adresine yönlendiren bir harici bağlantı ekleyin.

Soru 24: index.html dosyasındaki bir bağlantıya target=”_blank” niteliği ekleyerek, bağlantının yeni bir sekmede açılmasını sağlayın.

Soru 25: blog.html dosyasındaki bir bağlantıya rel=”nofollow” niteliği ekleyerek arama motorlarına bu bağlantıyı takip etmeme talimatı verin.

Soru 26: hakkimizda.html dosyasında “şehirler” bağlantısına tıklayarak cities.csv dosyasını şehirler.csv olarak indirmek için download niteliğini kullanarak bağlantıyı oluşturun.

Soru 27: urun1.html dosyasındaki “Ana Sayfa” bağlantısına title niteliği ekleyerek bağlantı üzerine gelindiğinde “Ana Sayfa bilgisi” gibi bir bilgi gösterin.

Soru 28: index.html dosyasındaki bir bağlantıya hreflang niteliği ekleyerek, bağlantının hedef dilini belirtin.

Soru 29: blog.html dosyasındaki bir bağlantıya type niteliği ekleyerek, bağlantının içeriğinin türünü tanımlayın. Standart medya türlerinin tam listesi için IANA Medya Türleri‘ne bakın

Soru 30: urun2.html dosyasındaki bir bağlantıya class niteliği ekleyerek, CSS ile özel bir stil uygulamak için sınıf atayın.

Soru 31: hakkimizda.html dosyasında, tasarimkodlama.com web sitesine yönlendiren bir bağlantı oluşturun ve bu bağlantıya rel="noopener" niteliğini ekleyin.

Soru 32: blog.html dosyasındaki bir bağlantıya rel="nofollow" niteliğini ekleyerek, arama motorlarının bu bağlantıyı izlememelerini sağlayın.

Soru 33: urun1.html dosyasındaki bir bağlantıya rel="external" niteliğini ekleyerek, bağlantının dış bir web sitesine yönlendirdiğini belirtin.

Soru 34: index.html dosyasında, kullanıcıların daha fazla bilgi alabileceği bir bağlantıya rel="help" niteliğini ekleyin.

Soru 35: urun2.html dosyasındaki bir bağlantıya rel="prev" niteliğini ekleyerek, önceki sayfaya yönlendirme yaptığınızı belirtin.

Sonuç olarak, bu makalede bağlantı etiketlerinin HTML içerisindeki önemi ve kullanımı detaylı bir şekilde inceledik. Bağlantı etiketleri, web sayfaları arasında navigasyonu kolaylaştırarak kullanıcı deneyimini artırdığını gördük. Ayrıca, dahili ve harici bağlantılar, e-posta ve telefon bağlantıları gibi çeşitli kullanım alanları ile web sitelerinin etkileşimini zenginleştirdik.

Makale kapsamında sunulan 35 uygulama sorusu, bağlantı etiketlerinin pratikte nasıl kullanılabileceğini anlamak için bir fırsat sundu. Bu sorular, öğrendiklerinizi pekiştirmenize ve gerçek dünya senaryolarında bağlantı etiketlerinin kullanımını deneyimlemenize olanak tanıdı.

Sonuç olarak, bağlantı etiketleri ve nitelikleri, modern web geliştirmede hayati bir öneme sahip olduğunu bulduk. Doğru bir şekilde kullanıldıklarında, kullanıcıların web üzerindeki deneyimlerini geliştirirken, arama motorları için de değerli bir kaynak haline geldiklerini gördük. Bu makalede sunulan bilgiler ve örnekler, bağlantı etiketleriyle ilgili kapsamlı bir anlayış geliştirilmesine yardımcı oldu.

Yorum Yap

Yorum yapmak için tıklayın