HTML ve CSS ile Basit Bir Web Sayfası Tasarımı -2

Bu makalede, HTML ve CSS kullanarak modern bir web sayfası tasarımı oluşturacağız. Tasarımda sayfa düzenini özelleştirecek, renk şemalarını ve yazı tiplerini dikkatlice seçecek ve kullanıcılara estetik açıdan hoş bir deneyim sunacağız.

1. HTML Yapısı

HTML, web sayfanızın temel yapısını oluşturur. Başlıklar, paragraflar, bağlantılar ve diğer içerikler HTML etiketleriyle tanımlanır. HTML’de yapıyı doğru bir şekilde oluşturmak, CSS ile görsel stil eklerken işleri kolaylaştırır.

İşte basit bir HTML yapısı:


<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Modern Web Sayfası</title>
    </head>
    <body>
        <header>
            <h1>Modern Web Tasarımı</h1>
            <nav>
                <ul>
                    <li><a href="#home">Anasayfa</a></li>
                    <li><a href="#about">Hakkında</a></li>
                    <li><a href="#services">Hizmetler</a></li>
                    <li><a href="#contact">İletişim</a></li>
                </ul>
            </nav>
        </header>
        <section id="home">
            <h2>Hoş Geldiniz</h2>
            <p>Web tasarımında modern yaklaşımlar ve en iyi uygulamalar hakkında bilgi edinin.</p>
        </section>
        <section id="about">
            <h2>Hakkında</h2>
            <p>Modern web tasarımının önemi ve nasıl etkili bir şekilde uygulanacağı hakkında daha fazla bilgi.</p>
        </section>
        <section id="services">
            <h2>Hizmetler</h2>
            <ul>
                <li>Web Tasarımı</li>
                <li>SEO Hizmetleri</li>
                <li>Dijital Pazarlama</li>
            </ul>
        </section>
        <section id="contact">
            <h2>İletişim</h2>
            <p>Bize ulaşmak için aşağıdaki formu doldurun.</p>
        </section>
        <footer>
            <p>© 2024 Modern Web Tasarımı</p>
        </footer>
    </body>
</html>

<!doctype html>

<head>

<title>Modern Web Sayfası</title>

</head>

<body>

<h1>Modern Web Tasarımı</h1>

<nav>

<ul>

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

<li><a href="#about">Hakkında</a></li>

<li><a href="#services">Hizmetler</a></li>

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

</ul>

</nav>

</header>

<h2>Hoş Geldiniz</h2>

<p>Web tasarımında modern yaklaşımlar ve en iyi uygulamalar hakkında bilgi edinin.</p>

</section>

<h2>Hakkında</h2>

<p>Modern web tasarımının önemi ve nasıl etkili bir şekilde uygulanacağı hakkında daha fazla bilgi.</p>

</section>

<h2>Hizmetler</h2>

<ul>

<li>Web Tasarımı</li>

<li>SEO Hizmetleri</li>

<li>Dijital Pazarlama</li>

</ul>

</section>

<h2>İletişim</h2>

<p>Bize ulaşmak için aşağıdaki formu doldurun.</p>

</section>

</footer>

</body>

</html>

Kodları çalıştırdığımızda:

2. CSS ile Görsel Düzenlemeler

HTML yapısı oluşturduktan sonra, sayfanın görsel stilini eklemek için CSS kullanacağız. Bu, sayfanın düzenini, renklerini, yazı tiplerini ve diğer görsel özelliklerini tanımlar.

Aşağıda, HTML yapısına uygun stil düzenlemeleri yapılmış bir CSS kodu örneği yer alıyor:


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

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

header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

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

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

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
}

nav ul li a:hover {
    color: #ff6347;
}

section {
    padding: 40px;
    margin: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #333;
    font-size: 2em;
    margin-bottom: 20px;
}

ul {
    list-style: none;
    padding-left: 20px;
}

ul li {
    margin-bottom: 10px;
}

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

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

color: #333;

}

header {

background-color: #333;

color: #fff;

padding: 10px 0;

text-align: center;

}

header h1 {

font-size: 2.5em;

margin-bottom: 10px;

}

nav ul {

list-style: none;

padding: 0;

}

nav ul li {

display: inline;

margin-right: 20px;

}

nav ul li a {

color: #fff;

text-decoration: none;

font-size: 1.2em;

}

nav ul li a:hover {

color: #ff6347;

}

section {

padding: 40px;

margin: 20px;

background-color: #fff;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

h2 {

color: #333;

font-size: 2em;

margin-bottom: 20px;

}

ul {

list-style: none;

padding-left: 20px;

}

ul li {

margin-bottom: 10px;

}

footer {

text-align: center;

padding: 10px;

background-color: #333;

color: #fff;

margin-top: 20px;

}

3. Sayfa Düzeni ve Stil Özellikleri

CSS ile oluşturduğumuz sayfa düzeni şu şekilde işliyor:

Header (Başlık):
Section (Bölümler):
Footer (Altbilgi):

4. Gelişmiş Özellikler

Web tasarımında, tasarımın sadece estetik değil, fonksiyonel olmasını sağlamak da önemlidir. Bu nedenle:

Responsive Tasarım:


@media (max-width: 768px) {
    header h1 {
        font-size: 1.8em;
    }
    nav ul {
        text-align: center;
    }
    section {
        margin: 10px;
        padding: 20px;
    }
}

@media (max-width: 768px) {

header h1 {

font-size: 1.8em;

}

nav ul {

text-align: center;

}

section {

margin: 10px;

padding: 20px;

}

Animasyon ve Geçişler:

5. Sonuç ve İleri Düzey İpuçları

Bu makalede, HTML ve CSS kullanarak basit ama şık bir web sayfası tasarımı yaptık. Sayfanın yapısı, renk şemaları ve genel düzeni hakkında temel bilgileri öğrendik. Daha ileri düzeyde, JavaScript ile etkileşimli öğeler ekleyebilir, animasyonlar ve dinamik içerikler kullanarak sayfanın işlevselliğini artırabilirsiniz.

Ayrıca, web tasarımında her zaman erişilebilirlik ve hız optimizasyonu gibi konuları da göz önünde bulundurmalısınız.

1. HTML Yapısı

2. CSS ile Görsel Düzenlemeler

3. Sayfa Düzeni ve Stil Özellikleri

4. Gelişmiş Özellikler

5. Sonuç ve İleri Düzey İpuçları

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X