📌 Διάρκεια: 2 διδακτικές ώρες

🎯 Στόχος: Ο μαθητής θα δημιουργήσει την πρώτη του ιστοσελίδα χρησιμοποιώντας HTML.

 

1η Διδακτική Ώρα: Εισαγωγή στην HTML και Βασική Δομή Ιστοσελίδας

📌 Βήμα 1: Δημιουργία αρχείου HTML

Δημιούργησε έναν φάκελο στην επιφάνεια εργασίας με όνομα το όνομα σας

Άνοιξε το πρόγραμμα Notepad++, Visual Studio Code ή το Σημειωματάριο.

 

Δημιούργησε ένα νέο αρχείο και αποθήκευσέ το ως index.html μέσα στο φάκελο που δημιούργησες (Βεβαιώσου ότι η επέκταση είναι .html).

 

📌 Βήμα 2: Γράφουμε την βασική δομή HTML

Αντιγράψτε τον παρακάτω κώδικα στο αρχείο index.html:

 

<!DOCTYPE html>

<html lang="el">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Η πρώτη μου ιστοσελίδα</title>

</head>

<body>

    <h1>Καλώς ήρθατε στην πρώτη μου ιστοσελίδα!</h1>

    <p>Αυτή είναι η πρώτη μου προσπάθεια δημιουργίας μιας ιστοσελίδας με HTML.</p>

</body>

</html>

📌 Βήμα 3: Άνοιγμα της ιστοσελίδας στον φυλλομετρητή

Άνοιξε τον φάκελο που αποθήκευσες το αρχείο.

 

Κάνε διπλό κλικ στο index.html και θα ανοίξει στον προεπιλεγμένο σου browser.

 

👉 Συζήτηση: Τι παρατηρείτε στην εμφάνιση της ιστοσελίδας;

 

2η Διδακτική Ώρα: Προσθήκη Στοιχείων Μορφοποίησης και Εικόνων

📌 Βήμα 4: Προσθήκη επικεφαλίδων και παραγράφων

Τροποποίησε το <body> για να προσθέσεις περισσότερες επικεφαλίδες και παραγράφους:

 

<body>

    <h1>Καλώς ήρθατε στην πρώτη μου ιστοσελίδα!</h1>

    <h2>Λίγα λόγια για μένα</h2>

    <p>Είμαι μαθητής/μαθήτρια και μαθαίνω HTML.</p>

    <h2>Τα αγαπημένα μου χόμπι</h2>

    <ul>

        <li>Διάβασμα</li>

        <li>Προγραμματισμός</li>

        <li>Μουσική</li>

    </ul>

</body>

📌 Βήμα 5: Προσθήκη εικόνας

Βρες μια εικόνα (π.χ. photo.jpg) και αποθήκευσέ τη στον ίδιο φάκελο με το index.html. Στη συνέχεια, προσθέστε την εικόνα στον κώδικα:

 

<img src="photo.jpg" alt="Μια περιγραφή της εικόνας" width="300">

📌 Βήμα 6: Προσθήκη υπερσυνδέσμου

Προσθέστε έναν σύνδεσμο που οδηγεί σε μια εξωτερική σελίδα:

 

<p>Μπορείτε να επισκεφθείτε το <a href="https://www.w3schools.com/html/" target="_blank">W3Schools</a> για περισσότερη εκμάθηση HTML.</p>