HTML SAYFA İÇİ BAĞLANTI UYGULAMASI

One Page (Tek Sayfa) site tasarımlarında , site bölümleri tek sayfada toplanırlar. Burada navigasyonu sağlayan sayfa içi bağlantılar olur. Tabi günümüz siteleri CSS ile biçimlendirildiği için çok daha estetik web siteleri görebiliyoruz. Biz burada hem one page mantığını anlamak hemde sayfa içi bağlantıları uygulayabilmek için HTML ile basit bir sayfa hazırlayacağız.

MENÜ

Öncelikle menü kısmını oluşturalıım. 4 sayfa bölümü tek sayfada düşünülmüş : Giriş , Hakkında, Çalışmalar ve Referans. Menü elemanlarını başlık etiketi içerisinde yazıp align ile ortalayabiliriz. Üst kenardan boşluğu br etiketleri ile verelim.

<body  link="#0a0" alink="#0a0" vlink="#0a0" bgcolor="white">
	
      <br><br><br>
	<a name="menu"></a>  <!-- Başa Dön için yer işareti -->
	<h2 align="center">
		<a href="#giris"> GİRİŞ </a> &nbsp;   
		<a href="#hakkinda"> HAKKINDA </a> &nbsp;    
		<a href="#calisma"> ÇALIŞMALAR </a>  &nbsp; 
		<a href="#referans"> REFERANS </a>  &nbsp;
	</h2>

Menülere sayfa içi bağlantıları "#" işareti ile ekledik. Sayfanın bölümlerini oluştururken bu yer işaretlerini mutlaka bölümlerin başına eklemeliyiz. Ayrıca BAŞA DÖN bağlantısının geleceği yeride name=menu ile belirttik.

GİRİŞ

Giriş bölümünde genişliği 20% yapılmış 4 tane resmimiz var. Resimler arasındaki boşlukları   boşluk işaretiyle arttırıp , bölümün HAKKINDA ile olan mesafesinide BR etiketleri ile ayarladık. Name ile "giris" adında yer işareti ekledik.

<h2 align="center"><a name="giris"></a> GİRİŞ </h2>
<p align="center" >
		<img src="resim/jquery.jpg" width="20%" alt="resim">&nbsp; &nbsp; 
		<img src="resim/jquery.jpg" width="20%" alt="resim">&nbsp; &nbsp;  
		<img src="resim/jquery.jpg" width="20%" alt="resim">&nbsp; &nbsp; 
		<img src="resim/jquery.jpg" width="20%" alt="resim">&nbsp; &nbsp; 
</p>
<br><br><br><br><br> <br><br>

HAKKINDA , ÇALIŞMALAR , REFERANS BÖLÜMLERİ

GİRİŞ dışındaki diğer bölümünde başlık ve bir paragraf var. Bölümlerin alt bölümlerle olan mesafesinide yine BR etiketleri ile ayarlıyoruz. Yine her birine name ile -bölümlerin adında- yer işareti ekledik.

<!-- HAKKINDA -->
<h2 align="center"><a name="hakkinda"></a> HAKKINDA </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.
		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.
		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.
		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>
	<br><br><br><br><br> <br><br> 


<!-- ÇALIŞMALAR-->
	<h2 align="center"><a name="calisma"></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.
		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.
		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.
		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>
	<br><br><br><br><br> <br><br> 


<!-- REFERANS-->
	<h2 align="center"><a name="referans"></a> REFERANS </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.
		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.
		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.
		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>

	<br><br><br><br><br>

BAŞA DÖN

Başa Dön linkini H2 arasına alıyoruz ve sayfa başına yönlenmesini sağlayacak linki # işareti ile yazıyoruz (#menu) . Sayfanın altı ile olan mesafesinide yine BR etiketleri ile ayarladık.

<h2 align="center"><a href="#menu"> BAŞA DÖN</a> </h2> 
<br><br><br><br><br>

YUMUŞAK GEÇİŞ

Son olarak linklerin yumuşak geçişi için , HTML etiketine HEAD etiketleri arasında aşağıdaki scroll-behaviour CSS özelliğini veriyoruz.

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

SAYFA TÜM HTML KODU

<!DOCTYPE html>
<html>
<head>
	<title> İLK WEB SAYFAM </title>
	<meta charset="utf-8">
</head>	

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

<body  link="#0a0" alink="#0a0" vlink="#0a0" bgcolor="white">

	<br><br><br>

	<a name="menu"></a>
	<h2 align="center">
		<a href="#giris"> GİRİŞ </a> &nbsp;   
		<a href="#hakkinda"> HAKKINDA </a> &nbsp;    
		<a href="#calisma"> ÇALIŞMALAR </a>  &nbsp; 
		<a href="#referans"> REFERANS </a>  &nbsp;
	</h2>

	<hr color="#0a0" width="80%">
	<br><br><br><br><br><br><br>



	<h2 align="center"><a name="giris"></a> GİRİŞ </h2>
	<p align="center" >
		<img src="resim/jquery.jpg" width="20%" alt="">&nbsp; &nbsp; 
		<img src="resim/jquery.jpg" width="20%" alt="">&nbsp; &nbsp;  
		<img src="resim/jquery.jpg" width="20%" alt="">&nbsp; &nbsp; 
		<img src="resim/jquery.jpg" width="20%" alt="">&nbsp; &nbsp; 
	</p>

	<br><br><br><br><br> <br><br> 



	<h2 align="center"><a name="hakkinda"></a> HAKKINDA </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.
		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.
		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.
		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>
	<br><br><br><br><br> <br><br> 



	<h2 align="center"><a name="calisma"></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.
		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.
		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.
		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>
	<br><br><br><br><br> <br><br> 



	<h2 align="center"><a name="referans"></a> REFERANS </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.
		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.
		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.
		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>

	<br><br><br><br><br>


	<h2 align="center"><a href="#menu"> BAŞA DÖN</a> </h2>


</body>
</html>

Görüşmek Üzere...

Tarayıcıda Aç Uygulamayı İndir

Son Güncelleme : 21 Ekim 2024 02:55, Pazartesi

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK