HTML Link

15 Şubat 2012çinde | Yorum yok

[table_of_contents]

Merhaba arkadaşlar. Bu yazıda sizlerle HTML link konusuna değinmek istiyorum. Linkler neredeyse bütün web sayfalarında vardır. Kullanıcılar bu linkleri sayfadan sayfaya geçmek için kullanırlar. Tarayıcının adres satırına yeniden adres yazmaları yerine biz linkleri HTML sayfalarımızda tanımlayarak sistemin daha pratik hale gelmesini sağlayacağız. Herzamanki gibi küçük bir örnekle ne demeye çalıştığımızı anlayarak başlayalım. Örnekle başlamanın faydasını göreceğinize eminim.

<html>
<body>
<p>
<a href="http://kodhane.com">HTML Dersleri</a> Bu bir linktir.
Kodhane.com'a gider 
</p>
<p>
<a href="http://www.google.com/">Google</a> Googlea giden link 
</p>
</body>
</html>

Daha fazla örneğe sayfa sonunda ulaşabilirsiniz. Şimdilik konu anlatımına devam edelim.

HTML HyperLink

Hyperlink veya Link ikiside aynı anlama geliyor. Biz türkçe olarak bağlantı diyebiliriz. Başka bir sayfaya bağlantı veya aynı sayfadaki bir bölüme bağlantı verme olarak tanımalayabiliriz. En bariz örneği ise farenin imleci bağlantının üstüne geldiğinde bir el halini alması. Linklerin diğer bir özelliği ise <a> etiketini kullanmaları. Tabiki sadece <a> etiketi ile kalmıyorlar. Barındırdığı parametreleride kullanıyorlar. 2 Kullanımdan bahsetmiştik :

[unordered_list style="star"]

“href” parametresini kullanarak başka bir adrese bağlantı vermek
“name” parametresini kullanarak döküman içinde yerimi oluşturmak

[/unordered_list]

HTML Link Verme Yapısı

O kadarda kafa karaıştırıcı bir yapıya sahip değil. Öğrendikten sonra sayfanızı linkler ile dolduracağınızdan eminim. İşte size bir bağlantının yapısı.

<a href="url">Link yazısı</a>

“href” parametresi ile gideceğimiz noktayı belirledik. Varmak istediğimiz noktanın adresini “href” den sonraki eşittir işaretinin tırnakları içine yazıyoruz. İki “<a>” etiketi içinde kalan kelimler ise ekranda altı çizili olarak belirenler. Çalışan bir örneğe ne dersiniz ?

<a href="http://www.kodhane.com/">Kodhane.com'a git</a>

Yukarıdaki kodu herhangi bir HTML sayfasında çalıştırdığınızda ve linke tıkladığınızda sizi kodhane.com’un giriş sayfasına yönlendirecektir.

İpucu: “Kodhane.com’a git” yazan yerde bir resim veya başka elemanlar yerleştirebiliriz. Her yönden esnek bir yapı olduğunu belirtmek isterim.

HTML Link Hedef Özelliği – Target

Sizlere bahsetmek istediğim diğer önemli bir nokta ise bağlantı verdiğimiz sayfalararın açılma şekli. Firefox yada Chrome kullanıyorsanız ve yeni bir sayfa açmak istediğinizde tarayıcınızdaki küçük “+” işareti ile yeni bir tabda yani sekmede açarsınız. Bizde burda verdiğimiz linkin otomatik olarak var olan sayfaya dokunmadan yeni bir alanda açılmasını istiyoruz. Bunun mümkün olabildiği bir parametremiz bir özelliğimiz mevcut. Örnekle kodumuzu çalıştırdığınız takdirde ne demek istediğimizi daha iyi anlayacaksınız

<a href="http://www.Kodhane.com/" target="_blank">Kodhane.com  </a>

HTML link Yerimi oluşturma – Name

HTML dökümanın içinde oluşturmak istediğimiz yer imleri için kullanabileceğimiz sistem. Örneklerle daha iyi açıklayabileceğimizi umuyorum. İşte size üç farklı kullanım şekli gösteren örnekler :

