İLERİ SEVİYE HTML EĞİTİMİ

HTML'i uzmanlık seviyesine taşı

Semantik, erişilebilirlik, SEO, Canvas, SVG, Web Components ve PWA ile ileri HTML

İleri Seviye HTML Eğitimi, HTML'i temel etiket bilgisinin ötesine taşıyarak erişilebilir, performanslı ve yetenekli belgeler kurmayı öğretir.

4 gün İleri Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Etiketin ötesinde; erişilebilir, performanslı ve yetenekli HTML uygulamaları

İleri Seviye HTML Eğitimi, HTML'i temel etiket bilgisinin ötesine taşıyarak erişilebilir, performanslı ve yetenekli belgeler kurmayı öğretir. Katılımcılar gelişmiş semantik ve belge taslağını, ARIA ile erişilebilirliği, SEO ve yapılandırılmış veriyi öğrenir. Ardından ileri formlar, ses ve video, responsive görseller, Canvas ve SVG, Web Components ve Shadow DOM işlenir. Program Web Storage, Service Worker ile PWA, yükleme performansı ve güvenlik konularıyla tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; her konu gerçek kod örnekleriyle işlenir ve günün sonunda ileri bir HTML özelliği uygulamaya dönüştürülür.

Seviye

İleri Seviye — Semantik, erişilebilirlik, medya, grafik ve PWA ile HTML'i uçtan uca derinlemesine ele alan program

Öğrenme Metodu

Konular gerçek örnekler üzerinde işlenir; her gün bir ileri HTML yeteneği örnek bir sayfaya uygulanarak pekiştirilir.

Neden Bu Eğitim?

🎯Erişilebilir ve kaliteli

Semantik ve ARIA bilgisiyle ekran okuyuculara ve arama motorlarına uygun, kaliteli HTML yazma becerisi kazanırsınız.

🧩HTML'in gerçek gücü

Canvas, SVG, Web Components ve PWA ile HTML'in sanılandan çok daha yetenekli olduğunu uygulayarak keşfedersiniz.

🚀Performans ve güvenlik

Yükleme stratejileri ve güvenlik uygulamalarıyla hızlı ve güvenli sayfalar kurmayı öğrenirsiniz.

Anahtar Konular

ileri html eğitimisemantik html kursuweb erişilebilirlik eğitimiaria eğitimiweb components kursuhtml seo eğitimicanvas svg eğitimipwa eğitimihtml5 ileri kursön yüz geliştirme eğitimi
“HTML yalnızca içeriğin iskeleti değil; erişilebilirliğin, performansın ve kullanıcı deneyiminin de temelidir.”

Ön Koşullar

Eğitimden en iyi verimi almak için gereken ön bilgi

1
HTML ve CSS deneyimi

Temel ve orta düzey HTML etiketlerini ve CSS ile biçimlendirmeyi rahatça kullanabilmek gerekir.

2
Temel JavaScript

Web Components ve Service Worker konuları için temel JavaScript bilgisi faydalı olur.

3
Tarayıcı araçları

Geliştirici araçlarının inceleme, ağ ve erişilebilirlik sekmelerine aşinalık beklenir.

4
Web çalışma mantığı

İstek, yanıt ve kaynak yükleme gibi temel web kavramlarına aşinalık öğrenmeyi kolaylaştırır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı gelişmiş semantik yapı kurar, ARIA ile erişilebilirliği sağlar ve SEO için meta veri ile yapılandırılmış veriyi doğru uygular.
Modül 1
Gelişmiş Semantik ve Taslak
  • section, article, aside ve nav doğru kullanımı
  • Başlık hiyerarşisi ve belge taslağı mantığı
  • figure, time, mark ve details öğeleri
  • Landmark rolleriyle sayfa bölgelerinin ayrımı
  • Anlamsal etiketin arama ve erişime katkısı
  • div yerine uygun semantik etiket seçimi
Modül 2
ARIA ve Erişilebilirlik
  • role, aria-label ve aria-labelledby kullanımı
  • aria-live ile dinamik içeriğin duyurulması
  • Klavye ile gezinme ve odak yönetimi
  • tabindex ile odak sırasının kontrolü
  • Ekran okuyucuyla test ve WCAG ilkeleri
  • Erişilebilir ad ve açıklama hesaplaması
Modül 3
SEO ve Meta Veri
  • title ve meta description etkisi
  • Open Graph ile sosyal paylaşım önizlemesi
  • canonical ile yinelenen içerik yönetimi
  • robots ve viewport meta etiketleri
  • Anlamsal yapı ve başlıkların SEO'ya katkısı
  • sitemap ve bağlantı yapısının önemi
Modül 4
Yapılandırılmış Veri
  • Schema.org kavramı ve kullanım amacı
  • JSON-LD ile yapılandırılmış veri gömme
  • Microdata ile etiket içine veri işleme
  • Ürün, makale ve etkinlik şemaları
  • Zengin sonuç için gerekli alanlar
  • Yapılandırılmış veriyi doğrulama araçları
