📚 Περιεχόμενα Ενότητας

2.1 Εισαγωγή στην HTML
2.2 Βασικά Στοιχεία HTML
2.3 Inline CSS με το attribute style
2.4 Εσωτερικό CSS (Internal CSS)
2.5 Εξωτερικό CSS (External CSS)

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

Τι είναι η HTML;

🔍 HTML - HyperText Markup Language

Η HTML είναι η βασική γλώσσα σήμανσης για τη δημιουργία ιστοσελίδων. Δεν είναι γλώσσα προγραμματισμού, αλλά markup language που:

Δομεί το περιεχόμενο: Καθορίζει τι είναι κάθε στοιχείο (τίτλος, παράγραφος, εικόνα)
Δημιουργεί συνδέσμους: Επιτρέπει τη σύνδεση σελίδων μεταξύ τους
Ενσωματώνει πολυμέσα: Εικόνες, βίντεο, ήχο
Παρέχει σημασιολογία: Δίνει νόημα στο περιεχόμενο για browsers και search engines

Ιστορία της HTML

📅 Εξέλιξη HTML

1991: HTML 1.0 - Πρώτη έκδοση από Tim Berners-Lee
1995: HTML 2.0 - Πρώτο RFC standard
1997: HTML 3.2 - Υποστήριξη για tables, applets
1999: HTML 4.01 - Διαχωρισμός περιεχομένου από παρουσίαση
2000: XHTML 1.0 - XML-based HTML
2014: HTML5 - Σύγχρονα στοιχεία, APIs, πολυμέσα
Σήμερα: Living Standard - Συνεχής εξέλιξη

2.2 Βασικά Στοιχεία HTML

📖 Βασικές Έννοιες HTML

Τι σημαίνει HTML;

Hyper Text Markup Language - Γλώσσα Σήμανσης Υπερκειμένου

Τι κάνει;

Περιγράφει τη δομή μιας ιστοσελίδας

Πώς λειτουργεί;

Αποτελείται από στοιχεία (elements)

Για ποιον;

Λέει στον browser πώς να εμφανίσει το περιεχόμενο

🎯 Ένα Απλό Παράδειγμα

<!DOCTYPE html>
<html>
  <head>
    <title>Τίτλος Σελίδας</title>
  </head>
  <body>
    <h1>Η Πρώτη μου Επικεφαλίδα</h1>
    <p>Η πρώτη μου παράγραφος.</p>
  </body>
</html>

📝 Επεξήγηση Παραδείγματος

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

🔍 Αναλυτικό Παράδειγμα με Σχόλια

<!-- Δηλώνει ότι το έγγραφο είναι γραμμένο σε HTML5 -->
<!DOCTYPE html>
<!-- Αρχή του HTML εγγράφου -->
<html>
  <!-- Τμήμα που περιέχει πληροφορίες για τη σελίδα (όχι ορατές στον χρήστη) -->
  <head>
    <!-- Ο τίτλος της σελίδας, εμφανίζεται στην καρτέλα του browser -->
    <title>Τίτλος Σελίδας</title>
  </head>
  <!-- Το κύριο μέρος της σελίδας, ό,τι βλέπει ο χρήστης -->
  <body>
    <!-- Επικεφαλίδα πρώτου επιπέδου (ο πιο σημαντικός τίτλος στη σελίδα) -->
    <h1>Η Πρώτη μου Επικεφαλίδα</h1>
    <!-- Μία παράγραφος κειμένου -->
    <p>Η πρώτη μου παράγραφος.</p>
  </body>
<!-- Τέλος του HTML εγγράφου -->
</html>

📝 Βασικά Παραδείγματα HTML

Σε αυτή την ενότητα θα δούμε μερικά βασικά παραδείγματα HTML. Μην ανησυχείτε αν χρησιμοποιούμε tags που δεν έχετε μάθει ακόμα - θα τα δούμε αναλυτικά παρακάτω.

📄 Έγγραφα HTML

Όλα τα έγγραφα HTML πρέπει να ξεκινούν με μια δήλωση τύπου εγγράφου: <!DOCTYPE html>.