<a name="faydalı">Faydalı Bilgiler</a>

<a href="#faydalı">Faydalı Bilgiler Bölümü</a>

<a href="http://www.kodhane.com/html-ogren.html#faydalı">
 Faydalı Bilgiler  Bölümünü Ziyaret Et</a>

Son notlar ipuçları ve rehberiniz :

Her zaman linklerinizin sonuna bir adet slash (taksim) daha eklemeyi unutmayın. Bu kullandığınız server açısından yaptığınız sorguları etkileyecektir. Örnek vermek istersek href=”http://www.kodhane.com/html-ogren/”.

Link vermenin ikinci kullanımı daha çok fihrist oluşturma ile alakalı. Bir yazıya başlamadan onunla ilgili bölümleri yukarıda belirtmek için kullanabilirsiniz. Uzun yazılarda şu anda okuduğunuz makale gibi bizde bu özelliği kullandık. Sayfanın başında içeriklerle alakalı kısa yolları ve Link vermenin ikinci kullanımının nasıl bir etki yaptığını görebilirsiniz. Daha fazla örnek ile yazımızı bitirelim.

<html>
<body>
<p>Resimi link olarak kullanmak:
<a href="index.html">
<img src="smiley.gif" alt="HTML öğren" width="32" height="32" />
</a></p>
<p>Etrafında bir çerçeve olmadan link olarak görüntüleme
<a href="index.html">
<img border="0" src="smiley.gif" alt="HTML öğren" width="32"
 height="32" />
</a></p>
</body>
</html>

<html>
<body>
<p>
<a href="#C4">Bölüm 4 e bak</a>
</p>
<h2>Bölüm 1</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 2</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 3</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2><a name="C4">Bölüm 4</a></h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 5</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 6</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 7</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 8</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 9</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm10</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 11</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 12</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 13</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 14</h2>
<p>Bu bölümde karakterimiz bla bla</p>
<h2>Bölüm 15</h2>
<p>Bu bölümde karakterimiz bla bla</p>
</body>
</html>

<html>
<body>
<p>Çerçeveye Kitlenmiş</p>
<a href="http://www.Kodhane.com/" target="_top">Buraya Tıkla!</a>
</body>
</html>

<html>
<body>
<p>
Bu bir Email Linki
<a href="mailto:admin@kodhane.com?Subject=Merhaba%20Kodhane">
Mail Gönder</a>
</p>
<p>
<b>Not:</b> Boşluklara için kullanmanız gereken harfler %20 dir.
 Böylece tarayıcımız mükemmel bir şekilde çalışır.
</p>
</body>
</html>

<html>
<body>
<p>
Bda Başka Bir Email Linki:
<a href="mailto:admin@kodhane.com?cc=destek@kodhane.com
&bcc=reklam@kodhane.com&subject=Telif%20Hakkı&body=Kullandığınız%20
içerik%20telif%20hakkı%20ile%20korunmaktatır.%20

Kırksekiz%20saat%20içinde%20kaldırmazsanız%20dava%20açılacaktır.!">
Maili gönder!</a>
</p>
<p>
<b>Not:</b> Boşlukları belirtmek için %20 kullanmamız gerekmektedir.
Bu tarayıcımızın mükemmel bir şekilde çalışmasını sağlar.
</p>
</body>
</html>

Ders tekrarı :

Etiket	Tanım
<a>	Link vermede kullanılır.

Konular: bağlantı, blant, bookmarks, ders, döküman, giving link, href, html, html dersleri, html öğren, hyperlink, ipucu, link, link nasıl verilir, link ver, link verme, makale, name, örnek, örnekler, self, tab, target, tekrar, top, tr, türkçe, türkçe html, url, ver, verme, web, yapı, yerimi

Yorum yok

Bu yazı için Yorum Beslemesi

Geri izleme bağlantısı http://www.kodhane.com/html-link.html/trackback