Merhaba.

HTML eğitimlerimize bu yazımda bağlantılara, sayfalara, video, ses ve indirme dosyalarına link verme işlemini anlatarak devam ediyorum.

Web Matrix’i açalım. Bir önceki dersten kaldığımız yerden kodlamaya devam edelim.

Farklı Sayfaya Link Verme

Bir internet sayfası içinde pek çok farklı sayfaya gitmenizi sağlayan olay link vermedir.

Bu işlem

<a href=”Yönlendirme Kaynağı/url”>Bağlantı Adı (Görünen Yazı)</a>

şeklinde gerçekleştirilir.

Şimdi istediğimiz bir sayfaya link verelim.

Gördüğümüz gibi link oluştu. Artık bu linke tıkladığımızda bizi Industryolog Anasayfasına götürecektir.

Linki Yeni Sayfada Açtırmak

Şimdi gelin biraz daha detaylarına bakalım.

Bu gördüğümüz haliyle linke tıkladığımızda yeni sayfayı var olan sayfamızın üzerinde açtığını görürsünüz. Ancak ziyaretçinin başka bir sayfaya giderken bizim sayfadan tamamen çıkması bir dezavantajdır gitmesini önlemek gerek. Bunu sayfayı yeni sekmede açtırarak çözebiliriz.

Bunun için yapmanız gereken kodlama a tag’i içerisinde 

target=”_blank”

ifadesini yazmaktır.

Target 4 farklı parametre alır. Bunları WebMatrix üzerinde görebilirsiniz. Deneyerek öğrenebilirsiniz.

Şimdi sayfanızı yenileyip linke tıkladığınızda yeni sayfada açtığını göreceksiniz.

Link Renklendirme

Normal bir metin renklendirmekten hiç bir farkı yoktur. a tag’i içine style özelliğine 

style=”color: renkdeğeri”

yazmanız yeterli olacaktır.

Text Decoration Özelliği

Linkin altının çizili olması biraz tasarım açısından eksik ve göze hoş gelmeyen bir durum gibi size de böyle geliyorsa gelin bu altındaki çizgiyi kaldıralım. Yapmamız gereken işlem text-decoration özelliğini none yapmaktır.

Stille ilgili özelliklerin tümü style içine yazılır.

Font Değiştirme

Link daha belirgin hale getirmek için fontunu ve fontun boyutunu değiştirelim.

font-family : fontu değiştirir.

font-size: fontun boyutunu belirler.

Sayfa İçinde Link Verme

Güzel olaylardan biride sayfa içinde istediğiniz alana link verebilme olayıdır.

Çoğunuz şahit olmuşsunuzdur, bir sayfanın sonuna kadar geldiğinizde yukarı doğru bir ok size en başa gidebileceğinizi işaret eder. İşte bunu yapabildikleri kodlama sayfa içi link vermek olayıdır.

Şimdi öncelikle biraz kalabalık bir paragraf yaratalım. 3 tane başlığımız olsun. En başa bu üç başlıktan, bu bölümlere aynı sayfanın içinde link verelim.

Bunu yapmak için nereye link vericeksek o satıra şu kodlamayı yapmamız gerek.

<a name=”bastaraf”>Gidilecek Bölüm İsmi</a> 

tırnaklar içindeki değer size özel bir değerdir. İstediğiniz ismi verebilirsiniz.

Daha sonra bu bölüme link vermek istediğimde yapmam gereken şudur.

<a href=”#bastaraf”>Git</a> 

Kodlama içinde daha net anlayacağız.

Burada dikkat etmeniz gereken kodlamalar şuralardır.

Gitmek istediğimiz alana a taginin name özelliğine yazdığımız isimle belirliyoruz. Dışarıya nasıl görüneceğini ise a tagi arasındaki değerle belirtiyoruz.

Bu belirlenen bölgelere gitmek içinde istediğimiz yerde a tag’inin href özelliğine name değerini başına # (altgr+3) işaretini koyarak yapıyoruz. 

Nasıl göründüğüne bakalım.

Fazla uzun bir metin girmediğim için tarayıcının genişliğini küçülterek denedim. Burada örneğin ESpor Nedir 3 linkine tıkladığınızda sizi o başlığa odaklayacaktır.

Böylece sayfa içinde istediğiniz yerden istediğiniz yere ulaşabilirsiniz.

Bir sonraki yazımda görüşmek üzere. 

Yorumlarınızı eksik etmeyiniz.

 


muratbilginer