Bölüm 7: HTML5 Gelişmiş Özellikler ve Modern Web Standartları

<canvas id="myCanvas" width="400" height="300">
    Tarayıcınız canvas etiketini desteklemiyor.
</canvas>
 
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
 
// Dikdörtgen çizme
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 200, 100);
 
// Daire çizme
ctx.beginPath();
ctx.arc(200, 150, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#e74c3c';
ctx.fill();
 
// Metin yazma
ctx.font = '20px Arial';
ctx.fillStyle = '#2c3e50';
ctx.fillText('Merhaba Canvas!', 100, 250);
</script>

<canvas id="chartCanvas" width="600" height="400"></canvas>
 
<script>
function drawBarChart(data, labels) {
    const canvas = document.getElementById('chartCanvas');
    const ctx = canvas.getContext('2d');
    
    const maxValue = Math.max(...data);
    const barWidth = 60;
    const barSpacing = 20;
    const chartHeight = 300;
    
    // Başlık
    ctx.font = 'bold 24px Arial';
    ctx.fillStyle = '#2c3e50';
    ctx.fillText('Satış Grafiği', 200, 30);
    
    // Çubukları çiz
    data.forEach((value, index) => {
        const barHeight = (value / maxValue) * chartHeight;
        const x = 50 + index * (barWidth + barSpacing);
        const y = 350 - barHeight;
        
        // Çubuk
        ctx.fillStyle = `hsl(${index * 60}, 70%, 50%)`;
        ctx.fillRect(x, y, barWidth, barHeight);
        
        // Değer
        ctx.fillStyle = '#2c3e50';
        ctx.font = '14px Arial';
        ctx.fillText(value, x + 15, y - 10);
        
        // Etiket
        ctx.fillText(labels[index], x + 5, 375);
    });
}
 
// Veri
const salesData = [120, 190, 300, 500, 200, 300];
const months = ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz'];
 
drawBarChart(salesData, months);
</script>

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <!-- Dikdörtgen -->
    <rect x="10" y="10" width="100" height="80" 
          fill="#3498db" stroke="#2980b9" stroke-width="2"/>
    
    <!-- Daire -->
    <circle cx="200" cy="50" r="40" 
            fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>
    
    <!-- Çizgi -->
    <line x1="10" y1="150" x2="300" y2="150" 
          stroke="#2c3e50" stroke-width="3"/>
    
    <!-- Poligon -->
    <polygon points="50,200 100,250 0,250" 
             fill="#f39c12" stroke="#e67e22" stroke-width="2"/>
    
    <!-- Metin -->
    <text x="150" y="200" font-family="Arial" font-size="20" fill="#2c3e50">
        SVG Metin
    </text>
    
    <!-- Yol (Path) -->
    <path d="M 250 200 Q 300 150 350 200 T 450 200" 
          stroke="#9b59b6" stroke-width="3" fill="none"/>
</svg>

<svg width="300" height="200" style="border: 1px solid #ccc;">
    <circle id="interactiveCircle" cx="150" cy="100" r="50" 
            fill="#3498db" stroke="#2980b9" stroke-width="3"
            style="cursor: pointer; transition: all 0.3s;">
    
    <text x="150" y="180" text-anchor="middle" font-family="Arial" font-size="14">
        Tıklayın!
    </text>
</svg>
 
<script>
document.getElementById('interactiveCircle').addEventListener('click', function() {
    const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    this.setAttribute('fill', randomColor);
    
    // Animasyon efekti
    this.setAttribute('r', '60');
    setTimeout(() => this.setAttribute('r', '50'), 200);
});
</script>

<div class="storage-demo">
    <h3>Yerel Depolama Demo</h3>
    
    <div>
        <label for="userName">Adınız:</label>
        <input type="text" id="userName" placeholder="Adınızı girin">
        <button onclick="saveData()">Kaydet</button>
        <button onclick="loadData()">Yükle</button>
        <button onclick="clearData()">Temizle</button>
    </div>
    
    <div id="output"></div>
</div>
 
<script>
function saveData() {
    const name = document.getElementById('userName').value;
    if (name) {
        localStorage.setItem('userName', name);
        localStorage.setItem('saveDate', new Date().toLocaleString());
        document.getElementById('output').innerHTML = 
            `<p style="color: green;">Veri kaydedildi: ${name}</p>`;
    }
}
 
function loadData() {
    const name = localStorage.getItem('userName');
    const date = localStorage.getItem('saveDate');
    
    if (name) {
        document.getElementById('userName').value = name;
        document.getElementById('output').innerHTML = 
            `<p style="color: blue;">Veri yüklendi: ${name}<br>Kayıt tarihi: ${date}</p>`;
    } else {
        document.getElementById('output').innerHTML = 
            `<p style="color: red;">Kaydedilmiş veri bulunamadı!</p>`;
    }
}
 
function clearData() {
    localStorage.removeItem('userName');
    localStorage.removeItem('saveDate');
    document.getElementById('userName').value = '';
    document.getElementById('output').innerHTML = 
        `<p style="color: orange;">Veriler temizlendi!</p>`;
}
 
// Sayfa yüklendiğinde otomatik yükle
window.onload = loadData;
</script>

<div class="storage-comparison">
    <h3>Storage Türleri Karşılaştırması</h3>
    
    <div>
        <h4>Local Storage (Kalıcı)</h4>
        <input type="text" id="localInput" placeholder="Local Storage verisi">
        <button onclick="setLocal()">Kaydet</button>
        <button onclick="getLocal()">Yükle</button>
        <div id="localOutput"></div>
    </div>
    
    <div>
        <h4>Session Storage (Oturum)</h4>
        <input type="text" id="sessionInput" placeholder="Session Storage verisi">
        <button onclick="setSession()">Kaydet</button>
        <button onclick="getSession()">Yükle</button>
        <div id="sessionOutput"></div>
    </div>
</div>
 
<script>
function setLocal() {
    const value = document.getElementById('localInput').value;
    localStorage.setItem('localData', value);
    document.getElementById('localOutput').innerHTML = `Kaydedildi: ${value}`;
}
 
function getLocal() {
    const value = localStorage.getItem('localData') || 'Veri bulunamadı';
    document.getElementById('localOutput').innerHTML = `Yüklendi: ${value}`;
}
 
function setSession() {
    const value = document.getElementById('sessionInput').value;
    sessionStorage.setItem('sessionData', value);
    document.getElementById('sessionOutput').innerHTML = `Kaydedildi: ${value}`;
}
 
function getSession() {
    const value = sessionStorage.getItem('sessionData') || 'Veri bulunamadı';
    document.getElementById('sessionOutput').innerHTML = `Yüklendi: ${value}`;
}
</script>

<div class="location-demo">
    <h3>Konum Belirleme</h3>
    <button onclick="getLocation()">Konumumu Bul</button>
    <div id="locationOutput"></div>
    <div id="mapContainer"></div>
</div>
 
<script>
function getLocation() {
    const output = document.getElementById('locationOutput');
    
    if (navigator.geolocation) {
        output.innerHTML = "Konum alınıyor...";
        
        navigator.geolocation.getCurrentPosition(
            function(position) {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                const accuracy = position.coords.accuracy;
                
                output.innerHTML = `
                    <p><strong>Konumunuz:</strong></p>
                    <p>Enlem: ${lat.toFixed(6)}</p>
                    <p>Boylam: ${lon.toFixed(6)}</p>
                    <p>Doğruluk: ${accuracy.toFixed(0)} metre</p>
                    <p><a href="https://www.google.com/maps?q=${lat},${lon}" target="_blank">
                        Google Maps'te Görüntüle
                    </a></p>
                `;
            },
            function(error) {
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        output.innerHTML = "Konum erişimi reddedildi.";
                        break;
                    case error.POSITION_UNAVAILABLE:
                        output.innerHTML = "Konum bilgisi kullanılamıyor.";
                        break;
                    case error.TIMEOUT:
                        output.innerHTML = "Konum isteği zaman aşımına uğradı.";
                        break;
                    default:
                        output.innerHTML = "Bilinmeyen bir hata oluştu.";
                        break;
                }
            },
            {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 60000
            }
        );
    } else {
        output.innerHTML = "Geolocation bu tarayıcıda desteklenmiyor.";
    }
}
</script>

