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>
<a href="#hakkinda"> HAKKINDA </a>
<a href="#calisma"> ÇALIŞMALAR </a>
<a href="#referans"> REFERANS </a>
</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">
<img src="resim/jquery.jpg" width="20%" alt="resim">
<img src="resim/jquery.jpg" width="20%" alt="resim">
<img src="resim/jquery.jpg" width="20%" alt="resim">
</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>
<a href="#hakkinda"> HAKKINDA </a>
<a href="#calisma"> ÇALIŞMALAR </a>
<a href="#referans"> REFERANS </a>
</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="">
<img src="resim/jquery.jpg" width="20%" alt="">
<img src="resim/jquery.jpg" width="20%" alt="">
<img src="resim/jquery.jpg" width="20%" alt="">
</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...
