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

HTML'i temelden ileri API'lere kadar öğrenin

Semantik yapı, gelişmiş formlar, çoklu ortam, Web Storage ve özel bileşenlerle modern HTML

Temel ve İleri Seviye HTML Eğitimi, HTML'i yapı taşlarından başlayarak modern tarayıcı yeteneklerine kadar kapsamlı biçimde öğretir. Program semantik HTML5 yapısı ve doküman anahattıyla başlar; gelişmiş giriş türleri ve yerleşik form doğrulaması işlenir.

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

Eğitim Hakkında

Temel etiketlerden semantik yapıya, gelişmiş form ve çoklu ortamdan Web API'lerine kapsamlı akış

Temel ve İleri Seviye HTML Eğitimi, HTML'i yapı taşlarından başlayarak modern tarayıcı yeteneklerine kadar kapsamlı biçimde öğretir. Katılımcılar semantik HTML5 yapısını, gelişmiş formları ve yerleşik doğrulamayı, audio, video ve responsive görselleri işler. Canvas ve SVG ile grafik, Web Storage, Geolocation ve Drag and Drop gibi Web API'leri uygulanır. Program özel elementlerle web bileşenleri, erişilebilirlik için ARIA ve yapılandırılmış veriyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; temel etiketlerden Web API'lerine kadar tek bir proje üzerinde kademeli olarak ilerlenir.

Seviye

İleri Seviye — Temel etiketlerden semantik HTML5, çoklu ortam, form doğrulama, Web API ve web bileşenlerine

Öğrenme Metodu

Her modülde yazılan HTML tarayıcıda çalıştırılır; temel yapı, gelişmiş formlar ve Web API'leri gerçek bir proje üzerinde uygulanır.

Neden Bu Eğitim?

🎯Temelden ileriye

Eğitim temel etiketlerden başlayıp Web API'lerine ilerleyerek hem eksiklerinizi tamamlar hem de ileri yetenekleri tek programda kazandırır.

⚡Tarayıcı gücü

Canvas, SVG, Web Storage ve Geolocation gibi API'lerle, ek kütüphaneye gerek kalmadan tarayıcının tüm gücünü kullanmayı öğrenirsiniz.

♿Erişilebilir arayüz

Semantik HTML5 ve ARIA ilkeleriyle arama motorları ve ekran okuyucular için erişilebilir, standartlara uygun arayüzler kurarsınız.

Anahtar Konular

html eğitimiileri html kursuhtml5 eğitimisemantik htmlhtml form doğrulamaweb api eğitimicanvas svg eğitimiweb bileşenleri eğitimiön yüz geliştirme eğitimihtml web storage
“Modern HTML yalnızca bir işaretleme dili değil, tarayıcının tüm gücüne açılan bir kapıdır; bu eğitim o kapıyı sonuna kadar açar.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak temel bilgi ve ortam

1
Temel HTML bilgisi

Etiket mantığı ve temel HTML yapısına aşinalık faydalıdır; konular baştan ele alınsa da hız ileri odaklıdır.

2
CSS aşinalığı

Temel CSS bilgisi, çoklu ortam ve responsive görsel konularını kavramayı kolaylaştırır; zorunlu değildir.

3
JavaScript temeli

Web API örneklerini anlamak için temel JavaScript bilgisi faydalıdır; kod örnekleri ayrıca açıklanır.

4
Editör ve tarayıcı

VS Code gibi bir editör ve güncel bir tarayıcı gereklidir; geliştirici araçları örneklerde kullanılı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ı HTML5 semantik etiketlerini doğru kullanır, içerik kategorilerini kavrar ve doküman anahattını erişilebilir biçimde kuran yapılar oluşturur.
Modül 1
Semantik Yapı Etiketleri
  • header, nav, main, footer ile sayfa iskeleti
  • article ve section arasındaki anlam farkı
  • aside ile ilişkili yan içeriğin işaretlenmesi
  • figure ve figcaption ile başlıklı medya
  • time, address ve details etiketlerinin kullanımı
  • Doğru etiketin SEO ve erişilebilirliğe katkısı
