img
Html5 Ve Css3 İle Basit Bir Blog Sayfası Tasarımı

Html5 Ve Css3 İle Basit Bir Blog Sayfası Tasarımı

Yeni başlayan web geliştiriciler için etkileyici ve işlevsel bir blog sayfası tasarlamak, web geliştirme sürecinin temel aşamalarından biridir. Bu makalede, 'HTML5 blog', 'CSS3 blog tasarımı', 'basit blog oluşturma' ve 'blog sayfası kodları' anahtar kelimeleri çerçevesinde, HTML5 ve CSS3 kullanarak basit bir blog sayfası oluşturmayı adım adım öğreneceksiniz.

Bir blog sayfası, içerik yönetimi ve kullanıcı etkileşimi açısından büyük önem taşır. HTML5 ve CSS3 ile modern ve çekici bir blog sayfası tasarlamak, hem kullanıcı deneyimini iyileştirir hem de sitenizin profesyonel görünmesini sağlar. Bu makalede, HTML5 ile blog yapısını oluşturacak, CSS3 ile stil verecek ve basit bir blog sayfası örneği ile adım adım ilerleyeceğiz.

HTML5 ile Blog Yapısı Oluşturma

Öncelikle, blog sayfasının temel HTML5 yapısını oluşturalım. Blog sayfamız başlık, içerik ve yan menü gibi bölümlerden oluşacak.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basit Blog Sayfası</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Blog Başlığı</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Hakkında</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>İlk Blog Yazısı</h2>
            <p>Bu, ilk blog yazınızın içeriğidir. HTML5 ve CSS3 kullanarak bir blog sayfası oluşturmanın ne kadar kolay olduğunu göreceksiniz.</p>
        </article>
        <aside>
            <h3>Kategoriler</h3>
            <ul>
                <li><a href="#">Teknoloji</a></li>
                <li><a href="#">Seyahat</a></li>
                <li><a href="#">Yaşam Tarzı</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2024 Blogunuz. Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>

Bu HTML5 yapısı, bir blog sayfasının temel bileşenlerini içerir:başlık, navigasyon menüsü, ana içerik (article), yan menü (aside) ve alt bilgi (footer).

CSS3 ile Stil Verme

Şimdi, blog sayfamızın stilini CSS3 kullanarak belirleyelim. Bu stil, sayfanın görünümünü ve düzenini belirleyecektir.

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

/* Başlık stili */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

/* Navigasyon menüsü stili */
nav ul {
    list-style: none;
    padding: 0;
    background: #444;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: #fff;
    padding: 15px 20px;
    display: inline-block;
    text-decoration: none;
}

/* Ana içerik stili */
main {
    display: flex;
    margin: 20px;
}

/* Makale stili */
article {
    flex: 3;
    background: #fff;
    padding: 20px;
    margin-right: 20px;
    border-radius: 5px;
}

/* Yan menü stili */
aside {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
}

/* Alt bilgi stili */
footer {
    text-align: center;
    padding: 10px 0;
    background: #333;
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Bu CSS kodu, blog sayfasının genel stilini belirler, navigasyon menüsünü düzenler ve ana içerik ile yan menü arasındaki düzeni sağlar.

Basit Bir Blog Sayfası Örneği

Aşağıda, yukarıda belirtilen adımları bir araya getiren tam bir örnek bulunmaktadır.

HTML5

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basit Blog Sayfası</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Blog Başlığı</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Hakkında</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>İlk Blog Yazısı</h2>
            <p>Bu, ilk blog yazınızın içeriğidir. HTML5 ve CSS3 kullanarak bir blog sayfası oluşturmanın ne kadar kolay olduğunu göreceksiniz.</p>
        </article>
        <aside>
            <h3>Kategoriler</h3>
            <ul>
                <li><a href="#">Teknoloji</a></li>
                <li><a href="#">Seyahat</a></li>
                <li><a href="#">Yaşam Tarzı</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2024 Blogunuz. Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>

CSS3

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

/* Başlık stili */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

/* Navigasyon menüsü stili */
nav ul {
    list-style: none;
    padding: 0;
    background: #444;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: #fff;
    padding: 15px 20px;
    display: inline-block;
    text-decoration: none;
}

/* Ana içerik stili */
main {
    display: flex;
    margin: 20px;
}

/* Makale stili */
article {
    flex: 3;
    background: #fff;
    padding: 20px;
    margin-right: 20px;
    border-radius: 5px;
}

/* Yan menü stili */
aside {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
}

/* Alt bilgi stili */
footer {
    text-align: center;
    padding: 10px 0;
    background: #333;
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

İpuçları ve Püf Noktaları

Responsive Tasarım:Blog sayfanızın mobil cihazlarda da iyi görünmesi için medya sorgularını (media queries) kullanarak CSS'inizi optimize edin.

Düzen:Flexbox veya Grid Layout gibi modern CSS düzen araçlarını kullanarak daha karmaşık ve esnek düzenler oluşturabilirsiniz.

Tarayıcı Uyumluluğu:Tüm modern tarayıcılarda düzgün çalıştığından emin olmak için kodunuzu test edin.

Görseller:Görsellerin optimize edilmesi sayfa yükleme sürelerini azaltır ve kullanıcı deneyimini iyileştirir.

Bu makalede, 'HTML5 blog', 'CSS3 blog tasarımı', 'basit blog oluşturma' ve 'blog sayfası kodları' anahtar kelimeleri çerçevesinde HTML5 ve CSS3 kullanarak basit bir blog sayfası oluşturmayı öğrendik. Adım adım yapıyı kurarak ve stil vererek, etkileyici ve işlevsel bir blog sayfası oluşturduk. Bu temel bilgilerle, kendi projelerinizi geliştirebilir ve web tasarımında daha ileri adımlar atabilirsiniz.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    22.7K
    1000.00₺
  • Canlı Radyo Dark Scripti

    15.2K
    1000.00₺
  • Canlı Radyo Light Scripti

    9.1K
    1000.00₺
  • Rüzgar Radyo Scripti

    8.9K
    0.00₺
  • Radyo Minimal

    4.8K
    1000.00₺
  • Ekitap Scripti

    6.7K
    3000.00₺
  • Aşk Sevgililer GünüEvlilik

    8.2K
    1000.00₺
  • Sohbet Scripti

    8.7K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    5.4K
    0.00₺
  • Firebase Chat

    4.3K
    0.00₺
  • Web Ajans Scripti

    27.7K
    3500.00₺
  • Ajans Scripti Kolay Kullanım

    3.5K
    1000.00₺
  • Ajans Scripti V2

    3.6K
    1000.00₺
  • Ajans Scripti V3

    3.6K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    2.5K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    3.2K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    2.4K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    3.1K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    2.6K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    44.4K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    6.5K
    1000.00₺
  • İlan Web Tasarımı

    2.9K
    1000.00₺
  • İlan Web Tasarımı V2

    2.7K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    2.3K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    2.4K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.9K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2.6K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    2.6K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    3.8K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    3.8K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.9K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    4K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    3.7K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    4K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    3.5K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    3.2K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    2.6K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    3.2K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2.7K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.7K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    2.6K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    6.8K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    3.8K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    3.3K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    3.1K
    1000.00₺
  • Teknik Servis Web Tasarımı

    3.2K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2.6K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    2.8K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    3.2K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    3.3K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    3.4K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    3.2K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.9K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    3.3K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    3.1K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    3.1K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    3.2K
    1000.00₺
  • Ajans Web Tasarımı V5

    3.6K
    1000.00₺
  • Ajans Web Tasarımı V6

    4.7K
    1000.00₺
  • Werock Radyo Web Tasarımı

    4.7K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.9K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.9K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    6.5K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.8K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    2.1K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.7K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    2.1K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.8K
    1000.00₺
  • Psikolog Web Tasarımı

    2K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    2.2K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    2.3K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    2.5K
    1000.00₺
  • Ajans Web Tasarımı V7

    2.3K
    900.00₺
  • Google Indexing Api

    914
    500.00₺
  • Milando Radyo Wordpress Teması

    1.1K
    1000.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img