📌 Διάρκεια: 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>