Μάθημα : ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ

ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ

0501007560 - ΒΑΣΙΛΕΙΟΣ ΠΡΟΞΕΝΙΑΣ

Ενότητες μαθήματος

Τι είναι η CSS

microprojects html & css Εισαγωγή στην HTML

Η CSS (Cascading Style Sheets) είναι μια γλώσσα στυλ που χρησιμοποιείται για τη μορφοποίηση ενός εγγράφου που έχει γραφτεί σε HTML (Hypertext Markup Language).

Η CSS χρησιμοποιείται για να:

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

Είναι σημαντική η CSS γιατί;

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

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

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

Η CSS εφαρμόζεται σε HTML στοιχεία και μπορεί να προστεθεί με τρεις (3) τρόπους:

  1. Inline CSS (απευθείας μέσα σε HTML ετικέτες με το style attribute)

  2. Εσωτερικό CSS (μέσα σε <style> μέσα στο <head> του HTML εγγράφου)

  3. Εξωτερικό CSS (ξεχωριστό αρχείο .css, το οποίο συνδέεται με το HTML)

 

Δραστηριότητα 1 - Χρήση inline CSS

Θα δημιουργήστε μια απλή ιστοσελίδα με την βοήθεια της HMTL και θα την διαμορφώσετε με την χρήση inline CSS

  1.  Ανοίξτε έναν editor (σημειωματάριο/notepad++) και γραψτε τον παρακάτω κώδικα
1 <!DOCTYPE html> δηλώνει στον φυλλομετρητή οτι το αρχείο περιέχει γραμμές γλώσσας HTML5
2 <html lang="el"> ενημερώνει τις μηχανές αναζήτησης και τα προγραμματα sceen readers οτι η ιστοσελίδα περιέχει ελληνικά
3  <head>  
4 <meta charset="UTF-8"> εξασφαλίζει οτι θα εμφανιστούν τα σύμβολα  του ελληνικού αλφάβητου και δεν θα εμφανιζονται οι ελληνικοί χαρακτήρες ως : ����?" ή "ανεστÏ�οφη".
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">

είναι ιδιαίτερα σημαντική για τη σωστή προσαρμογή της ιστοσελίδας σε κινητές συσκευές και tablets.
6 <title>Η πρώτη μου σελίδα με inline CSS</title>  
7 </head>  
8 <body style="background-color: lightgray; font-family: Arial, sans-serif; text-align: center;">  
9 <h1 style="color: darkblue; font-size: 28px;">Καλώς ήρθατε στη σελίδα μου!</h1>  
10 <p style="color: darkred; font-size: 18px; width: 60%; margin: auto;">  
11 Αυτή είναι μια απλή ιστοσελίδα που χρησιμοποιεί **μόνο** inline CSS για τη διαμόρφωση.  
12 </p>  
13 <ul style="list-style-type: none; padding: 0;">  
14 <li style="color: green; font-size: 20px; margin: 10px;">✔ Μαθαίνουμε HTML</li>  
15 <li style="color: blue; font-size: 20px; margin: 10px;">✔ Προσθέτουμε CSS</li>  
16 <li style="color: orange; font-size: 20px; margin: 10px;">✔ Χρησιμοποιούμε inline styles</li>  
17 </ul>  
18 </body>  
19 </html>  

 

2. Αποθηκεύστε το αρχείο σας με όνομα Δραστηριότητα 1 CSS.html μέσα στον φάκελο σας

3. Ανοιξτε την ιστοσελίδα με τον φυλλομετρητής σας

Παρατηρήστε οτι

  • η style βρίσκεται μέσα σε ετικέτες και έχει μορφή
    style= "<ιδιότητα1>:<τιμη1>; <ιδιότητα1>: <τιμη1>; ....<ιδιότηταΝ>: <τιμηΝ>;" 
  • η style έχει διάφορες ιδιότητες που μορφοποιούν την κάθε ετικέτα:
    backgound-color (για την μορφοποίηση του χρώματος φόντου),
    font-family (για την μορφοποίηση της γραμματοσειράς/ρων),
    text-align (για την στοίχιση του κειμένου).
  • οι ιδιοτητες παίνρουν τιμές με την μορφή <ιδιοτητα>: <τιμή>

  • μπορούν να υπάρχουν πολλές ιδιότητες μέσα στην style οι οποίες διαχωρίζονται με το ;
    style="background-color: lightgray; font-family: Arial, sans-serif; text-align: center;"

 

Αλλάξτε τα χρώματα

- του φόντου (backgound-color: aqua)

- της γραμματοσειράς της <h1> color: red

- της γραμματοσειράς της <p>

- των στοιχείων <li>

 

Αλλάξτε το μέγεθος της γραμματοσειράς της <h1> σε 40px (font-size: 40px)

Αλλάξτε το μέγεθος της γραμματοσειράς της <p> σε 30px (font-size: 30px)

Αλλάξτε το πλάτος <p> σε 25% (width: 25%)

Αλλάξτε το είδος των κουκίδων σε circle (list-style-type: circle)

(θα παρατηρήσετε 3 δισκους στα αριστερά της οθόνης που στυλιστικα δεν ειναι και το καλυτερο αποτέλεσμα. για διόρθωση προσθέτουμε την ιδιότητα margin-inline με τιμή 40% επομένως η style θα αλλάξει σε
style="list-style-type: circle;padding: 15px;margin-inline: 40%;"  )

 

 

 

