Basit Bir HTML ve CSS ile Website Oluşturma



Web geliştirmeye yeni başlıyorsanız, HTML ve CSS kullanarak basit bir website oluşturmak harika bir başlangıç olabilir. Bu makalede, temel bir yapı oluşturup stil vereceğiz. Hadi başlayalım!


1. Temel HTML Yapısı


HTML (HyperText Markup Language), bir web sayfasının iskeletini oluşturur. İlk adım olarak, temel bir HTML dosyası oluşturacağız.

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Basit Website</title>

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

</head>

<body>

    <header>

        <h1>Hoş Geldiniz!</h1>

        <nav>

            <ul>

                <li><a href="#">Anasayfa</a></li>

                <li><a href="#">Hakkımızda</a></li>

                <li><a href="#">İletişim</a></li>

            </ul>

        </nav>

    </header>


    <main>

        <section>

            <h2>Hakkımızda</h2>

            <p>Bu basit bir website örneğidir. HTML ve CSS kullanılarak oluşturulmuştur.</p>

        </section>


        <section>

            <h2>İletişim</h2>

            <p>Bizimle iletişime geçmek için lütfen <a href="mailto:info@example.com">e-posta</a> gönderin.</p>

        </section>

    </main>


    <footer>

        <p>&copy; 2023 Basit Website. Tüm hakları saklıdır.</p>

    </footer>

</body>

</html>


Açıklama:


<!DOCTYPE html>: Belgenin HTML5 standardında olduğunu belirtir.


<html lang="tr">: Sayfanın dilini Türkçe olarak belirler.


<head>: Sayfa ile ilgili meta bilgileri içerir (başlık, karakter seti, stil dosyası vb.).


<body>: Sayfanın görünen içeriğini içerir.


<header>, <main>, <footer>: Sayfanın ana bölümlerini oluşturur.

2. CSS ile Stil Verme


CSS (Cascading Style Sheets), HTML öğelerine stil vermek için kullanılır. Şimdi, styles.css dosyası oluşturup sayfamıza stil ekleyelim.

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

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

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

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

/* Main Stili */
main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

section h2 {
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}

/* Footer Stili */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Açıklama:

body: Sayfanın genel stilini belirler (yazı tipi, arka plan rengi vb.).

header: Başlık ve menüyü stilize eder.

nav ul li: Menü öğelerini yatay hale getirir.

main: Ana içeriğin stilini belirler.

footer: Alt bilgiyi stilize eder ve sayfanın altında sabitler.


3. Sonuç


Yukarıdaki kodları kullanarak, basit bir website oluşturabilirsiniz. HTML ile içeriği oluşturup, CSS ile stil vererek sayfanızı daha çekici hale getirebilirsiniz. Bu temel yapıyı genişleterek daha karmaşık projeler oluşturabilirsiniz.

İleri Adımlar:


JavaScript ekleyerek sayfanıza etkileşim ekleyebilirsiniz.

Flexbox veya Grid kullanarak daha modern bir layout oluşturabilirsiniz.

Responsive tasarım için medya sorguları (media queries) kullanabilirsiniz.

Web geliştirme dünyası geniş ve heyecan vericidir. Bu temel adımlarla başlayarak kendinizi geliştirebilirsiniz.
İyi kodlamalar!

İnceleyebilirsiniz

Daha fazla göster