Άρθρα ανά μήνα: Οκτώβριος 2025

διαγράμματα ροής δομη επιλογης Ασκήσεις


Λήψη αρχείου

Css στις ιστοσελίδες

Εισαγωγή στην CSS

Η CSS (Cascading Style Sheets) είναι η γλώσσα που καθορίζει την εμφάνιση (μορφοποίηση) μιας ιστοσελίδας.
Με την CSS αλλάζουμε χρώματα, φόντο, γραμματοσειρές, περιθώρια, στοίχιση κ.ά.

Ας δούμε πως γράφω css

Οι εντολές css συντάσσονται χρησιμοποιώντας δυο κομμάτια. Το πρώτο είναι ένας επιλογέας και το δεύτερο είναι το τμήμα δηλώσεων.

  • Ας δούμε το παράδειγμα:  h1 {color:blue; font–size:12px;}
    • Επιλογέας είναι το h Ο επιλογέας (selector) αναφέρεται στο στοιχείο html που θέλουμε να μορφοποιήσουμε
    • Τμήμα δηλώσεων είναι το {color:blue; font-size:12px;}. Μας δείχνει την οπτική διαμόρφωση του επιλογέα. Το τμήμα δηλώσεων (declaration block) περιλαμβάνει μια ή περισσότερες δηλώσεις που χωρίζονται μεταξύ τους με το σύμβολο « ; » (semicolon).
      Ποιες δηλώσεις έχω στο συγκεκριμένο παράδειγμα;
    • Κάθε δήλωση περιλαμβάνει μια ιδιότητα (property name) και μια τιμή (value) που διαχωρίζονται με το σύμβολο « : » (colon). Κάθε δήλωση της CSS πάντα τελειώνει σε « ; » (semicolon). Το τμήμα δηλώσεων της CSS περικλείεται ανάμεσα σε { }.
  • Ένα ακόμη παράδειγμα
    p { color: red; text-align: center; background-color: yellow;}
    Τι δηλώνουμε με αυτό το css;

Παράδειγμα CSS μέσα στο HTML αρχείο:

<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
color: darkblue;
}
</style>

 5. Βασικές Ιδιότητες CSS

Ιδιότητα Τι αλλάζει Παράδειγμα
background-color Χρώμα φόντου background-color: yellow;
color Χρώμα γραμμάτων color: red;
font-family Τύπος γραμματοσειράς font-family: Verdana;
font-size Μέγεθος γραμματοσειράς font-size: 18px;
text-align Στοίχιση κειμένου text-align: center;

🌈 6. Παράδειγμα Ολοκληρωμένης Σελίδας

1ο  παράδειγμα

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Η Σελίδα μου</title><style>
body {
    background-color: #f0f8ff;
    font-family: Verdana, sans-serif;
    color: #333333;
}
h1 {
color: darkblue;
text-align: center;
}
<!– δεν υπογραμμίζεται ο υπερσύνδεσμος–>
a {
color: red;
text-decoration: none;
}
<!– αλλάζει χρώμα ο συνδεσμος οταν περασει το ποντικι απο πάνω–>
a:hover {
color: green;
}
</style>
</head>
<body>
<h1>Η πρώτη μου ιστοσελίδα</h1>
<p>Καλώς ήρθατε! Δείτε την αγαπημένη μου φωτογραφία:</p><img src=“photo.jpg” alt=“Φωτογραφία” width=“300”><br><a href=“https://www.wikipedia.org” target=“_blank”>Επισκεφθείτε τη Wikipedia</a></body>
</html>
Το εξαγόμενο αποτέλεσμα είναι έτσι:

Stigmiotypo othonhs 2025 10 19 130256

2. παράδειγμα

<!DOCTYPE html>
<html lang=”el”>
<head>
    <meta charset=”UTF-8″>
    <title>Η Φωτογκαλερί μου</title>
</head>
 <style>
        body {
            background-color: #f0f8ff; /* ανοιχτό γαλάζιο */
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            text-align: center;
        }
