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 '24e4040c9e'
${ noResults }
Web-Dev-For-Beginners/translations/el/3-terrarium/1-intro-to-html/assignment.md

6.4 KiB
Raw Blame History Escape

Άσκηση Πρακτικής HTML: Δημιουργία Μακέτας Blog

Στόχος

Σχεδιάστε και γράψτε τον HTML κώδικα για τη δομή μιας αρχικής σελίδας προσωπικού blog. Αυτή η άσκηση θα σας βοηθήσει να εξασκηθείτε στη χρήση της σημασιολογικής HTML, στον σχεδιασμό διάταξης και στην οργάνωση του κώδικα.

Οδηγίες

  1. Σχεδιάστε τη Μακέτα του Blog σας

    • Δημιουργήστε ένα οπτικό σχέδιο της αρχικής σελίδας του blog σας. Συμπεριλάβετε βασικές ενότητες όπως κεφαλίδα, πλοήγηση, κύριο περιεχόμενο, πλαϊνή στήλη και υποσέλιδο.
    • Μπορείτε να χρησιμοποιήσετε χαρτί και να σκανάρετε το σχέδιό σας ή να χρησιμοποιήσετε ψηφιακά εργαλεία (π.χ., Figma, Adobe XD, Canva ή ακόμα και PowerPoint).

  2. Καθορίστε τα HTML Στοιχεία

    • Καταγράψτε τα HTML στοιχεία που σκοπεύετε να χρησιμοποιήσετε για κάθε ενότητα (π.χ., <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a> κ.λπ.).

  3. Γράψτε τον HTML Κώδικα

    • Γράψτε τον HTML κώδικα για τη μακέτα σας. Εστιάστε στη σημασιολογική δομή και στις βέλτιστες πρακτικές.
    • Συμπεριλάβετε τουλάχιστον 10 διαφορετικά HTML στοιχεία.
    • Προσθέστε σχόλια για να εξηγήσετε τις επιλογές και τη δομή σας.

  4. Υποβάλετε τη Δουλειά σας

    • Ανεβάστε το σχέδιο/μακέτα σας και το αρχείο HTML.
    • Προαιρετικά, γράψτε μια σύντομη ανάλυση (2–3 προτάσεις) για τις σχεδιαστικές σας αποφάσεις.

Κριτήρια Αξιολόγησης

Κριτήριο Εξαιρετικό Επαρκές Χρειάζεται Βελτίωση
Οπτική Μακέτα Καθαρή, λεπτομερής μακέτα με ονοματισμένες ενότητες και προσεγμένη διάταξη Βασική μακέτα με ορισμένες ονοματισμένες ενότητες Ελάχιστη ή ασαφής μακέτα· λείπουν οι ονομασίες των ενοτήτων
HTML Στοιχεία Χρήση 10+ σημασιολογικών HTML στοιχείων· δείχνει κατανόηση της δομής και των βέλτιστων πρακτικών Χρήση 5–9 HTML στοιχείων· κάποια σημασιολογική δομή Χρήση λιγότερων από 5 στοιχείων· έλλειψη σημασιολογικής δομής
Ποιότητα Κώδικα Καλά οργανωμένος, ευανάγνωστος κώδικας με σχόλια· ακολουθεί τα πρότυπα HTML Κυρίως οργανωμένος κώδικας· λίγα σχόλια Ανοργάνωτος κώδικας· έλλειψη σχολίων
Ανάλυση Εμπεριστατωμένη ανάλυση για τις σχεδιαστικές επιλογές και τις προκλήσεις Βασική ανάλυση Χωρίς ανάλυση ή έλλειψη συνάφειας

Συμβουλές

  • Χρησιμοποιήστε σημασιολογικές HTML ετικέτες για καλύτερη προσβασιμότητα και SEO.
  • Οργανώστε τον κώδικα σας με εσοχές και σχόλια.
  • Ανατρέξτε στο MDN HTML Elements Reference για καθοδήγηση.
  • Σκεφτείτε πώς η διάταξή σας θα μπορούσε να επεκταθεί ή να μορφοποιηθεί σε μελλοντικές ασκήσεις.

Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.