Φύλλο Εργασίας για Εισαγωγή στην HTML

Διάρκεια: 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.
Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο αρχείο σας:

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>

  <h2>Σύνδεσμος</h2>

  <p>Πηγαίνετε στην <a href="https://www.google.com">Google</a>.</p>

  <h2>Εικόνα</h2>

  <img src="https://via.placeholder.com/150" alt="Εικόνα παράδειγμα">

</body>

</html>

Αποθηκεύστε το αρχείο και ανοίξτε το στον περιηγητή σας (browser). Πρέπει να δείτε μια ιστοσελίδα με τίτλο, κείμενο, σύνδεσμο και εικόνα.

4. Ασκήσεις για Προχωρημένα (5 λεπτά)

Άσκηση 1: Προσθέστε έναν τίτλο επιπέδου 2 ( <h2>) και μία νέα παράγραφο στο κείμενο.
Άσκηση 2: Δημιουργήστε μια μη ταξινομημένη λίστα (<ul>) με 3 αγαπημένα σας φαγητά.
Άσκηση 3: Δοκιμάστε να αλλάξετε την εικόνα με μια από τον δικό σας υπολογιστή.