Το HTML έγγραφο ξεκινά με <html> και τελειώνει με </html>
Το ορατό μέρος του εγγράφου βρίσκεται μεταξύ <body> και </body>

<!DOCTYPE html>
<html>
  <body>
    <h1>Η Πρώτη μου Επικεφαλίδα</h1>
    <p>Η πρώτη μου παράγραφος.</p>
  </body>
</html>

⚡ Η Δήλωση <!DOCTYPE>

Η δήλωση <!DOCTYPE> αντιπροσωπεύει τον τύπο του εγγράφου και βοηθά τους browsers να εμφανίσουν τις ιστοσελίδες σωστά.

Πρέπει να εμφανίζεται μόνο μία φορά, στην κορυφή της σελίδας (πριν από οποιαδήποτε HTML tags)
Η δήλωση <!DOCTYPE> δεν είναι case sensitive
Για HTML5: <!DOCTYPE html>

📌 Επικεφαλίδες HTML (Headings)

Οι επικεφαλίδες HTML ορίζονται με τα tags <h1> έως <h6>.

<h1> ορίζει την πιο σημαντική επικεφαλίδα. <h6> ορίζει την λιγότερο σημαντική:

<h1>Αυτή είναι επικεφαλίδα 1</h1>
<h2>Αυτή είναι επικεφαλίδα 2</h2>
<h3>Αυτή είναι επικεφαλίδα 3</h3>

📺 Προεπισκόπηση:

Αυτή είναι επικεφαλίδα 1

Αυτή είναι επικεφαλίδα 2

Αυτή είναι επικεφαλίδα 3

📝 Παράγραφοι HTML

Οι παράγραφοι HTML ορίζονται με το tag <p>:

<p>Αυτή είναι μια παράγραφος.</p>
<p>Αυτή είναι μια άλλη παράγραφος.</p>

🔗 Σύνδεσμοι HTML (Links)

Οι σύνδεσμοι HTML ορίζονται με το tag <a>:

<a href="https://www.example.com">Αυτός είναι ένας σύνδεσμος</a>

Ο προορισμός του συνδέσμου καθορίζεται στο attribute href.

Τα attributes χρησιμοποιούνται για να παρέχουν πρόσθετες πληροφορίες για τα HTML στοιχεία.

🖼️ Εικόνες HTML

Οι εικόνες HTML ορίζονται με το tag <img>.

Το αρχείο προέλευσης (src), το εναλλακτικό κείμενο (alt), το πλάτος (width) και το ύψος (height) παρέχονται ως attributes:

<img src="https://ds.uop.gr/sites/default/files/styles/large/public/images/2024-03/logo-ds-el.png?itok=ASurM2gU" alt="Τμήμα Ψηφιακών Συστημάτων" width="300" height="200">

🔍 Πώς να δείτε τον Κώδικα HTML μιας Σελίδας

Σας έχει τύχει ποτέ να δείτε μια ιστοσελίδα και να αναρωτηθείτε "Πώς το έκαναν αυτό;"

Δύο τρόποι:

Προβολή Πηγαίου Κώδικα HTML:
- Πατήστε Ctrl + U (Windows/Linux) ή Cmd + Option + U (Mac)
- Ή κάντε δεξί κλικ στη σελίδα και επιλέξτε "View Page Source"
- Θα ανοίξει νέα καρτέλα με τον πηγαίο κώδικα HTML
Επιθεώρηση Στοιχείου (Inspect):
- Κάντε δεξί κλικ σε ένα στοιχείο και επιλέξτε "Inspect" ή "Επιθεώρηση"
- Θα δείτε τόσο το HTML όσο και το CSS
- Μπορείτε να επεξεργαστείτε τον κώδικα σε πραγματικό χρόνο!

2.3 Inline CSS με το attribute `style`

🎨 Το attribute `style` στην HTML

🔹 Τι είναι το `style`

Η HTML περιγράφει τη δομή μιας σελίδας (τι περιέχει: παραγράφους, εικόνες, τίτλους κ.λπ.). Όμως από μόνη της δεν καθορίζει την εμφάνιση — όλα φαίνονται με το ίδιο μαύρο κείμενο σε λευκό φόντο.

Για να αλλάξουμε πώς φαίνονται τα στοιχεία, χρησιμοποιούμε το attribute style.

Το style μάς επιτρέπει να εφαρμόσουμε CSS κανόνες απευθείας μέσα στο στοιχείο. Είναι δηλαδή ένας τρόπος να γράψουμε CSS "μέσα" στην HTML.

🔹 Σύνταξη

tagname → το στοιχείο που θέλουμε να μορφοποιήσουμε (π.χ. p, h1, div, a)
property → το όνομα μιας ιδιότητας CSS (π.χ. color, font-size, background-color)
value → η τιμή αυτής της ιδιότητας (π.χ. red, 20px, tomato)

Κάθε ιδιότητα χωρίζεται με ελληνικό ερωτηματικό (;) όταν έχεις πολλές:

<p style="color:red; font-size:20px; text-align:center;">
  Παράδειγμα κειμένου
</p>

🔹 Τι ιδιότητες μπορούμε να αλλάξουμε

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

Ιδιότητα	Περιγραφή	Παράδειγμα
color	Χρώμα του κειμένου	color:blue;
background-color	Χρώμα φόντου	background-color:yellow;
font-size	Μέγεθος γραμματοσειράς	font-size:24px;
font-family	Τύπος γραμματοσειράς	font-family:Arial;
text-align	Στοίχιση του κειμένου	text-align:center;
border	Περίγραμμα γύρω από στοιχείο	border:1px solid black;
margin	Εξωτερικό κενό	margin:20px;
padding	Εσωτερικό κενό	padding:10px;

📘 Σημείωση

Όλες αυτές είναι CSS ιδιότητες — και το style είναι απλώς ένας τρόπος να τις γράψουμε μέσα στο HTML.

🔹 Πλεονεκτήματα και μειονεκτήματα

✅ Πλεονεκτήματα:

Εύκολο και γρήγορο για μικρά παραδείγματα ή δοκιμές
Δεν χρειάζεται ξεχωριστό αρχείο CSS

❌ Μειονεκτήματα:

Αν έχεις πολλές γραμμές HTML, τα στυλ "σκορπίζονται" παντού
Δύσκολο να αλλάξεις κάτι παντού (π.χ. αν θες όλα τα p να αλλάξουν χρώμα)
Δεν είναι καθαρός τρόπος για μεγάλες ιστοσελίδες

💻 Παράδειγμα 1 — Inline Style σε διαφορετικά στοιχεία

<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα Inline Styling</title>
  </head>
  <body>

    <h1 style="color:blue;">Αυτός είναι ένας τίτλος</h1>

    <p style="color:red; font-size:20px;">
      Αυτή είναι μια παράγραφος με κόκκινο χρώμα και μεγαλύτερο μέγεθος.
    </p>

    <p style="text-align:center; background-color:yellow;">
      Αυτή η παράγραφος είναι στο κέντρο και έχει κίτρινο φόντο.
    </p>

    <a href="#" style="color:white; background-color:green; padding:10px; text-decoration:none; border-radius:6px;">
      Αυτός είναι ένας σύνδεσμος με στυλ κουμπιού
    </a>

  </body>
</html>

✳️ Τι να δοκιμάσεις

Άλλαξε το color σε purple.
Αύξησε το font-size από 20px σε 30px.
Βάλε background-color: lightblue; στο <body>.
Δες πώς αλλάζει άμεσα η εμφάνιση στον browser.

2.4 Εσωτερικό CSS (Internal CSS)

Ας περάσουμε τώρα στο δεύτερο βήμα: το εσωτερικό CSS (Internal CSS). Εδώ αρχίζουμε να ξεχωρίζουμε τη μορφοποίηση από τη δομή της HTML — ένα μεγάλο βήμα προς τον "σωστό" τρόπο γραφής ιστοσελίδων.

🔹 Τι είναι το εσωτερικό CSS

Το εσωτερικό CSS είναι ένας τρόπος να γράψουμε κανόνες CSS μέσα στην ίδια HTML σελίδα, αλλά όχι μέσα στα στοιχεία. Αντί να χρησιμοποιούμε style="..." σε κάθε tag, γράφουμε τους κανόνες μια φορά μέσα στο <style> tag, το οποίο τοποθετείται στο <head>.

