HTML Link

SurHan · 22 Ara 2018

[font=Verdana, sans-serif]Tüm internet linkler üzerine kuruludur.--

[font=Verdana, sans-serif]HTML sayfaları birbirine linkler ile bağlanır.--
[font=Verdana, sans-serif]Linkler kullanıcıların tıkladıklarında başka sayfaya geçmelerini sağlar.--

HTML ile Bir Sayfadan Diğerine Bağlantı Yapmak-
[font=Verdana, sans-serif]Web siteleri yüzlerce hatta binlerce sayfadan oluşur.--
[font=Verdana, sans-serif]Bu sayfalar arasında gezinmek için linkleri kullanırız.--
[font=Verdana, sans-serif]İnternette farenin işaretçisini bir linkin üzerine götürdüğünüzde ok simgesi el simgesine dönüşür.--
[font=Verdana, sans-serif]Bu sayfada tıklayabildiğiniz her şey bir linktir.--
[font=Verdana, sans-serif]Not: Linkler sadece düz metinlerden oluşmaz. Herhangi bir HTML elementi link olabilir.
Örneğin resimlere de link verebilirsiniz.--

[font=Verdana, sans-serif]HTML Link Nasıl Oluşturulur?--
[font=Verdana, sans-serif]Bir link bir web sitesine, bir HTML belgesine veya herhangi bir dosyaya verilebilir.--

Kod:

<a>

[font=Verdana, sans-serif]
etiketi link vermek için kullanılan etikettir.--
[font=Verdana, sans-serif]Örnek---

Kod:

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

-
-

Kod:

href

[font=Verdana, sans-serif]
özelliğine verilen URL değeri başka bir HTML sayfası, bir web sitesi veya herhangi bir dosya olabilir.--
[font=Verdana, sans-serif]Başka bir web sitesine link şu şekilde verilir:--
[font=Verdana, sans-serif]Örnek---

Kod:

<a href="https://turkhacks.com">turkhacks.com sitesine git</a>

Kod:

href

[font=Verdana, sans-serif]
özniteliği link tıklandığında yönlendirilecek adresi içerir.--

Kod:

link yazısı

[font=Verdana, sans-serif]
web sayfasında kullanıcının gördüğü kısımdır.--
[font=Verdana, sans-serif]Link tıklandığında kullanıcı uzmanim.net adresine yönlendirilecektir.--

Yerel Linkler-
[font=Verdana, sans-serif]Yukarıdaki örnekte biz başka bir web sitesine giden link oluşturduk.--
[font=Verdana, sans-serif]Yerel linkler geçerli web sitesi içinde verilen linklerdir.--
[font=Verdana, sans-serif]Örnek---

Kod:

<p>
    <a href="/html">HTML Dersleri</a>
</p>
<p>
    <a href="/css">CSS Dersleri</a>
</p>

HTML Link Renkleri-
[font=Verdana, sans-serif]Varsayılan olarak bir link tüm internet tarayıcılarda şu renklerde görüntülenir:--

Bir link hiç tıklanmadıysa, ziyaret edilmediyse, altı çizgili ve mavi
Bir link daha önce tıklandıysa, ziyaret edildiyse, altı çizgili ve mor
Bir aktif link altı çizgili ve kırmızı (aktif link: link tam tıklandığı andaki durumu)

[font=Verdana, sans-serif]Fakat bu renkler varsayılan ve siz CSS ile rengini değiştirmediğinizde görünen renklerdir.--
[font=Verdana, sans-serif]CSS ile linklerin tüm bu hallerinin renklerini değiştirmek mümkündür.--
[font=Verdana, sans-serif]Örnek---

Kod:

<html>
<head>
<style>
a:link {
    color: green;    
    text-decoration: none;
}
a:visited {
    color: yellow;   
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: yellow;
    text-decoration: underline;
}
a:active {
    color: black;    
}
</style>
</head>
<body>
      <a href="/html">HTML Öğren</a> 
</body>
</html>

HTML Link - target Özniteliği-

Kod:

target

[font=Verdana, sans-serif]
özniteliği ile tıklanan linkin nasıl açılacağı belirlenir.--

Kod:

target

[font=Verdana, sans-serif]
özniteliği şu değerlere sahip olabilir:--

_blank - tıklanan link yeni bir tarayıcı penceresinde açılır.
_self - tıklanan link yine aynı tarayıcı penceresinde açılır. Bu varsayılandır.
_parent - tıklanan link frame (çerçeve) içinde açılır. Frame konusunda sonraki derslerde bilgi verilecektir.
_top - çerçeve içindeki bir link tıklandığında açılan sayfa çerçeve dışında açılır.
çerçeve adı- çerveve adı verilerek belge o çerçeve içinde açılabilir.

[font=Verdana, sans-serif]Örnek---

Kod:

<a href="https://uzmanim.net" target="_blank">uzmanim.net'i ziyaret et</a> 
<p>Link tıklandığında bu pencere sabit duracak ve link yeni pencerede açılacak</p>

[font=Verdana, sans-serif]_top özelliği biraz daha anlaması zor bir değer olabilir. Şu örnekle daha iyi anlaşılacaktır:--
[font=Verdana, sans-serif]Örnek---

Kod:

<p>Bu sayfa bir çerçeveden oluşmaktadır.</p>
<a href="https://uzmanim.net" target="_top">uzmanim.net'e git</a>

[font=Verdana, sans-serif]Kendin Dene sayfası frame (çerçeve) içeren bir sayfadır. _top bu sayfada daha anlaşılır olacaktır.--

HTML Link - Bir Resme Link Verme-
[font=Verdana, sans-serif]Bir resme link vermek istiyorsanız, resim HTML kodunu <a> etiketi ile sarmanız gerekir:--
[font=Verdana, sans-serif]Örnek---

Kod:

<a href="https://uzmanim.net">

  <img src="/img/ice-age.jpg" alt="Buz Devri"/>

</a>

[font=Verdana, sans-serif]Not: Resmin etrafında görünen border yanı sınır çizgisini gizlemek isterseniz --

Kod:

style="border:0"

-
kodundan yararlanabilirsiniz.-

HTML Link - Sayfa İçinde Bir Bölüme Link Vermek-
[font=Verdana, sans-serif]HTML belgeniz içinde uzun bir yazınız varsa, bu yazının belirli bir bölümüne link vermek isteyebilirsiniz.--
[font=Verdana, sans-serif]Sadece yazılar için değil, aşağıya doğru uzayan uzun bir sayfanız varsa yine bu sayfada belirli bir bölüme link verebilirsiniz.--
[font=Verdana, sans-serif]Bunun için yapmanız gereken link vermek istediğiniz yere id sahibi bir HTML elementi eklemektir:--
[font=Verdana, sans-serif]Örnek---

Kod:

<p><a href="#bolum2">Bölüm 2'ye git</a></p>

<h2>Bölüm 1 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2  id="bolum2">Bölüm 2 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 3 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 4 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 5 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 6 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 7 </h2>
<p>Bu bölüm şunlardan oluşur</p>
<h2>Bölüm 8 </h2>
<p>Bu bölüm şunlardan oluşur</p>

[font=Verdana, sans-serif]Bunları Bilmelisin:--

Başka bir web sitesine link vermek istiyorsan http:// veya https:// gibi tam adres olarak yazmalısın.
Web sitenin içerisindeki bir klasöre link vermek istiyorsan linkin /klasöradı/dosyaadışeklinde olmalı.
Link vermek istediğin HTML belgesi linki içeren HTML belgesi ile aynı klasördeyse sadece dosya adını yazman yeterli.

HTML Link

SurHan

SurHan