<!DOCTYPE html>
<html lang="tr">
<head>
    <!-- Temel Meta Etiketler -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- SEO Meta Etiketler -->
    <title>HTML5 Eğitim Serisi - Sıfırdan Web Geliştirme</title>
    <meta name="description" content="HTML5 öğrenmeye başlayanlar için kapsamlı eğitim serisi. Temel kavramlardan gelişmiş tekniklere kadar adım adım öğrenin.">
    <meta name="keywords" content="HTML5, web geliştirme, eğitim, kurs, öğrenme, frontend">
    <meta name="author" content="Furkan Çzay">
    <meta name="robots" content="index, follow">
    <meta name="language" content="Turkish">
    
    <!-- Open Graph (Facebook, LinkedIn) -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="HTML5 Eğitim Serisi - Sıfırdan Web Geliştirme">
    <meta property="og:description" content="HTML5 öğrenmeye başlayanlar için kapsamlı eğitim serisi. Temel kavramlardan gelişmiş tekniklere kadar adım adım öğrenin.">
    <meta property="og:image" content="https://example.com/images/html5-course-preview.jpg">
    <meta property="og:url" content="https://example.com/html5-egitim-serisi">
    <meta property="og:site_name" content="Web Geliştirme Eğitimleri">
    <meta property="og:locale" content="tr_TR">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@furkanczay">
    <meta name="twitter:creator" content="@furkanczay">
    <meta name="twitter:title" content="HTML5 Eğitim Serisi - Sıfırdan Web Geliştirme">
    <meta name="twitter:description" content="HTML5 öğrenmeye başlayanlar için kapsamlı eğitim serisi.">
    <meta name="twitter:image" content="https://example.com/images/html5-course-preview.jpg">
    
    <!-- Apple Meta Etiketler -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="HTML5 Eğitim">
    
    <!-- Microsoft Meta Etiketler -->
    <meta name="msapplication-TileColor" content="#3498db">
    <meta name="theme-color" content="#3498db">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://example.com/html5-egitim-serisi">
    
    <!-- Alternatif Diller -->
    <link rel="alternate" hreflang="en" href="https://example.com/en/html5-tutorial">
    <link rel="alternate" hreflang="tr" href="https://example.com/html5-egitim-serisi">
    
    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Course",
        "name": "HTML5 Eğitim Serisi",
        "description": "HTML5 öğrenmeye başlayanlar için kapsamlı eğitim serisi",
        "provider": {
            "@type": "Organization",
            "name": "Web Geliştirme Eğitimleri",
            "url": "https://example.com"
        },
        "courseMode": "online",
        "educationalLevel": "Beginner",
        "inLanguage": "tr",
        "author": {
            "@type": "Person",
            "name": "Furkan Çzay"
        }
    }
    </script>
</head>
<body>
    <!-- Sayfa içeriği -->
</body>
</html>

<div itemscope itemtype="https://schema.org/Person">
    <img src="profile.jpg" alt="Profil fotoğrafı" itemprop="image">
    <h1 itemprop="name">Ahmet Yılmaz</h1>
    <p itemprop="jobTitle">Web Geliştirici</p>
    
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
        <span itemprop="addressLocality">İstanbul</span>,
        <span itemprop="addressCountry">Türkiye</span>
    </div>
    
    <p>E-posta: <a href="mailto:[email protected]" itemprop="email">[email protected]</a></p>
    <p>Telefon: <span itemprop="telephone">+90 555 123 45 67</span></p>
    <p>Web site: <a href="https://ahmetyilmaz.com" itemprop="url">ahmetyilmaz.com</a></p>
</div>

<article itemscope itemtype="https://schema.org/Article">
    <header>
        <h1 itemprop="headline">HTML5 Gelişmiş Özellikler Rehberi</h1>
        <p>
            <time datetime="2025-06-15" itemprop="datePublished">15 Haziran 2025</time>
            tarihinde
            <span itemprop="author" itemscope itemtype="https://schema.org/Person">
                <span itemprop="name">Furkan Çzay</span>
            </span>
            tarafından yayınlandı
        </p>
        <p itemprop="description">
            HTML5'in gelişmiş özelliklerini öğrenen kapsamlı rehber
        </p>
    </header>
    
    <div itemprop="articleBody">
        <p>Bu makalede HTML5'in en gelişmiş özelliklerini öğreneceksiniz...</p>
    </div>
    
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <meta itemprop="name" content="Web Geliştirme Blog">
        <meta itemprop="url" content="https://example.com">
    </div>
</article>

<div itemscope itemtype="https://schema.org/Product">
    <img src="laptop.jpg" alt="Laptop" itemprop="image">
    
    <h2 itemprop="name">MacBook Pro 16"</h2>
    <p itemprop="description">Profesyonel kullanım için tasarlanmış güçlü laptop</p>
    
    <div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
        <span itemprop="name">Apple</span>
    </div>
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="price" content="45000">₺45.000</span>
        <span itemprop="priceCurrency" content="TRY"></span>
        <link itemprop="availability" href="https://schema.org/InStock">
        <span itemprop="seller" itemscope itemtype="https://schema.org/Organization">
            <span itemprop="name">TechMağaza</span>
        </span>
    </div>
    
    <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        <span itemprop="ratingValue">4.8</span> / 
        <span itemprop="bestRating">5</span> yıldız
        (<span itemprop="ratingCount">124</span> değerlendirme)
    </div>
</div>

<div class="web-components-demo">
    <h3>Özel Web Componenti</h3>
    
    <!-- Özel elementimiz -->
    <user-card 
        name="Ahmet Yılmaz" 
        role="Web Developer" 
        avatar="https://via.placeholder.com/80"
        email="[email protected]">
    </user-card>
    
    <user-card 
        name="Ayşe Demir" 
        role="UI/UX Designer" 
        avatar="https://via.placeholder.com/80"
        email="[email protected]">
    </user-card>
</div>
 
<script>
class UserCard extends HTMLElement {
    constructor() {
        super();
        
        // Shadow DOM oluştur
        this.attachShadow({ mode: 'open' });
    }
    
    connectedCallback() {
        this.render();
    }
    
    render() {
        const name = this.getAttribute('name') || 'İsimsiz';
        const role = this.getAttribute('role') || 'Pozisyon belirtilmemiş';
        const avatar = this.getAttribute('avatar') || 'https://via.placeholder.com/80';
        const email = this.getAttribute('email') || '';
        
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    padding: 20px;
                    margin: 10px;
                    max-width: 300px;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                    font-family: Arial, sans-serif;
                }
                
                .avatar {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    margin-bottom: 15px;
                }
                
                .name {
                    font-size: 1.5em;
                    font-weight: bold;
                    margin: 0 0 5px 0;
                    color: #2c3e50;
                }
                
                .role {
                    color: #7f8c8d;
                    margin: 0 0 10px 0;
                }
                
                .email {
                    color: #3498db;
                    text-decoration: none;
                }
                
                .email:hover {
                    text-decoration: underline;
                }
            </style>
            