🔹 Γιατί το χρησιμοποιούμε

Μας επιτρέπει να αλλάζουμε το στυλ πολλών στοιχείων ταυτόχρονα, χωρίς να επαναλαμβάνουμε κώδικα.
Κρατάει τον κώδικα πιο καθαρό και οργανωμένο από τα inline styles.
Είναι κατάλληλο για μικρές ή μεμονωμένες σελίδες.

🔹 Σύνταξη

Το εσωτερικό CSS γράφεται μέσα στο tag <style>:

<head>
  <style>
    selector {
      property: value;
    }
  </style>
</head>

selector → δηλώνει ποιο στοιχείο HTML επηρεάζεται (π.χ. p, h1, body)
property → η ιδιότητα CSS που θέλουμε να αλλάξουμε
value → η τιμή αυτής της ιδιότητας

🔹 Παράδειγμα

Ας μετατρέψουμε το προηγούμενο inline παράδειγμα σε internal CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Παράδειγμα Εσωτερικού CSS</title>

    <!-- Εδώ γράφουμε το CSS -->
    <style>
      body {
        background-color: lightyellow;
        font-family: Arial, sans-serif;
      }

      h1 {
        color: blue;
        text-align: center;
      }

      p {
        color: red;
        font-size: 20px;
      }

      .highlight {
        text-align: center;
        background-color: yellow;
      }

      a {
        color: white;
        background-color: green;
        padding: 10px;
        text-decoration: none;
        border-radius: 6px;
      }

      a:hover {
        background-color: darkgreen;
      }
    </style>
  </head>

  <body>
    <h1>Αυτός είναι ένας τίτλος</h1>

    <p>Αυτή είναι μια παράγραφος με κόκκινο χρώμα και μεγαλύτερο μέγεθος.</p>

    <p class="highlight">Αυτή η παράγραφος είναι στο κέντρο και έχει κίτρινο φόντο.</p>

    <a href="#">Αυτός είναι ένας σύνδεσμος με στυλ κουμπιού</a>
  </body>
</html>

🔹 Τι βλέπουμε εδώ

Όλα τα στυλ είναι μαζεμένα στο <style>, όχι διασκορπισμένα.
Αν θέλεις να αλλάξεις το χρώμα όλων των παραγράφων, απλώς αλλάζεις το p { color: red; } μία φορά.
Προσθέσαμε και CSS class (class="highlight") για να στοχεύσουμε συγκεκριμένα στοιχεία.

🔹 Πλεονεκτήματα και Μειονεκτήματα

✅ Πλεονεκτήματα:

Καθαρός και οργανωμένος κώδικας
Εύκολη αλλαγή στυλ σε πολλά στοιχεία
Καλύτερη απόδοση από τα inline styles

❌ Μειονεκτήματα:

Αν έχεις πολλές HTML σελίδες, πρέπει να αντιγράψεις το ίδιο <style> σε όλες
Δεν είναι πρακτικό για μεγάλα sites — εκεί θα περάσουμε στο εξωτερικό CSS

2.5 Εξωτερικό CSS (External CSS)

🌟 Ο Επαγγελματικός Τρόπος

Αυτός είναι ο πιο επαγγελματικός και καθαρός τρόπος να βάζεις στυλ σε ιστοσελίδες, και είναι ο τρόπος που χρησιμοποιείται σε πραγματικά websites.

🔹 Τι είναι το Εξωτερικό CSS

Στο εξωτερικό CSS, ο κώδικας των στυλ γράφεται σε ξεχωριστό αρχείο (συνήθως με κατάληξη .css). Η HTML δεν περιέχει καθόλου κανόνες στυλ μέσα της, απλώς "συνδέεται" με το CSS αρχείο μέσω ενός link στο <head>.

Έτσι έχουμε:

HTML = Δομή και περιεχόμενο
CSS = Εμφάνιση και στυλ

🔹 Γιατί να το χρησιμοποιήσεις

