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

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.

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.

Eğer link vereceğiniz sayfa başka bir klasör içerisindeyse aşağıdaki şekilde bağlantı oluşturulabilir.

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.

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.

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.