Günün hedefiKatılımcı ileri form doğrulama ve girdi tiplerini uygular, ses ve video öğelerini yönetir ve responsive görsel tekniklerini kullanır.
Modül 1
İleri Form ve Doğrulama
  • pattern ve required ile yerleşik doğrulama
  • Constraint Validation API ile özel mesaj
  • setCustomValidity ile hata metni yönetimi
  • autocomplete ve inputmode ile kullanıcı kolaylığı
  • fieldset ve legend ile grup erişilebilirliği
  • datalist ile öneri listesi sunma
Modül 2
Girdi Tipleri ve Erişim
  • date, time, color ve range girdi tipleri
  • email, url ve tel ile anlamlı girdiler
  • number girdisinde adım ve sınır ayarı
  • Mobil klavye davranışının inputmode ile yönetimi
  • Girdi etiketleme ve hata duyurusu erişimi
  • Form gönderiminde ilerleme ve geri bildirim
Modül 3
Ses ve Video Öğeleri
  • audio ve video öğeleriyle medya gömme
  • Birden fazla source ile biçim uyumu
  • track ile altyazı ve metin alternatifi
  • preload, poster ve denetim özellikleri
  • Media API ile oynatmanın koddan kontrolü
  • Otomatik oynatma kısıtları ve erişilebilirlik
Modül 4
Responsive Görsel
  • srcset ve sizes ile çözünürlük seçimi
  • picture ve source ile sanat yönlü kırpma
  • loading lazy ile gecikmeli görsel yükleme
  • WebP ve AVIF gibi modern biçimler
  • width ve height ile düzen kaymasını önleme
  • decoding ile tarayıcı çözümleme ipucu
Günün hedefiKatılımcı Canvas ile programatik çizim yapar, SVG ile vektör grafik kullanır ve Web Components ile kapsüllenmiş, yeniden kullanılabilir bileşenler yazar.
Modül 1
Canvas ile Grafik
  • 2d bağlamı ile çizim yüzeyinin kurulması
  • Yol, eğri ve şekillerin çizilmesi
  • Görsel ve metnin canvas'a yerleştirilmesi
  • Dönüşüm, ölçek ve döndürme işlemleri
  • requestAnimationFrame ile animasyon döngüsü
  • Piksel verisiyle çalışma ve dışa aktarma
Modül 2
SVG ve Vektör Grafik
  • SVG koordinat sistemi ve viewBox mantığı
  • rect, circle, path ve polygon öğeleri
  • Satır içi SVG'yi CSS ile biçimlendirme
  • SVG animasyonu ve etkileşim ekleme
  • Simge sistemi için symbol ve use
  • Canvas ile SVG arasında seçim ölçütleri
Modül 3
Web Components Temeli
  • customElements.define ile özel etiket
  • Yaşam döngüsü geri çağrılarının kullanımı
  • attributeChangedCallback ile öznitelik izleme
  • Bileşen içi olay yayma ve dinleme
  • Özellik ve öznitelik yansıtma deseni
  • Bileşeni projede yeniden kullanma
Modül 4
Shadow DOM ve Template
  • attachShadow ile gölge ağaç oluşturma
  • Shadow DOM ile stil kapsülleme
  • template etiketiyle yeniden kullanılır içerik
  • slot ile dışarıdan içerik yerleştirme
  • ::part ve ::slotted ile dış stillendirme
  • Kapsülleme ile stil çakışmasını önleme
Günün hedefiKatılımcı tarayıcı depolamasını ve çevrimdışı PWA kurulumunu öğrenir, yükleme performansını iyileştirir ve HTML tarafında güvenlik uygulamalarını benimser.
Modül 1
Web Storage ve Çevrimdışı
  • localStorage ve sessionStorage ayrımı
  • IndexedDB ile yapısal veri saklama
  • Cache Storage ile varlık önbellekleme
  • Çevrimdışı durum algılama ve geri dönüş
  • Depolama kotası ve temizleme stratejisi
  • Saklanan verinin güvenli kullanımı
Modül 2
Service Worker ve PWA
  • Service Worker kaydı ve yaşam döngüsü
  • fetch olayıyla ağ ve önbellek stratejisi
  • manifest.json ile yüklenebilir uygulama
  • Uygulama simgesi ve açılış ekranı ayarı
  • Çevrimdışı sayfa ve yedek yanıt sunma
  • Güncelleme akışı ve sürüm yönetimi
Modül 3
Yükleme Performansı
  • defer ve async ile script yükleme stratejisi
  • preload ve prefetch ile kaynak önceliği
  • Kritik CSS ve gecikmeli stil yükleme
  • Görsel optimizasyonu ve lazy loading
  • Düzen kaymasını azaltma teknikleri
  • Lighthouse ile performans ölçümü
Modül 4
Güvenlik ve En İyi Uygulamalar
  • XSS riskine karşı içerik kaçışı
  • Content Security Policy meta ile kısıt
  • rel noopener ile dış bağlantı güvenliği
  • iframe sandbox ve izin yönetimi
  • Form güvenliği ve girdi doğrulama
  • HTTPS ve güvenli kaynak yükleme

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Gelişmiş semantik

Doğru semantik etiket ve belge taslağıyla hem erişilebilir hem arama motoru dostu HTML belgeleri kurabilirsiniz.

✅
Erişilebilir arayüz

ARIA, odak yönetimi ve WCAG ilkeleriyle ekran okuyucu ve klavye kullanıcılarına uygun arayüzler geliştirebilirsiniz.

✅
SEO ve yapılandırılmış veri

Meta veri, Open Graph ve JSON-LD ile sayfaları arama motorlarına ve sosyal platformlara doğru biçimde tanıtabilirsiniz.

✅
İleri form becerisi

Constraint Validation API ve modern girdi tipleriyle güçlü, erişilebilir ve kullanıcı dostu formlar oluşturabilirsiniz.

✅
Medya ve responsive görsel

Ses, video ve srcset ile picture tekniklerini kullanarak erişilebilir ve performanslı medya sunabilirsiniz.

✅
Canvas ve SVG grafik

Canvas ile programatik çizim ve SVG ile vektör grafik kullanarak zengin görsel içerikler üretebilirsiniz.

✅
Web Components mimarisi

Shadow DOM ve template ile stili kapsüllenmiş, yeniden kullanılabilir özel bileşenler tasarlayabilirsiniz.

✅
PWA ve performans

Service Worker ile çevrimdışı PWA kurar, yükleme stratejileriyle hızlı ve güvenli sayfalar oluşturabilirsiniz.

Kimler İçin Uygundur?

  • HTML temelini bilen ve bu bilgiyi erişilebilirlik
  • grafik
  • bileşen
  • PWA gibi ileri konularla derinleştirmek isteyen ön yüz geliştiriciler ile kurumsal web ekiplerinde çalışan deneyimli geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Temel ve orta düzey HTML ile CSS bilen, bu bilgiyi erişilebilirlik, grafik, bileşen ve PWA gibi ileri konularla derinleştirmek isteyen ön yüz geliştiriciler ve kurumsal web ekipleri için uygundur.
İleri seviye derken ne beklemeliyim?
Etiket ezberi değil; belge taslağı, ARIA, yapılandırılmış veri, Canvas, SVG, Web Components ve PWA gibi HTML'in derin ve ileri yetenekleri gerçek örneklerle işlenir. Her gün bir ileri yetenek uygulamaya dönüşür.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Konular gerçek kod örnekleriyle işlenir ve günün sonunda uygulamaya dönüştürülür. Yüz yüze veya online yapılabilir ve kuruma göre uyarlanır.
JavaScript bilmem gerekir mi?
Web Components ve Service Worker gibi modüller için temel JavaScript bilgisi faydalıdır. Derin JavaScript uzmanlığı gerekmez; gereken kod örnekleri adım adım açıklanarak ilerlenir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri belgeler ve kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. İleri Seviye HTML Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
Seviyeİleri Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSExtending CSS with Less Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Extending CSS with Less Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Less değişkenleri, mixin, iç içe yazım, guard, fonksiyon ve derleme hattıyla ölçeklenebilir ve sürdürülebilir CSS yazmayı öğreten uygulamalı eğitim.

Detayları Gör →
HTML ve CSSExtending CSS with Sass Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Extending CSS with Sass Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Sass değişkeni, mixin, @extend, @if ve @each kontrol yapıları, map ve @use modül sistemiyle modüler CSS yazmayı öğreten uygulamalı eğitim.

Detayları Gör →
HTML ve CSSFront-end Apps: HTML Applications with JavaScript Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: HTML Applications with JavaScript Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

DOM, olaylar, form doğrulama, fetch ve modüllerle çerçeve kullanmadan etkileşimli web uygulamaları kurmayı öğreten uygulamalı JavaScript eğitimi.

Detayları Gör →
HTML ve CSSFSD Front-end Development: Advanced CSS Browser Features Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

FSD Front-end Development: Advanced CSS Browser Features Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

Cascade layers, :has, container query, subgrid, oklch ve scroll-driven animasyonlarla güncel CSS özelliklerini öğreten ileri seviye front-end eğitimi.

Detayları Gör →
HTML ve CSSFSD Front-end Development: Features of HTML & CSS Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

FSD Front-end Development: Features of HTML & CSS Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Semantik HTML, form ve medya, seçiciler, kutu modeli, renk ve tipografiyle HTML ve CSS özelliklerini derinlemesine öğreten ön yüz geliştirme eğitimi.

Detayları Gör →
HTML ve CSSGetting Started with CSS-based Animations Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Getting Started with CSS-based Animations Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

transition, transform, keyframe animasyonu ve performans teknikleriyle akıcı ve erişilebilir CSS tabanlı hareket tasarlamayı öğreten uygulamalı eğitim.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn