11.4 Καθορίζοντας την Εμφάνιση CSS
Αναρτήθηκε σεΕφαρμογές Πληροφορικής Μαθήματα

11.4 Καθορίζοντας την Εμφάνιση CSS

Βάζω στυλ στον HTML κώδικά μου με CSS. Έχουμε και τον ΑΙ CCS chatbot βοηθό μας!

H CSS μαθησιακή μας δραστηριότητα βασίζεται σε 3 φύλλα εργασίας και μία Διαδραστική Παρουσίαση

CCS Φύλλο Εργασίας 1 – Inline | CSS Φύλλο Εργασίας 2 – Internal | Τελική Εργασία
Προσωπικός AI βοηθός

To infographic, η παρουσίαση τάξης και το φύλλο Τελικό Φύλλο Εργασίας μας

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ ΜΑΘΗΤΗ – Δραστηριότητα τάξης
Ενότητα: 11.4 CSS
Διάρκεια: 1 διδακτική ώρα
🧩 «Δώσε στυλ στη σελίδα σου με CSS»
🎯 Στόχοι
Με την ολοκλήρωση της δραστηριότητας θα μπορείς να:
  • χρησιμοποιείς CSS για να αλλάζεις την εμφάνιση στοιχείων HTML
  • τροποποιείς ιδιότητες στυλ στα στοιχεία p και h1
  • εφαρμόζεις ιδιότητες:
    • color
    • font-size
    • background-color
    • border
  • κατανοείς τη διαφορά ανάμεσα σε solid και dotted περίγραμμα

📘 H ιδιότητα border

Η CSS ιδιότητα border χρησιμοποιείται για να δημιουργεί περίγραμμα γύρω από ένα στοιχείο.

Γενική μορφή:
border: πάχος τύπος χρώμα;
Παράδειγμα:
p {  border: 2px dotted powderblue; }
  • 2px → πάχος περιγράμματος
  • dotted → διακεκομμένη γραμμή (τελείες)
  • solid → συνεχόμενη γραμμή
  • powderblue → χρώμα περιγράμματος
💻 Δραστηριότητα με CSS

Μεταβείτε στην ιστοσελίδα https://onecompiler.com/html και αντεγράψτε τον παρακάτω κώδικα:

<html>
<head>
   <title>CSS Δραστηριότητα</title>
  <style>
    /* Εδώ θα γράψεις τον CSS κώδικα */
  </style>
</head>
<body>
  <h1>Καλώς ήρθατε στην CSS</h1>
  <p>Η CSS αλλάζει την εμφάνιση των ιστοσελίδων.</p>
  <p>Μπορούμε να αλλάξουμε χρώματα, γραμματοσειρές και πλαίσια.</p>

</body>
</html>

✏️ ΖΗΤΟΥΜΕΝΑ

1️⃣ Για το στοιχείο h1 να ορίσεις:

  • Χρώμα κειμένου: blue
  • Μέγεθος γραμματοσειράς: 32px
  • Χρώμα φόντου: lightgray
  • Περίγραμμα: 3px solid black

2️⃣ Για το στοιχείο p να ορίσεις:

  • Χρώμα κειμένου: green
  • Μέγεθος γραμματοσειράς: 18px
  • Χρώμα φόντου: lightyellow
  • Περίγραμμα: 2px dotted powderblue

📌 Υπενθύμιση: p { border: 2px dotted green;}

🧪 QUIZ – Έλεγχος κατανόησης

1️⃣ Ποια ιδιότητα της CSS αλλάζει το χρώμα του κειμένου;

☐ background-color
☐ font-size
☐ color
☐ border

2️⃣ Ποια τιμή δημιουργεί διακεκομμένο περίγραμμα;

☐ solid
☐ dotted
☐ double
☐ none

3️⃣ Ποια είναι η σωστή σύνταξη για περίγραμμα;

☐ border: solid 2px blue;
☐ border: 2px solid blue;
☐ border: blue solid 2;
☐ border: 2 solid blue;

4️⃣ Ποια ιδιότητα αλλάζει το μέγεθος της γραμματοσειράς;

☐ color
☐ background-color
☐ font-size
☐ border

5️⃣ Σε ποιο σημείο του αρχείου γράφουμε CSS όταν χρησιμοποιούμε εσωτερικό στυλ;

☐ Μέσα στο <body>
☐ Μέσα στο <style> στο <head>
☐ Μετά το </html>
☐ Μέσα στο <title>

✅ Ολοκλήρωση

Κάνε

το αρχείο σου και έλεγξε αν τα στοιχεία h1 και p εμφανίζονται με το σωστό στυλ.
Στείλε μου το link σου στο grafis στο username bpaschos

📌 Αν έχεις χρόνο, δοκίμασε να αλλάξεις:

  • το dotted σε solid
  • τα χρώματα του φόντου

✍️ Όνομα μαθητή: ________________________
📅 Ημερομηνία: ________________________

📊 Ρουμπρίκα Αυτοαξιολόγησης Μαθητή – CSS

Ο μαθητής σημειώνει ✔️ στο επίπεδο που θεωρεί ότι τον εκφράζει καλύτερα.

ΚριτήριοΠολύ καλάΚαλάΧρειάζομαι βοήθεια
Χρησιμοποίησα σωστά CSS selectors (p, h1)☐☐☐
Άλλαξα σωστά το color των στοιχείων☐☐☐
Όρισα σωστά το font-size☐☐☐
Εφάρμοσα background-color☐☐☐
Χρησιμοποίησα σωστά την ιδιότητα border☐☐☐
Γνωρίζω τη διαφορά solid και dotted☐☐☐
Ο κώδικάς μου λειτουργεί σωστά στον browser☐☐☐

✍️ Τι έμαθα σήμερα:

……………………………………………………………………

✍️ Τι δυσκολεύτηκα να καταλάβω:

……………………………………………………………………

✍️ Όνομα μαθητή: ________________________
📅 Ημερομηνία: ________________________

📝 Φύλλο Αξιολόγησης Μαθήματος & Εκπαιδευτικού

(Συμπληρώνεται ανώνυμα από τον μαθητή)

Σημείωσε ✔️ την απάντηση που σε εκφράζει περισσότερο.

1️⃣ Το μάθημα ήταν κατανοητό και ενδιαφέρον.

☐ Πολύ
☐ Αρκετά
☐ Λίγο

2️⃣ Οι οδηγίες της δραστηριότητας ήταν σαφείς.

☐ Πολύ
☐ Αρκετά
☐ Λίγο

3️⃣ Ο/Η εκπαιδευτικός με βοήθησε όταν χρειάστηκα υποστήριξη.

☐ Πολύ
☐ Αρκετά
☐ Λίγο

4️⃣ Τι θα ήθελα να αλλάξει ή να βελτιωθεί στο μάθημα;

……………………………………………………………………

🙏 Ευχαριστούμε για τη συμμετοχή σου!

Το συγκεκριμένο υλικό αποτελεί αποκλειστική πνευματική δημιουργία αυτού του ιστοτόπου (δεν υπάρχει καμία παρέμβαση ΑΙ λογικής) και διατίθεται με άδεια χρήσης

Σας ευχαριστώ

Β. ΠΑΣΧΟΣ ΠΕ86 / ΓΕΛ Σιδηροκάστρου

Ετικέτες: