HTML 5 ΚΑΙ JAVASCRIPT ΤΑ ΠΡΩΤΑ ΒΗΜΑΤΑ ΣΤΟ WEB DEVELOPMENT

Citation preview

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

Προγράμματα Συμπληρωματικής Εκπαίδευσης

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1920 - HTML 5 ΚΑΙ JAVASCRIPT: ΤΑ ΠΡΩΤΑ ΒΗΜΑΤΑ ΣΤΟ WEB DEVELOPMENT

1

© Copyright 2016, Εθνικό και Καποδιστριακό Πανεπιστήμιο Αθηνών, Π. Ε. Πετράκης. Η έντυπη, ηλεκτρονική και γενικά κατά οποιοδήποτε τρόπο αναπαραγωγή, δημοσίευση ή χρησιμοποίηση όλου ή μέρους του υλικού έργου αυτού, απαγορεύεται χωρίς την έγγραφη έγκριση του κατόχου των πνευματικών δικαιωμάτων του έργου.

2

Το παρόν έντυπο αποτελεί τμήμα του εκπαιδευτικού υλικού του μαθήματος “HTML 5 και JavaScript: Τα Πρώτα Βήματα στο Web Development” που υπάγεται στο Πρόγραμμα Συμπληρωματικής εξ Αποστάσεως Εκπαίδευσης με τίτλο “Εισαγωγή στην HTML5”. Αποτελεί απαραίτητο συμπλήρωμα του ηλεκτρονικού υλικού που βρίσκεται στην πλατφόρμα και αναπόσπαστο κομμάτι της εκπαιδευτικής διαδικασίας. Η πρώτη διδακτική ενότητα εισάγει τους εκπαιδευόμενους στη χρησιμότητα και τη δομή της γλώσσας προγραμματισμού για ιστοσελίδες HTML5, καθώς και τη λογική πάνω στην οποία είναι χτισμένη η HTML5 (ετικέτες της HTML). Στη συνέχεια θα γνωρίσουν τα εργαλεία τα οποία μπορούν να χρησιμοποιήσουν για να γράψουν κώδικα σε HTML5 και τους τρόπους που θα μπορούν να γράφουν κώδικα και να πειραματίζονται αλλάζοντάς τον. Στη δεύτερη διδακτική ενότητα, οι εκπαιδευόμενοι θα μάθουν να γράφουν και να μορφοποιούν κείμενο σε κώδικα HTML5. Πιο αναλυτικά θα μάθουν να χρησιμοποιούν ετικέτες για τις παραγράφους, να γράφουν κείμενο μέσα σε αυτές και να το μορφοποιούν. Στη μορφοποίηση περιλαμβάνονται η επιλογή γραμματοσειράς, μεγέθους και χρώματος, η χρήση bold και italic, η χρήση highlight κτλ. Επίσης οι εκπαιδευόμενοι θα μάθουν να τοποθετούν το κείμενό τους σε συγκεκριμένο σημείο της ιστοσελίδας.

Στη

συνέχεια

οι

εκπαιδευόμενοι

θα

μάθουν

να

χρησιμοποιούν

διατεταγμένες και μη διατεταγμένες λίστες καθώς και να αλλάζουν τον τρόπο αρίθμησης στις διατεταγμένες και τη μορφή των κουκίδων στις μη διατεταγμένες. Στην τρίτη διδακτική ενότητα οι εκπαιδευόμενοι θα μάθουν να εισάγουν εικόνες στην ιστοσελίδα που φτιάχνουν. Πιο αναλυτικά οι εκπαιδευόμενοι θα μάθουν να τοποθετούν την εικόνα σε συγκεκριμένο σημείο της ιστοσελίδας και να αλλάζουν το μέγεθός της. Επίσης θα μάθουν να χρησιμοποιούν το Canvas της HTML5 για να σχεδιάζουν εντός της ιστοσελίδας. Δηλαδή, θα μπορούν να σχεδιάζουν γραμμές και σχήματα και να επιφέρουν και τις κατάλληλες τροποποιήσεις. Τέλος, θα μάθουν να σχεδιάζουν και να χρησιμοποιούν συνδέσεις προς άλλες σελίδες, emails, αναπαραγωγή ήχου, video κτλ. Με την τέταρτη διδακτική ενότητα οι εκπαιδευόμενοι θα μάθουν τη δομή, τους κανόνες σύνταξης, τους τελεστές και τη χρησιμότητα της JavaScript. Θα μάθουν, επίσης, για τη βιβλιοθήκη JQuery Library της JavaScript, καθώς και τη λειτουργία του DOM. Με την πέμπτη διδακτική ενότητα οι εκπαιδευόμενοι θα μάθουν τις βασικές εντολές της JavaScript. Θα μάθουν, επίσης, να ορίζουν και να καλούν συναρτήσεις, καθώς και να δημιουργούν και να ενσωματώνουν scripts στις ιστοσελίδες. Τη συγγραφή του συγκεκριμένου εκπαιδευτικού υλικού πραγματοποίησε ο κ. Βαγγέλης Στελλάτος,

εξωτερικός

συνεργάτης

του

Προγράμματος

Συμπληρωματικής

εξ

Αποστάσεως Εκπαίδευσης του Εθνικού και Καποδιστριακού Πανεπιστημίου Αθηνών.

3

ΠΕΡΙΕΧΟΜΕΝΑ ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML5: ΔΟΜΗ ΚΑΙ ΔΥΝΑΤΟΤΗΤΕΣ ......................... 5 ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ................................................................................................. 7 ΥΠΟΕΝΟΤΗΤΑ 1. ΤΙ ΕΙΔΟΥΣ ΓΛΩΣΣΑ ΕΙΝΑΙ Η HTML5; ........................................................ 8 ΥΠΟΕΝΟΤΗΤΑ 2. ΔΟΜΗ ΚΑΙ ΔΥΝΑΤΟΤΗΤΕΣ. ................................................................... 10 ΥΠΟΕΝΟΤΗΤΑ 3. ΧΡΗΣΗ ΤΩΝ ΕΤΙΚΕΤΩΝ ΤΗΣ HTML5 ........................................................ 17 ΥΠΟΕΝΟΤΗΤΑ 4. Η ΠΡΩΤΗ ΜΟΥ ΣΕΛΙΔΑ ΜΕ ΤΟ “HELLO WORLD” KAI ΚΑΤΑΣΚΕΥΗ BUTTONS ΚΑΙ NAVIGATION BAR ...................................................................................... 21 ΣΥΝΟΨΗ .............................................................................................................................. 27 ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 2. ΕΙΣΑΓΩΓΗ ΚΑΙ ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ .................................. 29 ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ............................................................................................... 31 ΥΠΟΕΝΟΤΗΤΑ 1. ΔΗΜΙΟΥΡΓΙΑ ΠΑΡΑΓΡΑΦΟΥ ............................................................... 32 ΥΠΟΕΝΟΤΗΤΑ 2. ΕΙΣΑΓΩΓΗ ΚΕΙΜΕΝΟΥ ............................................................................ 48 ΥΠΟΕΝΟΤΗΤΑ 3. ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ ................................................................ 59 ΥΠΟΕΝΟΤΗΤΑ 4. ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΤΕΤΑΓΜΕΝΩΝ ΚΑΙ ΜΗ ΔΙΑΤΕΤΑΓΜΕΝΩΝ ΛΙΣΤΩΝ, DROPDOWN LISTS, RADIO BUTTONS, TEXT EFFECTS, ΕΙΣΑΓΩΓΗ METER ΚΑΙ PROGRESS BAR..................................................................................................................................... 65 ΣΥΝΟΨΗ .............................................................................................................................. 75 ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 3. ΕΙΣΑΓΩΓΗ ΚΑΙ ΜΟΡΦΟΠΟΙΗΣΗ ΕΙΚΟΝΑΣ ..................................... 77 ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ............................................................................................... 79 ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ............................................................................... 80 ΥΠΟΕΝΟΤΗΤΑ 2. ΧΡΗΣΗ CANVAS ΤΗΣ HTML5 ................................................................. 95 ΥΠΟΕΝΟΤΗΤΑ 3. ΥΠΕΡΣΥΝΔΕΣΕΙΣ (LINKS): ΠΩΣ ΦΤΙΑΧΝΟΥΜΕ LINKS ΓΙΑ EMAILS, ΑΛΛΕΣ WEB PAGES ..................................................................................................................... 137 ΣΥΝΟΨΗ ............................................................................................................................ 144 ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 4. ΔΟΜΗ ΤΗΣ JAVASCRIPT ............................................................... 145 ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ............................................................................................. 147 ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ JAVASCRIPT ............................................................. 148 ΥΠΟΕΝΟΤΗΤΑ 2. ΕΙΣΑΓΩΓΗ ΚΕΙΜΕΝΟΥ, ΣΥΝΘΗΚΕΣ ΚΑΙ ΒΡΟΧΟΙ ΕΠΑΝΑΛΗΨΗΣ ΤΗΣ JAVASCRIPT .................................................................................................................... 152 ΥΠΟΕΝΟΤΗΤΑ 3. ΑΛΦΑΡΙΘΜΗΤΙΚΕΣ, ΠΙΝΑΚΕΣ ΚΑΙ JQUERY LIBRARY .......................... 166 ΣΥΝΟΨΗ ............................................................................................................................ 183 ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 5. ΒΑΣΙΚΕΣ ΕΝΤΟΛΕΣ ΤΗΣ JAVASCRIPT ............................................. 185 ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ............................................................................................. 187 ΥΠΟΕΝΟΤΗΤΑ 1. ΣΥΝΑΡΤΗΣΕΙΣ ΣΤΗ JAVASCRIPT .......................................................... 188 ΥΠΟΕΝΟΤΗΤΑ 2. JAVASCRIPT EVENTS........................................................................... 197 ΥΠΟΕΝΟΤΗΤΑ 3. ΔΗΜΙΟΥΡΓΙΑ ΑΝΤΙΚΕΙΜΕΝΩΝ ΚΑΙ ΠΑΡΑΔΕΙΓΜΑΤΑ ......................... 221 ΣΥΝΟΨΗ ............................................................................................................................ 232 ΒΙΒΛΙΟΓΡΑΦΙΑ ................................................................................................................. 233

4

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

Προγράμματα Συμπληρωματικής Εκπαίδευσης

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1920 - HTML 5 ΚΑΙ JAVASCRIPT: ΤΑ ΠΡΩΤΑ ΒΗΜΑΤΑ ΣΤΟ WEB DEVELOPMENT

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML5: ΔΟΜΗ ΚΑΙ ΔΥΝΑΤΟΤΗΤΕΣ

5

6

Εισαγωγικές Παρατηρήσεις Στην πρώτη υποενότητα θα παρουσιαστούν η προέλευση, τα πρότυπα, και οι προδιαγραφές της HTML5. Επίσης θα γίνει αναφορά στα εργαλεία που χρειάζεται ένας Web Developer για να προγραμματίσει σε HTML5. Στη δεύτερη υποενότητα θα αναλυθεί η δομή ενός HTML αρχείου και θα δοθούν οδηγίες για την εγκατάσταση και τον τρόπο λειτουργίας δύο HTML editors, το Notepad++ και το Atom. Στην τρίτη υποενότητα θα αναλυθούν τα στοιχεία Header, Footer καθώς και τα βήματα για τη δημιουργία πίνακα με κώδικα HTML5. Στην τέταρτη υποενότητα θα παρουσιαστεί ο τρόπος δημιουργίας της πρώτης σελίδας του εκπαιδευόμενου “Hello World”. Στην τελευταία υποενότητα θα παρουσιαστούν οι τρόποι δημιουργίας buttons τα οποία θα χρησιμοποιηθούν στις ιστοσελίδες.

7

ΥΠΟΕΝΟΤΗΤΑ 1. ΤΙ ΕΙΔΟΥΣ ΓΛΩΣΣΑ ΕΙΝΑΙ Η HTML5; 1.1 Προέλευση Η HTML5 (Hyper Text Markup Language) είναι μία γλώσσα προγραμματισμού η οποία χρησιμοποιείται για την κατασκευή ιστοσελίδων. Τα εκτελέσιμα αρχεία της HTML είναι αρχεία τύπου txt με τη διαφορά ότι αντί να έχουν κατάληξη (extension). txt έχουν κατάληξη. HTML. Παράδειγμα: index.HTML. Τα αρχεία με την κατάληξη HTML μπορούν να διαβαστούν και να εκτελεστούν από τους φυλλομετρητές (Browsers) όπως είναι οι Mozilla, Chrome, Opera, Safari κ.α. Η γλώσσα HTML5 χρησιμοποιεί ετικέτες (tags) εκ των οποίων οι περισσότερες χρησιμοποιούνται ανά δυο. Μια για να σημάνει την έναρξη μιας λειτουργίας

και

. Η διαφορά τους είναι ότι για τη λήξη της λειτουργίας

μία για να σημάνει τη λήξη

γράφουμε επιπλέον τον τελεστή slash (/). Για παράδειγμα η ετικέτα

σηματοδοτεί την αρχή μιας παραγράφου ενώ η ετικέτα

σηματοδοτεί το τέλος αυτής.

1.2 Πρότυπα-Προδιαγραφές Όπως είναι εύκολα κατανοητό, η γλώσσα HTML για να μπορεί να εκτελείται από όλους τους

Browsers

με

υψηλά

ποσοστά

συμβατότητας

πρέπει

να

έχει

αυστηρές

προδιαγραφές και πρότυπα. Τα πρότυπα και οι προδιαγραφές αναπτύσσονται και οριστικοποιούνται από την ομάδα WHATWG (Web Hypertext Application Technology Working Group) η οποία έχει website στη διεύθυνση: whatwg.org/specs/web-apps/current-work/multipage/ Στη συνέχεια ο οργανισμός W3C, ο οποίος είναι υπεύθυνος για την επίβλεψη της ανάπτυξης προϊόντων στο World Wide Web με διευθυντή τον Tim Berners Lee, ενσωματώνει τις προδιαγραφές και τα πρότυπα HTML της ομάδας WHATWG. Αξίζει εδώ να σημειώσουμε ότι οι αναφορές στους δύο οργανισμούς W3C και WHATWG δεν είναι μόνο ιστορικής σημασίας, αλλά πρόκειται για δύο οργανισμούς που διαμορφώνουν και καθοδηγούν την εξέλιξη του WWW και των websites. Επομένως, κάποιος που θα θελήσει να ασχοληθεί επαγγελματικά με την κατασκευή ιστοσελίδων

8

θα πρέπει να ενημερώνεται από τους δύο αυτούς ιστότοπους για να βρίσκεται συνεχώς στο επίκεντρο των εξελίξεων. Χαρακτηριστικό είναι το screen shot της εικόνας 1 από το http://www.whatwg.org με τελευταία ενημέρωση την 1η Αυγούστου 2014! Εικόνα 1. Στιγμιότυπο από το website της ομάδας WHATWG

Αφού φτιαχτούν και οριστικοποιηθούν τα πρότυπα, στη συνέχεια αναλαμβάνουν οι Developers των Browsers να προσαρμόσουν τους Browsers στα πρότυπα αυτά. Οι ομάδες προγραμματισμού των Browsers είναι από τις ομάδες που συνεχώς εξελίσσουν και προσαρμόζουν τα προϊόντα τους εκδίδοντας αντίστοιχα updates.

1.3 Συμβατότητες-Προσθήκες Η γλώσσα HTML5 είναι πλέον συμβατή με όλους του γνωστούς Web browsers και οι τροποποιήσεις σε σχέση με τη HTML4 είναι οι ακόλουθες:

¾ αλλαγή της ετικέτας έναρξης του κώδικα της ιστοσελίδας doctype η οποία έχει γίνει απλούστερη και συντομότερη,

¾ προσθήκη νέων στοιχείων όπως τα Header, Footer, Nav, Article, ¾ καλύτερη προσβασιμότητα από χρήστες με ειδικές ανάγκες και διαφορετικών ειδών συσκευές (tablets, Desktops, Laptops, smartphones κτλ), 9

¾ βελτιστοποίηση των μηχανών αναζήτησης (SEO, Search Engine Optimization), ¾ ελαφρύτερος κώδικας και επομένως ταχύτερη εμφάνιση των αρχείων από τους browsers.

1.4 Τι χρειάζομαι για να προγραμματίσω σε HTML5; Εκτός από καλές ιδέες, φαντασία και δημιουργικότητα, χρειάζομαι:

¾ ένα φυλλομετρητή (browser), π.χ. Chrome, Mozilla, Safari, Opera κ.α., ¾ ένα HTML Editor, όπως το Notepad++ το οποίο είναι freeware,

ΥΠΟΕΝΟΤΗΤΑ 2. ΔΟΜΗ ΚΑΙ ΔΥΝΑΤΟΤΗΤΕΣ. 2.1 Δουλεύοντας με το Notepad++ (windows) Το Notepad++ είναι ένας free text editor όπως είναι και το Notepad των Windows. Η διαφορά με το Notepad είναι ότι το Notepad++ είναι πιο φιλικό για τον χρήστη και έχει κάποιες παραπάνω δυνατότητες. Το Notepad++ xρησιμοποιεί διαφορετικά χρώματα για να μπορεί ο Web Developer να διαβάζει εύκολα τον κώδικα που συγγράφει. Εγκατάσταση και τρόπος εργασίας με το Note Pad++. Εγκατάσταση Κατεβάστε το αρχείο npp…..Installer.exe δωρεάν από την διεύθυνση: notepad-plus-plus.org Στο

directory

που

έχει

αποθηκευθεί

το

αρχείο

επιλέγετε

και

εκτελείτε

το

npp…...Installer.exe χωρίς να χρειαστεί να κάνετε κάποια ιδιαίτερη παραμετροποίηση.

10

Εικόνα 2. Βασική διεπιφάνεια Notepad++

2.2 Δουλεύοντας με το Atom (Mac) Το Atom είναι ένας text editor ο οποίος διατίθεται σε Mac και σε windows. Το Atom είναι απλό στη χρήση και δωρεάν. Στο Mac υποστηρίζεται από την έκδοση OS X 10.8 καθώς και για μεταγενέστερες εκδόσεις του OS. Το Atom

είναι κατάλληλο για

δημιουργία html αρχείων και μπορούμε να το βρούμε στην παρακάτω διεύθυνση: atom.io Μόλις εμφανιστεί η σελίδα στο browser αυτόματα θα εμφανιστεί και Button για download κατάλληλο για το λειτουργικό που τρέχει ο υπολογιστής μας είτε πρόκειται για Mac είτε για Windows. Αφού κατεβάσουμε τα αρχεία και κάνουμε την εγκατάσταση θα γράψουμε τον κώδικα html και έπειτα θα κάνουμε save as γράφοντας την επέκταση .html. για παράδειγμα mac.html. Τέλος αφού κάνουμε κλικ επάνω στο αρχείο τότε θα εκτελεστεί ο κώδικας html από τον browser που έχουμε ορίσει ως default. Το Mac OS αρχικά έχει ορισμένο το Safari ως default Browser. Σημείωση Αν επιθυμούμε μπορούμε να χρησιμοποιήσουμε και το Text editor του Mac Os που είναι το text Edit. 11

Στο Spotlight θα πληκτρολογήσουμε Textedit και θα επιλέξουμε το Text Edit. Αφού γράψουμε τον κώδικα θα επιλέξουμε save και έπειτα θα πληκτρολογήσουμε το όνομα του αρχείου όπως προηγουμένως. Εικόνα 3. Βασική διεπιφάνεια Atom HTML Editor

2.3 Δομή αρχείων στατικού Website με τη χρήση της HTML5. Για να φτιάξουμε τη δομή ενός πολύ απλού στατικού website στον υπολογιστή μας κάνουμε τα εξής βήματα: 1.

Ανοίγουμε στο desktop των Windows ή σε όποιο άλλο directory του σκληρού μας δίσκου, ένα folder με το όνομα του website που θέλουμε να δημιουργήσουμε.

2.

Μέσα σε αυτό το folder θα αποθηκεύσουμε την κεντρική σελίδα (Home Page) με το όνομα index.HTML έτσι ώστε ο browser να καταλάβει ότι πρόκειται για την κεντρική σελίδα.

3.

Μέσα στο folder που δημιουργήσαμε θα ανοίξουμε ένα folder με όνομα css για να αποθηκεύσουμε μέσα τα αρχεία css, ένα folder με όνομα images για να αποθηκεύσουμε τις εικόνες και τα buttons, ένα με το όνομα videos για τα videos, και ένα sound για να αποθηκεύσουμε τους ήχους.

Ο Browser για να εμφανίσει μια σελίδα πρέπει να τρέξει τον κώδικα κάποιων αρχείων. Αυτά τα αρχεία μπορεί να «φτάνουν» στον Browser από τον server που φιλοξενεί ένα 12

website ή ακόμα και από μία διεύθυνση του σκληρού δίσκου του υπολογιστή μας. Το μόνο που αλλάζει για τον Browser είναι ο τρόπος που λαμβάνει τα αρχεία. Έτσι λοιπόν πριν φιλοξενηθεί το website από κάποιον server έχουμε την ευκαιρία να δοκιμάσουμε όλο τον κώδικα που δημιουργήσαμε για τις ιστοσελίδες μας. Πρέπει να προσέξουμε πολύ στον τίτλο του website να μην χρησιμοποιούμε κάτω παύλες (_), αλλά κανονικές παύλες. Οι κάτω παύλες δυσκολεύουν τις μηχανές αναζήτησης. Δηλαδή για παράδειγμα δεν δίνουμε τίτλο e_shop αλλά e-shop. Εικόνα 4. Τυπική δομή ενός στατικού website το οποίο είναι εγκατεστημένο στο desktop

2.4 Δομή ιστοσελίδας HTML Ετικέτα DOCTYPE HTML: Ο κώδικας HTML5 θα πρέπει να Ξεκινά με την ετικέτα και να τελειώνει με…

13

προσθέτουμε την ετικέτα

Κάτω από την ετικέτα

με την

οποία προσδιορίζουμε τη γλώσσα των κειμένων που θα γράψουμε στην ιστοσελίδα.

και

Ενότητα Head: Χρησιμοποιούμε τις ετικέτες

για να προσδιορίσουμε τα

όρια της ενότητας Head. Στην ενότητα Head περιλαμβάνονται πληροφορίες σχετικές με την ιστοσελίδα (metadata) και περιλαμβάνουν τον τίτλο, λέξεις κλειδιά για την εύρεση της σελίδας από τις μηχανές αναζήτησης κτλ. Το περιεχόμενο του στοιχείου Title εμφανίζεται στην καρτέλα του Browser και είναι το μοναδικό στοιχείο που γίνεται ορατό από τον επισκέπτη της ιστοσελίδας. Τα υπόλοιπα δεν τα βλέπει ο επισκέπτης. Επίσης η ενότητα Head περιλαμβάνει υποχρεωτικά την ετικέτα

για τη

κωδικοποίηση των χαρακτήρων UTF-8.

Ενότητα Body:Στην ενότητα Body περικλείουμε όλα τα περιεχόμενα της ιστοσελίδας όπως άρθρα, εικόνες, ήχους κείμενα και γενικά όλα τα στοιχεία τα οποία είναι ορατά από

τους

χρήστες.

Χρησιμοποιούμε

τις

ετικέτες

και

για

να

προσδιορίσουμε τα όρια της ενότητας Body.

14

Εικόνα 5. Τυπική διάταξη HTML κώδικα

2.5 Διακριτές ενότητες της δομής της HTML5 Section: Η ενότητα Section (αν και μέχρι στιγμής δεν έχει ιδιαίτερη σημασία για τους Browsers) χρησιμεύει στη διάρθρωση του κώδικα κατά τη συγγραφή του. Η ενότητα Section περιλαμβάνεται μεταξύ των ετικετών section στη σειρά με την ετικέτα

και

. Όταν ανοίξουμε δύο

η δεύτερη ενότητα γίνεται υποενότητα της

πρώτης.

Nav: Με την ετικέτα Nav ορίζουμε ένα menu πλοήγησης μέσα στο οποίο περικλείουμε τα σημαντικότερα στοιχεία πλοήγησης της ιστοσελίδας. Τα λιγότερο σημαντικά στοιχεία πλοήγησης τα γράφουμε εκτός της ενότητας Nav. 15

Article: Ορίζει ένα εξωτερικό περιεχόμενο από άλλη ιστοσελίδα, blog κτλ. Ξεκινά με την ετικέτα

και τελειώνει με την ετικέτα

Aside: Με την ετικέτα

.

καθορίζουμε μία παράλληλη ενότητα η οποία εφάπτεται

του κυρίου περιεχομένου μιας σελίδας με το οποίο συνδέεται εννοιολογικά. Η ενότητα aside είναι μια ξεχωριστή ως περιεχόμενο ενότητα η οποία θα μπορούσε να «σταθεί» και μόνη της. Ξεκινά με την ετικέτα

και τελειώνει με την ετικέτα

.

Div: Σε περίπτωση που θελήσουμε να περιλάβουμε μία ομάδα στοιχείων σε μια ενότητα η οποία δεν έχει κάποια εννοιολογική σημασία, όπως οι Article, Section, Aside, Nav, τότε χρησιμοποιούμε την ενότητα Div. Αφού λοιπόν ομαδοποιήσουμε στοιχεία με την ενότητα Div, μπορούμε να επιφέρουμε μορφοποιήσεις CSS, καθώς και να τοποθετούμε μία ενότητα div σε μια συγκεκριμένη θέση της ιστοσελίδας. Αυτό το πετυχαίνουμε με τα ακόλουθα βήματα: 1. Γράφουμε στην ενότητα Head, ανάμεσα σε ετικέτες style, την θέση που επιθυμούμε να έχει το συγκεκριμένο div μέσα στην ιστοσελίδα μας. Παράδειγμα:

Αυτό σημαίνει ότι η απόλυτη θέση του στοιχείου p1 θα είναι 400 pixels από επάνω προς τα κάτω και 800 pixels από αριστερά προς τα δεξιά. 2. Γράφουμε στην ενότητα Body τις εξής γραμμές

Αυτό σημαίνει ότι η ενότητα με ταυτότητα id=”p1” περιλαμβάνει παράγραφο με κείμενο “hello !!!!!!!”

16

ΥΠΟΕΝΟΤΗΤΑ 3. ΧΡΗΣΗ ΤΩΝ ΕΤΙΚΕΤΩΝ ΤΗΣ HTML5 3.1 Κεφαλίδα, υποσέλιδο, ενσωμάτωση άλλης ιστοσελίδας και εισαγωγή σχολίων Header: Για να εισάγουμε μια επικεφαλίδα στην ιστοσελίδα μας πληκτρολογούμε στην ενότητα Body την ετικέτα

όπου number ένας αριθμός από 1-6. Έτσι η h1είναι η

μεγαλύτερη και σημαντικότερη επικεφαλίδα και η h6 είναι η μικρότερη και πιο ασήμαντη επικεφαλίδα.

Οι

μηχανές

αναζήτησης

ανιχνεύουν

τις

επικεφαλίδες

h1.

Οι

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

και

. Πρέπει να προσέξουμε η κάθε μία επικεφαλίδα να είναι ένα

μέγεθος μικρότερο από αυτή που είναι από επάνω της. Παράδειγμα:

Footer: Η ενότητα Footer χρησιμοποιείται για τη δημιουργία υποσέλιδου το οποίο περιλαμβάνει τα στοιχεία του συγγραφέα, πνευματικά δικαιώματα, συνδέσμους, παραπομπές του κειμένου κ.α. Ξεκινά με την ετικέτα

και τελειώνει με την ετικέτα

. Για παράδειγμα μπορούμε να εισάγουμε το σύμβολο copyright με το συμβολισμό ©. Παράδειγμα:

Δημιουργία σχολίων: Κατά τη συγγραφή κώδικα HTML5, όπως σε όλες τις γλώσσες προγραμματισμού, ενδείκνυται η χρήση σχολίων για να θυμάται εύκολα ο Developer τις λειτουργίες των τμημάτων του κώδικα καθώς και να καταλαβαίνουν και οι

17

συνάδελφοι του που συγγράφουν άλλα κομμάτια του κώδικα. Η δημιουργία σχολίου και

στην HTML5 περιλαμβάνεται μεταξύ των συμβόλων

.

Ετικέτα iframe: Αν θέλουμε να δημιουργήσουμε στην ιστοσελίδα μας ένα παράθυρο στο οποίο να εμφανίζεται μία άλλη ιστοσελίδα χρησιμοποιούμε το στοιχείο iframe, το οποίο ανοίγει με την ετικέτα

και κλείνει με την ετικέτα

.

3.2 Δημιουργία πινάκων με τη χρήση HTML5 Στα ακόλουθα υποεδάφια θα δούμε πως μπορούμε να δημιουργήσουμε πίνακες με τη χρήση HTML5. 3.2.1 Δομή πίνακα και τίτλος πίνακα Ετικέτα table: Για να ορίσουμε την αρχή του κώδικα για τη δημιουργία πίνακα προσθέτουμε στον κώδικά μας την ετικέτα ετικέτα

, ενώ για το τέλος του κώδικα την

. Τα στοιχεία thead, tbody και tfoot δεν είναι υποχρεωτικά, με την

επισήμανση ότι αν υπάρχει στοιχείο thead ή tfoot πρέπει οπωσδήποτε να υπάρχει και στοιχείο tbody. Ετικέτα caption: για να προσθέσουμε τον τίτλο του πίνακα τον εσωκλείουμε μεταξύ των ετικετών

και

. Το στοιχείο caption μπορεί να περιλαμβάνει και άλλα

στοιχεία, όπως παράγραφος κ.α. Ετικέτα thead: Την ετικέτα

τη χρησιμοποιούμε στην περίπτωση που θέλουμε να

ορίσουμε τις πρώτες x γραμμές ως κεφαλίδα του πίνακα. Τότε αυτές τις γραμμές τις περιλαμβάνουμε μεταξύ των ετικετών Ετικέτα tbody: Την ετικέτα ορίσουμε

τις

γραμμές

.

τη χρησιμοποιούμε στην περίπτωση που θέλουμε να δεδομένων

περιλαμβάνουμε μεταξύ των ετικετών Ετικέτα tfoot: Την ετικέτα

και του

πίνακα. και

Τότε

αυτές

τις

γραμμές

τις

.

τη χρησιμοποιούμε στην περίπτωση που θέλουμε να

ορίσουμε τις τελευταίες κ γραμμές ως υποσέλιδο του πίνακα. Τότε αυτές τις γραμμές τις περιλαμβάνουμε μεταξύ των ετικετών

και

.

18

3.2.2 Δημιουργώντας τις γραμμές ενός πίνακα Η δημιουργία του πίνακα γίνεται γραμμή προς γραμμή ξεκινώντας από πάνω προς τα κάτω. Δηλαδή ξεκινάμε να ορίζουμε τα κελιά της πρώτης γραμμής ένα προς ένα, έπειτα της δεύτερης ένα προς ένα, κ.ο.κ. Στη συλλογή των video στο τέλος της διδακτικής ενότητας περιλαμβάνεται παράδειγμα με πίνακα και ο αντίστοιχος κώδικας περιλαμβάνεται στο συνοδευτικό υλικό της διδακτικής ενότητας. Ετικέτα tr: Ανάμεσα στις ετικέτες

και

περιλαμβάνουμε το περιεχόμενο της κάθε

γραμμής ξεχωριστά. Ετικέτα th: Αν το περιεχόμενο του κελιού είναι επικεφαλίδα, τότε πρέπει να βρίσκεται ανάμεσα στις ετικέτες

και

.

Αν η επικεφαλίδα αναφέρεται στη γραμμή που βρίσκεται το κελί του πίνακα, προσθέτουμε μόνο στην ετικέτα αρχής: Αν η επικεφαλίδα αναφέρεται στη στήλη που βρίσκεται το κελί του πίνακα, προσθέτουμε μόνο στην ετικέτα αρχής:

Ετικέτα td: Αν το περιεχόμενο του κελιού είναι δεδομένα, τότε πρέπει να βρίσκεται ανάμεσα στις ετικέτες

και

.

3.2.3 Βήματα για τη δημιουργία πίνακα Για να δημιουργήσουμε ένα πίνακα σε μια ιστοσελίδα μέσα στην ενότητα Body του κώδικα HTML5 κάνουμε τα ακόλουθα βήματα: Ενότητα thead του πίνακα: 1.

Εισάγουμε την αρχή του κώδικα με την ετικέτα

2.

Εισάγουμε τον τίτλο του πίνακα ανάμεσα στις ετικέτες

3.

Εισάγουμε την ετικέτα

και

.

για να ορίσουμε τις γραμμές που αποτελούν την

κεφαλίδα του πίνακα. 4.

Εισάγουμε την ετικέτα

για να εσωκλείσουμε τα περιεχόμενα των κελιών της

συγκεκριμένης γραμμής. 19

5.

ή

Εισάγουμε ετικέτες

για επικεφαλίδες αντίστοιχης

στήλης ή γραμμής πίνακα. 6.

Κλείνουμε τις προηγούμενες ετικέτες με

7.

Επαναλαμβάνουμε τα βήματα 4-6 για να εισάγουμε τα περιεχόμενα των

.

υπόλοιπων κελιών της γραμμής. 8.

Ορίζουμε το τέλος της γραμμής με την ετικέτα

9.

Επαναλαμβάνουμε τα βήματα 4-8 για να προσθέσουμε και άλλες γραμμές στη ενότητα thead του πίνακα.

10.

Εισάγουμε την ετικέτα

για να ορίσουμε το τέλος του στοιχείου thead.

Ενότητα tbody: 1.

Εισάγουμε την ετικέτα

για να ορίσουμε τις γραμμές που αποτελούν τις

γραμμές δεδομένων του πίνακα. 2.

Εισάγουμε την ετικέτα

για να εσωκλείσουμε τα περιεχόμενα των κελιών της

συγκεκριμένης γραμμής. 3.

Εισάγουμε ετικέτες

ή

για επικεφαλίδες αντίστοιχης

στήλης ή γραμμής πίνακα. 4.

Κλείνουμε τις προηγούμενες ετικέτες με

5.

Εισάγουμε ετικέτες

6.

Κλείνουμε τις προηγούμενες ετικέτες με

7.

Επαναλαμβάνουμε τα βήματα 3-6 για να εισάγουμε τα περιεχόμενα των

.

για να γράψουμε τα περιεχόμενα των κελιών δεδομένων. .

υπόλοιπων κελιών της γραμμής. 8.

Ορίζουμε το τέλος της γραμμής με την ετικέτα

9.

Επαναλαμβάνουμε τα βήματα 2-8 για να προσθέσουμε και άλλες γραμμές στην ενότητα tbody του πίνακα.

10.

Εισάγουμε την ετικέτα

για να ορίσουμε το τέλος του στοιχείου tbody.

Ενότητα tfoot: Κάνουμε τα ίδια ακριβώς με την ενότητα tbody, με τη διαφορά ότι χρησιμοποιούμε τις ετικέτες tfoot αντί για tbody.

20

ΥΠΟΕΝΟΤΗΤΑ 4. Η ΠΡΩΤΗ ΜΟΥ ΣΕΛΙΔΑ ΜΕ ΤΟ “HELLO WORLD” KAI ΚΑΤΑΣΚΕΥΗ BUTTONS ΚΑΙ NAVIGATION BAR Σε αυτή την υποενότητα θα μάθουμε πώς να δημιουργήσουμε την πρώτη μας σελίδα. Επίσης θα μπορούμε να κάνουμε τα ακόλουθα:

¾ θα δημιουργήσουμε απλά buttons με το PowerPoint, και ¾ θα δημιουργήσουμε απλά navigation menus τα οποία θα χρησιμοποιήσουμε σε άλλη διδακτική ενότητα για να συνδέσουμε τις ιστοσελίδες ενός website μεταξύ τους. Στο σημείο αυτό θα πρέπει να διευκρινίσουμε ότι μόλις ολοκληρωθούν οι ενότητες για CSS και Javasript θα μπορούμε να δημιουργήσουμε πιο σύνθετα και ολοκληρωμένα buttons και navigation menus. Επίσης υπάρχει μεγάλη ποικιλία από tools τα οποία ονομάζονται button makers, με τη βοήθεια των οποίων μπορούμε να δημιουργήσουμε buttons και navigation menus και να τα ενσωματώσουμε στον κώδικά μας. Παραδείγματα: Easy button and menu maker, button generator, button shop, crystal button, κ.α.

4.1 Βήματα για τη δημιουργία της πρώτης ιστοσελίδας με το γνωστό ”Hello World!” με τη χρήση του Notepad++ και με το Atom Για να δημιουργήσουμε την πρώτη μας ιστοσελίδα θα κάνουμε τα εξής βήματα: 1.

Ανοίγουμε το Notepad++ ή το Atom.

2.

Στην πρώτη γραμμή γράφουμε την εντολή έναρξης του κώδικα της ιστοσελίδας:

3.

Στην επόμενη γραμμή γράφουμε για να δηλώσουμε τη γλώσσα που θα χρησιμοποιήσουμε την ετικέτα:

4.

Στην επόμενη γραμμή θα ορίσουμε την αρχή της ενότητας Head με την αντίστοιχη ετικέτα:

5.

Στην επόμενη γραμμή θα δηλώσουμε την κωδικοποίηση των χαρακτήρων UTF-8 με την ετικέτα:

21

6.

Θα δηλώσουμε τον τίτλο της ιστοσελίδας ο οποίος θα εμφανίζεται στην καρτέλα του Browser εσωκλείοντάς τον ανάμεσα στις ετικέτες:

7.

Στην επόμενη γραμμή θα δηλώσουμε το τέλος της ενότητας head με την ετικέτα:

8.

Στην επόμενη γραμμή θα δηλώσουμε την αρχή της ενότητας body με την ετικέτα:

9.

Θα γράψουμε το “Hello World!” ανάμεσα στις ετικέτες:

10.

Στην επόμενη γραμμή θα δηλώσουμε το τέλος της ενότητας body με την ετικέτα:

11.

Στην τελευταία γραμμή, για να δηλώσουμε το τέλος του κώδικα HTML της ιστοσελίδας, θα προσθέσουμε την ετικέτα:

12.

Αποθηκεύουμε το αρχείο με την εντολή Αποθήκευση ως από το μενού αρχείο με κατάληξη. html -π.χ. index.html

13.

Ανοίγουμε το αρχείο με ένα browser.

4.2 Δημιουργία Button με το Powerpoint ¾ Ανοίγουμε το PowerPoint 2007 ή PowerPoint 2010. ¾ Δημιουργούμε ένα text box. ¾ Γράφουμε το όνομα του Button. ¾ Χρησιμοποιούμε ένα γρήγορο στυλ για να μορφοποιήσουμε το text box. ¾ Κάνουμε δεξί κλικ με το mouse και αποθηκεύουμε το button με κατάληξη. png. στο folder που αποθηκεύουμε τις εικόνες.

4.3 Δημιουργία navigation bar Για να δημιουργήσουμε ένα navigation bar menu με το οποίο ο επισκέπτης θα μπορεί να πλοηγείται στις βασικές ιστοσελίδες του Website, θα κάνουμε τα ακόλουθα βήματα:

¾ Θα δημιουργήσουμε μία ενότητα nav με τις ετικέτες

,

¾ Θα δημιουργήσουμε δύο οριζόντιες γραμμές μία πριν από τα buttons και μια μετά με την ετικέτα

22

¾ Θα δημιουργήσουμε δύο συνδέσεις href για να φορτωθούν στην ιστοσελίδα τα buttons τα οποία είναι αποθηκευμένα στον υποκατάλογο images (για τις συνδέσεις href θα μιλήσουμε σε επόμενη διδακτική ενότητα). Εικόνα 6. Δημιουργία Navigation Bar

Εικόνα 7. Τυπική διάταξη μιας ιστοσελίδας HTML

23

4.4 Παρουσίαση του Button maker «Easy Menu and Button Maker» (windows) Όπως αναφέραμε υπάρχουν δεκάδες button makers. Το συγκεκριμένο επιλέχτηκε, διότι έχει πολύ φιλικό user interface, είναι συμβατό με τους ελληνικούς χαρακτήρες, ενώ αρκετά από αυτά δεν είναι συμβατά. Επίσης στην trial έκδοση (δίνει το περιθώριο περίπου 20 φορές να τρέξουμε το πρόγραμμα) περιέχει κάποια βασικά buttons και menus, ενώ στην επί πληρωμή έκδοση παρέχει μεγαλύτερη ποικιλία σε templates. Τέλος, όπως θα δούμε, είναι πολύ απλό στη χρήση. Αφού δημιουργήσουμε ένα menu ή ένα button με δύο απλά βήματα, μπορούμε να το αποθηκεύσουμε σαν ξεχωριστό αρχείο ή και να το ενσωματώσουμε απευθείας σε ένα HTML αρχείο. 4.5.1 Εγκατάσταση του easy menu and button maker 1.

Ανοίγουμε τον Web Browser και πληκτρολογούμε τη διεύθυνση: http://www.easymenumaker.com

2.

Επιλέγουμε την free trial έκδοση με τα βασικά templates ή την full έκδοση, η οποία στοιχίζει περίπου 26 ευρώ.

4.5.2 Βασικές διεπιφάνειες του Easy Menu and Button Maker Το Easy Menu and Button Maker έχει τέσσερα βασικά μενού που εμφανίζονται με την μορφή καρτελών (ribbons) που έχει υιοθετήσει το Microsoft Office 2007 καθώς και οι μεταγενέστερες εκδόσεις του: File Ribbon: Στο menu File υπάρχουν οι κλασικές επιλογές για τα projects όπως save, save as, open. Επίσης υπάρχουν και οι επιλογές save menu as HTML με την οποία αποθηκεύουμε ένα menu που δημιουργήσαμε με τη μορφή HTML. Επίσης υπάρχει και η επιλογή New με την οποία επιλέγουμε απευθείας ένα template όπως κάνουμε και στο Ms Office. Home Ribbon: Στην καρτέλα Home υπάρχουν buttons για να προσθέσουμε αντικείμενα, επιλογές για την αποθήκευση του Button που θα δημιουργήσουμε και κλασικές επιλογές select, do-undo κτλ.

24

Επίσης υπάρχει επιλογή για τη μορφή του menu που θα δημιουργήσουμε, οριζόντια, κάθετη δεξιά ή κάθετη αριστερά. Τέλος, υπάρχουν button save menu as HTML (αποθήκευση με τη μορφή HTML), insert into webpage (προσάρτηση του κώδικα σε κώδικα HTML μιας σελίδας που ήδη έχουμε δημιουργήσει) και επιλογή preview (για να δούμε την τελική μορφή του button ή menu που δημιουργήσαμε). Κάτω από την καρτέλα home ribbon υπάρχει ο χώρος (καμβάς) όπου δημιουργούμε και επεξεργαζόμαστε τα buttons και τα menus και κάτω από αυτή την περιοχή αυτή υπάρχουν τρεις καρτέλες με templates: I.

Complete template: Όταν την επιλέξουμε, εμφανίζονται πλήρη templates από συλλογές

menus

τα

οποία

μπορούμε

να

τροποποιήσουμε

και

να

επεξεργαστούμε. II.

Button template: Όταν την επιλέξουμε εμφανίζονται templates από buttons.

III.

Submenu template: Όταν την επιλέξουμε εμφανίζονται πλήρη templates από συλλογές Submenus.

Publish ribbon: Επιλογές έκδοσης που περιέχονται και στην καρτέλα Home. Help ribbon: Επιλογή βοήθειας, manual και αγοράς του προϊόντος.. 4.5.3 Βήματα για την δημιουργία buttons με το Easy Menu and Button Maker 1.

Επιλέγουμε την καρτέλα Home.

2.

Στο κάτω μέρος της οθόνης επιλέγουμε την καρτέλα button template.

3.

Επιλέγουμε μια κατηγορία, π.χ. colourful.

4.

Επιλέγουμε ένα button από τη συγκεκριμένη συλλογή.

5.

Αριστερά της καρτέλας Home επιλέγουμε add item.

6.

Μόλις εμφανιστεί το Button στον καμβά του Easy Menu and Button Maker με το mouse μπορούμε να κάνουμε resize button κρατώντας πατημένο το αριστερό πλήκτρο και σέρνοντας το mouse στην κάτω αριστερή γωνία.

7.

Στη συνέχεια, εμφανίζονται στα δεξιά της οθόνης τρεις κατηγορίες menu για την μορφοποίηση του button. Θα εστιάσουμε στην πρώτη κατηγορία το Top Menu.

Top Menu: στο Top Menu υπάρχουν δύο Submenus. Στο πρώτο που έχει τον τίτλο button υπάρχουν επιλογές για εισαγωγή και μορφοποίηση κειμένου, εισαγωγή συνδέσεων και εισαγωγή εικονιδίου στο button που επεξεργαζόμαστε. Στο δεύτερο Submenu με τίτλο Button style υπάρχουν επιλογές για μορφοποίηση και animation του button, όταν δεν βρίσκεται ο κέρσορας του ποντικιού εντός της 25

περιοχής του, όταν ο κέρσορας αιωρείται πάνω από το button, και όταν έχουμε επιλογή κλικ του button από το Mouse. Εικόνα 8. Διεπιφάνεια της καρτέλας Home του Easy Button and Menu Maker

4.6 Δημιουργία buttons για Mac και Windows Μια πολύ καλή λύση για να δημιουργήσουμε buttons είναι κάποιο online tool όπως το dabuttonfactory το οποίο δε χρειάζεται εγκατάσταση και υποστηρίζεται από όλα τα λειτουργικά. Αρχικά θα πληκτρολογήσουμε τη διεύθυνση https://dabuttonfactory.com/ Στη συνέχεια με τη βοήθεια των Menus που υπάρχουν στη σελίδα θα δημιουργήσουμε το button. Αφού δημιουργήσουμε το button θα επιλέξουμε download για να αποθηκεύσουμε το button στη μορφή που έχουμε επιλέξει (png, jpg κτλ).

4.7 Παραδείγματα με videos.- αρχεία της διδακτικής ενότητας Στο ηλεκτρονικό υλικό της ενότητας, μπορείτε να δείτε κάποια παραδείγματα σε μορφή βίντεο.

26

Παράδειγμα 1. Δημιουργία σελίδας HTML “Hello world” με Notepad++ part 1 Παράδειγμα 2. Δημιουργία σελίδας HTML “Hello world” με Notepad++ part 2 Παράδειγμα 3. Δημιουργία σελίδας HTML “Hello world” με Atom σε περιβάλλον Mac Παράδειγμα 4. Δημιουργία button με το PowerPoint Παράδειγμα 5. Δημιουργία button με το Easy Button and Menu Maker Παράδειγμα 6. Δημιουργία πίνακα με κώδικα HTML Παράδειγμα 7. Τρόποι ανοίγματος ενός HTML file

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

Σύνοψη Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:

• Μία HTML σελίδα μπορεί να εκτελεστεί από ένα browser, και μπορεί είτε να είναι αποθηκευμένη σε ένα server που φιλοξενεί το website, είτε να είναι αποθηκευμένη σε τοπικό αποθηκευτικό μέσο του υπολογιστή.

• Ένα έγγραφο HTML περιλαμβάνει την ενότητα Head, όπου περιλαμβάνονται βασικές πληροφορίες της σελίδας, και την ενότητα Body, στην οποία γράφεται ο κώδικας για όλες τις πληροφορίες οι οποίες γίνονται ορατές από τον επισκέπτη.

• Η γλώσσα HTML βασίζεται στη λειτουργία ετικετών (tags) με τις οποίες συνήθως μπορούμε να σημάνουμε την έναρξη και τη λήξη μιας λειτουργίας.

• Ένας καλός HTML Editor για ξεκίνημα είναι το Notepad++ το οποίο είναι εύκολο στην εγκατάσταση και απλό στον τρόπο λειτουργίας του.

• Οι βασικές ενότητες που υποστηρίζει η HTML5 είναι οι Section, Article, Aside, Nav. • Με κώδικα HTML μπορούμε να δημιουργήσουμε πίνακες στις ιστοσελίδες μας. • Μπορούμε να δημιουργήσουμε απλά buttons, εύκολα με το Powerpoint και πιο πολύπλοκα μαζί με navigation menus, με διάφορα tools τα οποία ονομάζονται button makers. Αφού δημιουργήσουμε buttons και menus με ένα button maker, στη συνέχεια μπορούμε να τα ενσωματώσουμε αυτόματα στον κώδικα HTML μιας ιστοσελίδας. 27

28

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

Προγράμματα Συμπληρωματικής Εκπαίδευσης

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1920 - HTML 5 ΚΑΙ JAVASCRIPT: ΤΑ ΠΡΩΤΑ ΒΗΜΑΤΑ ΣΤΟ WEB DEVELOPMENT

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 2. ΕΙΣΑΓΩΓΗ ΚΑΙ ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ

29

30

Εισαγωγικές Παρατηρήσεις Στην πρώτη υποενότητα θα αναλυθούν οι έννοιες: γονικό στοιχείο θυγατρικό στοιχείο και απόγονος. Στη συνέχεια θα αναλυθεί εκτενώς η δημιουργία και η μορφοποίηση παραγράφου και τέλος θα αναλυθούν τα στοιχεία address και time. Στη δεύτερη υποενότητα θα αναλυθεί η εισαγωγή παραπομπής, αναφοράς επισήμανσης καθώς και η σήμανση στοιχείων κειμένου με ιδιαίτερη σημασία όπως κώδικας γλώσσας προγραμματισμού και μεταβλητές. Επίσης θα αναλυθεί η εισαγωγή κειμένου σε περιοχές κειμένου καθώς επίσης και εισαγωγή search box και spinbox. Στην τρίτη υποενότητα θα αναλυθούν οι δυνατότητες μορφοποίησης κειμένου καθώς και η βελτίωση προσπελασιμότητας με τη βοήθεια της WAI ARIA. Στην τέταρτη υποενότητα θα αναλυθεί ο τρόπος δημιουργίας διατεταγμένων και μη διατεταγμένων λιστών. Θα αναλυθεί επίσης η εισαγωγή dropdownlist, radio buttons και visual text effects.

31

ΥΠΟΕΝΟΤΗΤΑ 1. ΔΗΜΙΟΥΡΓΙΑ ΠΑΡΑΓΡΑΦΟΥ 1.1 Απόγονοι και Γονικά - Θυγατρικά στοιχεία Γονικό στοιχείο: Περιέχει κάποιο άλλο στοιχείο. Απόγονος: Το στοιχείο που περιέχεται σε ένα γονικό στοιχείο ονομάζεται απόγονος. Θυγατρικό στοιχείο: Αν ο απόγονος περικλείεται άμεσα σε έναν άλλο απόγονο τότε λέγεται και θυγατρικό στοιχείο. Παράδειγμα:

¾ Το στοιχείο article είναι γονικό των στοιχείων h1 και p. ¾ Τα στοιχεία h1 και p είναι θυγατρικά και απόγονοι του στοιχείου article. ¾ Τα στοιχεία strong και em είναι θυγατρικά του στοιχείου p. ¾ Τα στοιχεία strong και em είναι απόγονοι του στοιχείου article. ¾ Τα στοιχεία strong και em δεν είναι θυγατρικά του στοιχείου article.

1.2 Στοιχείο παράγραφος p Στα ακόλουθα υποεδάφια θα δούμε πώς εισαγάγουμε και πώς μορφοποιούμε παραγράφους. 1.2.1 Εισαγωγή παραγράφου Για να εισάγουμε μία παράγραφο σε μια ιστοσελίδα χρησιμοποιούμε το στοιχείο παράγραφος το οποίο είναι από τα πιο πολυεμφανιζόμενα στοιχεία σε μια ιστοσελίδα. 32

Γενικά για να αλλάξουμε γραμμή σε ένα HTML κείμενο χρησιμοποιούμε την ετικέτα

ή

. Δεν υπάρχει διαφορά γιατί ο Browser κάθε φορά που διαβάζει μία από τις δύο αλλάζει γραμμή στην οθόνη του υπολογιστή. Πίνακας 1. Ειδικοί χαρακτήρες για εισαγωγή κειμένου στην HTML5

Πηγή: tutorialspoint.com/html5/html5_entities.htm

Παράδειγμα: Έστω ότι θέλω να εισαγάγω το σύμβολο του copyright. Τότε γράφω: Στοιχείο: Παράγραφος. 33

και τελειώνει με την ετικέτα

Σύνταξη: Ξεκινά με την ετικέτα

.

Σχόλια: Το στοιχείο παράγραφος το χρησιμοποιούμε για να δημιουργήσουμε μία παράγραφο η οποία μπορεί να αποτελείται από επιμέρους στοιχεία. Παράδειγμα:

Παράδειγμα 1. Δημιουργία παραγράφου. Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex1-paragraph-plain.html Κώδικας παραδείγματος 1:

Οθόνη browser παραδείγματος 1:

1.2.2 Μορφοποίηση παραγράφου Σε αυτή την ενότητα θα εξηγήσουμε πώς μπορούμε να μορφοποιήσουμε μια παράγραφο με την τεχνολογία CSS. Επειδή η τεχνολογία CSS θα αναλυθεί εκτενώς σε επόμενη διδακτική ενότητα στο σημείο αυτό θα αρκεστούμε σε βασικές CSS μορφοποιήσεις

παραγράφου.

Η

τεχνολογία

CSS

επιφέρει

τροποποιήσεις

στις

ιστοσελίδες HTML και υποστηρίζεται από όλες τις βασικές εκδόσεις των browsers χωρίς να χρειάζεται η εγκατάσταση κάποιου πρόσθετου στοιχείου. Στοιχείο 34

Η ετικέτα style μας επιτρέπει να ορίσουμε μορφοποιήσεις για τη γραμματοσειρά. Αρχίζει με την ετικέτα

και τελειώνει με την ετικέτα

. Μέσα στο στοιχείο style

μπορούμε να δηλώσουμε το χρώμα του κειμένου τη γραμματοσειρά, το μέγεθός της κ.α. Σημείωση: για να επιφέρουμε αλλαγές όπως αυτές που περιγράφονται παρακάτω στο στυλ της παραγράφου ή άλλου στοιχείου κειμένου της HTML5 υπάρχουν οι εξής τρόποι: Α’ τρόπος: Ανάμεσα στις ετικέτες

και

του HTML κώδικα παραθέτουμε τις

γραμμές:

Β’ τρόπος: Προσθέτουμε το style στην ετικέτα της παραγράφου όπως ακολούθως:

Γ’ τρόπος: Ανάμεσα στις ετικέτες

και

του HTML κώδικα παραθέτουμε τις

γραμμές:

Στη συνέχεια, ανάμεσα στις ετικέτες

και

του HTML κώδικα παραθέτουμε τις

γραμμές όπου αντιστοιχούμε τη συγκεκριμένη παράγραφο με την κλάση Paragraph1, έτσι ώστε να κληρονομήσει το style που δηλώθηκε στο στοιχείο head. Η κλάση αναλύεται στην υποενότητα 3 της συγκεκριμένης διδακτικής ενότητας.

Παράδειγμα 2. Δημιουργία παραγράφου Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex2-paragraph-classes.html 35

Κώδικας παραδείγματος 2

Οθόνη browser παραδείγματος 2:

Δ’ τρόπος: Καλούμε ένα αρχείο css να μορφοποιήσει την παράγραφο. Τη συγκεκριμένη μέθοδο θα την αναλύσουμε στη διδακτική ενότητα με τη CSS τεχνολογία. Font family Μπορούμε να ορίσουμε ένα σύνολο γραμματοσειρών για στοιχεία όπως η παράγραφος,

επικεφαλίδες

κτλ.

Με

τη

δήλωση

περισσότερων

από

μιας

γραμματοσειρών, μας δίνεται η δυνατότητα να ορίσουμε εναλλακτικές γραμματοσειρές στην

περίπτωση

που

κάποιος

browser

δεν

υποστηρίζει

κάποια.

Δηλαδή

η

γραμματοσειρά που βρίσκεται πρώτη στην ιδιότητα font family θα είναι η πρώτη επιλογή -αν αυτή δεν υπάρχει,ο browser “κοιτάζει” τη δεύτερη κτλ. Σύνταξη:

36

Πίνακας 2. Διαθέσιμες γραμματοσειρές για εισαγωγή κειμένου στην HTML5

Πηγή: tutorialspoint.com/html5/html5_fonts.htm

Font size Καθορίζει το μέγεθος της γραμματοσειράς. Η τιμή της ιδιότητας αυτής μεταβιβάζεται κληρονομικά και στα υπόλοιπα θυγατρικά στοιχεία της παραγράφου. Υπάρχουν τρεις τρόποι καθορισμού του μεγέθους της γραμματοσειράς: Α΄ τρόπος: Αν θέλουμε το προεπιλεγμένο μέγεθος μπορούμε να δηλώσουμε την ιδιότητα ως εξής: Αυτή συνήθως είναι και η προεπιλογή(default) της γραμματοσειράς η οποία αντιστοιχεί στο

μέγεθος

16

pixels.

Αλλιώς

μπορούμε

να

δηλώσουμε

το

μέγεθος

της

γραμματοσειράς σε περισσότερα ή λιγότερα Pixels. Παράδειγμα:

Β΄ τρόπος: Μπορούμε να προσδιορίσουμε το μέγεθος της γραμματοσειράς μιας παραγράφου σε μονάδες em όπου το μέτρο της μονάδας em προκύπτει από τη διαίρεση μέγεθος παραγράφου/ μέγεθος γονικού στοιχείου. Παράδειγμα: Αν το γονικό στοιχείο έχει μέγεθος 18 και το μέγεθος της θυγατρικής παραγράφου 24 τότε η διαίρεση μέγεθος παραγράφου/ μέγεθος γονικού στοιχείου μας δίνει αποτέλεσμα 24/18=1.33 άρα θα δηλώσουμε το μέγεθος της γραμματοσειράς της

παραγράφου

ως

p{font-size: 1.33em}.

Εναλλακτικά

θα

μπορούσαμε

να

δηλώσουμε p{font-size: 133%}.

37

Γ΄ τρόπος: Μπορούμε να δηλώσουμε προεπιλεγμένα μεγέθη γραμματοσειράς με τις δηλώσεις από το μικρότερο στο μεγαλύτερο: xx-small, x-small,small, medium, large, x-large και xx-large. Σύνταξη:

ή

Font weight Χρησιμοποιείται για να καθορίσουμε πόσο έντονη επιθυμούμε τη γραμματοσειρά. Η προεπιλογή όσον αφορά στο πόσο έντονη είναι η γραμματοσειρά δηλώνεται ως font weight:normal, ενώ η έντονη font weight:bold Σύνταξη:

ή

Παράδειγμα 3. Ιδιότητα font-weight. Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex3-font-weight.html Κώδικας παραδείγματος 3:

38

Οθόνη browser παραδείγματος 3:

Color Η ιδιότητα color χρησιμοποιείται για να καθοριστεί το χρώμα της γραμματοσειράς. Η ιδιότητα αυτή κληρονομείται. Σύνταξη:

Font style Χρησιμοποιείται για να επιλέξουμε κάποιο έτοιμο στυλ παραγράφου ανάμεσα στα: Normal, italic, oblique, initial, inherit. Σύνταξη:

ή Εκεί που έχει κενό συμπληρώνουμε μία από τις προεπιλογές normal,italic κτλ. Καθορισμός προεπιλεγμένου χρώματος Επιλέγουμε ένα από τα χρώματα τα οποία υπάρχουν σαν προεπιλογές στην HTML5 αυτά είναι τα εξής: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow. Δεκαεξαδική αναπαράσταση χρώματος: Το κάθε χρώμα έχει μια δεκαεξαδική αναπαράσταση της μορφής

όπου στις θέσεις rr, gg, bb μπαίνουν οι

δεκαεξαδικές τιμές των χρωμάτων red(κόκκινο), green (πράσινο) και bb (μπλε). Σύνταξη:

39

ή

