Τίτλος: Δημιουργία Θεματικού Ιστοτόπου

Στόχος: Χρησιμοποιώντας τις γνώσεις σας από το παράδειγμα με τους πλανήτες, να δημιουργήσετε τον δικό σας ιστότοπο με θέμα της επιλογής σας.

1. Τεχνικές Προϋποθέσεις

Α. Θεματολογία

• Επιλέξτε μια θεματολογία (π.χ., αγαπημένες ταινίες, μουσικά συγκροτήματα, αθλητικές ομάδες, πόλεις, φαγητά, ζώα, τεχνολογία).

Β. Δομή HTML (Υποχρεωτικά)

• Κεντρικό Μενού Πλοήγησης (<nav>) : Να εμφανίζεται σε όλες τις σελίδες και να επιτρέπει την πλοήγηση.

• Σημασιολογική Δομή: Όλες οι σελίδες να περιλαμβάνουν <header>, <main>, <footer>.

• Εικόνες: Κάθε σελίδα να περιέχει τουλάχιστον μία εικόνα (<img>).

• Ποικιλία Περιεχομένου: Συνολικά στον ιστότοπο, να χρησιμοποιήσετε τουλάχιστον δύο από τα παρακάτω:

  • Λίστες (<ul> ή <ol>)

  • Εξωτερικούς συνδέσμους (που ανοίγουν σε νέα καρτέλα με target="_blank")

Γ. CSS (Υποχρεωτικά)

• Εξωτερικό CSS: Όλο το στυλ σε ένα κοινό αρχείο style.css.

• Βασικό Στυλ: Μπορείτε να χρησιμοποιήσετε ως βάση το CSS που δόθηκε στο μάθημα και να το τροποποιήσετε (χρώματα, γραμματοσειρές, περιθώρια) ώστε να ταιριάζει στη θεματολογία σας.

2. Βαθμολογία (κλίμακα 0-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. Συμβουλές

1. Ξεκινήστε με την αρχική σελίδα (index.html) και φτιάξτε πρώτα τη δομή (header, nav, main, footer).

2. Αντιγράψτε αυτή τη δομή στις υπόλοιπες σελίδες και μετά αλλάξτε το περιεχόμενο.

3. Για το μενού: Αντιγράψτε το <nav> σε όλες τις σελίδες και βεβαιωθείτε ότι οι σύνδεσμοι οδηγούν στις σωστές σελίδες.

4. Δοκιμάστε όλους τους συνδέσμους πριν παραδώσετε.

5. Για το CSS, μπορείτε να αλλάξετε:

   • Τα χρώματα (background-color, color)

   • Τη γραμματοσειρά (font-family)

   • Τα περιθώρια (margin, padding) αν θέλετε διαφορετική εμφάνιση

6. Παραδείγματα Θεματολογίας (για έμπνευση)