Μορφοποίηση ιστοσελίδων - CSS

 Στο παρόν μάθημα ασχολούμαστε με τη λογική της χρήσης της μορφοποίησης του κειμένου μέσω χρωμάτων και της χρήσης κοινών προτύποων για την εμφάνιση των ιστοσελίδων σε ένα διαδικτιακό τόπο (web site)

Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11

( http://ebooks.edu.gr/ebooks/v/html/8547/2714/Pliroforiki_A-Lykeiou_html-empl/index3_11.html )

Πολύτιμο εργαλείο μας είναι το site  https://www.w3schools.com/html/  

Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται στο https://mourikisper.blogspot.com/2020/04/online-editor-html.html 

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

Η σημασία του  όρου  "Cascading" ( "αλληλουχίες" ) έχει την έννοια ότι ένα "στυλ" που εφαρμόζεται σε ένα αντικείμενο, εφαρμόζεται αυτόματα και για όλα τα "παιδιά" του. Για παράδειγμα αν στο στοιχείο "body" μια HTML σελίδας (θυμηθείτε ότι όπως είδαμε σε προηγούμενο μάθημα αναφέρεται στο σύνολο του περιεχομένου της ιστοσελίδας) ορίσουμε ότι χρώμα του κειμένου είναι Μπλε, αυτό το χαρακτηριστικό θα "κληρονομηθεί" σε όλα τα στοιχεία που βρίσκονται μέσα σε αυτό στοιχείο (εκτός αν για κάποιο από αυτά ορίσουμε ένα άλλο χρώμα).

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

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

• με την παρακάτω ετικέτα link, μέσα στην ετικέτα head (προτεινόμενος τρόπος)
  <link rel="stylesheet" media="screen" href="to-styl-mou.css">
• με ενσωμάτωση των κανόνων στο έγγραφο HTML με την ετικέτα style
  <style> h1 { color: red; } </style>

Ενά παράδειγμα αυτού μπορούμε να δούμε στο https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal 

Χαρακτηριστικοί κανόνες μορφοποίησης

Οι κανόνες μορφοποίησης CSS συντάσσονται σε μορφή απλού κειμένου και αποτελούνται από έναν «επιλογέα» και κανόνες (μέσα σε αγκύλες { και }) που διαχωρίζονται από το ελληνικό ερωτηματικό «;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:».

P { color: green; border-bottom: 1px solid black; padding: 10px; }

Το παραπάνω παράδειγμα καθορίζει ότι όλες οι παράγραφοι (P) θα έχουν χρώμα κειμένου πράσινο, κάτω περίγραμμα πάχους 1 pixel και περιθώριο 10 px από κάθε πλευρά της παραγράφου.

Οι «επιλογείς» είναι ονόματα ετικετών της γλώσσας HTML (όπως P, H1, div) αλλά συνήθως χρησιμοποιούνται σε συνδυασμό με κλάσεις ή κωδικούς αναγνώρισης. Αρκεί να γνωρίζουμε ότι οι κλάσεις (ιδιότητα class την ετικετών) ομαδοποιούν κάποια στοιχεία, ενώ οι κωδικοί αναγνώρισης (ιδιότητα id των ετικετών) χρησιμοποιούνται για τον μοναδικό προσδιορισμό κάποιων στοιχείων. Για παράδειγμα:

P#title { color: red; font-size: 20px; }

Πέρα από τους κανόνες για τις παραγράφους, ειδικά για την παράγραφο με κωδικό αναγνώρισης title, το χρώμα γραμμάτων θα είναι κόκκινο και το μέγεθος 20pixel.

P.orismos { padding-left: 20px; border-left: 2px; }

Εκτός από τους κανόνες για τις παραγράφους, για όλες τις παραγράφους με κλάση orismos θα υπάρχει περιθώριο αριστερά 20pixel και περίγραμμα αριστερά 2pixel.

Περισσότερα στοιχεία για τη CSS μπορουν να βρεθούν στο https://www.w3schools.com/html/html_css.asp 

ΔΡΑΣΤΗΡΙΟΤΗΤΑ

Στο https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal    δοκιμάστε να δημιουργήσετε μια μορφοποίηση της ιστοσελίδας ώστε να έχει ένα ελαφρύ κίτρινο (LightYellow)  background, οι παράγραφοι να έχουν Μπλε χρώμα (blue),  οι επικεφαλίδες Η1 πράσινο χρώμα (green) και οι επικεφαλίδες Η2 μωβ χρώμα (magenta).

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

Αν το επιθυμείτε, μπορείτε να κάνετε άλλους συνδυασμούς χρωμάτων ή μορφοποιήσεων

Μια πλήρη περιγραφή των διαθέσιμων χρωμάτων μπορεί να βρεθεί στο https://www.w3schools.com/html/html_colors.asp   

HTML5 και χρήση Video

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

Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11

( http://ebooks.edu.gr/ebooks/v/html/8547/2714/Pliroforiki_A-Lykeiou_html-empl/index3_11.html )

Πολύτιμο εργαλείο μας είναι το site  https://www.w3schools.com/html/  

Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται στο https://mourikisper.blogspot.com/2020/04/online-editor-html.html 

Η HTML5 είναι η τελευταία εξέλιξη της γλώσσας HTML η οποία χρησιμοποιείται εκτενώς και στη δημιουργία εφαρμογών διαδικτύου για φορητές συσκευές. Η HTML5 προσθέτει νέα χαρακτηριστικά δομής και σύνταξης, δίνοντας ιδιαίτερο βάρος στη σημασιολογία των ετικετών, καθώς και νέες δυνατότητες που περιορίζουν την ανάγκη χρήσης πρόσθετων (plug-ins) στα προγράμματα πλοήγησης. Ξεχωρίζουν μεταξύ άλλων:

• νέες ετικέτες για σημασιολογικό διαχωρισμό των μερών του εγγράφου, όπως οι header, section, article και nav.
• νέες ετικέτες για εισαγωγή ήχου και βίντεο, τις audio και video αντίστοιχα.
• νέες δυνατότητες σχεδίασης (canvas), μεταφοράς και απόθεσης (drag-and-drop), αποθήκευσης απλών δεδομένων (web storage) και λειτουργίας εκτός σύνδεσης (offline web applications).
• εμπλουτισμένα στοιχεία για φόρμες (όπως ημερομηνίες, ηλεκτρονικές διευθύνσεις, εύρος τιμών) και πινακοποιημένα δεδομένα καθώς και ενσωματωμένη διαχείριση διανυσματικών γραφικών μορφής SVG.

Ας ασχοληθούμε με την εισαγωγή ενός βίντεο σε μια ιστοσελίδα. Η HTML5 επιτρέπει την απευθείας χρήση video στις μορφές .mp4 (αλλά και .ogg και πρόσφατα .webm) 

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

<video 

source src=https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4

 width="480" height="270"  controls> </video>

Παρατηρήστε στο παράδειγμα:

• την ιδιότητα src που περιέχει τη διεύθυνση του αρχείου βίντεο 
• (στο παράδειγμά μας είναι https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4 )
• τις ιδιότητες width και height για τον ορισμό των διαστάσεων (480 πλάτος και 270 ύψος στο παράδειγμά μας)
• την ιδιότητα controls για την εμφάνιση των στοιχείων ελέγχου  (δηλαδή να αρχίζει να παίζει, να σταματά κλπ)
• το κλείσιμο της ετικέτας video με </video>

ΠΡΟΣΟΧΗ το βιβλίο μας έχει ένα ΤΥΠΟΓΡΑΦΙΚΟ ΛΑΘΟΣ και στο παράδειγμα που έχει, έχουν παραλείψει το  <source>  tag, η σωστή σύνταξη φαίνεται στο επόμενο παράδειγμα που έχει για την ενσωμάτωση του ήχου

<audio controls>
        <source src="ixos.mp3" type="audio/mpeg" />

</audio>  

Περισσότερα για τη χρήση βίντεο μπορούν να βρεθούν στο https://www.w3schools.com/html/html5_video.asp

Πολύ συχνά ωστόσο τα βίντεο που θέλουμε να χρησιμοποιήσουμε μπορεί να βρίσκονται στο YouTube  ή σε κάποια ανάλογη υπηρεσία, όπως πχ το Vimeo

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

Ας δοκιμάσουμε να ενσωματώσουμε μια θεατρική παράσταση (Ο ΕΧΘΡΟΣ ΤΟΥ ΛΑΟΥ - ΕΡΡΙΚΟΣ ΙΨΕΝ) (εσείς μπορείτε να βρείτε κι οποιοδήποτε άλλο βίντεο...)

Για να το κάνουμε αυτό ακολουθούμε τα παρακάτω βήματα

1) Πάμε στο youtube και αναζητούμε το βίντεο που θέλουμε (στο παράδειγμα γράφουμε  " ο εχθρος του λαου ". Πατάμε στο πρώτο βίντεο που βγάζει

2) Πατάμε το κουμπί Share  

3) Εμφανίζεται ένα μικρό παράθυρο κι επιλέγουμε το "Embed" (δηλαδή ενσωμάτωση)