Αναπαράσταση RGB Το κάθε χρώμα αναλύεται ως μίξη των ποσοτήτων των χρωμάτων κόκκινο, πράσινο, μπλε με τιμές στο δεκαδικό σύστημα και με τη μορφή rgb(r, g, b) με τιμές για την κάθε μεταβλητή από το 1 ως το 255. Εναλλακτικά μπορούμε να γράφουμε τις αναλογίες των χρωμάτων με τη μορφή (r%, g%, b%). Υπάρχει επίσης και η μορφή rgba(r,g,b,a) όπου a είναι δεκαδικός αριθμός από το 0-1 και αντιστοιχεί στη διαφάνεια. Συμβουλή: Αν θέλετε να φτιάξετε ένα δικό σας χρώμα μπορείτε εύκολα στο Microsoft office να επιλέξετε περισσότερα χρώματαÆπροσαρμοσμένα και αυτόματα να σας εμφανίσει το office τις τιμές rgb. Σύνταξη:

ή

Αναπαράσταση hsla Στην αναπαράσταση hsla(h,s,l,a) ο αριθμός h είναι ακέραιος από το 0 ως το 360 και καθορίζει τη χροιά, ενώ οι μεταβλητές s και l είναι ποσοστά κορεσμού από 0-100 και φωτεινότητας. Το a είναι ένα δεκαδικός αριθμός από 0-1 που καθορίζει τη διαφάνεια. Αν θέλουμε μπορούμε να χρησιμοποιήσουμε τη μορφή hsl χωρίς το βαθμό διαφάνειας. Σύνταξη:

ή

40

Απόσταση μεταξύ των λέξεων (word-spacing) Μπορούμε να ορίσουμε την απόσταση μεταξύ των λέξεων με την ιδιότητα wordspacing: μονάδες σε Pixels ή em. Η ιδιότητα word-spacing κληρονομείται. Σύνταξη:

ή

Παράδειγμα 4. Μέγεθος και χρώμα γραμματοσειράς Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex4-paragraph-size-colors.html Κώδικας παραδείγματος 4:

41

Οθόνη browser παραδείγματος 4:

Απόσταση μεταξύ των χαρακτήρων (letter-spacing) Μπορούμε να ορίσουμε την απόσταση μεταξύ των χαρακτήρων με την ιδιότητα letterspacing:…… μονάδες σε Pixels ή em. Η ιδιότητα letter-spacing κληρονομείται. Σύνταξη:

ή

Παράδειγμα 5. Απόσταση χαρακτήρων Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex5-letter-spacing.html

42

Κώδικας παραδείγματος 5:

Οθόνη browser παραδείγματος 5:

Προσθήκη εσοχής (text-indent) Για

να

προσθέσουμε

στην

πρώτη

γραμμή

μιας

παραγράφου

μια

εσοχή

χρησιμοποιούμε την ιδιότητα text-indent: ……μονάδες σε Pixels ή em. Σύνταξη:

ή

Παράδειγμα 6. Εσοχή παραγράφου Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex6-paragraph-indent.html

43

Κώδικας παραδείγματος 6:

Οθόνη browser παραδείγματος 6:

Καθορισμός κενού χώρου (white-space) Τα διαδοχικά κενά διαστήματα παραβλέπονται στην HTML5. Αν θέλουμε να προσθέσουμε κενά διαστήματα προσθέτουμε την ιδιότητα white-space:… Στο κενό συμπληρώνουμε: 1.

pre αν θέλουμε ο browser να εμφανίσει στο κείμενο της ιστοσελίδας τα διαστήματα και τις επαναφορές κεφαλής αυτούσια όπως υπάρχουν και στο πρωτότυπο κείμενο.

2.

nowrap αν θέλουμε να μην γίνεται αλλαγή γραμμής.

3.

normal για να αντιμετωπίζονται τα διαστήματα όπως καθορίζεται από την προεπιλογή της /HTML5.

Σύνταξη:

ή

44

Παράδειγμα 7. Διαχείριση κενών διαστημάτων Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex7-white-space.html Κώδικας παραδείγματος 7:

Οθόνη browser παραδείγματος 7:

Στοίχιση κειμένου (text-align) Μπορούμε να προσθέσουμε την ιδιότητα text-align για να στοιχίσουμε το κείμενό μας ως εξής:

¾ text-align: left για στοίχιση αριστερά ¾ text-align: right για στοίχιση δεξιά ¾ text-align: center για στοίχιση στο κέντρο ¾ text-align: justify για πλήρη στοίχιση. Σύνταξη:

ή

45

Παράδειγμα 8. Στοίχιση κειμένου Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex8-text-align.html Κώδικας παραδείγματος 8:

Οθόνη browser παραδείγματος 8:

1.3 Στοιχεία address και time Εισαγωγή στοιχείων επικοινωνίας συγγραφέα Για να εισάγουμε τα στοιχεία επικοινωνίας ενός συγγραφέα ενός άρθρου ή ενός βιβλίου χρησιμοποιούμε το στοιχείο address. Στοιχείο: address Σύνταξη: Ξεκινά με την ετικέτα (

και τελειώνει με την ετικέτα

. )

Χρησιμότητα: Στο στοιχείο address μπορούμε να συμπεριλάβουμε και ενεργές συνδέσεις με τον ιστότοπο του συγγραφέα για τις οποίες θα μιλήσουμε σε επόμενη διδακτική ενότητα Παράδειγμα:

46

Στοιχεία ημερομηνίας και χρόνου Παράδειγμα 9. Στοιχείο address Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex9-adress.html Κώδικας παραδείγματος 9:

Οθόνη browser παραδείγματος 9:

Στοιχείο time: Για να ορίσουμε συγκεκριμένη ώρα και ημερομηνία σε μια σελίδα HTML τότε χρησιμοποιούμε το στοιχείο time. Το στοιχείο time μπορεί να συνδυαστεί με τις ιδιότητες datetime και pubdate για να δηλώσουμε μία ημερομηνία ή μία ημερομηνία έκδοσης ενός άρθρου ή βιβλίου αντίστοιχα. Η τιμή της datetime αναγνωρίζεται μόνο από τον υπολογιστή. Η ιδιότητα pubdate συνήθως περιλαμβάνεται σε στοιχείο header ή footer. Σύνταξη:

Παράδειγμα

47

Παράδειγμα 10. Στοιχείο time Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex10-time.html Κώδικας παραδείγματος 10:

Οθόνη browser παραδείγματος 10:

ΥΠΟΕΝΟΤΗΤΑ 2. ΕΙΣΑΓΩΓΗ ΚΕΙΜΕΝΟΥ 2.1 Εισαγωγή σημαντικού και εμφατικού κειμένου και επισήμανση κειμένου Εισαγωγή σημαντικού κειμένου: Για να εισάγουμε σημαντικό κείμενο χρησιμοποιούμε το στοιχείο strong. Μπορούμε να ενσωματώσουμε μέσα σε κείμενο χαρακτηρισμένο strong μία φράση επίσης strong αυξάνοντας τη σημαντικότητά της. Γενικά η σημαντικότητα θα αυξάνει σε κάθε απόγονο. Σύνταξη:

48

Δίνοντας έμφαση σε κείμενο: Για να δώσουμε έμφαση σε κείμενο χρησιμοποιούμε το στοιχείο em. Σύνταξη:

Παράδειγμα σημαντικού και εμφατικού κειμένου:

Επισήμανση κειμένου: Για να επισημάνουμε ένα κείμενο όπως ακριβώς και με ένα μαρκαδόρο highlighter σε ένα βιβλίο τότε χρησιμοποιούμε το στοιχείο mark. Στο στοιχείο head προσθέτουμε την ιδιότητα background-color για να επιλέξουμε το χρώμα του μαρκαδόρου ως εξής:

Στη θέση του κενού πληκτρολογούμε το επιθυμητό χρώμα του μαρκαδόρου με το οποίο θα επισημάνουμε τμήμα του κειμένου. Σύνταξη: ή

Παράδειγμα 11. Στοιχεία strong, em, mark Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex11-mark-srong-em.html 49

Κώδικας παραδείγματος 11:

Οθόνη browser παραδείγματος 11:

2.2 Επεξήγηση συντομογραφιών και εισαγωγή ορισμών Στοιχείο abbr Για να εισάγουμε μία επεξήγηση μιας συντομογραφίας χρησιμοποιούμε το στοιχείο abbr. Σύνταξη:

Μέθοδος: I.

Γράφουμε την ετικέτα

II.

Στη συνέχεια προαιρετικά γράφουμε

και προσθέτουμε στο title την

επεξήγηση της συντομογραφίας. III.

Έπειτα κλείνουμε τα εισαγωγικά και την ετικέτα abbr. Δηλαδή γράφουμε

IV.

Στη συνέχεια προσθέτουμε τη συντομογραφία.

V.

Τέλος, κλείνουμε με την ετικέτα

.

Σημείωση: Η επεξήγηση της συντομογραφίας εμφανίζεται στο παράθυρο του Browser όταν ο δείκτης του ποντικιού βρίσκεται σε κατάσταση αιώρησης (hover) πάνω από τη συντομογραφία. Παράδειγμα 12. Στοιχείο abbr Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: 50

ex12-abbr.html Κώδικας παραδείγματος 12:

Οθόνη browser παραδείγματος 12:

2.3 Εισαγωγή αναφοράς, παραπομπής, επισήμανσης και παράθεσης (Στοιχείο cite) Για να εισάγουμε μία παραπομπή ή αναφορά σε τίτλο άρθρου, βιβλίου συγγραφέα κτλ χρησιμοποιούμε το στοιχείο cite. Το στοιχείο cite αναφέρεται μόνο στις πηγές και όχι στο περιεχόμενο. Σύνταξη:

Στοιχείο quote Για να εισάγουμε μία σύντομη παράθεση μιας φράσης που είπε ή έγραψε κάποιος χρησιμοποιούμε το στοιχείο quote. Σύνταξη:

Στοιχείο Blockquote Για να παραθέσουμε αυτούσιο απόσπασμα κειμένου, γράφουμε την ετικέτα αρχής του στοιχείου blockquote στην οποία μπορούμε να συμπεριλάβουμε και την πηγή. Στη συνέχεια κλείνουμε την ετικέτα έναρξης και παραθέτουμε το κείμενο εντός ενός στοιχείου 51

p. Τέλος προσθέτουμε την ετικέτα

για να σημάνουμε το τέλος του

αποσπάσματος. Σύνταξη:

Παράδειγμα 13. Στοιχεία cite, quote, blockquote Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex13-cite-quote-blockquote.html Κώδικας παραδείγματος 13:

Οθόνη browser παραδείγματος 13:

2.4 Εισαγωγή κειμένου HTML σε πεδία Στα ακόλουθα υποεδάφια θα δούμε αναλυτικά πώς γίνεται η εισαγωγή κειμένου HTML σε πεδία. 52

2.4.1 Στοιχείο form Το στοιχείο form το χρησιμοποιούμε μαζί με την ιδιότητα input type για να περιλαμβάνουμε στοιχεία όπως checkbox, radio buttons, text areas κτλ Σύνταξη:

2.4.2 Πληκτρολόγηση κώδικα και ονόματα αρχείων σε κείμενο HTML Στοιχείο

code:

Εάν

θέλουμε

να

πληκτρολογήσουμε

κώδικα

γλώσσας

προγραμματισμού, ή όνομα αρχείου, όνομα προγράμματος κτλ σε ένα κείμενο HTML τότε τα περικλείουμε μεταξύ των ετικετών

και

.

Σύνταξη: Παράδειγμα:

2.4.3 Στοιχεία var και dfn Σήμανση μεταβλητής: Στοιχείο var Όταν θέλουμε να γράψουμε έναν μαθηματικό τύπο ή μια συνάρτηση τότε για να ορίσουμε τις μεταβλητές χρησιμοποιούμε το στοιχείο var. Σύνταξη: Παράδειγμα: Έστω ότι θέλουμε να γράψουμε τον τύπο της συνάρτησης μιας ευθείας y=x+2. Τότε θα το γράψουμε:

Καθορισμός όρου μέσα σε ορισμό:στοιχείο dfn Όταν δίνουμε κάποιο ορισμό ενός όρου τότε ο όρος αυτός τίθεται μεταξύ των ετικετών και

.

Σύνταξη: 53

Παράδειγμα:

Παράδειγμα 14. Στοιχεία code, var, def Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex14-code-var-def.html Κώδικας παραδείγματος 14:

Οθόνη browser παραδείγματος 14:

2.4.4 Εισαγωγή search box Για να εισάγουμε ένα πεδίο μιας μηχανής αναζήτησης χρησιμοποιούμε το στοιχείο form με την ιδιότητα role=”search”. Πιο αναλυτικά κάνουμε τα εξής βήματα: i.

γράφουμε μια ετικέτα αρχής του στοιχείου form με τις ιδιότητες

ii.

γράφουμε τίτλο για την ιδιότητα search μεταξύ των ετικετών

iii.

Γράφουμε όπου στο maxlength συμπληρώνουμε τον μέγιστο αριθμό χαρακτήρων της αναζήτησης. 54

iv.

Γράφουμε στην προηγούμενη ετικέτα

Παράδειγμα:

Παράδειγμα 15. Εισαγωγή searchbox Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex15-search_box.html Κώδικας παραδείγματος 15:

Οθόνη browser παραδείγματος 15:

2.4.5 Εισαγωγή spinbox Spin box είναι ένα box που μπορούμε να δημιουργήσουμε με την HTML5, στο οποίο κάνοντας αριστερό κλικ στα βελάκια του box Μπορούμε να αυξομειώνουμε την τιμή που βρίσκεται εντός του κουτιού. 55

Στο στοιχείο body προσθέτουμε τη γραμμή:

min και max είναι η ελάχιστη και μέγιστη τιμή, το step είναι το βήμα αύξησης ή μείωσης και το value είναι η αρχική τιμή. Παράδειγμα 16. Εισαγωγή spinbox Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex16-spinbox.html Κώδικας παραδείγματος 16:

Οθόνη browser παραδείγματος 16:

2.4.6 Εισαγωγή περιοχής κειμένου με το στοιχείο textarea Για να εισάγουμε μια περιοχή κειμένου text area γράφουμε την παρακάτω γραμμή στα όρια του στοιχείου body: Οι τιμές των ιδιοτήτων rows και cols προσδιορίζουν τον αριθμό των γραμμών και στηλών του πλαισίου. Αν θέλουμε ένα απλό Textbox μιας γραμμής με ένα κείμενο στα αριστερά του γράφουμε:

όπου size το μέγεθος του text box και το maxlength ο μέγιστος αριθμός χαρακτήρων. 56

Παράδειγμα 17. Εισαγωγή text area Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: Αρχείο: ex17-text_area.html Κώδικας παραδείγματος 17:

Οθόνη browser παραδείγματος 17:

2.4.7 Εισαγωγή submit button και checkbox Submit Button: Για να εισάγουμε ένα submit button κάνουμε τα ακόλουθα βήματα: 1.

Γράφουμε την ετικέτα αρχής του στοιχείου

2.

Γράφουμε το κείμενο που θα εμφανίζεται πριν από το πλαίσιο κειμένου

3.

Γράφουμε

4.

Γράφουμε

5.

Γράφουμε την ετικέτα αρχής του στοιχείου

Σύνταξη:

57

Παράδειγμα 18. Εισαγωγή submit button Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex18-submit.html Κώδικας παραδείγματος 18:

Οθόνη browser παραδείγματος 18:

Checkbox: Για να εισάγουμε ένα checkbox κάνουμε τα ακόλουθα βήματα: 1.

Γράφουμε ετικέτα αρχής

2.

Γράφουμε ετικέτα

3.

Γράφουμε ετικέτα τέλους

Παράδειγμα:

Παράδειγμα 19. Εισαγωγή checkbox Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex19-checkbox.html

58

Κώδικας παραδείγματος 19:

Οθόνη browser παραδείγματος 19:

ΥΠΟΕΝΟΤΗΤΑ 3. ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ 3.1 Κλασική μορφοποίηση κειμένου (bold, italic, underline) Έντονη γραφή (bold): Για να εισάγουμε μία φράση ενός κειμένου με έντονη γραφή χρησιμοποιούμε το στοιχείο b. Το έντονο κείμενο περικλείεται μεταξύ των ετικετών

και

. Σύνταξη:

Πλάγια γραφή (italic): Για να εισάγουμε μία φράση ενός κειμένου με πλάγια γραφή χρησιμοποιούμε το στοιχείο i. Το πλάγιο κείμενο το εισάγουμε μεταξύ των ετικετών και

.

Σύνταξη:

Υπογραμμισμένη γραφή (underline): Για να εισάγουμε μία φράση ενός κειμένου με υπογραμμισμένη γραφή χρησιμοποιούμε το στοιχείο u. Το υπογραμμισμένο κείμενο το εισάγουμε μεταξύ των ετικετών

και

.

Σύνταξη:

59

Παράδειγμα 20. Μορφοποίηση bold, italic, underlined Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex20-bold-italic-underline.html Κώδικας παραδείγματος 20:

Οθόνη browser παραδείγματος 20:

3.2 Επισήμανση διαγραμμένου και ανακριβούς κειμένου Διαγραμμένο κείμενο: Για να εισάγουμε ένα μέρος του κείμενο το οποίο έχει διαγραφεί χρησιμοποιούμε το στοιχείο del. Το διαγραμμένο κείμενο περικλείεται μεταξύ των ετικετών

και

.

Σύνταξη:

Επισήμανση διόρθωσης ανακριβούς κειμένου: Αντίθετα με το στοιχείο del για να ορίσουμε κείμενο το οποίο προστέθηκε σαν διόρθωση το περιλαμβάνουμε μεταξύ των ετικετών

και

.

Σύνταξη:

Σημείωση: Τα στοιχεία del και ins μπορούν να συνδυαστούν με τις ιδιότητες cite και datetime. Με την ιδιότητα cite που δεν έχει σχέση με το στοιχείο cite μπορούμε να παραπέμψουμε σε μία πηγή που εξηγεί τους λόγους για τους οποίους έγινε μια 60

διόρθωση. Με την ιδιότητα datetime μπορούμε να προσθέσουμε την ημερομηνία κατά την οποία έγινε η διόρθωση. Σύνταξη:

Παράδειγμα:

Εισαγωγή δεικτών και εκθετών Για να εισάγουμε στο κείμενο δείκτη και εκθέτη χρησιμοποιούμε τα στοιχεία sub και sup. Δείκτης (subscript) Σύνταξη: Εκθέτης(superscript) Σύνταξη:

Επισήμανση κειμένου το οποίο δεν ισχύει πλέον. Για να επισημάνουμε ένα μέρος ενός κειμένου το οποίο δεν ισχύει πλέον χρησιμοποιούμε το στοιχείο s. Σύνταξη: Παράδειγμα:

Παράδειγμα 21. Στοιχεία del, ins, sub, super, s Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex21-del-ins-sub-super-s.html 61

Κώδικας παραδείγματος 21:

Οθόνη browser παραδείγματος 21:

Κατεύθυνση κειμένου Σε κάποιες γλώσσες η φορά ανάγνωσης είναι από τα δεξιά προς τα αριστερά. Σε αυτές τις περιπτώσεις δίνουμε την ιδιότητα

στο στοιχείο που περικλείει γλώσσα που

διαβάζεται από δεξιά προς τα αριστερά. Παράδειγμα: Στο παράδειγμα αυτό ορίζουμε ότι το κείμενο της συγκεκριμένης παραγράφου είναι σε Εβραϊκή Γλώσσα και θα διαβαστεί από δεξιά προς τα αριστερά.

62

3.3 Βελτίωση προσπελασιμότητας WAI-ARIA Η WAI-ARIA είναι τα αρχικά των λέξεων Web Accessibility Initiative’s Accessible- Rich Internet Applications (Πρωτοβουλία Προσπελασιμότητας Ιστού-Εφαρμογές internet Εμπλουτισμένης Προσπελασιμότητας). Η

WAI-ARIA1

είναι

στην

ουσία

ένα

σύνολο

προδιαγραφών

που

καλύπτει

σημασιολογικά κενά της HTML5. Όπως για παράδειγμα το σημασιολογικό κενό που υπάρχει στην HTML5 για τη σήμανση του κύριου περιεχομένου της οθόνης. Σε περίπτωση που υπάρχει επικάλυψη της HTML και της WAI-ARIA η υποστήριξη των Browsers γέρνει συνήθως στην πλευρά των Browsers. Η WAI-ARIA έρχεται να προσδιορίσει τις ακόλουθες περιοχές μιας ιστοσελίδας: Application, banner, complementary, contentinfo, form, main, navigation και search. role Application: Είναι μία περιοχή που δηλώνεται ως web εφαρμογή σε αντιδιαστολή με ένα web κείμενο. Όταν ο επισκέπτης εισέλθει στην περιοχή αυτή, τότε δεν ισχύει ο κλασσικός τρόπος πλοήγησης αλλά ο τρόπος πλοήγησης της εφαρμογής. role banner: Ο χαρακτηρισμός της περιοχής banner έχει να κάνει με την τοποθεσία της περιοχής και όχι με το περιεχόμενο. Πιο αναλυτικά μιλάμε για την οριζόντια περιοχή που βρίσκεται στην κορυφή μιας ιστοσελίδας και είναι συνήθως ενταγμένη σε ένα στοιχείο header και είναι μοναδική για κάθε ιστοσελίδα. Το banner περιέχει συνήθως το λογότυπο ή την ονομασία της εταιρείας και εκτείνεται σαν μια λωρίδα σε όλο το πλάτος της ιστοσελίδας. role main: Είναι περιοχή στην οποία τοποθετείται το κύριο περιεχόμενο μιας σελίδας και χρησιμοποιείται σχεδόν σε όλες τις περιπτώσεις μία μόνο φορά. Μπορεί να ενσωματωθεί σε ένα στοιχείο article, div ή section.

1

http://www.w3.org/TR/wai-aria 63

role complementary: Είναι μια περιοχή στην οποία τοποθετείται μια ενότητα για να υποστηρίζει το κύριο κείμενο, συνδέεται μαζί του αλλά μπορεί να σταθεί και μόνη της. Συνήθως εντάσσεται σε ένα στοιχείο aside το οποίο είναι ισοδύναμο. Μπορεί να χρησιμοποιηθεί περισσότερες από μία φορές. role content info: Είναι μια ενότητα η οποία εντάσσεται σε ένα στοιχείο footer στο υποσέλιδο μιας σελίδας. Περιέχει τις πληροφορίες για το συγγραφέα, πνευματικά δικαιώματα κτλ του γονικού εγγράφου. Τοποθετείται μία φορά στην ιστοσελίδα. role form: Επικαλύπτεται από το αντίστοιχο στοιχείο form της HTML5 και είναι στην ουσία περιττός. role navigation: Είναι ισοδύναμο με το στοιχείο nav της HTML5 όπου συγκεντρώνονται τα σημαντικότερα στοιχεία πλοήγησης της ιστοσελίδας, για αυτό το λόγο την ενσωματώνουμε

σε

ένα

στοιχείο

nav.

Μπορούμε

να

τη

χρησιμοποιήσουμε

περισσότερες από μία φορές. role search: Ορίζει μια περιοχή αναζήτησης ενσωματωμένη σε ένα στοιχείο form. Κλάσεις και αναγνωριστικά στοιχείων id Ιδιότητα Class Σύνταξη: Η ιδιότητα class δε χρησιμοποιείται μόνο για την εφαρμογή στυλ CSS. Χρησιμοποιείται και στη σημασιολογία της HTML5. Στην κάθε κλάση μπορούμε να αντιστοιχίσουμε, να εντάξουμε ένα ή περισσότερα στοιχεία. Για

να

το

πετύχουμε

αυτό

γράφουμε

στην

ετικέτα

αρχής

του

στοιχείου

. Όπως θα παρατηρήσατε, μπορούμε ένα στοιχείο να το εντάξουμε σε περισσότερες από μία κλάσεις. Αν συμβαίνει αυτό, τότε δίπλα από το όνομα της πρώτης κλάσης αφήνουμε ένα κενό, γράφουμε το όνομα της δεύτερης κλάσης κτλ και στο τέλος κλείνουμε τα εισαγωγικά. Κάθε στοιχείο μπορεί να αντιστοιχηθεί σε περισσότερες από μία κλάσεις και σε κάθε κλάση μπορούν να αντιστοιχηθούν οποιαδήποτε σύνολα από στοιχεία. Ιδιότητα Id Για να αντιστοιχίσουμε ένα στοιχείο σε ένα όνομα id γράφουμε στην ετικέτα του στοιχείου

. Οι περιορισμοί για το όνομα είναι να μην Ξεκινά με αριθμό και να

μην περιλαμβάνει κενά διαστήματα. 64

Σε κάθε σελίδα ενός website, το id είναι μοναδικό. Απαγορεύεται δηλαδή στην ίδια σελίδα να υπάρχουν δύο στοιχεία με το ίδιο id. Δεν απαγορεύεται ένα id να έχει αντιστοιχηθεί σε μια άλλη σελίδα με ένα άλλο στοιχείο, αυτό όμως δεν συνηθίζεται. Σημείωση: Με τις ιδιότητες class και id είναι ευκολότερο να εξεργαζόμαστε τα στοιχεία είτε σαν ομάδες(class) είτε σαν μεμονωμένα (id). Εικόνα 1. Βελτίωση προσπελασιμότητας WAI-ARIA

ΥΠΟΕΝΟΤΗΤΑ 4. ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΤΕΤΑΓΜΕΝΩΝ ΚΑΙ ΜΗ ΔΙΑΤΕΤΑΓΜΕΝΩΝ ΛΙΣΤΩΝ, DROPDOWN LISTS, RADIO BUTTONS, TEXT EFFECTS, ΕΙΣΑΓΩΓΗ METER ΚΑΙ PROGRESS BAR

65

4.1 Διατεταγμένη Λίστα Για να δημιουργήσουμε μια διατεταγμένη λίστα πληκτρολογούμε και τέλος της λίστας και

και

για αρχή

για κάθε της στοιχείο.

Σύνταξη:

4.2 Μη Διατεταγμένη Λίστα Για να δημιουργήσουμε μια μη διατεταγμένη λίστα πληκτρολογούμε αρχή και τέλος της λίστας και

και

για

για κάθε της στοιχείο.

Σύνταξη:

Για όλες τις λίστες διατεταγμένες και μη μπορώ να επιλέξω σημειωτές με την παρακάτω ιδιότητα τοποθετώντας την στο στοιχείο head της HTML:

Βασικοί σημειωτές:

¾ disk (●) ¾ circle (○) ¾ square (▪) ¾ decimal (1,2,3,…) ¾ upper-alpha (A,B,C,…) ¾ lower-alpha (a,b,c,…) 66

¾ upper-roman (I,II,III,IV,…) ¾ lower-roman (i, ii,iii,iv…) Πίνακας 3. Ειδικοί σημειωτές για λίστες διατεταγμένες και μη

Πηγή: w3schools.com/cssref/pr_list-style-type.asp

Σημείωση: Μπορούμε να δημιουργήσουμε εμφωλευμένες λίστες η μία μέσα στην άλλη ακόμα και συνδυασμό διατεταγμένων και μη διατεταγμένων λιστών. Παράδειγμα 22. Εισαγωγή λιστών Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex22-lists.html

67

Κώδικας παραδείγματος 22:

Οθόνη browser παραδείγματος 22:

4.3 Εισαγωγή dropdown list Για να εισάγουμε ένα dropdown list κάνουμε τα ακόλουθα βήματα: I.

Ανοίγουμε ετικέτα παραγράφου

και αμέσως μετά γράφουμε το κείμενο που

θέλουμε να εμφανιστεί αριστερά του dropdown list. II.

Πληκτρολογούμε την ετικέτα πληκτρολογούμε

με την ιδιότητα

και δίπλα

και κλείνουμε την ετικέτα select. Η τιμή της

ιδιότητας size είναι ένας φυσικός αριθμός που μας δείχνει πόσες επιλογές θα είναι ορατές όταν δεν έχουμε πατημένο το αριστερό πλήκτρο του Mouse στο βελάκι του dropdown list. III.

Στη συνέχεια πληκτρολογούμε τις επιλογές του dropdown list ανάμεσα στις ετικέτες

και

τη μία κάτω από την άλλη. 68

IV.

Όταν τελειώσουν οι επιλογές, τότε κλείνουμε με τις ετικέτες τέλους των στοιχείων select, p.

Παράδειγμα:

Παράδειγμα 23. Εισαγωγή dropdown list Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex23-dropdown_list.html Κώδικας παραδείγματος 23:

Οθόνη browser παραδείγματος 23:

69

4.4 Εισαγωγή radio buttons Για να εισάγουμε μια λίστα από radio buttons μέσα σε ένα στοιχείο p γράφουμε τις παρακάτω γραμμές:

Η ιδιότητα value είναι η τιμή της επιλογής του radio button και η επιλογή μπαίνει όταν έχει επιλεγεί το συγκεκριμένο radio button. Παράδειγμα 24. Εισαγωγή radio buttons Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex24-radio_buttons.html Κώδικας παραδείγματος 24:

Οθόνη browser παραδείγματος 24:

70

4.5 Text effects και progress bar με τη βοήθεια της HTML5 Στα ακόλουθα υποεδάφια θα δούμε πώς να εισάγουμε κείμενο που αναβοσβήνει και κείμενο που κινείται οριζόντια. 4.5.1 Εισαγωγή κειμένου που αναβοσβήνει Σε περίπτωση που θέλουμε μέρος του κειμένου να αναβοσβήνει το περικλείουμε μεταξύ των ετικετών

.

Σύνταξη: Παράδειγμα:

4.5.2 Εισαγωγή κειμένου που κινείται οριζόντια Για να εισάγουμε κείμενο που κινείται οριζόντια χρησιμοποιούμε το στοιχείο marquee. Στην απλή μορφή του έχει την ακόλουθη σύνταξη: Σαν προεπιλογή η ταχύτητα είναι μέτρια και η κατεύθυνση της οριζόντιας κίνησης είναι από δεξιά προς τα αριστερά. Αν θέλουμε μπορούμε στην ετικέτα αρχής να προσθέσουμε την ταχύτητα της κίνησης με την ιδιότητα scrollamount, στην οποία όσο αυξάνουμε τον αριθμό τόσο μεγαλώνει η ταχύτητα κίνησης. Επίσης μπορούμε να προσθέσουμε και την ιδιότητα direction για να αλλάξουμε τη φορά της κίνησης. Έτσι γράφουμε:

¾ Για κίνηση από δεξιά προς τα αριστερά: ¾ Για κίνηση από αριστερά προς τα δεξιά:

Παράδειγμα:

71

Παράδειγμα 25. Εισαγωγή Text effects Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex25-visual_effects.html Κώδικας παραδείγματος 25:

Οθόνη browser παραδείγματος 25:

4.6 Εισαγωγή meter και progress bar Meter bar: Για να εισάγουμε ένα οριζόντιο bar το οποίο θα απεικονίζει κάποιο ποσοστό αναλογίας όπως τα ποσοστά των εκλογών, χρησιμοποιούμε το στοιχείο meter και κάνουμε τα ακόλουθα βήματα: 1.

Ανοίγουμε ετικέτα παραγράφου

και αμέσως μετά γράφουμε το κείμενο που

θέλουμε να εμφανιστεί αριστερά του meter bar. 2.

Πληκτρολογούμε την ετικέτα

με τις ιδιότητες

,

και

για να προσδιορίσουμε την ελάχιστη, τη μέγιστη και την επιλεγμένη τιμή του meter bar. 3.

Όταν τελειώσουν οι επιλογές τότε κλείνουμε με τις ετικέτες τέλους των στοιχείων meter, p.

72

Παράδειγμα 26. Εισαγωγή meter bar Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex26-meter.html Κώδικας παραδείγματος 26:

Οθόνη browser παραδείγματος 26:

Εισαγωγή progress bar Για να εισάγουμε ένα progress bar χρησιμοποιούμε το στοιχείο progress το οποίο χρησιμοποιείται κυρίως στο δυναμικό προγραμματισμό με τη χρήση Javascript για να ανανεώνει την τιμή της προόδου μιας ιδιότητας όπως η φόρτωση ενός αρχείου. Το στοιχείο Progress συνδυάζεται με 3 ιδιότητες: max για το σύνολο της εργασίας, value για το ποσοστό ολοκλήρωσης και form για να συσχετίσουμε προαιρετικά το στοιχείο progress. Σύνταξη: 73

Παράδειγμα:

Παράδειγμα 27. Εισαγωγή progress bar Για αυτό το παράδειγμα θα δούμε από το συνοδευτικό υλικό το αρχείο: ex27-progress.html Κώδικας παραδείγματος 27:

Οθόνη browser παραδείγματος 27:

74

Σύνοψη Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:

• Οι κληρονομικότητες παίζουν σπουδαίο ρόλο στην HTML5. • Για να δημιουργήσετε μία παράγραφο πρέπει να εισαγάγετε το στοιχείο p και να επιφέρετε τροποποιήσεις σε αυτή με την ιδιότητα style.

• Μπορείτε να εισάγετε σε ένα κείμενο HTML διευθύνσεις και ημερομηνίες με τα στοιχεία address και time.

• Μπορείτε να ορίσετε ρόλους σε περιοχές της ιστοσελίδας σας με τη βοήθεια της WAI ARIA βελτιώνοντας την προσπελασιμότητα της ιστοσελίδας σας.

• Μπορείτε να αντιστοιχίσετε στοιχεία της HTML5 σε κλάσεις και αναγνωριστικά id κάνοντας πιο εύκολη τη διαχείριση και επεξεργασία τους.

• Μπορείτε να εισάγετε περιοχές κειμένου, διατεταγμένες και μη διατεταγμένες λίστες με τα αντίστοιχα στοιχεία της HTML5

• Μπορείτε να εισάγετε εύκολα radio Buttons και dropdown lists με τις μεθόδους που περιγράφηκαν στην ενότητα 4

• Μπορείτε να εισαγάγετε εύκολα progress, meter bar και text effects.

75

76

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

Προγράμματα Συμπληρωματικής Εκπαίδευσης

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1920 - HTML 5 ΚΑΙ JAVASCRIPT: ΤΑ ΠΡΩΤΑ ΒΗΜΑΤΑ ΣΤΟ WEB DEVELOPMENT

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 3. ΕΙΣΑΓΩΓΗ ΚΑΙ ΜΟΡΦΟΠΟΙΗΣΗ ΕΙΚΟΝΑΣ

77

78

Εισαγωγικές Παρατηρήσεις Στην πρώτη υποενότητα θα αναλυθούν οι κατηγορίες και τα formats των εικόνων που υποστηρίζει η HTML5. Επίσης θα αναλυθεί η εισαγωγή εικόνας σε ιστοσελίδα καθώς και οι βασικές μορφές επεξεργασίας της εικόνας με τη βοήθεια του Photoshop CC. Τέλος, θα αναλυθεί η εισαγωγή και οι επιλογές παραμετροποίησης video και ήχου και θα αναφερθούν τα formats audio και video που υποστηρίζει η HTML5. Στη δεύτερη υποενότητα θα αναλυθούν οι δυνατότητες σχεδίασης που προσφέρει το στοιχείο Canvas της HTML5. Στην τρίτη υποενότητα θα αναλυθεί ο τρόπος που συνδέονται οι σελίδες μεταξύ τους μέσα σε ένα website καθώς και συνδέσεις σε άλλες σελίδες διαφορετικών websites. Επίσης θα αναλυθεί ο τρόπος που δημιουργούμε σημεία αγκύρωσης για να κάνουμε την πλοήγηση του χρήστη ταχύτερη και αποδοτικότερη.

79

ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ Αρχικά θα παρουσιαστούν οι κατηγορίες των εικόνων που χρησιμοποιούνται στο Web έτσι όπως ορίζονται στο επίσημο website W3org για το οποίο έχει γίνει αναφορά σε προηγούμενη διδακτική ενότητα. Ανάλογα με το είδος της εικόνας πρέπει να υπάρχει και το αντίστοιχο εναλλακτικό κείμενο στην περίπτωση που ο χρήστης για οποιονδήποτε λόγο δεν μπορεί να δει τις εικόνες.

1.1 Είδη εικόνας σύμφωνα με το W3org Informative images: Εικόνες που χρησιμοποιούνται για την εικονογράφηση κειμένων. Το εναλλακτικό κείμενο πρέπει να είναι μία σύντομη περιγραφή της κύριας πληροφορίας που παρουσιάζεται στη φωτογραφία. Decorative images: Αν ο μοναδικός σκοπός της εικόνας είναι η διακόσμηση, τότε το εναλλακτικό κείμενο θα είναι κενό ή ο τίτλος της φωτογραφίας. Functional images: Στην περίπτωση που χρησιμοποιούνται εικόνες ως Buttons ή συνδέσεις (links), το εναλλακτικό κείμενο θα πρέπει να περιγράφει περισσότερο τη λειτουργία τους και όχι την εικόνα. Images of text: Εικόνες που περιέχουν κείμενο. Γενικά εικόνες που περιέχουν κείμενο πρέπει να αποφεύγονται, αλλά αν υπάρχουν, τότε το εναλλακτικό κείμενο θα πρέπει να περιέχει τις ίδιες ακριβώς λέξεις. Complex images such as graphs and diagrams: Στην περίπτωση που μια εικόνα αναπαριστά ένα γράφημα ή διάγραμμα, τότε το εναλλακτικό κείμενο θα πρέπει να περιέχει τις πληροφορίες που αναδεικνύονται από το γράφημα ή το διάγραμμα. Groups of images: Αν υπάρχει μια ομάδα εικόνων τότε το εναλλακτικό κείμενο θα πρέπει να μεταδίδει την πληροφορία όλης της ομάδας. Image maps: Στην περίπτωση αυτή το εναλλακτικό κείμενο θα πρέπει να περιέχει το σκοπό της κάθε σύνδεσης ξεχωριστά.

1.2 Προδιαγραφές εικόνων για web Οι μορφές που υποστηρίζονται είναι οι jpeg, gif και png. Όταν ενσωματώνουμε εικόνες σε ιστοσελίδες πρέπει να έχουμε υπόψη μας τα παρακάτω:

80

1.

Ο χρήστης μπορεί να ανοίξει την ίδια ιστοσελίδα από διαφορετικά μέσα (desktops, laptops, smart tvs, tablets, mobile phones κ.τ.λ.).

2.

Υποτίθεται ότι ο χρήστης «διαβάζει» το περιεχόμενο μιας ιστοσελίδας σε πραγματικό χρόνο που σημαίνει ότι δεν διαθέτει χρόνο και υπομονή να περιμένει να φορτώσει ο Browser εικόνες υψηλής ανάλυσης. Επίσης πρέπει να λαμβάνεται υπόψη από τον Web Developer ότι σίγουρα θα υπάρχουν και χρήστες με ταχύτητα σύνδεσης μικρότερη από τη δική του.

3.

Η εικόνα πρέπει να ανήκει σε κάποια από τις κατηγορίες που αναλύθηκαν προηγουμένως.

Ανάλυση Μία εικόνα χωρίζεται σε χ γραμμές και σε y στήλες. Η τομή μιας γραμμής και μιας στήλης αποτελεί το συγκεκριμένο εικονοστοιχείο (pixel). Έτσι

για

παράδειγμα

4064x2704=10989056

μία

κάμερα

είναι

μία

που

υποστηρίζει

κάμερα

περίπου

ανάλυση 11

φωτογραφίας

Megapixels