Modül 2
İçerik Modeli ve Anahat
  • Blok ve satır içi element ayrımının mantığı
  • Akış, başlık ve bölümleme içerik kategorileri
  • Başlık hiyerarşisiyle doküman anahattı kurma
  • İç içe bölümlemenin doğru yapılandırılması
  • Geçersiz element yerleşiminden kaçınma
  • Anlamlı yapı ile tarayıcı yorumunun hizalanması
Modül 3
Metin Semantiği ve Bağlantılar
  • abbr, cite ve dfn ile metin anlamlandırma
  • mark, ins ve del ile değişiklik işaretleme
  • data ve time ile makine okunur değerler
  • Bağlantı rel değerleri ve güvenlik ilişkileri
  • İndirme bağlantıları ve download özniteliği
  • Çapa bağlantılarıyla sayfa içi gezinme
Modül 4
Geçerlilik ve Standartlar
  • W3C doğrulayıcı ile geçerli HTML üretimi
  • Karakter kodlaması ve özel karakter varlıkları
  • Global öznitelikler ve data-* kullanımı
  • Tarayıcılar arası tutarlılık ilkeleri
  • Kullanımdan kalkan etiketlerden kaçınma
  • Temiz ve okunabilir kod düzeni ilkeleri
Günün hedefiKatılımcı HTML5 giriş türleri ve öznitelikleriyle zengin formlar kurar, yerleşik doğrulamayı yönetir ve erişilebilir, kullanıcı dostu form deneyimleri tasarlar.
Modül 1
HTML5 Giriş Türleri
  • email, url, tel ve search giriş türleri
  • number ve range ile sayısal girişler
  • date, time, month ve datetime seçicileri
  • color giriş türü ile renk seçici alanı
  • list ve datalist ile öneri listesi
  • Giriş türlerinin mobil klavyeye etkisi
Modül 2
Yerleşik Form Doğrulama
  • required ile zorunlu alan tanımı
  • pattern ile düzenli ifade doğrulaması
  • min, max ve step ile değer sınırları
  • minlength ve maxlength ile uzunluk kontrolü
  • Constraint Validation API ile özel mesaj
  • novalidate ile doğrulamayı devre dışı bırakma
Modül 3
Form Yapısı ve Gruplama
  • fieldset ve legend ile alan gruplama
  • label ile etiket eşleme ve tıklama alanı
  • autocomplete ile tarayıcı doldurma ipuçları
  • name ve form öznitelikleriyle veri yapısı
  • Dosya yükleme ve multiple ile çoklu seçim
  • Form gönderim yöntemleri ve enctype
Modül 4
Erişilebilir Form Deneyimi
  • Hata mesajlarının erişilebilir sunumu
  • aria-describedby ile açıklama bağlama
  • Klavye ile sorunsuz form gezinmesi
  • Zorunlu alanların görsel ve anlamsal işareti
  • Odak yönetimi ve mantıklı sekme sırası
  • Ekran okuyucu ile form testinin yapılması
Günün hedefiKatılımcı ses ve video gömmeyi, responsive görsel sunumunu, Canvas ile bitmap çizimi ve SVG ile vektörel grafiği uygulayarak zengin medya içerikleri üretir.
Modül 1
Ses ve Video Gömme
  • video etiketi ile çoklu kaynak ve biçim
  • audio etiketi ve denetim seçenekleri
  • track ile altyazı ve metin parçaları
  • poster, preload ve autoplay davranışları
  • Medya için erişilebilir alternatif içerik
  • Tarayıcı medya desteği ve geri dönüş
Modül 2
Responsive Görseller
  • srcset ile çözünürlüğe göre görsel seçimi
  • sizes özniteliğiyle görüntü alanı bilgisi
  • picture ve source ile sanat yönü değişimi
  • WebP ve AVIF gibi modern görsel biçimleri
  • loading lazy ile gecikmeli görsel yükleme
  • Görsel boyutu ve performans dengesi
Modül 3
Canvas ile Çizim
  • canvas elementi ve 2D bağlam alınması
  • Dikdörtgen, çizgi ve yol ile çizim
  • Metin, renk ve gradyan uygulama
  • Görsel çizimi ve piksel düzeyinde işleme
  • Animasyon için requestAnimationFrame döngüsü
  • Canvas ile grafik ve veri görselleştirme
Modül 4
SVG ile Vektörel Grafik
  • SVG satır içi gömme ve temel şekiller
  • path ile karmaşık vektör yolu çizimi
  • viewBox ile ölçeklenebilir koordinat sistemi
  • SVG elementlerinin CSS ile stillendirilmesi
  • SVG animasyonu ve etkileşim olayları
  • Canvas ile SVG arasında tercih kriterleri
Günün hedefiKatılımcı Web Storage ile veri saklar, Geolocation ve Drag and Drop API'lerini kullanır ve özel elementlerle yeniden kullanılabilir web bileşenleri geliştirir.
Modül 1
Web Storage ve İstemci Verisi
  • localStorage ile kalıcı anahtar-değer saklama
  • sessionStorage ile oturum bazlı veri
  • JSON ile nesne serileştirme ve okuma
  • Depolama olayları ve sekmeler arası senkron
  • Depolama sınırları ve gizlilik ilkeleri
  • Cookie ile Web Storage arasındaki fark
Modül 2
Konum ve Cihaz API'leri
  • Geolocation ile konum bilgisi alınması
  • Konum izni isteme ve reddin yönetimi
  • watchPosition ile konum değişimini izleme
  • Clipboard API ile kopyalama ve yapıştırma
  • Notification API ile tarayıcı bildirimi
  • API desteği kontrolü ve zarif geri dönüş
Modül 3
Sürükle Bırak ve Etkileşim
  • draggable özniteliği ile sürüklenebilir öğe
  • dragstart, dragover ve drop olayları
  • DataTransfer ile sürüklenen veri taşıma
  • Dosya sürükleyip bırakarak yükleme
  • Sürükle bırak için görsel geri bildirim
  • Erişilebilir alternatif etkileşim sunumu
Modül 4
Web Bileşenleri ve Özel Element
  • customElements ile özel element tanımı
  • Shadow DOM ile kapsüllenmiş stil ve yapı
  • template ve slot ile içerik yerleştirme
  • Yaşam döngüsü geri çağrıları ve öznitelikler
  • Yeniden kullanılabilir bileşen tasarımı
  • Bileşenlerin erişilebilirlik ile uyumu

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Semantik yapı

HTML5 semantik etiketleriyle doğru içerik modeli ve doküman anahattına sahip, SEO ve erişilebilirlik dostu sayfalar kurarsınız.

✅
Gelişmiş formlar

Yeni giriş türleri ve yerleşik doğrulamayla zengin, erişilebilir ve kullanıcı dostu form deneyimleri tasarlayabilirsiniz.

✅
Form doğrulama

required, pattern ve Constraint Validation API ile istemci tarafı doğrulamayı ve özel hata mesajlarını yönetebilirsiniz.

✅
Çoklu ortam

Audio ve video gömmeyi, responsive görsel sunumunu ve modern görsel biçimlerini performansı gözeterek uygulayabilirsiniz.

✅
Canvas ve SVG

Canvas ile bitmap çizim ve animasyon, SVG ile ölçeklenebilir vektör grafiği üreterek zengin görseller oluşturabilirsiniz.

✅
Web Storage

localStorage ve sessionStorage ile istemci tarafında veri saklar, JSON serileştirme ve depolama olaylarını yönetirsiniz.

✅
Web API'leri

Geolocation, Drag and Drop ve Clipboard gibi tarayıcı API'lerini kullanarak etkileşimli ve yetenekli arayüzler kurarsınız.

✅
Web bileşenleri

customElements, Shadow DOM ve template ile kapsüllenmiş, yeniden kullanılabilir özel web bileşenleri geliştirebilirsiniz.

Kimler İçin Uygundur?

  • HTML temelini pekiştirip ileri tarayıcı yeteneklerine geçmek isteyen ön yüz geliştiriciler
  • modern
  • erişilebilir arayüzler kurmak isteyen yazılımcılar ve HTML5 API'lerini öğrenmek isteyen teknik ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
HTML temelini pekiştirip ileri tarayıcı yeteneklerine geçmek isteyen ön yüz geliştiriciler, modern ve erişilebilir arayüzler kurmak isteyen yazılımcılar ve HTML5 API'lerini öğrenmek isteyen teknik ekipler için uygundur. Temel HTML ve JavaScript bilgisi faydalı olur.
Temel konuları bilmeden ileri seviyeye yetişebilir miyim?
Eğitim temel etiketleri de kapsar, ancak akış ileri odaklıdır. İlk gün semantik yapıyı temelden ele alır ve sonraki günler Web API'lerine ilerler. Temel HTML'e aşina olmak hız açısından faydalıdır; tamamen sıfır seviye için temel HTML eğitimi önerilir.
Web API'leri için JavaScript gerekli mi?
Web Storage, Geolocation ve Drag and Drop gibi API'ler JavaScript ile çağrılır. Eğitimde kod örnekleri ayrıntılı açıklanır ve temel JavaScript bilgisi faydalıdır. Odak HTML tarafındaki yapı ve öznitelikler olmakla birlikte API kullanımını anlamak için örnekler uygulanı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. Temel etiketlerden Web API'lerine kadar tek bir proje üzerinde kademeli ilerlenir. Yüz yüze veya online yapılabilir; içerik kurumun teknoloji yığınına ve ekibin seviyesine göre uyarlanabilir.
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 ve geliştirilen örnek projeyi belgeler; 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. Temel ve İ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 CSSBootstrap & Dashboards Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Bootstrap & Dashboards Eğitimi

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

Bootstrap 5 grid, kart ve bileşenleriyle duyarlı yönetim paneli kurma eğitimi. Chart.js grafikleri, koyu tema ve Sass ile uygulamalı dashboard.

Detayları Gör →
HTML ve CSSBootstrap Environment, Requirements, & Setup Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Bootstrap Environment, Requirements, & Setup Eğitimi

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

Bootstrap 5 geliştirme ortamı kurma eğitimi. CDN ve npm, Sass kaynağından derleme, PostCSS, Vite ve Webpack entegrasyonu uygulamalı anlatılır.

Detayları Gör →
HTML ve CSSBootstrap Forms & Layout Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Bootstrap Forms & Layout Eğitimi

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

Bootstrap 5 grid, flex yardımcıları ve form bileşenleriyle duyarlı düzen ve form kurma eğitimi. Input group, floating label ve doğrulama uygulamalı.

Detayları Gör →
HTML ve CSSBrowsers and HTML in Adobe Dreamweaver CC Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Browsers and HTML in Adobe Dreamweaver CC Eğitimi

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

Adobe Dreamweaver CC ile HTML yazımı ve tarayıcı önizlemesi eğitimi. Code ve Live view, Emmet, CSS Designer ve cihaz önizlemesi uygulamalı anlatılır.

Detayları Gör →
HTML ve CSSCreating Responsive Projects with Captivate Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Creating Responsive Projects with Captivate Eğitimi

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

Adobe Captivate ile duyarlı e-öğrenme projeleri eğitimi. Fluid Boxes, breakpoint görünümleri, HTML5 yayını ve SCORM ile LMS entegrasyonu uygulamalı.

Detayları Gör →
HTML ve CSSCSS Responsive Web Design Training Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Responsive Web Design Training Eğitimi

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

Saf CSS ile duyarlı web tasarımı eğitimi. Mobil öncelik, media query, Flexbox, CSS Grid, srcset, clamp ve container query uygulamalı anlatılır.

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