</style>
<body>
    <h1>Η Φωτογκαλερί μου</h1>
    <!– Πρώτη εικόνα από το διαδίκτυο –>
    <img src=”https://images.unsplash.com/photo-1501785888041-af3ef285b470″ alt=”Όμορφο τοπίο βουνού” width=”200″>
    <p>Ένα μαγευτικό ορεινό τοπίο με ήλιο που ανατέλλει.</p>
    <!– Δεύτερη εικόνα αποθηκευμένη τοπικά –>
    <img src=”images/myphoto.jpg” alt=”Γάτα που κοιμάται” width=”200″>
    <p>Η γάτα μου που απολαμβάνει τον ύπνο της στον ήλιο.</p>
</body>
</html>
Το εξαγόμενο αποτέλεσμα είναι έτσι:
Stigmiotypo othonhs 2025 10 22 230554

 7. Τι πρέπει να θυμάστε

✅ Η HTML φτιάχνει τη δομή.
✅ Η CSS φτιάχνει την εμφάνιση.
✅ Οι εικόνες χρειάζονται σωστή διαδρομή (src).
✅ Οι σύνδεσμοι χρειάζονται href.
✅ Χρησιμοποιούμε το <style> για να αλλάξουμε φόντο, χρώματα, γραμματοσειρές.

 8. Λάβε δράση– Παραδείγματα

A.  Μπορείτε να πειραματιστείτε ζωντανά με τα παραδείγματα στο W3Schools:


🔗 CSS Background Color – Try it Yourself

https://www.w3schools.com/css/tryit.asp?filename=trycss_default

Ας δούμε το css μέσα από δραστηριότητες

https://blogs.sch.gr/lenaanag/files/2025/10/CSS_drasthriothta_4_5_6_7.pdf

τα αποτελέσματα των δραστηριοτήτων είναι τα παρακάτω:

δραστηριότητα 5

Stigmiotypo othonhs 2025 11 01 151058

δραστηριότητα 6

Stigmiotypo othonhs 2025 11 01 151108

 

δραστηριότητα 7

Stigmiotypo othonhs 2025 11 01 151119

10. Αναμνηστικές σημειώσεις

🔗https://blogs.sch.gr/lenaanag/files/2025/10/shmeioseis-CSS.pdf

Δομή_ακολουθίας

Η Δομή Ακολουθίας στον Αλγόριθμο

Εισαγωγή στις Αρχές Υπολογιστών – Β’ Λυκείου

Η δομή ακολουθίας αποτελεί τη βασικότερη και πιο απλή μορφή εκτέλεσης εντολών σε έναν αλγόριθμο.
Κάθε πρόγραμμα, όσο σύνθετο κι αν είναι, στηρίζεται σε αυτήν τη θεμελιώδη ιδέα:
οι εντολές εκτελούνται με τη σειρά που γράφονται, από την πρώτη έως την τελευταία.

🧠 Τι είναι η δομή ακολουθίας;

Στη δομή ακολουθίας, δεν υπάρχουν επιλογές ή επαναλήψεις.
Ο αλγόριθμος απλώς εκτελεί διαδοχικά κάθε βήμα.
Αυτό το είδος λογικής είναι ιδανικό για να:

  • διαβάσουμε δεδομένα από τον χρήστη,

  • κάνουμε πράξεις ή υπολογισμούς,

  • εμφανίσουμε αποτελέσματα.

Με άλλα λόγια, ένας αλγόριθμος ακολουθίας αποτελείται από τρεις φάσεις:

  1. Είσοδος δεδομένων (π.χ. ΔΙΑΒΑΣΕ)

  2. Επεξεργασία (π.χ. πράξεις ή εκχωρήσεις)

  3. Έξοδος αποτελεσμάτων (π.χ. ΓΡΑΨΕ)

🧾 Παράδειγμα

Ακολουθεί ένα απλό παράδειγμα αλγορίθμου που υπολογίζει το άθροισμα δύο αριθμών:

Αλγόριθμος Άθροισμα
ΔΙΑΒΑΣΕ α, β
sum ← α + β
ΓΡΑΨΕ 'Το άθροισμα είναι: ', sum
Τέλος_Άθροισμα

