HTML’de medya ve grafik: duyarlı görsel, SVG, canvas
Doğru görsel biçimini ve boyutunu seçer, video ve altyazı ekler, SVG ve canvas ile çizim yaparak medya ağırlıklı sayfaları hızlı ve erişilebilir tutarsın.
Seviye 301 · 16 ders · 15 pratik lab
Dersler
Görseller
- Görsel biçimleri: JPEG, PNG, WebP, AVIF, SVG
- srcset ve sizes ile duyarlı görsel
- picture öğesi ve sanat yönetimi
- Tembel yükleme ve boyut belirtmek
- İyi alt metin yazmak
- Kısa görev: hızlı yüklenen bir galeri
Ses ve video
- video öğesi: kaynaklar, kapak görseli ve denetimler
- track ile altyazı ve sesli betimleme
- iframe ile gömme ve güvenli öznitelikler
- Kısa görev: altyazılı ve erişilebilir video
Çizim
- SVG temelleri: şekiller, yollar, viewBox
- SVG’yi CSS ile biçimlendirmek ve simge seti
- Erişilebilir SVG: title ve role
- canvas 2D: şekil ve metin çizmek
- canvas ile basit animasyon
- Bitirme görevi: medya ağırlıklı bir tanıtım sayfası
Pratik lablar
- Görsele boyut bildir: Sayfa yüklenirken kayan galeride görsellere width ve height ekleyip kaymanın bittiğini göster.
- srcset ve sizes ile doğru görseli sun: Ürün görselinin dört boyutunu üret ve telefonda küçük, geniş ekranda büyük dosyanın indiğini ağ panelinde kanıtla.
- picture ile sanat yönetimi yap: Kahraman görselini telefonda kırpılmış dikey, masaüstünde geniş sürümle ve AVIF/WebP yedekleriyle sun.
- Doğru görsel biçimini seç: Logo, fotoğraf ve ekran görüntüsünü uygun biçimlere dönüştür ve dosya boyutlarını karşılaştır.
- Alt metinleri yeniden yaz: Haber sayfasındaki on görselin alt metnini işlevine göre yaz; süs görsellerini boş alt ile işaretle.
- Hızlı yüklenen galeri yap: Kırk fotoğraflık galeride tembel yükleme, boyut bildirimi ve uygun biçimlerle ilk yükü yarıya indir.
- Videoya kapak ve kontroller ekle: Eğitim videosunu poster, controls ve iki kaynak biçimiyle yerleştir.
- Altyazı dosyası yaz ve bağla: Bir dakikalık tanıtım için WebVTT altyazı yaz ve track ile Türkçe ve İngilizce olarak bağla.
- Gömülü oynatıcıyı güvenli yap: Dış kaynaklı video iframe'ine sandbox, allow ve referrerpolicy ayarlarını yaparak gereksiz izinleri kaldır.
- Basit bir SVG simge çiz: Ev simgesini path ve viewBox kullanarak elle çiz ve farklı boyutlarda keskin kaldığını göster.
- Simge setini CSS ile renklendir: SVG simgelerini currentColor ile temaya uyumlu yap ve sprite olarak tek dosyadan kullan.
- Bilgi grafiğini erişilebilir yap: Satış grafiği SVG'sine title, desc ve uygun rol ekle, ekran okuyucuyla anlamlı okunduğunu doğrula.
- Canvas'a şekil ve yazı çiz: Bir rozet tasarımını canvas 2D ile daire, çizgi ve metin kullanarak çiz.
- Canvas ile çubuk grafik çiz: JSON'dan okunan aylık satışları ölçekli eksenleri olan bir çubuk grafiğe dönüştür.
- Akıcı canvas animasyonu yap: requestAnimationFrame ile seken top animasyonu yaz, yüksek DPI ekranda bulanıklığı gider ve hareketi azalt tercihine uy.
Kurs hakkında
Doğru görsel biçimini ve boyutunu seçer, video ve altyazı ekler, SVG ve canvas ile çizim yaparak medya ağırlıklı sayfaları hızlı ve erişilebilir tutarsın.
Ne öğreneceksin
- Görseller
- Ses ve video
- Çizim
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
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 301 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılı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.