Bir web sitesi oluşturmak günümüzde sandığınız kadar zor değil. Profesyonel araçlar ve hazır sistemler olsa da, temel mantığı anlamak isteyen biri için en öğretici yöntemlerden biri Notepad++ kullanmaktır. Notepad++ basit bir metin düzenleyicisi gibi görünse de, aslında kodlama dünyasının en pratik yardımcılarından biridir. Bu yazıda hiçbir ek yazılım veya platform kullanmadan, yalnızca Notepad++ ile nasıl bir web sitesi yapılacağını adım adım anlatacağız.
Öncelikle Notepad++’ın ne işe yaradığını anlamak gerekir. Notepad++ ücretsiz bir kod editörüdür ve HTML, CSS, JavaScript gibi web dillerini destekler. Yani bir web sayfasının yapısını, tasarımını ve işlevlerini doğrudan bu yazılım üzerinden kodlayabilirsiniz. Program, Windows işletim sistemlerinde sorunsuz çalışır ve hafif yapısı sayesinde bilgisayarı yormaz. Kod renklendirme özelliği sayesinde hataları kolayca fark edebilir, sayfa düzenini kontrol edebilirsiniz.
Web sitesi yapımına başlamadan önce temel dosya yapısını bilmek gerekir. Her web sitesinin merkezinde “index.html” adlı bir ana dosya bulunur. Bu dosya, siteyi tarayıcıya tanıtır ve ziyaretçi ilk girdiğinde açılan sayfadır. Bunun yanında stil dosyaları için “style.css”, interaktif işlemler için “script.js” gibi ek dosyalar oluşturabilirsiniz. Notepad++ içinde bu dosyaları manuel olarak oluşturmak hem öğrenmeyi kolaylaştırır hem de sitenin temel mantığını anlamanızı sağlar.
İlk adım olarak masaüstünde bir klasör oluşturun ve adını “websitem” olarak belirleyin. Bu klasör, tüm web dosyalarınızı barındıracaktır. Ardından Notepad++’ı açın, yeni bir sayfa oluşturun ve aşağıdaki temel HTML kodlarını yazın.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benim İlk Web Sitem</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu, Notepad++ ile oluşturduğum ilk web sayfasıdır.</p>
</body>
</html>
Bu kodları yazdıktan sonra dosyayı “index.html” olarak “websitem” klasörüne kaydedin. Şimdi bu dosyayı çift tıklayarak tarayıcıda açabilirsiniz. Karşınıza beyaz zemin üzerinde “Merhaba Dünya!” yazısı çıkacaktır. Bu, sitenizin ilk adımıdır.
Artık siteye görsellik kazandırma aşamasına geçebilirsiniz. Bunun için CSS yani stil dosyası gerekir. Aynı klasör içinde yeni bir dosya açın ve adını “style.css” olarak kaydedin. İçerisine aşağıdaki kodları ekleyin:
body {
background-color: #f3f3f3;
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
h1 {
color: #2a5d84;
}
p {
font-size: 18px;
color: #333;
}
Ardından HTML dosyanızın <head> bölümüne şu satırı ekleyin:
<link rel="stylesheet" href="style.css">
Sayfayı yenilediğinizde yazıların renkli hale geldiğini ve sayfanın estetik bir görünüm kazandığını fark edeceksiniz. Bu, sitenize tasarım eklemenin ilk adımıdır.
Artık web sitenize menü, fotoğraf ve bağlantılar ekleme kısmına geçebilirsiniz. Örneğin, sayfanızın altına bir menü yapmak istiyorsanız aşağıdaki kodları HTML dosyasının <body> kısmına ekleyebilirsiniz:
<nav>
<a href="#">Ana Sayfa</a> |
<a href="#">Hakkımızda</a> |
<a href="#">İletişim</a>
</nav>
Bu bağlantılara CSS yardımıyla renk ve düzen kazandırabilirsiniz:
nav a {
text-decoration: none;
color: #2a5d84;
margin: 0 10px;
font-weight: bold;
}
nav a:hover {
color: #e67e22;
}
Notepad++ ile web sitesi yaparken en önemli şey düzenli çalışmaktır. Her sayfa ve dosyayı mantıklı isimlerle kaydedin. Örneğin, hakkımızda sayfası için “hakkimizda.html” dosyası açabilir, menüdeki bağlantıya bu dosyayı yönlendirebilirsiniz.
Web sitenize görseller eklemek için aynı klasör içinde bir “images” adlı klasör oluşturun ve resimleri içine yerleştirin. Ardından HTML içinde şu şekilde kullanın:
<img src="images/foto1.jpg" alt="örnek fotoğraf" width="400">
Web siteniz büyüdükçe sayfa sayısı artacaktır. Bu durumda her sayfa için ortak bir tasarım oluşturmak önemlidir. CSS dosyanızın etkili kullanımı burada devreye girer. Tek bir CSS dosyası ile tüm sayfalarda aynı görünümü yakalayabilirsiniz.
Dilerseniz JavaScript kullanarak sitenize etkileşim kazandırabilirsiniz. Örneğin bir butona tıklandığında yazının değişmesini sağlayabilirsiniz. Aynı klasörde “script.js” adlı bir dosya oluşturup şu kodu ekleyin:
function mesajGoster() {
alert("Butona tıkladınız!");
}
HTML içine şu butonu ekleyin:
<button onclick="mesajGoster()">Tıkla</button>
<script src="script.js"></script>
Sayfayı kaydedip yenilediğinizde butona bastığınızda bir uyarı penceresi belirecektir.
Web sitenizi tamamladıktan sonra internet ortamına yüklemek isterseniz, bir alan adı (domain) ve barındırma (hosting) hizmeti almanız gerekir. Bu hizmetleri aldıktan sonra FTP programı ile (örneğin FileZilla) dosyalarınızı sunucuya yükleyebilirsiniz. Böylece siteniz artık herkesin erişebileceği hale gelir.
Notepad++ ile web sitesi yapmak sadece başlangıçtır. Burada öğrendiklerinizle HTML yapısını, CSS’in görsel etkilerini ve JavaScript’in etkileşimli özelliklerini temel düzeyde anlamış olursunuz. Bu da daha sonra WordPress veya profesyonel framework’ler öğrenmenizi kolaylaştırır.
Bir web sitesinin başarılı olabilmesi için sade bir kod yapısına, kullanıcı dostu bir tasarıma ve hızlı yüklenme süresine sahip olması gerekir. Notepad++ size bu süreçte kodun her aşamasını manuel kontrol etme imkânı verir. Hazır araçlar bazen fazladan kod yükü oluşturabilir, ancak Notepad++ ile tamamen kendi kontrolünüzde bir yapı kurarsınız.
Sonuç olarak, Notepad++ web sitesi yapımında hem öğrenme hem de geliştirme açısından en basit ama en öğretici araçlardan biridir. Kendi sitenizi sıfırdan yapmanın verdiği tatmin duygusu da cabasıdır. Basit bir “Merhaba Dünya!” sayfası ile başlayıp, zamanla profesyonel web siteleri kodlayacak seviyeye gelebilirsiniz. Tek yapmanız gereken düzenli çalışmak, kod denemeleri yapmak ve hata almaktan korkmamaktır.
