Html ile Web İşlemleri 24 - Bağlantı Elemanları
BAĞLANTI ELEMANLARI
HTML’nin önemli özelliklerinden biri, metin ya da resim üzerinden başka bir belgeye bağlantı (köprü) kurabilmesidir. HTML bağlantıları link ya da köprü olarak da ifade edilir. Bir bağlantıya tıklandığında başka bir belgeye veya aynı belge içindeki farklı bir bölüme geçilir. Fare imleci, bağlantının üzerine geldiğinde küçük bir ele dönüşür.
1. HTML Bağlantı Söz Dizimi
<a> etiketi, HTML belgelerinde bağlantı oluşturur. A harfi İngilizcedeki “anchor” kelimesinin kısaltmasıdır. Anchor, Türkçede gemilerde kullanılan “çıpa” anlamındadır (Görsel 3.39). HTML belgesi açısından ise “üzerine tıklanabilen metin” anlamına gelir. Bağlantı (köprü) etiketi <a> </a> şeklindedir, href özelliği ile kullanılır. <a> etiketi bir adres belirterek başka web adreslerine ya da aynı sayfanın farklı bölümlerine köprü oluşturmak veya resimlere ve e-posta adresine link vermek için kullanılır. <a> etiketinin kullanımı aşağıda gösterilmiştir.
<a href="https://mtegm.meb.gov.tr" target="_blank">mtegm.meb.gov.tr</a>
 |
| Görsel 3.39: <a> etiketi anlamı, çapa (anchor) |
Bağlantılar tüm tarayıcılarda varsayılan olarak şu şekilde görünür:
• Ziyaret edilen bir bağlantının altı çizili ve mordur.
• Etkin bir bağlantının altı çizilidir ve kırmızıdır.
Bağlantılardan farklı görünüm elde etmek için CSS kullanılır.
1.1. URL Yapısı
dosyaların web ya da yerel (local) disk üzerinde yerini işaret eder. Bilgi işlem terimlerinden biri
olan URL’nin açılımı Uniform Resource Locator’dır.
URL’nin genel yapısı şu üç kısımdan oluşur:
• Erişilecek kaynak tipi (www, ftp vb.)
• Sunucu adresi
• Dosya adı
KaynakTipi://host.saha [:port]/yol/DosyaAdı
1.2. Href Özelliği
video eklenebilir. <a> etiketi içinde href özelliği ile hedef belirtilir.
Uygulama
Href özelliğinin kullanımı ile ilgili yöntemleri yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: <body> blokunda hedefsiz bağlantı oluşturunuz.
<a href="#"> Hedefsiz bağlantı </a>
3. Adım: Aynı sayfada “#cipa” adında etiket bağlantısı oluşturunuz.
<a href="#cipa"> Aynı sayfada bir etiket </a>
4. Adım: Aynı sitede sayfa bağlantısı oluşturunuz.
<a href="aynisite-sayfa.html"> Aynı sitede sayfa bağlantısı </a>
5. Adım: Aynı sitede dosya bağlantısı oluşturunuz.
<a href="aynisite-dosya.pdf"> Aynı sitede dosya bağlantısı </a>
6. Adım: Farklı bir siteye bağlantı oluşturunuz.
<a href="https://mtegm.meb.gov.tr"> Başka bir site bağlantısı </a>
7. Adım: Farklı sitede sayfa bağlantısı oluşturunuz.
<a href=" https://mtegm.meb.gov.tr/www/sss.php"> Başka sitede sayfa bağlantısı </a>
8. Adım: Farklı sitede dosya bağlantısı oluşturunuz.
_59_03_220.pdf"> Başka sitede dosya bağlantısı </a>
9. Adım: Oluşturduğunuz HTML belgesini tarayıcıda açıp bağlantıları kontrol ediniz.
kullanımı verilmiştir.
|
Bağlantı
Metni |
Örnek |
|
Metin |
<a
href="index.html">tıklayın</a> |
|
Kurum Adı |
<a
href="https://mtegm.meb.gov.tr">Mesleki ve Teknik
Eğitim</a> |
|
Başlık |
<a
href="ders.html">CANLI DERS</a> |
|
Cümle |
<a
href="kitap.html">Kitabı görmek için tıklayınız</a> |
|
Resim |
<a
href="asistan.html"><img
src="asistan.gif"></img></a> |
|
Ses |
<a
href="mars.html"><audio
src="mars.mp3"></audio></a> |
|
Video |
<a
href="video"><video
src="ebavideo.ogg"></video></a> |
1.3. Target Özelliği
yeni bir pencere ya da sekmede açar. “_self” değeri bağlantıyı aynı çerçevede açar (varsayılan
değer). “_parent” değeri bağlantıyı bir üst çerçevede açar. “_top” değeri bağlantıyı en üst
çerçevede açar.
2. Sayfalar Arası Bağlantılar
Aynı sitedeki başka bir sayfaya gitmek için bağlantılar oluşturulabilir (Görsel 3.40). Sayfalar arasında bağlantı oluşturmak gezinmeyi kolaylaştırır.
 |
| Görsel 3.40: Sayfalar arası bağlantı |
Sayfa1 Kodları
<a href="klasör\sayfa2.html">SAYFA2</a>
Sayfa2 Kodları
<a href="klasör\sayfa1.html">SAYFA1</a>
3. Site Dışına Bağlantı
HTML belgesinde, farklı bir siteye gidilmesi için site dışı bağlantılar oluşturulabilir. Site dışı bağlantılar, kullanıcıyı farklı bir siteye yönlendirir (Görsel 3.41). Kullanıcı bağlantının bulunduğu siteden ayrılmış olur. Site dışı verilen linklerin site içi linklerden tek farkı, hedef değerinde gidilmesi istenen sitenin adının yazılı olmasıdır.
 |
| Görsel 3.41: Site dışına bağlantı |
<a href="https://www.eba.gov.tr/index.html">SİTE</a>
<a href="https://www.eba.gov.tr klasör/sayfa2.html">SİTE</a>
Hiç yorum yok