msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2195fcd07e'
${ noResults }
Web-Dev-For-Beginners/translations/it/3-terrarium/1-intro-to-html/assignment.md

4.1 KiB
Raw Blame History Escape

Compito di Pratica HTML: Crea un Mockup di Blog

Obiettivo

Progettare e scrivere manualmente la struttura HTML per la homepage di un blog personale. Questo esercizio ti aiuterà a praticare l'HTML semantico, la pianificazione del layout e l'organizzazione del codice.

Istruzioni

  1. Progetta il Mockup del Blog

    • Disegna un mockup visivo della homepage del tuo blog. Includi sezioni chiave come intestazione, navigazione, contenuto principale, barra laterale e piè di pagina.
    • Puoi utilizzare carta e scannerizzare il tuo disegno, oppure strumenti digitali (ad esempio, Figma, Adobe XD, Canva o anche PowerPoint).

  2. Identifica gli Elementi HTML

    • Elenca gli elementi HTML che intendi utilizzare per ogni sezione (ad esempio, <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a>, ecc.).

  3. Scrivi il Markup HTML

    • Scrivi manualmente il codice HTML per il tuo mockup. Concentrati sulla struttura semantica e sulle migliori pratiche.
    • Includi almeno 10 elementi HTML distinti.
    • Aggiungi commenti per spiegare le tue scelte e la struttura.

  4. Invia il Tuo Lavoro

    • Carica il tuo disegno/mockup e il file HTML.
    • Facoltativamente, fornisci una breve riflessione (2–3 frasi) sulle tue decisioni di design.

Griglia di Valutazione

Criteri Esemplare Adeguato Da Migliorare
Mockup Visivo Mockup chiaro e dettagliato con sezioni etichettate e layout ben pensato Mockup di base con alcune sezioni etichettate Mockup minimo o poco chiaro; mancano etichette delle sezioni
Elementi HTML Utilizza 10+ elementi HTML semantici; dimostra comprensione della struttura e delle migliori pratiche Utilizza 5–9 elementi HTML; struttura semantica parziale Utilizza meno di 5 elementi; manca struttura semantica
Qualità del Codice Codice ben organizzato, leggibile con commenti; segue gli standard HTML Codice per lo più organizzato; pochi commenti Codice disorganizzato; mancano commenti
Riflessione Riflessione approfondita sulle scelte di design e sulle sfide Riflessione di base Nessuna riflessione o irrilevante

Consigli

  • Usa tag HTML semantici per una migliore accessibilità e SEO.
  • Organizza il tuo codice con indentazione e commenti.
  • Consulta MDN HTML Elements Reference per orientarti.
  • Pensa a come il tuo layout potrebbe essere esteso o stilizzato in futuri compiti.

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.