            <div class="card">
                <img src="${avatar}" alt="${name}" class="avatar">
                <h3 class="name">${name}</h3>
                <p class="role">${role}</p>
                ${email ? `<a href="mailto:${email}" class="email">${email}</a>` : ''}
            </div>
        `;
    }
}
 
// Custom elementi kaydet
customElements.define('user-card', UserCard);
</script>

<!-- HTML head içinde -->
<link rel="manifest" href="/manifest.json">
 
<!-- manifest.json dosyası -->

{
    "name": "HTML5 Eğitim Uygulaması",
    "short_name": "HTML5 Eğitim",
    "description": "HTML5 öğrenmek için kapsamlı eğitim uygulaması",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#3498db",
    "orientation": "portrait",
    "icons": [
        {
            "src": "/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "categories": ["education", "reference"],
    "lang": "tr"
}

<script>
// Service Worker kaydı
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js')
        .then(function(registration) {
            console.log('SW registered: ', registration);
        })
        .catch(function(registrationError) {
            console.log('SW registration failed: ', registrationError);
        });
    });
}
</script>

<head>
    <!-- DNS prefetch -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//cdn.example.com">
    
    <!-- Preconnect -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Prefetch -->
    <link rel="prefetch" href="/next-page.html">
    <link rel="prefetch" href="/images/hero-image.jpg">
    
    <!-- Preload -->
    <link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/css/critical.css" as="style">
    <link rel="preload" href="/js/app.js" as="script">
    
    <!-- Module preload -->
    <link rel="modulepreload" href="/js/modules/main.js">
</head>

<!-- Critical CSS inline -->
<style>
/* Kritik CSS burada inline olarak */
body { font-family: Arial, sans-serif; margin: 0; }
.header { background: #3498db; color: white; padding: 1rem; }
.main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
</style>
 
<!-- Non-critical CSS asenkron yükleme -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>
 
<!-- JavaScript async/defer -->
<script src="/js/analytics.js" async></script>
<script src="/js/main.js" defer></script>

<form class="advanced-form" novalidate>
    <fieldset>
        <legend>Gelişmiş Form Validasyonu</legend>
        
        <!-- Custom validity -->
        <div class="form-group">
            <label for="username">Kullanıcı Adı:</label>
            <input type="text" id="username" name="username" 
                   pattern="[a-zA-Z0-9_]{3,20}"
                   title="3-20 karakter, sadece harf, rakam ve alt çizgi"
                   required>
            <div class="error-message"></div>
        </div>
        
        <!-- Password match validation -->
        <div class="form-group">
            <label for="password">Şifre:</label>
            <input type="password" id="password" name="password" 
                   minlength="8" required>
            <div class="error-message"></div>
        </div>
        
        <div class="form-group">
            <label for="confirmPassword">Şifre Tekrar:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" 
                   minlength="8" required>
            <div class="error-message"></div>
        </div>
        
        <!-- Custom range input -->
        <div class="form-group">
            <label for="age">Yaş: <span id="ageValue">25</span></label>
            <input type="range" id="age" name="age" 
                   min="18" max="100" value="25"
                   oninput="document.getElementById('ageValue').textContent = this.value">
        </div>
        
        <button type="submit">Kayıt Ol</button>
    </fieldset>
</form>
 
<script>
// Custom form validation
const form = document.querySelector('.advanced-form');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
 
function validatePasswordMatch() {
    if (password.value !== confirmPassword.value) {
        confirmPassword.setCustomValidity('Şifreler eşleşmiyor');
    } else {
        confirmPassword.setCustomValidity('');
    }
}
 
password.addEventListener('change', validatePasswordMatch);
confirmPassword.addEventListener('input', validatePasswordMatch);
 
form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Form validation
    if (form.checkValidity()) {
        alert('Form başarıyla gönderildi!');
    } else {
        // Show custom error messages
        const inputs = form.querySelectorAll('input');
        inputs.forEach(input => {
            const errorDiv = input.parentNode.querySelector('.error-message');
            if (!input.validity.valid) {
                errorDiv.textContent = input.validationMessage;
                errorDiv.style.color = 'red';
            } else {
                errorDiv.textContent = '';
            }
        });
    }
});
</script>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Modern Web Uygulaması</title>
    
    <!-- PWA Support -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#3498db">
    
    <!-- Performance optimizations -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preload" href="/css/critical.css" as="style">
    
    <style>
        /* Critical CSS */
        body { font-family: Arial, sans-serif; margin: 0; line-height: 1.6; }
        .container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
        .header { background: linear-gradient(135deg, #3498db, #2980b9); color: white; padding: 2rem 0; }
        .demo-section { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>HTML5 Modern Web Uygulaması</h1>
            <p>Gelişmiş HTML5 özelliklerinin canlı demonstrasyonu</p>
        </div>
    </header>
    
    <main class="container">
        <!-- Canvas Demo -->
        <section class="demo-section">
            <h2>Canvas Grafik Demo</h2>
            <canvas id="demoCanvas" width="400" height="200"></canvas>
            <button onclick="drawRandomShapes()">Rastgele Şekiller Çiz</button>
        </section>
        
        <!-- Geolocation Demo -->
        <section class="demo-section">
            <h2>Konum Belirleme</h2>
            <button onclick="getCurrentLocation()">Konumumu Bul</button>
            <div id="locationResult"></div>
        </section>
        
        <!-- Storage Demo -->
        <section class="demo-section">
            <h2>Yerel Depolama</h2>
            <input type="text" id="storageInput" placeholder="Bir şeyler yazın...">
            <button onclick="saveToStorage()">Kaydet</button>
            <button onclick="loadFromStorage()">Yükle</button>
            <div id="storageOutput"></div>
        </section>
        
        <!-- Web Component Demo -->
        <section class="demo-section">
            <h2>Özel Web Componenti</h2>
            <modern-card 
                title="HTML5 Eğitimi" 
                description="Modern web geliştirme teknikleri"
                image="https://via.placeholder.com/200x120">
            </modern-card>
        </section>
        
        <!-- Microdata Example -->
        <section class="demo-section" itemscope itemtype="https://schema.org/Course">
            <h2 itemprop="name">HTML5 İleri Seviye Kurs</h2>
            <p itemprop="description">Web geliştirme için gelişmiş HTML5 tekniklerini öğrenin</p>
            <div itemprop="provider" itemscope itemtype="https://schema.org/Organization">
                <span itemprop="name">Web Akademi</span>
            </div>
            <meta itemprop="courseMode" content="online">
        </section>
    </main>
    
    <footer class="container">
        <p>&copy; 2025 HTML5 Modern Web Uygulaması. Bu sayfa modern HTML5 özelliklerini göstermektedir.</p>
    </footer>
    
    <!-- Scripts -->
    <script>
        // Canvas demo
        function drawRandomShapes() {
            const canvas = document.getElementById('demoCanvas');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let i = 0; i < 5; i++) {
                ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 50%)`;
                ctx.beginPath();
                ctx.arc(
                    Math.random() * canvas.width,
                    Math.random() * canvas.height,
                    Math.random() * 30 + 10,
                    0, 2 * Math.PI
                );
                ctx.fill();
            }
        }
        
        // Geolocation demo
        function getCurrentLocation() {
            const output = document.getElementById('locationResult');
            
            if (navigator.geolocation) {
                output.innerHTML = 'Konum alınıyor...';
                navigator.geolocation.getCurrentPosition(
                    position => {
                        output.innerHTML = `
                            <p>Koordinatlar: ${position.coords.latitude.toFixed(6)}, ${position.coords.longitude.toFixed(6)}</p>
                            <p>Doğruluk: ${position.coords.accuracy}m</p>
                        `;
                    },
                    error => {
                        output.innerHTML = 'Konum alınamadı: ' + error.message;
                    }
                );
            } else {
                output.innerHTML = 'Geolocation desteklenmiyor.';
            }
        }
        
        // Storage demo
        function saveToStorage() {
            const input = document.getElementById('storageInput');
            localStorage.setItem('demoData', input.value);
            document.getElementById('storageOutput').innerHTML = 'Veri kaydedildi!';
        }
        
        function loadFromStorage() {
            const data = localStorage.getItem('demoData') || 'Veri bulunamadı';
            document.getElementById('storageOutput').innerHTML = 'Yüklenen veri: ' + data;
        }
        
        // Web Component
        class ModernCard extends HTMLElement {
            connectedCallback() {
                const title = this.getAttribute('title') || 'Başlık';
                const description = this.getAttribute('description') || 'Açıklama';
                const image = this.getAttribute('image') || '';
                
                this.innerHTML = `
                    <div style="border: 1px solid #ddd; border-radius: 8px; padding: 1rem; max-width: 300px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                        ${image ? `<img src="${image}" alt="${title}" style="width: 100%; border-radius: 4px; margin-bottom: 1rem;">` : ''}
                        <h3 style="margin: 0 0 0.5rem 0; color: #2c3e50;">${title}</h3>
                        <p style="margin: 0; color: #7f8c8d;">${description}</p>
                    </div>
                `;
            }
        }
        
        customElements.define('modern-card', ModernCard);
        
        // PWA install prompt
        let deferredPrompt;
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            console.log('PWA install prompt available');
        });
        
        // Service Worker registration
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js')
                .then(reg => console.log('Service Worker registered'))
                .catch(err => console.log('Service Worker registration failed'));
        }
    </script>
</body>
</html>