4) Στο παράθυρο που εμφανίζεται πατάμε το κουμπί copy (αντιγραφή) 

5) Πάμε στην ιστοσελίδα μας και κάνουμε επικόλληση 

(Για το συγκεκριμένο παράδειγμα μπορείτε να βάλετε κατευθείαν το ακόλουθο)

<iframe width="560" height="315" 

   src="https://www.youtube.com/embed/HUgZyQIxFAw" frameborder="0"  allowfullscreen> 

</iframe>

ΔΡΑΣΤΗΡΙΟΤΗΤΑ

Στο https://www.w3schools.com/html/    δοκιμάστε να κάνετε την εισαγωγή ενός βίντεο mp4 και την εισαγωγή ενός βίντεο από το YouTube. Στη συνέχεια, οπως και στις ασκήσεις   των προηγούμενων 2 εβδομάδων στείλτε μέσω email τη σελίδα που δημιουργήσατε. 

Επειδή στην παρούσα φάση είναι ίσως κάπως δύσκολο να βρεθεί βίντεο mp4 μπορείτε να χρησιμοποιήσετε ως πηγή το https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4

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

 

Συνεχίζουμε τη γνωριμία μας με το στυλοβάτη του Παγκοσμίου Ιστού, την HTML.

Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11

( http://ebooks.edu.gr/ebooks/v/html/8547/2714/Pliroforiki_A-Lykeiou_html-empl/index3_11.html )

Πολύτιμο εργαλείο μας είναι το site  https://www.w3schools.com/html/  

Συμπληρωματικό υλικό μπορούμε να βρούμε στο http://aesop.iep.edu.gr/node/7259/1894 

Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται πατώντας εδώ 

Όπως αναφέρει και το βιβλίο μας μερικές βασικές "ετικέτες" (tags) φαίνονται  ακολούθως

<HTML>...<⁄HTML>	Ορίζει την αρχή και το τέλος μιας ιστοσελίδας.
<HEAD>...<⁄HEAD>	Ορίζει το τμήμα εκείνο της ιστοσελίδας στο οποίο αναφέρονται διαχειριστικής φύσεως πληροφορίες που αφορούν στο περιεχόμενο της ιστοσελίδας. Οι πληροφορίες αυτές δεν εμφανίζονται από τον φυλλομετρητή.
<BODY>...<⁄BODY>	Ορίζει το περιεχόμενο της ιστοσελίδας.
<TITLE>...<⁄TITLE>	Ορίζει τον τίτλο της.
<P>...<⁄P>	Ορίζει παράγραφο.
<BR>	Δηλώνει αλλαγή γραμμής.
<IMG>	Ορίζει την εισαγωγή κάποιας εικόνας -image- και των παραμέτρων που αφορούν στη θέση της, το μέγεθός της, κ.ά.
<A HREF="URL" >...<⁄A>	Ορίζει δεσμό με ιστοσελίδα που βρίσκεται στο URL.

Για να γίνει περισσότερο κατανοητό, μπορούμε να το φανταστούμε όπως φαίνεται στην επόμενη εικόνα

Μια πολύ καλή πηγή για τις διαθέσιμες ετικέτες της HTML μπορεί να βρεθεί στο https://www.wlearn.gr/etiketes/ 

1) Χρησιμοποιώντας το https://www.w3schools.com/html/   

δοκιμάζουμε να τροποποιήσουμε το παράδειγμα που βγάζει ωστε δούμε πως δουλεύουν τα "Headers" (H1 Μέχρι Η6). Μπορεί να χρησιμοποιηθεί το παράδειγμα του βιβλίου μας (ή ακόμα καλύτερα μια δική σας εκδοχή ) 

<Η1>Γαλαξίας</Η1>
<Η2>Γη </Η2>
<Η3>Ευρώπη </Η3>
<Η4>Ελλάδα </Η4>
<Η5>Κρήτη </Η5>
<Η6>Ηράκλειο </Η6>  

Στο σημείο αυτό πρέπει να τονίσουμε ότι τα H1-H6 δεν λειτουργούν μόνο σε "διακοσμητικό" επίπεδο (δηλαδή μικρά ή μεγάλα γράμματα), αλλά σε εννοιολογικό. Στο παράδειγμα του βιβλίου ο "Γαλαξίας" περιέχει πχ τη "Γη" ή οποία περιέχει την "Ευρώπη" κ.ο.κ

Άρα το H1 προορίζεται για το "πιο γενικό" και το H6 για το "πιο ειδικό". Με βάση αυτές τις παρατηρήσεις προσπαθήστε να κάνετε τη δική σας ιεραρχία.

