HTML Etiketler 5

04.01.2019

808

Bağlantı (Köprü – Link) oluşturmanın nasıl yapıldığını öğreneceğiz.

Bağlantı (Köprü – Link) Oluşturma

Web sayfalarında tıklandığında başka sayfalara gitmemizi sağlayan linkler oluşturmak için <a>…</a> etiketi kullanılır.

Parametre	Değer	Açıklama
href	URL Sayfa adı Resim adı Bölüm adı E-posta adresi	Linkin tıklandığında gideceği hedefin adresidir. Bu bir başka sitenin URL’si, site içindeki başka bir sayfanın yada resmin adı, aynı sayfa içindeki bölümün adı veya e-posta adresi olabilir.
name	İsteğe bağlı bir isim olabilir	Aynı sayfa içinde linkler oluşturmak için linkin gideceği yerde işaret oluşturmak için kullanılır. Bir başka deyişle sayfa içinde bölüm oluşturmak için kullanılır. Sonra aynı sayfadaki linkler bu bölümlere yönlendirilir.
target	_blank _parent _self _top	_blank: Bağlantıyı yeni bir pencerede açar. _parent: Açılan bağlantı, açık sayfanın yerinde bağlantıyı açar. _self: Bağlantıyı aynı pencere içerisinde açar. _top: Bağlantıyı aynı pencere içerisinde sayfanın en üstünden itibaren açar.

Genel olarak 4 çeşit bağlantı vardır. Bunlar;

Site içi bağlantılar
Site dışı bağlantılar
Sayfa içi bağlantılar
E-posta adresine bağlantı

1.Site İçi Bağlantılar

Site içi bağlantılar ile kendi sitemiz içindeki farklı bir sayfaya link veririz. Gidilecek olan sayfanın adresi bulunduğumuz sayfaya göre yazıldığı için göreceli yol kullanılmış olur. Göreceli yollarda; “Bulunduğumuz yere göre gitmek istediğim sayfa nerede kalıyor?” sorusunu sormak gerekir.

Eğer gitmek istediğimiz sayfa;

Bulunduğumuz yerde ise: <a href=“sayfa.html”>Git</a>
Bir üst dizinde ise: <a href=“../html”>Git</a>
İki üst dizinde ise: <a href=“../../html”>Git</a>
Bir alt dizinde ise: <a href=“dizin/html”>Git</a>
İki alt dizinde ise: <a href=“dizin1/dizin2/sayfa.html”>Git</a>

Bir üst dizine çıkmak için ../ kullandık. Bir dizine girmek için dizin/ ifadesi kullanılmıştır. Buradan örnekle diyelim ki bir üst dizindeki videolar dizininde bulunan flash.html sayfasına giden bir link vermek istersek:

<a href=“../videolar/flash.html”>Git</a> şeklinde bir adres yazmalıyız.

2.Site Dışı Bağlantılar

Site dışı bağlantılar, tıklandığında başka bir siteye giden bağlantılardır. Bu tür bağlantılarda gidilecek sitenin tam URL’si yazılmalıdır.

Örnek 1: Aşağıdaki site dışına verilen bağlantıyı oluşturalım.

Google arama motoruna gitmek için <a href=“http://www.google.com.tr”>tıklayınız.</a>

Linkin üzerinde gelindiği zaman tarayıcının alt kısmında hedefi görülmektedir. Bu sayede linke tıklamadan nereye gideceği, adresin yanlış olup olmadığı kontrol edilebilir.

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

3.Sayfa İçi Bağlantılar

İçeriği çok uzun olan sayfalarda kullanılan bağlantılardır. Genellikle sayfa içindeki başlıklar en üstte bir liste şeklinde verilir. İlgili başlığa tıklandığında aynı sayfa içinde o başlığın açıklandığı kısma gidilir. Bunun için gidilecek yere bir işaret konulur. Bu işareti koymak için <a name=“işaret adı”>…</a> etiketi kullanılır.

Örneğin; Anakart’a tıklandığında git1’e gidilecekse öncelikle git1 yazısına bir işaret koymak gerekir sonra Aakart yazısına bu işarete gidecek şekilde bağlantı verilir. İşarete giden bağlantıda adresin önüne # işareti konulur.

Örnek 2: Aşağıdaki sayfa içine verilen bağlantıyı oluşturalım.

<html>
	<head>
		<title>Sayfa İçi Bağlantılar</title>
	</head>
	<body>
		<a href="#git1">Anakartlar</a>
		<p>Anakartlar değişik ebatlarda yapılmaktadırlar. Anakartları kasa içine monte edebilmek için
		montaj deliklerinin kasadaki montaj deliklerine denk getirilmesi önemlidir...</p>
		<a name="git1">Anakart: Anakart, bir bilgisayarın tüm parçalarını üzerinde barındıran ve bu parçaların iletişimini sağlayabilen elektronik bir devredir. </a>
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

Örnek 3: Aşağıdaki sayfa içine verilen bağlantıları oluşturalım.

<html>
	<head>
		<title>Sayfa İçi Bağlantılar</title>
	</head>
	<body>
		<ul>
			<li><a href="#ubuntu">UBUNTU</a></li>
			<li><a href="#fedora">FEDORA</a></li>
			<li><a href="#debian">DEBIAN</a></li>
			<li><a href="#mint">LINUX MINT</a></li>
			<li><a href="#opensuse">OPENSUSE</a></li>
			<li><a href="#pardus">PARDUS</a></li>
		</ul>
		<h1><a name="ubuntu">UBUNTU</a></h1>
		…………
		<h1><a name="fedora">FEDORA</a></h1>
		…………
		<h1><a name="debian">DEBIAN</a></h1>
		…………
		<h1><a name="mint">LINUX MINT</a></h1>
		…………
		<h1><a name="opensuse">OPENSUSE</a></h1>
		…………
		<h1><a name="pardus">PARDUS</a></h1>
		…………
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

4.E-Posta Adresine Bağlantı

Sayfa içerisinde tıklandığında e-posta adresine mail göndermek için kullanılan bağlantılardır. Bu bağlantılara tıklandığında sistemdeki e-posta programı (Outlook, Thunderbird, Kmail, …) mail göndermek için açılır. Href ile mail adresi belirtilirken önüne mailto: ifadesi eklenir.

Örnek 4: bilisimizle@gmail.com adresine mail gönderen linki oluşturalım.

<html>
	<head>
		<title>E-Posta Adresine Bağlantı</title>
	</head>
	<body>
		Soru, öneri, şikayet ve diğer düşüncelerinizi bize iletmek için <a href="mailto:bilisimizle@gmail.com">tıklayınız.</a>
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.