Η εκτέλεση ξεκινά από την πρώτη εντολή και συνεχίζει μέχρι το τέλος χωρίς διακλαδώσεις.

🧮 Γιατί είναι σημαντική η δομή ακολουθίας;

Η δομή ακολουθίας:

  • μας βοηθά να σκεφτόμαστε βήμα–βήμα,

  • είναι η βάση πάνω στην οποία χτίζονται οι πιο σύνθετες δομές (επιλογής και επανάληψης),

  • μας επιτρέπει να κατανοήσουμε τη ροή ενός προγράμματος,

  • ενισχύει την αλγοριθμική σκέψη, ειδικά όταν τη συνδυάζουμε με παραδείγματα και εκτέλεση σε ψευδογλώσσα.

💻 Εφαρμογή στην Pseudoglossa

Η Pseudoglossa είναι ένα εξαιρετικό περιβάλλον για να εφαρμόσουν οι μαθητές τις έννοιες αυτές.
Μπορούν να γράψουν τους δικούς τους αλγορίθμους, να εκτελέσουν βήμα–βήμα και να δουν τα αποτελέσματα στην πράξη.

Ενδεικτικά παραδείγματα:

  • Υπολογισμός μέσου όρου βαθμών

  • Υπολογισμός τελικής τιμής με Φ.Π.Α.

  • Μετατροπή χρόνου από λεπτά σε ώρες και λεπτά

✏️ Φύλλα Εργασίας

Για να εξασκηθούν οι μαθητές, ετοίμασα δύο φύλλα εργασίας:

Φύλλο 1: 

    https://blogs.sch.gr/lenaanag/files/2025/10/fyllo-ergasias_1_diadrastiko_akoloythia-1.pdf

Φύλλο 2:


Λήψη αρχείου


Λήψη αρχείου

Φύλλο 3:


Λήψη αρχείου

Φύλλο 4:


Λήψη αρχείου

HOMEWORK


Λήψη αρχείου

Ασκήσεις στη δομή ακολουθίας

Φύλλο εργασίας στη δομή ακολουθίας.

ΑΣΚΗΣΕΙΣ δομή ακολουθιας

Ασκλησεις δομη ακολουθίας


Λήψη αρχείου

ΔΟΜΗ ΕΠΙΛΟΓΗΣ – ΕΠΙΛΕΞΕ


Λήψη αρχείου

 


Λήψη αρχείου

Λύσεις ασκησεων

1η Ασκηση

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Η σημασία της τεχνολογίας</title>
</head>
<body>
<h1 style=”text-align: center;”>Η σημασία της τεχνολογίας στη σύγχρονη εποχή</h1>
<hr>

<p>
Η τεχνολογία έχει αλλάξει ριζικά τον τρόπο που ζούμε, εργαζόμαστε και επικοινωνούμε. <br>
Καθημερινά χρησιμοποιούμε <b>υπολογιστές</b>, <b>κινητά τηλέφωνα</b> και το <i>διαδίκτυο</i>
για να μαθαίνουμε, να διασκεδάζουμε και να συνεργαζόμαστε με άλλους ανθρώπους. <br><br>
Ωστόσο, η υπερβολική χρήση της τεχνολογίας μπορεί να έχει και αρνητικές συνέπειες, όπως
η <u>απομόνωση</u> ή η <u>εξάρτηση</u>. <br>
Είναι σημαντικό να χρησιμοποιούμε την τεχνολογία
<b>με σύνεση</b> και <i>υπευθυνότητα</i>, ώστε να αξιοποιούμε τα οφέλη της χωρίς να επηρεάζουμε
αρνητικά την καθημερινή μας ζωή.
</p>
</body>
</html>

Εικόνες, Σύνδεσμοι σε Ιστοσελίδες

Θεωρία Μαθήματος: Εικόνες, Σύνδεσμοι σε Ιστοσελίδες

🎯 Στόχοι

Μετά το μάθημα οι μαθητές θα μπορούν:

  • να εισάγουν εικόνες σε ιστοσελίδα,

  • να δημιουργούν υπερσυνδέσμους (links),

