Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
HTML Dersleri 4: Bağlantı (Link) Yapısı

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

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:

<a href="http://sayfaurlsi">Link Verilecek Yazı İsmi </a>

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.

<a href="Yönlendirme Kaynağı/url" target="_blank">Bağlantı Adı</a>

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.

<a href="Yönlendirme Kaynağı/url" target="_self | _top | _parent">Bağlantı Adı</a>

_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.

<a name="link1">Yukarıdaki linke tıklayınca sayfa değişmeden (yenilenmeden) bana yönleneceksin.</a>

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

<a href="#link1">İlgili HTML Elementini Görmek İçin Tıkla</a>

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.

<a href="mailto:[email protected]">Mail atmak isterseniz, tıklayınız.</a>

Ö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.

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • Çerezler (Cookies) Nasıl Çalışır ?

    Çerezler (Cookies) Nasıl Çalışır ?

    Selamlar, Daha önce ki yazım olan Çerez (Cookie) Nedir ? Çerez Türleri Nelerdir ? adlı yazımda çerezler hakkında olabildiğince detaylı bilgiler vermiştim. O yazım çok uzun olacağı için çerezlerin nasıl çalıştığını başka bir yazı yazarak anlatmanın daha doğru olacağını düşündüm. Oldukça kısa ve öz bir şekilde Çerezler (Cookies) Nasıl Çalışır ?…
  • Çerez (Cookie) Nedir ? Çerez Türleri Nelerdir ?

    Çerez (Cookie) Nedir ? Çerez Türleri Nelerdir ?

    Selamlar, Eminim birçoğunuz Çerezler yani Cookies'ler hakkında bilgi sahibisiniz. İnternette bununla ilgili birçok yazı, belge ve birçok şey bulabilirsiniz. Ancak, internette çerezler hakkında yazılan birçok yazı ne yazık ki kopyala-yapıştır yazılar olmasından dolayı eksik ve yanlış bilgiler içeriyorlar. Hergün yeni teknolojiler ve yapılar ortaya çıkıyor haliyle çerezlerinde ilk günkü gibi…
  • HTML5 ile HTML Arasında ki Farklar

    HTML5 ile HTML Arasında ki Farklar

    Selamlar, Bu yazımda sizlere her zaman duyduğunuz html'in sürümleri arasında ki farkları anlatacağım. HTML5 ile HTML Arasında ki Farklar ın ne olduğunu madde madde sıralayacağım. Buna neden gerek duydum önce bunu açıklamak istiyorum, biliyorsunuz günümüzün en güncel html teknolojisi ve sürümü HTML5'dir. Ancak tam olarak yaygın bir şekilde kullanılmıyor ve hatta…
  • HTML Dersleri 5: Liste Yapısı (List)

    HTML Dersleri 5: Liste Yapısı (List)

    HTML Dersleri 5: Liste Yapısı (List) Merhabalar, HTML derslerimize kaldığımız yerden devam ediyoruz. Bu dersimde sizlere HTML liste yapılarını göreceğiz, liste yapılarıyla ilgilili örnek uygulamalar yapacağız. Bir html web sayfası üzerinde yazıyı, veriyi vb. herhangi bir ögeyi belli şartlara göre listelemek istediğimizde, HTML’in tasarımcıya sunduğu listeleme etiket ve elementlerini kullanmak…
HTML Dersleri 4: Bağlantı (Link) Yapısı için Yorum'da Bulun

Bir Cevap Yaz

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

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.