"HTML ve CSS ile Temel Web Sayfası Oluşturma Kılavuzu"

HTML ve CSS, web geliştirme dünyasının temel taşlarıdır. Bu kılavuzda, temel bir web sayfası oluşturmak için HTML ve CSS kullanmanızı adım adım açıklayacağım. Başlayalım:

1. HTML (Hypertext Markup Language) ile Temel Sayfa Yapısı Oluşturma:

HTML, bir web sayfasının yapısal ve metinsel içeriğini tanımlamak için kullanılır. İşte temel bir HTML sayfa yapısının nasıl oluşturulacağı:

html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Web Sayfam</title>
</head>
<body>
    <header>
        <h1>Hoş Geldiniz!</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Hakkımızda</a></li>
            <li><a href="#">Hizmetlerimiz</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Hakkımızda</h2>
            <p>Web sayfamız hakkında kısa bir açıklama burada yer alabilir.</p>
        </section>
        <section>
            <h2>Hizmetlerimiz</h2>
            <ul>
                <li>Web Tasarım</li>
                <li>Web Geliştirme</li>
                <li>Dijital Pazarlama</li>
            </ul>
        </section>
    </main>
    <footer>
        &copy; 2023 İlk Web Sayfam
    </footer>
</body>
</html>

Bu HTML belgesi, temel bir web sayfasının yapısını göstermektedir. Sayfa başlığı, başlık etiketi <h1>, menü, metin paragrafları <p>, liste elemanları <ul> ve bağlantılar <a> ile tanımlanmıştır.

2. CSS (Cascading Style Sheets) ile Sayfa Stili Uygulama:

CSS, web sayfanızın görünümünü ve stilini belirlemek için kullanılır. İşte temel bir CSS stil tanımı örneği:

css

/* Temel sayfa stilleri */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

/* Başlık stil */
h1 {
    color: #333;
}

/* Menü stil */
nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 20px;
}

/* Bağlantı stil */
a {
    text-decoration: none;
    color: #0074d9;
}

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

Bu CSS kodu, web sayfasının metin fontu, renkleri, arka planı ve diğer stil özelliklerini tanımlar.

3. HTML ve CSS'i Birleştirme:

HTML ve CSS dosyalarınızı birleştirmek için HTML belgenizin <head> bölümüne bir <link> etiketi ekleyebilirsiniz:

html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Web Sayfam</title>
    <link rel="stylesheet" href="stil.css">
</head>

Yukarıdaki <link> etiketi, "stil.css" adlı CSS dosyasını sayfanıza bağlar.

Artık HTML ve CSS'i birleştirdiniz ve temel bir web sayfası oluşturdunuz. Tarayıcınızda bu HTML dosyasını açarak sonucu görebilirsiniz. Başlangıç olarak, bu örnek sayfayı kullanarak HTML ve CSS temellerini öğrenmeye başlayabilirsiniz. Sayfanızı daha fazla özelleştirebilir ve geliştirebilirsiniz. İyi çalışmalar!