Μέρος 1: Θεωρία (10 λεπτά)
Βασική Δομή μιας HTML Σελίδας
Κάθε ιστοσελίδα σε HTML αποτελείται από ετικέτες (tags). Η ελάχιστη δομή μιας σελίδας HTML είναι η εξής:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Η πρώτη μου ιστοσελίδα</title>
</head>
<body>
<h1>Καλώς ήρθατε!</h1>
<p>Αυτή είναι η πρώτη μου ιστοσελίδα σε HTML.</p>
</body>
</html>
Βασικές Ετικέτες
Μέρος 2: Πρακτική Άσκηση (35 λεπτά)
Άσκηση 1: Δημιουργία μιας απλής ιστοσελίδας
<!DOCTYPE html>
<html>
<head>
<title>Η σελίδα μου</title>
</head>
<body>
<h1>Γεια σας! Είμαι ο/η (όνομα μαθητή)</h1>
<p>Αυτή είναι η προσωπική μου ιστοσελίδα.</p>
</body>
</html>
Άσκηση 2: Προσθέτοντας Περιεχόμενο
Προσθέστε τα παρακάτω στοιχεία στη σελίδα σας:
✔️ Μια εικόνα
✔️ Έναν σύνδεσμο προς μια άλλη σελίδα
✔️ Μια λίστα αγαπημένων σας πραγμάτων
Παράδειγμα κώδικα:
<img src="image.jpg" alt="Περιγραφή εικόνας" width="300">
<a href="https://www.example.com">Δες αυτή τη σελίδα!</a>
<ul>
<li>Αγαπημένο χρώμα: Μπλε</li>
<li>Αγαπημένο φαγητό: Πίτσα</li>
<li>Αγαπημένη δραστηριότητα: Ποδόσφαιρο</li>
</ul>
Άσκηση 3: Εμπλουτισμός με Χρώματα και Στυλ
Δοκιμάστε να αλλάξετε το χρώμα του φόντου και του κειμένου χρησιμοποιώντας την ετικέτα <style> στο <head>.
html
CopyEdit
<style>
body { background-color: lightblue; }
h1 { color: darkblue; }
</style>
Αξιολόγηση
✔️ Η σελίδα ανοίγει σωστά στον browser;
✔️ Έχετε προσθέσει εικόνα, σύνδεσμο και λίστα;
✔️ Έχετε αλλάξει χρώματα;
Μπράβο! Δημιουργήσατε την πρώτη σας ιστοσελίδα! 🎉