Η ιεραρχία επίσης δεν περιορίζεται σε ένα στοιχείο μόνο. Για παράδειγμα εκτός από τη Γη στο ίδιο επίπεδο ιεραρχίας τι άλλο θα ταίριαζε? (Προσπαθήστε να σκεφτείτε κάποιους από τους υπόλοιπους πλανήτες του Ηλιακού μας συστήματος)

Στη συνέχεια θα δούμε πως μπορούμε να χρησιμοποιήσουμε την έννοια της παραγράφου.

Η παράγραφος ορίζεται με τη βοήθεια της  ετικέτας <p>

Ορισμός και χρήση: Η ετικέτα <p> ομαδοποιεί το κείμενο που βρίσκεται μέσα στις ετικέτες αρχής και τέλους σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετά το τέλος αυτής. 

Ετικέτα τέλους: </p>

Ας δοκιμάσουμε να προσθέσουμε αυτές τις παραγράφους κάτω από την ενότητα "Γη"

<p>Η Γη είναι ο Πλανήτης μας</p>
<p>Το μεγαλύτερο μέρος της Γης καλύπτεται από νερό</p>
<p>Η ξηρά χωρίζεται σε Ηπείρους</p>

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

Αυτό θα είναι η εργασία σας για το επόμενο μάθημα.

ΟΛΑ ΑΥΤΑ ΜΠΟΡΟΥΝ ΝΑ ΓΙΝΟΥΝ ΚΑΙ ΑΠΟ ΚΙΝΗΤΟ / TABLET !!!

Μείωση της εξεταστέας ύλης των Πανελλαδικώς εξεταζόμενων μαθημάτων 2021

 Δείτε εδώ την ανακοίνωση του Υπουργείου

Η Υπουργική απόφαση για ΓΕ.Λ σε μορφή pdf.