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

Bu makalede bir başlık, bir menü, bir içerik alanı ve bir alt bilgi (footer) içeren bir sayfa tasarlayacağız. Örneğimizde div yapısı ve bazı CSS özelliklerini kullanarak sayfamızı biçimlendireceğiz.

ornek.html kodlarımız:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basit Web Sayfası</title>
    <link rel="stylesheet" href="styles5.css">
</head>
<body>
    <div class="container">
        <!-- Başlık -->
        <div class="header">
            <h1>Hoş Geldiniz!</h1>
        </div>

        <!-- Menü -->
        <div class="menu">
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Hakkımızda</a></li>
                <li><a href="#">Hizmetler</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </div>

        <!-- İçerik -->
        <div class="content">
            <h2>İçerik Başlığı</h2>
            <p>Bu bir örnek içerik paragrafıdır. CSS ve div kullanımını gösteriyoruz.</p>
        </div>

        <!-- Alt Bilgi -->
        <div class="footer">
            <p>&copy; 2023 Basit Web Sayfası</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Basit Web Sayfası</title>

</head>

<body>

<h1>Hoş Geldiniz!</h1>

</div>

<ul>

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

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

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

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

</ul>

</div>

<h2>İçerik Başlığı</h2>

<p>Bu bir örnek içerik paragrafıdır. CSS ve div kullanımını gösteriyoruz.</p>

</div>

</div>

</body>

</html>

Kodlarımızı yazarak tarayıcıda açtığımızda aşağıdaki gibi bir görüntü oluşacaktır.

Şimdi CSS kodlarımızı oluşturarak biçimlendirmemizi yapalım. styles5.css dosyamıza ait kodlar:


/* Genel stil */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Başlık */
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Menü */
.menu {
    background-color: #333;
    overflow: hidden;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu ul li {
    float: left;
}

.menu ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.menu ul li a:hover {
    background-color: #575757;
}

/* İçerik */
.content {
    padding: 20px;
}

/* Alt Bilgi */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Genel stil */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

.container {

width: 80%;

margin: 0 auto;

background-color: #fff;

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

}

/* Başlık */

.header {

background-color: #4CAF50;

color: white;

padding: 20px;

text-align: center;

}

/* Menü */

.menu {

background-color: #333;

overflow: hidden;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu ul li {

float: left;

}

.menu ul li a {

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

.menu ul li a:hover {

background-color: #575757;

}

/* İçerik */

.content {

padding: 20px;

}

/* Alt Bilgi */

.footer {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

position: relative;

bottom: 0;

width: 100%;

}

Ekran çıktımız aşağıdaki gibi olacaktır.

Açıklamalar:

div Kullanımı:
- Her bölüm (başlık, menü, içerik, alt bilgi) bir div içine alınmıştır.
- div etiketi, sayfayı mantıksal bölümlere ayırmak için kullanılır.
CSS Stilleri:
- header, menu, content, ve footer sınıfları ile her bölümün stilini ayrı ayrı tanımladık.
- float: left ile menü öğelerini yatay hizaya getirdik.
- padding ve margin kullanarak içerikler arasında boşluklar oluşturduk.
Responsive Tasarım:
- width: 80% ve margin: 0 auto ile sayfanın ortalanmasını sağladık.
- box-shadow ile sayfaya gölge efekti ekledik.

Şimdi CSS kodlarımızı daha detaylı açıklayalım.

1. Genel Stil (Body ve Container)


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

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

.container {

width: 80%;

margin: 0 auto;

background-color: #fff;

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

}

body:
- font-family: Arial, sans-serif;: Sayfanın yazı tipini Arial olarak belirler. Eğer Arial yoksa, genel sans-serif yazı tipi kullanılır.
- margin: 0; padding: 0;: Sayfanın kenar boşluklarını ve iç boşluklarını sıfırlar. Bu, sayfanın tarayıcının kenarlarına yapışmasını sağlar.
- background-color: #f4f4f4;: Sayfanın arka plan rengini açık gri yapar.
.container:
- width: 80%;: Sayfanın genişliğini ekranın %80’i olarak ayarlar.
- margin: 0 auto;: Sayfayı yatayda ortalar. auto, sol ve sağ kenar boşluklarını eşitler.
- background-color: #fff;: İçeriğin arka plan rengini beyaz yapar.
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);: Sayfaya hafif bir gölge efekti ekler. Bu, sayfayı daha belirgin hale getirir.

2. Başlık (Header)


.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

.header {

background-color: #4CAF50;

color: white;

padding: 20px;

text-align: center;

}

.header:
- background-color: #4CAF50;: Başlık bölümünün arka plan rengini yeşil yapar.
- color: white;: Başlık metninin rengini beyaz yapar.
- padding: 20px;: Başlık bölümünün iç boşluğunu 20 piksel yapar. Bu, metnin kenarlardan uzak durmasını sağlar.
- text-align: center;: Başlık metnini ortalar.

3. Menü (Menu)


.menu {
    background-color: #333;
    overflow: hidden;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu ul li {
    float: left;
}

.menu ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.menu ul li a:hover {
    background-color: #575757;
}

.menu {

background-color: #333;

overflow: hidden;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu ul li {

float: left;

}

.menu ul li a {

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

.menu ul li a:hover {

background-color: #575757;

}

.menu:
- background-color: #333;: Menü bölümünün arka plan rengini koyu gri yapar.
- overflow: hidden;: Menü içindeki öğelerin taşmasını engeller.
.menu ul:
- list-style-type: none;: Liste işaretlerini kaldırır (madde işaretleri veya numaralar).
- margin: 0; padding: 0;: Listenin kenar boşluklarını ve iç boşluklarını sıfırlar.
.menu ul li:
- float: left;: Liste öğelerini yatay hizaya getirir. Bu, menü öğelerinin yan yana sıralanmasını sağlar.
.menu ul li a:
- display: block;: Menü bağlantılarını blok öğe yapar. Bu, tüm alanın tıklanabilir olmasını sağlar.
- color: white;: Menü bağlantılarının rengini beyaz yapar.
- text-align: center;: Menü bağlantılarının metnini ortalar.
- padding: 14px 20px;: Menü bağlantılarının iç boşluğunu ayarlar. Dikeyde 14 piksel, yatayda 20 piksel boşluk bırakır.
- text-decoration: none;: Menü bağlantılarının altındaki çizgiyi kaldırır.
.menu ul li a:hover:
- background-color: #575757;: Fare menü bağlantısının üzerine geldiğinde arka plan rengini değiştirir.

4. İçerik (Content)


.content {
    padding: 20px;
}

.content {

padding: 20px;

}

.content:
- padding: 20px;: İçerik bölümünün iç boşluğunu 20 piksel yapar. Bu, metnin kenarlardan uzak durmasını sağlar.

5. Alt Bilgi (Footer)


.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

position: relative;

bottom: 0;

width: 100%;

}

.footer:
- background-color: #333;: Alt bilgi bölümünün arka plan rengini koyu gri yapar.
- color: white;: Alt bilgi metninin rengini beyaz yapar.
- text-align: center;: Alt bilgi metnini ortalar.
- padding: 10px;: Alt bilgi bölümünün iç boşluğunu 10 piksel yapar.
- position: relative;: Alt bilgiyi sayfanın altına sabitler.
- bottom: 0;: Alt bilgiyi sayfanın en altına yerleştirir.
- width: 100%;: Alt bilgi bölümünün genişliğini sayfanın tamamına yayar.

Özet:

div etiketleri, sayfayı mantıksal bölümlere ayırmak için kullanılır.
CSS, bu bölümlerin stilini belirler (renk, yazı tipi, boşluklar, hizalama vb.).
Responsive tasarım için width, margin, ve padding gibi özellikler kullanılır.

Açıklamalar:

1. Genel Stil (Body ve Container)

2. Başlık (Header)

3. Menü (Menu)

4. İçerik (Content)

5. Alt Bilgi (Footer)

Özet:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin