Κεφάλαιο 2 - Θεωρητικό Υπόβαθρο 
 

 

 

 

19 

 

2.1.1 HTML και CSS 
 

Η HTML (HyperText Markup Language, Γλώσσα Μορφοποίησης Υπερκειμένου) [11] 

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

 

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

σύγχρονη  έκδοση  ενώ  περιέχει  απαραίτητα  στοιχεία  για  τις  λειτουργίες  που  απαιτούμε.  Η 
έκδοση αυτή προσφέρει νέα στοιχεία και γνωρίσματα στοιχείων αλλά ταυτόχρονα βελτιώνει 
υπάρχοντα στοιχεία. Οι διαφορές από προηγούμενες εκδόσεις είναι πολλές [12] και ξεφεύγουν 
από το πλαίσιο αυτού του βιβλίου. Παρόλα αυτά, μία πολύ σημαντική προσθήκη που αξίζει να 
αναφερθεί είναι αυτή του στοιχείου ‘canvas’. Με το συγκεκριμένο στοιχείο μας επιτρέπεται η 
χρήση γραφικών απευθείας στον περιηγητή χωρίς την χρήση εξωτερικών προγραμμάτων. Η 
αξιοποίηση αυτού  του  στοιχείου αποτέλεσε την βάση δημιουργίας του  εργαλείου προβολής 
κυματομορφών 

 

Η  HTML  λοιπών,  μας  επιτρέπει  την  δημιουργία  των  βασικών  στοιχείων  που 

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

 

Η  γλώσσα  CSS  [13]  χρησιμοποιείται  για  την  περιγραφή  του  τρόπου  εμφάνισης  των 

HTML στοιχείων. Προσφέρει στον περιηγητή πληροφορίες όπως το χρώμα, τις αποστάσεις, το 
μέγεθος ή ακόμη και την ορατότητα του κάθε στοιχείου. Η γλώσσα CSS μας επιτρέπει την 
δημιουργία διαφορετικών κλάσεων με ξεχωριστούς κανόνες. Στην συνέχεια απονέμουμε αυτές 
τις  κλάσεις  στα  διάφορα  στοιχεία  HTML  προσδιορίζοντας  τον  τρόπο  εμφάνισής  τους.  Σε 
σπάνιες περιπτώσεις χρησιμοποιούμε κανόνες απευθείας σε στοιχεία. Αυτό γίνεται συνήθως 
σε στοιχεία που εμφανίζονται μία φορά στην ιστοσελίδα όπως το στοιχείο ‘body’. Σε άλλες 
περιπτώσεις  έχουμε  κανόνες  εξαίρεσης  σε  διάφορα  στοιχεία.  Τα  στοιχεία  αυτά  συνήθως 
αναγνωρίζονται  με  μοναδική  επισήμανση  με  το  γνώρισμα  ‘id’.  Η  χρήση  κλάσεων  για  την 
εφαρμογή  κανόνων  μας  επιτρέπει  τόσο  την  εύκολη  συντήρηση  κώδικα,  όσο  και  την 
ελαχιστοποίηση της πληροφορίας που πρέπει να αποσταλθεί στον χρήστη.  

 

Συγκεκριμένα στην εφαρμογή που αναπτύξαμε, χρησιμοποιούμε την έκδοση CSS3 η 

οποία μας δίνει την δυνατότητα επέκτασης των λειτουργιών της με την χρήση ενοτήτων. Με 
αυτές  τις  ενότητες  μπορούμε  να  προσθέσουμε  νέους  κανόνες  στις  κλάσεις  που 
χρησιμοποιούμε.  Εκτός  όμως  από  τους  νέους  κανόνες,  η  γλώσσα  CSS3  μας  δίνει  την 
δυνατότητα  για  νέες  ψευδοκλάσεις.  Οι  ψευδοκλάσεις  αυτές  μας  επιτρέπουν  την  επέκταση 
κλάσεων για την επιλογή συγκεκριμένων στοιχείων που ανήκουν σε αυτές. Ένα παράδειγμα 
που  χρησιμοποιείται  ευρέος  είναι  η  ψευδοκλάση  ‘hover’  όπου  τα  στοιχεία  που  ανήκουν  σε 
αυτή  είναι  τα  στοιχεία  στα  οποία  βρίσκεται  ο  δείκτης  ποντικιού.  Κάποιες  από  αυτές  τις 
ψευδοκλάσεις  εμφανίστηκαν  σε  παλαιότερες  εκδόσεις  αλλά  με  την  CSS3  έγινε