Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz.
Blog Yaz!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.
Ö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>© 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).
Ş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.
Aşağıda, yukarıda belirtilen adımları bir araya getiren tam bir örnek bulunmaktadır.
<!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>© 2024 Blogunuz. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
/* 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;
}
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.
Lisans Yönetim Scripti 2
Canlı Radyo Dark Scripti
Canlı Radyo Light Scripti
Rüzgar Radyo Scripti
Radyo Minimal
Ekitap Scripti
Aşk Sevgililer GünüEvlilik
Sohbet Scripti
Dialog Whatsapp Benzeri Sohbet
Firebase Chat
Web Ajans Scripti
Ajans Scripti Kolay Kullanım
Ajans Scripti V2
Ajans Scripti V3
Avukat Ve Hukuk Bürosu Scripti
Avukat Ve Hukuk Bürosu Web Tasarım V2
Mobil Uyumlu Çilingir Scripti
Kuaför Güzellik Salonu Spa Merkezi Web Tasarım
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2
İlaçlama Şirketi Web Tasarımı
İlan Web Tasarımı
İlan Web Tasarımı V2
İnşaat Firması Web Tasarımı
İnşaat Firması Tasarımı V2
Kitapçı Kırtasiye Web Tasarımı
Kombi Klima Servisi Web Tasarımı
Korku Evi Eğlence Mekanı Web Tasarımı
Kurumsal Firma Web Tasarımı V2
Kurumsal Firma Web Tasarımı V3
Ajans Web Tasarımı V4
Kurumsal Firma Web Tasarımı V4
Kurumsal Firma Web Tasarımı V5
Kurumsal Firma Web Tasarımı V6
Kurumsal Firma Web Tasarımı V7
Kurumsal Firma Web Tasarımı V8
Mobilya Dekorasyon Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V2
Nakliyat Taşımacılık Web Tasarımı V3
Ana Okulu Ve Kreş Web Tasarımı
Otel Pansiyon Web Tasarımı
Özel Oto Servis Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı V2
Restaurant Cafe Bar Lokanta Web Tasarımı
Restaurant Cafe Bar Lokanta Web Tasarımı V2
Teknik Servis Web Tasarımı
Sigorta Acenta Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V2
Sürücü Kursu Web Tasarımı
Tek Ürün Satış Web Tasarımı
Tek Ürün Satış Web Tasarımı V2
Tek Ürün Yaprak Web Tasarımı
Tek Ürün Yaprak Web Tasarımı V2
Tek Ürün Satış Web Tasarımı V3
Temizlik Şirketi Web Tasarımı
Temizlik Şirketi Web Tasarımı V2
Ajans Web Tasarımı V5
Ajans Web Tasarımı V6
Werock Radyo Web Tasarımı
Avukat Ve Hukuk Bürosu Tasarımı V3
Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3
İnşaat Firması Web Tasarımı V3
Kurumsal Firma Web Tasarımı V9
Mimarlık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V4
Ana Okulu Ve Kreş Web Tasarımı V2
Psikolog Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V3
Sürücü Kursu Web Tasarımı V2
Teknik Servis Web Tasarımı V3
Ajans Web Tasarımı V7
Google Indexing Api
Milando Radyo Wordpress Teması
Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.
