HTML Lesson 01 – Hello World!

Καλώς ήρθες στο Jerry's CodeLab!

Σε αυτό το πρώτο μάθημα θα δημιουργήσουμε την πρώτη μας ιστοσελίδα χρησιμοποιώντας HTML.

Δεν χρειάζεται προηγούμενη εμπειρία στον προγραμματισμό. Θα ξεκινήσουμε από το μηδέν και θα προχωρήσουμε βήμα προς βήμα.

Τι είναι η HTML;

Η HTML (HyperText Markup Language) είναι η γλώσσα σήμανσης που χρησιμοποιούμε για να οργανώσουμε το περιεχόμενο μιας ιστοσελίδας.

Με την HTML μπορούμε να δημιουργήσουμε τίτλους, παραγράφους, συνδέσμους, εικόνες, λίστες και πολλά άλλα στοιχεία.

Σκέψου την HTML ως τον σκελετό μιας ιστοσελίδας. Στα επόμενα μαθήματα θα γνωρίσουμε την CSS, η οποία θα μας βοηθήσει να διαμορφώσουμε την εμφάνισή της.

Το πρώτο μας HTML έγγραφο

Ας ξεκινήσουμε με ένα μικρό παράδειγμα:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>Welcome to my first webpage!</p>

</body>
</html>

Τι γράψαμε;

• <!DOCTYPE html>: Δηλώνει ότι χρησιμοποιούμε HTML5.
• <html>: Είναι το βασικό στοιχείο του HTML εγγράφου.
• <head>: Περιέχει πληροφορίες για τη σελίδα.
• <title>: Ορίζει τον τίτλο που εμφανίζεται στην καρτέλα του browser.
• <body>: Περιέχει το περιεχόμενο που βλέπει ο επισκέπτης.
• <h1>: Δημιουργεί έναν κύριο τίτλο.
• <p>: Δημιουργεί μια παράγραφο.

Τα περισσότερα στοιχεία HTML αποτελούνται από ένα tag έναρξης και ένα tag λήξης. Για παράδειγμα, το <p> ξεκινά μια παράγραφο και το </p> την ολοκληρώνει.

Ώρα για πειραματισμό!

Επίπεδο 1 – Παράδειγμα

Άλλαξε το Hello, World! σε Hello, CodeLab!.

Επίπεδο 2 – Πειραματίσου

Πρόσθεσε μια δεύτερη παράγραφο που να περιγράφει τι θέλεις να μάθεις στον προγραμματισμό.

Επίπεδο 3 – Λύσε μόνος σου

Δημιούργησε μια μικρή προσωπική σελίδα με:

• Έναν κύριο τίτλο με το όνομά σου.
• Μία παράγραφο παρουσίασης.
• Έναν δεύτερο τίτλο που να γράφει My Goals.
• Μία παράγραφο με έναν προγραμματιστικό στόχο σου.

Τι μάθαμε σήμερα;

Σήμερα δημιουργήσαμε το πρώτο μας HTML έγγραφο και γνωρίσαμε τα βασικά στοιχεία της δομής του.

Αυτό είναι μόνο η αρχή!

Στο επόμενο μάθημα: Θα εξερευνήσουμε καλύτερα τη δομή ενός HTML εγγράφου και θα καταλάβουμε πώς συνεργάζονται τα βασικά του στοιχεία.

Keep learning. Keep experimenting. Keep creating.