İlk Web Sitenizi 1 Günde Yapın: HTML & CSS ile Adım Adım Rehber


 

Merhaba yazılıma yeni adım atan dostum! 👋
Bir önceki yazıda web geliştirme ile yazılım dünyasına giriş yapmanın avantajlarını konuşmuştuk. Bugün ise hemen uygulamaya geçiyoruz ve kendi web sitemizi adım adım oluşturacağız.

Evet, sadece HTML ve CSS ile… Hem de 1 günde! 🚀


1️⃣ HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının iskeletidir. Bir ev düşün: Duvarlar, odalar, pencereler… İşte HTML bu yapının planıdır.

<!DOCTYPE html>
<html>
<head>
    <title>Benim İlk Web Sitem</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk web sitem.</p>
</body>
</html>

💡 İpucu: HTML, içeriklerin mantıklı bir şekilde düzenlenmesini sağlar. Başlıklar <h1>, paragraflar <p>, resimler <img> etiketi ile eklenir.


2️⃣ CSS Nedir?

CSS (Cascading Style Sheets), HTML yapısına stil kazandırır. Renkler, yazı tipleri, arka planlar… Yani evin dekorasyonu!

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

h1 {
    color: #2b6cb0;
}

💡 İpucu: CSS dosyanızı .css uzantısıyla kaydedin ve HTML içine şu şekilde bağlayın:

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

3️⃣ Projeyi Oluşturalım

📂 Klasör Yapısı

/ilk-website
   ├── index.html
   └── style.css
  1. index.html dosyasında sayfanızın iskeletini kurun.
  2. style.css dosyasında renkleri, fontları belirleyin.
  3. Tarayıcıda index.html dosyasını açarak sonucu görün.

4️⃣ Ekstra Dokunuşlar

  • Resim ekleyin: <img src="resim.jpg" alt="Açıklama">
  • Bağlantı ekleyin: <a href="https://seninsiten.com">Siteme Git</a>
  • Liste ekleyin:
<ul>
  <li>HTML öğren</li>
  <li>CSS öğren</li>
  <li>JavaScript öğren</li>
</ul>

5️⃣ Bir Sonraki Adım

Artık kendi web sitenizi kurdunuz. Bundan sonra:

  • JavaScript ile etkileşim ekleyebilirsiniz.
  • GitHub ile sitenizi paylaşabilirsiniz.
  • Ücretsiz hosting ile herkese açabilirsiniz.

🎯 Son Söz

Unutma: Başlamak her şeyin yarısıdır. Bugün HTML ve CSS ile ilk web siteni yaptın, yarın bu siteden yola çıkarak çok daha gelişmiş projeler yapabilirsin.

“Her büyük yazılımcı bir zamanlar ilk kodunu yazan bir acemiydi.”

2 Yorumlar

  1. önereceğiniz kod yazma uygulaması var mı

    YanıtlaSil
    Yanıtlar
    1. Aktif olarak NotePad++ kullanıyorum 32 ve 64 bit uyumlu tema özelleştirmesi ile Dreamviewer tarzı uygulamalara uyarlanarak daha akıcı kullanım elde edebilirsin.

      Sil
Daha yeni Daha eski