✅ Πλεονεκτήματα του Εξωτερικού CSS:

Καθαρός, οργανωμένος κώδικας
Ίδιο CSS για πολλές σελίδες (π.χ. header, footer, χρώματα)
Ευκολία στη συντήρηση — αλλάζεις κάτι μία φορά, και ενημερώνονται όλες οι σελίδες
Είναι το πρότυπο για επαγγελματικά projects

🔹 Πώς το συνδέουμε

Στο <head> του HTML αρχείου γράφουμε:

👉 Τι σημαίνει αυτό;

Αυτό λέει στον browser: "Φόρτωσε το αρχείο style.css και εφάρμοσε τους κανόνες του σε αυτή τη σελίδα."

💻 Παράδειγμα — ίδιο με το προηγούμενο, αλλά με εξωτερικό CSS

📄 Αρχείο: `index.html`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Παράδειγμα Εξωτερικού CSS</title>

    <!-- Συνδέουμε το αρχείο CSS -->
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Αυτός είναι ένας τίτλος</h1>

    <p>Αυτή είναι μια παράγραφος με κόκκινο χρώμα και μεγαλύτερο μέγεθος.</p>

    <p class="highlight">
      Αυτή η παράγραφος είναι στο κέντρο και έχει κίτρινο φόντο.
    </p>

    <a href="#">Αυτός είναι ένας σύνδεσμος με στυλ κουμπιού</a>
  </body>
</html>

📄 Αρχείο: `style.css`

/* Ολόκληρη η σελίδα */
body {
  background-color: lightyellow;
  font-family: Arial, sans-serif;
}

/* Τίτλος */
h1 {
  color: blue;
  text-align: center;
}

/* Όλες οι παράγραφοι */
p {
  color: red;
  font-size: 20px;
}

/* Παράγραφοι με κλάση "highlight" */
.highlight {
  text-align: center;
  background-color: yellow;
}

/* Σύνδεσμος */
a {
  color: white;
  background-color: green;
  padding: 10px;
  text-decoration: none;
  border-radius: 6px;
}

/* Όταν περνάει το ποντίκι από πάνω */
a:hover {
  background-color: darkgreen;
}

🔹 Πώς λειτουργεί

📋 Διαδικασία Φόρτωσης

Βήμα 1: Ο browser διαβάζει πρώτα την HTML (index.html)
Βήμα 2: Βλέπει το <link rel="stylesheet" href="style.css">
Βήμα 3: Ανοίγει το αρχείο style.css
Βήμα 4: Εφαρμόζει τους κανόνες CSS στα στοιχεία της σελίδας

🎨 Σύγκριση των 3 Τρόπων CSS

Τύπος CSS	Πού γράφεται	Χρήση	Πλεονέκτημα
Inline CSS	Μέσα στο HTML element με style=""	Δοκιμές, μικρές αλλαγές	Γρήγορο και άμεσο
Internal CSS	Στο <head> με <style>	Μεμονωμένες σελίδες	Οργανωμένο για μία σελίδα
External CSS	Σε ξεχωριστό αρχείο .css	Επαγγελματικά projects	Επαναχρησιμοποίηση, συντήρηση

✳️ Άσκηση: Δημιούργησε το δικό σου External CSS

Δημιούργησε ένα αρχείο index.html
Δημιούργησε ένα αρχείο style.css στον ίδιο φάκελο
Σύνδεσε τα δύο αρχεία με το <link> tag
Γράψε CSS κανόνες στο style.css
Άνοιξε το index.html στον browser και δες το αποτέλεσμα!

📋 Σύνοψη Ενότητας

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

🎯 Βασικά σημεία:

HTML: Δομή και σημασιολογία περιεχομένου
HTML5: Σύγχρονα στοιχεία και APIs
Inline CSS: Στυλ με το style attribute (για δοκιμές)
Internal CSS: Στυλ με το <style> tag (για μεμονωμένες σελίδες)
External CSS: Στυλ σε ξεχωριστό αρχείο .css (επαγγελματικός τρόπος)
Selectors: Επιλογή στοιχείων για styling

Στην επόμενη ενότητα θα μάθουμε JavaScript για να κάνουμε τις σελίδες μας διαδραστικές!

