İçeriğe geç
Codary
İnteraktif Web Tasarım Müfredatı

HTML5 ile Web Geliştirmeye Giriş

Web sitelerinin temeli olan HTML5'i sıfırdan öğrenin: sayfa iskeleti, metinler, bağlantılar, görseller, listeler, formlar ve tüm girdi tipleri, tablolar ve semantik yapı. Her ders canlı önizlemeli editörde uygulamalı.

Başlangıç - Orta 5 modül 28 ders 28 quiz 4 proje Tarayıcıda çalışır

HTML5 Kurs Müfredatı

Zorluk dağılımı: Kolay · 12 Orta · 12 Zor · 4
Başlamadan önce oku HTML5 nedir, bu kurs nasıl işler?

HTML (HyperText Markup Language), web sayfalarının iskeletini kuran işaretleme dilidir. Bir web sayfasında gördüğün her başlık, paragraf, resim, buton ve form HTML ile tanımlanır. Tarayıcı (Chrome, Firefox, Edge) HTML kodunu okur ve onu ekranda gördüğün sayfaya dönüştürür.

HTML bir programlama dili mi?

Hayır. HTML'de değişken, döngü veya hesaplama yoktur. HTML sadece "bu bir başlık", "bu bir resim", "bu bir liste" diye içeriği etiketler. Görünümü CSS, davranışı JavaScript belirler. Bu üçlüyü bir eve benzetebilirsin: HTML duvarlar ve odalar, CSS boya ve mobilya, JavaScript ise elektrik ve su tesisatıdır.

Bu kurs kimin için?

Hiç kod yazmamış biri için hazırlandı. İlk derste tek bir başlık yazarak başlıyoruz ve son modülde tam bir CV sayfası, kayıt formu ve blog iskeleti kuruyoruz. Her yeni etiketi kullanmadan önce ne işe yaradığını anlatıyoruz.

Bir ders nasıl işler?

  • Anlatım: Önce etiketin ne işe yaradığını ve nerede kullanıldığını öğrenirsin.
  • Örnek kod: Ardından küçük bir örneği satır satır inceleriz. Örnek kodlar kopyalanamaz; kendi elinle yazmak etiketleri ezberlemenin en hızlı yoludur.
  • Görev: Sağdaki editöre görevi kendin yazarsın, Çalıştır dediğinde sonucu hemen altta önizleme olarak görürsün.
  • İpucu: Takılırsan İpucu al butonu ipuçlarını tek tek açar. Tüm ipuçlarını açıp en az 3 kez denedikten sonra istersen örnek çözümü görebilirsin.
  • Zorluk: Her dersin yanında Kolay, Orta veya Zor etiketi vardır.

Kodun nasıl kontrol edilir?

Editör, kodunda görevin istediği etiketlerin ve metinlerin olup olmadığını kontrol eder. Bu yüzden görevdeki metinleri (büyük-küçük harf ve Türkçe karakterler dahil) aynen yazmaya dikkat et.

Kendi bilgisayarında denemek için bir metin düzenleyicide (VS Code önerilir) index.html adında bir dosya oluştur, kodunu yaz, kaydet ve dosyaya çift tıklayarak tarayıcıda aç.
1 Modül 1 · 0/6 ders Modül 1: HTML5 Sıfırdan Giriş ve Metin Yapısı HTML nedir, DOCTYPE, html, head, body yapısı, başlıklar ve biçimlendirmeler

1.1 HTML5 Nedir ve Temel İskelet Yapısı

1.2 Meta Etiketleri ve Karakter Seti (UTF-8)

1.3 Başlık Etiketleri (H1 - H6) ve Paragraflar

1.4 Metin Vurgulama ve Biçimlendirme Etiketleri

1.5 Satır Sonu (<br>) ve Ayırıcı Çizgi (<hr>)

1.6 Hatayı Bul: Kapanmayan Etiketler

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
2 Modül 2 · 0/5 ders Modül 2: Bağlantılar, Görseller ve Medya Linkler (a), görseller (img), listeler, audio, video ve iframe

2.1 Bağlantılar (Links) ve Anchor Etiketi

2.2 Görsel Etiketi (Image - <img>)

2.3 Sıralı ve Sırasız Listeler (UL, OL, LI)

2.4 Medya Etiketleri: Audio ve Video

2.5 Sayfa İçi Gömülü İçerikler (Iframe)

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
3 Modül 3 · 0/8 ders Modül 3: Formlar ve Derinlemesine Girdi Çeşitleri (Masterclass) Form etiketleri, tüm input tipleri, date, color, range, select, datalist ve fieldset

3.1 Form Yapısı (<form>) ve Label Kullanımı

3.2 Metin Girdileri: Text, Password, Email, Tel

3.3 Sayısal ve Zaman Girdileri (Number, Date, Time)

3.4 Seçim Kutuları: Radio, Checkbox ve Color

3.5 Slider (Range), Dosya (File) ve Hidden Girdileri

3.6 Açılır Menüler (<select>) ve Datalist

3.7 Form Gruplama (Fieldset) ve Form Nitelikleri

3.8 Hatayı Bul: Çalışmayan Kayıt Formu

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
4 Modül 4 · 0/5 ders Modül 4: Tablolar ve Semantik HTML5 Yapısı Table yapısı, colspan/rowspan, header, nav, main, article, details/summary

4.1 Tablo Temelleri (Table, TR, TH, TD)

4.2 Gelişmiş Tablo Hücre Birleştirme (Colspan & Rowspan)

4.3 Tablo Bölümleri (Thead, Tbody, Tfoot)

4.4 Semantik HTML5 Yapısı (Header, Nav, Main, Footer)

4.5 İnteraktif HTML5 Etiketleri (Details & Summary)

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
5 Modül 5 · 0/4 ders Modül 5: Uygulamalı HTML5 Web Projeleri Gelişmiş CV sayfası, Kapsamlı Kayıt Formu, Ürün Tablosu ve Blog İskeleti

5.1 Proje 1: Gelişmiş Özgeçmiş (CV) Web Sayfası

PROJE

5.2 Proje 2: Çok Adımlı Kapsamlı Kayıt Formu

PROJE

5.3 Proje 3: Ürün Kataloğu ve Fiyat Tablosu

PROJE

5.4 Proje 4: Komple Semantik HTML5 Blog İskeleti

PROJE
Modül tekrarı 4 soru · Modül sonunda çözmeni öneririz