Μάθημα : ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ

Κωδικός : 0501007560

ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ

0501007560  -  ΒΑΣΙΛΕΙΟΣ ΠΡΟΞΕΝΙΑΣ

Ενότητες - Project δημιουργίας Ιστοσελίδας μουσικής μπάντας

Project δημιουργίας Ιστοσελίδας μουσικής μπάντας

από 29/4/25 
Τι είναι η CSS

Στο micro project καλείστε να κατασκευάσετε μια απλή ιστοσελίδα προώθησης της μπάντας του σχολείου σας στην οποία συμμετέχετε.

Θα δημιουργήσετε μια απλή και εντυπωσιακή ιστοσελίδα που θα παρουσιάζει τη μουσική μπάντα σας στο κοινό!
Θα χρησιμοποιήσετε HTML και CSS για να δομήσετε και να διακοσμήσετε την ιστοσελίδα σας. 

Ποιές ενότητες πρέπει να περιλαμβάνει η ιστοσελίδα σας:

  1. Ενότητα: Τίτλος και Κεφαλίδα (Header):

    • Εμφανίστε το όνομα της μπάντας σας και προσθέστε διακοσμητικά emojis (π.χ. 🎸, 🎶). (πρόταση: χρησιμοποιείστε ετικέτα <h1>)

  2. Ενότητα: "Ποιοι είμαστε;": (πρόταση: χρησιμοποιείστε ετικέτα <h2>)

    • Μια παράγραφος που παρουσιάζει ποιοι είστε, τι είδη μουσικής παίζετε και ποιοι είναι οι στόχοι σας. (πρόταση: χρησιμοποιείστε ετικέτα <p>)

  3. Ενότητα: "Μέλη της Μπάντας": (πρόταση: χρησιμοποιείστε ετικέτα <h2>)

    • Λίστα με τα μέλη της μπάντας και το ρόλο τους (π.χ. φωνητικά, κιθάρα κλπ.), μαζί με κατάλληλα emojis. (πρόταση: χρησιμοποιείστε ετικέτα <ul> και στοιχεία <li>)

  4. Ενότητα: "Πρόγραμμα Συναυλιών": (πρόταση: χρησιμοποιείστε ετικέτα <h2>)

  5. Ενότητα: "Η μπάντα μας" (Gallery): (πρόταση: χρησιμοποιείστε ετικέτα <img>)

    • Εμφάνιση μιας εικόνας της μπάντας (π.χ. αρχείο images/band.jpg).

  6. Ενότητα: "Άκουσε τη μουσική μας!": (πρόταση: χρησιμοποιείστε ετικέτα <a href="...">)

    • Αναπαραγωγέας ήχου (audio player) με ένα δείγμα τραγουδιού (π.χ. αρχείο music/song.mp3).

  7. Ενότητα: "Δες μας ζωντανά!": (πρόταση: χρησιμοποιείστε ετικέτα <a href="...">)

    • Ενσωματωμένο βίντεο από το YouTube (χρησιμοποιώντας τον κώδικα img class="MyIframe" που σας παρέχει το youtube).

  8. Ενότητα: Υποσέλιδο (Footer):

    • Μικρό κείμενο π.χ. "© 2025 The Music Masters - Powered by HTML & CSS"

 

Οδηγίες:

  • Δημιουργήστε ένα φάκελο για την εργασία σας. (π.χ MySchoolBand-TheMusicMastersBand )

  • Φτιάξτε το αρχείο index.html. Θυμηθείτε ποιος είναι ο "σκελετός" μιας σελίδας html. Προσθέστε ως πρώτη γραμμή την:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • Χρησιμοποιήστε τις γνωστές ετικέτες tags όπως:
    Δομή σελίδας: <html>, <head>, <body>, <title>.
    Μορφοποίηση: <div>, <span>, <p>, <h1>, <h2>, <h3>.
    Λίστες: <ul>, <li>.
    Πίνακες: <table>, <tr>, <td>, <th>.
    Σύνδεσμοι και Πολυμέσα: <a>, <img>.
  • Τοποθετήστε την κάθε ενότητα μέσα σε container. Αυτό γίνεται με τις ετικέτες <div>....</div>  
  • Για τα αρχεία μουσικής και video χρησιμοποιηστε υπερσυνδεσμους δηλ. ετικέτες <a href="..">

  • Δημιουργήστε το αρχείο styles.css για να διακοσμήσετε την ιστοσελίδα σας.

  • Χρησιμοποιήστε έναν (υπο)φάκελο images για τις εικόνες και έναν (υπο)φάκελο music για το/τα τραγούδι/α σας.

  • Όλα τα κείμενα, εικόνες και μουσικά δείγματα πρέπει να είναι νόμιμα ή δικές σας δημιουργίες.

Δείτε παρακάτω μια πιθανή αναπαράσταση της ιστοσελίδας

Πολυμέσα
siteband-html4
Πολυμέσα
siteband-html5