Proje: Dashboard widget
5 derslik projenin genel bakışı: şablonlu bir widget iskeleti.
Proje: Dashboard widget
Bu 5 derslik projede bir satış paneli widget'ı yapacaksın. Her derste widget'a bir parça ekleyecek, son derste tam bir panel elinde olacak.
Projede şunları kullanacaksın:
- Anlamsal etiketler:
section,header,main,article - Veri yapıları:
table,figure,figcaption - Yeniden kullanılabilir parça:
template,slot - Yedek ve kancalar:
noscript,data-*öznitelikleri
Hazırsan başlayalım.
Widget nedir?
Widget, tek başına duran küçük bir veri panelidir. Bir satış paneli widget'ı tek bakışta aylık ciroyu, üst ürünleri ve canlı durumu gösterir.
HTML'de widget'ı bir <section> ile sarıp içine <header>, <main> ve <article> koyarız. Böylece ekran okuyucu paneli tek bir bölge olarak duyurur.
Veriyi tablo ve figure ile yapılandırırız; okuyucu hem rakamları hem görseli kolayca algılar.
Uygulama Boş belge iskeletiyle başla
Projeye başlarken boş bir HTML belge iskeleti yaz. İçinde DOCTYPE, <html>, <head>, boş <body> bulunsun. lang, meta ve başlıkları sonraki derslerde ekleyeceğiz.
Örnek çözümü göster
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Kendini test et
-
Bir widget hangi özellikleri taşımalı?
- Kendi kendine yeten, tek bakışta okunan küçük bir panel
- Tüm sayfayı kaplayan tek bir büyük görsel
- Yalnızca JavaScript kodu içeren betik bloğu
- Başka sayfalara bağlantı veren menü
Cevabı göster
Kendi kendine yeten, tek bakışta okunan küçük bir panel — Doğru! Widget tek bakışta okunan, kendi kendine yeten küçük bir paneldir.
-
Widget kabının başlığını tamamla
<section> <header> <h1>____</h1> </header> </section>Cevabı göster
<section> <header> <h1>Satış Paneli</h1> </header> </section> -
Kavramları anlamlarıyla eşleştir
- widget
- Kendi kendine yeten veri paneli
- section
- İçerik bölümü
- article
- Bağımsız içerik birimi
- header
- Bölüm başlığı grubu
- template
- Yeniden kullanılabilir iskelet