Html Dersleri 3: Bağlantı (Link) Oluşturma

DERS html

Html derslerimizin üçüncüsü sayfalarımız arasında gezinti yapmak için kullandığımız, aslında web sitelerinin temelini oluşturan bağlantı oluşturma etiketi. Web sayfaları yalnızca tek bir sayfadan oluşmaz. anasayfa, ürünler, kategoriler, iletişim gibi bölümlerin her biri farklı bir web sayfasıdır. Birinden diğerine geçiş yapmak içinse bunlar arasında bağlantı oluşturmak gerekir. Aşağıdaki resimde görüleceği üzere sitemin ana sayfasının bir bölümünde ki bağlantıları sayarak göstermeye çalıştım. Sayıyla belirtilen kısımlara tıkladığınızda farklı sayfalara bağlantı sağlanır.

Html dilindeki tüm bağlantılar <a> etiketi ile sağlanır. <a> etiketi bazı parametreler yardımıyla kullanılır.

Site İçi Bağlantı Oluşturma

<a> etiketi yardımıyla siteniz içerisindeki diğer sayfalara bağlantı oluşturabilirsiniz. Bu işlem için en az 2 adet html uzantılı sayfanızın olması gerekir.123456789<html><head><title>Bağlantı Oluşturma</title></head><body>Bizimle bağlantıya geçmek için aşağıdaki bağlantıya tıklayın. </br><a href=”iletisim.html”>İLETİŞİM</a></body></html>

Yukarıdaki kodu html uzantısı ile kaydettiğinizde aşağıdaki gibi bir ekran çıktısı oluşur. Ziyaretçi İLETİŞİM yazısına tıkladığında iletisim.html sayfası mevcutsa bu sayfanın içeriği görüntülenir. Tabi bu iki sayfanın aynı dizin (klasör) içerisinde olması gerekir. Dikkat ettiyseniz <a> etiketinin href parametresi yönlendirilecek sayfayı gösterir.

html link

Eğer link vereceğiniz sayfa başka bir klasör içerisindeyse aşağıdaki şekilde bağlantı oluşturulabilir.1<a href=”sayfalar/iletisim.html”>İLETİŞİM</a>

Site Dışı Bağlantı Oluşturma

Site dışı dediğimizde kendimize ait olmayan farklı bir site kastedilir. Örneğin sitenizden facebook sayfanıza veya youtube kanalınıza bağlantı oluşturabilirsiniz.1<a href=”https://www.facebook.com/”>FACEBOOK SAYFAMIZ</a>

Dikkat: Burada dikkat edilecek kısım site adresinin tam ve doğru şekilde yazılıp, başına http:// veya https:// önekinin eklenmesidir.

Resim Dosyasına Bağlantı Oluşturma

Sitenizde bazı durumlarda küçük resimlerin üzerine tıklandığında resmin büyük halinin veya ilgili içeriğin görüntülenmesini isteyebilirsiniz. Buda aslında bir link oluşturma işlemidir. Derslerimde web sayfalarına resim dosyaları eklemeyi daha göstermedim. Fakat bu işlem <a> etiketinin çok fazla kullanıldığı kısımlardan biri olduğu için konuya değinmekte fayda var.123456789<html><head><title>Bağlantı Oluşturma</title></head><body>Resmi tam boyutunda görmek için üstüne tıklayınız. </br><a href=”resimler/buyukresim.jpg”><img src=”resimler/kucukresim.jpg”></img></a></body></html>

Bu örnekte resimler klasörü içerisindeki resmin küçük hali sayfa içerisinde direk görüntülenmektedir. Resmin üzerine gelip tıkladığınızda aynı klasör içerisindeki resmin büyük hali gösterilir. Eğer küçük resme tıklandığında farklı bir sayfa görüntülenmesini istiyorsanız sayfanın ismini href parametresine yazmanız yeterli olacaktır.

E-posta adresime bağlantı oluşturmak günümüzde çok fazla kullanılmadığı için değinmedim. İhtiyaç duyarsanız internetten araştırarak kolayca bulabilirsiniz.

Html ile link (bağlantı) oluşturma işlemini tek bir etiketle kolayca yaptık. Konuyla ilgili anlaşılmayan kısımları sorabilirsiniz. Kolay gelsin.

0 views