Δραστηριότητα 2 - Χρήση εσωτερικού CSS

Στην δραστηριότητα αυτή θα μεταφέρετε τα inline στυλ σε εσωτερικά (Internal) στυλ

1- Δημιουργήστε ένα νέο αρχείο της html και ονομάστε το Δραστηριότητα 2 CSS.html

2- Αντιγράψτε και επικολλήστε το περιεχόμενο του αρχείου Δραστηριότητα 1 CSS.html μέσα στο αρχείο Δραστηριότητα 2 CSS.html.

3- Αφαιρέστε όλα τα inline στυλ που υπάρχουν.

4- Στην περιοχή του head δημιουργήστε τα παρακάτω στυλ μέσα σε μια ετικέτα <style>

-------------------------------------------------------------------

<style>

body {

     background-color: lightgray;

     font-family: Arial, sans-serif;

     text-align: center;

}

 

h1 {

     color: darkblue;

     font-size: 28px;

}

 

p {

     color: darkred;

     font-size: 18px;

     width: 60%;

     margin: auto;

}

 

ul {

     list-style-type: none;

     padding: 0;

}

 

li {

      color: green;

      font-size: 20px;

      margin: 10px;

}

</style>

-------------------------------------------------------------------

 

Ερώτηση: Πώς θα εμφανίσετε και πάλι με διαφορετικά χρώματα τις φράσεις

Μαθαινουμε Html  ( πρασινο χρώμα: green)

Προσθέτουμε CSS (μπλέ χρώμα: blue)

Χρησιμοποιούμε inline styles (πορτοκαλί χρώμα: orange)

 

Απάντηση 1 : Μπορείτε να κάνετε χρήση internal στυλ για το κάθε li στοιχείο ξεχωριστά

 

Απάντηση 2: μπορείτε να εκμεταλευτείτε τις δυνατότητες κληρονομικότητας της CSS ως εξής:

 θα αντιμετωπίσετε το κάθε <li> στοιχείο σαν "παιδί" του στοιχείου <ul>

δηλαδή το <ul> είναι ο γονέας που έχει 3 παιδιά <li>

το στοιχείο <li>✔ Μαθαίνουμε HTML</li> είναι το 1ο παιδί - 1st child

το στοιχείο <li>✔ Προσθέτουμε CSS</li> είναι το 2ο παιδί  - 2nd child

το στοιχείο <li>✔ Χρησιμοποιούμε inline styles</li> είναι το 3ο παιδί  - 3nd child

 

το <style> θα γίνει

-------------------------------------------------------------------

<style>
body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
            text-align: center;
        }
 
        h1 {
            color: darkblue;
            font-size: 28px;
        }
 
        p {
            color: darkred;
            font-size: 18px;
            width: 60%;
            margin: auto;
        }
 
        ul {
            list-style-type: none;
            padding: 0;
        }
 
        ul li {
            font-size: 20px;
            margin: 10px;
        }
 
         ul li:nth-child(1){
             color:green;
        }
 
         ul li:nth-child(2) {
            color: blue;
        }
 
         ul li:nth-child(3){
            color:orange;
        }

</style>

-------------------------------------------------------------------

Δραστηριότητα 3 - Χρήση εξωτερικού CSS

Στην δραστηριότητα αυτή θα διαχωρίσετε τον html κώδικα απο τον css, 

θα συνδέσετε την ιστοσελίδα με ένα εξωτερικό αρχείο που θα περιέχει τα στυλ  (external) 

1- Δημιουργήστε ένα νέο αρχείο της html και ονομάστε το Δραστηριότητα 3 CSS.html 

2- Αντιγράψτε και επικολλήστε το περιεχόμενο του αρχείου Δραστηριότητα 2 CSS.html μέσα στο αρχείο Δραστηριότητα 3 CSS.html.

3- Αφαιρέστε τα internal στυλ που υπάρχουν, στην περιοχή <style>....</style>.

4- Στην περιοχή του head προσθέστε την γραμμή:

<link rel="stylesheet" href="styles.css">

5- Δημιουργήστε το αρχείο styles.css και προσθέστε τα στυλ 

 

-------------------------------------------------------------------

body {

     background-color: lightgray;

     font-family: Arial, sans-serif;

     text-align: center;

}

 

h1 {

     color: darkblue;

     font-size: 28px;

}

 

p {

     color: darkred;

     font-size: 18px;

     width: 60%;

     margin: auto;

}

 

ul {

     list-style-type: none;

     padding: 0;

}

 

li {

      color: green;

      font-size: 20px;

      margin: 10px;

}

 

-------------------------------------------------------------------

Ερώτηση: Που πρέπει να γίνουν οι αλλαγές ώστε:

-να εμφανίσετε και πάλι με διαφορετικά χρώματα τις φράσεις

Μαθαινουμε Html  ( πρασινο χρώμα: green)

Προσθέτουμε CSS (μπλέ χρώμα: blue)

Χρησιμοποιούμε inline styles (πορτοκαλί χρώμα: orange)

 

Απάντηση : οι αλλαγές πρέπει να γίνουν στο αρχείο styles.css