🔥 Ασκήσεις Εμπέδωσης

Δημιουργήστε μια βασική HTML σελίδα με τη δομή που μάθαμε (DOCTYPE, html, head, body)
Προσθέστε διάφορα στοιχεία όπως επικεφαλίδες, παραγράφους, συνδέσμους και εικόνες
Δοκιμάστε και τους 3 τρόπους CSS:
- Ξεκινήστε με inline CSS
- Μετατρέψτε τα σε internal CSS
- Τέλος, μετακινήστε τα σε ξεχωριστό αρχείο external CSS
Εξηγήστε τις διαφορές μεταξύ των τριών τρόπων CSS
Δημιουργήστε ένα mini-project: Μια σελίδα με 3 HTML files που όλα χρησιμοποιούν το ίδιο external CSS αρχείο

📚 Περιεχόμενα Ενότητας

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

Τι είναι η HTML;

🔍 HTML - HyperText Markup Language

Ιστορία της HTML

📅 Εξέλιξη HTML

2.2 Βασικά Στοιχεία HTML

📖 Βασικές Έννοιες HTML

Τι σημαίνει HTML;

Τι κάνει;

Πώς λειτουργεί;

Για ποιον;

🎯 Ένα Απλό Παράδειγμα

📝 Επεξήγηση Παραδείγματος

🔍 Αναλυτικό Παράδειγμα με Σχόλια

📝 Βασικά Παραδείγματα HTML

📄 Έγγραφα HTML

⚡ Η Δήλωση <!DOCTYPE>

📌 Επικεφαλίδες HTML (Headings)

📺 Προεπισκόπηση:

Αυτή είναι επικεφαλίδα 1

Αυτή είναι επικεφαλίδα 2

Αυτή είναι επικεφαλίδα 3

📝 Παράγραφοι HTML

🔗 Σύνδεσμοι HTML (Links)

🖼️ Εικόνες HTML

🔍 Πώς να δείτε τον Κώδικα HTML μιας Σελίδας

Δύο τρόποι:

2.3 Inline CSS με το attribute style

🎨 Το attribute `style` στην HTML

🔹 Τι είναι το `style`

🔹 Σύνταξη

🔹 Τι ιδιότητες μπορούμε να αλλάξουμε

📘 Σημείωση

🔹 Πλεονεκτήματα και μειονεκτήματα

✅ Πλεονεκτήματα:

❌ Μειονεκτήματα:

💻 Παράδειγμα 1 — Inline Style σε διαφορετικά στοιχεία

✳️ Τι να δοκιμάσεις

2.4 Εσωτερικό CSS (Internal CSS)

🔹 Τι είναι το εσωτερικό CSS

🔹 Γιατί το χρησιμοποιούμε

🔹 Σύνταξη

🔹 Παράδειγμα

🔹 Τι βλέπουμε εδώ

🔹 Πλεονεκτήματα και Μειονεκτήματα

✅ Πλεονεκτήματα:

❌ Μειονεκτήματα:

2.5 Εξωτερικό CSS (External CSS)

🌟 Ο Επαγγελματικός Τρόπος

🔹 Τι είναι το Εξωτερικό CSS

Έτσι έχουμε:

🔹 Γιατί να το χρησιμοποιήσεις

✅ Πλεονεκτήματα του Εξωτερικού CSS:

🔹 Πώς το συνδέουμε

👉 Τι σημαίνει αυτό;

💻 Παράδειγμα — ίδιο με το προηγούμενο, αλλά με εξωτερικό CSS

📄 Αρχείο: index.html

📄 Αρχείο: style.css

🔹 Πώς λειτουργεί

📋 Διαδικασία Φόρτωσης

🎨 Σύγκριση των 3 Τρόπων CSS

✳️ Άσκηση: Δημιούργησε το δικό σου External CSS

📋 Σύνοψη Ενότητας

🎯 Βασικά σημεία:

🔥 Ασκήσεις Εμπέδωσης

2.3 Inline CSS με το attribute `style`

📄 Αρχείο: `index.html`

📄 Αρχείο: `style.css`