(1

Megapixels=1024x1024= 1048576 pixels) Το μέγεθος της φωτογραφίας που θα εμφανιστεί στην οθόνη του Browser εξαρτάται από την ανάλυση της οθόνης του χρήστη. Έτσι αν η οθόνη έχει ανάλυση 100 dpi (Dots Per Inch) σημαίνει ότι σε μια ίντσα περιέχονται 100 pixels οπότε το μέγεθος της εικόνας θα είναι (4064/100) x(2704/100)= 40x27 ίντσες, το οποίο είναι πολύ μεγάλο. Πρέπει να λάβουμε υπόψη μας ότι οι χρήστες χρησιμοποιούν διαφορετικά υπολογιστικά συστήματα και αναλύσεις οθονών κατά την πλοήγησή τους στο διαδίκτυο Ένα άλλο παράδειγμα με ανάλυση της οθόνης είναι όταν στο Desktop των Windows αυξήσουμε την ανάλυση. Τότε παρατηρούμε τα εικονίδια στην επιφάνεια εργασίας να έχουν μεγαλύτερη λεπτομέρεια αλλά και μικρότερο μέγεθος. Όταν κάνουμε δεξί κλικ με το ποντίκι σε μια εικόνα στο web μπορούμε να επιλέξουμε προβολή πληροφοριών εικόνας και να δούμε την ανάλυση, το μέγεθος του αρχείου της εικόνα κ.τ.λ. Jpeg πρότυπο Το Jpeg πρότυπο (Joint Photographic Experts Group) το χρησιμοποιούμε όταν πρόκειται να ενσωματώσουμε σχετικά μεγάλες εικόνες με μεγάλο βάθος χρώματος 24bit, και πιο συγκεκριμένα φωτογραφίες στις σελίδες του website.Το πρότυπο JPEG

81

παρέχει αρκετά καλή συμπίεση και συνιστάται για μέτριες και μεγάλες εικόνες -γιατί για τις πολύ μικρές το όφελος ως προς τη χωρητικότητα δεν είναι μεγάλο. Ο λόγος συμπίεσης είναι ρυθμιζόμενος και -καθώς είναι φυσικό- αυξάνοντας τη συμπίεση μικραίνει το μέγεθος του αρχείου της φωτογραφίας μειώνεται όμως αναλογικά και η ποιότητά της. Επειδή μόλις αποθηκευθούν οι εικόνες σε συμπιεσμένη μορφή JPEG τότε αυτόματα λόγω συμπίεσης χάνεται ένα μέρος της πληροφορίας, καλό είναι για να έχουμε το καλύτερο αποτέλεσμα να αποθηκεύουμε τις φωτογραφίες αρχικά σε μη συμπιεσμένη μορφή και κάθε φορά που θέλουμε να τις επεξεργαστούμε να δουλεύουμε πρώτα την ασυμπίεστη μορφή και πριν τις ενσωματώσουμε σε ιστοσελίδα να τις αποθηκεύουμε σε μορφή JPEG. Στο web χρησιμοποιείται επίσης και το JPG Progressive format ειδικά σε φωτογραφίες υψηλής ανάλυσης. Με τη μέθοδο αυτή η φωτογραφία αποθηκεύεται σε διαφορετικά στάδια και ο χρήστης μπορεί να έχει μία προεπισκόπηση της φωτογραφίας πριν αυτή εμφανιστεί με τη μέγιστη λεπτομέρεια. Έτσι, με αυτό το format η εικόνα υψηλής ανάλυσης στην αρχή φαίνεται θολή και σιγά σιγά αποκαλύπτεται η λεπτομέρεια της. Η μορφή JPG δεν υποστηρίζει διαφάνεια. Η διαφάνεια χρησιμεύει σε σύνθετες διατάξεις εικόνων όπου η μία εμφανίζεται πίσω από την άλλη δημιουργώντας σε αρκετές περιπτώσεις εξαιρετικά αποτελέσματα. Επίσης το πρότυπο JPG δεν υποστηρίζει κίνηση. PNG πρότυπο 8 bit και 24 bit Το PNG πρότυπο 8 bit υποστηρίζει μόνο 28=256 χρώματα και γι’ αυτόν το λόγο είναι κατάλληλο για εικονίδια και λογότυπα, ενώ το PNG πρότυπο 24 bit υποστηρίζει 224=16777216 χρώματα και είναι κατάλληλο και για φωτογραφίες. Το πρότυπο PNG υποστηρίζεται από καλύτερο αλγόριθμο συμπίεσης σε σχέση με το πρότυπο JPG, και υποστηρίζει διαφάνεια, αλλά όχι και κίνηση εικόνων. GIF πρότυπο Υποστηρίζει κινούμενες εικόνες και διαφάνεια, αλλά έχει περιορισμένη 8bit παλέτα χρωμάτων. Μία τεχνική που χρησιμοποιείται για να καλύψει κάπως αυτή την περιορισμένη επιλογή χρωμάτων είναι το dithering. Αυτή η τεχνική βασίζεται στη μίξη των χρωμάτων σε γειτονικά pixels δημιουργώντας την ψευδαίσθηση της μίξης και παραγωγής νέων χρωμάτων. Εάν ο χρήστης όμως

82

μεγεθύνει την εικόνα θα δει το χρώμα που βλέπει είναι ένας ψηφιακός θόρυβος από χρώματα γειτονικών pixels. WebP Είναι ένα καινούργιο και πολλά υποσχόμενο format για εικόνες στο Web, το οποίο παρέχει συμπίεση με απώλειες και χωρίς απώλειες. Στην χωρίς απώλειες εκδοχή οι εικόνες σε WebP μορφή είναι 26% μικρότερες στο μέγεθος από τις αντίστοιχες PNG ενώ στην απωλεστική εκδοχή είναι 25-34% μικρότερες σε σχέση με το JPEG format. Το

WebP format προσφέρει και δυνατότητα διαφάνειας χωρίς απώλειες με

περισσότερα bytes. Υπάρχει και η διαφάνεια στην εκδοχή με συμπίεση και απώλειες η οποία παρέχει 3 φορές μικρότερη χωρητικότητα σε σχέση με τις αντίστοιχες PNG. Η Google φιλοδοξεί με αυτό το format να αντικαταστήσει όλα τα υπόλοιπα και προσπαθεί να πείσει την Apple και τη Mozilla να τα ενσωματώσουν στους αντίστοιχους Safari και Firefox Browsers.

Παράδειγμα 1. Διαφορά Jpeg format από WebP format Δείτε από το συνοδευτικό υλικό το αρχείο: 1.1.WebP.html

1.3 Εισαγωγή εικόνας σε ιστοσελίδα Για να εισάγουμε μια εικόνα σε μια σελίδα πληκτρολογούμε

Μετά το src ακολουθεί το όνομα του αρχείου μαζί με το path στο οποίο βρίσκεται. Στο width, height ανάμεσα στα αντίστοιχα εισαγωγικά πληκτρολογούμε τις διαστάσεις πλάτος X ύψος της εικόνας. Μέσα στα εισαγωγικά που ακολουθούν μετά το alt πληκτρολογούμε το εναλλακτικό κείμενο που θα εμφανίζεται στην περίπτωση όπου ο Browser δεν μπορεί για οποιονδήποτε λόγο να εμφανίσει την εικόνα στην οθόνη ή αν ο χρήστης έχει απενεργοποιήσει

την

εμφάνιση

εικόνων.

Στις

κατηγορίες

των

εικόνων

που

παρουσιάσαμε σύμφωνα με τον οργανισμό W3c υπάρχουν και οδηγίες για το εναλλακτικό κείμενο ανά κατηγορία.

83

Τοποθέτηση εικόνας σε συγκεκριμένη θέση Η θέση μπορεί να προσδιοριστεί με τους εξής τρόπους: Position Absolute: Αυτή η τιμή προσδιορίζει την απόλυτη θέση σε σχέση με το γονικό στοιχείο. Αν δεν περιέχεται μέσα σε κάποια άλλη ετικέτα, θεωρείται το στοιχείο body ως γονικό στοιχείο και το στοιχείο div θα έχει θέση σε σχέση με την επάνω αριστερά γωνία του Browser. Τη θέση του γονικού στοιχείου την προσδιορίζουμε σαν relative. Position relative: Προσδιορίζεται η θέση ενός στοιχείου σε σχέση με αυτή που είχε αρχικά στο έγγραφο. Από τη μετακίνηση δεν επηρεάζονται τα υπόλοιπα στοιχεία της ιστοσελίδας ακόμα και αν αυτή η μετακίνηση σημαίνει επικάλυψη. Position Fixed: Προσδιορίζεται η θέση ενός στοιχείου η οποία δεν αλλάζει ακόμη και αν υπάρχει scroll up ή scroll down. Προσδιορισμός απόλυτης θέσης Έστω ότι θέλουμε να τοποθετήσουμε δύο φωτογραφίες χρησιμοποιώντας relative και absolute position: Στην ενότητα head γράφουμε τις εξής εντολές: Ανοίγουμε μία ετικέτα style Με το σύμβολο # και ένα όνομα π.χ. #image1 προσδιορίζουμε τη θέση του αντίστοιχου στοιχείου div που θα χρησιμοποιήσουμε στην ενότητα body:

# Κλείνουμε με μία ετικέτα style

84

Στο στοιχείο body της σελίδας θα προσθέσουμε τις ακόλουθες γραμμές κώδικα

Το div image2 έχει για γονικό στοιχείο το div image1 και η απόλυτη θέση του div image2 προσδιορίζεται από τη θέση του γονικού div image1. Περισσότερες επιλογές θα παρουσιαστούν στη διδακτική ενότητα που αναφέρεται στο CSS.

Παράδειγμα 2. Εισαγωγή δύο εικόνων με σχετική θέση της μίας ως προς την άλλη Δείτε από το συνοδευτικό υλικό το αρχείο: 1.2.insert-images-positions.html Στο παράδειγμα 2, η δεύτερη εικόνα έχει position absolute 100 pixels κάτω και 205 pixels αριστερά από την πρώτη εικόνα που έχει position relative.

85

Παράδειγμα 2 - Κώδικας:

Παράδειγμα 2 - Οθόνη Browser:

1.4 Βασικές λειτουργίες του Adobe Photoshop CC Η καινούργια cloud πλατφόρμα της Adobe μας δίνει πολλές δυνατότητες για επεξεργασία κειμένου και εικόνας και πλέον σε οικονομικές τιμές. Και αυτό διότι μπορεί κάποιος να πληρώσει μία εφαρμογή επεξεργασίας μόνο όσο χρόνο τη χρειάζεται. Έτσι 86

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

ενότητα

αυτή

θα

γίνει

σύντομη

παρουσίαση

συγκεκριμένων

μεθόδων

επεξεργασίας που προσφέρει το Adobe Photoshop CC. Adobe Photoshop CC: Για να εγκαταστήσουμε το Photoshop CC πηγαίνουμε στην τοποθεσία: https://creative.adobe.com/products/download/photoshop για να κατεβάσουμε και να εγκαταστήσουμε τη δοκιμαστική έκδοση που μας δίνει τη δυνατότητα να δοκιμάσουμε το Photoshop CC για ένα μήνα. Στη δοκιμαστική έκδοση περιλαμβάνονται όλες οι δυνατότητες της εφαρμογής. Από το κεντρικό Menu του Photoshop μπορούμε να αλλάξουμε βασικές ρυθμίσεις της φωτεινότητας και της αντίθεσης των χρωμάτων. Σε αυτή την ενότητα θα μάθουμε πώς να κάνουμε resize, crop στις εικόνες μας. Επίσης θα μάθουμε πώς να αναμιγνύουμε εικόνες και να χρησιμοποιούμε την επιλογή save as web. Βασικές ρυθμίσεις Ανοίγουμε μέσα από το Photoshop μία εικόνα και μπορούμε να εφαρμόσουμε τις ακόλουθες βασικές ρυθμίσεις: Vibrance και Saturation: Και τα δύο αυξάνουν την ένταση των χρωμάτων αλλά με διαφορετικά κριτήρια. Όταν επιλέγουμε να αλλάξουμε τον κορεσμό των χρωμάτων (saturation) αυξάνουμε την ένταση όλων των χρωμάτων με αποτέλεσμα χρώματα που είναι ήδη κορεσμένα (έχουν μεγάλη ένταση) να υποστούν και αυτά τη συγκεκριμένη αλλαγή έχοντας ως συνέπεια την αλλοίωση της φωτογραφίας. Η αλλοίωση της φωτογραφίας σημαίνει στην συγκεκριμένη περίπτωση ότι χάνεται η λεπτομέρεια (clipping) επειδή συγκεκριμένες περιοχές με κυρίαρχο κάποιο χρώμα σε αρκετές διαβαθμίσεις χάνουν αυτές τις διαβαθμίσεις, επειδή όλα τα γειτονικά pixels φαίνονται να έχουν το ίδιο χρώμα. Για αυτό το λόγο η αλλαγή του κορεσμού των χρωμάτων πρέπει να γίνεται επιλεκτικά στα χρώματα που δεν είναι κορεσμένα. Αντίθετα στην επιλογή vibration αυξάνεται ή ένταση των χρωμάτων αλλά μόνο εκείνων που η ένταση δεν είναι υψηλή, ενώ τα χρώματα με υψηλή ένταση δεν επηρεάζονται. Δεν 87

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

να

επιλέξουμε

vibration

η

saturation

επιλέγουμε

μέσα

από

το

menu

image/adjustments/vibration ή saturation Φωτεινότητα και contrast: Για να αλλάξουμε τη φωτεινότητα και την αντίθεση επιλέγουμε image/adjustments/Brightness/Contrast. Για να αλλάξουμε το μέγεθος της εικόνας χρησιμοποιούμε Image/image size. Αυτή η δυνατότητα μας επιτρέπει να αλλάξουμε το μέγεθος και την ανάλυση της εικόνας ακριβώς όπως χρειάζεται για να την συμπεριλάβουμε στην ιστοσελίδα. Επίσης μειώνεται και το μέγεθος του αρχείου της εικόνας που είναι πολύ σημαντικό για την ταχύτητα φόρτωσής της στην ιστοσελίδα. Εισαγωγή κειμένου: Μπορούμε να εισάγουμε κείμενο από την αριστερή κατακόρυφη εργαλειοθήκη επιλέγοντας το εικονίδιο “Τ”. Στη εισαγωγή κειμένου έχουμε μία τεράστια γκάμα από γραμματοσειρές στις οποίες μπορούμε να αλλάζουμε το μέγεθος τους καθώς και άλλες ρυθμίσεις. Επιλογή Save for web: Στην επιλογή Save for web μπορούμε να αποθηκεύσουμε την εικόνα που επεξεργαστήκαμε στα συνηθισμένα formats καθώς και σε μορφή Html. Ανάμιξη εικόνων: Μπορούμε να συνδυάσουμε εικόνες ανοίγοντας ένα καμβά και έπειτα με αντιγραφή, επικόλληση και αλλαγή κλίμακας να φτιάξουμε ένα κολάζ από φωτογραφίες. Εργαλείο clone stamp: Με αυτό το εργαλείο μπορούμε να αναπαράγουμε κομμάτια μιας εικόνας μέσα στην ίδια ή και σε διαφορετική εικόνα. Θα επανέλθουμε στο Photoshop δίνοντας περισσότερες λεπτομέρειες. Σκοπός για τη συγκεκριμένη ενότητα ήταν να γίνει μία συνοπτική και μικρής έκτασης παρουσίαση βασικών λειτουργιών του Photoshop που όμως αφορούν την ενσωμάτωσή τους σε ιστοσελίδα.

88

Εικόνα 1. Βασική οθόνη Photoshop

1.5 Εισαγωγή Video σε Html σελίδα Μορφές Video που υποστηρίζει η HTML5 Οι μορφές video που υποστηρίζει η HTML5 είναι οι ακόλουθες i.

Ogg Theora με πρόεκταση. ogg

ii.

Mp4 με προέκταση. mp4

iii.

WebM με προέκταση. webm

Για να εισάγουμε video σε μια ιστοσελίδα γράφουμε

Στον κενό χώρο στην ετικέτα έναρξης μπορούμε να προσθέσουμε τις παρακάτω γραμμές:

¾ Αν θέλουμε να εμφανίζεται μια αρχική εικόνα πριν ξεκινήσει το video:

89

¾ Για τις διαστάσεις προβολής του video: ¾ Αν θέλουμε το video να ξεκινά αυτόματα μαζί με την εμφάνιση της σελίδας: ¾ Για αυτόματη επανάληψη του video: ¾ Για σίγαση ήχου: ¾ Σε περίπτωση που θέλουμε ο Browser να μην φορτώνει κανένα στοιχείο του video, να φορτώνει μόνο τα μεταδεδομένα του όπως διαστάσεις μέγεθος κτλ, να αφήνει τη διαχείριση της φόρτωσης στο Browser αντίστοιχα. Η τελευταία επιλογή είναι και η προεπιλογή.

Στον κενό χώρο ανάμεσα στις ετικέτες

και

προσθέτουμε:

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

Άλλη μορφή εισαγωγής video (δεν προτείνεται ) είναι:

¾ Να δημιουργήσουμε μία σύνδεση και να ανοίγει το video σε ξεχωριστή σελίδα. Για να το πετύχουμε αυτό γράφουμε

90

Παράδειγμα 3. Εισαγωγή video Δείτε από το συνοδευτικό υλικό το αρχείο: 1.3.insert-video.html Στο πρώτο video που εμφανίζεται αριστερά στην οθόνη του Browser έχει ενεργοποιηθεί το autoplay και muted για σίγαση, για αυτό το λόγο ξεκινάει μόλις ανοίξουμε τη σελίδα, ενώ στο δεύτερο δεν έχει autoplay και έχει επιπλέον την επιλογή να φαίνεται σαν πρώτη σκηνή πριν ξεκινήσει το video μία εικόνα της επιλογής μας( επιλογή poster). Σημείωση: Όλες οι ρυθμίσεις των controls μπορούν να δηλωθούν και με πιο απλή μορφή αντί για loop=”loop” μπορούμε να γράψουμε μόνο loop στην ίδια θέση. Παράδειγμα 3 - Κώδικας:

91

Παράδειγμα 3 - Οθόνη Browser:

Παράδειγμα 4. Εισαγωγή video με link Δείτε από το συνοδευτικό υλικό το αρχείο: 1.4.insert-video-link.html Στο παράδειγμα 4 εισάγουμε το Video σαν σύνδεση απλή ή και με button. Μόλις γίνει επιλογή με το mouse θα ξεκινήσει το video σε νέο παράθυρο του Browser. Παράδειγμα 4 - Κώδικας:

92

Παράδειγμα 4 - Οθόνη Browser:

Σημείωση: Η ιδιότητα controls αναφέρεται στα χειριστήρια του Browser για το video.

1.6 Εισαγωγή ήχου σε μια σελίδα Οι μορφές audio που υποστηρίζει η HTML5 είναι οι ακόλουθες i.

Ogg Vorbis με πρόεκταση. ogg

ii.

Mp4 με προέκταση. mp4(εκτός από video κωδικοποιεί και ήχο)

iii.

Mp3 με προέκταση. mp3

iv.

Wav με προέκταση. wav

v.

AAC με προέκταση. aac

Για να εισάγουμε ήχο σε μια σελίδα, γράφουμε στο στοιχείο body: και στο κενό συμπληρώνουμε:

¾ Αν θέλουμε το audio να ξεκινά αυτόματα μαζί με την εμφάνιση της σελίδας: ¾ Για αυτόματη επανάληψη του audio: ¾ Για σίγαση ήχου:

93

¾ Σε περίπτωση που θέλουμε ο Browser να μην φορτώνει κανένα στοιχείο του audio, να φορτώνει μόνο τα μεταδεδομένα του όπως διαστάσεις μέγεθος κτλ, να αφήνει τη διαχείριση της φόρτωσης στο Browser. Η τελευταία επιλογή είναι και η προεπιλογή:

Παράδειγμα:

Παράδειγμα 5. Εισαγωγή audio Δείτε από το συνοδευτικό υλικό το αρχείο: αρχείο 1.5.insert-audio.html Στο παράδειγμα 5 εισάγουμε πηγή ήχου σε δύο εναλλακτικές μορφές. Παράδειγμα 5 - Κώδικας:

94

Παράδειγμα 5 - Οθόνη Browser:

ΥΠΟΕΝΟΤΗΤΑ 2. ΧΡΗΣΗ CANVAS ΤΗΣ HTML5 Για να χρησιμοποιήσουμε τις δυνατότητες του στοιχείου canvas της HTML5 θα χρησιμοποιήσουμε μερικές γραμμές κώδικα javascript χωρίς να τις αναλύσουμε, διότι η Javascript θα αναλυθεί εκτενώς σε επόμενες διδακτικές ενότητες. Για να χρησιμοποιήσουμε λοιπόν την ετικέτα

