HTML EĞİTİMİ
"Her yere div koyarım, CSS'le şekillendiririm" yaklaşımı kısa vadede çalışır gibi görünür; uzun vadede erişilebilirlik testlerinden çakılan, ekran okuyucuya bir şey söylemeyen, SEO'da yarı görünür kalan sayfalar üretir. Semantik HTML bu sapmanın temel düzeltmesidir — markup yapı değil anlam ifade eder.
Semantik element kataloğu (header, nav, main, article, aside, section), form yapısı ve native validation, accessibility (ARIA, role, alt text), microdata ve structured data (Schema.org), açıklayıcı meta etiketler, e-posta için tablolu HTML, performance odaklı markup ele alınır. Resmi başvuru için MDN HTML Documentation birincil kaynaktır.
Katılımcı Profili
HTML ile web sayfası üreten profillere yöneliktir:
- Front-end Geliştiriciler: Semantik ve erişilebilir markup yazar
- Bootcamp Öğrencileri ve Junior Developer'lar: Web temellerini sağlamlaştırır
- WordPress ve CMS Editörleri: Custom HTML düzenleme ve template müdahalesi yapar
- E-posta Tasarımcıları: HTML email markup ve template üretir
- Dijital Pazarlamacılar: Landing page HTML temellerini öğrenir
Ön Gereklilikler
Bu eğitime katılmak için temel bilgisayar kullanımı yeterlidir; aşağıdaki konular akışı daha rahat hale getirir:
- Tarayıcı ve dosya-klasör yönetiminde rahatlık
- VS Code benzeri bir editör kurabilmek
- Web sayfası kavramına dair genel farkındalık
- İçerik girişi ve metin düzenleme deneyimi
- Teknik doküman okuma alışkanlığı
Süresi ve Tarihi
Süre: 2 gün. Bu süre standart program içindir; ek modüllere ve hedefe göre süre özelleştirilebilir.
Eğitim tarihleri ve saatleri, katılımcı grubunun uygunluğuna göre birlikte planlanır.
Kazanımlar
Eğitim sonunda HTML; etiket bilgisi değil, erişilebilirlik ve SEO'ya hizmet eden bir yapı diline dönüşür:
- Semantik HTML ile anlamlı doküman yapısı kurar
- Başlık hiyerarşisi ve içerik iskeleti oluşturur
- Form bileşenlerini doğru alan tipleriyle tasarlar
- Medya öğelerini performans odaklı kullanır
- Erişilebilirlik için temel ARIA yaklaşımını uygular
- SEO uyumlu işaretleme ve meta stratejisi belirler
- Doğrulama ve hata yakalama için kontrol listesi oluşturur
- Takım içinde ortak kodlama standardı geliştirir
HTML Eğitimi Konuları
1. HTML5 Doküman Yapısı ve DOCTYPE
- <!DOCTYPE html> bildirimi ve quirks mode
- <html lang>, <head>, <body> iskeleti
- Karakter kodlaması: UTF-8 ve charset
- Viewport meta etiketi ve responsive temeli
- Title etiketinin SEO ve tarayıcı sekmesi etkisi
2. Semantik Etiketler ve Sayfa Bölümleri
- header, nav, main, section, article, aside, footer
- div ve span ile semantik elementlerin farkı
- figure ve figcaption ile görsel + açıklama
- time, mark, address gibi mikro etiketler
- Landmark roles ve screen reader uyumu
3. Başlık Hiyerarşisi (H1-H6) ve Metin Etiketleri
- H1 tekliği ve H2-H6 hiyerarşik akış
- p, br, hr ile metin bölümlendirme
- strong, em, b, i farkları
- blockquote, q, cite ile alıntı
- code, pre, kbd ile teknik metin
4. Listeler: ul, ol, dl
- Unordered list (ul) ve ordered list (ol)
- Nested liste yapısı
- Description list (dl, dt, dd)
- list-style ve type attribute
- start ve reversed attribute kullanımı
5. Bağlantılar, URL Yapısı ve target Davranışları
- Absolute, relative ve protocol-relative URL'ler
- target="_blank" ve rel="noopener noreferrer"
- Anchor link ile sayfa içi geçiş (#id)
- mailto, tel, sms protokolleri
- download attribute ile dosya indirme
6. Görseller, picture ve Responsive Image
- img etiketi: src, alt, width, height
- srcset ve sizes ile responsive image
- picture element ve art direction
- loading="lazy" ile lazy loading
- WebP, AVIF modern format kullanımı
7. Tablolar ve Yapısal Veri
- table, thead, tbody, tfoot yapısı
- th, td ve scope attribute
- colspan ve rowspan ile birleştirme
- caption ile tablo başlığı
- Erişilebilir tablo: id ve headers eşleştirmesi
8. HTML5 Formları ve Input Types
- form, label, fieldset, legend yapısı
- Input types: text, email, tel, url, number, date, color
- required, pattern, min, max ile validation
- select, textarea, datalist kullanımı
- FormData ile JavaScript entegrasyonu
- autocomplete ve enterkeyhint UX detayları
9. Meta Etiketler, Open Graph, Schema.org
- meta description, keywords (deprecated)
- Open Graph: og:title, og:image, og:description
- Twitter Card meta etiketleri
- Schema.org JSON-LD ile structured data
- Canonical, robots, hreflang etiketleri
10. Erişilebilirlik: ARIA, alt, label, focus
- alt attribute ve dekoratif görsel ayrımı
- label-input ilişkisi ve for attribute
- ARIA role, aria-label, aria-describedby
- tabindex ve focus order
- WCAG 2.1 AA temel kriterleri
HTML Eğitimi ile İlgili
Sıkça Sorulan Sorular ve Cevapları
Semantik HTML kullanımı pratikte hangi farkı yaratır?
Semantik etiketler, sayfanın anlamını tarayıcıya ve yardımcı teknolojilere doğru iletir. Bu sayede erişilebilirlik artar, içerik daha anlaşılır olur ve bakım süreci daha tutarlı ilerler.
Formlarda doğru input type seçimi neden önemlidir?
Doğru alan tipleri, tarayıcı yerleşik doğrulamalarını etkinleştirir ve mobil klavye deneyimini iyileştirir. Böylece kullanıcı hataları azalır ve form tamamlama oranı yükselir.
Başlık hiyerarşisi SEO ve okunabilirliği nasıl etkiler?
Doğru hiyerarşi, içeriğin bölümlerini netleştirir ve sayfayı tarayan sistemlere yapıyı anlatır. Bu yaklaşım hem kullanıcı gezinmesini hem de arama görünürlüğünü destekler.
HTML doğrulama süreci ekip kalitesine nasıl katkı sağlar?
Doğrulama, hatalı işaretlemeyi erken yakalayıp üretim ortamına taşınmasını engeller. Standartlara uyum arttıkça tarayıcı davranışı öngörülebilir olur ve hata ayıklama süresi kısalır.
Eğitim içeriğini ihtiyaçlarımıza göre özelleştirebilir misiniz?
Evet. Eğitim öncesinde ihtiyaç analizi yaparak içerik ve örnekleri kurumun hedeflerine göre uyarlıyoruz. Modüller eklenebilir, bazı başlıklar derinleştirilebilir veya sadeleştirilebilir.
Eğitim yeri, yöntemi ve sertifikasyon süreci nasıl ilerliyor?
Eğitim online (canlı) veya yerinde gerçekleştirilebilir; tarih ve saatleri katılımcı grubunun uygunluğuna göre planlıyoruz. Program sonunda katılım sertifikası verilir; talep edilirse ölçme-değerlendirme ve raporlama eklenebilir.
