HTML SAYFA İÇİ BAĞLANTI OLUŞTURMA

HTML ile Sayfa içi bağlantıları oluşturmak için , sayfa dışı bağlantılar için de kullandığımız  "a" etiketi kullanılır. Etiketin Name parametresi ile sayfa içerisinde bir yer tanımlanarak , href parametresi ile tanımladığımız yere link verilir.. 

Sayfa içi bağlantılar TEK SAYFA WEB SİTELERİ (One Page) için temel navigasyonu oluşturur. Örnek olarak  Canvilla Web Sİtesi site menüsünü inceleyebilirsiz.

YER İŞARETİ OLUŞTURMAK

Sayfada herhangi bir yere <a name=""></a>  yapısı ile bir yer işareti (çapa) ekleyebiliyoruz. Sayfa içinde bir yere isim veriyoruz gibi düşünebilirsiniz.. Yer işareti adını   belirlerken türkçe karakter kullanılmamalıdır.

<h2><a name="calismalar"></a> ÇALIŞMALAR </h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Aperiam accusamus quaerat repellendus adipisci nisi expedita 
quo velit veritatis sint, neque aliquid corporis quibusdam
 ipsum iure quia temporibus totam. Eos, repellat.
</p>

Yukarıda , sayfa içinde "calisma" adında bir yer işareti belirlenmiş olur. Bu yere link verildiğinde tarayıcı, ekranı  ÇALIŞMALAR başlığına yönlendirecektir.

SAYFA İÇİNE LİNK VERMEK (#)

Sayfada yer işareti oluşturulmuş herhangi bir yere link verirken <a href=""> yapısını kullanırız. Ancak sayfa dışındaki yerlere verdiğimiz linklerden farklı olarak href parametresine  # işareti ile beraber yer işaretinin adı eklenir. 

<a href="#calisma"> ÇALIŞMALARA GİT </a> 

Tarayıcı # işaretini gördüğünde, bağlantının sayfa içinde olduğunu anlar ve "calisma" isminde bir yer işareti arar. Sayfada böyle  bir yer var ise ekranı oraya yönlendirir. Ancak hali hazırda tasarım içeriği fazla değilse ve "yer işareti" verilen yer zaten ekranda görünüyorsa yönlendirme olmayabilir. Böyle bir durumda sayfayı yakınlaştırarak , içeriği büyütüp deneyebilirsiniz. 

YUMUŞAK GEÇİŞ 

Linkler tıklandığında , ekran ilgili yer işaretinin olduğu yere doğrudan yönlenir. Bu hareketi daha yumuşak yapmak için (kayma efekti) basit bir CSS yazılabilir.  Henüz CSS öğrenmemiş olabiliriz ama HEAD etiketleri arasına aşağıdaki scroll-behaviour özelliğini Html etiketine uygularsak , link geçişleri kayarak olacaktır.

<style>
	html {
		scroll-behavior: smooth;
	}
</style>