HTML Dersleri 4: Bağlantı (Link) Yapısı

Merhabalar,

HTML derslerimize devam ediyoruz. Bu dersimizde HTML’de Bağlantı (Link) Yapısı hakkında bilgi vermeye çalışacağım. Daha önce ki HTML derslerimize aşağıda ki bağlantılara tıklayarak ulaşabilirsiniz.

  1. Temel HTML 5 Etiketleri
  2. HTML 5’de En Sık Kullanılan Meta Etiketler
  3. HTML 5’de En Sık Kullanılan Meta Etiketler #2
  4. HTML Dersleri 1: HTML Nedir ?
  5. HTML Dersleri 2: HTML Etiketleri
  6. HTML Dersleri 3: Metin Biçimlendirme (Text Formatting)

Bir HTML dosyası içerisinde herhangi bir sayfaya, sayfa içi kısımlara, web sitesine, belirtilen dosyaya (zip, rar, müzik, video vb.) veya mail adresine gitmek ve yönlendirme yapabilmek için kullanılan özelliklerden olan bağlantı yapısını anlamak ve uygulayabilmek gerekmektedir. Bunun için HTML içerisinde  <a></a> etiketi kullanılmaktadır.

En basit olarak bir yazıya link verme örneği ile başlayalım dersimize.

HTML’de Yazıya Link Vermek

HTML’de herhangi bir yazıya link vermek için <a> </a> etiketi kullanılır. <a> etiketi birkaç tane parametre almaktadır ve bu parametlerden bir tanesi olmazsa belirlediğiniz yazıya verdiğiniz link çalışmayacaktır.

<a> etiketi için kullanılması zorunlu parametre, ” href” parametresidir. Bu parametre olmadan hiçbir şekilde link yapısını oluşturamaz bir diğer değiş ile link veremezsiniz.

En basit olarak bir yazıya link verme örneği:

Linkler hemen hemen bütün HTML özelliklerine uygulanabilir. Butonlar, resimler, menüler, liste elemanları vs. benzeri birçok element ve etiket buna dahildir.

HTML’de Yazıya Link Vermek için birden fazla bağlantı çeşiti mevcuttur. Bunları tek tek örnek vererek anlatmaya çalışacağım… Zaten en başta en basit bağlantı çeşidini verdim. Bunlara ilave olarak;

  1. Sayfalar arası bağlantı
  2. Sayfa içi (site içi) bağlantı
  3. Mail Bağlantısı

1.Sayfalar Arası Bağlantı

Bu bağlantı çeşidinde HTML ‘de oluşturduğunuz bir sayfada verdiğiniz bir link bağlantısına tıklayan kişiye yeni bir sayfa açmasını sağlar.Bağlantıyı yenilenen pencerede açmak olarak da ifade edilebilir. İşlem yapılan mevcut sayfa içerisinden herhangi bir sayfaya geçiş için bu yöntem kullanılır.

Bu bağlantı çeşidi 4 tane parametre alabilmektedir.

Yukarıda ki örnekte target=”_blank” kısmı <a> etiketin alabildiği bir parametre değeridir. _blank değerini verdiğiniz bir linke tıklandığı zaman href kısmında belirttiğiniz sayfa adresi ya da kaynak adres web tarayıcısında yeni bir sekme açarak sayfayı çalıştıracaktır.

_self,_top, _parent gibi 3 tane daha parametre vardır. Bu parametrelerin hepsi aynı işlevi görmektedir fakat ufak farklılıkları mevcuttur.

_self | _top | _parent : Böyle bir bağlantıya tıklandığında yenilenecek/yönlendirilecek olan sayfa mevcut sayfanın yerine açılacaktır. Nihayi olarak ele alındığında; _top, _parent ve _self işleyiş bakımından benzer sonuçlar vermektedir. _self yöntemini kullanmanızı tavsiye edebilirim.

[label style=”red”]Not:[/label] Parametreler örnekte ki kullanılmamaktadır. Hepsi ayrı parametredir ve bir tanesini seçip kullanmanız gerekiyor. Yukarıda verdiğim 3 parametrede aynı işlemi yaptığından farklı farklı göstermedim tek bir örnekte hepsinin işlevini anlattım. En stabil ve arama motorlarınca tavsiye edilen _self parametresidir. target=”” kısmına _self yazarak kullanacaksınız.

2. Sayfa İçi (Site İçi) Bağlantı

Bu bağlantı çeşidi bir bakıma CSS’de ki seçiciler gibidir. Sayfanızda belli html elementleri mevcut ve hepsi alt alta sıralı diyelim. Siz bu elementleri tek tek geçiş yaptırmak istiyorsunuz fakat başka bir sayfada açılmasını değil aynı sayfada göstermek istiyorsunuz. Bunun için yapacağınız işlem şudur.

Linke tıklandığında belirlediğiniz html elementine gidilmesi için ilk önce html elementine bir name ataması yapacaksınız. Aşağıda ki örnekte a elementine link1 adında bir name atadım.

Belirlediğimiz yazıya vereceğimiz html koduda aşağıda ki gibidir.

Yukarıda ki linke tıkladığında sayfa değişmeden link1 name’ni almış olan yazı içeriğine gidecektir kullanıcınız.

3. Mail Bağlantısı

Artık çok kullanılmasada kimi durumlarda işinizi görmektedir bu bağlantı çeşidi. Ufak portfolyo tarzında hazırladığınız sayfalarda bu tarz bir bağlantı çeşidi işinizi görecektir. Mail adreslerinize link vermek için ve tıklandığında Windows’un Outlook ya da kişinin bilgisayarında bulunan herhangi bir mail programında bağlantı kurmasını sağlarsınız.

Yani html sayfasına giren bir kişiye mail adresinizi veriyorsunuz ve html mail bağlantısını kullanarak link veriyorsunuz mail adresinize tıklandığında otomatik olarak Outlook ya da benzeri bir program açılıyor ve tıklayan kişinin mail sayfası açılıyor ve alıcı kişi bölümüne mail adresiniz eklenmiş oluyor. Hızlı bir şekilde size e-mail atılmasını sağlamaktadır.

Örnek kullanımı yukarıda ki gibidir.

En çok kullanılan ve en bilinen bağlantı verme çeşitleri bunlardı arkadaşlar. Bu yazıya ek olarak bir adet yazı daha yazacağım orada biraz daha bilgi vereceğim sizlere. Bu yazı yeterince uzun ve içi dolu oldu fazla uzatmanın anlamı yok ve okumaktan soğutmayalım sizleri 🙂 En basit şekilde HTML’de Yazıya Link Vermek i anlatmış oldum.

Bir sonra ki ders yazımda görüşmek dileği ile hoşcakalın.

Bir önceki yazım olan HTML Dersleri 3: Metin Biçimlendirme (Text Formatting) başlıklı yazımda HTML Metin Biçimlendirme Etiketleri, HTML Metin Biçimlendirme Etiketlerinin Kullanımı ve HTML Text Formatting hakkında bilgiler verilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir