Μέρος 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: Δημιουργία μιας απλής ιστοσελίδας

  1. Άνοιξε το Notepad++ (ή άλλο επεξεργαστή κειμένου).
  2. Αντιγράψτε τον παρακάτω κώδικα και αποθηκεύστε τον ως index.html.

<!DOCTYPE html>

<html>

<head>

    <title>Η σελίδα μου</title>

</head>

<body>

    <h1>Γεια σας! Είμαι ο/η (όνομα μαθητή)</h1>

    <p>Αυτή είναι η προσωπική μου ιστοσελίδα.</p>

</body>

</html>

  1. Ανοίξτε το αρχείο με τον browser και δείτε το αποτέλεσμα.

Άσκηση 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;
✔️ Έχετε προσθέσει εικόνα, σύνδεσμο και λίστα;
✔️ Έχετε αλλάξει χρώματα;

Μπράβο! Δημιουργήσατε την πρώτη σας ιστοσελίδα! 🎉