/* Modern Tasarım Değişkenleri */
:root {
--primary-color: #2563eb;
--secondary-color: #3b82f6;
--bg-color: #f8fafc;
--card-bg: #ffffff;
--text-main: #1e293b;
--text-muted: #64748b;
--accent-color: #f59e0b;
--code-bg: #1e1e1e;
--border-radius: 12px;
--ad-bg: #f1f5f9;
}.wp-custom-page-container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: var(--text-main);
background-color: var(--bg-color);
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}/* Reklam Alanı Stilleri */
.ad-placeholder {
background-color: var(--ad-bg);
border: 2px dashed #cbd5e1;
border-radius: var(--border-radius);
margin: 30px 0;
padding: 20px;
text-align: center;
position: relative;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.3s ease;
}.ad-placeholder::before {
content: 'REKLAM / ADVERTISEMENT';
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
letter-spacing: 1px;
color: var(--text-muted);
font-weight: bold;
}/* Başlık Alanı */
.hero-section {
text-align: center;
margin-bottom: 40px;
padding: 80px 20px;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: white;
border-radius: var(--border-radius);
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
}.hero-section h1 {
font-size: 3rem;
margin-bottom: 15px;
font-weight: 800;
background: linear-gradient(to right, #60a5fa, #a855f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}/* Kart Stilleri */
.info-card {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 35px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
border-top: 6px solid var(--primary-color);
}.info-card h2 {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.75rem;
margin-top: 0;
margin-bottom: 20px;
color: var(--text-main);
}/* Kod Blokları */
.code-block {
background: var(--code-bg);
color: #d4d4d4;
padding: 25px;
border-radius: 8px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.95rem;
overflow-x: auto;
margin: 20px 0;
border-left: 4px solid var(--secondary-color);
}.tag-color { color: #569cd6; }
.attr-color { color: #9cdcfe; }
.val-color { color: #ce9178; }
.comment-color { color: #6a9955; }/* Tablo Stilleri */
.custom-table-wrapper {
overflow-x: auto;
margin: 20px 0;
border-radius: 8px;
border: 1px solid #e2e8f0;
}.modern-table {
width: 100%;
border-collapse: collapse;
background: white;
}.modern-table th {
background-color: #f1f5f9;
color: var(--text-main);
text-align: left;
padding: 15px;
font-weight: 700;
border-bottom: 2px solid #e2e8f0;
}.modern-table td {
padding: 14px 15px;
border-bottom: 1px solid #f1f5f9;
font-size: 0.95rem;
}.modern-table tr:hover {
background-color: #f8fafc;
}/* Renk Paleti */
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
}.color-box {
height: 80px;
border-radius: 8px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.85rem;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}/* SSS Bölümü Stilleri */
.faq-container {
margin-top: 20px;
}.faq-item {
border-bottom: 1px solid #e2e8f0;
padding: 20px 0;
}.faq-item:last-child {
border-bottom: none;
}.faq-question {
font-weight: 700;
color: var(--primary-color);
margin-bottom: 10px;
font-size: 1.1rem;
display: flex;
align-items: flex-start;
gap: 10px;
}.faq-question::before {
content: 'Q.';
color: var(--accent-color);
}.faq-answer {
color: var(--text-muted);
padding-left: 28px;
font-size: 1rem;
}/* Badge */
.badge {
display: inline-block;
padding: 2px 8px;
background: #e0e7ff;
color: #4338ca;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}@media (max-width: 768px) {
.hero-section h1 { font-size: 2.25rem; }
}
Modern HTML Altyapısı
A'dan Z'ye HTML5 yapı taşları, semantik etiketler ve profesyonel ipuçları ile dolu kapsamlı kaynak.
[Üst Banner Reklam Alanı]
📄 Semantik HTML5 Yapısı ve İskelet
Modern web tasarımı sadece görüntüden ibaret değildir; arama motorları ve ekran okuyucular için semantik (anlamsal) bir yapı kurmak şarttır.
<!DOCTYPE html> <!-- Belge türü bildirimi -->
<header> <!-- Navigasyon ve logo alanı -->
<nav>...</nav>
</header>
<main> <!-- Sayfanın ana benzersiz içeriği -->
<article>
<section>Alt konu başlığı</section>
</article>
<aside>Yan menü veya reklam alanı</aside>
</main>
<footer>Telif hakkı ve iletişim</footer>
<header> <!-- Navigasyon ve logo alanı -->
<nav>...</nav>
</header>
<main> <!-- Sayfanın ana benzersiz içeriği -->
<article>
<section>Alt konu başlığı</section>
</article>
<aside>Yan menü veya reklam alanı</aside>
</main>
<footer>Telif hakkı ve iletişim</footer>
🔍 Kapsamlı Meta Etiketleri ve SEO Yönetimi
Aşağıdaki tablo, profesyonel bir web sayfasının head bölümünde bulunması gereken en önemli parametreleri içerir.
| Kategori | Etiket (Tag) | Fonksiyon ve Teknik Açıklama |
|---|---|---|
| Temel | charset="UTF-8" | Karakter setini tanımlar. Türkçe karakterlerin (ğ, ş, ı) doğru işlenmesini sağlar. |
| Responsive | viewport | Cihaz genişliğine göre içeriği ölçeklendirir. Mobil uyumluluk için mecburidir. |
| SEO | description | Sayfa özetini tanımlar. Arama motoru sonuç sayfasındaki (SERP) açıklamayı belirler. |
| Sosyal Medya | og:title | Open Graph protokolü. Paylaşılan linkin Facebook/Twitter'da başlığını belirler. |
| Sosyal Medya | og:image | Paylaşılan linkin yanında görünecek önizleme görselinin URL'sini belirtir. |
| Robot Kontrol | robots | Arama motoru botlarına sayfayı dizine ekleme (index) veya ekleme talimatı verir. |
| Yönlendirme | refresh | Belirli bir saniye sonra sayfayı yenileme veya başka URL'ye yönlendirme yapar. |
[İçerik Arası Reklam Alanı]
🎨 Modern Renk Paleti ve HEX Kodları
Kullanıcı arayüzü (UI) tasarımında en çok tercih edilen profesyonel web renkleri.
#2563EB
Safir Mavi#10B981
Zümrüt Yeşil#EF4444
Uyarı Kırmızı#F59E0B
Amber Turuncu#6366F1
İndigo Gece#F472B6
Pudra Pembe#94A3B8
Metalik Gri#0F172A
Koyu Lacivert#8B5CF6
Mor Lavanta#06B6D4
Turkuaz📊 HTML Tablo Mimarisi ve Bileşenleri
Veri tablolarını yapılandırmak için kullanılan ana hiyerarşik etiketler.
| Etiket | Açıklama | Hiyerarşik Seviye |
|---|---|---|
<table> | Tüm tablo yapısını kapsayan ana etikettir. | Konteyner |
<thead> | Tablonun başlık (üst) kısmını gruplandırır. | Üst Bölüm |
<tbody> | Verilerin bulunduğu ana gövde kısmıdır. | Orta Bölüm |
<tr> | Satır oluşturur (Table Row). | Satır |
<th> | Başlık hücresi. Varsayılan olarak kalın ve ortalıdır. | Hücre |
<td> | Standart veri hücresi. | Hücre |
<caption> | Tabloya bir başlık veya açıklama metni ekler. | Başlık |
💡 Önemli HTML Etiketleri ve Fonksiyonları
Web geliştiricilerin her gün kullandığı en popüler 10 HTML etiketi.
| Etiket | Anlamı | Kullanım Amacı |
|---|---|---|
<a> | Anchor (Çapa) | Sayfalar arası link/bağlantı kurmak için. |
<img> | Image (Görsel) | Resim, ikon ve grafik dosyalarını görüntülemek için. |
<div> | Division (Bölüm) | Blok düzeyinde konteyner oluşturup gruplandırma yapmak için. |
<form> | Form | Kullanıcıdan veri toplamak (login, iletişim vb.) için. |
<input> | Giriş Alanı | Metin, şifre, dosya gibi veri girişlerini yakalamak için. |
<button> | Düğme | Tıklanabilir aksiyonları (kaydet, gönder) tetiklemek için. |
<ul> | Unordered List | Madde işaretli sırasız listeler oluşturmak için. |
<ol> | Ordered List | Numaralı (1, 2, 3) sıralı listeler oluşturmak için. |
<strong> | Vurgu | Metnin önemini belirtip kalınlaştırmak (SEO dostu) için. |
<iframe> | Inline Frame | Başka bir web sayfasını mevcut sayfa içinde göstermek için. |
❓ Sıkça Sorulan Sorular ve Cevapları
HTML geliştirme süreciyle ilgili en çok merak edilen teknik konulara hızlı yanıtlar.
HTML5 ile önceki sürümler arasındaki en büyük fark nedir?
HTML5, video ve ses (video, audio) gibi medya elementlerini doğrudan destekler, daha iyi semantik yapı sunar (article, section, header) ve modern web uygulamaları için gelişmiş API'lar sağlar.
Semantik etiket kullanmak SEO için neden önemlidir?
Arama motorları (Google vb.), semantik etiketler sayesinde sayfanın hangi kısmının başlık, hangi kısmının ana içerik veya yan menü olduğunu anlar. Bu da içeriğin daha doğru indekslenmesini sağlar.
Meta "viewport" etiketi ne işe yarar?
Bu etiket, tarayıcıya sayfanın boyutlarını cihaz ekranına göre ayarlamasını söyler. Eksik olması durumunda siteniz mobil cihazlarda çok küçük veya orantısız görünebilir.
HTML'de "id" ve "class" farkı nedir?
"id" bir sayfada sadece bir elemente özgü olmalıdır (benzersizdir). "class" ise birden fazla elemente aynı stili vermek için kullanılabilir ve tekrar edilebilir.
Görsellerde "alt" parametresi kullanmak zorunlu mu?
Teknik olarak zorunlu değildir ancak SEO ve erişilebilirlik (ekran okuyucular) için kritik önemdedir. Görsel yüklenmediğinde bu metin görünür.
[Alt Banner Reklam Alanı]