1. Τι είναι η HTML (υπενθύμιση)

Η HTML (HyperText Markup Language) είναι η γλώσσα που περιγράφει τη δομή μιας ιστοσελίδας.
Αποτελείται από ετικέτες (tags) που δηλώνουν τι ρόλο έχει κάθε στοιχείο.

Παράδειγμα:

<html>
<head>
<title>Η πρώτη μου σελίδα</title>
</head>
<body>
<h1>Καλώς ήρθατε!</h1>
<p>Αυτό είναι ένα παράδειγμα HTML.</p>
</body>
</html>

🟢 Το <body> περιέχει το περιεχόμενο της σελίδας (κείμενα, εικόνες, συνδέσμους κλπ).
🔵 Οι ετικέτες γράφονται μέσα σε αγκύλες και συνήθως έρχονται σε ζεύγη, π.χ. <p>...</p>.

 2. Εισαγωγή Εικόνας στην HTML

Για να βάλουμε εικόνα χρησιμοποιούμε την ετικέτα <img>.

Παράδειγμα:

<img src="photo.jpg" alt="Η φωτογραφία μου" width="300" height="200">

Επεξήγηση:

Ιδιότητα Περιγραφή
src δηλώνει τη διαδρομή ή το όνομα του αρχείου της εικόνας
alt εναλλακτικό κείμενο που εμφανίζεται αν δεν φορτώσει η εικόνα
width, height καθορίζουν το μέγεθος της εικόνας (σε pixels)

📘 Αν η εικόνα βρίσκεται στο διαδίκτυο:

<img src="https://example.com/logo.png" alt="Λογότυπο">

practice:

εφαρμογή 1.

