Kişisel blog sitelerinde, ürün tanıtımlarında, kariyer listelerinde genellikle tek sayfa kullanılır. Sayfa içi link oluşturularak sayfaların işlevselliği arttırılır. Bu uygulamada html5 etiketlerini kullanarak sayfa tasarımını yapacağız. Sayfa içi linkler oluşturarak sayfanın tasarımını gerçekleştireceğiz. Mevsimler ve mevsimlere ait ayları bu uygulama için kullanacağız.
Visual Studio 2022 programını açalım.
Create a new project diyerek yeni bir proje oluşturalım.
Dil olarak c#, platform olarak windows, ortam olarak web seçelim. Ekrana gelen şablonlardan Asp.Net Web Application(.Net Framework) seçelim. Proje ismi olarak MevsimlerSayfaIciLinkKlasik belirleyelim. Framework 4.8 kalabilir. Create diyerek projeyi oluşturalım. Projenin içinde başlangıçta hiçbir dosyanın olmasını istemediğimiz için Empty diyelim. Bu arada Configure for HTTPS onay kutusunu kaldıralım. Tekrar Create diyerek projeyi oluşturalım.
Visual Studio 2022 programında web projesi gerçekleştirirken ekranda Toolbox, Solution Explorer ve Properties panellerinin olmasını sağlayalım. Eğer bunlardan biri yoksa View menüsünden bu panelleri ekleyelim.
Şimdi proje ismi üzerine fareyle gelelim. Burada farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add açılır menüsünü seçelim. Buradan New item diyalog penceresini açalım. Ekrana gelen dosya türlerinden HTML Page seçelim. Dosya ismi olarak index.html yazalım. Add diyerek projeye Html dosyasını eklemiş oluruz. Aşağıda bu dosyanın içeriği görüntülenmektedir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Bir web sayfasının temel etiketleri burada görüntülenmektedir. Bunları html, head, title ve body olarak sayabiliriz. Web sayfası <!DOCTYPE html> bildirisi ile başlıyorsa bu web sayfasında html5 etiketleri kullanılacaktır anlamına gelir. Projeyi bu haliyle çalıştıralım. Böylece projenin doğru bir şekilde oluşturulup oluşturulmadığını kontrol etmiş oluruz.
Web sayfasında Türkçe karakterlerin doğru çalışması için html etiketine şu özelliği ekleyelim.
<html lang="tr">
Bir web sayfasında, Türkçe karakterleri görüntülemek için, yukarıdaki satırla birlikte aşağıdaki meta etiketinin de bulunması gerekir.
<meta charset="utf-8" />
Web sayfaları sadece masaüstü bilgisayarlarda görüntülenmez. Cep telefonları, tabletler, TVOS ortamı, akıllı tahtalar vasıtasıyla da web sayfaları görüntülenmektedir. Farklı boyutlarda bulunan cihazlarda web sayfalarının doğru bir şekilde görüntülenmesi için aşağıdaki meta etiketine ait özelliklerin tanımlanması gerekir.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Burada title etiketi web sayfasının başlığını belirlemek için kullanılır.
<title>Mevsimler</title>
Şimdi html5 ile sayfa tasarımı için kullanılan etiketleri yazalım. Bir web sayfasında temel olarak header, nav, article, section, footer bölümlerinden oluşur. Bu bölümleri mevsimler uygulamasında tanımlayalım. Tüm web sayfalarının başında başlık ve alt menülerin listelendiği header etiketi kullanılır. Bu etiketi body etiketi arasında tanımlayalım.
<header id="basla">
<h1>Mevsimler</h1>
<nav>
<a href="#ilkbahar">İlkbahar</a>
<a href="#yaz">Yaz</a>
<a href="#sonbahar">Sonbahar</a>
<a href="#kis">Kış</a>
</nav>
</header>
Burada Mevsimler kelimesini başlık, mevsim isimlerini ise alt başlık olarak kullandık. Sayfa içi link oluşturmak için <a> etiketi kullanılır. Sayfa içinde nereye gidilecekse bu ifade href özelliğiyle belirlenir. Kelimenin başına # işareti konmalıdır. Web sayfasında bölümlerin listeleneceği etiketimiz article etiketidir. Bu etiketi tanımlayalım.
<article>
</article>
Sayfa içinde tüm açıklamaları bu blok içinde yapacağız. İlkbahar mevsimine basıldığında bu mevsime ait ayları ve kısaca açıklamalarını yapan bir bölüm oluşturalım.
<section id="ilkbahar">
<h2>İlkbahar</h2>
<p>İlkbahar, doğanın canlandığı, havanın ısındığı ve günlerin
uzadığı bir mevsimdir.</p>
<ul>
<li><strong>Mart:</strong> Kışın sona erdiği, bitkilerin
uyanmaya başladığı aydır.</li>
<li><strong>Nisan:</strong> Yağmurların arttığı, doğanın
yeşerdiği bir dönemdir.</li>
<li><strong>Mayıs:</strong> Çiçeklerin açtığı ve doğanın
en canlı olduğu aydır.</li>
</ul>
<a href="#basla">Sayfa Başına Dön</a>
</section>
Yaz mevsimine ait bölümü oluşturalım.
<section id="yaz">
<h2>Yaz</h2>
<p>Yaz, sıcak havaların hakim olduğu ve güneşli günlerin
yaşandığı bir mevsimdir.</p>
<ul>
<li><strong>Haziran:</strong> Sıcakların başladığı,
okulların tatil olduğu bir aydır.</li>
<li><strong>Temmuz:</strong> Yılın en sıcak aylarından
biri olup, plaj sezonunun açıldığı dönemdir.</li>
<li><strong>Ağustos:</strong> Sıcakların devam ettiği,
tatil döneminin en yoğun olduğu aydır.</li>
</ul>
<a href="#basla">Sayfa Başına Dön</a>
</section>
Şimdi sonbahar mevsimine ait bölümü oluşturalım.
<section id="sonbahar">
<h2>Sonbahar</h2>
<p>Sonbahar, yaprakların dökülmeye başladığı ve havaların
soğumaya yüz tuttuğu bir mevsimdir.</p>
<ul>
<li><strong>Eylül:</strong> Yazın sona erdiği,
okula dönüş dönemidir.</li>
<li><strong>Ekim:</strong> Ağaçların yapraklarının
sarardığı ve döküldüğü aydır.</li>
<li><strong>Kasım:</strong> Havanın soğumaya başladığı
ve kış hazırlıklarının yapıldığı dönemdir.</li>
</ul>
<a href="#basla">Sayfa Başına Dön</a>
</section>
Son olarak kış mevsimine ait bölümü oluşturalım.
<section id="kis">
<h2>Kış</h2>
<p>Kış, soğuk havaların hakim olduğu ve kar yağışının
görüldüğü bir mevsimdir.</p>
<ul>
<li><strong>Aralık:</strong> Kışın başlangıcıdır;
hava sıcaklıkları düşmeye başlar.</li>
<li><strong>Ocak:</strong> Yılın en soğuk aylarından
biridir; kar yağışları yaygındır.</li>
<li><strong>Şubat:</strong> Kışın sona yaklaşıldığı,
fakat soğuk havaların devam ettiği bir dönemdir.</li>
</ul>
<a href="#basla">Sayfa Başına Dön</a>
</section>
Web sayfasını kaydedip çalıştıralım. Linklere tıkladığımızda belirtilen mevsime gidildiğini görürsünüz. Son olarak web sayfasının alt başlığını tanımlayalım. Burada genellikle web sayfasını yapan firmanın bilgileri, web sayfasına ait email ve sosyal medya adresleri bulunur. Biz kısa bir mesaj vererek bu bölümü tanımlayacağız.
<footer>
<p>© 2024 Mevsimler Bilgisi</p>
</footer>
Her bir ay için bir adet fotograf ekleme işini yapalım. Resimlerin saklanacağı aylar isminde bir klasör oluşturalım. Aylara ait manzara resimlerini internetten indirip bu klasörün altına kopyalayalım. Ben ilkbahar mevsiminin ilk ayı olan mart ayı için bir resim ekleyeceğim. Diğer resimleri sizler buna göre ekleyebilirsiniz.
<section id="ilkbahar">
<h2>İlkbahar</h2>
<p>İlkbahar, doğanın canlandığı, havanın ısındığı ve günlerin
uzadığı bir mevsimdir.</p>
<figure>
<img src="aylar/mart.png" title="Mart Ayı" />
<figcaption>
<strong>Mart:</strong> Kışın sona erdiği, bitkilerin
uyanmaya başladığı aydır.
</figcaption>
</figure>
<a href="#basla">Sayfa Başına Dön</a>
</section>
Burada dikkat ettiyseniz <ul> elemanıyla yapılan açıklamalar resim aracığıyla yapılmaktadır. Resmi bir grup içinde göstermek için figure etiketi kullanılır. Bu etiket içinde figcaption aracılığıyla resmin altına açıklama eklenebilir. Diğer ayların resimlerini size bırakıyorum. Web sayfasının kaba taslak tasarımını gerçekleştirdik. Şimdi sayfamızı modern ve işlevsel hale getirelim.
Web sayfasının tasarımını, rengini, görünümünü, yerleşimini düzenlemek için css özelliklerinden yararlanılır. Web sayfasında css özelliklerini kullanmak için style bloğu kullanılmalıdır. Head etiketi arasına bu bloğu oluşturalım. Daha sonra web sayfasının genel görünümü olan body etiketini düzenleyelim.
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
</style>
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Böylece css özelliklerini öğrenmiş olursunuz. Şimdi header etiketini düzenleyelim.
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Menü elemanlarını düzenleyelim.
nav {
margin: 20px 0;
}
nav a {
margin: 0 15px;
color: white;
text-decoration: none;
}
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Mevsimlere ait ayların listelendiği section elemanlarını düzenleyelim.
section {
padding: 20px;
margin: 20px;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Web sayfasının alt başlığı olan footer elemanını düzenleyelim.
footer {
text-align: center;
padding: 10px 0;
background-color: #4CAF50;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Sayfada görüntülenen resimleri düzenleyelim.
figure {
display: inline-block;
margin: 10px;
text-align: center;
width: 350px;
}
img {
width: 100%;
height:auto;
border-radius: 5px;
}
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Sayfa başına dönme işlemini gerçekleştiren linki düzenleyelim.
.button {
display: inline-block;
padding: 8px 15px;
margin-top: 10px;
background-color: #4CAF50;
color: white;
text-align: center;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Sayfayı bootstrap ile tasarlayalım. Web sayfalarında Html5 etiketlerinin yanında tasarım için BootStrap kütüphanesinin projeye eklenmesi gerekir. Bu işlemi gerçekleştirmenin birden fazla yolu vardır. Biz en kolayını kullanacağız. Proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Client-Side Library komut grubunu seçelim. Ekrana gelen diyalog penceresinde Library metin kutusuna bootstrap yazalım. Bu kütüphanenin en son versiyonu metin kutusunda görüntülenir. Install diyerek kütüphaneyi projeye ekleyelim. BootStrap kütüphanesine ait tüm dosyalar lib klasörü altına kopyalanır.
Web sayfalarının Client tarafında javascript ve jquery kodlarını kullanmak için jquery kütüphanesinin projeye eklenmesi gerekir. Bu işlemi gerçekleştirmenin birden fazla yolu vardır. Biz en kolayını kullanacağız. Proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Client-Side Library komut grubunu seçelim. Ekrana gelen diyalog penceresinde Library metin kutusuna jquery yazalım. Bu kütüphanenin en son versiyonu metin kutusunda görüntülenir. Install diyerek kütüphaneyi projeye ekleyelim. Jquery kütüphanesine ait tüm dosyalar lib klasörü altına kopyalanır.
Şimdi yüklediğimiz bu kütüphaneleri index.html web sayfasına eklememiz gerekir. lib klasörü altında bootstrap.min.css dosyasını bulalım. Dosya isminin üzerinde farenin sol tuşuna basalım. Basılı tutup dosyayı web sayfasında title etiketi altına bırakalım. Böylece web sayfasına aşağıdaki satır eklenecektir.
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
Aynı şekilde jquery.min.js ve bootstrap.min.js dosyalarını da web sayfasına ekleyelim. Web sayfasında aşağıdaki satırlar yer almalıdır.
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
Web sayfasını kaydedip çalıştıralım. Böylece kütüphanelerin web sayfasına hatasız bir şekilde eklendiğini görürsünüz. Web sayfasında tüm css ayarlarını silelim. Sayfanın header kısmını düzenleyelim.
<header id="basla" class="bg-success text-white text-center py-4">
<h1>Mevsimler</h1>
<nav>
<a href="#ilkbahar" class="text-white me-3">İlkbahar</a>
<a href="#yaz" class="text-white me-3">Yaz</a>
<a href="#sonbahar" class="text-white me-3">Sonbahar</a>
<a href="#kis" class="text-white">Kış</a>
</nav>
</header>
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Sayfanın article kısmını düzenleyelim. Ben sadece ilkbahar kısmını düzenleyeceğim. Siz diğerlerini düzenlersiniz.
<article class="container mt-4">
<section id="ilkbahar" class="mb-5">
<h2>İlkbahar</h2>
<p>İlkbahar, doğanın canlandığı, havanın ısındığı ve
günlerin uzadığı bir mevsimdir.</p>
<div class="row">
<div class="col-md-4">
<figure>
<img src="aylar/mart.png" alt="Mart"
class="img-fluid rounded">
<figcaption><strong>Mart:</strong>
Kışın sona erdiği, bitkilerin uyanmaya başladığı aydır.</figcaption>
</figure>
</div>
<div class="col-md-4">
<figure>
<img src="aylar/nisan.png" alt="Nisan"
class="img-fluid rounded">
<figcaption><strong>Nisan:</strong>
Yağmurların arttığı, doğanın yeşerdiği bir dönemdir.</figcaption>
</figure>
</div>
<div class="col-md-4">
<figure>
<img src="aylar/mayis.png" alt="Mayıs"
class="img-fluid rounded">
<figcaption>Mayıs:</strong>
Çiçeklerin açtığı ve doğanın en canlı olduğu aydır.</figcaption>
</figure>
</div>
</div>
<div class="text-center mt-3">
<a class="btn btn-success" href="#basla">
Sayfa Başına Dön</a>
</div>
</section>
</article>
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Sayfanın footer kısmını düzenleyelim.
<footer class="bg-success text-white text-center py-3">
<p>© 2024 Mevsimler Bilgisi</p>
</footer>
Web sayfasını kaydedip çalıştırınız. Oluşan değişiklikleri not alınız. Son olarak web sayfası aöıldığında otomatik olarak bir ses dosyasının çalışmasını sağlayalım. Günümüzde tüm tarayıcılar kullanıcının rahatsız olmaması için ses ya da video dosyalarının otomatik olarak çalıştırılmasına izin vermezler. Ses dosyasını web sayfası yüklenir yüklenmez çaldırmak istiyorsanız ya kullanıcı ile etkileşim sağlamalısınız ya da tarayıcının hazırladığınız web sayfası için ses dosyasını otomatik olarak çalmasına izin vermelisiniz. Aşağıda verdiğim ayarlar chrome tarayıcısı içindir.
Chrome tarayıcısında, "Ayarlar > Gizlilik ve Güvenlik > Site Ayarları > Ses" bölümünden otomatik oynatma ayarlarını düzenleyebilirsiniz. Bu durumda aşağıdaki kodlar işinizi görecektir. Ancak web sayfanızı açan tüm kullanıcılar bu ayarı yapmak zorunda kalacaklardır.
<audio autoplay>
<source src="muzik.mp3" type="audio/mpeg">
Tarayıcınız bu ses dosyasını desteklemiyor
</audio>
Ya da kullanıcının web sayfası yüklendiğinde sayfanın herhangi bir yerine tıklaması ile birlikte ses dosyasını çalabilirsiniz. Aşağıdaki kodlar işinizi görecektir.
<audio id="background-audio" autoplay>
<source src="muzik.mp3" type="audio/mpeg">
Tarayıcınız bu ses dosyasını desteklemiyor
</audio>
<button id="playButton" style="display:none;">Ses Çal</button>
<script>
// Kullanıcının sayfaya tıklamasını bekle
window.addEventListener('click', function () {
// Butona tıklama simülasyonu
document.getElementById('playButton').click();
});
document.getElementById('playButton').addEventListener('click',
function () {
document.getElementById('background-audio').play().
catch(function (error) {
alert("Otomatik oynatma hatası: " + error);
});
});
</script>
Bunların dışında kullanıcının bir butona basarak müziği çaldırmasını sağlayabilirsiniz. Aşağıdaki kodlar kullanıcı İlkbahara bastığında müziğin çalmasını sağlıyor.
<audio id="background-audio" autoplay>
<source src="muzik.mp3" type="audio/mpeg">
Tarayıcınız bu ses dosyasını desteklemiyor
</audio>
<header id="basla" class="bg-success text-white text-center py-4">
<h1>Mevsimler</h1>
<nav>
<a href="#ilkbahar" class="text-white me-3"
id="ilkbahar-link">İlkbahar</a>
<a href="#yaz" class="text-white me-3">Yaz</a>
<a href="#sonbahar" class="text-white me-3">Sonbahar</a>
<a href="#kis" class="text-white">Kış</a>
</nav>
</header>
<script>
document.getElementById('ilkbahar-link').addEventListener(
'click', function (event) {
event.preventDefault(); // Bağlantı yönlendirmesini durdurur
var audio = document.getElementById('background-audio');
audio.play().catch(function (error) {
alert("Müzik oynatılamadı: " + error);
});
// İlkbahar bölümüne gitmek için manuel yönlendirme
window.location.hash = '#ilkbahar';
});
</script>
Kullanıcı sayfa başına döndüğünde sesi sıfırlayalım.
<script>
// İlkbahar bağlantısına tıklayınca ses çal
document.getElementById('ilkbahar-link').addEventListener('click',
function (event) {
event.preventDefault();
var audio = document.getElementById('background-audio');
audio.play().catch(function (error) {
console.log("Müzik oynatılamadı: " + error);
});
window.location.hash = '#ilkbahar';
});
// Sayfa başına dön bağlantısına tıklayınca müziği kapat
document.getElementById('sayfa-basina-don').addEventListener(
'click',
function (event) {
var audio = document.getElementById('background-audio');
audio.pause(); // Müziği durdurur
audio.currentTime = 0; // Müziği başa sarar
});
</script>
Bu işlemleri jquery ile gerçekleştirelim.
<script>
$(document).ready(function () {
// İlkbahar bağlantısına tıklayınca müziği başlat
$('#ilkbahar-link').click(function (event) {
event.preventDefault();
var audio = $('#background-audio')[0];
audio.play();
window.location.hash = '#ilkbahar';
});
// Sayfa başına dön bağlantısına tıklayınca müziği durdur
$('#sayfa-basina-don').click(function (event) {
var audio = $('#background-audio')[0];
audio.pause();
audio.currentTime = 0;
});
});
</script>
Web sayfasını kaydedip çalıştıralım. Gayet güzel ve işlevsel uygulama geliştirmiş olduk.