Διάρκεια: 45 λεπτά
Στόχος: Να εξοικειωθούν οι μαθητές με τις βασικές έννοιες και τις πρώτες ετικέτες της HTML (HyperText Markup Language), ώστε να μπορέσουν να δημιουργήσουν μια απλή ιστοσελίδα.
1. Εισαγωγή στην HTML (10 λεπτά)
- HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιούμε για να δημιουργήσουμε ιστοσελίδες.
- Η HTML χρησιμοποιεί ετικέτες (tags) για να οργανώσει το περιεχόμενο της σελίδας.
- Οι ετικέτες είναι πάντα τοποθετημένες σε αγκύλες και έρχονται συνήθως σε ζεύγη:
<tag> περιεχόμενο </tag>
.
2. Βασικές Ετικέτες HTML (10 λεπτά)
- <!DOCTYPE html>: Δηλώνει ότι το έγγραφο είναι HTML5.
- <html>: Η ετικέτα που ορίζει την αρχή και το τέλος της ιστοσελίδας.
- <head>: Περιέχει μεταδεδομένα (όπως τίτλο σελίδας).
- <title>: Ο τίτλος της σελίδας, εμφανίζεται στην καρτέλα του προγράμματος περιήγησης.
- <body>: Περιέχει το περιεχόμενο που εμφανίζεται στην ιστοσελίδα.
- <h1>, <h2>, <h3>...<h6>: Ετικέτες για τίτλους (μεγαλύτερος ο τίτλος του <h1> και μικρότερος του <h6>).
- <p>: Ετικέτα για παραγράφους.
- <a>: Ετικέτα για συνδέσμους (hyperlinks).
- <img>: Ετικέτα για εικόνες.
- <ul>, <ol>, <li>: Ετικέτες για λίστες (μη ταξινομημένες και ταξινομημένες).
3. Δημιουργία Απλής Ιστοσελίδας (15 λεπτά)
- Σκοπός: Να δημιουργήσετε μια απλή ιστοσελίδα με τίτλο, μια παράγραφο, και μια εικόνα.
Οδηγίες:
- Ανοίξτε έναν επεξεργαστή κειμένου (όπως το Notepad ή το Visual Studio Code).
- Δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το με κατάληξη
.html
.
- Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο αρχείο σας:
- Αποθηκεύστε το αρχείο και ανοίξτε το στον περιηγητή σας (browser). Πρέπει να δείτε μια ιστοσελίδα με τίτλο, κείμενο, σύνδεσμο και εικόνα.
4. Ασκήσεις για Προχωρημένα (5 λεπτά)
- Άσκηση 1: Προσθέστε έναν τίτλο επιπέδου 2 (
<h2>
) και μία νέα παράγραφο στο κείμενο.
- Άσκηση 2: Δημιουργήστε μια μη ταξινομημένη λίστα (
<ul>
) με 3 αγαπημένα σας φαγητά.
- Άσκηση 3: Δοκιμάστε να αλλάξετε την εικόνα με μια από τον δικό σας υπολογιστή.