Basit Bir Web Sitesi Nasıl Yapılır? Ücretsiz Web Siteni Tasarla

HTML ve CSS kullanarak basit bir web sitesi oluşturmak, kodlama öğrenmeye yeni başlayanlar için harika bir adımdır. Bu yazıda, adım adım bir web sitesi nasıl yapılır, örnek bir kodla açıklayacağız.

1. HTML ve CSS Nedir?

HTML (HyperText Markup Language): Web sayfalarının iskeletini oluşturan işaretleme dilidir.
CSS (Cascading Style Sheets): Web sayfasının tasarımını ve stilini belirler. Örneğin, renkler, yazı tipi ve düzen.

2. Web Sitesi İçin Gerekli Araçlar

Kod Editörü: Visual Studio Code, Sublime Text veya Notepad++ gibi.
Web Tarayıcı: Chrome, Firefox veya Safari.
Temel Bilgi: HTML ve CSS hakkında temel bilgiler.

3. Örnek Web Sitesi: Basit Bir Kişisel Sayfa

Bir kişisel web sitesi için HTML ve CSS kodlarını aşağıda bulabilirsiniz.

4. Adım 1: HTML Dosyasını Oluşturma

Bir dosya oluşturun ve adını index.html olarak kaydedin. Aşağıdaki kodu yapıştırın:

html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Basit bir kişisel web sitesi oluşturmayı öğrenin.">
    <meta name="keywords" content="HTML, CSS, Web Sitesi, Öğrenme">
    <meta name="author" content="Adınız">
    <title>Benim Web Sitem</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Hoş Geldiniz!</h1>
        <nav>
            <ul>
                <li><a href="#hakkimda">Hakkımda</a></li>
                <li><a href="#projeler">Projeler</a></li>
                <li><a href="#iletisim">İletişim</a></li>
            </ul>
        </nav>
    </header>
    <section id="hakkimda">
        <h2>Hakkımda</h2>
        <p>Merhaba! Ben bir web geliştiricisiyim. HTML ve CSS ile basit web siteleri yapıyorum.</p>
    </section>
    <section id="projeler">
        <h2>Projeler</h2>
        <ul>
            <li>Proje 1: Portfolyo sitesi</li>
            <li>Proje 2: Blog sitesi</li>
        </ul>
    </section>
    <section id="iletisim">
        <h2>İletişim</h2>
        <p>Bana <a href="mailto:[email protected]">e-posta</a> ile ulaşabilirsiniz.</p>
    </section>
    <footer>
        <p>&copy; 2024 Benim Web Sitem</p>
    </footer>
</body>
</html>

5. Adım 2: CSS Dosyasını Oluşturma

Bir dosya oluşturun ve adını style.css olarak kaydedin. Aşağıdaki kodu yapıştırın:

css

/* Genel Stil */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* Başlık ve Navigasyon */
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}
header h1 {
    margin: 0;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 10px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
}

/* Bölümler */
section {
    margin: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
}

/* Footer */
footer {
    text-align: center;
    padding: 10px;
    background: #333;
    color: #fff;
    margin-top: 20px;
}

6. Adım 3: Dosyaları Çalıştırma

index.html ve style.css dosyalarını aynı klasöre kaydedin.
Tarayıcınızda index.html dosyasını açarak sonucu görüntüleyin.

7. Sonuç

Bu basit HTML ve CSS örneğiyle kişisel bir web sitesi oluşturmayı öğrendiniz. SEO açısından, meta etiketleri ve düzenli kod yapısı kullanarak sitenizin arama motorları tarafından daha iyi taranmasını sağladık.

8. SEO İpuçları

Anahtar Kelimeler: İçeriğinizle alakalı kelimeleri meta etiketlerinde ve içerikte kullanın.
Responsive Tasarım: Sayfanızın mobil cihazlarda düzgün çalıştığından emin olun.
Kaliteli İçerik: Kullanıcı odaklı ve bilgi verici içerikler oluşturun.

Bu adımlarla web geliştirme dünyasına giriş yapabilir ve projelerinizi kolaylıkla geliştirebilirsiniz.