Perşembe , 19 Ekim 2017
Anasayfa » WEB » HTML » HTML Bağlantı Oluşturma

HTML Bağlantı Oluşturma

Bu yazıda HTML ile bağlantı oluşturma ve bağlantılarda kullanılan bazı önemli niteliklerin(attribute) kullanımını anlatacağım. HTML ile bağlantı oluşturmak için a etiketi kullanılmaktadır.

Bağlantı türlerini gruplandıracak olursak 4 ana gruba ayırabiliriz.

  1. Sayfa içi bağlantı oluşturma
  2. Sayfalar arası bağlantı oluşturma
  3. Dış sayfaya bağlantı oluşturma
  4. mail ve telefon bağlantısı oluşturma

Sayfa içi bağlantı oluşturma

Mevcut sayfa içinde sayfanın bir noktasından başka bir noktasına gitmek için kullanılır. İki kavramı birleştirerek sayfa için bağlantı oluşturulur. Hedeflenen nokta (bu kavrama çapa ismini veriyoruz.) ve hedeflenen noktaya gidecek bağlantı(buna link adını veriyoruz). Bağlantıya çapa adına # koyarak ulaşıyoruz.

Çapa: HTMLnin eski sürümlerinde çapalar için <a name=”çapaadı”>…</a> şekilinde kullanılar yapılırdı. Günümüzde name ve id değerine sahip bütün etiketler potansiyel bir çapadır.

Örn:

buradaki makale1 ve yorumlar çapanın adını vermektedir.

 

Gelelim bu çapalara nasıl ulaşacağımıza bağlantı için <a> etiketini kullandığımızı ve sayfa içindeki bir noktaya(id ve name değeri olan) ulaşmak için # ve çapa adını birlikte kullandığımızı söylemiştik.

Örn:

Şimdi gelelim iki kavramı birleştirmeye.  Örneğimizde iki tane link ve iki tane  çapa olacak. Sayfanın üstüne ve sayfanın altına isimleri ust ve alt olan iki tane çapa atacağız. Bu çapalara yönlenen iki tane bağlantı ( a ) oluşturacağız. Kaydırma çubuğu  olması için br etiketlerini sıklıkla kullanacağız.

Örn1:

Örn 2:

 

Sayfalar arası bağlantı oluşturma

Sayalar arası bağlantı yada site içinde her hangi bir dosyaya(resim, video, belge, müzik vs.) bağlantı vermek için dosyanın konumuna göre dört farklı durum söz konusudur.

  • Bağlantı verilecek sayfa aynı dizindeyse dosyanın tam adı href kısmına yazılır.
  • Bağlantı alt klasörlerdeyse klasor1/klasor2/dosyadi şekilinde alt klasörlere geçip yine dosya adı yazılır. Bu diğer dosyalar içinde geçerlidir.
  • Bağlantı üst klasördeyse  her çıkılacak üst klasör için ../ sembolü kullanılır. Kaç tane üst klasöre çıkılacaksa çıkılacak klasör kadar ../ sembolü kullanılır. (Örn: ../../../ üç üst klasör)
  • Bağlantı üst klasörlerden birinin içindeki bir dosyada ise üst klasöre çıkıp ilgili klasöre girilerek dosya adı bulunur. (Örn: ../../resim/resim1.jpg)

Şimdi gelelim yukarıdaki kavramları aşağıdaki resim ile açıklamaya;

screenshot_2

iletisim.html sayfasından hakkimizda.html sayfasına bağlantı veriyorsak bu bağlantı aynı dizindeki başka bir dosyaya bağlantı vermektir.

iletisim.html

 

index.html sayfasından sayfalar içindeki iletisim.html sayfasına bağlantı veriyorsak bu durumda alt klasördeki bir sayfaya bağlantı veriyoruz demektir.

index.html

 

hakkimizda.html sayfasından index.html sayfasına link veriyorsa üst klasörde bir sayfaya link veriyoruzdur.

hakkimizda.html

 

galeri.html sayfasından resimler içindeki res1.png dosyasına bağlantı veriyorsak üst klasör içindeki başka bir dosyaya link veriyoruz demektir.

galeri.html

Dış sayfaya bağlantı oluşturma

Dış sayfaya bağlantı oluşturmak için bağlantı verilecek sayfanın protokol  adından sonra :// sembolü ve web adresi yazılır. Protokol isimleri sıklıkla http olmasına rağmen https ve bir kaç tane daha farklı protokol bulunmaktadır.

Kısaca açıklayacak olursak http://webadresi şekilinde sıklıkla tanımlama yapılır. Eğer prokotol kullanılması unutulursa sayfa içinde yazdığımız isimde klasör arayacaktır.(muhtemelen olmadığı için sayfa bulunamadı hatası verecektir)

Kullanım:

 

mailto ve tel bağlantısı oluşturma

mailto günümüzde kullanımı pek olmamasına rağmen tel bağlantısı da bir o kadar hızlı kullanılmaya başlanmıştır.

mailto: link verilecek kişinin mailadresi yazılır. Bu özellik çalışması için bilgisayarda mail programının olması gerekir. Outlook gibi.

tel:telefon numarası verilecek kişinin numarası yazılır. Unutmayın bu özellik mobil cihazlarda çalışacaktır. Telefon numarasını çevirebileceğimiz bir cihaza ihtiyaç var sonuçta.

 

Bağlantılarda en çok kullanılan nitelikler

target: niteliğinin _blank değeri sıklıkla kullanılır. Sayfayı yeni bir sekmede açmak için target=”_blank”  olarak kullanılmaktadır.

download niteliği  ise dosya bağlantılarında kullanılır. dosyayı açmayıp kullanıcının bilgisayarına kaydeder.

 

Diğer nitelikler ve aldığı değerler için şu bağlantıya bakabilirsiniz.

 

Hakkında Hayri

İlginizi Çekebilir

HTML Label Kullanımı

Form kontrolleri için başlık bilgisini temsil etmek için kullanılmaktadır. Etiket içindeki yazıya tıklandığında form kontrolleri …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir