11.1 Εισαγωγή στην HTML
Αναρτήθηκε σεΕφαρμογές Πληροφορικής Μαθήματα

11.1 Εισαγωγή στην HTML

Παρουσίαση, Quiz, Εργαστηριακή Δραστηριότητα

Η Παρουσίαση για το 11.1 (2 διδακτικές ώρες)

Quiz Κατανόησης

Διαδραστική Quiz Παρουσίαση

Δραστηριότητα: “Σαφάρι στον Παγκόσμιο Ιστό” 🦁

Στόχος: Οι μαθητές να δημιουργήσουν ένα απλό αρχείο HTML χρησιμοποιώντας το Σημειωματάριο (Notepad), να εισάγουν βασικές ετικέτες (h1, p, img, title) και να δουν το αποτέλεσμα στον φυλλομετρητή.

Βήμα 1: Προετοιμασία Εργαλείων

Ανοίξτε το πρόγραμμα Σημειωματάριο (Notepad) στον υπολογιστή σας.

  • Πώς: Πατήστε το πλήκτρο Windows, γράψτε “Σημειωματάριο” ή “Notepad” και κάντε κλικ στο εικονίδιο.

Βήμα 2: Ο “Σκελετός” της σελίδας

Κάθε ιστοσελίδα έχει μια συγκεκριμένη δομή, σαν το σώμα του ανθρώπου (Κεφάλι και Σώμα).

Αντιγράψτε και επικολλήστε τον παρακάτω βασικό κώδικα στο Σημειωματάριο:

<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
    </body>
</html>

Βήμα 3: Ορίζοντας τον Τίτλο (Title)

Ο τίτλος αυτός δεν φαίνεται μέσα στη σελίδα, αλλά στην καρτέλα του φυλλομετρητή ψηλά.

Πηγαίνετε ανάμεσα στις ετικέτες <head> και </head> και γράψτε τον κώδικα:

<title>Τα ζώα της Αφρικής</title>

Βήμα 4: Προσθήκη Επικεφαλίδας (H1)

Τώρα θα μπούμε στο κυρίως μέρος, το <body>. Θέλουμε έναν μεγάλο τίτλο για το άρθρο μας.

Πηγαίνετε ανάμεσα στις ετικέτες <body> και </body> και γράψτε:

<h1>Ο Βασιλιάς της Σαβάνας</h1>

Βήμα 5: Προσθήκη Εικόνας (Image)

Η ετικέτα της εικόνας <img> είναι ιδιαίτερη γιατί δεν χρειάζεται ετικέτα κλεισίματος. Χρειάζεται όμως την πηγή (src), δηλαδή τη διεύθυνση της φωτογραφίας.

Ακριβώς κάτω από το <h1>, προσθέστε τον παρακάτω κώδικα (χρησιμοποιούμε μια εικόνα από το διαδίκτυο για ευκολία):

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/640px-Lion_waiting_in_Namibia.jpg" alt="Λιοντάρι στη Σαβάνα" width="400">

Βήμα 6: Προσθήκη Κειμένου (Paragraph)

Τέλος, ας γράψουμε λίγα λόγια για την εικόνα μας.

Ακριβώς κάτω από την εικόνα <img>, προσθέστε την παράγραφο:

<p>Το λιοντάρι είναι ένα από τα μεγαλύτερα αιλουροειδή και ζει κυρίως στην Αφρική. Είναι γνωστό για την εντυπωσιακή χαίτη του αρσενικού και θεωρείται σύμβολο δύναμης.</p>

Βήμα 7: Η Μεγάλη Σύνθεση

Ο τελικός σας κώδικας στο Σημειωματάριο πρέπει να μοιάζει ακριβώς έτσι:

Βήμα 8: Αποθήκευση (Το πιο κρίσιμο σημείο!)

Για να μετατρέψουμε το απλό κείμενο σε ιστοσελίδα:

Πατήστε Αποθήκευση.

Στο Σημειωματάριο, πατήστε Αρχείο (File) > Αποθήκευση ως (Save As).

Στο πεδίο “Αποθήκευση ως τύπου” (Save as type), επιλέξτε Όλα τα αρχεία (All files).

Στο όνομα αρχείου, γράψτε: africa.html (μην ξεχάσετε την κατάληξη .html!).

Στο πεδίο “Κωδικοποίηση” (Encoding), επιλέξτε UTF-8.

Βήμα 9: Έλεγχος

Πηγαίνετε στον φάκελο που αποθηκεύσατε το αρχείο. Θα πρέπει να έχει το εικονίδιο του φυλλομετρητή σας (π.χ. Chrome, Edge, Firefox). Κάντε διπλό κλικ.

Τι βλέπετε;

  • Ο τίτλος στην καρτέλα γράφει “Τα ζώα της Αφρικής”;
  • Υπάρχει η εικόνα του λιονταριού;
  • Διαβάζετε τα ελληνικά σωστά;

Αν ναι, συγχαρητήρια! Μόλις φτιάξατε την πρώτη σας ιστοσελίδα

Βήμα 10 – Επέκταση

A. Προστέστε το τέλος έναν ιστοσύνδεσμο (link) που να οδηγεί στη σελίδα https://wikipedia.org όταν κάποιος πατήσει στο κείμενο ΠΕΡΙΣΣΟΤΕΡΑ στη Wikipedia

B. Προσθέστε όπως το Λιοντάρι σας ακόμα ένα ζώο της Σαβάνας

Ετικέτες: