Εισαγωγή στην HTML και τη CSS

Απαιτήσεις άσκησης

• Τρεις σελίδες: index.html, contact.html, whoweare.html
  Σημείωση: Αν θέλετε, μπορείτε να χρησιμοποιήσετε διαφορετικά ονόματα στα html αρχεία.
• Κάθε σελίδα θα έχει μενού, με τις σελίδες του ιστοτόπου να αποτελούν links.
• Σε κάθε σελίδα θα υπάρχει η ετικέτα TITLE με το όνομα της σελίδας.
• H home.html και η whoweare.html θα έχουν:
  • h1 τον τίτλο της σελίδας,
  • Δύο h2
  • Δύο παραγράφους κειμένου κάτω από κάθε h2, άρα 4 παραγράφους στη σελίδα
  • Μέσα στο κείμενο της σελίδας πρέπει να υπάρχουν τουλάχιστον 2 σύνδεσμοι/links, με target="_blank"
  • Μία εικόνα κάτω από κάθε h2, άρα 2 εικόνες
  • Ένα βίντεο του youtube στις δύο από τις τρεις σελίδες
• Η σελίδα contact.html θα έχει:
  • Δνση
  • Τηλέφωνο
  • Χάρτη
• Σε κάθε σελίδα θα υπάρχει:
  • header με
    • Τον τίτλο της σελίδας με h1
    • Μικρή εικόνα ως λογότυπο αριστερά ή δεξιά
    • μενού με χρήση της ετικέτας nav, το οποίο θα έχει τα links για τις 3 ιστοσελίδες του ιστοτόπου
  • footer
  • περιοχή section στην οποία θα ανήκει το υπόλοιπο μέρος κάθε ιστοσελίδας, δηλαδή όλα τα στοιχεία ανάμεσα από το header και το footer
  Επιπλέον η μορφοποίηση της εμφάνισης θα γίνει με ένα εξωτερικό style.css αρχείο, το οποίο θα μορφοποιεί:
  • header
  • nav
  • section
  • footer
  • h1
  • h2
  • τις εικόνες
  χρησιμοποιώντας τους css selectors:
  • background-color
  • color
  • text-align
  • float
  • font-family
  • a:hover
  • text-decoration

1η ΕΒΔΟΜΑΔΑ

• Να δημιουργηθεί λογαριασμός και ιστοσελίδα (space) στο w3schools
• Να εξηγηθεί η δομή ιστοσελίδας στην index.html που δημιουργήθηκε αυτόματα:
  • !DOCTYPE html
  • html lang="en"
  • head
  • meta charset="UTF-8" [Να δειχθεί τι θα γίνει εάν αφαιρέσω τη γραμμή και έχω Ελληνικές λέξεις ]
  • title
  [Να επιδειχθεί πως αλλάζει το όνομα της καρτέλλας στον browser]
  • body
  • h1
  • h2
  • p
• Να δημιουργηθεί η σελίδα index.html με χρήση:
• Ένα h1
• δύο h2
• κάτω από κάθε h2 μία ή δύο παράγραφοι

2η ΕΒΔΟΜΑΔΑ

• Να γίνει συζήτηση για τα πνευματικά δικαιώματα (κυρίως εικόνων και κειμένων από το διαδίκτυο).
• Επίδειξη πως κατεβάζουμε μία εικόνα (κατά προτίμηση .jpg η .png μικρότερη από 2Mb) στον φάκελο του υπολογιστή μας

   Επιφάνεια Εργασίας > Ασκήσεις > HTML 

• Επίδειξη πως ανεβάζουμε μια εικόνα στο spaces
• Χρήση της ετικέτας img με παραμέτρους src, alt, width.
  Για περισσότερα επισκεφθήτε την ιστοσελίδα https://www.w3schools.com/ και στο tutorial για την HTML βρείτε περισσότερα για την σύνταξη της ετικέτας img στον σύνδεσμο αριστερά με όνομα HTML images
• Να εισάγετε μια εικόνα σχετική με το θέμα της ιστοσελίδας σας σε κάθε παράγραφο της index.html