θα την ενσωματώσουμε σε ένα

script το οποίο θα αποτελεί μέρος του κώδικα HTML.

2.1 Γενικές αρχές σχεδιασμού με το Canvas της HTML5 Η αρχή των συντεταγμένων του καμβά της HTML5 είναι στην πάνω αριστερά γωνία όπως δείχνει η εικόνα 2. Για να ξεκινήσει η διαδρομή σχεδίασης πληκτρολογούμε και για να τελειώσει: Επίσης όταν επιλέγουμε χρώματα, μπορούμε να τα εισάγουμε σε οποιαδήποτε μορφή.

95

Εικόνα 2. Συντεταγμένες στον καμβά

2.2 Μέθοδος σχεδιασμού με τις δυνατότητες του στοιχείου Canvas της HTML5 Για

να

σχεδιάσουμε

χρησιμοποιώντας

το

στοιχείο

Canvas

της

HTML5

θα

ακολουθήσουμε τα παρακάτω βήματα: 1. Για να ορίσουμε το όνομα (id) και τις διαστάσεις του καμβά που θα χρησιμοποιήσουμε, πληκτρολογούμε την ετικέτα: 2. Πληκτρολογούμε

για να ορίσουμε την αρχή του σχεδιασμού επάνω στον

καμβά. 3. Πληκτρολογούμε Αντί για Mycanvas στα βήματα 1,3 μπορούμε να χρησιμοποιήσουμε άλλο όνομα, αρκεί να είναι το ίδιο στα βήματα 1 και 3. Ορίζουμε τη μεταβλητή canvas να παίρνει τιμές από τη μέθοδο document.getElementById η οποία επιστρέφει το στοιχείο με το συγκεκριμένο id μαζί με την τιμή του. Έπειτα γράφουμε: Η μέθοδος getContext επιστρέφει ένα αντικείμενο το οποίο περιέχει μεθόδους και ιδιότητες για σχεδιασμό με το στοιχείο canvas της HTML5. 4. Για να ξεκινήσουμε το σχεδιασμό πληκτρολογούμε:

96

5. Σε περίπτωση που θέλουμε να σχεδιάσουμε με διαφορετικό χρώμα και ιδιότητα από το προηγούμενο στον ίδιο καμβά, πληκτρολογούμε

και έπειτα

για το επόμενο σχήμα. 6. Πληκτρολογούμε

για να ορίσουμε το τέλος του σχεδιασμού επάνω στον

καμβά και το τέλος του script.

2.3 Σχεδίαση γραμμών (ευθύγραμμων τμημάτων) Για να σχεδιάσουμε μια γραμμή κάνουμε τα εξής: 1.

Πληκτρολογούμε

2.

Πληκτρολογούμε

για να μετακινήσουμε τη γραφίδα του καμβά

στο σημείο εκκίνησης της γραμμής, χωρίς να σχεδιαστεί κάποια γραμμή 3.

Πληκτρολογούμε

για να ορίσουμε το σημείο τερματισμού της

γραμμής. 4.

Πληκτρολογούμε

για να σχεδιαστεί η γραμμή. Στυλ Γραμμής

Τα στυλ της γραμμής είναι τα εξής 1. Linecap: Καθορίζει το στυλ των άκρων της γραμμής με τις τιμές butt, round, square για επίπεδα, στρογγυλεμένα ή τετράγωνα άκρα αντίστοιχα. Σύνταξη: 2. Linejoin: Καθορίζει την κορυφή της γωνίας που σχηματίζουν οι δύο γραμμές με τις τιμές bevel, round, miter για κοφτή, στρογγυλεμένη και μυτερή γωνία. Σύνταξη: 3. LineWidth: Προσδιορίζει το πάχος της γραμμής Σύνταξη: 4. Miterlimit: Προσδιορίζει το Μέγιστο μήκος της κορυφής της γωνίας δύο γραμμών. Σύνταξη:

97

Παράδειγμα 6. Ευθείες με εφαρμογή linecap Δείτε από το συνοδευτικό υλικό το αρχείο: 2.1.canvas-lines-linecap.html Στο παράδειγμα 5 σχεδιάζουμε 3 γραμμές με διάφορα στυλ στις άκρες τους. Προσέξτε ότι οι 3 γραμμές έχουν το ίδιο αρχικό μήκος. //line 1 green--> round linecap

Παράδειγμα 6 - Κώδικας:

98

Παράδειγμα 6 - Οθόνη Browser:

Παράδειγμα 7. Ευθείες με εφαρμογή linejoin Δείτε από το συνοδευτικό υλικό το αρχείο: 2.2.canvas-lines-linejoin.html Στο παράδειγμα 7 συγκρίνουμε 3 γωνίες των οποίων οι κορυφές έχουν διαφορετικά στυλ. Παράδειγμα 7 - Κώδικας:

99

Παράδειγμα 7 - Οθόνη Browser:

Παράδειγμα 8. Ευθείες με εφαρμογή miterLimit Δείτε από το συνοδευτικό υλικό το αρχείο: 2.3.canvas-lines-miterlimit.html Στο παράδειγμα 8 συγκρίνουμε δύο γωνίες στις οποίες έχουμε θέσει μέγιστο πάχος στις κορυφές τους. Παράδειγμα 8 - Κώδικας:

100

Παράδειγμα 8 - Οθόνη Browser:

2.4 Σχεδίαση ορθογωνίων Ορθογώνιο

χωρίς

γέμισμα:

Για

να

σχεδιάσουμε

ένα

απλό

ορθογώνιο

πληκτρολογούμε:

Εναλλακτικά μπορούμε να πληκτρολογήσουμε

Ορθογώνιο με γέμισμα: Για να σχεδιάσουμε ένα γεμισμένο με χρώμα ορθογώνιο πληκτρολογούμε:

Για να καθορίσουμε μία ορθογώνια περιοχή σε ένα ορθογώνιο όπως η γόμα στα σχεδιαστικά προγράμματα πληκτρολογούμε: 101

Παράδειγμα 9. Σχεδίαση ορθογωνίου Δείτε από το συνοδευτικό υλικό το αρχείο: 2.3.canvas-lines-miterlimit.html Στο παράδειγμα 8 συγκρίνουμε δύο γωνίες στις οποίες έχουμε θέσει μέγιστο πάχος στις κορυφές τους. Παράδειγμα 8 - Κώδικας:

102

Παράδειγμα 8 - Οθόνη Browser:

2.5 Σχεδίαση τόξων και κύκλων Για να σχεδιάσουμε ένα τόξο (μέρος κύκλου) ή έναν ολόκληρο κύκλο πληκτρολογούμε arc(x,y,radius,γωνία εκκίνησης(rad), γωνία τερματισμού(rad), true ή false) Παράδειγμα:

Πιο αναλυτικά x, y, radius είναι οι συντεταγμένες και η ακτίνα του κύκλου ή του τόξου του κύκλου. Γωνία εκκίνησης(rad) και γωνία τερματισμού(rad) είναι εκεί που ξεκινά και και εκεί που σταματάει να διαγράφεται η γωνία. Τέλος false είναι η τιμή για περιστροφή σύμφωνα με τους δείκτες του ρολογιού και true είναι για αντίστροφη κίνηση από τους δείκτες του ρολογιού. Αφού πληκτρολογήσουμε την context.arc έχουμε δύο επιλογές:

¾ Για να σχεδιαστεί η περιφέρεια του κύκλου: ¾ Για να σχεδιαστεί το εσωτερικό του κύκλου:

103

Παράδειγμα 10. Σχεδιασμός κύκλων Δείτε από το συνοδευτικό υλικό το αρχείο: 2.5.canvas-circles.html Στο παράδειγμα 10 σχεδιάζουμε κύκλους και τόξα:

Παράδειγμα 10 - Κώδικας:

104

Παράδειγμα 10 - Οθόνη Browser:

Παράδειγμα 11. Σχεδιασμός φέτας καρπουζιού με τη βοήθεια του σχεδιασμού τόξων Δείτε από το συνοδευτικό υλικό το αρχείο: 2.6.canvas-circles-karpouzi.html Παράδειγμα 11 - Κώδικας:

105

Παράδειγμα 11 - Οθόνη Browser:

Παράδειγμα 12. Σχεδιασμός smileface με τη βοήθεια του σχεδιασμού τόξων Δείτε από το συνοδευτικό υλικό το αρχείο: 2.7.canvas-circles-smile-face.html Παράδειγμα 12 - Κώδικας:

106

Παράδειγμα 12 - Οθόνη Browser:

2.6 Τόξο που ενώνει δύο εφαπτομένες Σύνταξη:

Για να σχεδιάσουμε ένα τόξο που ενώνει δύο εφαπτομένες κάνουμε τα ακόλουθα βήματα: 1.

Πληκτρολογούμε τις παρακάτω εντολές για να σχεδιάσουμε την πρώτη ευθεία:

2.

Πληκτρολογούμε x1, y1 είναι η αρχή του τόξου, x2, y2 είναι το τέλος του τόξου, και radius η ακτίνα.

3.

Πληκτρολογούμε για να σχεδιάσουμε το τέλος της δεύτερης εφαπτομένης.

4.

Πληκτρολογούμε

107

Παράδειγμα 13. Εφαρμογή context.arcTo Δείτε από το συνοδευτικό υλικό το αρχείο: 2.8.canvas-arcTo.html Στο παράδειγμα 13 θα ενώσουμε δύο εφαπτομένες με ένα τόξο:

Παράδειγμα 13 - Κώδικας:

108

Παράδειγμα 13 - Οθόνη Browser:

2.7 Τετραγωνική και κυβική καμπύλη Bezier Τετραγωνική καμπύλη Bezier: Για να σχεδιάσουμε μία τετραγωνική καμπύλη Bezier κάνουμε τα εξής βήματα: 1.

Πληκτρολογούμε τις παρακάτω γραμμές για να πάμε τη γραφίδα στο σημείο όπου θα ξεκινήσει η καμπύλη (start point):

2.

Πληκτρολογούμε όπου (x1,y1) οι συντεταγμένες του control point 1, (x2,y2) οι συντεταγμένες του control point 2 και (x3,y3) οι συντεταγμένες του σημείου τερματισμού της καμπύλης.

Η διαφορά της με την τετραγωνική Bezier είναι ότι έχει δύο σημεία ελέγχου, ενώ η τετραγωνική έχει ένα.

Παράδειγμα 14. Σχεδιασμός τετραγωνικής καμπύλης Bezier Δείτε από το συνοδευτικό υλικό το αρχείο: 2.9.canvas-bezier-quad.html 109

Παράδειγμα 14 - Κώδικας:

Παράδειγμα 14 - Οθόνη Browser:

Κυβική καμπύλη Bezier: Για να σχεδιάσουμε μία κυβική καμπύλη Bezier κάνουμε τα εξής βήματα:

110

1.

Πληκτρολογούμε τις παρακάτω γραμμές για να πάμε τη γραφίδα στο σημείο όπου

2.

θα

ξεκινήσει

η

καμπύλη(start

point)

Πληκτρολογούμε όπου (x1,y1) οι συντεταγμένες του control point 1, (x2,y2) οι συντεταγμένες του control point 2 και (x3,y3) οι συντεταγμένες του σημείου τερματισμού της καμπύλης.

Παράδειγμα 15. Σχεδιασμός κυβικής καμπύλης Bezier Δείτε από το συνοδευτικό υλικό το αρχείο: 2.10.canvas-bezier-qubic.html Παράδειγμα 15 - Κώδικας:

111

Παράδειγμα 15 - Οθόνη Browser:

2.8 Εισαγωγή κειμένου Εισαγωγή κειμένου με γεμισμένα γράμματα: Για να εισάγουμε κείμενο στον καμβά με γεμισμένα γράμματα κάνουμε τα εξής βήματα: 1.

Για να δηλώσουμε τη γραμματοσειρά γράφουμε:

2.

Για να δηλώσουμε το χρώμα της γραμματοσειράς γράφουμε:

3.

Γράφουμε όπου x,y οι συντεταγμένες του κειμένου

Εισαγωγή κειμένου με μη γεμισμένα γράμματα: Για να εισάγουμε κείμενα στον καμβά με μη γεμισμένα γράμματα κάνουμε τα εξής βήματα: 1.

Για να δηλώσουμε τη γραμματοσειρά γράφουμε:

2.

Για να δηλώσουμε το χρώμα της γραμματοσειράς γράφουμε:

112

3.

Γράφουμε όπου x,y οι συντεταγμένες του κειμένου

Στοίχιση και τοποθέτηση κειμένου σε σχέση με τη baseline: Για να προσδιορίσουμε τη στοίχιση κειμένου πληκτρολογούμε: όπου η επιλογή στοίχισης παίρνει τις τιμές: start, end, left, center και right. Για να προσδιορίσουμε τη κατακόρυφη θέση του κειμένου σε σχέση με τη baseline πληκτρολογούμε: όπου η επιλογή θέσης baseline παίρνει τις τιμές: bottom, middle, alphabetic, hanging

Παράδειγμα 16. Εισαγωγή κειμένου με στοίχιση Δείτε από το συνοδευτικό υλικό το αρχείο: 2.11.canvas-text-allign.html Παράδειγμα 16 - Κώδικας:

113

Παράδειγμα 16 - Οθόνη Browser:

Παράδειγμα 17. Εισαγωγή κειμένου σε θέσεις σχετικές με τη baseline Δείτε από το συνοδευτικό υλικό το αρχείο: 2.12.canvas-text-baseline.html Παράδειγμα 17 - Κώδικας:

114

Παράδειγμα 17 - Οθόνη Browser:

2.9 Στυλ Canvas HTML5 Στα ακόλουθα υποεδάφια θα δούμε τις μεθόδους για γραμμική χρωμάτων και κυκλική διαβάθμιση χρώματος καθώς και πώς χρησιμοποιούμε τη διαφάνεια και τη σκιά. 2.9.1 Create linear gradient (γραμμική διαβάθμιση χρωμάτων) Σύνταξη: (x1,y1) είναι το σημείο εκκίνησης του gradient και (x2,y2) είναι το σημείο τερματισμού. Για να εφαρμόσουμε γραμμική διαβάθμιση κάνουμε τα εξής: 1.

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

2.

Γράφουμε όπου n είναι μία τιμή από 0.0-1.0 η οποία καθορίζει τη θέση μεταξύ της αρχής και του τέλους της διαβάθμισης. Στην απλή περίπτωση όπου θέλουμε μία διαβάθμιση

με

δύο

χρώματα

για

παράδειγμα

κόκκινο

και

κίτρινο

θα

χρησιμοποιήσουμε τις γραμμές 115

3.

Γράφουμε ή ανάλογα αν θέλουμε γεμισμένα με χρώμα ή όχι σχήματα.

Παράδειγμα 18. Εφαρμογή γραμμικής διαβάθμισης Δείτε από το συνοδευτικό υλικό το αρχείο: 2.13.canvas-gradient1.html Στο παράδειγμα 18 θα επιχειρήσουμε γραμμική οριζόντια διαβάθμιση.

Παράδειγμα 18 - Κώδικας:

116

Παράδειγμα 18 - Οθόνη Browser:

Παράδειγμα 19. Εφαρμογή γραμμικής διαβάθμισης Δείτε από το συνοδευτικό υλικό το αρχείο: 2.14.canvas-gradient2.html Στο παράδειγμα 19 θα επιχειρήσουμε γραμμική κάθετη διαβάθμιση. Με τη γραμμή δηλώνουμε ότι επιθυμούμε να αλλάξουμε όλα τα σημεία με Y από 0-200 -όσο και το ύψος των ορθογωνίων. Παράδειγμα 19 - Κώδικας:

117

Παράδειγμα 19 - Οθόνη Browser:

Παράδειγμα 20. Εφαρμογή γραμμικής διαβάθμισης Δείτε από το συνοδευτικό υλικό το αρχείο: 2.15.canvas-gradient3.html Στο παράδειγμα 20 επιφέρουμε γραμμική διαβάθμιση σε ορθογώνιο χωρίς γέμισμα. Παράδειγμα 20 - Κώδικας:

118

Παράδειγμα 20 - Οθόνη Browser:

Παράδειγμα 21. Εφαρμογή γραμμικής διαβάθμισης Δείτε από το συνοδευτικό υλικό το αρχείο: 2.16.canvas-gradient4.html Παράδειγμα 21 - Κώδικας:

119

Παράδειγμα 21 - Οθόνη Browser:

Παράδειγμα 22. Εφαρμογή γραμμικής διαβάθμισης Δείτε από το συνοδευτικό υλικό το αρχείο: 2.17.canvas-gradient5.html Παράδειγμα 22 - Κώδικας:

120

Παράδειγμα 22 - Οθόνη Browser:

2.9.2 Μέθοδος κυκλικής διαβάθμισης χρώματος Σύνταξη: όπου x1,y1,r1 είναι οι συντεταγμένες και η ακτίνα του κύκλου έναρξης της διαβάθμισης και x2,y2,r2 είναι οι συντεταγμένες και η ακτίνα του κύκλου τερματισμού της διαβάθμισης. Για να εφαρμόσουμε τη μέθοδο της κυκλικής διαβάθμισης κάνουμε ακριβώς τα ίδια βήματα με τη μόνη διαφορά αντί για: χρησιμοποιούμε τη μέθοδο

Παράδειγμα 23. Εφαρμογή κυκλικής διαβάθμισης Δείτε από το συνοδευτικό υλικό το αρχείο: 2.18.canvas-gradient-radial.html

121

Παράδειγμα 23 - Κώδικας:

Παράδειγμα 23 - Οθόνη Browser:

2.9.3 Διαφάνεια και σκιά Διαφάνεια Για να προσθέσουμε ρύθμιση για διαφάνεια γράφουμε: και μετά συμπληρώνουμε μία τιμή από 0.0(διαφανές) έως 1.0(αδιαφανές)

122

Παράδειγμα 24. Εφαρμογή διαφάνειας Δείτε από το συνοδευτικό υλικό το αρχείο: 2.19.canvas-alpha.html Παράδειγμα 24 - Κώδικας:

Παράδειγμα 24 - Οθόνη Browser:

123

Σκιά: Για να προσθέσουμε σκιά στα σχήματά μας χρησιμοποιούμε τις παρακάτω ιδιότητες. shadowColorÆ Προσδιορίζει τις σκιές της γραμμής. Σύνταξη:

shadowBlurÆ Προσδιορίζει το επίπεδο της θολότητας. Σύνταξη:

shadowOffsetXÆ Προσδιορίζει την οριζόντια απόσταση της σκιάς από το σχήμα. Σύνταξη: θετικές τιμές για σκιά προς τα δεξιά και αρνητικές τιμές για τιμές προς τα αριστερά shadowOffsetYÆ Προσδιορίζει την κάθετη απόσταση της σκιάς από το σχήμα Σύνταξη: θετικές τιμές για σκιά προς τα κάτω και αρνητικές τιμές για τιμές προς τα πάνω.

Παράδειγμα 25. Εφαρμογή σκιάς Δείτε από το συνοδευτικό υλικό το αρχείο: 2.20.canvas-shadow.html

124

Παράδειγμα 25 - Κώδικας:

Παράδειγμα 25 - Οθόνη Browser:

2.10 Μετασχηματισμοί Αλλαγή κλίμακας Αν θέλουμε να αλλάξουμε την κλίμακα ενός σχήματος γράφουμε:

125

όπου κ είναι η αλλαγή κλίμακας στον οριζόντιο άξονα και λ η αλλαγή κλίμακας στον κάθετο άξονα. Έτσι, αν θέλουμε αλλαγή κλίμακας 50%, γράφουμε 0.5, 300% γράφουμε 3, 100% γράφουμε 1 κτλ. Επίσης πρέπει να διευκρινίσουμε ότι στον μετασχηματισμό υπόκεινται και τα σημεία εκκίνησης όπως για παράδειγμα οι συντεταγμένες της επάνω αριστερής γωνίας ενός ορθογωνίου.

