Not Defteri ile HTML & CSS Yazmak: Web Tasarıma İlk Adım

Günümüzde herkes bir internet sitesine sahip olmak istiyor: bireyler portfolyo oluşturmak, küçük işletmeler online vitrin kurmak ya da öğrenciler kodlamayı öğrenmek için web tasarımın temellerine yöneliyor. Peki bu işe sıfırdan, sadece bilgisayarınızda bulunan basit bir yazılım olan Not Defteri (Notepad) ile başlayabileceğinizi biliyor muydunuz?

İşte bu yazıda, hiçbir gelişmiş yazılıma ihtiyaç duymadan, sadece Not Defteri kullanarak nasıl basit bir HTML ve CSS sayfası oluşturacağınızı anlatıyoruz. Hazırsanız, sıfırdan web tasarıma ilk adımınızı atalım!

Neden Not Defteri?

“Profesyoneller Visual Studio Code, Sublime Text, Atom gibi yazılımlar kullanıyor. Neden Not Defteri?” diye düşünebilirsiniz.

İşte nedenleri:

Sıfır kurulum gerektirir. Her Windows bilgisayarda hazırdır.
Öğrenmek için en sade ortamı sağlar. Otomatik tamamlama, renkli kodlama gibi kolaylıklar yoktur; bu sayede öğrenme süreci daha etkili olur.
Temel kavramları doğrudan öğrenirsiniz. Hatalarınızı kendiniz fark edip düzeltirsiniz.

Başlangıç için bu sade araçla HTML ve CSS’i öğrenmek, sağlam bir temel atmak demektir.

İlk HTML Dosyanı Oluştur

1. Not Defteri’ni Aç

Başlat menüsüne “Not Defteri” yazın ve açın.
Ya da Win + R tuşlarına basıp notepad yazın, Enter’a basın.

2. Aşağıdaki Kodu Yapıştır

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim İlk Web Sayfam</title>
</head>
<body>
  <h1>Merhaba, Dünya!</h1>
  <p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

3. Dosyayı Kaydet

Dosya > Farklı Kaydet seçeneğine tıklayın.
Dosya adını index.html olarak yazın.
Kayıt türü olarak “Tüm Dosyalar”ı seçin.
Kodlamayı “UTF-8” yapın.
Masaüstüne veya kolay erişebileceğiniz bir yere kaydedin.

4. Tarayıcıda Aç

Kaydettiğiniz dosyaya çift tıklayın.
Tarayıcınız açılacak ve “Merhaba, Dünya!” yazısını göreceksiniz.

Tebrikler! Artık ilk web sayfanızı oluşturdunuz.

Şimdi de CSS ile Stil Verelim

Web sayfanız çalışıyor ama oldukça sade, değil mi? Hadi biraz stil katalım.

1. Aynı Klasörde Bir CSS Dosyası Oluştur

Yeni bir Not Defteri dosyası açın ve aşağıdaki CSS kodunu yazın:

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  color: #2c3e50;
}

p {
  color: #34495e;
}

Bu dosyayı style.css adıyla Tüm Dosyalar ve UTF-8 olarak kaydedin.

2. HTML Dosyanı Güncelle

HTML dosyanızı Not Defteri ile tekrar açın ve <head> etiketi içine şu satırı ekleyin:

<link rel="stylesheet" href="style.css">

Son hali şöyle olacak:

<head>
  <meta charset="UTF-8">
  <title>Benim İlk Web Sayfam</title>
  <link rel="stylesheet" href="style.css">
</head>

Dosyayı kaydedin ve tekrar tarayıcıda açın. Sayfanız artık daha şık görünüyor!

Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler

Dosya uzantıları: HTML dosyasının .html, CSS dosyasının .css uzantılı olduğundan emin olun.
Tırnak işaretleri: Kopyalarken bazen düz tırnak (") yerine akıllı tırnak (“”) gelebilir. Kod çalışmaz.
Dosya konumu: CSS dosyanız, HTML dosyasıyla aynı klasörde olmalı.

Bonus: Bir Buton Ekleyelim

HTML koduna bir buton ekleyerek kullanıcı etkileşimini artırabilirsiniz:

<button>Buraya Tıkla</button>

CSS ile butona stil verelim:

button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #2980b9;
}

HTML ve CSS ile Neler Yapabilirsiniz?

Sadece bu iki teknolojiyle neler başarabileceğinize bir göz atalım:

Kişisel blog oluşturabilirsiniz.
CV’nizi web formatına dönüştürebilirsiniz.
Küçük işletmeler için tanıtım sayfası hazırlayabilirsiniz.
Bir portfolyo sayfası yapabilirsiniz.
İleri seviyede JavaScript ile etkileşimli web uygulamalarına temel oluşturabilirsiniz.

Unutmayın ki Büyük Projeler Küçük Adımlarla Başlar

Gelişmiş yazılımlar kullanmadan da web geliştirmeye başlayabilirsiniz. Not Defteri ile HTML ve CSS yazmak, kodlama dünyasına sade ama güçlü bir giriş yapmanızı sağlar. Temel yapıyı öğrenmeden karmaşık sistemlerle uğraşmak, genellikle daha çok hata yapmanıza neden olur.

Unutmayın, bugün yazdığınız birkaç satırlık kod, yarının büyük projelerine temel oluşturabilir. Denemekten, hata yapmaktan ve öğrenmekten korkmayın.