1920 Book 5

ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ
Προγράμματα Συμπληρωματικής Εκπαίδευσης
Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης
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

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 με το
συμβολισμό &copy.
Δημιουργία σχολίων: Κατά τη συγγραφή κώδικα 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. Εισάγουμε ετικέτες ή για επικεφαλίδες αντίστοιχης
στήλης ή γραμμής πίνακα.
5. Εισάγουμε ετικέτες για να γράψουμε τα περιεχόμενα των κελιών δεδομένων.
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

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
Δ’ τρόπος: Καλούμε ένα αρχείο 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
38
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)
Μπορούμε να ορίσουμε την απόσταση μεταξύ των λέξεων με την ιδιότητα word-
spacing: μονάδες σε Pixels ή em. Η ιδιότητα word-spacing κληρονομείται.
Σύνταξη:
Παράδειγμα 4. Μέγεθος και χρώμα γραμματοσειράς

ex4-paragraph-size-colors.html
41
Απόσταση μεταξύ των χαρακτήρων (letter-spacing)

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

ex5-letter-spacing.html
42
Προσθήκη εσοχής (text-indent)

Για να προσθέσουμε στην πρώτη γραμμή μιας παραγράφου μια εσοχή
χρησιμοποιούμε την ιδιότητα text-indent: ……μονάδες σε Pixels ή em.
Σύνταξη:
Παράδειγμα 6. Εσοχή παραγράφου

ex6-paragraph-indent.html
43
Καθορισμός κενού χώρου (white-space)

Τα διαδοχικά κενά διαστήματα παραβλέπονται στην HTML5. Αν θέλουμε να
προσθέσουμε κενά διαστήματα προσθέτουμε την ιδιότητα white-space:…
Στο κενό συμπληρώνουμε:
1. pre αν θέλουμε ο browser να εμφανίσει στο κείμενο της ιστοσελίδας τα
διαστήματα και τις επαναφορές κεφαλής αυτούσια όπως υπάρχουν και στο
πρωτότυπο κείμενο.
2. nowrap αν θέλουμε να μην γίνεται αλλαγή γραμμής.
3. normal για να αντιμετωπίζονται τα διαστήματα όπως καθορίζεται από την
προεπιλογή της /HTML5.
Σύνταξη:
44
Παράδειγμα 7. Διαχείριση κενών διαστημάτων

ex7-white-space.html
Στοίχιση κειμένου (text-align)

Μπορούμε να προσθέσουμε την ιδιότητα text-align για να στοιχίσουμε το κείμενό μας
ως εξής:
¾ text-align: left για στοίχιση αριστερά
¾ text-align: right για στοίχιση δεξιά
¾ text-align: center για στοίχιση στο κέντρο
¾ text-align: justify για πλήρη στοίχιση.
Σύνταξη:
45
Παράδειγμα 8. Στοίχιση κειμένου

ex8-text-align.html
1.3 Στοιχεία address και time
Εισαγωγή στοιχείων επικοινωνίας συγγραφέα

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

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

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

ex10-time.html
ΥΠΟΕΝΟΤΗΤΑ 2. ΕΙΣΑΓΩΓΗ ΚΕΙΜΕΝΟΥ
2.1 Εισαγωγή σημαντικού και εμφατικού κειμένου και επισήμανση

κειμένου
Εισαγωγή σημαντικού κειμένου: Για να εισάγουμε σημαντικό κείμενο χρησιμοποιούμε

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

ex11-mark-srong-em.html
49
2.2 Επεξήγηση συντομογραφιών και εισαγωγή ορισμών
Στοιχείο abbr
Για να εισάγουμε μία επεξήγηση μιας συντομογραφίας χρησιμοποιούμε το στοιχείο
abbr.
Σύνταξη:
Μέθοδος:
I. Γράφουμε την ετικέτα
II. Στη συνέχεια προαιρετικά γράφουμε και προσθέτουμε στο title την
επεξήγηση της συντομογραφίας.
III. Έπειτα κλείνουμε τα εισαγωγικά και την ετικέτα abbr. Δηλαδή γράφουμε
IV. Στη συνέχεια προσθέτουμε τη συντομογραφία.
V. Τέλος, κλείνουμε με την ετικέτα .
Σημείωση: Η επεξήγηση της συντομογραφίας εμφανίζεται στο παράθυρο του Browser
όταν ο δείκτης του ποντικιού βρίσκεται σε κατάσταση αιώρησης (hover) πάνω από τη
συντομογραφία.
Παράδειγμα 12. Στοιχείο abbr
50
ex12-abbr.html
2.3 Εισαγωγή αναφοράς, παραπομπής, επισήμανσης και παράθεσης
(Στοιχείο cite)
Για να εισάγουμε μία παραπομπή ή αναφορά σε τίτλο άρθρου, βιβλίου συγγραφέα κτλ
χρησιμοποιούμε το στοιχείο cite. Το στοιχείο cite αναφέρεται μόνο στις πηγές και όχι
στο περιεχόμενο.
Σύνταξη:
Στοιχείο quote
Για να εισάγουμε μία σύντομη παράθεση μιας φράσης που είπε ή έγραψε κάποιος
χρησιμοποιούμε το στοιχείο quote.
Σύνταξη:
Στοιχείο Blockquote
Για να παραθέσουμε αυτούσιο απόσπασμα κειμένου, γράφουμε την ετικέτα αρχής του
στοιχείου blockquote στην οποία μπορούμε να συμπεριλάβουμε και την πηγή. Στη
συνέχεια κλείνουμε την ετικέτα έναρξης και παραθέτουμε το κείμενο εντός ενός στοιχείου
51
p. Τέλος προσθέτουμε την ετικέτα για να σημάνουμε το τέλος του
αποσπάσματος.
Σύνταξη:
Παράδειγμα 13. Στοιχεία cite, quote, blockquote

ex13-cite-quote-blockquote.html
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
2.4.4 Εισαγωγή search box
Για να εισάγουμε ένα πεδίο μιας μηχανής αναζήτησης χρησιμοποιούμε το στοιχείο form
με την ιδιότητα role=”search”. Πιο αναλυτικά κάνουμε τα εξής βήματα:
i. γράφουμε μια ετικέτα αρχής του στοιχείου form με τις ιδιότητες
ii. γράφουμε τίτλο για την ιδιότητα search μεταξύ των ετικετών
iii. Γράφουμε
όπου στο maxlength συμπληρώνουμε τον μέγιστο αριθμό χαρακτήρων της

αναζήτησης.
54
iv. Γράφουμε στην προηγούμενη ετικέτα
Παράδειγμα 15. Εισαγωγή searchbox

ex15-search_box.html
2.4.5 Εισαγωγή spinbox
Spin box είναι ένα box που μπορούμε να δημιουργήσουμε με την HTML5, στο οποίο
κάνοντας αριστερό κλικ στα βελάκια του box Μπορούμε να αυξομειώνουμε την τιμή
που βρίσκεται εντός του κουτιού.
55
Στο στοιχείο body προσθέτουμε τη γραμμή:
min και max είναι η ελάχιστη και μέγιστη τιμή, το step είναι το βήμα αύξησης ή μείωσης
και το value είναι η αρχική τιμή.
Παράδειγμα 16. Εισαγωγή spinbox

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

Αρχείο: ex17-text_area.html
2.4.7 Εισαγωγή submit button και checkbox
Submit Button: Για να εισάγουμε ένα submit button κάνουμε τα ακόλουθα βήματα:
1. Γράφουμε την ετικέτα αρχής του στοιχείου
2. Γράφουμε το κείμενο που θα εμφανίζεται πριν από το πλαίσιο κειμένου
3. Γράφουμε
4. Γράφουμε
5. Γράφουμε την ετικέτα αρχής του στοιχείου
Σύνταξη:
57
Παράδειγμα 18. Εισαγωγή submit button

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

1. Γράφουμε ετικέτα αρχής
2. Γράφουμε ετικέτα
3. Γράφουμε ετικέτα τέλους
Παράδειγμα 19. Εισαγωγή checkbox

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

υπογραμμισμένη γραφή χρησιμοποιούμε το στοιχείο u. Το υπογραμμισμένο κείμενο το
εισάγουμε μεταξύ των ετικετών και .
Σύνταξη:
59
Παράδειγμα 20. Μορφοποίηση bold, italic, underlined

ex20-bold-italic-underline.html
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
Κατεύθυνση κειμένου
Σε κάποιες γλώσσες η φορά ανάγνωσης είναι από τα δεξιά προς τα αριστερά. Σε αυτές
τις περιπτώσεις δίνουμε την ιδιότητα στο στοιχείο που περικλείει γλώσσα που
διαβάζεται από δεξιά προς τα αριστερά.
Στο παράδειγμα αυτό ορίζουμε ότι το κείμενο της συγκεκριμένης παραγράφου είναι σε
Εβραϊκή Γλώσσα και θα διαβαστεί από δεξιά προς τα αριστερά.
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
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
69
4.4 Εισαγωγή radio buttons
Για να εισάγουμε μια λίστα από radio buttons μέσα σε ένα στοιχείο p γράφουμε τις
παρακάτω γραμμές:
Η ιδιότητα value είναι η τιμή της επιλογής του radio button και η επιλογή
μπαίνει όταν έχει επιλεγεί το συγκεκριμένο radio button.
Παράδειγμα 24. Εισαγωγή radio buttons

ex24-radio_buttons.html
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
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
Εισαγωγή progress bar

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

ex27-progress.html
74
Σύνοψη
• Οι κληρονομικότητες παίζουν σπουδαίο ρόλο στην HTML5.
• Για να δημιουργήσετε μία παράγραφο πρέπει να εισαγάγετε το στοιχείο p και να
επιφέρετε τροποποιήσεις σε αυτή με την ιδιότητα style.
• Μπορείτε να εισάγετε σε ένα κείμενο HTML διευθύνσεις και ημερομηνίες με τα στοιχεία
address και time.
• Μπορείτε να ορίσετε ρόλους σε περιοχές της ιστοσελίδας σας με τη βοήθεια της
WAI ARIA βελτιώνοντας την προσπελασιμότητα της ιστοσελίδας σας.
• Μπορείτε να αντιστοιχίσετε στοιχεία της HTML5 σε κλάσεις και αναγνωριστικά id
κάνοντας πιο εύκολη τη διαχείριση και επεξεργασία τους.
• Μπορείτε να εισάγετε περιοχές κειμένου, διατεταγμένες και μη διατεταγμένες λίστες με
τα αντίστοιχα στοιχεία της HTML5
• Μπορείτε να εισάγετε εύκολα radio Buttons και dropdown lists με τις μεθόδους που
περιγράφηκαν στην ενότητα 4
• Μπορείτε να εισαγάγετε εύκολα progress, meter bar και text effects.
75
76

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 στην ίδια
θέση.
91
Παράδειγμα 4. Εισαγωγή video με link

1.4.insert-video-link.html
Στο παράδειγμα 4 εισάγουμε το Video σαν σύνδεση απλή ή και με button.

Μόλις γίνει επιλογή με το mouse θα ξεκινήσει το video σε νέο παράθυρο του
Browser.
92
Σημείωση: Η ιδιότητα 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 εισάγουμε πηγή ήχου σε δύο εναλλακτικές μορφές.
94
ΥΠΟΕΝΟΤΗΤΑ 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 Σχεδίαση γραμμών (ευθύγραμμων τμημάτων)
Για να σχεδιάσουμε μια γραμμή κάνουμε τα εξής:

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
98
Παράδειγμα 7. Ευθείες με εφαρμογή linejoin

2.2.canvas-lines-linejoin.html
Στο παράδειγμα 7 συγκρίνουμε 3 γωνίες των οποίων οι κορυφές έχουν

διαφορετικά στυλ.
99
Παράδειγμα 8. Ευθείες με εφαρμογή miterLimit

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

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

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

2.3.canvas-lines-miterlimit.html
Στο παράδειγμα 8 συγκρίνουμε δύο γωνίες στις οποίες έχουμε θέσει μέγιστο
πάχος στις κορυφές τους.
102
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 σχεδιάζουμε κύκλους και τόξα:
104
Παράδειγμα 11. Σχεδιασμός φέτας καρπουζιού με τη βοήθεια του σχεδιασμού

τόξων

2.6.canvas-circles-karpouzi.html
105
Παράδειγμα 12. Σχεδιασμός smileface με τη βοήθεια του σχεδιασμού τόξων

2.7.canvas-circles-smile-face.html
106
2.6 Τόξο που ενώνει δύο εφαπτομένες
Σύνταξη:
Για να σχεδιάσουμε ένα τόξο που ενώνει δύο εφαπτομένες κάνουμε τα ακόλουθα
βήματα:
1. Πληκτρολογούμε τις παρακάτω εντολές για να σχεδιάσουμε την πρώτη ευθεία:
x1, y1 είναι η αρχή του τόξου, x2, y2 είναι το τέλος του τόξου, και radius η ακτίνα.
για να σχεδιάσουμε το τέλος της δεύτερης εφαπτομένης.

107
Παράδειγμα 13. Εφαρμογή context.arcTo

2.8.canvas-arcTo.html
Στο παράδειγμα 13 θα ενώσουμε δύο εφαπτομένες με ένα τόξο:
108
2.7 Τετραγωνική και κυβική καμπύλη Bezier
Τετραγωνική καμπύλη Bezier: Για να σχεδιάσουμε μία τετραγωνική καμπύλη Bezier

κάνουμε τα εξής βήματα:
1. Πληκτρολογούμε τις παρακάτω γραμμές για να πάμε τη γραφίδα στο σημείο
όπου θα ξεκινήσει η καμπύλη (start point):
όπου (x1,y1) οι συντεταγμένες του control point 1, (x2,y2) οι συντεταγμένες του

control point 2 και (x3,y3) οι συντεταγμένες του σημείου τερματισμού της
καμπύλης.
Η διαφορά της με την τετραγωνική Bezier είναι ότι έχει δύο σημεία ελέγχου, ενώ η
τετραγωνική έχει ένα.
Παράδειγμα 14. Σχεδιασμός τετραγωνικής καμπύλης Bezier

2.9.canvas-bezier-quad.html
109
Κυβική καμπύλη Bezier: Για να σχεδιάσουμε μία κυβική καμπύλη Bezier κάνουμε τα εξής
βήματα:
110
1. Πληκτρολογούμε τις παρακάτω γραμμές για να πάμε τη γραφίδα στο σημείο
όπου θα ξεκινήσει η καμπύλη(start point)
όπου (x1,y1) οι συντεταγμένες του control point 1, (x2,y2) οι συντεταγμένες του

control point 2 και (x3,y3) οι συντεταγμένες του σημείου τερματισμού της
καμπύλης.
Παράδειγμα 15. Σχεδιασμός κυβικής καμπύλης Bezier

2.10.canvas-bezier-qubic.html
111
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
113
Παράδειγμα 17. Εισαγωγή κειμένου σε θέσεις σχετικές με τη baseline

2.12.canvas-text-baseline.html
114
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 θα επιχειρήσουμε γραμμική οριζόντια διαβάθμιση.
116

Στο παράδειγμα 19 θα επιχειρήσουμε γραμμική κάθετη διαβάθμιση.
Με τη γραμμή
δηλώνουμε ότι επιθυμούμε να αλλάξουμε όλα τα σημεία με Y από 0-200 -όσο

και το ύψος των ορθογωνίων.
117

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

γέμισμα.
118

119

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

2.18.canvas-gradient-radial.html
121
2.9.3 Διαφάνεια και σκιά
Διαφάνεια Για να προσθέσουμε ρύθμιση για διαφάνεια γράφουμε:
και μετά συμπληρώνουμε μία τιμή από 0.0(διαφανές) έως 1.0(αδιαφανές)
122
Παράδειγμα 24. Εφαρμογή διαφάνειας

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

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

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

Σύνταξη:
θετικές τιμές για σκιά προς τα κάτω και αρνητικές τιμές για τιμές προς τα πάνω.
Παράδειγμα 25. Εφαρμογή σκιάς

2.20.canvas-shadow.html
124
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.
126
Περιστροφή του σχεδίου

Για να περιστρέψουμε ένα σχήμα γράφουμε:
όπου degrees είναι οι μοίρες της περιστροφής.

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

2.22.canvas-rotate.html
127
Αλλαγή του σημείου Ο(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
Παράδειγμα 29. Εφαρμογή μετασχηματισμού

2.24.canvas-transformation-move-vert.html
130

2.25.canvas-transformation-move-horiz.html
131

2.26.canvas-transformation-scale.html
132

2.27.canvas-transformation-scew1.html
133

134

135
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
138
Παράδειγμα 36. Δημιουργία σύνδεσης σε άλλη σελίδα

3.2.links-to-page.html
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 το γράφουμε αμέσως μετά το σύμβολο # χωρίς να

αφήσουμε κενό.
141
Παράδειγμα 38. Δημιουργία σημείων αγκύρωσης σε ιστοσελίδα διαφορετικού

website

3.4.anchor-links-different-website.html
Στο παράδειγμα 38 δημιουργούμε σημείο αγκύρωσης σε σελίδα διαφορετικού

website. αυτό που αλλάζει είναι ότι μόλις ανοίξουμε την επιθυμητή σελίδα με
CTRL+U βλέπουμε τον κώδικά της και ψάχνουμε σημείο div για να το
“αγκιστρώσουμε”.
142
Στο ηλεκτρονικό υλικό της ενότητας μπορείτε να δείτε κάποια 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

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 Αληθές
< Μικρότερο Y<12 Αληθές
<= Μικρότερο ή ίσο Y<=4 Αληθές
Πίνακας 4. Λογικοί Τελεστές
Τελεστής Εξήγηση Παράδειγμα Αποτέλεσμα

&& Λογικό «και» x==10 Αληθές
|| Λογικό «ή» X===10 Ψευδές
Άρνηση (Λογικό
! X!=y Αληθές
«όχι»
1.2.1 Σχόλια στην JavaScript
Για να εισαγάγουμε ένα σχόλιο μικρής έκτασης:

Σε μία μόνο γραμμή γράφουμε:
Ενώ αν είναι μεγαλύτερης έκτασης γράφουμε:
1.3 Μοντέλο DOM
Το DOM είναι ένα πρότυπο ιεραρχίας πατρικών και θυγατρικών αντικειμένων με μορφή
δέντρου το οποίο σχεδιάστηκε από την W3c.
Με τη βοήθεια του DOM, η JavaScript μπορεί και δημιουργεί δυναμικό περιεχόμενο σε
μία ιστοσελίδα. Η ανάγκη του DOM προέκυψε από την ανάγκη για την αποφυγή
χαοτικών καταστάσεων κατά τη συγγραφή κώδικα για ιστοσελίδες. Το DOM δηλαδή
χρησιμοποιείται και για άλλες γλώσσες εκτός από τη JavaScript.
151
Όταν γίνεται αναφορά σε ένα DOM αντικείμενο, υπάρχει η αλληλουχία πατρικού και
θυγατρικού στοιχείου με την παρακάτω μορφή στην οποία γράφουμε πρώτα το
πατρικό αντικείμενο, μετά μία τελεία και μετά το θυγατρικό αντικείμενο:
πατρικό_αντικείμενο.θυγατρικό_αντικείμενο
Εικόνα 1. Μοντέλο DOM
ΥΠΟΕΝΟΤΗΤΑ 2. ΕΙΣΑΓΩΓΗ ΚΕΙΜΕΝΟΥ, ΣΥΝΘΗΚΕΣ ΚΑΙ ΒΡΟΧΟΙ

ΕΠΑΝΑΛΗΨΗΣ ΤΗΣ JAVASCRIPT
Μία από τις πολύ σημαντικές λειτουργίες της JavaScript είναι η μέθοδος εμφάνισης
στοιχείων στηn οθόνη του Browser. Επίσης, οι συνθήκες και οι βρόχοι επανάληψης είναι
δομικά στοιχεία της JavaScript -όπως και στις περισσότερες γλώσσες
προγραμματισμού.
2.1 Εισαγωγή κειμένου με τη μέθοδο write του αντικειμένου document
Για να εμφανίσουμε κείμενο στην οθόνη του browser χρησιμοποιούμε τη μέθοδο write
του αντικειμένου document:
Σύνταξη document.write(…….)
Παρακάτω θα εξηγήσουμε πώς χρησιμοποιούμε τη μέθοδο document.write ανά
περίσταση.
152
2.1.1 Εισαγωγή κειμένου
Εισαγωγή απλού κειμένου

Για να εισαγάγουμε κείμενο με τη Javascript γράφουμε το κείμενο μέσα σε διπλά
εισαγωγικά. Στην περίπτωση αυτή κατά την εκτέλεση θα εμφανιστεί αυτούσιο το κείμενο
χωρίς να γίνει κάποιος υπολογισμός ή μορφοποίηση.
Σύνταξη
Παράδειγμα 1. document.write - “Hello World”
Κώδικας: document.write-“Hello World”
153
Εικόνα Browser: document.write-“Hello World”
Μόλις διαβαστεί η συγκεκριμένη γραμμή θα γραφεί στην οθόνη το μήνυμα:

Hello Word with JavaScript
Προσοχή: Έστω ότι γράφουμε μέσα στα διπλά εισαγωγικά το όνομα μιας μεταβλητής
που έχει δηλωθεί στο script. Τότε θα εμφανιστεί στην οθόνη το όνομα της μεταβλητής
και όχι η τιμή της.
Μέσα στα διπλά εισαγωγικά επιτρέπεται να εισάγουμε και ετικέτες κειμένου HTML όπως
παράγραφοι και επικεφαλίδες (p, h..).
Εάν επιθυμούμε κάθε φορά μετά την εκτέλεση μιας document.write να αλλάζει γραμμή
στο κείμενο, γράφουμε τα εξής (εντός βέβαια των ετικετών script):
154
Παράδειγμα 2. document.writeln-“Hello World”
Κώδικας: document.writeln-“Hello World”
Εικόνα
Browser: document.writeln-“Hello World”
Για να αλλάξουμε γραμμή μπορούμε επίσης και να προσθέσουμε την ετικέτα πριν
από το κείμενο που θα εμφανιστεί.
155
Παράδειγμα 3. document.writeln-br
Κώδικας: document.writeln-br
Εικόνα Browser: document.writeln-br
2.1.2 Εμφάνιση τιμής μιας μεταβλητής, συνάρτησης κτλ.
Για να εμφανίσουμε την τιμή μιας μεταβλητής στην οθόνη του Browser γράφουμε
document.write(όνομα_μεταβλητής);
156
Στο παράδειγμα αυτό θα εμφανιστεί στην οθόνη του Browser “1”.

Αν θέλουμε σε μία document.write να εμφανίσουμε κείμενο μαζί με τιμές μεταβλητών
συναρτήσεων κτλ μέσα στην παρένθεση συνδέουμε τα κομμάτια με το “+”.
Έστω ότι θέλουμε να εμφανίσουμε στην οθόνη του Browser το όνομα και δίπλα την τιμή
μιας μεταβλητής.
Τότε γράφουμε
document.write(“όνομα της μεταβλητής=”+ όνομα της μεταβλητής);
Στο παράδειγμα αυτό θα εμφανιστεί στην οθόνη του Browser “c=5”.
Παράδειγμα 4. document.write-var
Κώδικας: document.write-var
157
Εικόνα Browser: document.write-var
2.2 Εντολή συνθήκης if
Σε περίπτωση που θέλουμε να εκτελεστεί ένα σύνολο εντολών αν μία συνθήκη είναι
αληθής χρησιμοποιούμε τις εντολές if και else.
Πιο αναλυτικά, γράφουμε:
Η λογική δηλαδή της εντολής if είναι η εξής:

Αν συμβαίνει αυτόÆεκτέλεσε τις παρακάτω γραμμές
Αλλιώς αν συμβαίνει το άλλοÆ εκτέλεσε τις παρακάτω γραμμές
Στις υπόλοιπες περιπτώσειςÆ εκτέλεσε τις παρακάτω γραμμές
158
Προσοχή: Ο τελεστής σύγκρισης ισότητας είναι το διπλό ίσον “==”
Παράδειγμα 5. Έλεγχος συνθήκης με if
Κώδικας: Έλεγχος συνθήκης με if
159
Εικόνα Browser: Έλεγχος συνθήκης με if
2.3 Δημιουργία βρόχων
Σε πολλές περιπτώσεις χρειάζεται γενικά στις γλώσσες προγραμματισμού να

επαναλάβουμε παραπάνω από μία φορές συγκεκριμένα τμήματα του κώδικα. Για να
αποφύγουμε να γράφουμε πολλές φορές ένα σετ εντολών δημιουργούμε βρόχους
επανάληψης.
2.3.1 Δημιουργία βρόχων με προκαθορισμένο αριθμό επαναλήψεων με την εντολή for
Σε περίπτωση όπου ο αριθμός των επαναλήψεων (για παράδειγμα η εμφάνιση των

στοιχείων ενός πίνακα) είναι προκαθορισμένος τότε χρησιμοποιούμε την εντολή for.
Ο συγκεκριμένος τύπος βρόχου χρησιμοποιεί μία μεταβλητή ως μετρητή. Σε κάθε
εκτέλεση του βρόχου η μεταβλητή αυτή αυξάνεται και μόλις ικανοποιηθεί η συνθήκη, οι
επαναλήψεις σταματούν και συνεχίζεται η ροή εκτέλεσης του κώδικα από την επόμενη
γραμμή μετά το τέλος του βρόχου επανάληψης.
Σύνταξη:
for(μεταβλητή=τιμή; Συνθήκη; Προσαύξηση μετρητή)
{κώδικας βρόχου επανάληψης}
for (i=1;i<5;i++){
160
Στο συγκεκριμένο παράδειγμα έχουμε ορίσει ως μετρητή τη μεταβλητή i. Έτσι λοιπόν

στην πρώτη επανάληψη η μεταβλητή I θα πάρει αρχική τιμή 1.
Εξετάζεται αν ισχύει η συνθηκη i=1<5. Και εφόσον ισχύει θα εκτελεστεί και ο βρόχος.Στη
συνέχεια με τη μέθοδο writeln του αντικειμένου document θα εμφανισθεί στην οθόνη
i=1.
Μόλις εκτελεστεί ο βρόχος, η τιμή του i θα αυξηθεί κατά 1 δηλαδή θα γίνει i=2. Την τρίτη
φορά που θα εκτελεστεί, θα εμφανισθεί i=3;
Την τέταρτη φορά το i=4 και εφόσον ισχύει η συνθήκη θα εμφανισθεί στην οθόνη i=4.
Στο τέλος της επανάληψης, η μεταβλητή i θα προσαυξηθεί κατά 1 οπότε θα γίνει i=5. Η
τιμή i=5 δεν θα περάσει από τον έλεγχο της συνθήκης και έτσι θα σταματήσουν οι
επαναλήψεις.
Αυτό φαίνεται και στο αντίστοιχο παράδειγμα καθώς η document.writeln έξω από το
βρόχο επανάληψης μας δίνει i=5.
Παράδειγμα 6. Βρόχος επανάληψης με for
Κώδικας: Βρόχος επανάληψης με for
161
Εικόνα Browser: Βρόχος επανάληψης με for
2.3.2 Βρόχοι με μη προκαθορισμένο αριθμό επαναλήψεων
Στους βρόχους αυτούς δεν ξέρουμε εκ των προτέρων τον αριθμό των επαναλήψεων.
Για παράδειγμα έστω ότι φορτώνουμε σε μία ζυγαριά πορτοκάλια για να ψωνίσουμε
συνολική ποσότητα 4 κιλά(Kg). Δεν ξέρουμε από την αρχή πόσες φορές θα εισάγουμε
πορτοκάλια στη ζυγαριά, διότι η μάζα τους ποικίλλει. Οπότε οι επαναλήψεις θα
συνεχίζονται όσο η συνολική μάζα των πορτοκαλιών θα είναι μικρότερη των τεσσάρων
κιλών.
Βρόχος με έλεγχο στην αρχή με τη χρήση της εντολής while: Για να γράψουμε κώδικα
για ένα βρόχο επαναλήψεων με έλεγχο στην αρχή γράφουμε:
While(συνθήκη){ κώδικας βρόχου επανάληψης}
Ακολουθεί το ίδιο παράδειγμα που έγινε προηγουμένως με την εντολή for σε έκδοση με
την εντολή while.
Αρχικοποιούμε τη μεταβλητή i=1.

Στη συνέχεια με τη γραμμή while (i < 5) γράφουμε τη συνθήκη εκτέλεσης του βρόχου.
162
Αυτό σημαίνει ότι ο έλεγχος γίνεται στην είσοδο του βρόχου. Αν στο παράδειγμα αυτό
δώσουμε αρχική τιμή i=5 τότε ο βρόχος θα παρακαμφθεί και δεν θα εκτελεστεί καμία
φορά.
Αυτό που στην ουσία περιγράφουμε είναι ότι όσο ισχύει η συνθήκη μετά το while θα
επαναλαμβάνεται ο βρόχος.
Παράδειγμα 7. Βρόχος επανάληψης με while
Κώδικας: Βρόχος επανάληψης με while
Εικόνα Browser: Βρόχος επανάληψης με while
163
Βρόχος με έλεγχο στην τέλος με τη χρήση τη χρήση των εντολών do… while: Για να
γράψουμε κώδικα για ένα βρόχο επαναλήψεων με έλεγχο στο τέλος του βρόχου
γράφουμε:
Ακολουθεί το ίδιο παράδειγμα που έγινε προηγουμένως με την εντολή for σε έκδοση με
τη χρήση των εντολών do… while
Αρχικοποιούμε τη μεταβλητή i=1.
Στη συνέχεια με τη γραμμή while (i < 5) στο τέλος του βρόχου γράφουμε τη συνθήκη
εκτέλεσης του βρόχου.
Αυτό σημαίνει ότι ο έλεγχος γίνεται στο τέλος του βρόχου. Αν στο παράδειγμα αυτό
δώσουμε αρχική τιμή i=5 τότε ο βρόχος θα εκτελεστεί μία φορά γιατί ο έλεγχος γίνεται
στο τέλος
Αυτό που στην ουσία περιγράφουμε είναι ότι όσο ισχύει η συνθήκη μετά το while θα
επαναλαμβάνεται ο βρόχος.
Σημείωση: Η διαφορά με το βρόχο while είναι ότι ο έλεγχος γίνεται στο τέλος. Αυτό
σημαίνει ότι ο βρόχος θα εκτελεστεί τουλάχιστον μία φορά ανεξάρτητα αν ισχύει η
συνθήκη.
164
Παράδειγμα 8. Βρόχος επανάληψης με do..while
Κώδικας: Βρόχος επανάληψης με do..while
Εικόνα Browser: Βρόχος επανάληψης με do..while
Συμβουλή: Δοκιμάστε να γράψετε i=5 και προσπαθήστε να προβλέψετε το αποτέλεσμα

στην οθόνη του Browser.
Τρόπος επιλογής βρόχου επανάληψης: Αν θέλουμε να δημιουργήσουμε βρόχο

επανάληψης με:
¾ Προκαθορισμένο αριθμό επαναλήψεωνÆ επιλέγουμε for
165
¾ Μη προκαθορισμένο αριθμό επαναλήψεων με έλεγχο στην αρχήÆ
¾ Μη προκαθορισμένο αριθμό επαναλήψεων με έλεγχο στο τέλοςÆ
ΥΠΟΕΝΟΤΗΤΑ 3. ΑΛΦΑΡΙΘΜΗΤΙΚΕΣ, ΠΙΝΑΚΕΣ ΚΑΙ JQUERY LIBRARY
Σε αυτή την υποενότητα, αφού μάθουμε πώς μπορούμε να δημιουργήσουμε strings με

JavaScript και να φτιάξουμε πίνακες, θα δούμε ένα απλό παράδειγμα χρήσης της
JQuery βιβλιοθήκης της JavaScript.
3.1 Δημιουργία string
Το string είναι μία αλφαριθμητική ακολουθία χαρακτήρων και σημείων στίξης κτλ. Τα
strings μπορούμε να τα χειριστούμε ως μεταβλητές και ως αντικείμενα.
Αποθήκευση string σε μεταβλητή
Για να αποθηκεύσουμε ένα string σε μία μεταβλητή γράφουμε:
όνομα=”…….περιεχόμενο της string…………”
a=”Hello World”
Αυτό σημαίνει ότι το ”Hello World” έχει αποθηκευθεί στη μεταβλητή a.
Μπορούμε επίσης να δημιουργήσουμε ένα καινούργιο αντικείμενο String ως εξής:
όνομα = new String (”…….περιεχόμενο της string…………”)
Συνένωση Strings
Μπορούμε να ενώσουμε δύο string ορίζοντας μεταβλητή ίση με το άθροισμα των
μεταβλητών των αντίστοιχων μεταβλητών των strings.
a=”Hello”
b=” World!”
c=a+b;
166
Παράδειγμα 9. Strings
Κώδικας: strings
Εικόνα Browser: strings
Για να υπολογίσουμε το μήκος μιας αλφαριθμητικής (String) χρησιμοπούμε την ιδιότητα

length του αντικειμένου String
παράδειγμα:
167
Αυτό το script θα εμφανίσει στην οθόνη την τιμή 15 που είναι το σύνολο των
χαρακτήρων της αλφαριθμητικής welcome.
Παράδειγμα 10. String Length
Κώδικας: string length
Εικόνα Browser: string length
168
Για να μετατρέψουμε τους χαρακτήρες του string σε:
¾ Κεφαλαία Æ μέθοδος αντικειμένου String toUpperCase()
¾ Μικρά Æ μέθοδος αντικειμένου String toLowerCase()
Παράδειγμα 11. String lower case upper case
Κώδικας: string lower case upper case
169
Εικόνα Browser: string lower case upper case
Substrings
Substrings στη JavaScript εννοούνται τμήματα ενός αρχικού string τα οποία
προσδιορίζονται μεταξύ δύο δεικτών.
Ο πρώτος χαρακτήρας έχει δείκτη 0. Ο δεύτερος δείκτης περιλαμβάνει μέχρι και τον
προηγούμενο δείκτη. Δηλαδή, για παράδειγμα, αν ο δεύτερος δείκτης ισούται με 4
περιλαμβάνει μέχρι και το δείκτη 3 ή αλλιώς μέχρι τον 4ο χαρακτήρα.
Σύνταξη:
όνομα_μεταβλητής.substring(δείκτης1, δείκτης2)
Η δεικτοδότηση για το συγκεκριμένο παράδειγμα:
Στην οθόνη του Browser θα εμφανιστεί “lo Ja”
170
Επίσης μπορούμε να εμφανίσουμε ένα συγκεκριμένο χαρακτήρα με τη μέθοδο CharAt.
Η δεικτοδότηση είναι η ίδια.
Σύνταξη:
όνομα_μεταβλητής.CharAt(δείκτης1)
σαν αποτέλεσμα στην οθόνη του browser θα πάρουμε “e”.
Παράδειγμα 12. Substrings
Κώδικας: substrings
171
Εικόνα Browser: substrings
Αναζήτηση τμήματος ενός string με τη μέθοδο indexOf

Για να κάνουμε αναζήτηση ενός string μέσα σε κάποιο άλλο string γράφουμε
Όνομα μεταβλητής= όνομα_αρχικού_string.indexOf(“string-κλειδί αναζήτησης”)
Η indexOf θα επιστρέψει την τιμή του δείκτη της πρώτης επιτυχημένης αναζήτησης. Αν
δεν βρεθεί θα επιστρέψει την τιμή -1. Η δεικτοδότηση είναι η ίδια με τα substrings.
Στο παραπάνω παράδειγμα έχουμε ορίσει να αποθηκευθεί το αποτέλεσμα στη

μεταβλητή search. Η αλφαριθμητική αναζήτησης είναι “Javascript” και το αποτέλεσμα
της αναζήτησης είναι η τιμή 6.
172
Παράδειγμα 13. Αναζήτηση με indexOf
Κώδικας: αναζήτηση με indexOf
Εικόνα Browser: αναζήτηση με indexOf
3.2 Πίνακες στη Javascript
Πίνακας είναι μία συλλογή ομοειδών στοιχείων σε ορθογώνια διάταξη με στόχο την
καλύτερη επεξεργασία και προσβασιμότηττά τους.
Ποια η χρησιμότητα των πινάκων;
Έστω ότι θέλουμε να αποθηκεύσουμε τους βαθμούς ενός διαγωνίσματος των
μαθητών μιας τάξης με 30 μαθητές. Για να το κάνουμε αυτό θα χρειαστούμε 30
173
μεταβλητές. Αντί για αυτό όμως, μπορούμε να δηλώσουμε ένα πίνακα 30 κελιών. Το
καθένα από τα 30 κελιά θα αντιστοιχεί σε μία μεταβλητή.
Εδώ αξίζει να σημειώσουμε ότι ο υπολογiστής μας δεν «αντιλαμβάνεται» μία ορθογώνια
διάταξη όταν δηλώνουμε στη Javascript ή σε άλλη γλώσσα ένα πίνακα. Απλά έχουν
δημιουργηθεί έτσι οι δηλώσεις ενός πίνακα για δική μας διευκόλυνση.
3.2.1 Αριθμητικοί Πίνακες μίας διάστασης
Για να δηλώσουμε ένα πίνακα στη Javascript γράφουμε:

Όνομα_μεταβλητής=new Array(χ);
Όπου χ θα βάλουμε τον αριθμό των κελιών του πίνακα. Υπάρχει και η επιλογή να
αφήσουμε κενή την παρένθεση και να μη δηλώσουμε το μήκος του πίνακα. Σε αυτήν
την περίπτωση η διάσταση του πίνακα θα είναι ίση με το μεγαλύτερο δείκτη +1.
αυτό σημαίνει ότι θα δημιουργηθεί ένας πίνακας 4 θέσεων ως εξής:

Æ θέση grades [0]
Η κάθε θέση array Array[..] είναι στην ουσία μία μεταβλητή. Δηλαδή η μεταβλητή grades
περιέχει 4 μεταβλητές Array[0]… Array[3]. Εφόσον λοιπόν η κάθε θέση έχει τον ρόλο
μεταβλητής μπορούμε να κάνουμε εκχωρήσεις τιμών όπως και στις μεταβλητές.
Προσοχή η δεικτοδότηση των θέσεων ξεκινάει από τη θέση 0, δηλαδή το πρώτο
στοιχείο του πίνακα είναι το Array[0].
Στον πίνακα grades μπορούμε να εκχωρήσουμε τις τιμές

grades [0]=14;
grades [1]=18;
grades [2]=8;
grades [3]=20;
Τότε ο πίνακας grades(4) θα γίνει:
14 Æ θέση grades [0]
174
Παράδειγμα περίπτωσης που δεν δηλώνεται το μήκος του πίνακα

test();
test[4]=40;
test[9]=80;
Σε αυτήν την περίπτωση εστιάζουμε την προσοχή μας στο μέγιστο δείκτη στον οποίο
εκχωρήθηκε η τιμή και είναι ο δείκτης 9. Άρα το μήκος του πίνακα θα είναι 9+1=10.
υπάρχει επίσης και η δυνατότητα να δηλωθεί ο απευθείας ο πίνακας μαζί με τις
μεταβλητές του όπως παρακάτω:
grades=new Array(14,18,8,20);
ή
grades=[14,18,8,20];
Μήκος πίνακα
Για να εμφανιστεί το μήκος ενός πίνακα χρησιμοποιούμε την ιδιότητα length
Σύνταξη:
document.write(όνομα_πίνακα.length);
document.write(grades.length);
3.2.2 Εμφάνιση στοιχείων πίνακα
Για να εμφανίσουμε τα στοιχεία ενός πίνακα γράφουμε:

document.write(“όνομα_πίνακα[δείκτης]=”+grades[δείκτης]);
document.write(“grades[0]=”+grades[0]);
ας δούμε πώς εκτελείται η συγκεκριμένη γραμμή κώδικα
Η document.write θα εμφανίσει αρχικά αυτούσιο το περιεχόμενο μεταξύ των
εισαγωγικών δηλαδή “grades[0]=”.
Στη συνέχεια θα προσθέσει την τιμή grades[0] που βρίσκεται δίπλα από το +. Και αυτό
γιατί η grades[0] δεν βρίσκεται εντός των εισαγωγικών.
Οπότε το αποτέλεσμα στην οθόνη θα είναι
175
grades[0]=14
Παράδειγμα 14. Array
Κώδικας: Array
Εικόνα Browser: Array
Πίνακες με αλφαριθμητικές strings

Μπορούμε στη JavaScript να χρησιμοποιήσουμε και πίνακες με strings.
Η μοναδική διαφορά είναι όταν κάνουμε εκχώρηση τοποθετούμε το string εντός
εισαγωγικών.
176
names=new Array(4);
names [0]=“Δημήτρης”;
names [1]=“Ελένη”;
names [2]=“Γιώργος”;
names [3]=“Μαρία”;
Παράδειγμα 15. Array με strings
Κώδικας: Array με strings
Εικόνα Browser: Array με strings
177
Εμφάνιση των στοιχείων του πίνακα με βρόχο επανάληψης for
Για να εμφανίσουμε τα στοιχεία του πίνακα με βρόχο επανάληψης for γράφουμε το
παρακάτω τμήμα κώδικα
var i;
for (i=0;i<=μέγιστος_δείκτης;i++)
document.write(“όνομα_πίνακα[“+i+”]="+ όνομα_πίνακα [i]+” ”);
}
Εξήγηση
Η μεταβλητή var i παίζει το ρόλο του μετρητή.
Με την εντολή for ο μετρητής θα πάρει τιμές από 0 έως και 3 σε πλήρη αντιστοίχιση με
τις θέσεις-δείκτες του πίνακα grades.
Η document.write στη συνέχεια θα εμφανίσει αυτούσιο το περιεχόμενο μεταξύ των
εισαγωγικών δηλαδή
grades[
στη συνέχεια θα εμφανίσει ακριβώς δίπλα την τιμή του μετρητή δηλαδή τη θέση του
στοιχείου (για την πρώτη επανάληψη με τιμή μετρητή i=1):
0
στη συνέχεια θα εμφανίσει αυτούσιο το περιεχόμενο μεταξύ των επόμενων
εισαγωγικών:
]=
Μετά θα εμφανίσει την τιμή του grades[0]:
14
Τέλος θα εισαγάγει και ένα κενό. Αυτές οι επαναλήψεις θα γίνουν για όλα τα στοιχεία
του πίνακα. Έτσι, με ένα απλό βρόχο θα μπορούμε να εμφανίσουμε όλα τα στοιχεία με
μία μόνο μέθοδο document.write
178
Παράδειγμα 16. Εμφάνιση στοιχείων Array με βρόχο for
Κώδικας: εμφάνιση στοιχείων Array με βρόχο for
Εικόνα: εμφάνιση στοιχείων Array με βρόχο for
3.3 jQuery JavaScript library
Η jQuery JavaScript library είναι μία μικρή ευέλικτη και περιεκτική βιβλιοθήκη που
χρησιμοποιείται για να κάνει τη ζωή των Web Developers πιο απλή(write less do more).
Μπορεί να συνδυαστεί με την HTML και να της δώσει άλλες δυνατότητες και μπορεί να
βοηθήσει στην απλούστευση της τεχνικής AJAX που θα συναντήσουμε σε επόμενες
διδακτικές ενότητες.
179
Υπάρχει γενικά η λογική στον web προγραμματισμό ότι δεν είναι ανάγκη ο developer
να ξεκινά πάντα από το μηδέν (from scratch) -δεν χρειάζεται να «ανακαλύπτει κάθε
φορά την πυρίτιδα». Για παράδειγμα, αν θέλει να εισαγάγει πεδίο επιλογής ημερομηνίας
δεν χρειάζεται να το δημιουργήσει από την αρχή εφόσον υπάρχει έτοιμο και
προσφέρεται δωρεάν από τη jQuery JavaScript library.
Το πρώτο JQuery JavaScript: Βήματα για το πρώτο παράδειγμα με jQuery:
1. Το πρώτο βήμα είναι να κατεβάσουμε το jQuery αρχείο.
2. Πηγαίνουμε στην τοποθεσία http://jquery.com/download/
3. Κάνουμε δεξί κλικ με το mouse στο Download the compressed, production
jQuery 1.11.1
4. Επιλέγουμε αποθήκευση ως και επιλέγουμε διαδρομή για να σώσουμε το αρχείο.
5. Μόλις τελειώσει το download, θα έχουμε διαθέσιμο το αρχείο jquery-
1.11.1.min.js.
6. Ανοίγουμε στο desktop ή κάπου αλλού folder και του δίνουμε κάποιο όνομα
7. Μέσα στο folder που ανοίξαμε δημιουργούμε καινούργιο φάκελο με όνομα
scripts και μέσα σε αυτόν τον φάκελο αποθηκεύουμε το αρχείο «αρχείο jquery-
1.11.1.min.js»
8. Επιστρέφουμε στο εσωτερικό του πρώτου φακέλου και δημιουργούμε αρχείο με
κατάληξη .html μέσα στο οποίο θα γίνεται κλήση της βιβλιοθήκης jQuery
Αναλυτική περιγραφή παραδείγματος: Το παράδειγμα που ακολουθεί είναι βασισμένο

σε παράδειγμα από τη σελίδα:
http://jquery.com/
1. Δημιουργούμε φάκελο με το όνομα «example-jquery» ή οποιοδήποτε άλλο

όνομα.
2. Μέσα στο folder που ανοίξαμε δημιουργούμε καινούργιο φάκελο με όνομα
scripts και μέσα σε αυτόν τον φάκελο αποθηκεύουμε το αρχείο «αρχείο jquery-
1.11.1.min.js»
3. Γράφουμε τον παρακάτω κώδικα σε html αρχείο:
180
Μέχρι εδώ έχουμε ορίσει γλώσσα και τίτλο για το tab του browser.
Στο στοιχείο head εισαγάγουμε τη βιβλιοθήκη jQuery που περιέχεται στο αρχείο jQuery-
1.11.1.min.js που βρίσκεται μέσα στο φάκελο scripts.
Δημιουργούμε ένα button με την ετικέτα Button της html5 με id="color-button". Το id

μπορεί να έχει και άλλο όνομα.
Δημιουργούμε ένα div με:
Το id μπορεί να έχει και άλλο όνομα.
Ξεκινάει το script.
Το $ είναι ο selector της JQuery library. Η παραπάνω γραμμή σημαίνει ότι όταν
εμφανιστεί το κείμενο της html σελίδας να γίνουν αυτά που περιλαμβάνονται μεταξύ
των αγκίστρων.
Ο selector επιλέγει το div με id color-button δηλαδή το button που δημιουργήθηκε

προηγουμένως. Σε αυτό το div θα αλλάξει την ιδιότητα color και θα της δώσει την τιμή
magenta.
181
Παράδειγμα 17. jQuery library
Κώδικας: jQuery library
Εικόνα: jQuery library
182
Σύνοψη
• η JavaScript είναι μία γλώσσα προγραμματισμού από την πλευρά του client που
συνδυάζεται με την HTML5 και προσθέτει δυναμικό περιεχόμενο και πολλές
λειτουργίες στον κώδικα HTML,
• μπορείτε να δηλώνετε μεταβλητές και να εμφανίζετε τις τιμές τους με τη
document.write,
• μπορείτε να δημιουργείτε συνθήκες εκτέλεσης εντολών με την εντολή If,
• μπορείτε να δημιουργείτε βρόχους προκαθορισμένου αριθμού επαναλήψεων με την
εντολή for,
• μπορείτε να δημιουργείτε βρόχους μη προκαθορισμένου αριθμού επαναλήψεων με
τις εντολές do-while και while,
• μπορείτε να δημιουργείτε πίνακες με το αντικείμενο Array,
• μπορείτε να ενσωματώσετε scripts από τη jQuery βιβλιοθήκη της JavaScript.
183
184

DEVELOPMENT
ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 5. ΒΑΣΙΚΕΣ ΕΝΤΟΛΕΣ ΤΗΣ JAVASCRIPT
185
186
Στην πρώτη υποενότητα θα μάθουμε να ορίζουμε συναρτήσεις και παραμέτρους
εισόδου στις συναρτήσεις. Επίσης, θα μάθουμε για τα αντικείμενα document, location
και history του μοντέλου DOM της JavaScript.
Στη δεύτερη υποενότητα θα μάθουμε να χρησιμοποιούμε τα JavaScript event handlers
και να τα συνδυάζουμε με buttons. Επίσης, θα μάθουμε να αλλάζουμε το περιεχόμενο
και το στυλ συγκεκριμένων στοιχείων της ιστοσελίδας χωρίς να χρειάζεται να την
επαναφορτώνουμε.
Στην τρίτη υποενότητα θα δούμε εφαρμογές των όσων διδάχθηκαν στην παρούσα
ενότητα, αλλά και την επεξήγησή τους μέσω των παραδειγμάτων της δημιουργίας νέων
αντικειμένων καθώς και ιδιοτήτων τους.
187
ΥΠΟΕΝΟΤΗΤΑ 1. ΣΥΝΑΡΤΗΣΕΙΣ ΣΤΗ JAVASCRIPT
Σε περίπτωση που χρειαζόμαστε να εκτελεί ο Browser μία ομάδα εντολών όσες φορές
χρειαστεί στον κώδικα, τότε δημιουργούμε μία συνάρτηση.
1.1 Ορισμός συνάρτησης
Για να ορίσουμε μία συνάρτηση στη JavaScript γράφουμε τα εξής:

Function όνομα_συνάρτησης( ){ κώδικας συνάρτησης}
Σημείωση: Ανάμεσα στις παρενθέσεις μπορούμε να προσθέσουμε παραμέτρους
εισόδου, αλλά αυτό θα το δούμε παρακάτω.
Από τη στιγμή που θα ορίσουμε μία συνάρτηση μπορούμε να την καλέσουμε όσες
φορές θέλουμε. Για να κάνουμε κλήση της συνάρτησης γράφουμε το όνομά της και
δίπλα παρενθέσεις ως εξής:
όνομα_συνάρτησης();
Παράδειγμα συνάρτησης
188
Παράδειγμα 1. Η πρώτη συνάρτηση
Κώδικας: Η πρώτη συνάρτηση
Εικόνα Browser: Η πρώτη συνάρτηση
Στο στοιχείο head ορίσαμε τη συνάρτηση Message εντός των ετικετών script χωρίς να
γράψουμε κάτι μέσα στις παρενθέσεις. Αυτό σημαίνει ότι η συνάρτηση θα εκτελεστεί
χωρίς παραμέτρους. Δηλαδή θα εκτελεστεί απλώς ο κώδικας που βρίσκεται εντός των
αγκίστρων.
189
Μέσα στα άγκιστρα γράψαμε alert(“This is my first function”); αυτή η εντολή θα
εμφανίσει ένα alert window με το μήνυμα “This is my first function” -όταν φυσικά θα γίνει
κλήση της συνάρτησης.
Στο στοιχείο body γράψαμε «Message();» για να καλέσουμε τη συνάρτηση και έπειτα
γράψαμε μία document.write για να εμφανίσει μήνυμα όταν θα κάνουμε κλικ στο alert
box.
Καθολικές και τοπικές μεταβλητές συναρτήσεων:

Αν ορίσουμε μία μεταβλητή εντός μίας συνάρτησης αυτή θα λέγεται τοπική (Local) και
θα περιορίζεται στα όρια του κώδικα της συνάρτησης -δηλαδή έξω από τη συνάρτηση
δεν αναγνωρίζεται.
Αν ορίσουμε μία μεταβλητή εκτός μιας συνάρτησης και εντός του Script θα λέγεται
καθολική (Global) και θα αναγνωρίζεται σε όλη την έκταση του Script.
Συμπέρασμα: Οι τοπικές έχουν ισχύ μέσα στα όρια μιας συνάρτησης ενώ οι καθολικές
έχουν ισχύ σε όλο τον κώδικα JavaScript.
1.2 Συναρτήσεις με παραμέτρους.
Αν θέλουμε να ορίσουμε μία συνάρτηση με παραμέτρους τότε γράφουμε:

Function όνομα_συνάρτησης(παράμετρος1,παράμετρος2,…){κώδικας συνάρτησης}
Αν θέλουμε η συνάρτηση να επιστρέψει αποτέλεσμα χρησιμοποιούμε την εντολή return
όνομα_μεταβλητής μέσα στον ορισμό της συνάρτησης.
Έστω ότι θέλουμε να ορίσουμε μία συνάρτηση με τύπο
Όταν γίνεται κλήση της συνάρτησης με παραμέτρους πρέπει να εισάγονται στις

παρενθέσεις οι παράμετροι. Η συνάρτηση του παραδείγματος επιστρέφει το
αποτέλεσμα και το εκχωρεί σε μία μεταβλητή.
190
Στο παράδειγμα ορίσαμε τη συνάρτηση calculationz(a,b) όπου a,b είναι οι παράμετροι
εισόδου.
Στη συνέχεια καλούμε τη συνάρτηση
calculationz(10,5);
δίνοντας παραμέτρους 10,5 αντίστοιχα για a και b. Άρα στη συνάρτηση εισέρχονται οι
τιμές:
a=10
b=5
Στη συνέχεια υπολογίζεται και εμφανίζεται η τιμή του z. Στη συνέχεια με μία
document.write εμφανίζουμε την τιμή που υπολογίστηκε.
Εναλλακτικά μπορούμε να δηλώσουμε μεταβλητή στην οποία θα εκχωρηθεί απευθείας
το αποτέλεσμα της κλήσης της συνάρτησης. Δηλαδή δεν θα χρειαστεί να κάνουμε
ξεχωριστά κλήση της συνάρτησης.
191
Σε αυτό το παράδειγμα γίνεται κλήση της συνάρτησης και εκχώρησης του

αποτελέσματος στη μεταβλητή apotelesma. Στη συνέχεια με μία document.write
εμφανίζεται η τιμή της μεταβλητής apotelesma.
Εικόνα 1. Μοντέλο DOM
a=10
b=5
calculationz
z=2
z=2
apotelesma=z
apotelesma=2
192
Παράδειγμα 2. Η πρώτη συνάρτηση με υπολογισμούς
Κώδικας: Η πρώτη συνάρτηση με υπολογισμούς
Εικόνα Browser: Η πρώτη συνάρτηση με υπολογισμούς
1.3 Αντικείμενα document, history, location
Το αντικείμενο document είναι θυγατρικό του αντικειμένου window. Το αντικείμενο

document παριστάνει ένα έγγραφο μέσα στο παράθυρο (Window) του Browser. Η
κανονική σύνταξή του είναι window.document. αλλά μπορούμε να παραλείπουμε το
window. Για παράδειγμα, η document.write που χρησιμοποιήσαμε θα μπορούσε να
γραφεί window.document.write.
193
Εμφάνιση πληροφοριών του εγγράφου
Μπορούμε να εμφανίσουμε πληροφορίες του εγγράφου γράφοντας document.write()
και μέσα στην παρένθεση μία από τις παρακάτω πληροφορίες:
¾ document.URL ÆΕμφανίζει το URL του εγγράφου.
¾ document.refferer Æ Εμφανίζει το URL της προηγούμενης σελίδας κατά την
πλοήγηση του χρήστη.
¾ document.title Æ Εμφανίζει τον τίτλο του εγγράφου.
¾ document.lastModified Æ Εμφανίζει την ημερομηνία και ώρα της τελευταίας
τροποποίησης του εγγράφου.
Παράδειγμα 3. Μέθοδοι αντικειμένου document
Κώδικας: μέθοδοι αντικειμένου document
194
Εικόνα Browser: Μέθοδοι αντικειμένου document
Αντικείμενο location
Ιδιότητες αντικείμενου location
Το αντικείμενο location περιέχει πληροφορίες για την τρέχουσα URL.
¾ location.protocolÆ Περιέχει πληροφορίες για το πρωτόκολλο του URL
¾ location.hostnameÆ Περιέχει πληροφορίες για το όνομα της τοποθεσίας(www.
…)
¾ location.portÆ Περιέχει πληροφορίες για τον αριθμό της θύρας του URL
¾ location.searchÆ Για την αναζήτηση στο URL
¾ location.hashÆ Όνομα άγκυρας(#anchor)
Μέθοδοι location
location.reload() Æ Εκτελεί την ίδια λειτουργία με το κουμπί ανανέωσης της σελίδας
στους browsers.
195
Παράδειγμα 4. Μέθοδοι αντικειμένου location
Κώδικας: Μέθοδοι αντικειμένου location
Εικόνα Browser: μέθοδοι αντικειμένου location
Αντικείμενο history.
Το Αντικείμενο history ενσωματώνει τις μεθόδους back, forward και go.
¾ history.backÆ Η λειτουργία του είναι ίδια με τη λειτουργία του αντίστοιχου button
back του browser.
¾ history.forwardÆ Η λειτουργία του είναι ίδια με τη λειτουργία του αντίστοιχου
button forward του browser.
196
¾ history.goÆ Ανοίγει μία διεύθυνση από το ιστορικό. Για παράδειγμα αν γράψουμε
history.go(-3) θα είναι σαν να πατάμε 3 φορές το κουμπί back του browser.
ΥΠΟΕΝΟΤΗΤΑ 2. JAVASCRIPT EVENTS
Ένα event είναι κάτι που μπορεί να συμβεί σε κάποιο html στοιχείο είτε όταν ο Browser
κάνει κάτι είτε όταν ο χρήστης κάνει κάτι -δηλαδή, ανάλογα με το event handler θα
πυροδοτηθεί η εκτέλεση συγκεκριμένου κώδικα. Ο κώδικας μπορεί να είναι συνάρτηση,
κάποιο jquery ή οτιδήποτε άλλο -για παράδειγμα αν ο χρήστης κάνει κλικ με το mouse
σε ένα στοιχείο (onclick event handler), τότε μπορεί να αλλάξει το χρώμα του κειμένου
της σελίδας.
2.1 Εvent handlers
Όταν ο χρήστης κάνει κάτι:

¾ onclickÆ Συμβαίνει όταν ο χρήστης κάνει κλικ με το mouse σε κάποιο στοιχείο
Html.
¾ ondblclickÆ Συμβαίνει όταν ο χρήστης κάνει διπλό κλικ με το mouse σε κάποιο
στοιχείο Html.
¾ onmouseoverÆΣυμβαίνει όταν ο χρήστης μετακινεί το ποντίκι πάνω από κάποιο
¾ onmouseoutÆ Συμβαίνει όταν ο χρήστης απομακρύνει το ποντίκι από κάποιο
¾ onkeydownÆ Συμβαίνει όταν ο χρήστης πατάει ένα πλήκτρο του keyboard.
Όταν ο Browser κάνει κάτι:
¾ onchangeÆ Κάποιο στοιχείο Html έχει αλλάξει.
¾ onloadÆ Ο browser έχει σταματήσει τη φόρτωση της σελίδας.
Παραδείγματα
Στα παραδείγματα που ακολουθούν θα δημιουργούμε Buttons στα οποία θα
εφαρμόσουμε onclick, onmouseover και onmouseout events. Πριν ξεκινήσουμε τα
παραδείγματα θα πρέπει να διευκρινίσουμε ότι η ίδια μορφοποίηση μπορεί να
πυροδοτηθεί από οποιοδήποτε event handler.
197
Onclick events
Στο στοιχείο head κατά προτίμηση προσθέτουμε τον ορισμό της ακόλουθης
συνάρτησης:
Μόλις γίνει η κλήση της συνάρτησης θα εμφανιστεί το κείμενο που βρίσκεται εντός της
document.write “this was my first onclick event”);. Αντί λοιπόν να κάνουμε κλήση της
συνάρτησης με τον κλασικό τρόπο, θα δημιουργήσουμε ένα Button το οποίο θα
πυροδοτήσει την κλήση της συνάρτησης. Γενικά είναι πολύ συνηθισμένο να
πυροδοτούνται συναρτήσεις με event handlers.
Στο στοιχείο body θα προσθέσουμε:
Αυτό θα δημιουργήσει το button που θα εμφανίζεται στη σελίδα ως first και στην
κατάσταση onclick, δηλαδή όταν θα πατηθεί από τον κέρσορα του ποντικιού, τότε θα
γίνει κλήση της συνάρτησης βάζοντας εντός των εισαγωγικών του onclick “first()”.
Μόλις λοιπόν ανοίξουμε την ιστοσελίδα, θα εμφανιστεί ένα button που μόλις το πατήσει
κάποιος θα εμφανιστεί στην οθόνη το μήνυμα που προαναφέραμε.
Παράδειγμα 5. First onclick
Κώδικας: first onclick
198
Εικόνα Browser: first onclick
Αφού δοκιμάσετε το αντίστοιχο παράδειγμα του εκπαιδευτικού υλικού, μπορείτε να

κάνετε το εξής:
Να αλλάξετε μόνο τη γραμμή που περιέχει την ετικέτα του button σε:
Δηλαδή αντί για onclick θα βάλετε onmouseover. Στην περίπτωση αυτή μόλις ο
κέρσορας του ποντικιού αιωρηθεί πάνω από το button θα εμφανιστεί το ίδιο ακριβώς
μήνυμα, διότι θα εκτελεστεί η ίδια ακριβώς συνάρτηση.
Παράδειγμα υλοποίησης μεθόδων του αντικειμένου history

Στο στοιχείο body του html αρχείου προσθέτουμε τον παρακάτω κώδικα:
Καταρχήν τα buttons είναι τύπου Png και μπορούν να σχεδιαστούν με οποιοδήποτε

πρόγραμμα δημιουργίας buttons ή με οποιοδήποτε άλλο πρόγραμμα σχεδίασης όπως
Photoshop ή ακόμα και με windows office. Τα συγκεκριμένα buttons δημιουργήθηκαν
από το PowerPoint 2010.
199
Στον κώδικα χρησιμοποιήσαμε δύο ετικέτες button της Html5 για τα αντίστοιχα buttons
με πυροδότηση των μεθόδων history.forward, history.back από το event handler
onclick.
Παράδειγμα 6. History onclick methods
Κώδικας: history onclick methods
Εικόνα Browser: history onclick methods
200
2.2 Αλλαγή στυλ των buttons με τα event handlers
Μπορούμε να επιφέρουμε αλλαγές στο στυλ των buttons ανάλογα με το τι κάνει ο

χρήστης. Για παράδειγμα μπορούμε να επιφέρουμε αλλαγές τη στιγμή που αιωρείται ο
κέρσορας πάνω από το button και τη στιγμή που απομακρύνεται από το Button.
Παράδειγμα υλοποίησης
Θα δημιουργήσουμε ένα button και θα επιφέρουμε τροποποιήσεις όταν αιωρείται ο
κέρσορας πάνω από το button και όταν έχει απομακρυνθεί από αυτό.
Για αυτό το σκοπό θα χρησιμοποιήσουμε δύο συναρτήσεις. Η μία θα περιγράφει
μορφοποιήσεις που θα συμβούν κατά την αιώρηση και η δεύτερη συνάρτηση θα
περιγράφει μορφοποιήσεις που θα συμβούν κατά την απομάκρυνση.
Ορισμός συνάρτησης κατά την αιώρηση
Μέσα στο στοιχείο head και εντός των ετικετών script γράφουμε:
Η function hover δέχεται σαν παράμετρο εισόδου τη btn και στη συνέχεια αλλάζει το
φόντο σε κόκκινο και το κείμενο του button σε μπλε με τις εντολές btn.style.background
και btn.style.color αντίστοιχα. Στη συνέχεια επιστρέφει τις τιμές με την εντολή return.
Στη συνέχεια θα ορίσουμε μία συνάρτηση για να επαναφέρουμε το button στο αρχικό
του στυλ όταν θα απομακρυνθεί ο κέρσορας από αυτό.
Για να το πετύχουμε αυτό γράφουμε:
Η function out δέχεται σαν παράμετρο εισόδου τη btn και στη συνέχεια αλλάζει το
φόντο σε κίτρινο και το κείμενο του button σε κόκκινο με τις εντολές
201
btn.style.background και btn.style.color αντίστοιχα. Στη συνέχεια επιστρέφει τις τιμές με
την εντολή return.
Στη συνέχεια θα δημιουργήσουμε ένα button με τις ετικέτες button της html και θα
δώσουμε αρχική μορφοποίηση ίδια με αυτή που θα συμβεί όταν μετά από την αιώρηση
απομακρυνθεί ο κέρσορας.
Για να το πετύχουμε αυτό γράφουμε:
Το style είναι το αρχικό στυλ του button. Μέσα στην ετικέτα έναρξης του button θα
γράψουμε τα δύο event handlers που θα πυροδοτήσουν τις αντίστοιχες συναρτήσεις
για να επιφέρουν τις αντίστοιχες αλλαγές στο στυλ.
Προσέξτε ότι στις κλήσεις χρησιμοποιούμε τη λέξη this ως είσοδο της συνάρτησης που
σημαίνει ότι μας ενδιαφέρουν οι τρέχουσες τιμές για το στυλ του button.
Παράδειγμα 7. Hover style
Κώδικας: hover style
202
Εικόνα Browser: hover style
Παράδειγμα 8. Hover style σε στοιχεία της σελίδας
Κώδικας: hover style σε στοιχεία της σελίδας
203
Εικόνα Browser: hover style σε στοιχεία της σελίδας
2.3 Αλλαγή του στυλ του κειμένου του στοιχείου body με buttons και
event handlers
Μπορούμε με event handlers να αλλάζουμε το χρώμα του κειμένου του στοιχείου body.
Για να το πετύχουμε αυτό πληκτρολογούμε μέσα στο στοιχείο body:
Αυτό το τμήμα κώδικα θα δημιουργήσει ένα button στο οποίο θα προσθέσει την εικόνα
red-text.png την οποία μπορούμε να δημιουργήσουμε με όλους τους γνωστούς
τρόπους που έχουμε μάθει.
Επίσης στην ετικέτα button έχουμε προσθέσει το event handler onclick το οποίο σε
περίπτωση πατήματος του κουμπιού θα πυροδοτήσει την αλλαγή του χρώματος του
κειμένου σε κόκκινο.
204
Παράδειγμα 9. Αλλαγή χρώματος κειμένου με event handler
Κώδικας: Αλλαγή χρώματος κειμένου με event handler
Εικόνα Browser: Αλλαγή χρώματος κειμένου με event handler
Αλλαγή του στυλ του φόντου του στοιχείου body με buttons και event handlers:
Για να πετύχουμε την αλλαγή του χρώματος του φόντου του στοιχείου body ενεργούμε
όπως στην περίπτωση με την αλλαγή του χρώματος του κειμένου με τη διαφορά ότι θα
χρησιμοποιήσουμε τη μέθοδο document.bgColor.
205
Σημείωση: με την ίδια λογική μπορούμε να επιφέρουμε αλλαγές και σε άλλα στοιχεία της
Html5. Για παράδειγμα με τις ίδιες συναρτήσεις μπορούμε να επιφέρουμε αλλαγές σε
ένα στοιχείο h1 ή ακόμα και σε ένα στοιχείο p.
Παράδειγμα 10. Αλλαγή φόντου με event handler
Κώδικας: Αλλαγή φόντου με event handler
206
Εικόνα Browser: Αλλαγή φόντου με event handler
Σημείωση: Μπορούμε να αλλάξουμε το φόντο στοιχείου με διπλό κλικ του mouse
Παράδειγμα 11. Αλλαγή φόντου κειμένου στοιχείου με double click
Κώδικας: Αλλαγή φόντου κειμένου στοιχείου με double click
207
Εικόνα Browser: Αλλαγή φόντου κειμένου στοιχείου με double click
2.4 Αλλαγές και στο στυλ του κέρσορα
Επίσης μπορούμε να επιφέρουμε αλλαγές και στο στυλ του κέρσορα με τον ίδιο τρόπο.
Αρκεί να προσθέσουμε
Μπορούμε να επιλέξουμε πολλά στυλ για τον κέρσορα του ποντικιού και αυτά είναι τα
εξής σύμφωνα με το w3org:
¾ AutoÆ Ορίζει τον κέρσορα σύμφωνα με το συγκεκριμένο περιεχόμενο.
¾ CrosshairÆ Ένας απλός σταυρός
¾ DefaultÆ Προεπιλογή
¾ PointerÆ Δείχνει κάποιο Link
¾ MoveÆ Δείχνει κάτι το οποίο πρόκειται να μετακινηθεί
¾ e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resizeÆ Δείχνει
ότι κάποιο όριο πρόκειται να μετακινηθεί
¾ textÆ Δείχνει ότι το κείμενο μπορεί να επιλεχθεί.
208
¾ waitÆ Δείχνει ότι το πρόγραμμα είναι απασχολημένο και ο χρήστης πρέπει να
περιμένει. Συχνά εμφανίζεται σαν ρολόι ή κλεψύδρα.
¾ ProgressÆ Το πρόγραμμα πραγματοποιεί κάποιους υπολογισμούς αλλά με
διαφορετική έννοια από το wait. Στην περίπτωση του progress ο χρήστης έχει τη
δυνατότητα να αλληλεπιδρά με το πρόγραμμα. Συχνά εμφανίζεται ως
περιστρεφόμενη μπάλα του volley ή ένα τόξο με ένα ρολόι ή με μία κλεψύδρα.
¾ HelpÆ Υπάρχει η δυνατότητα παροχής βοήθειας για το συγκεκριμένο αντικείμενο.
Συχνά εμφανίζεται ως ερωτηματικό ή μπαλόνι.
Παράδειγμα 12. Αλλαγή στυλ κέρσορα 1
Κώδικας: Αλλαγή στυλ κέρσορα 1
209
Εικόνα Browser: Αλλαγή στυλ κέρσορα 1
Παράδειγμα 13. Αλλαγή στυλ κέρσορα 2
Κώδικας: Αλλαγή στυλ κέρσορα 2
210
Εικόνα Browser: Αλλαγή στυλ κέρσορα 2
2.5 Μέθοδος document.getElementById και innerHTML
document.getElementById
Η μέθοδος document.getElementById αποκτά πρόσβαση στο πρώτο στοιχείο με το
αντίστοιχο Id. Δηλαδή όταν εκτελείται, βρίσκει το στοιχείο με το συγκεκριμένο id και
έπειτα μας δίνει τη δυνατότητα να παρέμβουμε και να επιφέρουμε αλλαγές και στο
περιεχόμενό του και στο στυλ του.
Η innerHTML είναι μία πολύ βασική ιδιότητα για τις ιστοσελίδες. Και αυτό γιατί μας δίνει τη
δυνατότητα να μπορούμε να αλλάξουμε δυναμικά το περιεχόμενο των σελίδων
αλλάζοντας συγκεκριμένα στοιχεία της σελίδας χωρίς να χρειάζεται η επαναφόρτισή
της. Έτσι πετυχαίνουμε καλύτερες ταχύτητες στη φόρτωση των σελίδων και οικονομία
στους πόρους του συστήματος.
Στην πραγματικότητα η ιδιότητα innerHTML δεν ανήκει επίσημα στο DOM αλλά
χρησιμοποιείται πολύ από τους browsers και συνδυάζεται με τη μέθοδο
document.getElementById
Παράδειγμα δυναμικής σελίδας:

Το συγκεκριμένο παράδειγμα είναι πάρα πολύ σημαντικό γιατί είναι η πρώτη γνωριμία
με κώδικα που αλλάζει μόνο συγκεκριμένο περιεχόμενο της σελίδας.
211
Αρχικά στο στοιχείο body θα εμφανιστούν ένα button με onclick event handler για τη
συνάρτηση inner. Αυτό σημαίνει ότι μόλις θα ενεργοποιηθεί το onclick event handler
με το πάτημα του mouse button τότε θα εκτελεστεί η συνάρτηση inner χωρίς
παραμέτρους εισόδου.
Στο στοιχείο head έχει προστεθεί η μέθοδος document.getElementById η οποία μόλις
εκτελεστεί θα ψάξει να βρει το πρώτο στοιχείο με το συγκεκριμένο id και θα αποκτήσει
πρόσβαση σε αυτό. Δηλαδή το id test. Εφόσον έχουμε προσθέσει την ιδιότητα
innerHTML θα αντικατασταθεί το περιεχόμενο του στοιχείου h1 με το μήνυμα “the h1 has
changed”.
Το περιεχόμενο του στοιχείου h2 θα μείνει ανέπαφο.
Παράδειγμα 14. Ιδιότητα getElementById με innerHTML
Κώδικας: Ιδιότητα getElementById με innerHTML
212
Εικόνα Browser: Ιδιότητα getElementById με innerHTML
Σημείωση: Εναλλακτικά μπορούμε να αλλάξουμε τη συνάρτηση στο προηγούμενο

παράδειγμα ως εξής:
Στην περίπτωση αυτή ορίζουμε μία μεταβλητή στην οποία θα αποθηκευθεί το

περιεχόμενο του αποτελέσματος της document.getElementById(“test”). Στη συνέχεια
αφού αποκτήσουμε πρόσβαση θα αλλάξουμε το χρώμα του κειμένου με το πάτημα
του button το οποίο ενσωματώνει event handler onclick.
213
Παράδειγμα 15. Ιδιότητα getElementById
Κώδικας: Ιδιότητα getElementById
Εικόνα Browser: Ιδιότητα getElementById
214
2.6 JavaScript time events
window.setInterval()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος setinterval του αντικειμένου
window από τη στιγμή που θα ξεκινήσει θα εκτελέσει μία συγκεκριμένη συνάρτηση για
πρώτη φορά μετά από συγκεκριμένο αριθμό n milliseconds(1 millisecond=1/1000
seconds). Έπειτα θα συνεχίζει να εκτελεί τη συγκεκριμένη συνάρτηση κάθε n
milliseconds.
Σύνταξη
setInterval(function(){όνομα_συνάρτησης()},χρόνος_σε_msec);
Παράδειγμα 16. Ιδιότητα window.setInterval()
Κώδικας: Ιδιότητα window.setInterval()
215
Εικόνα: Ιδιότητα window.setInterval()
Στο συγκεκριμένο παράδειγμα στο set interval έχουμε δηλώσει δύο συναρτήσεις inner
και inner2. Η πρώτη θα εκτελείται κάθε 2000 mseconds=2 δευτερόλεπτα και η δεύτερη
κάθε 5000 mseconds=5 δευτερόλεπτα.
window.clearInterval()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος window.clearInterval() του
αντικειμένου window χρησιμεύει στο να σταματήσει την επ’ άπειρο εκτέλεση της
συνάρτησης που έχει οριστεί από τη μέθοδο window.setInterval(). Είναι απαραίτητη η
χρήση καθολικής μεταβλητής.
Σύνταξη
clearInterval(όνομα_καθολικής_μεταβλητής)
216
Παράδειγμα 17. Ιδιότητα window.clearInterval()
Κώδικας: Ιδιότητα window.clearInterval()
Εικόνα: ιδιότητα window.clearInterval()
Σημείωση: Η χρήση καθολικών μεταβλητών γίνεται έξω από τους ορισμούς των
συναρτήσεων.
217
Παράδειγμα 18. Ιδιότητα window.setInterval() και window.clearInterval()
Κώδικας: Ιδιότητα window.setInterval() και window.clearInterval()
Εικόνα: ιδιότητα window.setInterval() και window.clearInterval()
Σημείωση:
Για να μπορούμε να χρησιμοποιήσουμε και τα 2 buttons, ενσωματώσαμε την καθολική
μεταβλητή μέσα στο
218
Συμπερασματικά μπορούμε να πούμε ότι η μέθοδος window.setInterval() εκτελεί
συνεχώς μία συνάρτηση κάθε n milliseconds και η μέθοδος window.clearInterval()
σταματάει την αέναη εκτέλεση.
window.setTimeout()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος window.setTimeout() του
αντικειμένου window χρησιμεύει στο να υπάρξει καθυστέρηση στην εκτέλεση μίας
συνάρτησης. Αυτό σημαίνει ότι μόλις διαβαστεί από τον Browser η συγκεκριμένη
μέθοδος τότε θα εκτελεστεί η εντός της μεθόδου συνάρτηση με χρονική καθυστέρηση n
milliseconds. Η συνάρτηση αυτή θα εκτελεστεί μία φορά σε αντίθεση με αντίστοιχη
συνάρτηση που περιγράφεται από τη μέθοδο window.setInterval().
Σύνταξη
setTimeout() (function(){όνομα_συνάρτησης()},χρόνος_σε_msec);
window.clearTimeout()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος window.clearTimeout() του
αντικειμένου window χρησιμεύει στο να υπάρχει η δυνατότητα ακύρωσης της εκτέλεσης
της συνάρτησης που εμπεριέχεται από τη μέθοδο window.setTimeout(). Για παράδειγμα
αν στη μέθοδο window.setTimeout() ορίσουμε σαν καθυστέρηση της συνάρτησης
5000 (milliseconds) σημαίνει ότι αν πυροδοτηθεί συνάρτηση με τη μέθοδο
window.clearTimeout() πριν από τα 5 δευτερόλεπτα μετά την εκτέλεση της μεθόδου
window.setTimeout() η αντίστοιχη συνάρτηση δεν θα εκτελεστεί καμία φορά. Είναι
απαραίτητη η χρήση καθολικής μεταβλητής.
Η μέθοδος window.setTimeout() χρησιμοποιεί μία αντίστροφη μέτρηση για να

εκτελεστεί μία συνάρτηση. Σε περίπτωση που θα εκτελεστεί η μέθοδος
window.clearTimeout() πριν τη λήξη της αντίστροφης μέτρησης, τότε θα ακυρωθεί η
εκτέλεση. Η συγκεκριμένη περίπτωση θα μπορούσαμε να πούμε ότι είναι σαν την
εκτόξευση (εκτέλεση συνάρτησης) ενός πυραύλου για διαστημική αποστολή. Ξεκινάει η
αντίστροφη μέτρηση για εκτόξευση (window.setTimeout()) και αν κάτι πάει στραβά
ακυρώνεται η εκτόξευση με τη μέθοδο window.clearTimeout()
Σύνταξη
clearTimeout() (όνομα_καθολικής_μεταβλητής)
219
Παράδειγμα 19. setTimeout-clearTimeout
Κώδικας: setTimeout-clearTimeout
Εικόνα: setTimeout-clearTimeout
220
ΥΠΟΕΝΟΤΗΤΑ 3. ΔΗΜΙΟΥΡΓΙΑ ΑΝΤΙΚΕΙΜΕΝΩΝ ΚΑΙ ΠΑΡΑΔΕΙΓΜΑΤΑ
Σε αυτή την υποενότητα θα δούμε ορισμένα παραδείγματα για τη δημιουργία

αντικειμένων.
3.1 Εμφάνιση τοπικής και παγκόσμιας΄(Greenwitch) ημερομηνίας και

ώρας
Για να δημιουργήσουμε ένα script για την εμφάνιση ημερομηνίας και ώρας κάνουμε τα
εξής βήματα με βάση το αντίστοιχο παράδειγμα:
221
Παράδειγμα 20. Εμφάνιση τοπικής και παγκόσμιας (Greenwitch) ημερομηνίας και
ώρας
Κώδικας: Εμφάνιση τοπικής και παγκόσμιας(Greenwitch) ημερομηνίας και ώρας
Εικόνα: Εμφάνιση τοπικής και παγκόσμιας(Greenwitch) ημερομηνίας και ώρας
Δημιουργία ρολογιού:
Για να ενσωματώσουμε ένα ρολόι στο script, το πρώτο που θα πρέπει να κάνουμε είναι
να έχουμε 3 διαφορετικές μεταβλητές όπου θα αποθηκεύονται οι ώρες τα λεπτά και τα
δευτερόλεπτα. Για να το πετύχουμε αυτό θα χρησιμοποιήσουμε τις ενσωματωμένες
συναρτήσεις της JavaScript
222
Στη μεταβλητή hours θα αποθηκεύσουμε τις ώρες.
Στη μεταβλητή mins θα αποθηκεύσουμε τα λεπτά.
Στη μεταβλητή secs θα αποθηκεύσουμε τα δευτερόλεπτα.

Τέλος θα χρησιμοποιήσουμε μία document.write για να εμφανίσουμε τα
αποτελέσματα.
Παράδειγμα 21. Ψηφιακό ρολόι
Κώδικας: Εμφάνιση τοπικής και παγκόσμιας(Greenwitch) ημερομηνίας και ώρας
223
Εικόνα: Εμφάνιση τοπικής και παγκόσμιας(Greenwitch) ημερομηνίας και ώρας
Παράδειγμα 22. Ψηφιακό ρολόι με location.reload
Κώδικας: ψηφιακό ρολόι με location.reload
224
Εικόνα: Ψηφιακό ρολόι με location.reload
Σημείωση: Η μέθοδος location.reload χρησιμοποιείται για να επαναφορτώσει τη

σελίδα. Ορίζουμε τα msec που θέλουμε να επαναφορτώνει τη σελίδα.
Παράδειγμα 23. Ψηφιακό ρολόι με start stop buttons
Κώδικας: Ψηφιακό ρολόι με start stop buttons
225
Εικόνα: Ψηφιακό ρολόι με start stop buttons
3.2 Δημιουργία καταλόγου επαφών
Έστω ότι θέλουμε να δημιουργήσουμε κατάλογο επαφών σαν και αυτές που έχουμε
στο smartphone ή στο tablet μας. Για να το πετύχουμε αυτό θα χρειαστούμε αρχικά
ένα αντικείμενο που θα αντιστοιχεί στην καρτέλα επαφής κάθε εγγεγραμμένου. Για
παράδειγμα το αντικείμενο Contact.
3.2.1 Δημιουργία καταλόγου επαφών
Σε αυτό το αντικείμενο θα προσδώσουμε ιδιότητες για το όνομα, τη διεύθυνση, το

email, τηλέφωνο κτλ.
¾ nameÆ για το όνομα
¾ addressÆ για τη διεύθυνση
¾ emailÆ για την ηλεκτρονική διεύθυνση
¾ phoneÆ για αριθμό τηλεφώνου
Στη συνέχεια θα χρειαστούμε μία συνάρτηση που θα την ονομάζουμε δημιουργό
συνάρτηση η οποία θα δημιουργεί αντίτυπα εγγραφών, δηλαδή επαφών.
Η δημιουργός συνάρτηση θα είναι η εξής:
226
Κάθε φορά που θα καλείται η δημιουργός συνάρτηση θα δέχεται παραμέτρους (name,
address, email, phone) τις οποίες θα τις εκχωρεί στις αντίστοιχες μεταβλητές.
Η τελευταία γραμμή (“this.ShowContact=ShowContact”) αναφέρεται στη συνάρτηση
που θα δημιουργήσουμε για να εμφανίζει τα αποτελέσματα της εγγραφής.
Τη λέξη this τη χρησιμοποιούμε όταν δημιουργούμε ένα αντικείμενο ή όταν
αναφερόμαστε στο τρέχον αντικείμενο.
Για να μπορούμε να εμφανίζουμε την καρτέλα επαφής κάποιου δημιουργούμε τη
συνάρτηση ShowContact η οποία αναλαμβάνει να εμφανίσει τη συγκεκριμένη
εγγραφή με τη βοήθεια της document.write. Αυτό που θα σχολιάσουμε εδώ είναι ότι
όταν γράφουμε σε μία γραμμή είναι για να αλλάξουμε γραμμή και όταν
προσθέτουμε είναι για να εμφανιστεί η οριζόντια γραμμή. Δηλαδή ενσωματώνουμε
στο κείμενο τα αντίστοιχα tags της Html5. Επίσης πρέπει να σχολιαστεί ότι η λέξη κλειδί
this μπαίνει μπροστά από τις ιδιότητες έτσι ώστε να εμφανίζει κάθε φορά τις ιδιότητες
της τρέχουσας επαφής που έχει ζητηθεί.
Για να δημιουργήσουμε μία εγγραφή μπορούμε να γράψουμε για παράδειγμα:
Αυτή η γραμμή θα δημιουργήσει το στιγμιότυπο George του αντικειμένου Contact με 4

strings που θα αντιστοιχούν στις ιδιότητες name,address,email,phone του στιγμιότυπου
George.
Για να εμφανιστεί τώρα η εγγραφή George θα γράψουμε:
Δηλαδή θα καλέσουμε τη συνάρτηση ShowContact() να εμφανίσει τις ιδιότητες του

στιγμιότυπου George του αντικειμένου Contact.
227
Παράδειγμα 24. Κατάλογος επαφών
Κώδικας: Κατάλογος επαφών
Εικόνα: Κατάλογος επαφών
Εναλλακτικοί τρόποι:
Αφού γίνει πλήρως κατανοητό το στήσιμο του καταλόγου επαφών στη συνέχεια θα
παρουσιάσουμε εναλλακτικούς τρόπους για τη συγγραφή του κώδικα, για την είσοδο
και έξοδο δεδομένων στον κατάλογο επαφών.
228
3.2.2 Εναλλακτικός τρόπος συγγραφής του κώδικα
Εναλλακτικά μπορούμε να γράψουμε σε ένα text editor (π.χ. notepad) όλο το script
χωρίς τα , και να το αποθηκεύσουμε ως contact.js. Τα text αρχεία με
κατάληξη js είναι αρχεία τύπου JSON.
JSON είναι ένα αρχείο απλής μορφής τύπου txt που χρησιμοποιείται για αποθήκευση,
ανταλλαγή δεδομένων στο Web και έχει κατάληξη (.js). Αρχικοποιήθηκε από τη
JavaScript και το συναντήσαμε ήδη στην προηγούμενη ενότητα στο παράδειγμα με το
JQuery Library.
Για να δούμε το περιεχόμενο ενός JSON αρχείου μπορούμε να κάνουμε δεξί κλικ στο
αρχείο και να το ανοίξουμε με το Notepad++ ή οποιοδήποτε άλλο text editor.
Στη συνέχεια θα καλέσουμε το json file για να εκτελεστεί όλο το script. Θα το καλέσουμε
ως εξής μέσα στο στοιχείο body:
Παράδειγμα 25. Κατάλογος επαφών με κλήση JSON
Κώδικας: Κατάλογος επαφών με κλήση JSON
229
Εικόνα: Κατάλογος επαφών με κλήση JSON
Εναλλακτικός τρόπος εισαγωγής δεδομένων στις καρτέλες επαφών
Εναλλακτικός τρόπος εξαγωγής δεδομένων
Σημείωση: Στην περίπτωση που θα χρησιμοποιήσουμε τον Εναλλακτικό τρόπο

εξαγωγής δεδομένων θα χρησιμοποιήσουμε μόνο τη συνάρτηση Contact
παραλείποντας όμως την τελευταία γραμμή που αναφέρεται στη
230
Παράδειγμα 26. Εναλλακτικός τρόπος εξαγωγής δεδομένων
Κώδικας: Εναλλακτικός τρόπος εξαγωγής δεδομένων
Εικόνα: Εναλλακτικός τρόπος εξαγωγής δεδομένων
231
Σύνοψη
• Μπορούμε να ορίσουμε συναρτήσεις στη JavaScript functions και να τις καλούμε
σε οποιοδήποτε σημείο του κώδικα.
• Τα αντικείμενα document, history και Location είναι θεμελιώδη αντικείμενα του DOM
της JavaScript.
• Μπορείτε να χρησιμοποιείτε την μέθοδο document.getElementById για να
αποκτήσετε πρόσβαση σε κάποιο στοιχείο της σελίδας. Αφού αποκτήσετε
πρόσβαση, μπορείτε να αλλάξετε το περιεχόμενο και το στυλ του. Το περιεχόμενο
μπορείτε να το αλλάξετε με την ιδιότητα innerHTML.
• Μπορείτε να δημιουργείτε με τη βοήθεια συνάρτησης αντικείμενα και ιδιότητες
αυτών.
• Μπορείτε να δημιουργείτε scripts για την εμφάνιση ώρας και τη δημιουργία
καταλόγου επαφών.
• Μπορείτε να δημιουργείτε αρχεία τύπου JSON στα οποία θα γράφετε κώδικα
Javacript τον οποίο απλά θα καλείτε εντός του στοιχείου body για να εκτελεστεί.
232
ΒΙΒΛΙΟΓΡΑΦΙΑ
ΔΕ1
• Castro, E & Hyslop, B., (2012), HTML5 & CSS3 Visual Quicstart Guide, 7th edition, USA:
Pearson Education
• Niederst Robbins, J., (2012), Learning Web Design, 4th edition,Canada: O’Reilly
Media
• Wempen, F., (2011) HTML5 Step By Step, 1st edition, USA: Microsoft Press
• Wempen, F., (2013) Earn HTML5, 1st edition, USA: Microsoft Press
• Forster, K. & Bernd, B., (2011), HTML5 Guidelines for Web Developers, 1st edition,
USA: Pearson Education
• Hudson, Ch. & Leadbetter, T., (2012), HTML5 developer’s cookbook, 1st edition USA:
Pearson Education.
• MacDonald, M., (2011), HTML5 the missing manual,1st edition, USA: O’Reilly Media
• Freeman, E. & Robson, (2011), Head first HTML programming, 1st edition USA:
O’Reilly
ΔΕ2-ΔΕ3
Pearson Education
• Niederst Robbins, J., (2012), Learning Web Design, 4th edition, Canada: O’Reilly
Media
• Wempen,F., (2011) HTML5 Step By Step, 1st edition, USA: Microsoft Press
• Wempen,F., (2013) Learn HTML5, 1st edition, USA: Microsoft Press
• Forster, K. &Bernd, B., (2011), HTML5 Guidelines for Web Developers, 1st edition, USA:
Pearson Education
• Hudson, Ch.& Leadbetter, T.,(2012), HTML5 developer’s cookbook, 1st edition USA:
Pearson Education.
• MacDonald, M., (2011), HTML5 the missing manual, 1st edition, USA: O’Reilly Media
• Freeman, E. & Robson, (2011), Head first HTML programming, 1st edition USA:
O’Reilly
• Freeman, E. & Robson, (2011), Head first HTML and CSS, 2nd edition USA: O’Reilly
233
• Bruce Lawson, B.& Sharp, R., (2011), Introducing HTML5, 1st edition, USA: New Riders
• Robe Fuller, R.& Ulrich, L. (2004), HTML in 10 Simple Steps or Less, Indianapolis: Wiley
Publishing
Pearson Education
• Niederst Robbins, J., (2012), Learning Web Design, 4th edition, Canada: O’Reilly
Media
• Wempen,F., (2011) HTML5 Step By Step, 1st edition, USA: Microsoft Press
• Wempen,F., (2013) Earn HTML5, 1st edition, USA: Microsoft Press
• Forster, K. &Bernd, B., (2011), HTML5 Guidelines for Web Developers, 1st edition, USA:
Pearson Education
• Hudson, Ch.& Leadbetter, T.,(2012), HTML5 developer’s cookbook, 1st edition USA:
Pearson Education.
• MacDonald, M., (2011), HTML5 the missing manual, 1st edition, USA: O’Reilly Media
• Freeman, E. & Robson, (2011), Head first Html programming, 1st edition USA: O’Reilly
ΔΕ4-ΔΕ5
• Chaffer, J.& Swedberg, K., (2013) Learning jQuery, 4rth edition, UK: 2013 Packt
Publishing
• Morrison, M., (2008) Head First JavaScript, 1st edition, USA: O’Reilly Media
• Benedetti, R. & Heilman, C, (2008) Beginning JavaScript with DOM Scripting and
Ajax, 2nd edition, USA: Apress
• Ballard, Ph. &Moncur, M, (2008) Sams Teach Yourself Ajax, JavaScript, and PHP All
in One, 1st edition, USA:Sams Publishing
• Zakas, C, (2012) Professional JavaScript for Web Developers 3rd edition, USA:John
Wiley & Sons
• Flanagan, D., (2011) JavaScript the Definitive Guide, 6th edition, USA: O’Reilly
Media
• Suering, S., (2010) JavaScript Step By Step, 1st edition, USA: O’Reilly Media
• Freeman, E. & Robson, E., (2014) Head First JavaScript Programming, 1st edition,
USA: O’Reilly Media
234

1920 Book 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1920 Book 5

Uploaded by

Copyright:

Available Formats

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

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

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

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

Η έντυπη, ηλεκτρονική και γενικά κατά οποιοδήποτε τρόπο αναπαραγωγή, δημοσίευση

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

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

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

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 5. ΒΑΣΙΚΕΣ ΕΝΤΟΛΕΣ ΤΗΣ JAVASCRIPT ............................................. 185

ΒΙΒΛΙΟΓΡΑΦΙΑ ................................................................................................................. 233

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

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

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

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

Εικόνα 1. Στιγμιότυπο από το website της ομάδας WHATWG

Αφού φτιαχτούν και οριστικοποιηθούν τα πρότυπα, στη συνέχεια αναλαμβάνουν οι

1.4 Τι χρειάζομαι για να προγραμματίσω σε HTML5;

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

ΥΠΟΕΝΟΤΗΤΑ 2. ΔΟΜΗ ΚΑΙ ΔΥΝΑΤΟΤΗΤΕΣ.

2.1 Δουλεύοντας με το Notepad++ (windows)

2.2 Δουλεύοντας με το Atom (Mac)

Εικόνα 3. Βασική διεπιφάνεια Atom HTML Editor

2.3 Δομή αρχείων στατικού Website με τη χρήση της HTML5.

2.4 Δομή ιστοσελίδας HTML

Ετικέτα DOCTYPE HTML: Ο κώδικας HTML5 θα πρέπει να Ξεκινά με την ετικέτα

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

Ενότητα Body:Στην ενότητα Body περικλείουμε όλα τα περιεχόμενα της ιστοσελίδας

2.5 Διακριτές ενότητες της δομής της HTML5

2. Γράφουμε στην ενότητα Body τις εξής γραμμές

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

3.1 Κεφαλίδα, υποσέλιδο, ενσωμάτωση άλλης ιστοσελίδας και εισαγωγή

Footer: Η ενότητα Footer χρησιμοποιείται για τη δημιουργία υποσέλιδου το οποίο

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

3.2 Δημιουργία πινάκων με τη χρήση HTML5

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

3.2.1 Δομή πίνακα και τίτλος πίνακα

3.2.3 Βήματα για τη δημιουργία πίνακα

Ενότητα thead του πίνακα:

4.1 Βήματα για τη δημιουργία της πρώτης ιστοσελίδας με το γνωστό

Για να δημιουργήσουμε την πρώτη μας ιστοσελίδα θα κάνουμε τα εξής βήματα:

3. Στην επόμενη γραμμή γράφουμε για να δηλώσουμε τη γλώσσα που θα

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

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

12. Αποθηκεύουμε το αρχείο με την εντολή Αποθήκευση ως από το μενού αρχείο με

4.2 Δημιουργία Button με το Powerpoint

¾ Ανοίγουμε το PowerPoint 2007 ή PowerPoint 2010.

4.3 Δημιουργία navigation bar

Για να δημιουργήσουμε ένα navigation bar menu με το οποίο ο επισκέπτης θα μπορεί

Εικόνα 6. Δημιουργία Navigation Bar

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

Όπως αναφέραμε υπάρχουν δεκάδες button makers. Το συγκεκριμένο επιλέχτηκε, διότι

4.5.1 Εγκατάσταση του easy menu and button maker

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

4.5.2 Βασικές διεπιφάνειες του Easy Menu and Button Maker

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

4.6 Δημιουργία buttons για Mac και Windows

4.7 Παραδείγματα με videos.- αρχεία της διδακτικής ενότητας

Παράδειγμα 2. Δημιουργία σελίδας HTML “Hello world” με Notepad++ part 2

Παράδειγμα 3. Δημιουργία σελίδας HTML “Hello world” με Atom σε περιβάλλον Mac

Παράδειγμα 4. Δημιουργία button με το PowerPoint

Παράδειγμα 5. Δημιουργία button με το Easy Button and Menu Maker

Παράδειγμα 7. Τρόποι ανοίγματος ενός HTML file

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