Παράδειγμα 26. Εφαρμογή αλλαγής κλίμακας Δείτε από το συνοδευτικό υλικό το αρχείο: 2.21.canvas-scale.html Στο παράδειγμα 26 εφαρμόζουμε μεγέθυνση κλίμακας(4,4) δηλαδή 4 κατά Χ άξονα και 4 κατά Υ άξονα. Προσέξτε ότι μεταβάλλονται και οι συντεταγμένες της επάνω αριστερής γωνίας. Δηλαδή από το (20,20) η επάνω αριστερή γωνία μεταφέρεται στο (80,80). Για αυτόν το λόγο σχεδιάστηκε και η ευθεία με εξίσωση x=80. Παράδειγμα 26 - Κώδικας:

126

Παράδειγμα 26 - Οθόνη Browser:

Περιστροφή του σχεδίου Για να περιστρέψουμε ένα σχήμα γράφουμε: όπου degrees είναι οι μοίρες της περιστροφής. Εδώ θα πρέπει να επισημάνουμε ότι με την εντολή rotate τροποποιούνται όλα τα σχήματα που βρίσκονται μετά από αυτή, ενώ τα σχήματα που έχουν σχεδιαστεί πριν παραμένουν ανεπηρέαστα.

Παράδειγμα 27. Εφαρμογή περιστροφής Δείτε από το συνοδευτικό υλικό το αρχείο: 2.22.canvas-rotate.html

127

Παράδειγμα 27 - Κώδικας:

Παράδειγμα 27 - Οθόνη Browser:

Αλλαγή του σημείου Ο(0,0) του Canvas HTML5 Για να αλλάξουμε τις συντεταγμένες του σημείου Ο(0,0) και κατά επέκταση και ανάλογα τις

συντεταγμένες

όλων

των

σχεδίων

ολόκληρου

του

καμβά

γράφουμε

Context.translate(x,y) όπου (x,y) οι συντεταγμένες του καινούργιου σημείου Ο(0,0).

128

Πολλαπλός μετασχηματισμός με τις μεθόδους context.transform(a,b,c,d,e,f); και context.SetTransform(a,b,c,d,e,f) Με

τη

μέθοδο

context.transform

εφαρμόζουμε

ταυτόχρονα

πολλούς

μετασχηματισμούς με τις παραμέτρους a,b,c,d,e,f. Παράμετρος a: Αλλάζει την κλίμακα στον οριζόντιο άξονα και παίρνει τιμές όπως και στη μέθοδο scale. Παράμετρος b: Προκαλεί οριζόντια λοξή μετατόπιση (skew). Παράμετρος c: Προκαλεί Κάθετη λοξή μετατόπιση (skew). Παράμετρος d: Αλλάζει την κλίμακα στον κάθετο άξονα και παίρνει τιμές όπως και στη μέθοδο scale. Παράμετρος e: Προκαλεί οριζόντια μετατόπιση κατά +x pixels δεξιά ή -x pixels αριστερά. Παράμετρος f: Προκαλεί κάθετη μετατόπιση κατά -y pixels προς τα επάνω ή +y pixels προς τα κάτω. Σημείωση: κάθε πολλαπλός μετασχηματισμός επιδρά επάνω στον προηγούμενο. Δηλαδή αν εφαρμόσουμε δύο φορές την ίδια οριζόντια μετατόπιση η οριζόντια μετατόπιση (Παράμετρος e) θα είναι διπλάσια. Αν

θέλουμε

ένα

μετασχηματισμό

ο

οποίος

να

μην

επηρεάζεται

από

τους

προηγούμενους τότε χρησιμοποιούμε τη μέθοδο

Παράδειγμα 28. Εφαρμογή μετασχηματισμού-περιστροφής Δείτε από το συνοδευτικό υλικό το αρχείο: 2.23.canvas-transformation-rotate.html

129

Παράδειγμα 28 - Κώδικας:

Παράδειγμα 28 - Οθόνη Browser:

Παράδειγμα 29. Εφαρμογή μετασχηματισμού Δείτε από το συνοδευτικό υλικό το αρχείο: 2.24.canvas-transformation-move-vert.html

130

Παράδειγμα 29 - Κώδικας:

Παράδειγμα 29 - Οθόνη Browser:

Παράδειγμα 30. Εφαρμογή μετασχηματισμού Δείτε από το συνοδευτικό υλικό το αρχείο: 2.25.canvas-transformation-move-horiz.html

131

Παράδειγμα 30 - Κώδικας:

Παράδειγμα 30 - Οθόνη Browser:

Παράδειγμα 31. Εφαρμογή μετασχηματισμού Δείτε από το συνοδευτικό υλικό το αρχείο: 2.26.canvas-transformation-scale.html

132

Παράδειγμα 31 - Κώδικας:

Παράδειγμα 31 - Οθόνη Browser:

Παράδειγμα 32. Εφαρμογή μετασχηματισμού Δείτε από το συνοδευτικό υλικό το αρχείο: 2.27.canvas-transformation-scew1.html

133

Παράδειγμα 32 - Κώδικας:

Παράδειγμα 32 - Οθόνη Browser:

Παράδειγμα 33. Εφαρμογή μετασχηματισμού Δείτε από το συνοδευτικό υλικό το αρχείο: 2.28.canvas-transformation-scew2.html

134

Παράδειγμα 33 - Κώδικας:

Παράδειγμα 33 - Οθόνη Browser:

Παράδειγμα 34. Εφαρμογή μετασχηματισμού Δείτε από το συνοδευτικό υλικό το αρχείο: 2.29.canvas-transformation-scew3.html

135

Παράδειγμα 34 - Κώδικας:

Παράδειγμα 34 - Οθόνη Browser:

136

ΥΠΟΕΝΟΤΗΤΑ 3. ΥΠΕΡΣΥΝΔΕΣΕΙΣ (LINKS): ΠΩΣ ΦΤΙΑΧΝΟΥΜΕ LINKS ΓΙΑ EMAILS, ΑΛΛΕΣ WEB PAGES 3.1 Σύνδεσμοι Για να δημιουργήσουμε ένα σύνδεσμο έτσι ώστε ο Browser να ανοίξει μία άλλη ιστοσελίδα από το ίδιο ή διαφορετικό website κάνουμε το εξής: Α’ τρόπος: Στην περίπτωση που θέλουμε να γράψουμε μία απλή σύνδεση χρησιμοποιούμε τις ετικέτες

και

γράφουμε

Σαν αποτέλεσμα θα εμφανιστεί το κείμενο που γράψαμε με τη μορφή Link και αν επιλέξουμε με το ποντίκι τη σύνδεση ο Browser θα ανοίξει την αντίστοιχη σελίδα. Παράδειγμα: Η συγκεκριμένη σύνδεση μας μεταφέρει στο google.gr Β’ τρόπος: Σε περίπτωση που θέλουμε να φτιάξουμε μία σύνδεση μέσω ενός button τότε

3.2 Σύνδεση για email Εάν θέλουμε να δημιουργήσουμε μια σύνδεση για email, τότε γράφουμε

Παράδειγμα:

137

Παράδειγμα 35. Δημιουργία συνδέσεων Δείτε από το συνοδευτικό υλικό το αρχείο: 3.1.links.html Παράδειγμα 35 - Κώδικας:

Παράδειγμα 35 - Οθόνη Browser:

138

Παράδειγμα 36. Δημιουργία σύνδεσης σε άλλη σελίδα Δείτε από το συνοδευτικό υλικό το αρχείο: 3.2.links-to-page.html Παράδειγμα 36 - Κώδικας:

Παράδειγμα 36 - Οθόνη Browser:

139

3.3 Σημεία αγκύρωσης Το σημείο αγκύρωσης είναι ένας σύνδεσμος που μας μεταφέρει σε συγκεκριμένο σημείο άλλης ιστοσελίδας του ίδιου ή διαφορετικού website. Η χρησιμότητα των σημείων αγκύρωσης είναι πολύ μεγάλη, διότι εκμεταλλευόμαστε τις δυνατότητες που μας δίνει ένα HTML κείμενο και να μεταφερόμαστε σε άλλο σημείο του κειμένου που μας ενδιαφέρει εξοικονομώντας χρόνο στην πλοήγησή μας. Είδη σημείων αγκύρωσης 1.

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

2.

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

σύνδεσμος που μας μεταφέρει σε συγκεκριμένο σημείο μιας ιστοσελίδας του ίδιου ή διαφορετικού website. Για να δημιουργήσουμε σημείο αγκύρωσης σε άλλη σελίδα του ίδιου website γράφουμε:

Αν πρόκειται να φτιάξουμε σημείο αγκύρωσης για κάποια σελίδα διαφορετικού website προφανώς υπάρχει το πρόβλημα ότι το website δεν έχει κατασκευαστεί από εμάς. Γι’ αυτόν το λόγο ανοίγουμε με τον Browser τη συγκεκριμένη σελίδα που θέλουμε και πατάμε Ctrl+U για να δούμε τον κώδικά της. Έπειτα βρίσκουμε το επιθυμητό div και αντιγράφουμε το όνομά του. Πηγαίνουμε στη θέση των διευθύνσεων και αντιγράφουμε το όνομα και τη διαδρομή της σελίδας που επεξεργαζόμαστε και τα συμπληρώνουμε ακριβώς όπως στην περίπτωση που το website το έχουμε κατασκευάσει εμείς. Δεν πρέπει να ξεχνάμε ότι αν ο διαχειριστής του ξένου website διαγράψει το συγκεκριμένο σημείο div, τότε -όπως είναι φυσικό- θα χαθεί και το σημείο αγκύρωσης. Σημείωση: Αν δούμε τον κώδικα της σελίδας με το Ctrl+U και εμφανιστούν λέξεις του κώδικα με κόκκινα γράμματα σημαίνει ότι υπάρχει λάθος.

140

Παράδειγμα 37. Δημιουργία σημείων αγκύρωσης στην ίδια ιστοσελίδα Δείτε από το συνοδευτικό υλικό το αρχείο: 3.3.anchor-links-esoterikes.html Στο παράδειγμα 37 δημιουργούμε εσωτερικά σημεία αγκύρωσης που μας μεταφέρουν σε συγκεκριμένες ενότητες της σελίδας. Γράφοντας μεταφερόμαστε στην ίδια σελίδα που έχει

Το όνομα του div το γράφουμε αμέσως μετά το σύμβολο # χωρίς να αφήσουμε κενό. Παράδειγμα 37 - Κώδικας:

141

Παράδειγμα 37 - Οθόνη Browser:

Παράδειγμα 38. Δημιουργία σημείων αγκύρωσης σε ιστοσελίδα διαφορετικού website Δείτε από το συνοδευτικό υλικό το αρχείο: 3.4.anchor-links-different-website.html Στο παράδειγμα 38 δημιουργούμε σημείο αγκύρωσης σε σελίδα διαφορετικού website. αυτό που αλλάζει είναι ότι μόλις ανοίξουμε την επιθυμητή σελίδα με CTRL+U βλέπουμε τον κώδικά της και ψάχνουμε σημείο div για να το “αγκιστρώσουμε”.

142

Παράδειγμα 38 - Κώδικας:

Παράδειγμα 38 - Οθόνη Browser:

Στο ηλεκτρονικό υλικό της ενότητας μπορείτε να δείτε κάποια video tutorials για Photoshop: Βίντεο 1. Παρουσίαση των menus του Photoshop Βίντεο 2. Επεξεργασία εικόνας Βίντεο 3. Παρουσίαση του clone stamp tool Βίντεο 4. Ανάμιξη εικόνων 143

Σύνοψη Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:

• Υπάρχουν formats εικόνας video και ήχου που υποστηρίζει η HTML5. • Το καινούργιο format της Google για εικόνες WebP έχει μεγάλα πλεονεκτήματα –αν και μέχρι τον Οκτώβριο 2014 υποστηρίζεται μόνο από τον Browser Chrome της Google.

• Έχει μεγάλη σημασία το μέγεθος της εικόνας σε ένα website. Εικόνες μεγάλου μεγέθους (αρχείου) αργούν να φορτωθούν και κάνουν το website μη λειτουργικό.

• Με την ετικέτα div μπορούμε να καθορίσουμε τη θέση μια εικόνας ή ενός video ή audio player. Επίσης με τις θέσεις relative και absolute μπορούμε να συσχετίσουμε θέσεις εικόνων ή τις θέσεις των video και audio players.

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

• Το σημείο Ο(0,0) του Canvas ξεκινά από την επάνω αριστερή γωνία της οθόνης του Browser.

• Μπορούμε με την ετικέτα

να δημιουργήσουμε σύνδεση σε άλλη σελίδα του ίδιου

ή διαφορετικού Website και σύνδεση για email.

• Μάθαμε να χρησιμοποιούμε τα σημεία αγκύρωσης για να μπορεί το κείμενο της ιστοσελίδας να είναι “ζωντανό” και να μπορεί ο χρήστης να μεταφέρεται αυτόματα σε συγκεκριμένη ενότητα της ίδιας ή διαφορετικής σελίδας του ίδιου ή διαφορετικού website.

144

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

Προγράμματα Συμπληρωματικής Εκπαίδευσης

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1920 - HTML 5 ΚΑΙ JAVASCRIPT: ΤΑ ΠΡΩΤΑ ΒΗΜΑΤΑ ΣΤΟ WEB DEVELOPMENT

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 4. ΔΟΜΗ ΤΗΣ JAVASCRIPT

145

146

Εισαγωγικές Παρατηρήσεις Στην πρώτη υποενότητα θα γίνει μία εισαγωγή στη δομή, τον τρόπο ενσωμάτωσης και γραφής της JavaScript καθώς και θα εξηγηθεί το μοντέλο DOM Στη δεύτερη υποενότητα θα γίνει ανάλυση του τρόπου εισαγωγής κειμένου στη JavaScript. Επίσης θα αναλυθούν εκτενώς οι εντολές συνθήκης και οι βρόχοι επανάληψης της JavaScript. Στην τρίτη υποενότητα θα εξηγηθεί η έννοια της αλφαριθμητικής string καθώς και ο τρόπος δημιουργίας και επεξεργασίας πίνακα. Τέλος, θα παρουσιαστεί και θα αναλυθεί ένα απλό παράδειγμα χρήσης της JQuery βιβλιοθήκης της JavaScript.

147

ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ JAVASCRIPT Η JavaScript είναι μία γλώσσα προγραμματισμού που αναπτύχθηκε αρχικά από τη Netscape και χρησιμοποιείται κυρίως σε web εφαρμογές. Η συγκεκριμένη γλώσσα κυρίως επεξεργάζεται από το Web Browser (client side) και όχι από το server που φιλοξενεί το Website. Αυτό σημαίνει ότι η JavaScript μπορεί να εκτελείται αφού η σελίδα «έχει φτάσει στον browser» χωρίς επικοινωνία με το server. Η JavaScript συνδυάζεται με την HTML ενσωματώνοντας στον κώδικα HTML σενάρια.

1.1 Γενικά χαρακτηριστικά-τρόποι ενσωμάτωσης και γραφής JavaScript, Αντικείμενα ιδιότητες και μέθοδοι της JavaScript Σε αντίθεση με την HTML, η JavaScript είναι case sensitive, δηλαδή υπάρχει διαφοροποίηση κεφαλαίων πεζών. Επίσης, υπάρχει διαφοροποίηση και σε άλλα θέματα σύνταξης τα οποία θα δούμε παρακάτω. Η σύνταξη της μοιάζει με της C και επίσης δεν υπάρχει καμία συγγένεια-σχέση με τη Java. 1.1 Τι μπορεί να κάνει η JavaScript; Τρόποι ενσωμάτωσής της στον κώδικα HTML Η JavaScript μπορεί:

¾ να προσθέσει δυναμικό περιεχόμενο στις ιστοσελίδες, ¾ να κάνει υπολογισμούς σε κάποια σελίδα, ¾ να δημιουργήσει cookies, ¾ να επικυρώσει δεδομένα, ¾ να χρησιμοποιηθεί για την ασφάλεια των Websites, ¾ να ανιχνεύσει την έκδοση του browser του client. Τρόποι ενσωμάτωσης JavaScript: Μπορούμε να ενσωματώσουμε κώδικα JavaScript στο στοιχείο head και στο στοιχείο body του κώδικα html. Επίσης μπορούμε να καλέσουμε και εξωτερικά αρχεία JavaScript (JSON) τα οποία έχουν κατάληξη .js. Πώς γράφουμε ένα JavaScript; Τον κώδικα JavaScript τον γράφουμε ανάμεσα στις ετικέτες

και

.

148

1.1.2 Δομή της JavaScript - Αντικείμενα, ιδιότητες και μέθοδοι της JavaScript Αντικείμενα της JavaScript Αντικείμενα της JavaScript είναι οντότητες οι οποίες σχετίζονται με συγκεκριμένα τμήματα της HTML. Τα αντικείμενα έχουν ιδιότητες. Ορίζουμε μεθόδους (συναρτήσεις και διαδικασίες) οι οποίες μέθοδοι εκτελούν λειτουργίες πάνω σε αντικείμενα, μεταβλητές και σταθερές. Παράδειγμα Αντικείμενο Student Ιδιότητα student.name με αυτή την ιδιότητα ορίζουμε το όνομα του μαθητή. Μέθοδος document.write(student.name); με αυτήν τη μέθοδο write του αντικειμένου Document εμφανίζεται στην οθόνη του browser το όνομα του μαθητή. Η διαφορά μεθόδου και ιδιοτήτων είναι ότι στις μεθόδους εισάγονται παρενθέσεις ενώ στις ιδιότητες όχι.

1.2 Μεταβλητές και τελεστές της JavaScript Για να δηλώσουμε μία μεταβλητή της JavaScript: γράφουμε var, αφήνουμε κενό και γράφουμε το όνομά της. Το ελληνικό ερωτηματικό στο τέλος δεν είναι υποχρεωτικό γενικά στη JavaScript. Παράδειγμα var x; Υπάρχει επίσης και η δυνατότητα δήλωσης και ταυτόχρονα εκχώρησης τιμής μιας μεταβλητής.

Μπορούμε επίσης να παραλείψουμε τη λέξη var.

149

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

¾ αριθμητικό, ¾ αλφαριθμητικό και ¾ λογικό. Η JavaScript περιλαμβάνει ένα σύνολο αντικειμένων τα οποία σχετίζονται με στοιχεία της HTML. Το όνομα μιας μεταβλητής επιτρέπεται να περιλαμβάνει κεφαλαία και πεζά γράμματα, αριθμούς και τον χαρακτήρα υπογράμμισης. Επίσης μπορούν να ξεκινούν ή με γράμμα ή με χαρακτήρα υπογράμμισης. Τελεστές της JavaScript: Για να ορίσουμε πράξεις στη JavaScript χρησιμοποιούμε τους τελεστές που βλέπετε στους πίνακες (και για τα παραδείγματα έστω x=10, y=4, κ=12). Πίνακας 1. Αριθμητικοί Τελεστές Πράξη

Τελεστής

Παράδειγμα

Αποτέλεσμα

Πρόσθεση

+

z=x+y

14

Αφαίρεση

-

z=x-y

6

Πολλαπλασιασμός

*

Z=x*y

24

Διαίρεση

/

Z=x/y

2.5

Υπόλοιπο διαίρεσης

%

Z=x%y

2

Αύξηση κατά χ

++

Κ=++χ

22

Μείωση κατά y

--

Κ=--y

8

Πίνακας 2. Τελεστές Εκχώρησης Σύμβολο

Τελεστής

Ισοδυναμία

=

x=y

x=y

+=

x+=y

x=x+y

-=

x-=y

x=x-y

*=

X*=y

x=x*y

/=

x/=y

x=x/y

%=

x%=y

x=x%y 150

Πίνακας 3. Τελεστές Σύγκρισης Τελεστής

Εξήγηση

Παράδειγμα

Αποτέλεσμα

==

Ισότητα τιμής

x==10

Αληθές

X===10

Ψευδές

Ισότητα τιμής και

===

τύπου

!=

Διάφορο

X!=y

Αληθές

>

Μεγαλύτερο

X>20

Ψευδές

>=

Μεγαλύτερο ή ίσο

x≥10

Αληθές