Serinin ilk bölümü: HTML Öğrenelim - 1
Serinin ikinci bölümü: HTML Öğrenelim - 2
Serinin üçüncü bölümü: HTML Öğrenelim - 3
Serinin dördüncü bölümü: HTML Öğrenelim - 4
Serinin beşinci bölümü: HTM Öğrenelim - 5
Github - Repository
Kaynak: W3schools
HTML Linkleri(Bağlantıları)
Bağlantılar tüm web sayfalarında bulunur.
Bağlantılar, kullanıcıların sayfadan sayfaya tıklamalarına izin verir.
Serinin ikinci bölümü: HTML Öğrenelim - 2
Serinin üçüncü bölümü: HTML Öğrenelim - 3
Serinin dördüncü bölümü: HTML Öğrenelim - 4
Serinin beşinci bölümü: HTM Öğrenelim - 5
Github - Repository
Kaynak: W3schools
HTML Linkleri(Bağlantıları)
Bağlantılar tüm web sayfalarında bulunur.
Bağlantılar, kullanıcıların sayfadan sayfaya tıklamalarına izin verir.
HTML Bağlantıları - Hyperlinks
HTML bağlantıları köprülerdir.
Bir bağlantıya tıklayıp başka bir belgeye atlayabilirsiniz.
Fareyi bir bağlantının üzerine getirdiğinizde, fare oku küçük bir ele dönüşecektir.
Not: Bir bağlantının metin olması zorunlu değildir. Bir bağlantı bir resim veya başka bir HTML öğesi olabilir.
HTML bağlantıları köprülerdir.
Bir bağlantıya tıklayıp başka bir belgeye atlayabilirsiniz.
Fareyi bir bağlantının üzerine getirdiğinizde, fare oku küçük bir ele dönüşecektir.
Not: Bir bağlantının metin olması zorunlu değildir. Bir bağlantı bir resim veya başka bir HTML öğesi olabilir.
HTML Bağlantıları - Syntax
HTML'de <a> etiketi bir hyperlink tanımlar.
Örnek kullanım:HTML'de <a> etiketi bir hyperlink tanımlar.
HTML:
<a href="url">Bağlantı metni</a><a> etiketinde en önemli özellik href özelliğidir. href özelliği bağlantının hedefini belirtir.
Yukarıdaki örnek kullanımda belirttiğimiz bağlantı metni kullanıcılar tarafından görülebilir.
Bağlantı metnine tıklandığında kullanıcı belirtilmiş olan URL adresine gönderilecektir.
Yukarıdaki örnek kullanımda belirttiğimiz bağlantı metni kullanıcılar tarafından görülebilir.
Bağlantı metnine tıklandığında kullanıcı belirtilmiş olan URL adresine gönderilecektir.
HTML:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.turkhackteam.org/">Türk Hack Team'i ziyaret edin.</a></p>
</body>
</html>
Varsayılan olarak, bağlantılar tüm tarayıcılarda aşağıdaki gibi görünecektir:
Ziyaret edilmemiş bir bağlantının altı çizili ve mavidir.
Ziyaret edilen bir bağlantının altı çizili ve mordur.
Aktif bir bağlantının altı çizili ve kırmızıdır.
Ziyaret edilmemiş bir bağlantının altı çizili ve mavidir.
Ziyaret edilen bir bağlantının altı çizili ve mordur.
Aktif bir bağlantının altı çizili ve kırmızıdır.
HTML Linkleri(Bağlantıları) - target özelliği
Bağlantılı sayfa mevcut tarayıcı penceresinde varsayılan(yani default olarak tanımlanmış) şekilde görüntülenecektir. Bunu değiştirmek için bağlantı için başka bir hedef belirtmelisiniz.
target özelliği bağlantılı belgenin nerede açılacağını belirtir.
target özelliği aşağıda belirttiğim eklentilerle birlikte kullanılabilir:
_self :Varsayılan eklentidir. Belgeyi, tıklandığı pencerede/sekmede açar.
_blank : Belgeyi yeni bir pencerede veya sekmede açar
_parent :Belgeyi üst çerçevede açar
_top : Belgeyi pencerenin tam gövdesinde açar
target özelliği bağlantılı belgenin nerede açılacağını belirtir.
target özelliği aşağıda belirttiğim eklentilerle birlikte kullanılabilir:
_self :Varsayılan eklentidir. Belgeyi, tıklandığı pencerede/sekmede açar.
_blank : Belgeyi yeni bir pencerede veya sekmede açar
_parent :Belgeyi üst çerçevede açar
_top : Belgeyi pencerenin tam gövdesinde açar
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>target özelliği </h2>
<a href="turkhackteam.org" target="_blank">THT'yi karşılayın.</a>
<p>Eğer target="_blank", ise bağlantı yeni bir tarayıcı penceresinde veya sekmesinde açılacaktır.</p>
</body>
</html>
Absolute URL vs. Relative URL(Mutlak URL'ler ve Göreli URL'ler)
Yukarıdaki her iki örnek de href özelliğinde mutlak bir URL (tam web adresi) kullanıyor.
Yerel bir bağlantı (aynı web sitesindeki bir sayfaya bağlantı), göreli bir URL ile belirtilir ("https://www" olmadan):
Yerel bir bağlantı (aynı web sitesindeki bir sayfaya bağlantı), göreli bir URL ile belirtilir ("https://www" olmadan):
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.turkhackteam.org">THT</a></p>
<p><a href="https://github.com/kartalaziz/THTHTMLOgrenelimSerisi">Reposityory/a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
</body>
</html>
HTML Linkleri - Bir görseli link(bağlantı) olarak kullanmak
Bir görseli link olarak kullanmamız için yapmamız gereken <img> etiketini <a> etiketinin içerisine yerleştirmektir.
Örnek:
Bir görseli link olarak kullanmamız için yapmamız gereken <img> etiketini <a> etiketinin içerisine yerleştirmektir.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Görsellerin Bağlantı Olarak Kullanılması</h2>
<p>Aşağıdaki görsel bir bağlantıdır. Görmek için tıklayınız.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML Öğrenelim - THT" style="width:42px;height:42px;"></a>
</body>
</html>
E-mail adresini bağlantı olarak eklemek
Kullanıcının yeni bir e-posta göndermesine izin vermek için bir bağlantı oluşturmak istiyorsak href özelliğinin içinde mailto: ifadesi kullanılır.
Örnek:
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>E-mail adresini bağlantı olarak eklemek
</h2>
<p>Kullanıcının yeni bir e-posta göndermesine izin vermek için bir bağlantı oluşturmak istiyorsak href özelliğinin içinde mailto: ifadesi kullanılır.
</p>
<p><a href="mailto:selamınaleykü[email protected]">Mail Gönder</a></p>
</body>
</html>
Butonları Bağlantı(Link) Olarak Kullanmak
Bir HTML butonunu bağlantı olarak kullanmak için biraz JavaScript kodu eklemeniz gerekir.
JavaScript, bir buton tıklaması gibi belirli olaylarda ne olacağını belirtmenize olanak tanır:
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Butonları Bağlantı(Link) Olarak Kullanmak</h2>
<p>Türk Hack Team'e ulaşmak için tıklayınız.</p>
<button onclick="document.location='https://www.turkhackteam.org/'">HTML Öğrenelim - Green Team - vancoondehni</button>
</body>
</html>
Link(Bağlantı) Başlıkları
title özelliği bir element hakkında ekstradan bilgi sağlamak için kullanılır. Bu bilgiler genellikle mouse üzerine geldiğinde ipucu metni olarak gösterilir.
Örnek:
title özelliği bir element hakkında ekstradan bilgi sağlamak için kullanılır. Bu bilgiler genellikle mouse üzerine geldiğinde ipucu metni olarak gösterilir.
Örnek:
HTML:
<!DOCTYPE html>
<html lang="en-TR">
<body>
<h2>Link Başlıkları</h2>
<p>title özelliği bir element hakkında ekstradan bilgi sağlamak için kullanılır. Bu bilgiler genellikle mouse üzerine geldiğinde ipucu metni olarak gösterilir..</p>
<a href="https://www.turkhackteam.org" title="THT">Türk Hack Team'i ziyaret edin.</a>
</body>
</html>
HTML Linkleri(Bağlantıları) - Farklı Renkler
Bir HTML bağlantısı, ziyaret edilmiş olmasına, ziyaret edilmemiş olmasına veya etkin olmasına bağlı olarak farklı renklerde görüntülenir.
HTML Bağlantı Renkleri
Varsayılan olarak, şu şekilde bir bağlantı görünecektir (tüm tarayıcılarda):
-Ziyaret edilmemiş bir bağlantının altı çizili ve mavidir.
-Ziyaret edilen bir bağlantının altı çizili ve mordur.
-Aktif bir bağlantının altı çizili ve kırmızıdır.
CSS kullanarak bağlantı durumu renklerini değiştirebilirsiniz:
HTML Bağlantı Renkleri
Varsayılan olarak, şu şekilde bir bağlantı görünecektir (tüm tarayıcılarda):
-Ziyaret edilmemiş bir bağlantının altı çizili ve mavidir.
-Ziyaret edilen bir bağlantının altı çizili ve mordur.
-Aktif bir bağlantının altı çizili ve kırmızıdır.
CSS kullanarak bağlantı durumu renklerini değiştirebilirsiniz:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: blue;
text-decoration: none;
}
a:visited {
color: pink;
background-color:black;
text-decoration: none;
}
a:hover {
color: red;
background-color: gray;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: orange;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Bağlantı Renkleri</h2>
<p>Bağlantılar için tanımlanmış default renkleri değiştirebilirsiniz.</p>
<a href="html_images.asp" target="_blank">Selamın Aleyküm THT</a>
</body>
</html>
Bağlantı Butonları
Bir bağlantı, CSS kullanılarak bir buton olarak da biçimlendirilebilir:
Bir bağlantı, CSS kullanılarak bir buton olarak da biçimlendirilebilir:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Bağlantı Butonları</h2>
<p>Bir bağlantı, CSS kullanılarak bir buton olarak da biçimlendirilebilir:</p>
<a href="https://www.turkhackteam.org" target="_blank">Bu bir bağlantıdır. - THT</a>
</body>
</html>Yukarıdaki kodun çıktısı:
HTML Bağlantıları - Yer İmleri Oluşturun
Yer imleri, okuyucuların bir web sayfasının belirli bölümlerine atlayabilmeleri için kullanılabilir.
Bir web sayfası çok uzunsa yer imleri yararlı olabilir.
Bir yer imi oluşturmak için: önce yer imini oluşturun, ardından ona bir bağlantı ekleyin.
Bağlantı tıklandığında, sayfa aşağı veya yukarı kaydırılarak yer iminin bulunduğu konuma gelir.
Örnek:
Yer imleri, okuyucuların bir web sayfasının belirli bölümlerine atlayabilmeleri için kullanılabilir.
Bir web sayfası çok uzunsa yer imleri yararlı olabilir.
Bir yer imi oluşturmak için: önce yer imini oluşturun, ardından ona bir bağlantı ekleyin.
Bağlantı tıklandığında, sayfa aşağı veya yukarı kaydırılarak yer iminin bulunduğu konuma gelir.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<p><a href="#C10">10. Bölüme atlamak için tıklayınız</a></p>
<h2>Bölüm 1</h2>
<p>Merhaba</p>
<h2>Bölüm 2</h2>
<p>THT</p>
<h2>Bölüm 3</h2>
<p>Ben</p>
<h2 id="C4">Bölüm 4</h2>
<p>Aziz</p>
<h2>Bölüm 5</h2>
<p>Bu da HTML Öğrenelim Serisi</p>
<h2>Bölüm 6</h2>
<p>Serinin 6. bölümü</p>
<h2>Bölüm 7</h2>
<p>Konumuz bağlantılar</p>
<h2>Bölüm 8</h2>
<p>Bağlantılara yer imleri ekleme</p>
<h2>Bölüm 9</h2>
<p> ba bla bla</p>
<h2 id="C10">Bölüm 10</h2>
<p>ba bla bla</p>
<h2>Bölüm 11</h2>
<p> ba bla bla</p>
<h2>Bölüm 12</h2>
<p> ba bla bla</p>
<h2>Bölüm 13</h2>
<p> ba bla bla</p>
<h2>Bölüm 14</h2>
<p> ba bla bla</p>
<h2>Bölüm 15</h2>
<p>ba bla bla</p>
</body>
</html>Yukarıdaki kodun çıktısı:
