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ı:
CSS Stilleri:
Responsive Tasarım:

Ş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:
.container:

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:

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:
.menu ul:
.menu ul li:
.menu ul li a:
.menu ul li a:hover:

4. İçerik (Content)


.content {
    padding: 20px;
}

.content {

padding: 20px;

}

.content:

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:

Ö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