Τίτλος: Δημιουργία Θεματικού Ιστοτόπου
Στόχος: Χρησιμοποιώντας τις γνώσεις σας από το παράδειγμα με τους πλανήτες, να δημιουργήσετε τον δικό σας ιστότοπο με θέμα της επιλογής σας.
1. Τεχνικές Προϋποθέσεις
Α. Θεματολογία
-
Επιλέξτε μια θεματολογία (π.χ., αγαπημένες ταινίες, μουσικά συγκροτήματα, αθλητικές ομάδες, πόλεις, φαγητά, ζώα, τεχνολογία).
Β. Δομή HTML (Υποχρεωτικά)
-
Κεντρικό Μενού Πλοήγησης (
<nav>) : Να εμφανίζεται σε όλες τις σελίδες και να επιτρέπει την πλοήγηση. -
Σημασιολογική Δομή: Όλες οι σελίδες να περιλαμβάνουν
<header>,<main>,<footer>. -
Εικόνες: Κάθε σελίδα να περιέχει τουλάχιστον μία εικόνα (
<img>). -
Ποικιλία Περιεχομένου: Συνολικά στον ιστότοπο, να χρησιμοποιήσετε τουλάχιστον δύο από τα παρακάτω:
-
Λίστες (
<ul>ή<ol>) -
Εξωτερικούς συνδέσμους (που ανοίγουν σε νέα καρτέλα με
target="_blank")
-
Γ. CSS (Υποχρεωτικά)
-
Εξωτερικό CSS: Όλο το στυλ σε ένα κοινό αρχείο
style.css. -
Βασικό Στυλ: Μπορείτε να χρησιμοποιήσετε ως βάση το CSS που δόθηκε στο μάθημα και να το τροποποιήσετε (χρώματα, γραμματοσειρές, περιθώρια) ώστε να ταιριάζει στη θεματολογία σας.
2. Βαθμολογία (κλίμακα 0-20)
| Κατηγορία | Κριτήρια | Μόρια |
|---|---|---|
| Δομή & HTML (8 μόρια) | Σωστή χρήση <nav>, <header>, <main>, <footer> σε όλες τις σελίδες. |
2 |
| Λειτουργικό μενού πλοήγησης και τουλάχιστον 6 σελίδες (αρχική + 5). | 3 | |
Εικόνα (<img>) σε κάθε σελίδα. |
2 | |
| Χρήση τουλάχιστον 2 επιπλέον στοιχείων (λίστες, εξωτερικοί σύνδεσμοι). | 1 | |
| CSS (6 μόρια) | Ύπαρξη ενός εξωτερικού style.css που συνδέεται με όλες τις σελίδες. |
1 |
| Τροποποίηση του βασικού στυλ (χρώματα, γραμματοσειρές) ώστε να ταιριάζει στη θεματολογία. | 2 | |
Το μενού πλοήγησης έχει στυλ και λειτουργεί σωστά το :hover. |
2 | |
| Ο κώδικας CSS είναι τακτοποιημένος και ευανάγνωστος. | 1 | |
| Περιεχόμενο (4 μόρια) | Το περιεχόμενο είναι συνεκτικό και σχετικό με τη θεματολογία. | 2 |
| Ο ιστότοπος είναι πρωτότυπος (δεν είναι αντιγραφή του παραδείγματος με τους πλανήτες). | 2 | |
| Λειτουργικότητα & Οργάνωση (2 μόρια) | Όλοι οι σύνδεσμοι λειτουργούν σωστά (κανένα broken link). | 1 |
Σωστή οργάνωση αρχείων (π.χ., εικόνες σε φάκελο images, αρχεία .html στον ριζικό φάκελο). |
1 | |
| Σύνολο | 20 |
3. Bonus (Προαιρετικά – για όσους θέλουν πρόκληση)
Μπορείτε να κερδίσετε έως +2 επιπλέον μόρια (χωρίς να ξεπεράσετε το 20):
-
+1 μόριο: Ενσωμάτωση βίντεο από YouTube (
<iframe>) σε κάποια σελίδα. -
+1 μόριο: Χρήση του
<a href="#top">ή ενός κουμπιού “Επιστροφή στην κορυφή” στο footer.
4. Οδηγίες για την Οργάνωση Αρχείων
Δημιουργήστε ένα φάκελο με το όνομά σας και μέσα του:
ονομα_σας/
│
├── index.html
├── page1.html
├── page2.html
├── page3.html
├── page4.html
├── page5.html
├── style.css
└── images/
├── photo1.jpg
├── photo2.png
└── ...
Σημαντικό: Ονομάστε τα αρχεία .html και .css με πεζούς λατινικούς χαρακτήρες, χωρίς κενά (π.χ., movies.html, food.html).
5. Συμβουλές
-
Ξεκινήστε με την αρχική σελίδα (
index.html) και φτιάξτε πρώτα τη δομή (header, nav, main, footer). -
Αντιγράψτε αυτή τη δομή στις υπόλοιπες σελίδες και μετά αλλάξτε το περιεχόμενο.
-
Για το μενού: Αντιγράψτε το
<nav>σε όλες τις σελίδες και βεβαιωθείτε ότι οι σύνδεσμοι οδηγούν στις σωστές σελίδες. -
Δοκιμάστε όλους τους συνδέσμους πριν παραδώσετε.
-
Για το CSS, μπορείτε να αλλάξετε:
-
Τα χρώματα (
background-color,color) -
Τη γραμματοσειρά (
font-family) -
Τα περιθώρια (
margin,padding) αν θέλετε διαφορετική εμφάνιση
-
6. Παραδείγματα Θεματολογίας (για έμπνευση)
| Θεματολογία | Ιδέες για σελίδες |
|---|---|
| Μουσικά Συγκροτήματα | Αρχική, Μέλη, Δισκογραφία, Συναυλίες, Αγαπημένα Τραγούδια, Βιογραφία |
| Αθλητικές Ομάδες | Αρχική, Ιστορία, Παίκτες, Τίτλοι, Γήπεδο, Επόμενοι Αγώνες |
| Πόλεις | Αρχική, Αξιοθέατα, Φαγητό, Ιστορία, Μεταφορές, Φωτογραφίες |
| Ταινίες/Σειρές | Αρχική, Ηθοποιοί, Πλοκή, Κριτικές, Soundtrack, Σκηνές |
| Ζώα | Αρχική, Είδη, Ενδιαιτήματα, Διατροφή, Κίνδυνοι, Ενδιαφέροντα Γεγονότα |
