|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T09:48:52+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "el"
|
|
|
}
|
|
|
-->
|
|
|
# Άσκηση Πρακτικής 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) για καθοδήγηση.
|
|
|
- Σκεφτείτε πώς η διάταξή σας θα μπορούσε να επεκταθεί ή να μορφοποιηθεί σε μελλοντικές ασκήσεις.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Αποποίηση ευθύνης**:
|
|
|
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. |