χρησιμοποιείστε την παρακάτω σύνδεμο για να μεταβείτε στον ιστοτοπο που χρησιμοποιούμε για την εκμάθηση html.
                                                          👉     https://www.w3schools.com/html/html_images.asp
  • βρείτε μια εικόνα στο διαδίκτυο, αντιγράψτε τo url και βάλτε το στο μέσα στο img src                                                                                                              (ενδεικτική url                      https://lh3.googleusercontent.com/gps-cs-s/AC9h4npvvjPCkNbfO6OY5x-FAP1ZDtpSefhwKZU3BhPRbDVoTldjq2YD88bJIaecaQOX1SypbwmvLUQgzw5tV2XmtHIYyzc13O7-qkVzU71loBMBSlqbQook9WJrK9597ACHEhKOFUXujA=w608-h351-n-k-no)
  • αλλάξτε τις τιμές του width  και του height

  Δραστηριότητα 1.

κατεβάστε τώρα την εικόνα  με το αγαπημένο σου χόμπι και αποθηκεύστε την στον φάκελό σας.

Οδηγίες

  1. Δημιούργησε ένα αρχείο hobby.html.
  2. Γράψε έναν τίτλο (<h1>) με το αγαπημένο σου χόμπι (π.χ. “Το αγαπημένο μου άθλημα”).
  3. Βάλε μία εικόνα σχετικές με αυτό το χόμπι.
  4. Χρησιμοποίησε το χαρακτηριστικό alt ώστε, αν δεν εμφανίζεται η εικόνα, να φαίνεται επεξηγηματικό κείμενο.
  5. Ρύθμισε το πλάτος (width) κάθε εικόνας στα 300 pixels.
  6. Πρόσθεσε μια μικρή περιγραφή με <p> κάτω την εικόνα.

Επέκταση (αν υπάρχει χρόνος)

Αλλάξτε  ύψος και πλάτος σε κάθε εικόνα.

χρησιμοποιείστε το πρότυπο-κώδικα παρακάτω (προσοχή πρέπει να βάλετε το σωστό path  της εικόνας σας, ή το όνομα της εικόνας;)

<!DOCTYPE html>
<html>
<head>
<title>              </title>
</head>

<h1>εισαγωγή εικόνας
<hr>

</body>
</html>

 Δραστηριότητα 2: “Μικρή γκαλερί φωτογραφιών”

Στόχος

Να δημιουργήσετε μια μικρή ιστοσελίδα που εμφανίζει πολλές εικόνες στη σειρά και να εξασκηθείτε στην οργάνωση του περιεχομένου με HTML.

📋 Οδηγίες

  1. Δημιούργησε ένα αρχείο gallery.html.
  2. Πρόσθεσε έναν τίτλο: <h1>Η Φωτογκαλερί μου</h1>
  3. Πρόσθεσε 2 εικόνες της επιλογής σου (τοπία, ζώα, φαγητά, κ.λπ.), μια από το διαδίκτυο με σύνδεσμο και μία να κατεβάσεις στον υπολογιστή σου..
  4. Κάτω από κάθε εικόνα γράψε μια λεζάντα χρησιμοποιώντας <p>.
  5. Ρύθμισε όλες τις εικόνες στο ίδιο πλάτος (π.χ. 200px).

 3. Εισαγωγή Υπερσυνδέσμου (Link)

Οι υπερσύνδεσμοι δημιουργούνται με την ετικέτα <a>.

Παράδειγμα:

<a href="https://www.google.com">Επισκέψου τη Google</a>

Επεξήγηση:

Ιδιότητα Περιγραφή
href η διεύθυνση (URL) που θα ανοίξει ο σύνδεσμος
target="_blank" ανοίγει τη σελίδα σε νέα καρτέλα

📘 Παράδειγμα με εικόνα ως σύνδεσμο:

  • υπερσύνδεσμος
<a href="https://www.google.com">
  • εικόνα ως υπερσύνδεσμος
<a href="https://www.wikipedia.org">
<img src="wiki.png" alt="Wikipedia">
</a>

Practise

εφαρμογή 2

χρησιμοποιείστε την παρακάτω σύνδεμο για να μεταβείτε στον ιστοτοπο που χρησιμοποιούμε για την εκμάθηση html.
                                                          👉  https://www.w3schools.com/html/html_links.asp
  • βρείτε μια ιστοσελίδα της αρεσκείας σας στο διαδίκτυο, αντιγράψτε τo url και βάλτε το στο μέσα στο  href                                                                                  (ενδεικτική σελίδα https://www.travel.gr/experiences/chora-skopeloy-taxidi-sti-mageytiki-mi/)       

Δραστηριότητα 3

οδηγίες

  1. Δημιούργησε ένα αρχείο ads.html.
  2. Προσθέστε έναν υπερσύνδεσμο που να οδηγεί στο e-shop με αθλητικά είδη..
  3. Πρόσθεσε 1 εικόνα προϊόντος ή εταιρείας  (π.χ. λογότυπα).
  4. Κάνε για την  εικόνα σύνδεσμο που οδηγεί στο αντίστοιχο site (π.χ. Nike, Apple, Samsung).
  5. Κάθε σύνδεσμος να ανοίγει σε νέα καρτέλα.   (target=”_blank  δίπλα από τη url)
  6. Πρόσθεσε τίτλο και υπότιτλο στη σελίδα σου.

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

ΣΧΕΔΙΟ ΜΑΘΗΜΑΤΟΣ

 

https://blogs.sch.gr/lenaanag/files/2025/10/SCHEDIO_MATHHMATOS1.pdf

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

Η HTML (HyperText Markup Language) είναι η βασική γλώσσα σήμανσης που χρησιμοποιείται για τη δημιουργία ιστοσελίδων. Δημιουργήθηκε στις αρχές της δεκαετίας του 1990 από τον Tim Berners-Lee, ερευνητή του CERN, ο οποίος επιδίωξε να βρει έναν τρόπο ανταλλαγής επιστημονικών πληροφοριών μεταξύ υπολογιστών μέσω υπερσυνδέσμων. Η πρώτη έκδοση της HTML αποτέλεσε τη βάση για την ανάπτυξη του Παγκόσμιου Ιστού (World Wide Web).

Σήμερα, η HTML συνεχίζει να εξελίσσεται και αποτελεί τη θεμελιώδη γλώσσα για την ανάπτυξη ιστοσελίδων, σε συνδυασμό με τις CSS (Cascading Style Sheets) και τη JavaScript.

🏗️ Δομή εγγράφου HTML

Κάθε ιστοσελίδα σε HTML έχει συγκεκριμένη δομή, που ξεκινά από την ετικέτα δήλωσης τύπου <!DOCTYPE html> και οργανώνεται μέσα στις ετικέτες <html>, <head> και <body>.

Παράδειγμα:

<!DOCTYPE html>
<html>
<head>
<title>Η πρώτη μου ιστοσελίδα</title>
</head>
<body>
<h1>Καλώς ήρθατε!</h1>
<p>Αυτή είναι η πρώτη μου ιστοσελίδα σε HTML.</p>
</body>
</html>

  • Το <head> περιέχει πληροφορίες για τη σελίδα (π.χ. τίτλος, χαρακτήρες, συνδέσεις με CSS).

  • Το <body> περιέχει το ορατό περιεχόμενο που προβάλλεται στον φυλλομετρητή.

  • Οι ετικέτες HTML έχουν αρχή και τέλος, π.χ. <p>...</p> για παράγραφο, <h1>...</h1> για επικεφαλίδα.

✨ Βασικές ετικέτες και ιδιότητες

Η HTML διαθέτει πολλές ετικέτες που καθορίζουν τη δομή και τη σημασία του περιεχομένου.
Μερικές βασικές είναι:

Ετικέτα Χρήση
<h1>…<h6> Επικεφαλίδες διαφόρων επιπέδων
<p> Παράγραφος κειμένου
<img src="..." alt="..."> Εισαγωγή εικόνας
<a href="...">...</a> Υπερσύνδεσμος
<br> Αλλαγή γραμμής
<hr> Οριζόντια γραμμή
<b>, <i>, <u> Έντονη, πλάγια και υπογραμμισμένη γραφή αντίστοιχα

Κάθε ετικέτα μπορεί να έχει ιδιότητες (attributes) που προσθέτουν πληροφορίες, όπως πλάτος (width), ύψος (height), εναλλακτικό κείμενο (alt) ή προορισμό συνδέσμου (href).

💻 Δραστηριότητα

Για να εξασκηθείτε, δημιουργήστε το δικό σας αρχείο index.html και αντιγράψτε ένα σύντομο κείμενο από το ιστολόγιο.
Προσπαθήστε να το μορφοποιήσετε χρησιμοποιώντας ετικέτες επικεφαλίδων, παραγράφων και γραμμών (<h1>, <p>, <br>, <hr>).

Στη συνέχεια, πηγαίνετε στη δραστηριότητα του φύλλου εργασίας:
👉 “Εισαγωγή στην HTML – Γίνε HTML ντετέκτιβ!”,
όπου θα εντοπίσετε και θα διορθώσετε σφάλματα σε έτοιμο κώδικα.

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ

Φύλλο_Εργασίας_Εισαγωγή_στην_HTML_Ελένη_Αναγνωστοπούλου

ΑΥΤΟΑΞΙΟΛΟΓΗΣΗ

https://docs.google.com/forms/d/1xb5veM-Pgc0KXD8dPBNg_9M0v4ioQP4eOwKJZF4Wbek/preview

  👉Εδώ θα βρεις μια σελίδα  όπου θα μετατρέπει κατευθείαν τις εντολές της HTML σε σελίδα

https://www.w3schools.com/html/html_basic.asp

 

Εισαγωγή_στην_HTML_Ελένη_Αναγνωστοπούλου

Το πρότυπο κώδικα είναι το παρακάτω:

<!DOCTYPE html>

<html>

<head>

<title>Η πρώτη μου ιστοσελίδα</title>

</head>

<body>

<h1>Καλώς ήρθατε!</h1>

<p>Αυτή είναι η πρώτη μου ιστοσελίδα σε HTML.</p>

</body>

</html>

 

Δημιουργείστε την παρακάτω σελίδα

Stigmiotypo othonhs 2025 10 12 000206

το κείμενο:

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