Bir defter düşün:
- Kimse karalamıyor
- Sayfalar kaybolmuyor
- Tarihler düzenli
- Duygular satır satır nefes alıyor
Ve bu defter… HTML ile yazılmış.
Bu yazıda:
- HTML’yi yapı kurmak için kullanacağız
- Günlük mantığını semantik etiketlerle öğreneceğiz
- Mini ama gerçek hayatta anlamlı bir proje çıkaracağız
Framework yok.
Backend yok.
Sadece HTML + CSS + sen.
🧠 Dijital Günlük (Journal) Nedir, Ne Değildir?
Dijital Günlük NEDİR?
- Tarihli yazıların olduğu
- Kişisel düşünce alanı
- Okunabilir ve sade
- Zamana göre ilerleyen bir içerik yapısı
Dijital Günlük NE DEĞİLDİR?
- Sosyal medya ❌
- Blog olmak zorunda değil ❌
- Gösteriş ❌
Bu proje şunu söyler:
“Ben kendim için yazıyorum.”
🧩 Bu Proje Sana Ne Öğretir?
Bu mini proje ile şunları gerçekten öğrenmiş olursun:
- HTML ile anlamlı yapı kurmayı
<article>ne zaman kullanılır<time>neden altın değerinde<p>’nin gerçek gücünü- Okunabilirlik mantığını
- “Her şeyi
<div>ile yapmama” disiplinini 😄
🧱 Günlük Sayfasının Mimarisini Kuralım (Zihinsel Model)
Kod yazmadan önce düşünelim.
Bir günlük sayfası şunlardan oluşur:
Sayfa
├── Başlık
├── Açıklama
├── Günlük Girdileri
│ ├── Tarih
│ ├── Metin
│ └── (isteğe bağlı notlar)
HTML karşılığı:
| Amaç | Etiket |
|---|---|
| Sayfa başlığı | <header> |
| Günlük yazısı | <article> |
| Tarih | <time> |
| Metin | <p> |
🧱 HTML İskeleti (Temiz ve Anlamlı Başlangıç)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dijital Günlüğüm</title>
<meta name="description" content="HTML ile oluşturulmuş kişisel dijital günlük">
</head>
<body>
<header>
<h1>📓 Dijital Günlüğüm</h1>
<p>Bugün aklımdan geçenler, filtre yok.</p>
</header>
</body>
</html>
📌 İpucu:
Günlük projelerinde:
- başlık sade
- açıklama kişisel
olmalı. Bu bir landing page değil 😄
📅 Günlük Girdisi = <article> (Asıl Kahraman)
Her gün = bağımsız bir içerik
Bu yüzden:
<article>mükemmel seçimdir.
<article>
<h2>
<time datetime="2025-01-10">10 Ocak 2025</time>
</h2>
<p>
Bugün HTML ile dijital günlük yapmanın
düşündüğümden daha keyifli olduğunu fark ettim.
</p>
</article>
Neden <article>?
- Tek başına anlamlı
- Başka bir yerde paylaşılabilir
- Blog + günlük hibriti için ideal
🕰️ <time> Etiketi: Küçük Ama Zeki
<time datetime="2025-01-10">10 Ocak 2025</time>
Neden önemli?
- Makine tarafından okunabilir
- SEO dostu
- “Bu metin zamana bağlı” mesajı verir
📌 Altın Kural:
Tarih varsa →
<time>kullan.
🧠 Günlük Metni Nasıl Yazılır? (<p> Stratejisi)
Yanlış:
<p>
Bugün şunu yaptım sonra bunu yaptım sonra şuraya gittim
ve sonra şunu düşündüm ve sonra...
</p>
Doğru:
<p>Bugün biraz yorgundum.</p>
<p>Ama yazı yazmak zihnimi toparladı.</p>
<p>HTML ile düşünmek iyi geliyor.</p>
📌 Kural:
Her paragraf = tek düşünce
📚 Birden Fazla Gün Eklemek (Gerçek Günlük)
<article>
<h2><time datetime="2025-01-09">9 Ocak 2025</time></h2>
<p>Bugün kafam çok doluydu.</p>
</article>
<article>
<h2><time datetime="2025-01-10">10 Ocak 2025</time></h2>
<p>Düşüncelerimi yazıya dökünce rahatladım.</p>
</article>
HTML burada diyor ki:
“Zaman ilerliyor.”
🎨 CSS ile Defter Hissi Verelim (Ama Abartmadan)
body {
font-family: Georgia, serif;
background-color: #f4f1ee;
color: #333;
padding: 2rem;
}
header {
margin-bottom: 3rem;
}
article {
background: #fff;
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 10px;
}
time {
color: #777;
font-size: 0.9rem;
}
p {
line-height: 1.8;
max-width: 650px;
}
📌 Pratik İpucu:max-width → okunabilirliğin gizli anahtarıdır.
✨ Günlüğe Karakter Katacak HTML Dokunuşları
🟡 Önemli Cümleler
<p><mark>Bugün kendimle gurur duydum.</mark></p>
💬 İç Ses (Alıntı Gibi)
<blockquote>
Bugün durup nefes almak gerekiyordu.
</blockquote>
🤫 Gizli Düşünceler
<details>
<summary>Bugün kimseye söylemediklerim</summary>
<p>Aslında biraz korktum.</p>
</details>
HTML + duygu = ❤️
😱 <p> Otomatik Kapanma Tuzağı (Gerçek Hayat Hatası)
<p>Bugün iyiydim
<div>Selam</div>
Tarayıcı:
“P’yi kapattım, geçmiş olsun.”
📌 Ders:
- Günlük projelerinde temiz HTML şart
- Etiketleri bilinçli kapat
🧠 SEO mu? Günlükte Bile Önemli
Google şuna bakar:
- Paragraflar ayrılmış mı?
- Tarihler anlamlı mı?
- Yapı düzgün mü?
Bu yapı:
- Bloga dönüşebilir
- Arşivlenebilir
- Genişletilebilir
🧠 Gerçek Hayat Benzetmesi
HTML ile dijital günlük:
- Kilitli defter 🔐
- Terapist gibi 🛋️
- Sosyal medya değil, kendinle konuşma alanı
🏁 Sonuç: Kod = Sadece Kod Değil
Bu projede öğrendiklerin:
- HTML bir yapı dilidir
- Duygular bile düzen ister
- Az kodla çok anlam mümkündür
Kod yazmak bazen site yapmak değil,
kendini toparlamaktır.
