HTML ve CSS ile Web Sitesi Nasıl Yapılır? Adım Adım Rehber

HTML ve CSS ile web sitesi nasıl yapılır? Adım adım rehberimizle temel HTML yapısını öğrenin, CSS ile sitenizi stilize edin ve kendi web sitenizi oluşturun!

admin admin
Oca 12, 2025 - 23:24
0 6
HTML ve CSS ile Web Sitesi Nasıl Yapılır? Adım Adım Rehber
HTML ve CSS ile Web Sitesi Nasıl Yapılır? Adım Adım Rehber

HTML ve CSS ile Web Sitesi Nasıl Yapılır? Adım Adım Rehber

HTML ve CSS kullanarak bir web sitesi yapmak, web geliştirme dünyasına atılan ilk adımdır. Bu makalede, HTML ve CSS ile nasıl bir web sitesi yapacağınızı adım adım anlatacağız. Kod örnekleri, temel teknikler ve önerilerle kendi sitenizi oluşturabilirsiniz.

1. HTML ve CSS Nedir?

  • HTML (HyperText Markup Language): Bir web sitesinin yapısını oluşturmak için kullanılan işaretleme dilidir. Başlıklar, paragraflar, bağlantılar, resimler ve daha fazlasını HTML ile ekleyebilirsiniz.

  • CSS (Cascading Style Sheets): HTML ile oluşturulan yapıya stil vermek için kullanılır. Renkler, yazı tipleri, boyutlar ve düzenler CSS ile kontrol edilir.

2. Gerekli Araçlar

Bir web sitesi yapmak için ihtiyacınız olan araçlar şunlardır:

  • Kod Editörü: Visual Studio Code, Sublime Text veya Notepad++.

  • Web Tarayıcısı: Google Chrome, Mozilla Firefox gibi modern tarayıcılar.

  • Canlı Sunucu Eklentisi: Kod değişikliklerini anında görmek için Live Server gibi araçlar kullanabilirsiniz.

3. Temel HTML Yapısı

HTML dosyanız, aşağıdaki gibi temel bir yapıya sahip olmalıdır: 

<!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>
    <header>
        <h1>Hoş Geldiniz</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#hakkinda">Hakkında</a></li>
            <li><a href="#hizmetler">Hizmetler</a></li>
            <li><a href="#iletisim">İletişim</a></li>
        </ul>
    </nav>
    <main>
        <section id="hakkinda">
            <h2>Hakkında</h2>
            <p>Bu, benim ilk web sitem!</p>
        </section>
        <section id="hizmetler">
            <h2>Hizmetler</h2>
            <p>Web tasarım, geliştirme ve daha fazlası.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 Benim Web Sitem</p>
    </footer>
</body>
</html>

4. CSS ile Stil Verme

HTML yapınıza stil eklemek için CSS kullanabilirsiniz. İşte örnek bir CSS kodu: 

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

footer {
    text-align: center;
    padding: 1rem 0;
    background: #333;
    color: #fff;
}

CSS kodunu bir .css dosyasına kaydedip HTML dosyanızın <head> bölümüne şu şekilde bağlayabilirsiniz: 

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

5. Web Sitesini Yayınlama

Hazırladığınız web sitesini yayınlamak için şu adımları takip edebilirsiniz:

  • Yerel Sunucuda Test Edin: Kodlarınızı tarayıcıda test edin.

  • Barındırma ve Domain Alın: Hostinger, Bluehost gibi hizmetlerden hosting ve domain satın alabilirsiniz.

  • FTP ile Yükleyin: Dosyalarınızı FileZilla gibi bir araçla sunucuya yükleyin.

  • GitHub Pages Kullanımı: Ücretsiz bir seçenek olarak GitHub Pages ile sitenizi yayınlayabilirsiniz.

Sonuç

HTML ve CSS kullanarak web sitesi yapmak, temel adımları öğrendikten sonra oldukça kolaydır. Bu rehberle ilk web sitenizi yapabilir ve pratik kazandıkça daha karmaşık projelere geçebilirsiniz.

Unutmayın, yazılım dünyasında öğrenmenin sınırı yoktur ve her adım sizi daha ileriye taşıyacaktır.

Etiketler: