HTML temelleri
Etiketler, sayfa yapısı, formlar ve erişilebilirlik.
Seviye 101 · 19 ders · 15 pratik lab
Dersler
Belgenin iskeleti
- Belge yapısı: DOCTYPE, head, body: Bir HTML belgesinin DOCTYPE, head ve body bölümlerinin ne işe yaradığını anlar, boş bir sayfa iskeleti kurarsın.
- head üst verileri: meta, viewport, Open Graph: Sayfanın başlığını, mobil ölçeğini ve paylaşım önizlemesini meta etiketleriyle ayarlarsın.
- Karakter kodlaması ve HTML varlıkları: Türkçe karakterlerin bozulmasını önler, < ve & gibi özel işaretleri varlıklarla güvenle yazarsın.
- Başlıklar, paragraflar ve biçim: Sayfaya başlık, paragraf ve vurgulu metin ekleyip içeriğin düzenli görünmesini sağlarsın.
- Listeler: Sıralı ve sırasız listeleri HTML ile yazmayı ve ne zaman hangisini kullanacağını öğrenirsin.
- Bağlantılar ve görseller: Sayfalar arasında bağlantı kurmayı ve görsel eklemeyi, görsele açıklama yazmanın önemini öğrenirsin.
- Ses, video ve figure ile medya eklemek: audio, video ve figure etiketleriyle altyazılı, erişilebilir medya eklersin.
- Kısa görev: kendini tanıtan bir sayfa yaz
Tablolar ve formlar
- Tablolar: Veriyi satır ve sütunlu bir tabloda doğru etiketlerle göstermeyi öğrenirsin.
- Formlar: input, label, textarea: Kullanıcıdan bilgi toplayan form alanlarını ve onlara bağlı etiketleri yazmayı öğrenirsin.
- Form denetimleri: select, checkbox, radio, fieldset: Seçim listesi, onay kutusu ve radyo düğmesi kullanıp ilgili alanları fieldset ile gruplarsın.
- Tarayıcıda form doğrulama öznitelikleri: required, pattern ve type gibi özniteliklerle hatalı girdiyi tarayıcıda yakalar, bunun sunucu denetiminin yerini tutmadığını bilirsin.
- Parola alanları ve autocomplete: Parola alanlarını parola yöneticileriyle uyumlu kurar, autocomplete özniteliğini güvenli ve kullanışlı biçimde ayarlarsın.
- Kısa görev: etkinlik kayıt formu
Anlam, erişilebilirlik ve güvenlik
- Anlamsal etiketler ve erişilebilirlik: Anlamı belli etiketlerle sayfayı düzenlemeyi ve ekran okuyucu kullananlar için erişilebilir yapmayı öğrenirsin.
- ARIA ve klavye erişimi: Yalnızca klavyeyle gezilen bir sayfayı sınar, ARIA rollerini gerektiği kadar ve doğru kullanırsın.
- HTML'de güvenlik: bağlantılar, iframe, form hedefi: Dış bağlantıların, iframe'lerin ve form hedeflerinin hangi riskleri taşıdığını ve bunları nasıl güvenli yazacağını öğrenirsin.
- Sayfayı doğrulayıcıyla denetlemek
- Bitirme görevi: kişisel sayfa: Öğrendiğin etiketleri bir araya getirip kurgusal bir kişi için başlık, liste, bağlantı ve form içeren küçük bir sayfa hazırlarsın.
Pratik lablar
- Eksik iskeleti tamamla: DOCTYPE, lang, charset ve viewport'u eksik olan sayfayı doğru iskeletle tamamla.
- Bozuk Türkçe karakterleri düzelt: Menü sayfasında ğ, ş ve ı harfleri bozuk görünüyor; kodlamayı ve gerekli varlıkları düzelt.
- Paylaşım kartını hazırla: Fındık Atölye'nin etkinlik sayfasına Open Graph etiketlerini ekle ve önizleme aracında doğru göründüğünü kanıtla.
- Düz metni başlık ve listeye çevir: Tek paragraf hâlindeki tarifi başlık, malzeme listesi ve numaralı adımlara dönüştür.
- Bozuk bağlantıları ve görselleri onar: Sayfadaki göreli yolların yarısı çalışmıyor; klasör yapısına bakıp hepsini düzelt ve alt metin ekle.
- İç içe menüyü listeyle kur: Üç seviyeli ürün kategorilerini iç içe listeler ve sayfa içi bağlantılarla erişilebilir biçimde kur.
- Ders programını tabloya dök: Haftalık ders programını başlık hücreleri ve açıklamasıyla doğru bir tabloya çevir.
- Birleşik hücreli tabloyu düzelt: colspan ve rowspan hataları yüzünden kayan fiyat tablosunu onar.
- Videoyu yedek kaynaklarla göm: Tanıtım videosunu iki biçimde, kapak görseli ve figcaption ile göm; desteklemeyen tarayıcıya indirme bağlantısı sun.
- Etiketsiz alanlara etiket ekle: İletişim formundaki her alanı label ile bağla ve tıklayınca alanın odaklandığını doğrula.
- Etkinlik kayıt formu yap: Ad, e-posta, oturum seçimi ve onay kutusu olan, yerleşik doğrulamalı bir kayıt formu yaz.
- Şifre alanlarını doğru yapılandır: Kayıt ve giriş formlarında autocomplete değerlerini, minlength'i ve şifre yöneticisi uyumunu düzelt.
- Sayfayı doğrulayıcıdan geçir: Doğrulayıcının bulduğu hataları tek tek düzelt ve sıfır hatayla bitir.
- div yığınını anlamlı etiketlere çevir: Kişisel sayfadaki div'leri header, nav, main ve footer ile değiştir ve klavyeyle gezinmeyi test et.
- Bağlantı ve iframe güvenliğini sağla: Yeni sekmede açılan dış bağlantılara rel değerlerini ekle ve gömülü haritaya sandbox uygula.
Kurs hakkında
Etiketler, sayfa yapısı, formlar ve erişilebilirlik.
Ne öğreneceksin
- Belgenin iskeleti
- Tablolar ve formlar
- Anlam, erişilebilirlik ve güvenlik
Ön koşullar
Ön bilgi gerekmez; kurs sıfırdan başlar.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs başlangıç düzeyindedir; her terim ilk geçtiği yerde açıklanır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.