Başlangıç için HTML+CSS: Temel sayfa düzeni ve stil örnekleri
HTML & CSS Mini Örnekleri
Giriş
Bu rehber, "HTML & CSS Mini Örnekleri" arayan yeni başlayanlar için tasarlandı. Amaç, temel sayfa iskeletini kurup basit stiller uygulayarak, küçük ve işe yarar örneklerle öğrenmeyi hızlandırmaktır. Rehber hem masaüstü hem de mobil için duyarlı (responsive) düzenleri nasıl kuracağınızı gösterir ve her örnekte uygulanabilir kod parçaları sunar.
HTML ve CSS'in Rolü
HTML sayfanın yapısını (başlıklar, paragraflar, görseller) oluşturur; CSS ise bu yapıya renk, boşluk, hizalama ve düzen uygular. Temel kavramların kısa bir özetini uzman bir açıklamayla görmek isterseniz, başlangıç kaynaklarına göz atabilirsiniz: HTML/CSS ile Temel Web Tasarımı – Berat Çelik.
Temel HTML iskeleti
Aşağıda en basit, çalışır durumda bir HTML iskeleti var. Bu dosyayı 'index.html' olarak kaydedip bir tarayıcıda açabilirsiniz.
index.html
<!doctype html>
<html lang='tr'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Örnek Sayfa</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<header><h1>Hoş geldiniz</h1></header>
<main><p>Buraya içerik gelecek.</p></main>
<footer><p>© 2026</p></footer>
</body>
</html>
Basit stil ekleme (styles.css)
Aynı klasöre 'styles.css' ekleyin. Bu stiller sayfaya temel bir görünüm kazandırır.
styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
color: #222;
}
header {
background: #0b5eed;
color: #fff;
padding: 1rem;
}
main {
padding: 1rem;
}
Mini Örnek 1: Tek sayfa portföy (hızlı kurulum)
Bu örnek, basit bir başlık, kart düzeninde projeler ve footer içerir. HTML ve CSS'i yukarıdaki temel iskelete ekleyerek çalıştırabilirsiniz.
HTML (içerik örneği)
<section class='projects'>
<article class='card'><h3>Proje A</h3><p>Kısa açıklama.</p></article>
<article class='card'><h3>Proje B</h3><p>Kısa açıklama.</p></article>
</section>
CSS (kart düzeni)
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.card {
background: #f7f7f7;
padding: 1rem;
border-radius: 6px;
}
Mini Örnek 2: İki sütunlu düzen (Flexbox) ve responsive davranış
Flexbox, yan yana sütunlar oluşturup küçük ekranlarda dikey hale getirmek için uygundur.
HTML
<div class='container'>
<aside class='sidebar'>Navigasyon</aside>
<section class='content'>Ana içerik</section>
</div>
CSS
.container {
display: flex;
gap: 1rem;
}
.sidebar {
width: 240px;
background: #eef2ff;
padding: 1rem;
}
.content {
flex: 1;
padding: 1rem;
}
/* Responsive: küçük ekranlarda sütunları üst üste koy */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: auto;
}
}
Responsive (duyarlı) tasarım için temel teknikler
Duyarlı tasarım, farklı ekran genişliklerinde düzgün görünen sayfalar oluşturur. En temel adımlar şunlardır:
- Meta viewport kullanın: <meta name='viewport' content='width=device-width, initial-scale=1'> — bu adım mobil görünümü düzeltir.
- Esnek grid ve flexbox kullanın: İçerik kutularının genişliklerini yüzde veya minmax ile belirleyin.
- Media queries ile küçük ekrana özel düzenler oluşturun.
- Esnek görseller: img { max-width: 100%; height: auto; } şeklinde ayarlayın.
Bu konuların ayrıntılarını ve örneklerini responsive dizayn üzerine hazırlanmış kılavuzlarda bulabilirsiniz: Responsive Tasarım: Nedir, Nasıl Yapılır? – MCG Dijital ve HTML ve CSS ile Responsive Web Sitesi Yapımı – MEKAIT.
Yayına almadan önce kontrol listesi
Her projede hızlıca kontrol etmeniz gereken noktalar:
- Tarayıcıda sayfayı F12 ile farklı cihaz boyutlarında test edin (devtools cihaz modu).
- Görsellerde alt (alt) metinleri ekleyin: <img alt='Açıklama' src='...'>.
- Kontrast ve okunabilirlik: metin/gövde kontrastını kontrol edin.
- Mobil menü davranışı: menünün küçük ekranda erişilebilir olduğundan emin olun.
- Dosya boyutları: görselleri sıkıştırın ve CSS/JS varsa minify edin.
Hızlı referans: sık kullanılan seçiciler ve birimler
- Seçiciler: .class, #id, element (p, h1), element.class
- Birimler: px (sabit), %, vw/vh, rem (önerilen yazı ölçekleri)
- Yerleşim: display: block/inline/flex/grid
İyi uygulama ipuçları
- Önce semantik HTML yazın, sonra stil uygulayın—bu erişilebilirliği artırır.
- Tekrar kullanılabilir sınıflar oluşturun (ör. .btn, .card) ve inline stillerden kaçının.
- Genişlikleri yüzde veya minmax ile verin; sabit genişlikleri yalnızca gerekliyse kullanın.
Kaynaklar ve sonraki adımlar
Daha fazla örnek ve responsive detay için yukarıdaki MCG Dijital ve MEKAIT rehberlerine göz atın. Temel konuları pekiştirmek için küçük projeler yapın (kişisel portföy, blog ana sayfası, basit bir ürün listeleme). İleri düzeyde Flexbox ve CSS Grid kılavuzlarıyla düzen becerilerinizi arttırabilirsiniz.
Sonuç
HTML ile sayfanın iskeletini kurup CSS ile stil vererek, kısa sürede çalışabilir ve duyarlı sayfalar üretebilirsiniz. Buradaki mini örnekleri adım adım uygulayarak temel kavramları öğrenin, sonra gerçek içeriklerle test edin. Kaynaklar kısmındaki rehberler daha derin örnekler sağlar ve responsive uygulama tekniklerini pekiştirmenize yardımcı olur.
Yorumlar