Εισαγωγή
Οι σημειώσεις αυτές αποτελούν μία προσπάθεια υποστήριξης των θεματικών ενοτήτων 5, 6, 7 και 8 του Αναλυτικού Προγράμματος Σπουδών για το μάθημα «Σχεδιασμός και Ανάπτυξη Ιστοτόπων» των ειδικοτήτων Τεχνικός Εφαρμογών Πληροφορικής, & Τεχνικός Εφαρμογών Λογισμικού του Τομέα Πληροφορικής της Ομάδας Προσανατολισμού Τεχνολογικών Εφαρμογών.
Με το δεδομένο ότι οι σημειώσεις δεν καλύπτουν το σύνολο των αναγκών του μαθήματος αλλά μόνο τις θεματικές ενότητες 5 - 8 του νέου Αναλυτικού Προγράμματος Σπουδών, προτείνεται να λειτουργήσουν ως πρόσθετο συνοδευτικό υλικό με στόχο την κάλυψη και επικαιροποίηση του περιεχομένου του ΑΠΣ.

Το υλικό χωρίζεται σε δύο μέρη. Στο Α' μέρος, που έχει τίτλο «Δημιουργία ιστοσελίδων με HTML, CSS και JavaScript, μέσα από παραδείγματα εφαρμογών» , ασχολούμαστε με την ανάπτυξη του κώδικα και βασικές τεχνικές επεξεργασίας πολυμέσων για την υποστήριξη της δημιουργίας ολοκληρωμένων ιστοσελίδων. Στο Β' μέρος, που έχει τίτλο «Διαχείριση Ιστοτόπου με το WordPress» , ασχολούμαστε με τη διαχείριση ενός ιστοτόπου που έχει δημιουργηθεί, ή πρόκειται να δημιουργηθεί, με το σύστημα διαχείρισης περιεχομένου WordPress.

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

Μέρος Α'
«Δημιουργία ιστοσελίδων με HTML, CSS και JavaScript, μέσα από παραδείγματα εφαρμογών»

Πίνακας πλαισίων πηγαίου κώδικα των παραδειγμάτων του Α' μέρους

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

Καλή διασκέδαση!

Εργαλεία λογισμικού
Στην αγορά κυκλοφορεί πληθώρα εργαλείων για την ανάπτυξη ιστοσελίδων. Υπάρχουν εμπορικά εργαλεία λογισμικού αξίας από δεκάδες έως εκατοντάδες ευρώ, δωρεάν εφαρμογές με περιορισμένη διάρκεια χρήσης ή πρόσβαση στις δυνατότητες τους μέχρι την αγορά κάποιας άδειας και ελεύθερο λογισμικό /λογισμικό ανοιχτού κώδικα (ΕΛ/ΛΑΚ) χωρίς περιορισμούς στη χρήση και επιπλέον με δυνατότητα πρόσβασης στον πηγαίο κώδικα της εφαρμογής.
Το βασικό πλεονέκτημα χρήσης ενός ολοκληρωμένου περιβάλλοντος είναι ότι παρέχει πολλές ευκολίες που επιτρέπουν τους έμπειρους χρήστες να αναπτύξουν γρηγορότερα τις ιστοσελίδες τους. Προϋπόθεση για αυτό είναι η εμπειρία και η γνώση των μηχανισμών και δομών της γλώσσας που επιλέγεται για την ανάπτυξη ιστοσελίδων. Διαφορετικά υπάρχει ο κίνδυνος ο νέος δημιουργός να χάνει απλά το χρόνο του προσπαθώντας να καταλάβει τις διαθέσιμες επιλογές ενός λογισμικού, αντί να εκμεταλλεύεται το λογισμικό για αυτό που έχει σχεδιάσει να πετύχει.

Σε αυτές τις σημειώσεις απευθυνόμαστε στους μαθητές ως νέους δημιουργούς ιστοσελίδων και επομένως θα χρησιμοποιήσουμε μόνο τα βασικά και απαραίτητα εργαλεία για την ανάπτυξη ιστοσελίδων. Αυτά είναι ένας συντάκτης κειμένου (editor) με τον οποίο συντάσσουμε τον κώδικα και ένας φυλλομετρητής (web browser) με τον οποίο βλέπουμε το αποτέλεσμα.
Προτείνουμε λοιπόν την χρήση ενός απλού συντάκτη κειμένου, όπως το Σημειωματάριο (Notepad) των Microsoft Windows, το gEdit σε περιβάλλον GNU/Linux ή κάποιο αντίστοιχο. Υπάρχουν βέβαια και λίγο πιο εξελιγμένοι συντάκτες οι οποίοι διατίθενται δωρεάν, όπως το Notepad++ το οποίο είναι ελεύθερο λογισμικό/λογισμικό ανοιχτού κώδικα για το περιβάλλον των Windows και το οποίο θα χρησιμοποιήσουμε σε αυτές τις σημειώσεις. Ως φυλλομετρητή μπορούμε να χρησιμοποιήσουμε οποιονδήποτε, όπως τον Microsoft Internet Explorer, τον Google Chrome, τον Mozilla Firefox, κ.λπ. Συμβαίνει ο κώδικας μιας ιστοσελίδας να παρουσιάζεται με μικρές διαφορές από φυλλομετρητή σε φυλλομετρητή, ειδικά όταν ο κώδικας περιλαμβάνει προχωρημένες τεχνικές μορφοποίησης. Το θέμα αυτό δεν μας αφορά τόσο ως
μαθητές, αλλά είναι πολύ σημαντικό για τους επαγγελματίες, οι οποίοι αντιμετωπίζουν τέτοιες διαφοροποιήσεις στην εμφάνιση ή τη λειτουργικότητα, καθώς η αίσθηση πλοήγησης και λειτουργίας ενός ιστότοπου πρέπει να είναι κοινή για τους χρήστες, ανεξάρτητα από το περιβάλλον πρόσβασης στις ιστοσελίδες του.

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

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

Εφαρμογή 1: Μια πρώτη, μινιμαλιστική ιστοσελίδα
Ξεκινούμε το ταξίδι μας με τον ελάχιστο απαραίτητο κώδικα που πρέπει να γράψουμε για να δημιουργήσουμε μια κενή ουσιαστικά ιστοσελίδα. Αυτός ο κώδικας καλείται συχνά και σκελετός της ιστοσελίδας. Όλες μας οι ιστοσελίδες θα βασίζονται σε αυτό τον κώδικα, ο οποίος θα εμπλουτίζεται ανάλογα με τις εκάστοτε απαιτήσεις.
Πηγαίος κώδικας 1: Ο ελάχιστος απαραίτητος κώδικας για τη δημιουργία ιστοσελίδας
Το έγγραφο που εμφανίζεται στο πλαίσιο Πηγαίος κώδικας 1 είναι γραμμένο σε HTML5, δηλαδή στην έκδοση 5 της γλώσσας σήμανσης υπερκειμένου HTML. Η HTML είναι η γλώσσα στην οποία είναι γραμμένες οι περισσότερες στατικές ιστοσελίδες του παγκόσμιου ιστού. Στατικές είναι οι ιστοσελίδες των οποίων το περιεχόμενο μεταφέρεται όπως είναι αποθηκευμένο στον εξυπηρετητή ιστοσελίδων, άρα δεν αλλάζει, αν δεν το αλλάξει εκούσια ο δημιουργός τους.

Αντίθετα στις δυναμικές ιστοσελίδες (οι οποίες δημιουργούνται με κώδικα π.χ. PHP, ASP, JSP, κ.λπ.) το περιεχόμενο δημιουργείται από μια εφαρμογή που εκτελείται στον εξυπηρετητή ιστοσελίδων και άρα μπορεί να αλλάξει, μεταξύ δύο ανανεώσεων της ιστοσελίδας στο παράθυρο του φυλλομετρητή. Μια στατική ιστοσελίδα HTML δεν είναι ένα πρόγραμμα που εκτελείται, αλλά οδηγίες για τη διαμόρφωση ενός εγγράφου, ενώ μια δυναμική ιστοσελίδα είναι ένα πρόγραμμα που εκτελείται στο διακομιστή ιστοσελίδων και μπορεί να δημιουργήσει διαφορετικό περιεχόμενο σε κάθε κλήση της.

Η πρώτη γραμμή του κώδικα του παραδείγματος 1, αποτελεί μια οδηγία προς το φυλλομετρητή για το είδος του εγγράφου που ακολουθεί. Ο φυλλομετρητής χρειάζεται να γνωρίζει τον τύπο και την έκδοση του κώδικα της ιστοσελίδας για να την εμφανίσει σωστά. Η συγκεκριμένη δήλωση ενημερώνει ότι το έγγραφο που ακολουθεί είναι γραμμένο σε κώδικα HTML5.
Ο κώδικας HTML δεν είναι ευαίσθητος σε κεφαλαία και πεζά γράμματα (case sensitive). Έτσι είναι ισοδύναμο, είτε γράψουμε DOCTYPE, είτε doctype, είτε DocType, κ.ο.κ. Αυτό που πρέπει να προσέχουμε είναι η εισαγωγή διαστήματος, καθώς για το σύστημα είναι διαφορετικό το DOCTYPE από το DOC TYPE.

Χρήσιμη επισήμανση: Προσοχή χρειάζεται στην εναλλαγή ελληνικού και λατινικού πληκτρολο -γίου. Κατά την εμφάνιση ενός αρχείου κώδικα HTML στο φυλλομετρητή, ο διερμηνέας HTML (εκείνο το υποπρόγραμμα του φυλλομετρητή που αναλαμβάνει να "καταλάβει" τον κώδικα της ιστοσελίδας και να τον μετατρέψει σε οδηγίες για την κατάλληλη εμφάνιση του περιεχομένου στο παράθυρο του φυλλομετρητή) σε αντίθεση με ότι συμβαίνει σε μια διαδικασιακή γλώσσα προγραμματισμού, όπως π.χ. η BASIC ή η Pascal, θα αγνοήσει πιθανά συντακτικά λάθη και εμείς θα πρέπει να εντοπίσουμε τι δεν πήγε καλά και το έγγραφο δεν μορφοποιήθηκε όπως περιμέναμε. Έτσι ενώ οι ετικέτες <ΗΤΜL> και <HTML> μοιάζουν να είναι ίδιες, αυτό δεν συμβαίνει γιατί στην πρώτη το ΗΤΜ είναι γραμμένο με ελληνικούς χαρακτήρες. Συνήθως μόλις γράψουμε το Λ καταλαβαίνουμε ότι είναι στα ελληνικά, αλλά διορθώνουμε μόνο το Λ και όχι τους προηγούμενους χαρακτήρες. Αυτός είναι ένας επιπλέον λόγος για να προτείνουμε τα ονό -ματα ετικετών και παραμέτρων να γράφονται με πεζά και όχι κεφαλαία γράμματα, καθώς τότε είναι εύκολο να ξεχωρίσουμε το <ητμλ> από το <html>.

Οι γραμμές 2-4 αποτελούν ένα σχόλιο. Κάθε σχόλιο ξεκινά με <!- - και τελειώνει με - ->. Τα σχόλια δεν λαμβάνονται υπόψη από το φυλλομετρητή, αλλά μας βοηθούν στην τεκμηρίωση του κώδικα που γράφουμε. Είναι καλή πρακτική να γράφουμε σχόλια στον κώδικα που αναπτύσσουμε, ώστε στο μέλλον να μπορούμε να ανακαλέσουμε τι κάνουμε σε κάθε σημείο του.
Στη γραμμή 5 υπάρχει μια ετικέτα (tag). Η ετικέτα είναι ένα όνομα της γλώσσας HTML, το οποίο έχει κάποια σημασία για το φυλλομετρητή. Κάθε ετικέτα οριοθετείται από δύο τριγωνικές αγκύλες ( < > ). Παρατηρούμε ότι στη γραμμή 13 υπάρχει μια ετικέτα που μοιάζει με αυτή της γραμμής 5, αλλά το όνομα της ετικέτας της γραμμής 13 ξεκινά με το χαρακτήρα slash ( / ). Η ετικέτα της γραμμής 5 επισημαίνει την έναρξη ενός στοιχείου (element) και η ετικέτα της γραμμής 13 επισημαίνει τη λήξη του.

Η γλώσσα HTML είναι λοιπόν μια γλώσσα με την οποία επισημαίνουμε (μαρκάρουμε) το περιεχόμενο, τα συστατικά ενός εγγράφου, όπως κείμενα, εικόνες, πίνακες, κ.λπ. Έτσι καθορίζουμε τη σημασία του περιεχομένου και επηρεάζουμε τη μορφοποίησή του. Κάθε έγγραφο HTML αποτελείται από ένα σύνολο στοιχείων. Κάθε στοιχείο χαρακτηρίζεται από μία ετικέτα έναρξης και μία ετικέτα λήξης του.
<ετικέτα> περιεχόμενο </ετικέτα>

Στοιχείο
Τα στοιχεία μπορούν να φωλιάζουν το ένα μέσα στο άλλο, αλλά όχι οι ετικέτες. Επιτρέπεται δηλαδή το εξής:
<ετικέτα1><ετικέτα2> περιεχόμενο </ετικέτα2></ετικέτα1>
φωλιασμένα στοιχεία
και το εξής:
<ετικέτα1><ετικέτα2> περιεχόμενο </ετικέτα2><ετικέτα3> περιεχόμενο </ετικέτα3></ετικέτα1>

φωλιασμένα στοιχεία
αλλά όχι το εξής:

<ετικέτα1 <ετικέτα2> >
Είναι καλή πρακτική να γράφουμε κάθε ετικέτα σε χωριστή γραμμή και με αντίστοιχη εσοχή ώστε ο κώδικας να είναι πιο ευανάγνωστος, βλέποντας τι "ανήκει" που.
Είναι επίσης καλή πρακτική να "κλείνει" πρώτο το εσωτερικό στοιχείο, όπως προηγουμένως και όχι όπως παρακάτω:
Παρατηρούμε ότι ένα έγγραφο HTML είναι ένα στοιχείο, το html, το οποίο αποτελείται από δύο επιμέρους στοιχεία, το στοιχείο head (κεφαλή) (γραμμές 6-9) και το στοιχείο body (σώμα) (γραμμές 10-12). Στην κεφαλή ορίζονται τα μεταδεδομένα της ιστοσελίδας. Τα μεταδεδομένα είναι πληροφορίες που αφορούν και περιγράφουν το έγγραφο, όπως τίτλος, συγγραφέας, λέξεις κλειδιά, κ.α. Στο σώμα ορίζονται τα περιεχόμενα της ιστοσελίδας, δηλαδή το περιεχόμενο του εγγράφου που εμφανίζεται στο κεντρικό πλαίσιο του παραθύρου του φυλλομετρητή. Το μεγαλύτερο μέρος κώδικα αφορά όπως είναι λογικό το σώμα της ιστοσελίδας. Ο προσεκτικός όμως καθορισμός των μεταδομένων βοηθά στον εντοπισμό της από τις μηχανές αναζήτησης, γεγονός που της δίνει μεγαλύτερη επισκεψιμότητα (Εικόνα 1, στη σελίδα 20 παρακάτω).

Στη γραμμή 7 ορίζεται ο τίτλος της ιστοσελίδας (title). Ο τίτλος είναι πολύ σημαντικός διότι εκτός από τη γραμμή του τίτλου στο παράθυρο του φυλλομετρητή, εμφανίζεται και στα αποτελέσματα μιας μηχανής αναζήτησης που έχει εντοπίσει την ιστοσελίδα μας. Έτσι πρέπει να επιλέγεται με μεγάλη προσοχή. Στη γραμμή 8 ορίζεται ένα επιπλέον μεταδεδομένο (meta) που αφορά την κωδικοποίηση των χαρακτήρων της ιστοσελίδας.
Εικόνα 1: Τίτλος ιστοσελίδας στα αποτελέσματα αναζήτησης και στο φυλλομετρητή
Ο υπολογιστής αντιλαμβάνεται κάθε χαρακτήρα ως ένα κωδικό. Η επιλογή της κατάλληλης κωδικοποίησης είναι σημαντική διότι αν επιλέξουμε λάθος κωδικοποίηση στη θέση κάθε συμβόλου θα εμφανίζεται ένα διαφορετικό σύμβολο, ανάλογα με τις ρυθμίσεις εντοπιότητας (χώρα, γλώσσα) του φυλλομετρητή. Αυτό θα προκαλέσει μεγάλη σύγχυση στον επισκέπτη, ο οποίος μάλλον δεν θα γνωρίζει πως να αλλάξει την κωδικοποίηση στον φυλλομετρητή του (συνήθως αναφέρεται στις ρυθμίσεις του φυλλομετρητή ως Κωδικοποίηση Χαρακτήρων/Κειμένου, Character/Text Encoding), με αποτέλεσμα να εγκαταλείψει την ιστοσελίδα μας (Εικόνα 2).

Εικόνα 2: Λάθος και σωστή κωδικοποίηση χαρακτήρων
Υπάρχουν διαθέσιμες πολλές διαφορετικές κωδικοποιήσεις κειμένου. Η κωδικοποίηση UTF-8 εξασφαλίζει τη σωστή εμφάνιση του κειμένου της ιστοσελίδας σε κάθε περίπτωση. Πρέπει να έχουμε κατά νου ότι ενώ μια ιστοσελίδα δημιουργείται σε ένα περιβάλλον (π.χ. GNU/Linux ή Microsoft Windows) προσπελάζεται από πληθώρα διαφορετικών, συχνά ανομοιογενών περιβαλλόντων (υπολογιστές Macintosh, συσκευές Android, iOS συσκευές με άλλα λειτουργικά συστήματα όπως τηλεοράσεις, media player, κ.λπ.). Για το λόγο αυτό πρέπει να προσέχουμε κατά την αποθήκευση του κώδικα, ώστε να επιλέγουμε την αποθήκευσή του σε μορφή UTF8. Στο Σημειωματάριο αυτό γίνεται επιλέγοντας το πλαίσιο Κωδικοποίηση (Encoding) κατά την αποθήκευση (Εικόνα 3). Στο Notepad++ μπορούμε να επιλέξουμε την κωδικοποίηση του κειμένου από το σχετικό μενού (Εικόνα 4).

Εικόνα 3: Επιλογή κωδικοποίησης UTF-8 κατά την αποθήκευση στο Σημειωματάριο
Εικόνα 4: Επιλογή κωδικοποίησης από το μενού στο Notepad++
Με μια πιο προσεκτική ματιά στη γραμμή 8 ανακαλύπτουμε ακόμη δύο κανόνες του συντακτικού της HTML. Ο πρώτος είναι ότι ορισμένες ετικέτες δεν είναι διπλές. Δεν υπάρχει δηλαδή ετικέτα που να ορίζει το κλείσιμο, το πέρας ενός στοιχείου. Οι ετικέτες αυτές λέγονται μονές και αποτελούν από μόνες τους ένα στοιχείο του εγγράφου.
Ο δεύτερος κανόνας είναι ότι οι ετικέτες μπορεί να παίρνουν παραμέτρους. Έτσι η ετικέτα meta έχει την παράμετρο charset η οποία έχει τιμή "UTF-8". Παραμέτρους μπορούν να πάρουν τόσο οι μονές, όσο και οι διπλές ετικέτες. Με αυτό τον τρόπο μπορεί κάθε φορά να διαφοροποιείται η δράση μιας ετικέτας στο περιεχόμενο που "αγκαλιάζει". Μια ετικέτα μπορεί να έχει σε κάθε περίπτωση περισσότερες από μία παραμέτρους, ανάλογα με το τι θέλουμε να πετύχουμε. Όλες οι παράμετροι περικλείονται μέσα στις τριγωνικές αγκύλες της ετικέτας. Στις διπλές ετικέτες, η ετικέτα κλεισίματος δεν παίρνει ποτέ παραμέτρους.

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

Συνοψίζοντας, η σύνταξη κάθε στοιχείου της HTML την εξής γενική μορφή για στοιχεία με διπλές ετικέτες, με άλλα λόγια, ετικέτες αρχής και τέλους της επισήμανσης:
Ενώ ισχύει η εξής γενική μορφή για στοιχεία μονής ετικέτας, δηλαδή χωρίς ετικέτα τέλους της επισήμανσης, όπου η ετικέτα αποτελεί το σύνολο του στοιχείου:
Τα αποσιωπητικά (…) σημαίνουν ότι οι παράμετροι μπορεί να είναι κατά περίπτωση, καμία, μία ή περισσότερες.
Κλείνοντας το πρώτο μας παράδειγμα, αφού αποθηκεύσουμε την ιστοσελίδα μας, μη ξεχνώντας να ορίσουμε ως κατάληξη την .html, ανοίγουμε το αρχείο του κώδικα με ένα πρόγραμμα φυλλομετρητή για να δούμε το αποτέλεσμα, όπως φαίνεται στην Εικόνα 5.

Εικόνα 5: Άνοιγμα του αρχείου κώδικα HTML για την Εφαρμογή 1 με το φυλλομετρητή
Χρήσιμη επισήμανση: Αν θέλουμε να δούμε τον πηγαίο κώδικα οποιασδήποτε σελίδας, αρκεί να πατήσουμε "ταυτόχρονα" τα πλήκτρα Ctrl + U (έχοντας πατημένο το Ctrl, πατούμε το U). Τότε εμφανίζεται ένα παράθυρο με τον πηγαίο κώδικα (Εικόνα 6) ο οποίος παράγει το αποτέλεσμα που βλέπουμε στο παράθυρο του φυλλομετρητή.
Αυτός είναι και ο κώδικας που αποθηκεύουμε ως τοπικό αρχείο, αν επιλέξουμε να αποθηκεύσουμε μια ιστοσελίδα που βλέπουμε στο φυλλομετρητή μας. Μπορούμε να δοκιμάσουμε να δούμε τον κώδικα που κρύβεται πίσω από οποιαδήποτε ιστοσελίδα, χωρίς όμως να αποθαρρυνθούμε, καθώς είμαστε ακόμη στην αρχή, γνωρίζοντας επιπλέον ότι πολλές επαγγελματικές και μη ιστοσελίδες είναι δυναμικές. Στις δυναμικές ιστοσελίδες ο δημιουργός δεν γράφει το περιεχόμενο της ιστοσελίδας, αλλά ένα πρόγραμμα που θα εκτελεστεί στον εξυπηρετητή ιστοσελίδων και θα δημιουργήσει το περιεχόμενο που θα φτάσει στο φυλλομετρητή μας, τη στιγμή που θα ζητήσουμε να φορτώσουμε τη συγκεκριμένη ιστοσελίδα. Έτσι ο κώδικας HTML που φτάνει στο φυλλομετρητή μας, τις περισσότερες φορές δεν είναι ευανάγνωστος. Το ίδιο συμβαίνει και όταν η διαχείριση του περιεχομένου ενός ιστότοπου υλοποιείται μέσω λογισμικών που ονομάζονται συστήματα διαχείρισης περιεχομένου (Content Management Systems, CMS). Οι διαχειριστές του περιεχομένου τέτοιων ιστοτόπων δεν αλλάζουν τον κώδικα των στατικών ή δυναμικών ιστοσελίδων, παρά μόνο χειρίζονται το περιεχόμενο του ιστότοπου (κείμενα, εικόνες, βίντεο, κ.λπ.), χρησιμοποιώντας τις επιλογές του εκάστοτε λογισμικού CMS.

Εικόνα 6: Ο πηγαίος κώδικας για την Εφαρμογή 1
Εκτενή αναφορά στα στοιχεία της HTML5 μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C), της διεθνούς κοινότητας της οποίας το προσωπικό σε συνεργασία με οργανισμούς και φορείς από όλο τον κόσμο, συνεργάζονται για την ανάπτυξη των προτύπων του παγκόσμιου ιστού ( http://dev.w3.org/html5/html-author/ ).

Εφαρμογή 2: Συμβολικό… κείμενο
Το δεύτερο παράδειγμα εφαρμογής αφορά τον τρόπο που γράφουμε κείμενο και πως μπορούμε να το εμπλουτίσουμε με σύμβολα. Στο πλαίσιο Πηγαίος κώδικας 2 παρουσιάζεται ο κώδικας της δεύτερης εφαρμογής μας.
Πηγαίος κώδικας 2: Ιστοσελίδα με παραγράφους, σύμβολα και στοιχειώδη μορφοποίηση
Ένα έγγραφο αποτελείται συνήθως στο μεγαλύτερο τμήμα του από κείμενο, το οποίο οργανώνεται σε παραγράφους. Έτσι στο παράδειγμά μας χρησιμοποιούμε το στοιχείο παραγράφων (ετικέτες <p> … </p>) για να καθορίσουμε τα όρια των τριών παραγράφων που απαρτίζουν το κείμενο (γραμμές 11-23, 25, 27, 28-35). Η κάθε παράγραφος αποτελεί μία μικρή ενότητα κειμένου.

Στον κώδικα παρατηρούμε επίσης την ύπαρξη κωδικών που ξεκινούν με το χαρακτήρα ampersand ( & ) και τελειώνουν με το χαρακτήρα colon ( ; ) (το ερωτηματικό). Οι κωδικοί αυτοί ονομάζονται οντότητες (entities) και κατά την απόδοση του κώδικα στο φυλλομετρητή μετατρέπονται στα αντίστοιχα σύμβολα. Ορισμένα σύμβολα έχουν ένα λογικό όνομα, όπως
π.χ. &euro; για το €, ενώ άλλα σύμβολα διαθέτουν κωδικό. Τα πιο συχνά χρησιμοποιούμενα σύμβολα διαθέτουν και λογικό όνομα και κωδικό στο δεκαδικό ή στο δεκαεξαδικό σύστημα αρίθμησης. Επαρκή αναφορά στις οντότητες της HTML5 μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C) (http://dev.w3.org/html5/html-author/charref ).

Κοιτάζοντας προσεκτικά τον κώδικα του παραδείγματος παρατηρούμε ότι υπάρχουν κάποια κενά διαστήματα μεταξύ λέξεων και παραγράφων. Ανοίγοντας όμως το αρχείο του παραδείγματος με το φυλλομετρητή μας, παρατηρούμε ότι τα διαστήματα αυτά δεν εμφανίζονται. Αυτό συμβαίνει διότι οι χαρακτήρες αλλαγής γραμμής (Line Feed, LF, με κωδικό ASCII 10), οριζόντιου διαστήματος (Horizontal Tab, HT, με κωδικό ASCII 9) και επιστροφής του δρομέα στην αρχή της γραμμής (Carriage Return, CR, με κωδικό ASCII 13), είναι μη-εκτυπώσιμοι χαρακτήρες ελέγχου. Η γλώσσα HTML προέρχεται από την Πρότυπη Γενικευμένη Γλώσσα Σήμανσης (Standard Generalized Markup Language, SGML). Στις εφαρμογές της SGML η χρήση χαρακτήρων ελέγχου περιορίζεται για να υπάρχει μεγαλύτερη πιθανότητα επιτυχούς ανταλλαγής πληροφοριών μεταξύ ετερογενών συστημάτων μέσω ετερογενών δικτύων. Στην HTML μόνο οι τρεις προηγούμενοι χαρακτήρες ερμηνεύονται και μόνο όταν αποτελούν περιεχόμενα του στοιχείου <pre> … </pre>.

Έτσι λοιπόν στην HTML η ύπαρξη συνεχόμενων μη εκτυπώσιμων χαρακτήρων, όπως οι στηλοθέτες (tab), οι αλλαγές παραγράφου (enter/return) και τα διαστήματα (space) αντικαθίστανται από ένα απλό διάστημα. Επομένως, όπως συμβαίνει και σε ένα λογισμικό κειμενογράφου, η αλλαγή γραμμής γίνεται αυτόματα, ενώ παράγραφος θεωρείται ότι περικλείεται στις ετικέτες <p> … </p> (στον κειμενογράφου πατούμε το πλήκτρο Enter για αλλαγή παραγράφου). Αλλαγή γραμμής, αλλά όχι παραγράφου υλοποιείται με την ετικέτα <hr> (όπως όταν πατούμε Shift+Enter στον κειμενογράφο μας) (γραμμές 12, 19). Παρατηρούμε επίσης ότι η γραμμή 27 που αποτελεί από μόνη της μία παράγραφο έχει μεγαλύτερη απόσταση από την παράγραφο που ακολουθεί, σε σχέση με τη γραμμή 12 στην οποία απλά εισάγεται μια αλλαγή γραμμής. Η παράγραφος είναι μια ενότητα περιεχομένου η οποία μπορεί με τις κατάλληλες οδηγίες να έχει τα δικά της περιθώρια και τη δική της θέση στη ροή του κειμένου της ιστοσελίδας.

Τέλος, στη γραμμή 12 παρατηρούμε τις ετικέτες <strong> … </strong> που ορίζουν να εμφανιστεί το κείμενο με έντονα γράμματα, όπως συμβαίνει και με τις ετικέτες <b> … </b> της γραμμής 27. Η διαφορά έγκειται μόνο στη σημασιολογία, καθώς το στοιχείο strong δίνει ένα επιπλέον νόημα στο κείμενο, το οποίο συνήθως εκμεταλλευόμαστε σε πολυπλοκότερα έγγραφα. Το κείμενο των γραμμών 20-22 γράφεται με μικρότερα γράμματα, λόγω της επισήμανσής του με τις ετικέτες <small> … </small>. Πολυπλοκότερες βέβαια μορφοποιήσεις προτείνεται να γίνονται χρησιμοποιώντας τη γλώσσα των Διαδοχικών Φύλλων Στυλ (Cascading Style Sheet, CSS), καθώς η μορφοποίηση με ετικέτες της γλώσσας HTML έχει περιορισμούς, ενώ πολλές από τις παλαιότερες ετικέτες μορφοποίησης έχουν πλέον αποχαρακτηριστεί, οπότε υπάρχει πιθανότητα να μην υποστηρίζονται από μελλοντικές εκδόσεις των φυλλομετρητών.

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

Εικόνα 7: Η Εφαρμογή 2 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 3: Περιεχόμενο με σημασία
Στην τρίτη μας εφαρμογή θα δούμε πως μπορούμε να δώσουμε νόημα στο περιεχόμενο του εγγράφου. Δηλαδή πως μπορούμε να επισημάνουμε τμήματα του εγγράφου, ώστε αυτά να αποκτήσουν κάποια ειδική σημασία, γεγονός που μας επιτρέπει να οργανώσουμε λογικότερα το περιεχόμενό μας, κάνοντάς το έτσι χρησιμότερο για ανθρώπους και μηχανές.
Πηγαίος κώδικας 3: Ένα σημασιολογικά εμπλουτισμένο έγγραφο HTML
Ξεκινούμε με τη γραμμή 5, όπου στην ετικέτα html προσθέσαμε μια παράμετρο lang. Με αυτή δηλώνουμε τη γλώσσα στην οποία είναι γραμμένο το περιεχόμενο. Αυτό βοηθά μια μηχανή αναζήτησης να επιλέξει τη συγκεκριμένη σελίδα, στην περίπτωση που τα κριτήρια αναζήτησης ταιριάζουν και ο χρήστης έχει επιλέξει ότι θέλει να βρει ιστοσελίδες γραμμένες στα Ελληνικά. Το πρώτο συνθετικό της τιμής "el-GR" αναφέρεται στη γλώσσα, ενώ το δεύτερο στη χώρα.

Εικόνα 8: Εμφανίζοντας την Εφαρμογή 3 στο περιβάλλον του φυλλομετρητή
Οι γραμμές 11 και 15 επισημαίνονται από τις ετικέτες <header> … </header> οι οποίες χαρακτηρίζουν εκείνο το τμήμα περιεχομένου ως κεφαλίδα της ιστοσελίδας. Δεν αλλάζει τη μορφοποίηση, παρά μόνο του δίνει τη σημασία της κεφαλής. Ομοίως στις επόμενες γραμμές τρεις περιοχές (γραμμές 16-30, 31-43, 44-53) χαρακτηρίζονται ως άρθρα με την <article> … </article> και μια περιοχή (γραμμές 54-57) ως υποσέλιδο με τη <footer> … </footer>. Ο προσδιορισμός της σημασίας που έχει για εμάς το περιεχόμενο μπορεί να βοηθήσει έτσι ώστε και η μηχανή να το «καταλαβαίνει» κατά κάποιο τρόπο. Αυτό θα έχει εφαρμογή σε πιο επιτυχημένες λ.χ. αναζητήσεις από μηχανές αναζήτησης ή στην αρτιότερη πιθανή ενσωμάτωση της ιστοσελίδας μας σε κάποιο ιστότοπο που βασίζεται σε ένα σύστημα διαχείρισης περιεχομένου

(Content Management System, CMS), όπως το WordPress, το Joomla, το Drupal, κ.α. Επίσης μας δίνεται η δυνατότητα να ορίσουμε εμείς κανόνες μορφοποίησης μέσω της γλώσσας των διαδοχικών φύλλων στυλ. Οι όροι κεφαλίδα και υποσέλιδο δεν αφορούν την επανάληψη αυτών των περιοχών κατά την εκτύπωση, όπως συμβαίνει στα έγγραφα των επεξεργαστών κειμένου.
Στη γραμμή 14 χρησιμοποιούμε τις ετικέτες <abbr> … </abbr> για να ορίσουμε ένα tool tip, δηλαδή ένα ταμπελάκι το οποίο θα εμφανίζεται αυτόματα, όταν το ποντίκι μας σταθεί πάνω από το κείμενο «ΠΣΔ», εμφανίζοντας την εξήγηση του όρου. Αυτό επιτυγχάνεται χάρη στην παράμετρο title η οποία όταν χρησιμοποιηθεί και στις ετικέτες των επικεφαλίδων και των παραγράφων (γραμμές 12, 17, 19, 32, 33, 45, 46) έχει το ίδιο αποτέλεσμα.

Οι γραμμές 20-24 χαρακτηρίζονται από τις ετικέτες <mark> … </mark> με αποτέλεσμα στο φυλλομετρητή να εμφανίζονται με κίτρινο χρώμα, σαν να τις έχουμε μαρκάρει με κίτρινο μαρκαδόρο επισήμανσης. Οι ετικέτες <u> … </u> στη γραμμή 40 προκαλούν την υπογράμμιση του κειμένου, ενώ η <hr> της γραμμής 55 εμφανίζει μια οριζόντια γραμμή.
Στη γραμμή 33 υπάρχει η ετικέτα <em> η οποία θα δώσει έμφαση στο κείμενο μέχρι τη 34 γράφοντάς το με πλάγια γράμματα. Το ίδιο θα συμβεί και με τη χρήση της <i> στις γραμμές 48-50. Η διαφορά είναι ότι ίσως η <em> να προκαλεί την εμφάνιση λιγότερο ή περισσότερο πλάγιων χαρακτήρων από φυλλομετρητή σε φυλλομετρητή, αλλά το σημαντικότερο είναι ότι η <em> προσδίδει τη σημασία της έμφασης στο περιεχόμενο και μας δίνει τη δυνατότητα να διαφοροποιήσουμε εμείς τη μορφοποίηση χρησιμοποιώντας τη γλώσσα CSS.

Χρήσιμη επισήμανση: Πρέπει να επισημάνουμε ότι, όσον αφορά τη μορφοποίηση του περιεχο -μένου, κάποιες οδηγίες της HTML δεν ερμηνεύονται με τον ίδιο τρόπο σε κάθε φυλλομετρητή. Ειδικότερα, οι οδηγίες της CSS δεν υποστηρίζονται από όλους τους φυλλομετρητές. Αυτό είναι ένα πρόβλημα που αντιμετωπίζουν καθημερινά οι δημιουργοί ιστοσελίδων. Υπάρχουν βέβαια αναλυτικοί πίνακες για την υποστήριξη της εκάστοτε έκδοσης HTML και των δηλώσεων της γλώσσας CSS από τους φυλλομετρητές, τους οποίους πίνακες μπορούμε εύκολα να βρούμε και να εκμεταλλευτούμε. Απλά, οι δικές μας σημειώσεις αφορούν μια εισαγωγή στην ανάπτυξη ιστο -σελίδων, οπότε κρίθηκε σκόπιμο να μη συμπεριλάβουμε τέτοιου είδους πληροφορίες οι οποίες θα κάνουν πολυπλοκότερη την κατανόηση των βασικών εννοιών. Επιπλέον οι επαγγελματίες του χώρου συχνά χρησιμοποιούν έτοιμες εργαλειοθήκες και βιβλιοθήκες εξειδικευμένων εντολών οι οποίες δίνουν το ίδιο αποτέλεσμα στους περισσότερους γνωστούς φυλλομετρητές. Αυτό βέβαια έχει και ένα ρίσκο. Σε περίπτωση που μια βιβλιοθήκη στη οποία στηριχθήκαμε πάψει να ανα -πτύσσεται και να υποστηρίζεται, θα πρέπει να υλοποιήσουμε όλο τον ιστότοπο από την αρχή. Για το λόγο αυτό καλό είναι να χρησιμοποιούμε εργαλεία και πλαίσια ανάπτυξης που θα επιτα -χύνουν την ολοκλήρωση της δουλειάς, αλλά θα πρέπει να γνωρίζουμε τις θεμελιώδεις γλώσσες (HTML για το περιεχόμενο, CSS για τη μορφοποίηση και JavaScript για αυτοματισμούς και διαδραστικότητα), ώστε να μη βρεθούμε κάποια στιγμή προ εκπλήξεως.

Εφαρμογή 4: Περισσότερες μορφοποιήσεις
Συνεχίζουμε με την τέταρτη εφαρμογή, στην οποία παρουσιάζονται περισσότερες ετικέτες που αφορούν τη βασική μορφοποίηση, αλλά και επιπλέον σημασιολογικές επισημάνσεις του περιεχομένου μιας ιστοσελίδας.
Πηγαίος κώδικας 4: Επιπλέον βασικές και σημασιολογικές μορφοποιήσεις
Η ετικέτα <sub> στη γραμμή 12 θα προκαλέσει την εμφάνιση της λέξης «Πληροφορική» ως δείκτη του «Γ». Στις γραμμές 14-15 το στοιχείο cite (ετικέτες <cite> … </cite>) χρησιμοποιείται για να κάνουμε μια αναφορά σε κάποια πηγή, ενώ το στοιχείο q (<q> … </q>), στις γραμμές 16-17, για να παραθέσουμε ένα σύντομο απόσπασμα από τη συγκεκριμένη πηγή. Για μεγαλύτερες αναφορές, ή όταν θέλουμε η αναφορά και το κείμενο του αποσπάσματος να αποτελούν μία ενότητα που ξεχωρίζει, λόγω της αύξησης της αριστερής εσοχής της παραγράφου, εκμεταλλευόμαστε την ετικέτα <blockquote> (γραμμές 36-41).

Όταν θέλουμε να κάνουμε διακριτή μια διαγραφή χρησιμοποιούμε τις ετικέτες <del> … </ del> (γραμμή 23). Όταν θέλουμε να δείξουμε ότι κάτι έχει εισαχθεί χρησιμοποιούμε τις ετικέτες <ins> … </ins> (γραμμή 24). Για να εισάγουμε ημερομηνία ή και ώρα χρησιμοποιούμε το στοιχείο datetime (γραμμή 25), ενώ για ταχυδρομικές διευθύνσεις το στοιχείο address (γραμμή 26).
Για να αναφερθούμε σε κώδικα ή εντολές, καλό είναι να χρησιμοποιούμε τις ετικέτες <code> … </code> (γραμμή 35) οι οποίες επιπλέον αλλάζουν τη μορφή των χαρακτήρων σε στυλ γραφομηχανής, χρησιμοποιώντας γραμματοσειρές όπου ο κάθε χαρακτήρας έχει το ίδιο πλάτος, γνωστές και ως monospace. Το ίδιο συμβαίνει και όταν χρησιμοποιούμε τις ετικέτες <samp> … </samp> (γραμμές 60-65), με τις οποίες μπορούμε να επισημάνουμε για παράδειγμα ένα κείμενο που εμφανίζεται σε ένα τερματικό. Τόσο η code όσο και η samp εισάγουν το περιεχόμενό τους στη ροή του κειμένου, ακολουθώντας τον κανόνα της HTML για τα διαστήματα και τις αλλαγές γραμμής. Έτσι πρέπει εμείς να φροντίσουμε για αυτές. Αν όμως έχουμε μια μεγαλύτερη ενότητα κειμένου που θέλουμε να διατηρήσει τη μορφοποίησή της, όπως συμβαίνει λ.χ. με μια ενότητα κώδικα, τότε χρησιμοποιούμε τις ετικέτες <pre> … </ pre> (γραμμές 28-33).

Χρήσιμη επισήμανση: Γενικά οι γραμματοσειρές χωρίζονται σε monospace και proportional. Στις monospace (π.χ. Courier, Consolas) κάθε χαρακτήρας έχει το ίδιο πλάτος (παρατηρήστε τον κώδικα των παραδειγμάτων αυτών των σημειώσεων). Έτσι λ.χ. οι χαρακτήρες «ι» και «ο»
ή οι «1» και «8» καταλαμβάνουν τον ίδιο χώρο. Αυτό μας βοηθά στην ευκολότερη στοίχιση του κειμένου, χωρίς χρήση ειδικών χαρακτήρων, όπως ο χαρακτήρας στηλοθέτη (tab). Στις proportional (π.χ. Arial, Times New Roman) γραμματοσειρές κάθε χαρακτήρας έχει διαφορετι -κό πλάτος (παρατηρήστε τους χαρακτήρες του κειμένου που διαβάζετε σε αυτή την παράγραφο). Έτσι λ.χ. οι χαρακτήρες «ι» και «ο» ή οι «1» και «8» δεν έχουν το ίδιο πλάτος.

Μια διαφορετική κατηγοριοποίηση των γραμματοσειρών είναι σύμφωνα με τη διακόσμησή τους. Έτσι έχουμε τις γραμματοσειρές τύπου serif (π.χ. Times New Roman, Rockwell) οι οποίες έχουν μια μικρή γραμμούλα στις άκρες των βασικών γραμμών τους και τις γραμματοσειρές τύπου sans-serif οι οποίες δεν διαθέτουν αυτή τη διακόσμηση (π.χ. Tahoma, Arial).

Εφαρμογή 5: Εμφάνιση… με στυλ
Στο πέμπτο παράδειγμα εφαρμογής δείχνουμε τη μορφοποίηση με οδηγίες διαδοχικών φύλλων στυλ, οι οποίες εφαρμόζονται με τη βοήθεια της παραμέτρου style σε κάθε ετικέτα που θέλουμε να μορφοποιήσουμε.
Πηγαίος κώδικας 5: Τοπική μορφοποίηση με κανόνες CSS
Ξεκινούμε με την ετικέτα <sup> στη γραμμή 12. Αυτή προκαλεί το «ο» να γραφεί ως εκθέτης, με αποτέλεσμα να έχουμε το κείμενο «1ο». Στις γραμμές 30-39 παρατηρούμε ότι χρησιμοποιούμε το σύμβολο του μικρότερου (<) με τη μορφή οντότητας (&lt;). Αυτό είναι ένα τρικ για να εμφανιστούν οι ετικέτες HTML ως κώδικας για το παράδειγμα της ιστοσελίδας, αλλά και να μη διαταραχθεί η συνέχεια του κώδικα της ιστοσελίδας μας. Αυτό συμβαίνει διότι ο διερμηνέας HTML του φυλλομετρητή αντιλαμβάνεται τις ετικέτες HTML όπου τις εντοπίσει στο αρχείο της ιστοσελίδας, επισημαίνοντας ή μορφοποιώντας κατάλληλα το περιεχόμενό της. Αν για παράδειγμα στη γραμμή 39 γράφαμε </html> αντί για &lt;/html> τότε δεν θα εμφανιζόταν το κείμενο </html> στο περιεχόμενο και επιπλέον πιθανώς να θεωρούσε ο διερμηνευτής HTML ότι στο σημείο τελειώνει ο κώδικας της ιστοσελίδας, αγνοώντας τον υπόλοιπο κώδικα.

Τόσο στη γραμμή 11, όσο και σε επόμενες, παρατηρούμε την ύπαρξη της παραμέτρου style σε διάφορες ετικέτες. Η παράμετρος αυτή μας επιτρέπει να εφαρμόσουμε στα αντίστοιχα στοιχεία μορφοποίηση σύμφωνα με τους κανόνες των διαδοχικών φύλλων στυλ. Αυτός ο τρόπος μορφοποίησης είναι η σύγχρονη τάση στη συντριπτική πλειοψηφία των ιστοτόπων. Η εφαρμογή μορφοποίησης CSS επιτρέπει να εφαρμόσουμε πολυπλοκότερες μορφοποιήσεις στο περιεχόμενο από αυτές που υποστηρίζει η HTML, ενώ, όπως θα δούμε και σε επόμενα παραδείγματα, επιτρέπει το διαχωρισμό του περιεχομένου από τη μορφή του. Έτσι μπορούμε να χρησιμοποιούμε την HTML για την περιγραφή και επισήμανση του περιεχομένου και τη γλώσσα CSS για την απόδοση της εμφάνισης του στο παράθυρο του φυλλομετρητή. Ως τιμή στην παράμετρο style δίνουμε έναν ή περισσότερους κανόνες (rule) μορφοποίησης της γλώσσας CSS. Κάθε κανόνας συντάσσεται ως εξής:

Έτσι η κάθε style θα έχει τη μορφή:

style =
" ιδιότητα1 : τιμή1; ιδιότητα2 : τιμή2; ... "
σύνολο κανόνων
Η σειρά των κανόνων μέσα στη style δεν έχει σημασία. Είναι σημαντικό κάθε κανόνας να τελειώνει με ένα ερωτηματικό (;) (χαρακτήρας colon). Δεν πειράζει αν ο τελευταίος κανόνας δεν τελειώνει σε ερωτηματικό, καθώς εκεί τερματίζει και η συμβολοσειρά που αποτελεί την παράμετρο της style. Τονίζεται ότι η κάθε ετικέτα style επηρεάζει τη μορφοποίηση του στοιχείου στο οποίο γράφεται. Έτσι σε διαφορετικές ετικέτες έναρξης μπορούμε να έχουμε διαφορετικές μορφοποιήσεις. Βέβαια οι μορφοποιήσεις CSS χωρίζονται σε κατηγορίες, καθώς κάθε είδος περιεχομένου έχει τις δικές του ιδιότητες. Έτσι, κάποιες ιδιότητες αφορούν τους χαρακτήρες του κειμένου, άλλες τις ενότητες κειμένου, όπως οι επικεφαλίδες και οι παράγραφοι, διαφορετικές ιδιότητες τις εικόνες, τους πίνακες, κ.ο.κ. Στη συνέχεια παρουσιάζονται οι κανόνες CSS που εμφανίζονται στο συγκεκριμένο παράδειγμα, μαζί με μια σύντομη εξήγηση και κάποια σχόλια.

Εκτενή αναφορά στη γλώσσα μορφοποίησης CSS μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C) ( http://www.w3.org/TR/CSS/ ).
Χρήσιμη επισήμανση: Στη γλώσσα HTML τα στοιχεία του περιεχομένου χωρίζονται σε δύο με -γάλες κατηγορίες, ως προς τον τρόπο εμφάνισής τους, τον τρόπο δηλαδή με τον οποίο «γεμί ζουν» το παράθυρο του φυλλομετρητή. Η πρώτη κατηγορία είναι τα στοιχεία που τοποθετούνται στη σειρά του κειμένου (inline). Αυτά ακολουθούν τη ροή του κειμένου, δίχως να προκαλούν την αλλαγή παραγράφου. Έχουμε συναντήσει αρκετά στοιχεία αυτού του τύπου στα παραδείγ -ματά μας. Παραδείγματα αποτελούν οι χαρακτήρες του κειμένου, οι οντότητες (π.χ. &copy;), οι ετικέτες small, br, mark, em, strong, small, b, i, u, code, small, samp, cite, q, sub, sup, κ.α. Η δεύτερη κατηγορία είναι τα στοιχεία που τοποθετούνται σε μια νέα παράγραφο και αποτελούν μια ενιαία ενότητα, ένα μπλοκ περιεχομένου. Τα στοιχεία τύπου μπλοκ τείνουν να καταλαμβά -νουν όλο το πλάτος της ιστοσελίδας για την περιοχή που καλύπτει το ύψος τους. Με άλλα λόγια «προσπαθούν» ώστε να μην υπάρχει άλλο περιεχόμενο αριστερά ή δεξιά τους. Παραδείγματα αποτελούν οι ετικέτες p, h1, h2, h3, hr, pre, article, header, footer, blockquote, κ.α. Επισημαί -νουμε ότι η ετικέτα br ανήκει στην πρώτη κατηγορία, καθώς απλά προκαλεί την αλλαγή γραμμής στην τρέχουσα ενότητα δίχως να εισάγει νέα ενότητα.

Εικόνα 10: Το μοντέλο πλαισίου (box model) του περιεχομένου
Τα στοιχεία της HTML εμφανίζονται μέσα σε ένα νοητό πλαίσιο, ένα κουτί που έχει τις δικές του ιδιότητες. Οι ιδιότητες καθορίζονται από το αντίστοιχο μοντέλο πλαισίου (box model) (Εικόνα 10). Το πλεονέκτημα της χρήσης CSS είναι ότι μπορούμε να αλλάξουμε τη μορφοποίηση αυτού του πλαισίου για κάθε στοιχείο του περιεχομένου. Επίσης μπορούμε να εμφανίσουμε τα στοιχεία τύπου σειράς ως στοιχεία τύπου μπλοκ και αντίστροφα.
Εικόνα 11: Η Εφαρμογή 5 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 6: Οργάνωση του περιεχομένου με λίστες
Στην έκτη εφαρμογή χρησιμοποιούμε λίστες για την οργάνωση του περιεχομένου, εισάγουμε εικόνες και μορφοποιούμε με τη βοήθεια ενός εσωτερικού διαδοχικού φύλλου στυλ.
Πηγαίος κώδικας 6: Μορφοποίηση τοπικά και με εσωτερικό φύλλο στυλ
Στις γραμμές 10-15 παρατηρούμε μερικές καινούργιες ετικέτες μεταδεδομένων. Οι ετικέτες meta των γραμμών αυτών έχουν μία παράμετρο name, στην οποία ορίζεται το όνομα μιας παραμέτρου μεταδεδομένων και την παράμετρο content, όπου ορίζεται η τιμή της παραμέτρου μεταδεδομένων. Έτσι παρέχονται πληροφορίες από την ιστοσελίδα μας προς κάθε ενδιαφερόμενο μηχανισμό του παγκόσμιου ιστού σχετικά με το συγγραφέα της ιστοσελίδας (author), την περιγραφή του περιεχομένου της (description), το λογισμικό με το οποίο δημιουργήθηκε (generator) και κάποιες λέξεις κλειδιά που θα βοηθήσουν τις μηχανές αναζήτησης να την εντοπίσουν.

Στις γραμμές 16-36 συναντούμε το στοιχείο style (ετικέτες <style> … </style>). Εκεί ορίζονται οι κανόνες της γλώσσας CSS για τη μορφοποίηση του περιεχομένου της ιστοσελίδας. Κάθε σύνολο κανόνων χαρακτηρίζεται από έναν επιλογέα.
```
επιλογέας { ιδιότητα1 : τιμή1; ιδιότητα2 : τιμή2; σύνολο κανόνων ... }
```
Αν ο επιλογέας μπορεί να είναι μία ετικέτα της HTML, τότε όλα τα στοιχεία της ιστοσελίδας που ξεκινούν με αυτή την μορφοποιούνται σύμφωνα με το σύνολο κανόνων που δηλώνονται για αυτό τον επιλογέα. Αυτή η δυνατότητα παρέχει μεγάλη ευελιξία, καθώς ορίζοντας για παράδειγμα ότι οι επικεφαλίδες h1 θέλουμε να είναι κεντραρισμένες, τότε κάθε επικεφαλίδα αυτού του τύπου στην ιστοσελίδα μας κεντράρεται, χωρίς να χρειάζεται να το δηλώσουμε σε κάθε ετικέτα <h1> χωριστά. Έτσι σε αυτή την ιστοσελίδα επιλέγουμε να μορφοποιήσουμε το σώμα της ιστοσελίδας (body), τις επικεφαλίδες επιπέδου 1 (h1) και 2 (h2), τις εικόνες (img) και τα στοιχεία που ανήκουν σε μη αριθμημένες λίστες (ul li). Μπορούμε λοιπόν όχι μόνο να αναφερθούμε γενικά σε κάποια στοιχεία, αλλά και σε κάποια στοιχεία που έχουν ως «γονείς» άλλα στοιχεία. Στο παράδειγμα αυτό χρησιμοποιούμε μόνο επιλογείς με ονόματα ετικετών, αλλά υπάρχουν, όπως θα δούμε στα επόμενα παραδείγματα, και άλλοι τρόποι ώστε να επιλέγουμε ομάδες περιεχομένου. Πρέπει να αναφέρουμε ότι η συγκέντρωση των μορφοποιήσεων στην κεφαλή της ιστοσελίδας δεν αποκλείει τη χρήση της παραμέτρου style τοπικά σε κάποιες ετικέτες. Έτσι το στοιχείο style του head ορίζει τους κανόνες που ισχύουν για όλο το έγγραφο, αλλά όπου θέλουμε μπορούμε να χρησιμοποιήσουμε τη style ως παράμετρο για να εφαρμόσουμε ιδιαίτερη μορφοποίηση σε κάποια στοιχεία.

Οι νέοι κανόνες CSS που συναντούμε σε αυτό το παράδειγμα αφορούν τις εικόνες.

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

Οι γραμμές 59-73 αναφέρονται σε μια αριθμημένη λίστα. Και σε αυτή την περίπτωση κάθε στοιχείο της λίστας χαρακτηρίζεται από τις ετικέτες <li> … </li> ώστε να θεωρηθεί ενότητα περιεχομένου και να λάβει αυτόματα την αρίθμησή του. Ο κώδικας της ιστοσελίδας τελειώνει με μια λίστα ορισμών στις γραμμές 75-87. Η λίστα ορισμών χαρακτηρίζεται από τις ετικέτες <dl> … </dl> οι οποίες περικλείουν ζεύγη των στοιχείων dt, dd. Το στοιχείο dt έχει σκοπό να εμφανίζει έναν όρο, ενώ το στοιχείο dd, την εξήγησή του.

Εικόνα 12: Η Εφαρμογή 6 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 7: Χρησιμοποιώντας στυλ… εξωτερικό
Στο έβδομο παράδειγμα εφαρμογής παρουσιάζεται η χρήση εξωτερικού αρχείου μορφοποίησης διαδοχικών φύλλων στυλ CSS αλλά και οι φωλιασμένες λίστες.
Πηγαίος κώδικας 7: Μορφοποίηση φωλιασμένης λίστας με εξωτερικό φύλλο στυλ
Στη γραμμή 13 παρατηρούμε το στοιχείο link. Το στοιχείο αυτό έχει σκοπό τη διασύνδεση του κώδικα HTML της ιστοσελίδας με κάποια εξωτερική πηγή, στην περίπτωσή μας ένα εξωτερικό αρχείο στυλ (rel) τύπου CSS (type) που βρίσκεται στο αρχείο (href) "p07.css". Η χρήση εξωτερικών φύλλων στυλ μας δίνει ακόμη μεγαλύτερη ευελιξία, καθώς μπορούμε να χρησιμοποιούμε τους ίδιους κανόνες μορφοποίησης για περισσότερες από μία ιστοσελίδες, ακόμη και για ολόκληρο τον ιστότοπο που αναπτύσσουμε, εφαρμόζοντας κοινά στυλ που ονομάζουμε και θέματα. Αν ένα σύνολο ιστοσελίδων βασίζεται στο ίδιο θέμα, τότε μπορούμε
εύκολα να αλλάξουμε το ύφος τους, αλλάζοντας απλά μερικούς κανόνες στο αρχείο CSS. Ο Πηγαίος κώδικας 8 αφορά τον κώδικα CSS του εξωτερικού φύλλου στυλ.

Πηγαίος κώδικας 8: Ο κώδικας του εξωτερικού φύλλου στυλ για την Εφαρμογή 7.
Παρατηρούμε ότι το αρχείο "p07.css" ξεκινά με ένα σχόλιο (γραμμές 1-3). Οτιδήποτε γράφεται μέσα σε /* … */ θεωρείται σχόλιο και αγνοείται από το φυλλομετρητή. Στη γραμμή 5 έχουμε τη δήλωση της κωδικοποίησης χαρακτήρων του αρχείου που είναι η UTF-8 για καλύτερη συμβατότητα. Κατόπιν γράφονται τα σύνολα κανόνων με τους επιλογείς τους, όπως και στα εσωτερικά φύλλα στυλ.
Όπως έχουμε αναφέρει σε προηγούμενη άσκηση στους κανόνες CSS υπερισχύει η τοπικότητα. Όταν δηλαδή υπάρχει ένα εξωτερικό φύλλο στυλ που επιλέγει ένα τμήμα του περιεχομένου, τότε εφαρμόζονται οι δικοί του κανόνες μορφοποίησης. Αν παράλληλα υπάρχει και ένα εσωτερικό φύλλο στυλ, τότε για το ίδιο τμήμα περιεχομένου ισχύουν οι κανόνες του εσωτερικού και όχι του εξωτερικού φύλλου στυλ. Στην περίπτωση δε που υπάρχει στην ετικέτα έναρξης του τμήματος αυτού και παράμετρος style η οποία ορίζει κάποια μορφοποίηση, τότε εφαρμόζεται κατά προτεραιότητα η μορφοποίηση που ορίζει η τοπική παράμετρος, μετά το στοιχείο style του αρχείου και τελευταία η μορφοποίηση του εξωτερικού φύλλου στυλ. Αυτό σημαίνει ότι μπορούμε να χρησιμοποιούμε κοινή μορφοποίηση για πολλές ιστοσελίδες, η οποία όμως να διαφοροποιείται κατά περίπτωση, σύμφωνα με τις ανάγκες μας.

Οι νέοι κανόνες CSS που συναντούμε σε αυτό το παράδειγμα αφορούν λίστες και κείμενο.

Κλείνοντας θα πρέπει να επισημάνουμε ότι, όπως φαίνεται στις γραμμές 17-40, έχουμε μία λίστα με κουκκίδες στην οποία μέσα φωλιάζουμε επιμέρους λίστες. Γενικά μέσα στα στοιχεία μιας λίστας μπορούμε να συμπεριλάβουμε οποιοδήποτε περιεχόμενο, αρκεί να προσέχουμε να μην μπερδέψουμε τις ετικέτες έναρξης και λήξης κάθε στοιχείου. Αυτό ισχύει άλλωστε και για όλες τις ετικέτες μιας ιστοσελίδας.
Εικόνα 13: Η Εφαρμογή 7 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 8: Πίνακας… κλασικών επιτυχιών
Στην όγδοη εφαρμογή μας παρουσιάζεται ένας πίνακας. Οι πίνακες αποτελούν έναν δημοφιλή τρόπο οργάνωσης και παρουσίασης περιεχομένου.
Πηγαίος κώδικας 9: Ένας πίνακας κειμένου και εικόνων με συγχωνευμένες κυψέλες
Ένας πίνακας στην HTML αποτελείται από κυψέλες (cell) οι οποίες οργανώνονται σε γραμμές (row). Οι ετικέτες <table> … </table> σηματοδοτούν την έναρξη και λήξη του περιεχομένου του πίνακα. Κάθε γραμμή ξεκινά με <tr> και τελειώνει με </tr>, ενώ κάθε κυψέλη οριοθετείται με <td> … </td>. Η ετικέτες <th> … </th> χρησιμοποιούνται συχνά για τον προσδιορισμό των κυψελών της πρώτης γραμμής, ώστε τα περιεχόμενά της να γράφονται με εντονότερους χαρακτήρες.

Ο πίνακας του παραδείγματος έχει 10 γραμμές και 6 στήλες. Μετρώντας όμως τις κυψέλες του (στοιχεία td, th) βρίσκουμε ότι είναι λιγότερες. Αυτό συμβαίνει γιατί μία κυψέλη καταλαμβάνει 2 στήλες, ενώ άλλες καταλαμβάνουν 3 ή 6 γραμμές. Αυτή η τεχνική λέγεται συγχώνευση κυψελών και επιτυγχάνεται χάρη στις παραμέτρους colspan για οριζόντια συγχώνευση (γραμμή 42) και rowspan για κατακόρυφη συγχώνευση (γραμμές 43, 44, 45, 56, 57). Έτσι σε κάθε μία από τις 10 γραμμές του πίνακα χρειάζεται να ορίζονται κάθε φορά μόνο όσες κυψέλες λείπουν ώστε να συμπληρωθεί ο αριθμός των 6 κυψελών. Οι κενές θέσεις κυψελών καταλαμβάνονται από τις συγχωνευμένες κυψέλες οι οποίες επεκτείνονται κατά το πλήθος στηλών που ορίζει η colspan ή το πλήθος γραμμών που ορίζει η rowspan. Αν γίνει κάποιο λάθος, τότε κάποιες θέσεις κυψελών του πίνακα θα μείνουν κενές.

Καλό είναι μέσα σε έναν πίνακα να τοποθετούμε περιεχόμενο μόνο μέσα στις κυψέλες του (στοιχεία td ή th) και όχι στα στοιχεία των γραμμών (tr) ή του πίνακα (table), ώστε να μην έχουμε απρόσμενα αποτελέσματα στη διάταξη και τη μορφοποίηση. Επίσης, δεν είναι καλή πρακτική η υπερφόρτωση μιας ιστοσελίδας με πίνακες, το φώλιασμα πίνακα μέσα σε πίνακα ή η χρήση πίνακα για τη διάταξη όλου του περιεχομένου μιας ιστοσελίδας. Επιπλέον, η υπερβολική χρήση πινάκων και το φώλιασμά τους, καθιστά δύσκολη την ανάλυση του περιεχομένου από τις εξειδικευμένες εφαρμογές λογισμικού ανάγνωσης οθόνης που εξυπηρετούν τους συνανθρώπους μας με προβλήματα όρασης. Ως συνέπεια, συχνά δεν είναι δυνατή η ανάγνωση
του κειμένου της ιστοσελίδας με τη σωστή σειρά, μπερδεύοντας τον ακροατή. Υπάρχει επίσης περίπτωση να μην εντοπιστεί από το λογισμικό ανάγνωσης ένα τμήμα του κειμένου ή των συνδέσμων της ιστοσελίδας, καθιστώντας ανύπαρκτο, αφού ο χρήστης θα το γνώριζε μόνο αν το άκουγε.

Στις γραμμές 55, 61, 64, 67, 70, 73 παρατηρούμε την ύπαρξη της παραμέτρου class. Η παράμετρος αυτή μπορεί να χρησιμοποιηθεί σε κάθε στοιχείο της HTML που αφορά περιεχόμενο για να ορίσει κατηγορίες (κλάσεις) περιεχομένου. Εδώ χρησιμοποιείται για να ορίσει την κατηγορία "eb" που αφορά τις διοργανώσεις "Eurobasket" ώστε εκμεταλλευόμενοι τις δυνατότητες των κανόνων CSS να μορφοποιήσουμε με διαφορετικό τρόπο τις τελευταίες 6 γραμμές του πίνακα.
Οι νέοι κανόνες CSS που συναντούμε σε αυτό το παράδειγμα αφορούν κατά κύριο λόγο τους πίνακες. Παρατηρούμε πάντως ότι ορισμένοι κανόνες, όπως αυτοί που αφορούν χρώματα, εφαρμόζονται και σε άλλες κατηγορίες περιεχομένου εκτός από το κείμενο.

Εφαρμογή 9: Σύνδεσμοι σε χρήσιμα εργαλεία λογισμικού
Το ένατο παράδειγμα εφαρμογής αφορά την εισαγωγή συνδέσμων. Ο μηχανισμός των συνδέσμων είναι ένας από τους λόγους της επιτυχίας του παγκόσμιου ιστού.
Πηγαίος κώδικας 10: Σύνδεσμοι προς γνωστά εργαλεία λογισμικού ανάπτυξης ιστοτόπων
Ένα κείμενο που διαβάζουμε ή προσπελάζουμε σειριακά, λέμε ότι είναι γραμμικά οργανωμένο. Ένα κείμενο στο οποίο μπορούμε να μεταβούμε από ενότητα σε ενότητα, σελίδα σε σελίδα ή κεφάλαιο σε κεφάλαιο, χωρίς να είμαστε αναγκασμένοι από τη δομή του να το ξεφυλλίσουμε με τη σειρά, ονομάζεται υπερκείμενο. Οι ιστοσελίδες είναι ουσιαστικά έγγραφα υπερκειμένου. Ο μηχανισμός των συνδέσμων ή υπερσυνδέσμων υλοποιεί τη δομή του υπερκειμένου, παρέχοντας την ελευθερία πλοήγησης σε διαφορετικές ενότητες περιεχομένου, στην ίδια ή σε διαφορετικές ιστοσελίδες, οι οποίες μπορεί να βρίσκονται οπουδήποτε στον παγκόσμιο ιστό, απλά επιλέγοντας με το δείκτη του ποντικιού πάνω σε μια λέξη ή φράση.

Η HTML διαθέτει το στοιχείο a για την υλοποίηση του μηχανισμού των υπερσυνδέσμων. Στον κώδικα των γραμμών 40-41 (και επόμενων), το κείμενο που βρίσκεται μεταξύ των ετικετών <a href= "…"> … </a> αποκτά την ιδιότητα της «θερμής περιοχής» (hot spot). Όταν ανοίξουμε την ιστοσελίδα με το φυλλομετρητή μας, η θερμή περιοχή τυπικά επισημαίνεται με διαφορετικό χρώμα χαρακτήρων και υπογράμμιση. Όταν ο δείκτης του ποντικού βρεθεί πάνω από μια θερμή περιοχή τότε παίρνει διαφορετική μορφή (γίνεται σαν «χεράκι»), δείχνοντας ότι αν πατήσουμε στο σημείο εκείνο θα μεταφερθούμε σε έναν άλλο προορισμό του παγκόσμιου ιστού. Η παράμετρος target καθορίζει ότι ο πόρος προορισμού θα ανοίξει σε μια νέα καρτέλα ή ένα νέο παράθυρο του φυλλομετρητή μας, αφήνοντας έτσι την ιστοσελίδα εκκίνησης ανοιχτή, στη διάθεση του χρήστη.

Εικόνα 15: Η Εφαρμογή 9 στο περιβάλλον του φυλλομετρητή
Κάθε πόρος του παγκόσμιου ιστού, όπως εικόνες, γραφικά, αρχεία, βίντεο, κ.λπ. είναι προσπελάσιμος μέσω της διεύθυνσής του η οποία ονομάζεται URL (Uniform Resource Locator, Ομοιόμορφος Εντοπιστής Πόρου). Γράφοντας το URL ενός πόρου ως τιμή στην παράμετρο href του στοιχείου a κάνει το σύνδεσμό μας ικανό να μας μεταφέρει σε οποιαδήποτε υποστηριζόμενη από το φυλλομετρητή πηγή περιεχομένου. Από την άλλη, περικλείοντας οποιοδήποτε (σχεδόν) περιεχόμενο μέσα σε ετικέτες <a href= "URL"> … </a> θα το μετατρέψει σε θερμή περιοχή, αρκεί το περιεχόμενο αυτό να φαίνεται στο παράθυρο του φυλλομετρητή, γιατί όπως θα δούμε παρακάτω μπορούμε να κρύψουμε τμήματα του περιεχομένου μιας ιστοσελίδας. Έτσι μπορούμε να δημιουργήσουμε υπερσυνδέσεις όπου πατώντας πάνω σε κείμενο, εικόνα, γραφικό, πίνακα ή άλλο περιεχόμενο, μπορούμε να φορτώσουμε στο φυλλομετρητή μας οποιοδήποτε υποστηριζόμενο περιεχόμενο, όπως κείμενα, εικόνες, κινούμενα σχέδια, έγγραφα, εφαρμογές πολυμέσων, κ.α. Μια μικρή παρατήρηση: όταν το σημείο εκκίνησης ενός υπερσυνδέσμου είναι κείμενο, τότε ονομάζεται «θερμή λέξη», ενώ όταν είναι εικόνα ή γραφικό, ονομάζεται «θερμή περιοχή».

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

Εφαρμογή 10: Κρυφτό!
Στη δέκατη εφαρμογή μελετούμε ένα παράδειγμα εμφάνισης και απόκρυψης τμήματος του περιεχομένου μιας ιστοσελίδας με τη χρήση ενοτήτων της HTML και της γλώσσας CSS.
Πηγαίος κώδικας 11: Εμφάνιση και απόκρυψη ενοτήτων ενός δομημένου κειμένου
Το περιεχόμενο του παραδείγματος οργανώνεται με τη βοήθεια μιας φωλιασμένης λίστας. Παρατηρούμε ότι κάθε στοιχείο li των αριθμημένων λιστών (ol) έχει ως περιεχόμενο μία ενότητα (στοιχείο div), ενώ κάθε ενότητα έχει στο τέλος της μία ενότητα σε σειρά (στοιχείο span). Αυτό γίνεται για να επιλέξουμε και να μορφοποιήσουμε κατάλληλα το περιεχόμενο χρησιμοποιώντας τη γλώσσα CSS.

Εικόνα 16: Η Εφαρμογή 10 στο περιβάλλον του φυλλομετρητή
Οι ενότητες είναι στοιχεία τύπου μπλοκ που χρησιμοποιούνται για τη διαίρεση του περιεχομένου σε περιοχές (π.χ. μενού - περιεχόμενο - διαφημίσεις) και τη διαμόρφωσή του σύμφωνα με την επιθυμία του σχεδιαστή. Οι ενότητες σε σειρά είναι στοιχεία που χρησιμοποιούνται συνήθως για τη διαφορετική μορφοποίηση τμήματος περιεχομένου μιας ενότητας, αλλά στη σειρά του περιεχομένου, δίχως να εισάγεται ένα μπλοκ μέσα σε ένα άλλο μπλοκ.
Σε αυτό το παράδειγμα εφαρμόζουμε ένα τρικ απόκρυψης και εμφάνισης του περιεχομένου των ενοτήτων, εκμεταλλευόμενοι τις δυνατότητες των διαδοχικών φύλλων στυλ CSS. Αρχικά κρύβουμε όλες τις ενότητες με τα κείμενα σχετικά με τις γλώσσες σεναρίων, αφήνοντας να φαίνεται μόνο η ονομασία της γλώσσας σεναρίων. Όταν το ποντίκι μας περάσει πάνω από μία ονομασία, τότε αλλάζει η μορφοποίηση CSS και εμφανίζεται η αντίστοιχη ενότητα με την πλήρη περιγραφή και την παραπομπή στην πηγή των πληροφοριών.

Εφαρμογή 11: Ελληνικό καλοκαιρινό στυλ
Στην ενδέκατη εφαρμογή μας ασχολούμαστε λίγο περισσότερο με τις μορφοποιήσεις των εικόνων. Οι εικόνες αποτελούν σημαντικό μέσο παρουσίασης της πληροφορίας, συμβάλλοντας καθοριστικά στην αισθητική ενός ιστοτόπου, οπότε αξίζουν την προσοχή μας.
Πηγαίος κώδικας 12: Τοποθέτηση εικόνων και σύνδεσμος προς την αρχή της σελίδας
Ξεκινούμε με τη γραμμή 95 και μια διαφορετική χρήση της ετικέτας <a>. Όταν αυτή συντάσσεται με την παράμετρο name, τότε ορίζει ένα σημείο μέσα σε μια ιστοσελίδα, δίνοντάς του ένα όνομα. Στην αρχή της ιστοσελίδας ορίζεται το όνομα "αρχή". Στη γραμμή 154 υπάρχει ένας σύνδεσμος που παραπέμπει στο όνομα "αρχή" χρησιμοποιώντας το URL "#αρχή". Έτσι έχουμε στο τέλος της ιστοσελίδας ένα σύνδεσμο που αν πατηθεί μας πηγαίνει στην αρχή της σελίδας.

Μπορούμε να ορίσουμε και άλλα σημεία, ιδιαίτερα σε μια μεγάλη ιστοσελίδα. Αν λοιπόν σε μια ιστοσελίδα έχουν οριστεί μια σειρά από σημεία με διαφορετικά ονόματα, τότε είμαστε σε θέση να ορίζουμε προς αυτή την ιστοσελίδα συνδέσμους της μορφής URL#όνομα, όπου URL η διεύθυνση της ιστοσελίδας και #όνομα το όνομα ενός από τα σημεία της. Αυτό θα έχει ως αποτέλεσμα, με το πάτημα ενός τέτοιου συνδέσμου να οδηγούμαστε όχι στην αρχή της ιστοσελίδας, αλλά σε συγκεκριμένο σημείο της.
Στις εικόνες (img) των γραμμών 96-99 συναντούμε την παράμετρο ταυτότητας (id). Με αυτή αποδίδουμε μοναδικές τιμές σε στοιχεία ώστε να τα επιλέξουμε στη συνέχεια για μορφοποίηση με τη γλώσσα CSS, είτε για αλληλεπίδραση ή άλλο αυτοματισμό με τη γλώσσα σεναρίων JavaScript. Η παράμετρος id μπορεί να χρησιμοποιηθεί σε κάθε στοιχείο περιεχομένου, ανεξάρτητα ή μαζί με την παράμετρο class.

Τιμές των παραμέτρων, όπως της name, τα ονόματα κλάσεων (class), ταυτοτήτων (id), κ.α. μπορούν να χρησιμοποιούν και ελληνικούς χαρακτήρες, κάνοντας ίσως έτσι περισσότερο ευανάγνωστο και κατανοητό τον κώδικά μας. Θα πρέπει όμως να προσέχουμε πολύ κατά την πληκτρολόγηση, ώστε να μην μπερδεύουμε τους ελληνικούς με τους λατινικούς χαρακτήρες που μοιάζουν (όπως το «ο»), γιατί τότε οι μηχανισμοί που κατασκευάζουμε δεν θα λειτουργούν. Ο εντοπισμός τέτοιου είδους σφαλμάτων είναι λίγο δύσκολος, ειδικά αν δεν χρησιμοποιούμε κάποιο εργαλείο αποσφαλμάτωσης, όπως το Developer Tools στο φυλλομετρητή Microsoft Edge (ενεργοποίηση με F12) (Εικόνα 17), τα Εργαλεία για Προγραμματιστές στο φυλλομετρητή Google Chrome (ενεργοποίηση με (Ctrl+Shift+I), το Web Developer στο φυλλομετρητή Mozilla Firefox (ενεργοποίηση με Ctrl+Shift+I) (Εικόνα 18).

Εικόνα 17: Το περιβάλλον αποσφαλμάτωσης των Developer Tools στο Edge της Microsoft
Εικόνα 18: O Style Editor του Web Developer στο Firefox της Mozilla
Σε αυτό το παράδειγμα εκμεταλλευόμαστε πιο προχωρημένες δυνατότητες των διαδοχικών φύλλων στυλ CSS. Αλλάζουμε τη συμπεριφορά των μη εκτυπώσιμων (λευκών) χαρακτήρων του περιεχομένου για να εμφανίσουμε ποιήματα και κείμενο χωρίς τη διαρκή χρήση της ετικέτας αλλαγής γραμμής <br>. Τοποθετούμε μία εικόνα σταθερά στο υπόβαθρο και τέσσερις ακόμη σε σταθερές θέσεις στις γωνίες του παραθύρου, καθεμιά σε διαφορετική στρώση. Ορίζουμε σκιά στο κείμενο της ιστοσελίδας, ώστε να φαίνεται μπροστά από το πολύχρωμο υπόβαθρο.

Εικόνα 19: Η Εφαρμογή 11 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 12: Δεδομένα σε… φόρμα
Στο δωδέκατο παράδειγμα εφαρμογής δημιουργούμε μια ιστοσελίδα με δύο φόρμες παραγγελίας. Οι φόρμες χρησιμεύουν για τη μεταφορά δεδομένων από μια ιστοσελίδα σε μια εφαρμογή που εκτελείται σε έναν εξυπηρετητή και περιμένει τα δεδομένα αυτά για να προχωρήσει σε κάποιες ενέργειες. Παραθέτεται επίσης ο κώδικας PHP που απαιτείται για την επεξεργασία των δεδομένων που αποστέλλονται με τις φόρμες παραγγελίας στον εξυπηρετητή, αν και είναι εκτός του θέματος αυτών των σημειώσεων, μόνο για την επίδειξη της λειτουργίας του παραδείγματος.

Προσοχή: Ο κώδικας PHP έχει γραφεί για λόγους επίδειξης και άρα δεν επιτρέπεται να χρησιμοποιηθεί σε εξυπηρετητή παραγωγής (που λειτουργεί σε πραγματικές συνθήκες, εξυ -πηρετώντας πραγματικούς χρήστες και εφαρμογές στον παγκόσμιο ιστό), καθώς δεν έχει δοκιμαστεί για πιθανά κενά ασφαλείας που ίσως θέσουν τον εξυπηρετητή σε κίνδυνο.
Πηγαίος κώδικας 13: Μία ιστοσελίδα με δυο φόρμες παραγγελίας
Οι γραμμές 60-79 και 84-119 αποτελούν φόρμες επικοινωνίας της ιστοσελίδας με έναν εξυπηρετητή του παγκόσμιου ιστού. Οι φόρμες χρησιμοποιούνται ευρύτατα στις εφαρμογές του παγκόσμιου ιστού, αφού αποτελούν έναν τρόπο επικοινωνίας των χρηστών μιας υπηρεσίας με τον εξυπηρετητή που παρέχει τις υπηρεσίες της. Κάθε φορά που συμπληρώνουμε κάποια στοιχεία, όταν συνδεόμαστε σε μια υπηρεσία ή παραγγέλνουμε προϊόντα μέσω του παγκόσμιου ιστού, χρησιμοποιούμε φόρμες.

Εικόνα 20: Η Εφαρμογή 12 στο περιβάλλον του φυλλομετρητή
Μια φόρμα μπορεί να έχει οποιοδήποτε περιεχόμενο. Παράλληλα όμως με τα υπόλοιπα στοιχεία της, μια φόρμα περιέχει και ένα πλήθος στοιχείων για την εισαγωγή δεδομένων. Τα στοιχεία μιας φόρμας περικλείονται στις ετικέτες <form> … </form>. Η ετικέτα <form> έχει μια σειρά από παραμέτρους. Η name ορίζει το όνομά της, η action το URL του προγράμματος που θα υποδεχθεί τα δεδομένα και η method τη μέθοδο αποστολής των δεδομένων στον εξυπηρετητή. Όταν υποβάλλουμε μια φόρμα με τη μέθοδο post, στον εξυπηρετητή ταξιδεύουν μόνο τα δεδομένα της που αποτελούνται από ζεύγη ονομάτων μεταβλητών με τις αντίστοιχες τιμές τους και βέβαια όχι όλο το υπόλοιπο περιεχόμενο της φόρμας.

Εικόνα 21: Η απάντηση που συνθέτει και επιστρέφει ο Πηγαίος κώδικας 14, όταν του σταλεί η πρώτη μορφή παραγγελίας
Τα στοιχεία δεδομένων μιας φόρμας ονομάζονται input στην HTML, αλλά είναι γνωστά σε διάφορα περιβάλλοντα και ως control ή widget, έχουν διάφορες μορφές και χρήσεις. Κάποια είναι πλαίσια στα οποία γράφουμε, άλλα είναι πλήκτρα ενεργειών, πλαίσια ελέγχου, αναδιπλούμενες λίστες, κ.λπ. Η πρώτη φόρμα περιλαμβάνει τρία κουμπιά επιλογής (radio button) (γραμμές 63, 66, 69). Η παράμετρος type="radio" δίνει στο widget τη μορφή του κουμπιού επιλογής. Όταν επιλέγεται ένα κουμπί επιλογής καταργείται η επιλογή σε κάποιο άλλο της ίδιας ομάδας. Για το σκοπό αυτό τα τρία κουμπιά επιλογής της πρώτης φόρμας έχουν το ίδιο όνομα (name) και διαφορετική τιμή (value). Έτσι αν επιλέξουμε το πρώτο και αποστείλουμε την παραγγελία πατώντας το input με type="submit", τότε στον εξυπηρετητή θα φτάσει μεταξύ άλλων η τιμή "elliniki" για τη μεταβλητή "synthesi". Αυτό έχει ένα νόημα για το πρόγραμμα υποδοχής των δεδομένων στον εξυπηρετητή, όπου θα γίνουν μια σειρά από ενέργειες για την ικανοποίηση του αιτήματός μας.

Η πρώτη φόρμα περιλαμβάνει ακόμη τέσσερα πλαίσια κειμένου (<input type="text" …>) στις γραμμές 72-76. Τα πλαίσια κειμένου έχουν ένα όνομα, όπως πρέπει να έχει κάθε widget μιας φόρμας και επιπλέον την παράμετρο size που καθορίζει το πλήθος των χαρακτήρων που μπορούν να δεχθούν.
Η δεύτερη φόρμα διαθέτει μια σειρά από πλαίσια ελέγχου (check box). Κάθε πλαίσιο ελέγχου μπορεί να επιλεγεί ανεξάρτητα από τα υπόλοιπα και αντιστοιχεί σε μια δυαδική μεταβλητή, αφού μέσω αυτού μπορούμε να επιλέξουμε ή όχι μία τιμή. Το δεύτερο που παρατηρούμε στις ετικέτες των πλαισίων ελέγχου της φόρμας είναι ότι το όνομα κάθε πλαισίου είναι το ίδιο με τη διαφορά ότι κάθε όνομα έχει και ένα διαφορετικό αριθμό μέσα σε αγκύλες στα δεξιά του. Αυτό συμβαίνει διότι σε ομάδα πλαισίων ελέγχου τυπικά κάθε μεταβλητή είναι ανεξάρτητη. Έτσι τα ονόματα των παραμέτρων name στις γραμμές 88-103 μοιάζουν αλλά δεν είναι τα ίδια. Στην ουσία χρησιμοποιούμε ένα διάνυσμα τιμών, ένα μονοδιάστατο πίνακα με άλλα λόγια. Οι τιμές των πλαισίων ελέγχου αφορούν υλικά που το καθένα είτε θα προστεθεί στην πίτσα που θα παραγγείλουμε, είτε όχι. Μας βολεύει λοιπόν προγραμματιστικά στο σενάριο PHP να επεξεργαστούμε τις τιμές αυτών των μεταβλητών με τη βοήθεια μιας δομής επανάληψης. Τα διανύσματα μας επιτρέπουν να επεξεργαστούμε επαναληπτικά με ένα βρόχο ένα σύνολο μεταβλητών των οποίων το όνομα διαφέρει μόνο κατά έναν αριθμό, το δείκτη.

Εικόνα 22: Η απάντηση που συνθέτει και επιστρέφει ο Πηγαίος κώδικας 14, όταν λάβει τη δεύτερη μορφή παραγγελίας
Οι δύο φόρμες έχουν διαφορετικά ονόματα αφού αναφέρονται σε διαφορετικά σύνολα δεδομένων, όπου το ένα υποβάλλεται κάθε φορά στο σενάριο υποδοχής των δεδομένων στον εξυπηρετητή. Επίσης τα πλήκτρα υποβολής της κάθε φόρμας έχουν διαφορετικό όνομα για να είναι εύκολα ανιχνεύσιμα από το σενάριο υποδοχής.
Σε αυτό το παράδειγμα εκμεταλλευόμαστε πιο προχωρημένες δυνατότητες των διαδοχικών φύλλων στυλ CSS. Αλλάζουμε τη συμπεριφορά των μη εκτυπώσιμων (λευκών) χαρακτήρων του περιεχομένου για να εμφανίσουμε ποιήματα και κείμενο χωρίς τη διαρκή χρήση της ετικέτας αλλαγής γραμμής <br>. Τοποθετούμε μία εικόνα σταθερά στο υπόβαθρο και τέσσερις ακόμη σε σταθερές θέσεις στις γωνίες του παραθύρου, καθεμιά σε διαφορετική στρώση. Ορίζουμε σκιά στο κείμενο της ιστοσελίδας, ώστε να φαίνεται μπροστά από το πολύχρωμο υπόβαθρο.

| Πηγαίος κώδικας 1: Ο ελάχιστος απαραίτητος κώδικας για τη δημιουργία ιστοσελίδας .......................................13                 |
|--------------------------------------------------------------------------------------------------------------------------------------------|
| Πηγαίος κώδικας 2: Ιστοσελίδα με παραγράφους, σύμβολα και στοιχειώδη μορφοποίηση...................................20                      |
| Πηγαίος κώδικας 3: Ένα σημασιολογικά εμπλουτισμένο έγγραφο HTML ............................................................23             |
| Πηγαίος κώδικας 4: Επιπλέον βασικές και σημασιολογικές μορφοποιήσεις ..........................................................27          |
| Πηγαίος κώδικας 5: Τοπική μορφοποίηση με κανόνες CSS ...................................................................................29 |
| Πηγαίος κώδικας 6: Μορφοποίηση τοπικά και με εσωτερικό φύλλο στυλ.............................................................36           |
| Πηγαίος κώδικας 7: Μορφοποίηση φωλιασμένης λίστας με εξωτερικό φύλλο στυλ .............................................39                  |
| Πηγαίος κώδικας 8: Ο κώδικας του εξωτερικού φύλλου στυλ για την Εφαρμογή 7. .............................................40                |
| Πηγαίος κώδικας 9: Ένας πίνακας κειμένου και εικόνων με συγχωνευμένες κυψέλες ..........................................43                 |
| Πηγαίος κώδικας 10: Σύνδεσμοι προς γνωστά εργαλεία λογισμικού ανάπτυξης ιστοτόπων .................................46                      |
| Πηγαίος κώδικας 11: Εμφάνιση και απόκρυψη ενοτήτων ενός δομημένου κειμένου ............................................51                  |
| Πηγαίος κώδικας 12: Τοποθέτηση εικόνων και σύνδεσμος προς την αρχή της σελίδας ........................................56                  |
| Πηγαίος κώδικας 13: Μία ιστοσελίδα με δυο φόρμες παραγγελίας........................................................................63     |
| Πηγαίος κώδικας 14: Το σενάριο PHP διεκπεραίωσης της παραγγελίας στον εξυπηρετητή .................................68                      |
| Πηγαίος κώδικας 15: Μια πραγματικά πολυμεσική ιστοσελίδα .............................................................................70   |
| Πηγαίος κώδικας 16: Βασισμένος σε χάρτη εικόνας διαδραστικός χάρτης της Ελλάδας.......................................74                   |
| Πηγαίος κώδικας 17: Ενσωμάτωση διανυσματικών γραφικών SVG και τύπων MathML .....................................79                         |
| Πηγαίος κώδικας 18: Εξωτερικό αρχείο διανυσματικών γραφικών SVG...............................................................82           |
| Πηγαίος κώδικας 19: Aπόδοση ενός πολύπλοκου μαθηματικού κανόνα με MathML ...........................................83                     |
| Πηγαίος κώδικας 20: Το βασικό HTML περιεχόμενο του μενού επιλογών ...........................................................85            |
| Πηγαίος κώδικας 21: Το φύλλο στυλ της προσαρμοστικής ιστοσελίδας................................................................ 87        |
| Πηγαίος κώδικας 22: Ο κώδικας JavaScript για τη διαχείριση των γεγονότων κλικ ..............................................89             |

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

Καλή διασκέδαση!

Εργαλεία λογισμικού
Στην αγορά κυκλοφορεί πληθώρα εργαλείων για την ανάπτυξη ιστοσελίδων. Υπάρχουν εμπορικά εργαλεία λογισμικού αξίας από δεκάδες έως εκατοντάδες ευρώ, δωρεάν εφαρμογές με περιορισμένη διάρκεια χρήσης ή πρόσβαση στις δυνατότητες τους μέχρι την αγορά κάποιας άδειας και ελεύθερο λογισμικό /λογισμικό ανοιχτού κώδικα (ΕΛ/ΛΑΚ) χωρίς περιορισμούς στη χρήση και επιπλέον με δυνατότητα πρόσβασης στον πηγαίο κώδικα της εφαρμογής.
Το βασικό πλεονέκτημα χρήσης ενός ολοκληρωμένου περιβάλλοντος είναι ότι παρέχει πολλές ευκολίες που επιτρέπουν τους έμπειρους χρήστες να αναπτύξουν γρηγορότερα τις ιστοσελίδες τους. Προϋπόθεση για αυτό είναι η εμπειρία και η γνώση των μηχανισμών και δομών της γλώσσας που επιλέγεται για την ανάπτυξη ιστοσελίδων. Διαφορετικά υπάρχει ο κίνδυνος ο νέος δημιουργός να χάνει απλά το χρόνο του προσπαθώντας να καταλάβει τις διαθέσιμες επιλογές ενός λογισμικού, αντί να εκμεταλλεύεται το λογισμικό για αυτό που έχει σχεδιάσει να πετύχει.

Σε αυτές τις σημειώσεις απευθυνόμαστε στους μαθητές ως νέους δημιουργούς ιστοσελίδων και επομένως θα χρησιμοποιήσουμε μόνο τα βασικά και απαραίτητα εργαλεία για την ανάπτυξη ιστοσελίδων. Αυτά είναι ένας συντάκτης κειμένου (editor) με τον οποίο συντάσσουμε τον κώδικα και ένας φυλλομετρητής (web browser) με τον οποίο βλέπουμε το αποτέλεσμα.
Προτείνουμε λοιπόν την χρήση ενός απλού συντάκτη κειμένου, όπως το Σημειωματάριο (Notepad) των Microsoft Windows, το gEdit σε περιβάλλον GNU/Linux ή κάποιο αντίστοιχο. Υπάρχουν βέβαια και λίγο πιο εξελιγμένοι συντάκτες οι οποίοι διατίθενται δωρεάν, όπως το Notepad++ το οποίο είναι ελεύθερο λογισμικό/λογισμικό ανοιχτού κώδικα για το περιβάλλον των Windows και το οποίο θα χρησιμοποιήσουμε σε αυτές τις σημειώσεις. Ως φυλλομετρητή μπορούμε να χρησιμοποιήσουμε οποιονδήποτε, όπως τον Microsoft Internet Explorer, τον Google Chrome, τον Mozilla Firefox, κ.λπ. Συμβαίνει ο κώδικας μιας ιστοσελίδας να παρουσιάζεται με μικρές διαφορές από φυλλομετρητή σε φυλλομετρητή, ειδικά όταν ο κώδικας περιλαμβάνει προχωρημένες τεχνικές μορφοποίησης. Το θέμα αυτό δεν μας αφορά τόσο ως
μαθητές, αλλά είναι πολύ σημαντικό για τους επαγγελματίες, οι οποίοι αντιμετωπίζουν τέτοιες διαφοροποιήσεις στην εμφάνιση ή τη λειτουργικότητα, καθώς η αίσθηση πλοήγησης και λειτουργίας ενός ιστότοπου πρέπει να είναι κοινή για τους χρήστες, ανεξάρτητα από το περιβάλλον πρόσβασης στις ιστοσελίδες του.

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

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

Εφαρμογή 1: Μια πρώτη, μινιμαλιστική ιστοσελίδα
Ξεκινούμε το ταξίδι μας με τον ελάχιστο απαραίτητο κώδικα που πρέπει να γράψουμε για να δημιουργήσουμε μια κενή ουσιαστικά ιστοσελίδα. Αυτός ο κώδικας καλείται συχνά και σκελετός της ιστοσελίδας. Όλες μας οι ιστοσελίδες θα βασίζονται σε αυτό τον κώδικα, ο οποίος θα εμπλουτίζεται ανάλογα με τις εκάστοτε απαιτήσεις.
Πηγαίος κώδικας 1: Ο ελάχιστος απαραίτητος κώδικας για τη δημιουργία ιστοσελίδας
Το έγγραφο που εμφανίζεται στο πλαίσιο Πηγαίος κώδικας 1 είναι γραμμένο σε HTML5, δηλαδή στην έκδοση 5 της γλώσσας σήμανσης υπερκειμένου HTML. Η HTML είναι η γλώσσα στην οποία είναι γραμμένες οι περισσότερες στατικές ιστοσελίδες του παγκόσμιου ιστού. Στατικές είναι οι ιστοσελίδες των οποίων το περιεχόμενο μεταφέρεται όπως είναι αποθηκευμένο στον εξυπηρετητή ιστοσελίδων, άρα δεν αλλάζει, αν δεν το αλλάξει εκούσια ο δημιουργός τους.

Αντίθετα στις δυναμικές ιστοσελίδες (οι οποίες δημιουργούνται με κώδικα π.χ. PHP, ASP, JSP, κ.λπ.) το περιεχόμενο δημιουργείται από μια εφαρμογή που εκτελείται στον εξυπηρετητή ιστοσελίδων και άρα μπορεί να αλλάξει, μεταξύ δύο ανανεώσεων της ιστοσελίδας στο παράθυρο του φυλλομετρητή. Μια στατική ιστοσελίδα HTML δεν είναι ένα πρόγραμμα που εκτελείται, αλλά οδηγίες για τη διαμόρφωση ενός εγγράφου, ενώ μια δυναμική ιστοσελίδα είναι ένα πρόγραμμα που εκτελείται στο διακομιστή ιστοσελίδων και μπορεί να δημιουργήσει διαφορετικό περιεχόμενο σε κάθε κλήση της.

Η πρώτη γραμμή του κώδικα του παραδείγματος 1, αποτελεί μια οδηγία προς το φυλλομετρητή για το είδος του εγγράφου που ακολουθεί. Ο φυλλομετρητής χρειάζεται να γνωρίζει τον τύπο και την έκδοση του κώδικα της ιστοσελίδας για να την εμφανίσει σωστά. Η συγκεκριμένη δήλωση ενημερώνει ότι το έγγραφο που ακολουθεί είναι γραμμένο σε κώδικα HTML5.
Ο κώδικας HTML δεν είναι ευαίσθητος σε κεφαλαία και πεζά γράμματα (case sensitive). Έτσι είναι ισοδύναμο, είτε γράψουμε DOCTYPE, είτε doctype, είτε DocType, κ.ο.κ. Αυτό που πρέπει να προσέχουμε είναι η εισαγωγή διαστήματος, καθώς για το σύστημα είναι διαφορετικό το DOCTYPE από το DOC TYPE.

Χρήσιμη επισήμανση: Προσοχή χρειάζεται στην εναλλαγή ελληνικού και λατινικού πληκτρολο -γίου. Κατά την εμφάνιση ενός αρχείου κώδικα HTML στο φυλλομετρητή, ο διερμηνέας HTML (εκείνο το υποπρόγραμμα του φυλλομετρητή που αναλαμβάνει να "καταλάβει" τον κώδικα της ιστοσελίδας και να τον μετατρέψει σε οδηγίες για την κατάλληλη εμφάνιση του περιεχομένου στο παράθυρο του φυλλομετρητή) σε αντίθεση με ότι συμβαίνει σε μια διαδικασιακή γλώσσα προγραμματισμού, όπως π.χ. η BASIC ή η Pascal, θα αγνοήσει πιθανά συντακτικά λάθη και εμείς θα πρέπει να εντοπίσουμε τι δεν πήγε καλά και το έγγραφο δεν μορφοποιήθηκε όπως περιμέναμε. Έτσι ενώ οι ετικέτες <ΗΤΜL> και <HTML> μοιάζουν να είναι ίδιες, αυτό δεν συμβαίνει γιατί στην πρώτη το ΗΤΜ είναι γραμμένο με ελληνικούς χαρακτήρες. Συνήθως μόλις γράψουμε το Λ καταλαβαίνουμε ότι είναι στα ελληνικά, αλλά διορθώνουμε μόνο το Λ και όχι τους προηγούμενους χαρακτήρες. Αυτός είναι ένας επιπλέον λόγος για να προτείνουμε τα ονό -ματα ετικετών και παραμέτρων να γράφονται με πεζά και όχι κεφαλαία γράμματα, καθώς τότε είναι εύκολο να ξεχωρίσουμε το <ητμλ> από το <html>.

Οι γραμμές 2-4 αποτελούν ένα σχόλιο. Κάθε σχόλιο ξεκινά με <!- - και τελειώνει με - ->. Τα σχόλια δεν λαμβάνονται υπόψη από το φυλλομετρητή, αλλά μας βοηθούν στην τεκμηρίωση του κώδικα που γράφουμε. Είναι καλή πρακτική να γράφουμε σχόλια στον κώδικα που αναπτύσσουμε, ώστε στο μέλλον να μπορούμε να ανακαλέσουμε τι κάνουμε σε κάθε σημείο του.
Στη γραμμή 5 υπάρχει μια ετικέτα (tag). Η ετικέτα είναι ένα όνομα της γλώσσας HTML, το οποίο έχει κάποια σημασία για το φυλλομετρητή. Κάθε ετικέτα οριοθετείται από δύο τριγωνικές αγκύλες ( < > ). Παρατηρούμε ότι στη γραμμή 13 υπάρχει μια ετικέτα που μοιάζει με αυτή της γραμμής 5, αλλά το όνομα της ετικέτας της γραμμής 13 ξεκινά με το χαρακτήρα slash ( / ). Η ετικέτα της γραμμής 5 επισημαίνει την έναρξη ενός στοιχείου (element) και η ετικέτα της γραμμής 13 επισημαίνει τη λήξη του.

Η γλώσσα HTML είναι λοιπόν μια γλώσσα με την οποία επισημαίνουμε (μαρκάρουμε) το περιεχόμενο, τα συστατικά ενός εγγράφου, όπως κείμενα, εικόνες, πίνακες, κ.λπ. Έτσι καθορίζουμε τη σημασία του περιεχομένου και επηρεάζουμε τη μορφοποίησή του. Κάθε έγγραφο HTML αποτελείται από ένα σύνολο στοιχείων. Κάθε στοιχείο χαρακτηρίζεται από μία ετικέτα έναρξης και μία ετικέτα λήξης του.
<ετικέτα> περιεχόμενο </ετικέτα>

Στοιχείο
Τα στοιχεία μπορούν να φωλιάζουν το ένα μέσα στο άλλο, αλλά όχι οι ετικέτες. Επιτρέπεται δηλαδή το εξής:
<ετικέτα1><ετικέτα2> περιεχόμενο </ετικέτα2></ετικέτα1>
φωλιασμένα στοιχεία
και το εξής:
<ετικέτα1><ετικέτα2> περιεχόμενο </ετικέτα2><ετικέτα3> περιεχόμενο </ετικέτα3></ετικέτα1>

φωλιασμένα στοιχεία
αλλά όχι το εξής:

<ετικέτα1 <ετικέτα2> >
Είναι καλή πρακτική να γράφουμε κάθε ετικέτα σε χωριστή γραμμή και με αντίστοιχη εσοχή ώστε ο κώδικας να είναι πιο ευανάγνωστος, βλέποντας τι "ανήκει" που.
Είναι επίσης καλή πρακτική να "κλείνει" πρώτο το εσωτερικό στοιχείο, όπως προηγουμένως και όχι όπως παρακάτω:
Παρατηρούμε ότι ένα έγγραφο HTML είναι ένα στοιχείο, το html, το οποίο αποτελείται από δύο επιμέρους στοιχεία, το στοιχείο head (κεφαλή) (γραμμές 6-9) και το στοιχείο body (σώμα) (γραμμές 10-12). Στην κεφαλή ορίζονται τα μεταδεδομένα της ιστοσελίδας. Τα μεταδεδομένα είναι πληροφορίες που αφορούν και περιγράφουν το έγγραφο, όπως τίτλος, συγγραφέας, λέξεις κλειδιά, κ.α. Στο σώμα ορίζονται τα περιεχόμενα της ιστοσελίδας, δηλαδή το περιεχόμενο του εγγράφου που εμφανίζεται στο κεντρικό πλαίσιο του παραθύρου του φυλλομετρητή. Το μεγαλύτερο μέρος κώδικα αφορά όπως είναι λογικό το σώμα της ιστοσελίδας. Ο προσεκτικός όμως καθορισμός των μεταδομένων βοηθά στον εντοπισμό της από τις μηχανές αναζήτησης, γεγονός που της δίνει μεγαλύτερη επισκεψιμότητα (Εικόνα 1, στη σελίδα 20 παρακάτω).

Στη γραμμή 7 ορίζεται ο τίτλος της ιστοσελίδας (title). Ο τίτλος είναι πολύ σημαντικός διότι εκτός από τη γραμμή του τίτλου στο παράθυρο του φυλλομετρητή, εμφανίζεται και στα αποτελέσματα μιας μηχανής αναζήτησης που έχει εντοπίσει την ιστοσελίδα μας. Έτσι πρέπει να επιλέγεται με μεγάλη προσοχή. Στη γραμμή 8 ορίζεται ένα επιπλέον μεταδεδομένο (meta) που αφορά την κωδικοποίηση των χαρακτήρων της ιστοσελίδας.
Εικόνα 1: Τίτλος ιστοσελίδας στα αποτελέσματα αναζήτησης και στο φυλλομετρητή
Ο υπολογιστής αντιλαμβάνεται κάθε χαρακτήρα ως ένα κωδικό. Η επιλογή της κατάλληλης κωδικοποίησης είναι σημαντική διότι αν επιλέξουμε λάθος κωδικοποίηση στη θέση κάθε συμβόλου θα εμφανίζεται ένα διαφορετικό σύμβολο, ανάλογα με τις ρυθμίσεις εντοπιότητας (χώρα, γλώσσα) του φυλλομετρητή. Αυτό θα προκαλέσει μεγάλη σύγχυση στον επισκέπτη, ο οποίος μάλλον δεν θα γνωρίζει πως να αλλάξει την κωδικοποίηση στον φυλλομετρητή του (συνήθως αναφέρεται στις ρυθμίσεις του φυλλομετρητή ως Κωδικοποίηση Χαρακτήρων/Κειμένου, Character/Text Encoding), με αποτέλεσμα να εγκαταλείψει την ιστοσελίδα μας (Εικόνα 2).

Εικόνα 2: Λάθος και σωστή κωδικοποίηση χαρακτήρων
Υπάρχουν διαθέσιμες πολλές διαφορετικές κωδικοποιήσεις κειμένου. Η κωδικοποίηση UTF-8 εξασφαλίζει τη σωστή εμφάνιση του κειμένου της ιστοσελίδας σε κάθε περίπτωση. Πρέπει να έχουμε κατά νου ότι ενώ μια ιστοσελίδα δημιουργείται σε ένα περιβάλλον (π.χ. GNU/Linux ή Microsoft Windows) προσπελάζεται από πληθώρα διαφορετικών, συχνά ανομοιογενών περιβαλλόντων (υπολογιστές Macintosh, συσκευές Android, iOS συσκευές με άλλα λειτουργικά συστήματα όπως τηλεοράσεις, media player, κ.λπ.). Για το λόγο αυτό πρέπει να προσέχουμε κατά την αποθήκευση του κώδικα, ώστε να επιλέγουμε την αποθήκευσή του σε μορφή UTF8. Στο Σημειωματάριο αυτό γίνεται επιλέγοντας το πλαίσιο Κωδικοποίηση (Encoding) κατά την αποθήκευση (Εικόνα 3). Στο Notepad++ μπορούμε να επιλέξουμε την κωδικοποίηση του κειμένου από το σχετικό μενού (Εικόνα 4).

Εικόνα 3: Επιλογή κωδικοποίησης UTF-8 κατά την αποθήκευση στο Σημειωματάριο
Εικόνα 4: Επιλογή κωδικοποίησης από το μενού στο Notepad++
Με μια πιο προσεκτική ματιά στη γραμμή 8 ανακαλύπτουμε ακόμη δύο κανόνες του συντακτικού της HTML. Ο πρώτος είναι ότι ορισμένες ετικέτες δεν είναι διπλές. Δεν υπάρχει δηλαδή ετικέτα που να ορίζει το κλείσιμο, το πέρας ενός στοιχείου. Οι ετικέτες αυτές λέγονται μονές και αποτελούν από μόνες τους ένα στοιχείο του εγγράφου.
Ο δεύτερος κανόνας είναι ότι οι ετικέτες μπορεί να παίρνουν παραμέτρους. Έτσι η ετικέτα meta έχει την παράμετρο charset η οποία έχει τιμή "UTF-8". Παραμέτρους μπορούν να πάρουν τόσο οι μονές, όσο και οι διπλές ετικέτες. Με αυτό τον τρόπο μπορεί κάθε φορά να διαφοροποιείται η δράση μιας ετικέτας στο περιεχόμενο που "αγκαλιάζει". Μια ετικέτα μπορεί να έχει σε κάθε περίπτωση περισσότερες από μία παραμέτρους, ανάλογα με το τι θέλουμε να πετύχουμε. Όλες οι παράμετροι περικλείονται μέσα στις τριγωνικές αγκύλες της ετικέτας. Στις διπλές ετικέτες, η ετικέτα κλεισίματος δεν παίρνει ποτέ παραμέτρους.

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

Συνοψίζοντας, η σύνταξη κάθε στοιχείου της HTML την εξής γενική μορφή για στοιχεία με διπλές ετικέτες, με άλλα λόγια, ετικέτες αρχής και τέλους της επισήμανσης:
Ενώ ισχύει η εξής γενική μορφή για στοιχεία μονής ετικέτας, δηλαδή χωρίς ετικέτα τέλους της επισήμανσης, όπου η ετικέτα αποτελεί το σύνολο του στοιχείου:
Τα αποσιωπητικά (…) σημαίνουν ότι οι παράμετροι μπορεί να είναι κατά περίπτωση, καμία, μία ή περισσότερες.
Κλείνοντας το πρώτο μας παράδειγμα, αφού αποθηκεύσουμε την ιστοσελίδα μας, μη ξεχνώντας να ορίσουμε ως κατάληξη την .html, ανοίγουμε το αρχείο του κώδικα με ένα πρόγραμμα φυλλομετρητή για να δούμε το αποτέλεσμα, όπως φαίνεται στην Εικόνα 5.

Εικόνα 5: Άνοιγμα του αρχείου κώδικα HTML για την Εφαρμογή 1 με το φυλλομετρητή
Χρήσιμη επισήμανση: Αν θέλουμε να δούμε τον πηγαίο κώδικα οποιασδήποτε σελίδας, αρκεί να πατήσουμε "ταυτόχρονα" τα πλήκτρα Ctrl + U (έχοντας πατημένο το Ctrl, πατούμε το U). Τότε εμφανίζεται ένα παράθυρο με τον πηγαίο κώδικα (Εικόνα 6) ο οποίος παράγει το αποτέλεσμα που βλέπουμε στο παράθυρο του φυλλομετρητή.
Αυτός είναι και ο κώδικας που αποθηκεύουμε ως τοπικό αρχείο, αν επιλέξουμε να αποθηκεύσουμε μια ιστοσελίδα που βλέπουμε στο φυλλομετρητή μας. Μπορούμε να δοκιμάσουμε να δούμε τον κώδικα που κρύβεται πίσω από οποιαδήποτε ιστοσελίδα, χωρίς όμως να αποθαρρυνθούμε, καθώς είμαστε ακόμη στην αρχή, γνωρίζοντας επιπλέον ότι πολλές επαγγελματικές και μη ιστοσελίδες είναι δυναμικές. Στις δυναμικές ιστοσελίδες ο δημιουργός δεν γράφει το περιεχόμενο της ιστοσελίδας, αλλά ένα πρόγραμμα που θα εκτελεστεί στον εξυπηρετητή ιστοσελίδων και θα δημιουργήσει το περιεχόμενο που θα φτάσει στο φυλλομετρητή μας, τη στιγμή που θα ζητήσουμε να φορτώσουμε τη συγκεκριμένη ιστοσελίδα. Έτσι ο κώδικας HTML που φτάνει στο φυλλομετρητή μας, τις περισσότερες φορές δεν είναι ευανάγνωστος. Το ίδιο συμβαίνει και όταν η διαχείριση του περιεχομένου ενός ιστότοπου υλοποιείται μέσω λογισμικών που ονομάζονται συστήματα διαχείρισης περιεχομένου (Content Management Systems, CMS). Οι διαχειριστές του περιεχομένου τέτοιων ιστοτόπων δεν αλλάζουν τον κώδικα των στατικών ή δυναμικών ιστοσελίδων, παρά μόνο χειρίζονται το περιεχόμενο του ιστότοπου (κείμενα, εικόνες, βίντεο, κ.λπ.), χρησιμοποιώντας τις επιλογές του εκάστοτε λογισμικού CMS.

Εικόνα 6: Ο πηγαίος κώδικας για την Εφαρμογή 1
Εκτενή αναφορά στα στοιχεία της HTML5 μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C), της διεθνούς κοινότητας της οποίας το προσωπικό σε συνεργασία με οργανισμούς και φορείς από όλο τον κόσμο, συνεργάζονται για την ανάπτυξη των προτύπων του παγκόσμιου ιστού ( http://dev.w3.org/html5/html-author/ ).

Εφαρμογή 2: Συμβολικό… κείμενο
Το δεύτερο παράδειγμα εφαρμογής αφορά τον τρόπο που γράφουμε κείμενο και πως μπορούμε να το εμπλουτίσουμε με σύμβολα. Στο πλαίσιο Πηγαίος κώδικας 2 παρουσιάζεται ο κώδικας της δεύτερης εφαρμογής μας.
Πηγαίος κώδικας 2: Ιστοσελίδα με παραγράφους, σύμβολα και στοιχειώδη μορφοποίηση
Ένα έγγραφο αποτελείται συνήθως στο μεγαλύτερο τμήμα του από κείμενο, το οποίο οργανώνεται σε παραγράφους. Έτσι στο παράδειγμά μας χρησιμοποιούμε το στοιχείο παραγράφων (ετικέτες <p> … </p>) για να καθορίσουμε τα όρια των τριών παραγράφων που απαρτίζουν το κείμενο (γραμμές 11-23, 25, 27, 28-35). Η κάθε παράγραφος αποτελεί μία μικρή ενότητα κειμένου.

Στον κώδικα παρατηρούμε επίσης την ύπαρξη κωδικών που ξεκινούν με το χαρακτήρα ampersand ( & ) και τελειώνουν με το χαρακτήρα colon ( ; ) (το ερωτηματικό). Οι κωδικοί αυτοί ονομάζονται οντότητες (entities) και κατά την απόδοση του κώδικα στο φυλλομετρητή μετατρέπονται στα αντίστοιχα σύμβολα. Ορισμένα σύμβολα έχουν ένα λογικό όνομα, όπως
π.χ. &euro; για το €, ενώ άλλα σύμβολα διαθέτουν κωδικό. Τα πιο συχνά χρησιμοποιούμενα σύμβολα διαθέτουν και λογικό όνομα και κωδικό στο δεκαδικό ή στο δεκαεξαδικό σύστημα αρίθμησης. Επαρκή αναφορά στις οντότητες της HTML5 μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C) (http://dev.w3.org/html5/html-author/charref ).

Κοιτάζοντας προσεκτικά τον κώδικα του παραδείγματος παρατηρούμε ότι υπάρχουν κάποια κενά διαστήματα μεταξύ λέξεων και παραγράφων. Ανοίγοντας όμως το αρχείο του παραδείγματος με το φυλλομετρητή μας, παρατηρούμε ότι τα διαστήματα αυτά δεν εμφανίζονται. Αυτό συμβαίνει διότι οι χαρακτήρες αλλαγής γραμμής (Line Feed, LF, με κωδικό ASCII 10), οριζόντιου διαστήματος (Horizontal Tab, HT, με κωδικό ASCII 9) και επιστροφής του δρομέα στην αρχή της γραμμής (Carriage Return, CR, με κωδικό ASCII 13), είναι μη-εκτυπώσιμοι χαρακτήρες ελέγχου. Η γλώσσα HTML προέρχεται από την Πρότυπη Γενικευμένη Γλώσσα Σήμανσης (Standard Generalized Markup Language, SGML). Στις εφαρμογές της SGML η χρήση χαρακτήρων ελέγχου περιορίζεται για να υπάρχει μεγαλύτερη πιθανότητα επιτυχούς ανταλλαγής πληροφοριών μεταξύ ετερογενών συστημάτων μέσω ετερογενών δικτύων. Στην HTML μόνο οι τρεις προηγούμενοι χαρακτήρες ερμηνεύονται και μόνο όταν αποτελούν περιεχόμενα του στοιχείου <pre> … </pre>.

Έτσι λοιπόν στην HTML η ύπαρξη συνεχόμενων μη εκτυπώσιμων χαρακτήρων, όπως οι στηλοθέτες (tab), οι αλλαγές παραγράφου (enter/return) και τα διαστήματα (space) αντικαθίστανται από ένα απλό διάστημα. Επομένως, όπως συμβαίνει και σε ένα λογισμικό κειμενογράφου, η αλλαγή γραμμής γίνεται αυτόματα, ενώ παράγραφος θεωρείται ότι περικλείεται στις ετικέτες <p> … </p> (στον κειμενογράφου πατούμε το πλήκτρο Enter για αλλαγή παραγράφου). Αλλαγή γραμμής, αλλά όχι παραγράφου υλοποιείται με την ετικέτα <hr> (όπως όταν πατούμε Shift+Enter στον κειμενογράφο μας) (γραμμές 12, 19). Παρατηρούμε επίσης ότι η γραμμή 27 που αποτελεί από μόνη της μία παράγραφο έχει μεγαλύτερη απόσταση από την παράγραφο που ακολουθεί, σε σχέση με τη γραμμή 12 στην οποία απλά εισάγεται μια αλλαγή γραμμής. Η παράγραφος είναι μια ενότητα περιεχομένου η οποία μπορεί με τις κατάλληλες οδηγίες να έχει τα δικά της περιθώρια και τη δική της θέση στη ροή του κειμένου της ιστοσελίδας.

Τέλος, στη γραμμή 12 παρατηρούμε τις ετικέτες <strong> … </strong> που ορίζουν να εμφανιστεί το κείμενο με έντονα γράμματα, όπως συμβαίνει και με τις ετικέτες <b> … </b> της γραμμής 27. Η διαφορά έγκειται μόνο στη σημασιολογία, καθώς το στοιχείο strong δίνει ένα επιπλέον νόημα στο κείμενο, το οποίο συνήθως εκμεταλλευόμαστε σε πολυπλοκότερα έγγραφα. Το κείμενο των γραμμών 20-22 γράφεται με μικρότερα γράμματα, λόγω της επισήμανσής του με τις ετικέτες <small> … </small>. Πολυπλοκότερες βέβαια μορφοποιήσεις προτείνεται να γίνονται χρησιμοποιώντας τη γλώσσα των Διαδοχικών Φύλλων Στυλ (Cascading Style Sheet, CSS), καθώς η μορφοποίηση με ετικέτες της γλώσσας HTML έχει περιορισμούς, ενώ πολλές από τις παλαιότερες ετικέτες μορφοποίησης έχουν πλέον αποχαρακτηριστεί, οπότε υπάρχει πιθανότητα να μην υποστηρίζονται από μελλοντικές εκδόσεις των φυλλομετρητών.

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

Εικόνα 7: Η Εφαρμογή 2 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 3: Περιεχόμενο με σημασία
Στην τρίτη μας εφαρμογή θα δούμε πως μπορούμε να δώσουμε νόημα στο περιεχόμενο του εγγράφου. Δηλαδή πως μπορούμε να επισημάνουμε τμήματα του εγγράφου, ώστε αυτά να αποκτήσουν κάποια ειδική σημασία, γεγονός που μας επιτρέπει να οργανώσουμε λογικότερα το περιεχόμενό μας, κάνοντάς το έτσι χρησιμότερο για ανθρώπους και μηχανές.
Πηγαίος κώδικας 3: Ένα σημασιολογικά εμπλουτισμένο έγγραφο HTML
Ξεκινούμε με τη γραμμή 5, όπου στην ετικέτα html προσθέσαμε μια παράμετρο lang. Με αυτή δηλώνουμε τη γλώσσα στην οποία είναι γραμμένο το περιεχόμενο. Αυτό βοηθά μια μηχανή αναζήτησης να επιλέξει τη συγκεκριμένη σελίδα, στην περίπτωση που τα κριτήρια αναζήτησης ταιριάζουν και ο χρήστης έχει επιλέξει ότι θέλει να βρει ιστοσελίδες γραμμένες στα Ελληνικά. Το πρώτο συνθετικό της τιμής "el-GR" αναφέρεται στη γλώσσα, ενώ το δεύτερο στη χώρα.

Εικόνα 8: Εμφανίζοντας την Εφαρμογή 3 στο περιβάλλον του φυλλομετρητή
Οι γραμμές 11 και 15 επισημαίνονται από τις ετικέτες <header> … </header> οι οποίες χαρακτηρίζουν εκείνο το τμήμα περιεχομένου ως κεφαλίδα της ιστοσελίδας. Δεν αλλάζει τη μορφοποίηση, παρά μόνο του δίνει τη σημασία της κεφαλής. Ομοίως στις επόμενες γραμμές τρεις περιοχές (γραμμές 16-30, 31-43, 44-53) χαρακτηρίζονται ως άρθρα με την <article> … </article> και μια περιοχή (γραμμές 54-57) ως υποσέλιδο με τη <footer> … </footer>. Ο προσδιορισμός της σημασίας που έχει για εμάς το περιεχόμενο μπορεί να βοηθήσει έτσι ώστε και η μηχανή να το «καταλαβαίνει» κατά κάποιο τρόπο. Αυτό θα έχει εφαρμογή σε πιο επιτυχημένες λ.χ. αναζητήσεις από μηχανές αναζήτησης ή στην αρτιότερη πιθανή ενσωμάτωση της ιστοσελίδας μας σε κάποιο ιστότοπο που βασίζεται σε ένα σύστημα διαχείρισης περιεχομένου

(Content Management System, CMS), όπως το WordPress, το Joomla, το Drupal, κ.α. Επίσης μας δίνεται η δυνατότητα να ορίσουμε εμείς κανόνες μορφοποίησης μέσω της γλώσσας των διαδοχικών φύλλων στυλ. Οι όροι κεφαλίδα και υποσέλιδο δεν αφορούν την επανάληψη αυτών των περιοχών κατά την εκτύπωση, όπως συμβαίνει στα έγγραφα των επεξεργαστών κειμένου.
Στη γραμμή 14 χρησιμοποιούμε τις ετικέτες <abbr> … </abbr> για να ορίσουμε ένα tool tip, δηλαδή ένα ταμπελάκι το οποίο θα εμφανίζεται αυτόματα, όταν το ποντίκι μας σταθεί πάνω από το κείμενο «ΠΣΔ», εμφανίζοντας την εξήγηση του όρου. Αυτό επιτυγχάνεται χάρη στην παράμετρο title η οποία όταν χρησιμοποιηθεί και στις ετικέτες των επικεφαλίδων και των παραγράφων (γραμμές 12, 17, 19, 32, 33, 45, 46) έχει το ίδιο αποτέλεσμα.

Οι γραμμές 20-24 χαρακτηρίζονται από τις ετικέτες <mark> … </mark> με αποτέλεσμα στο φυλλομετρητή να εμφανίζονται με κίτρινο χρώμα, σαν να τις έχουμε μαρκάρει με κίτρινο μαρκαδόρο επισήμανσης. Οι ετικέτες <u> … </u> στη γραμμή 40 προκαλούν την υπογράμμιση του κειμένου, ενώ η <hr> της γραμμής 55 εμφανίζει μια οριζόντια γραμμή.
Στη γραμμή 33 υπάρχει η ετικέτα <em> η οποία θα δώσει έμφαση στο κείμενο μέχρι τη 34 γράφοντάς το με πλάγια γράμματα. Το ίδιο θα συμβεί και με τη χρήση της <i> στις γραμμές 48-50. Η διαφορά είναι ότι ίσως η <em> να προκαλεί την εμφάνιση λιγότερο ή περισσότερο πλάγιων χαρακτήρων από φυλλομετρητή σε φυλλομετρητή, αλλά το σημαντικότερο είναι ότι η <em> προσδίδει τη σημασία της έμφασης στο περιεχόμενο και μας δίνει τη δυνατότητα να διαφοροποιήσουμε εμείς τη μορφοποίηση χρησιμοποιώντας τη γλώσσα CSS.

Χρήσιμη επισήμανση: Πρέπει να επισημάνουμε ότι, όσον αφορά τη μορφοποίηση του περιεχο -μένου, κάποιες οδηγίες της HTML δεν ερμηνεύονται με τον ίδιο τρόπο σε κάθε φυλλομετρητή. Ειδικότερα, οι οδηγίες της CSS δεν υποστηρίζονται από όλους τους φυλλομετρητές. Αυτό είναι ένα πρόβλημα που αντιμετωπίζουν καθημερινά οι δημιουργοί ιστοσελίδων. Υπάρχουν βέβαια αναλυτικοί πίνακες για την υποστήριξη της εκάστοτε έκδοσης HTML και των δηλώσεων της γλώσσας CSS από τους φυλλομετρητές, τους οποίους πίνακες μπορούμε εύκολα να βρούμε και να εκμεταλλευτούμε. Απλά, οι δικές μας σημειώσεις αφορούν μια εισαγωγή στην ανάπτυξη ιστο -σελίδων, οπότε κρίθηκε σκόπιμο να μη συμπεριλάβουμε τέτοιου είδους πληροφορίες οι οποίες θα κάνουν πολυπλοκότερη την κατανόηση των βασικών εννοιών. Επιπλέον οι επαγγελματίες του χώρου συχνά χρησιμοποιούν έτοιμες εργαλειοθήκες και βιβλιοθήκες εξειδικευμένων εντολών οι οποίες δίνουν το ίδιο αποτέλεσμα στους περισσότερους γνωστούς φυλλομετρητές. Αυτό βέβαια έχει και ένα ρίσκο. Σε περίπτωση που μια βιβλιοθήκη στη οποία στηριχθήκαμε πάψει να ανα -πτύσσεται και να υποστηρίζεται, θα πρέπει να υλοποιήσουμε όλο τον ιστότοπο από την αρχή. Για το λόγο αυτό καλό είναι να χρησιμοποιούμε εργαλεία και πλαίσια ανάπτυξης που θα επιτα -χύνουν την ολοκλήρωση της δουλειάς, αλλά θα πρέπει να γνωρίζουμε τις θεμελιώδεις γλώσσες (HTML για το περιεχόμενο, CSS για τη μορφοποίηση και JavaScript για αυτοματισμούς και διαδραστικότητα), ώστε να μη βρεθούμε κάποια στιγμή προ εκπλήξεως.

Εφαρμογή 4: Περισσότερες μορφοποιήσεις
Συνεχίζουμε με την τέταρτη εφαρμογή, στην οποία παρουσιάζονται περισσότερες ετικέτες που αφορούν τη βασική μορφοποίηση, αλλά και επιπλέον σημασιολογικές επισημάνσεις του περιεχομένου μιας ιστοσελίδας.
Πηγαίος κώδικας 4: Επιπλέον βασικές και σημασιολογικές μορφοποιήσεις
Η ετικέτα <sub> στη γραμμή 12 θα προκαλέσει την εμφάνιση της λέξης «Πληροφορική» ως δείκτη του «Γ». Στις γραμμές 14-15 το στοιχείο cite (ετικέτες <cite> … </cite>) χρησιμοποιείται για να κάνουμε μια αναφορά σε κάποια πηγή, ενώ το στοιχείο q (<q> … </q>), στις γραμμές 16-17, για να παραθέσουμε ένα σύντομο απόσπασμα από τη συγκεκριμένη πηγή. Για μεγαλύτερες αναφορές, ή όταν θέλουμε η αναφορά και το κείμενο του αποσπάσματος να αποτελούν μία ενότητα που ξεχωρίζει, λόγω της αύξησης της αριστερής εσοχής της παραγράφου, εκμεταλλευόμαστε την ετικέτα <blockquote> (γραμμές 36-41).

Όταν θέλουμε να κάνουμε διακριτή μια διαγραφή χρησιμοποιούμε τις ετικέτες <del> … </ del> (γραμμή 23). Όταν θέλουμε να δείξουμε ότι κάτι έχει εισαχθεί χρησιμοποιούμε τις ετικέτες <ins> … </ins> (γραμμή 24). Για να εισάγουμε ημερομηνία ή και ώρα χρησιμοποιούμε το στοιχείο datetime (γραμμή 25), ενώ για ταχυδρομικές διευθύνσεις το στοιχείο address (γραμμή 26).
Για να αναφερθούμε σε κώδικα ή εντολές, καλό είναι να χρησιμοποιούμε τις ετικέτες <code> … </code> (γραμμή 35) οι οποίες επιπλέον αλλάζουν τη μορφή των χαρακτήρων σε στυλ γραφομηχανής, χρησιμοποιώντας γραμματοσειρές όπου ο κάθε χαρακτήρας έχει το ίδιο πλάτος, γνωστές και ως monospace. Το ίδιο συμβαίνει και όταν χρησιμοποιούμε τις ετικέτες <samp> … </samp> (γραμμές 60-65), με τις οποίες μπορούμε να επισημάνουμε για παράδειγμα ένα κείμενο που εμφανίζεται σε ένα τερματικό. Τόσο η code όσο και η samp εισάγουν το περιεχόμενό τους στη ροή του κειμένου, ακολουθώντας τον κανόνα της HTML για τα διαστήματα και τις αλλαγές γραμμής. Έτσι πρέπει εμείς να φροντίσουμε για αυτές. Αν όμως έχουμε μια μεγαλύτερη ενότητα κειμένου που θέλουμε να διατηρήσει τη μορφοποίησή της, όπως συμβαίνει λ.χ. με μια ενότητα κώδικα, τότε χρησιμοποιούμε τις ετικέτες <pre> … </ pre> (γραμμές 28-33).

Χρήσιμη επισήμανση: Γενικά οι γραμματοσειρές χωρίζονται σε monospace και proportional. Στις monospace (π.χ. Courier, Consolas) κάθε χαρακτήρας έχει το ίδιο πλάτος (παρατηρήστε τον κώδικα των παραδειγμάτων αυτών των σημειώσεων). Έτσι λ.χ. οι χαρακτήρες «ι» και «ο»
ή οι «1» και «8» καταλαμβάνουν τον ίδιο χώρο. Αυτό μας βοηθά στην ευκολότερη στοίχιση του κειμένου, χωρίς χρήση ειδικών χαρακτήρων, όπως ο χαρακτήρας στηλοθέτη (tab). Στις proportional (π.χ. Arial, Times New Roman) γραμματοσειρές κάθε χαρακτήρας έχει διαφορετι -κό πλάτος (παρατηρήστε τους χαρακτήρες του κειμένου που διαβάζετε σε αυτή την παράγραφο). Έτσι λ.χ. οι χαρακτήρες «ι» και «ο» ή οι «1» και «8» δεν έχουν το ίδιο πλάτος.

Μια διαφορετική κατηγοριοποίηση των γραμματοσειρών είναι σύμφωνα με τη διακόσμησή τους. Έτσι έχουμε τις γραμματοσειρές τύπου serif (π.χ. Times New Roman, Rockwell) οι οποίες έχουν μια μικρή γραμμούλα στις άκρες των βασικών γραμμών τους και τις γραμματοσειρές τύπου sans-serif οι οποίες δεν διαθέτουν αυτή τη διακόσμηση (π.χ. Tahoma, Arial).

Εφαρμογή 5: Εμφάνιση… με στυλ
Στο πέμπτο παράδειγμα εφαρμογής δείχνουμε τη μορφοποίηση με οδηγίες διαδοχικών φύλλων στυλ, οι οποίες εφαρμόζονται με τη βοήθεια της παραμέτρου style σε κάθε ετικέτα που θέλουμε να μορφοποιήσουμε.
Πηγαίος κώδικας 5: Τοπική μορφοποίηση με κανόνες CSS
Ξεκινούμε με την ετικέτα <sup> στη γραμμή 12. Αυτή προκαλεί το «ο» να γραφεί ως εκθέτης, με αποτέλεσμα να έχουμε το κείμενο «1ο». Στις γραμμές 30-39 παρατηρούμε ότι χρησιμοποιούμε το σύμβολο του μικρότερου (<) με τη μορφή οντότητας (&lt;). Αυτό είναι ένα τρικ για να εμφανιστούν οι ετικέτες HTML ως κώδικας για το παράδειγμα της ιστοσελίδας, αλλά και να μη διαταραχθεί η συνέχεια του κώδικα της ιστοσελίδας μας. Αυτό συμβαίνει διότι ο διερμηνέας HTML του φυλλομετρητή αντιλαμβάνεται τις ετικέτες HTML όπου τις εντοπίσει στο αρχείο της ιστοσελίδας, επισημαίνοντας ή μορφοποιώντας κατάλληλα το περιεχόμενό της. Αν για παράδειγμα στη γραμμή 39 γράφαμε </html> αντί για &lt;/html> τότε δεν θα εμφανιζόταν το κείμενο </html> στο περιεχόμενο και επιπλέον πιθανώς να θεωρούσε ο διερμηνευτής HTML ότι στο σημείο τελειώνει ο κώδικας της ιστοσελίδας, αγνοώντας τον υπόλοιπο κώδικα.

Τόσο στη γραμμή 11, όσο και σε επόμενες, παρατηρούμε την ύπαρξη της παραμέτρου style σε διάφορες ετικέτες. Η παράμετρος αυτή μας επιτρέπει να εφαρμόσουμε στα αντίστοιχα στοιχεία μορφοποίηση σύμφωνα με τους κανόνες των διαδοχικών φύλλων στυλ. Αυτός ο τρόπος μορφοποίησης είναι η σύγχρονη τάση στη συντριπτική πλειοψηφία των ιστοτόπων. Η εφαρμογή μορφοποίησης CSS επιτρέπει να εφαρμόσουμε πολυπλοκότερες μορφοποιήσεις στο περιεχόμενο από αυτές που υποστηρίζει η HTML, ενώ, όπως θα δούμε και σε επόμενα παραδείγματα, επιτρέπει το διαχωρισμό του περιεχομένου από τη μορφή του. Έτσι μπορούμε να χρησιμοποιούμε την HTML για την περιγραφή και επισήμανση του περιεχομένου και τη γλώσσα CSS για την απόδοση της εμφάνισης του στο παράθυρο του φυλλομετρητή. Ως τιμή στην παράμετρο style δίνουμε έναν ή περισσότερους κανόνες (rule) μορφοποίησης της γλώσσας CSS. Κάθε κανόνας συντάσσεται ως εξής:

Έτσι η κάθε style θα έχει τη μορφή:

style =
" ιδιότητα1 : τιμή1; ιδιότητα2 : τιμή2; ... "
σύνολο κανόνων
Η σειρά των κανόνων μέσα στη style δεν έχει σημασία. Είναι σημαντικό κάθε κανόνας να τελειώνει με ένα ερωτηματικό (;) (χαρακτήρας colon). Δεν πειράζει αν ο τελευταίος κανόνας δεν τελειώνει σε ερωτηματικό, καθώς εκεί τερματίζει και η συμβολοσειρά που αποτελεί την παράμετρο της style. Τονίζεται ότι η κάθε ετικέτα style επηρεάζει τη μορφοποίηση του στοιχείου στο οποίο γράφεται. Έτσι σε διαφορετικές ετικέτες έναρξης μπορούμε να έχουμε διαφορετικές μορφοποιήσεις. Βέβαια οι μορφοποιήσεις CSS χωρίζονται σε κατηγορίες, καθώς κάθε είδος περιεχομένου έχει τις δικές του ιδιότητες. Έτσι, κάποιες ιδιότητες αφορούν τους χαρακτήρες του κειμένου, άλλες τις ενότητες κειμένου, όπως οι επικεφαλίδες και οι παράγραφοι, διαφορετικές ιδιότητες τις εικόνες, τους πίνακες, κ.ο.κ. Στη συνέχεια παρουσιάζονται οι κανόνες CSS που εμφανίζονται στο συγκεκριμένο παράδειγμα, μαζί με μια σύντομη εξήγηση και κάποια σχόλια.

| Κανόνας                      | Περιγραφή                                                                                                                                                                                                                                                                                                                                                                                                                 |
|------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| text-align:center;           | Στοίχιση του κειμένου στο κέντρο. Είναι επίσης εφικτή η στοίχιση αριστερά (left), δεξιά (right)                                                                                                                                                                                                                                                                                                                           |
| color:white;                 | και πλήρως (justified). Λευκό χρώμα των χαρακτήρων. Οι τιμές των χρωμάτων μπορούν να αποδοθούν με τρεις τρό- πους: α) Ονομαστικά (π.χ. green, red, lightgreen, coral, κ.λπ.). β) Με τη δεκαδική τιμή τους ως rgb(x,y,z), όπου x μια δεκα- δική τιμή από 0 έως 255 που αντιστοιχεί στο κόκκινο χρώμα,  όπου y μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο  πράσινο χρώμα και z μια δεκαδική τιμή από 0 έως 255 που |
| background-color:blue;       | Μπλε χρώμα του υποβάθρου (φόντου) των χαρακτήρων.                                                                                                                                                                                                                                                                                                                                                                         |
| background-color:yellow;     | Κίτρινο χρώμα υποβάθρου χαρακτήρων.                                                                                                                                                                                                                                                                                                                                                                                       |
| background-color:lightgreen; | Ανοιχτό πράσινο χρώμα υποβάθρου χαρακτήρων.                                                                                                                                                                                                                                                                                                                                                                               |
| font-family:courier;         | Επιλογή γραμματοσειράς της οικογένειας Courier.                                                                                                                                                                                                                                                                                                                                                                           |
|                              | Οι γραμματοσειρές μπορούν εκτός από ονομαστικά, να επιλε- γούν και κατά οικογένεια ή κατηγορία (π.χ. serif, sans-serif,  monospace). Το μέγεθος των χαρακτήρων στο 120% του τυπικού μεγέθους                                                                                                                                                                                                                              |
| font-size:120%;              | χαρακτήρων.                                                                                                                                                                                                                                                                                                                                                                                                               |

| συμπαγούς μαύρης  γραμμής, πάχους 1px.                                                      | border:1px solid black; Η ενότητα κειμένου θα έχει περίγραμμα   |
|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------|
| Η ενότητα κειμένου θα εμφανιστεί ως ένα μπλοκ το οποίο θα  στο πλάτος του περιεχομένου του, |                                                                 |
| περιοριστεί επιτρέποντας  σε άλλες ενότητες να σταθούν δίπλα της.                           | display:inline-block;                                           |

Εκτενή αναφορά στη γλώσσα μορφοποίησης CSS μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C) ( http://www.w3.org/TR/CSS/ ).
Χρήσιμη επισήμανση: Στη γλώσσα HTML τα στοιχεία του περιεχομένου χωρίζονται σε δύο με -γάλες κατηγορίες, ως προς τον τρόπο εμφάνισής τους, τον τρόπο δηλαδή με τον οποίο «γεμί ζουν» το παράθυρο του φυλλομετρητή. Η πρώτη κατηγορία είναι τα στοιχεία που τοποθετούνται στη σειρά του κειμένου (inline). Αυτά ακολουθούν τη ροή του κειμένου, δίχως να προκαλούν την αλλαγή παραγράφου. Έχουμε συναντήσει αρκετά στοιχεία αυτού του τύπου στα παραδείγ -ματά μας. Παραδείγματα αποτελούν οι χαρακτήρες του κειμένου, οι οντότητες (π.χ. &copy;), οι ετικέτες small, br, mark, em, strong, small, b, i, u, code, small, samp, cite, q, sub, sup, κ.α. Η δεύτερη κατηγορία είναι τα στοιχεία που τοποθετούνται σε μια νέα παράγραφο και αποτελούν μια ενιαία ενότητα, ένα μπλοκ περιεχομένου. Τα στοιχεία τύπου μπλοκ τείνουν να καταλαμβά -νουν όλο το πλάτος της ιστοσελίδας για την περιοχή που καλύπτει το ύψος τους. Με άλλα λόγια «προσπαθούν» ώστε να μην υπάρχει άλλο περιεχόμενο αριστερά ή δεξιά τους. Παραδείγματα αποτελούν οι ετικέτες p, h1, h2, h3, hr, pre, article, header, footer, blockquote, κ.α. Επισημαί -νουμε ότι η ετικέτα br ανήκει στην πρώτη κατηγορία, καθώς απλά προκαλεί την αλλαγή γραμμής στην τρέχουσα ενότητα δίχως να εισάγει νέα ενότητα.

Εικόνα 10: Το μοντέλο πλαισίου (box model) του περιεχομένου
Τα στοιχεία της HTML εμφανίζονται μέσα σε ένα νοητό πλαίσιο, ένα κουτί που έχει τις δικές του ιδιότητες. Οι ιδιότητες καθορίζονται από το αντίστοιχο μοντέλο πλαισίου (box model) (Εικόνα 10). Το πλεονέκτημα της χρήσης CSS είναι ότι μπορούμε να αλλάξουμε τη μορφοποίηση αυτού του πλαισίου για κάθε στοιχείο του περιεχομένου. Επίσης μπορούμε να εμφανίσουμε τα στοιχεία τύπου σειράς ως στοιχεία τύπου μπλοκ και αντίστροφα.
Εικόνα 11: Η Εφαρμογή 5 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 6: Οργάνωση του περιεχομένου με λίστες
Στην έκτη εφαρμογή χρησιμοποιούμε λίστες για την οργάνωση του περιεχομένου, εισάγουμε εικόνες και μορφοποιούμε με τη βοήθεια ενός εσωτερικού διαδοχικού φύλλου στυλ.
Πηγαίος κώδικας 6: Μορφοποίηση τοπικά και με εσωτερικό φύλλο στυλ
Στις γραμμές 10-15 παρατηρούμε μερικές καινούργιες ετικέτες μεταδεδομένων. Οι ετικέτες meta των γραμμών αυτών έχουν μία παράμετρο name, στην οποία ορίζεται το όνομα μιας παραμέτρου μεταδεδομένων και την παράμετρο content, όπου ορίζεται η τιμή της παραμέτρου μεταδεδομένων. Έτσι παρέχονται πληροφορίες από την ιστοσελίδα μας προς κάθε ενδιαφερόμενο μηχανισμό του παγκόσμιου ιστού σχετικά με το συγγραφέα της ιστοσελίδας (author), την περιγραφή του περιεχομένου της (description), το λογισμικό με το οποίο δημιουργήθηκε (generator) και κάποιες λέξεις κλειδιά που θα βοηθήσουν τις μηχανές αναζήτησης να την εντοπίσουν.

Στις γραμμές 16-36 συναντούμε το στοιχείο style (ετικέτες <style> … </style>). Εκεί ορίζονται οι κανόνες της γλώσσας CSS για τη μορφοποίηση του περιεχομένου της ιστοσελίδας. Κάθε σύνολο κανόνων χαρακτηρίζεται από έναν επιλογέα.
```
επιλογέας { ιδιότητα1 : τιμή1; ιδιότητα2 : τιμή2; σύνολο κανόνων ... }
```
Αν ο επιλογέας μπορεί να είναι μία ετικέτα της HTML, τότε όλα τα στοιχεία της ιστοσελίδας που ξεκινούν με αυτή την μορφοποιούνται σύμφωνα με το σύνολο κανόνων που δηλώνονται για αυτό τον επιλογέα. Αυτή η δυνατότητα παρέχει μεγάλη ευελιξία, καθώς ορίζοντας για παράδειγμα ότι οι επικεφαλίδες h1 θέλουμε να είναι κεντραρισμένες, τότε κάθε επικεφαλίδα αυτού του τύπου στην ιστοσελίδα μας κεντράρεται, χωρίς να χρειάζεται να το δηλώσουμε σε κάθε ετικέτα <h1> χωριστά. Έτσι σε αυτή την ιστοσελίδα επιλέγουμε να μορφοποιήσουμε το σώμα της ιστοσελίδας (body), τις επικεφαλίδες επιπέδου 1 (h1) και 2 (h2), τις εικόνες (img) και τα στοιχεία που ανήκουν σε μη αριθμημένες λίστες (ul li). Μπορούμε λοιπόν όχι μόνο να αναφερθούμε γενικά σε κάποια στοιχεία, αλλά και σε κάποια στοιχεία που έχουν ως «γονείς» άλλα στοιχεία. Στο παράδειγμα αυτό χρησιμοποιούμε μόνο επιλογείς με ονόματα ετικετών, αλλά υπάρχουν, όπως θα δούμε στα επόμενα παραδείγματα, και άλλοι τρόποι ώστε να επιλέγουμε ομάδες περιεχομένου. Πρέπει να αναφέρουμε ότι η συγκέντρωση των μορφοποιήσεων στην κεφαλή της ιστοσελίδας δεν αποκλείει τη χρήση της παραμέτρου style τοπικά σε κάποιες ετικέτες. Έτσι το στοιχείο style του head ορίζει τους κανόνες που ισχύουν για όλο το έγγραφο, αλλά όπου θέλουμε μπορούμε να χρησιμοποιήσουμε τη style ως παράμετρο για να εφαρμόσουμε ιδιαίτερη μορφοποίηση σε κάποια στοιχεία.

Οι νέοι κανόνες CSS που συναντούμε σε αυτό το παράδειγμα αφορούν τις εικόνες.

| Κανόνας                | Περιγραφή                                                                           |
|------------------------|-------------------------------------------------------------------------------------|
| height:80px;           | Ύψος εικόνας στα 80 pixel.                                                          |
|                        | Αφού δεν ορίζουμε και το πλάτος της (width) η εικόνα θα αλλάξει  μέγεθος αναλογικά. |
| vertical-align:middle; | Το κείμενο θα στοιχίζεται στη μέση ως προς το ύψος της εικόνας.                     |

| Επιλογέας   | Περιγραφή                                                       |
|-------------|-----------------------------------------------------------------|
| ul li       | Επιλογή μόνο των στοιχείων li που υπάρχουν μέσα σε στοιχεία ul. |
Στις γραμμές 41-55 ορίζεται μία μη αριθμημένη λίστα με κουκκίδες. Οι ετικέτες <ul> … </ ul> σηματοδοτούν την αρχή και το τέλος της λίστας, ενώ κάθε στοιχείο της επισημαίνεται από τις ετικέτες <li> … </li>. Κάθε στοιχείο της λίστας έχει μία εικόνα που εισάγεται με την ετικέτα img, η οποία έχει δύο παραμέτρους, το URL στο οποίο βρίσκεται η εικόνα, που ορίζεται με την src, και ένα εναλλακτικό κείμενο που θα εμφανιστεί αν για κάποιο λόγο δεν μπορεί να εμφανιστεί η εικόνα, που ορίζεται με την ετικέτα alt. Χρειάζεται προσοχή στον ορισμό της διαδρομής που βρίσκεται η εικόνα. Αν και το URL μπορεί να παραπέμπει σε οποιαδήποτε εικόνα στον παγκόσμιο ιστό, καλό είναι να έχουμε αποθηκευμένες στον υπολογιστή ή το διακομιστή που φιλοξενεί τις ιστοσελίδες μας, τις εικόνες που θα εμφανίζονται σε αυτές. Είναι επίσης καλή πρακτική να οργανώνουμε τις εικόνες μιας ιστοσελίδας ή ενός ιστοτόπου σε χωριστούς φακέλους, ώστε να μη χρειάζονται πολύπλοκα URL για να τις προσπελάσουμε και να μην έχουμε προβλήματα μετά τη μεταφορά ενός ιστοτόπου από τον υπολογιστή ανάπτυξης στον εξυπηρετητή που θα τον φιλοξενεί μόνιμα.

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

Οι γραμμές 59-73 αναφέρονται σε μια αριθμημένη λίστα. Και σε αυτή την περίπτωση κάθε στοιχείο της λίστας χαρακτηρίζεται από τις ετικέτες <li> … </li> ώστε να θεωρηθεί ενότητα περιεχομένου και να λάβει αυτόματα την αρίθμησή του. Ο κώδικας της ιστοσελίδας τελειώνει με μια λίστα ορισμών στις γραμμές 75-87. Η λίστα ορισμών χαρακτηρίζεται από τις ετικέτες <dl> … </dl> οι οποίες περικλείουν ζεύγη των στοιχείων dt, dd. Το στοιχείο dt έχει σκοπό να εμφανίζει έναν όρο, ενώ το στοιχείο dd, την εξήγησή του.

Εικόνα 12: Η Εφαρμογή 6 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 7: Χρησιμοποιώντας στυλ… εξωτερικό
Στο έβδομο παράδειγμα εφαρμογής παρουσιάζεται η χρήση εξωτερικού αρχείου μορφοποίησης διαδοχικών φύλλων στυλ CSS αλλά και οι φωλιασμένες λίστες.
Πηγαίος κώδικας 7: Μορφοποίηση φωλιασμένης λίστας με εξωτερικό φύλλο στυλ
Στη γραμμή 13 παρατηρούμε το στοιχείο link. Το στοιχείο αυτό έχει σκοπό τη διασύνδεση του κώδικα HTML της ιστοσελίδας με κάποια εξωτερική πηγή, στην περίπτωσή μας ένα εξωτερικό αρχείο στυλ (rel) τύπου CSS (type) που βρίσκεται στο αρχείο (href) "p07.css". Η χρήση εξωτερικών φύλλων στυλ μας δίνει ακόμη μεγαλύτερη ευελιξία, καθώς μπορούμε να χρησιμοποιούμε τους ίδιους κανόνες μορφοποίησης για περισσότερες από μία ιστοσελίδες, ακόμη και για ολόκληρο τον ιστότοπο που αναπτύσσουμε, εφαρμόζοντας κοινά στυλ που ονομάζουμε και θέματα. Αν ένα σύνολο ιστοσελίδων βασίζεται στο ίδιο θέμα, τότε μπορούμε
εύκολα να αλλάξουμε το ύφος τους, αλλάζοντας απλά μερικούς κανόνες στο αρχείο CSS. Ο Πηγαίος κώδικας 8 αφορά τον κώδικα CSS του εξωτερικού φύλλου στυλ.

Πηγαίος κώδικας 8: Ο κώδικας του εξωτερικού φύλλου στυλ για την Εφαρμογή 7.
Παρατηρούμε ότι το αρχείο "p07.css" ξεκινά με ένα σχόλιο (γραμμές 1-3). Οτιδήποτε γράφεται μέσα σε /* … */ θεωρείται σχόλιο και αγνοείται από το φυλλομετρητή. Στη γραμμή 5 έχουμε τη δήλωση της κωδικοποίησης χαρακτήρων του αρχείου που είναι η UTF-8 για καλύτερη συμβατότητα. Κατόπιν γράφονται τα σύνολα κανόνων με τους επιλογείς τους, όπως και στα εσωτερικά φύλλα στυλ.
Όπως έχουμε αναφέρει σε προηγούμενη άσκηση στους κανόνες CSS υπερισχύει η τοπικότητα. Όταν δηλαδή υπάρχει ένα εξωτερικό φύλλο στυλ που επιλέγει ένα τμήμα του περιεχομένου, τότε εφαρμόζονται οι δικοί του κανόνες μορφοποίησης. Αν παράλληλα υπάρχει και ένα εσωτερικό φύλλο στυλ, τότε για το ίδιο τμήμα περιεχομένου ισχύουν οι κανόνες του εσωτερικού και όχι του εξωτερικού φύλλου στυλ. Στην περίπτωση δε που υπάρχει στην ετικέτα έναρξης του τμήματος αυτού και παράμετρος style η οποία ορίζει κάποια μορφοποίηση, τότε εφαρμόζεται κατά προτεραιότητα η μορφοποίηση που ορίζει η τοπική παράμετρος, μετά το στοιχείο style του αρχείου και τελευταία η μορφοποίηση του εξωτερικού φύλλου στυλ. Αυτό σημαίνει ότι μπορούμε να χρησιμοποιούμε κοινή μορφοποίηση για πολλές ιστοσελίδες, η οποία όμως να διαφοροποιείται κατά περίπτωση, σύμφωνα με τις ανάγκες μας.

Οι νέοι κανόνες CSS που συναντούμε σε αυτό το παράδειγμα αφορούν λίστες και κείμενο.

| Κανόνας                               | Περιγραφή                                                                                                 |
|---------------------------------------|-----------------------------------------------------------------------------------------------------------|
| list-style:circle;                    | Οι κουκκίδες θα έχουν τη μορφή μικρών κύκλων. Άλλες μορφές είναι οι disc, square, none για να μην εμφανί- |
| list-style:lower-greek;               | Η αρίθμηση θα γίνεται με πεζά ελληνικά γράμματα.                                                          |
| list-style:lower-greek;               | Άλλες μορφές είναι οι lower-roman, upper-roman, κ.λπ.                                                     |
| Η γραφή θα είναι εντονότερη από bold. | font-weight:bolder;                                                                                       |
| Το κείμενο γράφεται με κεφαλαία.      | text-transform: uppercase;                                                                                |
| word-spacing:10px;                    | Απόσταση λέξεων 10px.                                                                                     |

Κλείνοντας θα πρέπει να επισημάνουμε ότι, όπως φαίνεται στις γραμμές 17-40, έχουμε μία λίστα με κουκκίδες στην οποία μέσα φωλιάζουμε επιμέρους λίστες. Γενικά μέσα στα στοιχεία μιας λίστας μπορούμε να συμπεριλάβουμε οποιοδήποτε περιεχόμενο, αρκεί να προσέχουμε να μην μπερδέψουμε τις ετικέτες έναρξης και λήξης κάθε στοιχείου. Αυτό ισχύει άλλωστε και για όλες τις ετικέτες μιας ιστοσελίδας.
Εικόνα 13: Η Εφαρμογή 7 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 8: Πίνακας… κλασικών επιτυχιών
Στην όγδοη εφαρμογή μας παρουσιάζεται ένας πίνακας. Οι πίνακες αποτελούν έναν δημοφιλή τρόπο οργάνωσης και παρουσίασης περιεχομένου.
Πηγαίος κώδικας 9: Ένας πίνακας κειμένου και εικόνων με συγχωνευμένες κυψέλες
Ένας πίνακας στην HTML αποτελείται από κυψέλες (cell) οι οποίες οργανώνονται σε γραμμές (row). Οι ετικέτες <table> … </table> σηματοδοτούν την έναρξη και λήξη του περιεχομένου του πίνακα. Κάθε γραμμή ξεκινά με <tr> και τελειώνει με </tr>, ενώ κάθε κυψέλη οριοθετείται με <td> … </td>. Η ετικέτες <th> … </th> χρησιμοποιούνται συχνά για τον προσδιορισμό των κυψελών της πρώτης γραμμής, ώστε τα περιεχόμενά της να γράφονται με εντονότερους χαρακτήρες.

Ο πίνακας του παραδείγματος έχει 10 γραμμές και 6 στήλες. Μετρώντας όμως τις κυψέλες του (στοιχεία td, th) βρίσκουμε ότι είναι λιγότερες. Αυτό συμβαίνει γιατί μία κυψέλη καταλαμβάνει 2 στήλες, ενώ άλλες καταλαμβάνουν 3 ή 6 γραμμές. Αυτή η τεχνική λέγεται συγχώνευση κυψελών και επιτυγχάνεται χάρη στις παραμέτρους colspan για οριζόντια συγχώνευση (γραμμή 42) και rowspan για κατακόρυφη συγχώνευση (γραμμές 43, 44, 45, 56, 57). Έτσι σε κάθε μία από τις 10 γραμμές του πίνακα χρειάζεται να ορίζονται κάθε φορά μόνο όσες κυψέλες λείπουν ώστε να συμπληρωθεί ο αριθμός των 6 κυψελών. Οι κενές θέσεις κυψελών καταλαμβάνονται από τις συγχωνευμένες κυψέλες οι οποίες επεκτείνονται κατά το πλήθος στηλών που ορίζει η colspan ή το πλήθος γραμμών που ορίζει η rowspan. Αν γίνει κάποιο λάθος, τότε κάποιες θέσεις κυψελών του πίνακα θα μείνουν κενές.

Καλό είναι μέσα σε έναν πίνακα να τοποθετούμε περιεχόμενο μόνο μέσα στις κυψέλες του (στοιχεία td ή th) και όχι στα στοιχεία των γραμμών (tr) ή του πίνακα (table), ώστε να μην έχουμε απρόσμενα αποτελέσματα στη διάταξη και τη μορφοποίηση. Επίσης, δεν είναι καλή πρακτική η υπερφόρτωση μιας ιστοσελίδας με πίνακες, το φώλιασμα πίνακα μέσα σε πίνακα ή η χρήση πίνακα για τη διάταξη όλου του περιεχομένου μιας ιστοσελίδας. Επιπλέον, η υπερβολική χρήση πινάκων και το φώλιασμά τους, καθιστά δύσκολη την ανάλυση του περιεχομένου από τις εξειδικευμένες εφαρμογές λογισμικού ανάγνωσης οθόνης που εξυπηρετούν τους συνανθρώπους μας με προβλήματα όρασης. Ως συνέπεια, συχνά δεν είναι δυνατή η ανάγνωση
του κειμένου της ιστοσελίδας με τη σωστή σειρά, μπερδεύοντας τον ακροατή. Υπάρχει επίσης περίπτωση να μην εντοπιστεί από το λογισμικό ανάγνωσης ένα τμήμα του κειμένου ή των συνδέσμων της ιστοσελίδας, καθιστώντας ανύπαρκτο, αφού ο χρήστης θα το γνώριζε μόνο αν το άκουγε.

Στις γραμμές 55, 61, 64, 67, 70, 73 παρατηρούμε την ύπαρξη της παραμέτρου class. Η παράμετρος αυτή μπορεί να χρησιμοποιηθεί σε κάθε στοιχείο της HTML που αφορά περιεχόμενο για να ορίσει κατηγορίες (κλάσεις) περιεχομένου. Εδώ χρησιμοποιείται για να ορίσει την κατηγορία "eb" που αφορά τις διοργανώσεις "Eurobasket" ώστε εκμεταλλευόμενοι τις δυνατότητες των κανόνων CSS να μορφοποιήσουμε με διαφορετικό τρόπο τις τελευταίες 6 γραμμές του πίνακα.
Οι νέοι κανόνες CSS που συναντούμε σε αυτό το παράδειγμα αφορούν κατά κύριο λόγο τους πίνακες. Παρατηρούμε πάντως ότι ορισμένοι κανόνες, όπως αυτοί που αφορούν χρώματα, εφαρμόζονται και σε άλλες κατηγορίες περιεχομένου εκτός από το κείμενο.

| Κανόνας                          | Περιγραφή                                                                                                                                                                                                                                                                                                                                                                            |
|----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| border-collapse: collapse;       | Δεν θα υπάρχει κενό μεταξύ του περιγράμματος πίνακα και  του περιγράμματος κυψελών. Για κάθε στοιχείο του πίνακα ισχύει το μοντέλο πλαισίου  (box model) όπως έχει ήδη περιγραφεί. Αν δεν οριστεί δια- φορετικά κάθε κυψέλη του πίνακα έχει το δικό της όριο και  μπορεί να έχει το δικό της περίγραμμα. Αυτό έχει ως αποτέ- λεσμα να εμφανίζεται ένα κενό μεταξύ των περιγραμμάτων. |
| vertical-align: middle;          | Στοίχιση κειμένου στο μέσο του ύψους της γραμμής.                                                                                                                                                                                                                                                                                                                                    |
| Ορισμός του γεμίσματος στα 10px. | padding: 10px;                                                                                                                                                                                                                                                                                                                                                                       |

| Επιλογέας   | Περιγραφή                                               |
|-------------|---------------------------------------------------------|
| td, th      | Επιλογή κάθε στοιχείου td και κάθε στοιχείου th.        |
| .eb         | Επιλογή όλων των στοιχείων που ανήκουν στην κλάση "eb". |
Εικόνα 14: Η Εφαρμογή 8 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 9: Σύνδεσμοι σε χρήσιμα εργαλεία λογισμικού
Το ένατο παράδειγμα εφαρμογής αφορά την εισαγωγή συνδέσμων. Ο μηχανισμός των συνδέσμων είναι ένας από τους λόγους της επιτυχίας του παγκόσμιου ιστού.
Πηγαίος κώδικας 10: Σύνδεσμοι προς γνωστά εργαλεία λογισμικού ανάπτυξης ιστοτόπων
Ένα κείμενο που διαβάζουμε ή προσπελάζουμε σειριακά, λέμε ότι είναι γραμμικά οργανωμένο. Ένα κείμενο στο οποίο μπορούμε να μεταβούμε από ενότητα σε ενότητα, σελίδα σε σελίδα ή κεφάλαιο σε κεφάλαιο, χωρίς να είμαστε αναγκασμένοι από τη δομή του να το ξεφυλλίσουμε με τη σειρά, ονομάζεται υπερκείμενο. Οι ιστοσελίδες είναι ουσιαστικά έγγραφα υπερκειμένου. Ο μηχανισμός των συνδέσμων ή υπερσυνδέσμων υλοποιεί τη δομή του υπερκειμένου, παρέχοντας την ελευθερία πλοήγησης σε διαφορετικές ενότητες περιεχομένου, στην ίδια ή σε διαφορετικές ιστοσελίδες, οι οποίες μπορεί να βρίσκονται οπουδήποτε στον παγκόσμιο ιστό, απλά επιλέγοντας με το δείκτη του ποντικιού πάνω σε μια λέξη ή φράση.

Η HTML διαθέτει το στοιχείο a για την υλοποίηση του μηχανισμού των υπερσυνδέσμων. Στον κώδικα των γραμμών 40-41 (και επόμενων), το κείμενο που βρίσκεται μεταξύ των ετικετών <a href= "…"> … </a> αποκτά την ιδιότητα της «θερμής περιοχής» (hot spot). Όταν ανοίξουμε την ιστοσελίδα με το φυλλομετρητή μας, η θερμή περιοχή τυπικά επισημαίνεται με διαφορετικό χρώμα χαρακτήρων και υπογράμμιση. Όταν ο δείκτης του ποντικού βρεθεί πάνω από μια θερμή περιοχή τότε παίρνει διαφορετική μορφή (γίνεται σαν «χεράκι»), δείχνοντας ότι αν πατήσουμε στο σημείο εκείνο θα μεταφερθούμε σε έναν άλλο προορισμό του παγκόσμιου ιστού. Η παράμετρος target καθορίζει ότι ο πόρος προορισμού θα ανοίξει σε μια νέα καρτέλα ή ένα νέο παράθυρο του φυλλομετρητή μας, αφήνοντας έτσι την ιστοσελίδα εκκίνησης ανοιχτή, στη διάθεση του χρήστη.

Εικόνα 15: Η Εφαρμογή 9 στο περιβάλλον του φυλλομετρητή
Κάθε πόρος του παγκόσμιου ιστού, όπως εικόνες, γραφικά, αρχεία, βίντεο, κ.λπ. είναι προσπελάσιμος μέσω της διεύθυνσής του η οποία ονομάζεται URL (Uniform Resource Locator, Ομοιόμορφος Εντοπιστής Πόρου). Γράφοντας το URL ενός πόρου ως τιμή στην παράμετρο href του στοιχείου a κάνει το σύνδεσμό μας ικανό να μας μεταφέρει σε οποιαδήποτε υποστηριζόμενη από το φυλλομετρητή πηγή περιεχομένου. Από την άλλη, περικλείοντας οποιοδήποτε (σχεδόν) περιεχόμενο μέσα σε ετικέτες <a href= "URL"> … </a> θα το μετατρέψει σε θερμή περιοχή, αρκεί το περιεχόμενο αυτό να φαίνεται στο παράθυρο του φυλλομετρητή, γιατί όπως θα δούμε παρακάτω μπορούμε να κρύψουμε τμήματα του περιεχομένου μιας ιστοσελίδας. Έτσι μπορούμε να δημιουργήσουμε υπερσυνδέσεις όπου πατώντας πάνω σε κείμενο, εικόνα, γραφικό, πίνακα ή άλλο περιεχόμενο, μπορούμε να φορτώσουμε στο φυλλομετρητή μας οποιοδήποτε υποστηριζόμενο περιεχόμενο, όπως κείμενα, εικόνες, κινούμενα σχέδια, έγγραφα, εφαρμογές πολυμέσων, κ.α. Μια μικρή παρατήρηση: όταν το σημείο εκκίνησης ενός υπερσυνδέσμου είναι κείμενο, τότε ονομάζεται «θερμή λέξη», ενώ όταν είναι εικόνα ή γραφικό, ονομάζεται «θερμή περιοχή».

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

| Κανόνας                                                                                                                                | Περιγραφή                     |
|----------------------------------------------------------------------------------------------------------------------------------------|-------------------------------|
| Το κάθε στοιχείο της λίστας θα εμφανιστεί ως ένα μπλοκ το  οποίο θα επιτρέπει στα υπόλοιπα στοιχεία της λίστας να στα- θούν δίπλα του. | display: inline-block;        |
| Το ύψος του στοιχείου της λίστας θα είναι στο 120% του τυπι- κού ύψους του κειμένου.                                                   | height: 1.2em;                |
| Περιθώριο 2px.                                                                                                                         | margin: 2px;                  |
| Γέμισμα μεταξύ περιεχομένου και ορίου περιγράμματος στα  10px.                                                                         | padding: 10px;                |
| Περίγραμμα διπλής γραμμής, πάχους 4px, χρώματος κοραλλί.                                                                               | border: 4px double coral;     |
| Χρώμα φόντου ανοιχτό πράσινο.                                                                                                          | background-color: lightgreen; |
| Στυλ περιγράμματος με στιγμές.                                                                                                         | outline-style: dotted;        |
| Χρώμα περιγράμματος πορτοκαλί.                                                                                                         | outline-color: orange;        |

| Επιλογέας                                                                                              | Περιγραφή   |
|--------------------------------------------------------------------------------------------------------|-------------|
| Ένας ενεργός σύνδεσμος (τη στιγμή που τον πατούμε).                                                    | a:active    |
| Όταν ο δείκτης του ποντικιού βρίσκεται πάνω από ένα οποιο- δήποτε στοιχείο li.                         | li:hover    |
| Όταν ο δείκτης του ποντικιού βρίσκεται πάνω από ένα στοιχείο  li το οποίο «ανήκει» σε ένα στοιχείο ol. | ol li:hover |
| Όταν ο δείκτης του ποντικιού βρίσκεται πάνω από ένα οποιο- δήποτε στοιχείο a.                          | a:hover     |
| Όταν έχουμε ήδη επισκεφθεί το συγκεκριμένο σύνδεσμο.                                                   | a :visited  |

Εφαρμογή 10: Κρυφτό!
Στη δέκατη εφαρμογή μελετούμε ένα παράδειγμα εμφάνισης και απόκρυψης τμήματος του περιεχομένου μιας ιστοσελίδας με τη χρήση ενοτήτων της HTML και της γλώσσας CSS.
Πηγαίος κώδικας 11: Εμφάνιση και απόκρυψη ενοτήτων ενός δομημένου κειμένου
Το περιεχόμενο του παραδείγματος οργανώνεται με τη βοήθεια μιας φωλιασμένης λίστας. Παρατηρούμε ότι κάθε στοιχείο li των αριθμημένων λιστών (ol) έχει ως περιεχόμενο μία ενότητα (στοιχείο div), ενώ κάθε ενότητα έχει στο τέλος της μία ενότητα σε σειρά (στοιχείο span). Αυτό γίνεται για να επιλέξουμε και να μορφοποιήσουμε κατάλληλα το περιεχόμενο χρησιμοποιώντας τη γλώσσα CSS.

Εικόνα 16: Η Εφαρμογή 10 στο περιβάλλον του φυλλομετρητή
Οι ενότητες είναι στοιχεία τύπου μπλοκ που χρησιμοποιούνται για τη διαίρεση του περιεχομένου σε περιοχές (π.χ. μενού - περιεχόμενο - διαφημίσεις) και τη διαμόρφωσή του σύμφωνα με την επιθυμία του σχεδιαστή. Οι ενότητες σε σειρά είναι στοιχεία που χρησιμοποιούνται συνήθως για τη διαφορετική μορφοποίηση τμήματος περιεχομένου μιας ενότητας, αλλά στη σειρά του περιεχομένου, δίχως να εισάγεται ένα μπλοκ μέσα σε ένα άλλο μπλοκ.
Σε αυτό το παράδειγμα εφαρμόζουμε ένα τρικ απόκρυψης και εμφάνισης του περιεχομένου των ενοτήτων, εκμεταλλευόμενοι τις δυνατότητες των διαδοχικών φύλλων στυλ CSS. Αρχικά κρύβουμε όλες τις ενότητες με τα κείμενα σχετικά με τις γλώσσες σεναρίων, αφήνοντας να φαίνεται μόνο η ονομασία της γλώσσας σεναρίων. Όταν το ποντίκι μας περάσει πάνω από μία ονομασία, τότε αλλάζει η μορφοποίηση CSS και εμφανίζεται η αντίστοιχη ενότητα με την πλήρη περιγραφή και την παραπομπή στην πηγή των πληροφοριών.

| Κανόνας                                                                                                                                                                                                                               | Περιγραφή                                               |
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|
| Δεν εμφανίζεται το περιεχόμενο κάθε επιλεγμένου  στοιχείου.                                                                                                                                                                           | display: none;                                          |
| display: block;                                                                                                                                                                                                                       | Εμφάνιση του στοιχείου ως στοιχείο τύπου μπλοκ.         |
| Επιλογή γραμματοσειράς. Αν υπάρχει η Georgia θα  επιλεγεί, διαφορετικά η "Times New Roman". Αν δεν  υπάρχει ούτε αυτή, θα επιλεγεί μια γραμματοσειρά  της οικογένειας Times, με τελευταία εναλλακτική μια  γραμματοσειρά τύπου serif. | font-family: Georgia,  "Times New Roman", Times, serif; |
| Ορισμός της έντασης γραφής με αριθμό. Ο αριθμός  700 αντιστοιχεί στην έντονη γραφή (bold). Ο αριθμός                                                                                                                                  | font-weight: 900;                                       |

| Επιλογέας                                                                                                                                               | Περιγραφή                      |
|---------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------|
| Δεν εμφανίζεται το περιεχόμενο κάθε επιλεγμένου  στοιχείου                                                                                              | display: none;                 |
| Επιλέγεται το στοιχείο div που βρίσκεται μέσα σε ένα  στοιχείο κλάσης "epilogi", όταν το ποντίκι ταξιδέψει  πάνω από το στοιχείο αυτό.                  | .epilogi:hover div             |
| Επιλέγεται η πρώτη γραμμή του στοιχείου div.                                                                                                            | div:first-line                 |
| Επιλέγεται η πρώτη γραμμή του στοιχείου div που  βρίσκεται μέσα σε ένα στοιχείο κλάσης "epilogi",  όταν το ποντίκι ταξιδέψει πάνω από το στοιχείο αυτό. | . epilogi:hover div:first-line |
| div:first-letter Επιλέγεται ο πρώτος χαρακτήρας του στοιχείου div.                                                                                      |                                |
| .epilogi:hover div span Επιλογή κάθε στοιχείου span που γράφεται μέσα σε  στοιχείο div όταν το ποντίκι περάσει πάνω από ένα                             |                                |

Εφαρμογή 11: Ελληνικό καλοκαιρινό στυλ
Στην ενδέκατη εφαρμογή μας ασχολούμαστε λίγο περισσότερο με τις μορφοποιήσεις των εικόνων. Οι εικόνες αποτελούν σημαντικό μέσο παρουσίασης της πληροφορίας, συμβάλλοντας καθοριστικά στην αισθητική ενός ιστοτόπου, οπότε αξίζουν την προσοχή μας.
Πηγαίος κώδικας 12: Τοποθέτηση εικόνων και σύνδεσμος προς την αρχή της σελίδας
Ξεκινούμε με τη γραμμή 95 και μια διαφορετική χρήση της ετικέτας <a>. Όταν αυτή συντάσσεται με την παράμετρο name, τότε ορίζει ένα σημείο μέσα σε μια ιστοσελίδα, δίνοντάς του ένα όνομα. Στην αρχή της ιστοσελίδας ορίζεται το όνομα "αρχή". Στη γραμμή 154 υπάρχει ένας σύνδεσμος που παραπέμπει στο όνομα "αρχή" χρησιμοποιώντας το URL "#αρχή". Έτσι έχουμε στο τέλος της ιστοσελίδας ένα σύνδεσμο που αν πατηθεί μας πηγαίνει στην αρχή της σελίδας.

Μπορούμε να ορίσουμε και άλλα σημεία, ιδιαίτερα σε μια μεγάλη ιστοσελίδα. Αν λοιπόν σε μια ιστοσελίδα έχουν οριστεί μια σειρά από σημεία με διαφορετικά ονόματα, τότε είμαστε σε θέση να ορίζουμε προς αυτή την ιστοσελίδα συνδέσμους της μορφής URL#όνομα, όπου URL η διεύθυνση της ιστοσελίδας και #όνομα το όνομα ενός από τα σημεία της. Αυτό θα έχει ως αποτέλεσμα, με το πάτημα ενός τέτοιου συνδέσμου να οδηγούμαστε όχι στην αρχή της ιστοσελίδας, αλλά σε συγκεκριμένο σημείο της.
Στις εικόνες (img) των γραμμών 96-99 συναντούμε την παράμετρο ταυτότητας (id). Με αυτή αποδίδουμε μοναδικές τιμές σε στοιχεία ώστε να τα επιλέξουμε στη συνέχεια για μορφοποίηση με τη γλώσσα CSS, είτε για αλληλεπίδραση ή άλλο αυτοματισμό με τη γλώσσα σεναρίων JavaScript. Η παράμετρος id μπορεί να χρησιμοποιηθεί σε κάθε στοιχείο περιεχομένου, ανεξάρτητα ή μαζί με την παράμετρο class.

Τιμές των παραμέτρων, όπως της name, τα ονόματα κλάσεων (class), ταυτοτήτων (id), κ.α. μπορούν να χρησιμοποιούν και ελληνικούς χαρακτήρες, κάνοντας ίσως έτσι περισσότερο ευανάγνωστο και κατανοητό τον κώδικά μας. Θα πρέπει όμως να προσέχουμε πολύ κατά την πληκτρολόγηση, ώστε να μην μπερδεύουμε τους ελληνικούς με τους λατινικούς χαρακτήρες που μοιάζουν (όπως το «ο»), γιατί τότε οι μηχανισμοί που κατασκευάζουμε δεν θα λειτουργούν. Ο εντοπισμός τέτοιου είδους σφαλμάτων είναι λίγο δύσκολος, ειδικά αν δεν χρησιμοποιούμε κάποιο εργαλείο αποσφαλμάτωσης, όπως το Developer Tools στο φυλλομετρητή Microsoft Edge (ενεργοποίηση με F12) (Εικόνα 17), τα Εργαλεία για Προγραμματιστές στο φυλλομετρητή Google Chrome (ενεργοποίηση με (Ctrl+Shift+I), το Web Developer στο φυλλομετρητή Mozilla Firefox (ενεργοποίηση με Ctrl+Shift+I) (Εικόνα 18).

Εικόνα 17: Το περιβάλλον αποσφαλμάτωσης των Developer Tools στο Edge της Microsoft
Εικόνα 18: O Style Editor του Web Developer στο Firefox της Mozilla
Σε αυτό το παράδειγμα εκμεταλλευόμαστε πιο προχωρημένες δυνατότητες των διαδοχικών φύλλων στυλ CSS. Αλλάζουμε τη συμπεριφορά των μη εκτυπώσιμων (λευκών) χαρακτήρων του περιεχομένου για να εμφανίσουμε ποιήματα και κείμενο χωρίς τη διαρκή χρήση της ετικέτας αλλαγής γραμμής <br>. Τοποθετούμε μία εικόνα σταθερά στο υπόβαθρο και τέσσερις ακόμη σε σταθερές θέσεις στις γωνίες του παραθύρου, καθεμιά σε διαφορετική στρώση. Ορίζουμε σκιά στο κείμενο της ιστοσελίδας, ώστε να φαίνεται μπροστά από το πολύχρωμο υπόβαθρο.

| Κανόνας Περιγραφή                                                                                                                                                                                                                                                                                                                                                                    |
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| background-attachment: fixed; Το αντικείμενο που θα τοποθετηθεί στο φόντο (υπόβαθρο)  της ιστοσελίδας θα έχει σταθερή θέση (δεν θα «κυλάει»  μαζί με το περιεχόμενο)                                                                                                                                                                                                                 |
| background-image:  url("thalassa.jpg" ); Στο φόντο της σελίδας θα τοποθετηθεί η εικόνα που αντι- στοιχεί στο URL "thalassa.jpg". Χρειάζεται προσοχή με τα  ονόματα της διαδρομής των εικόνων, αλλά και τα γράμμα- τα, καθώς ο εξυπηρετητής ιστοσελίδων μπορεί να βασίζε- ται στο λειτουργικό σύστημα GNU/Linux, στο BSD, στο  Unix ή άλλο, όπου στα ονόματα αρχείων υπάρχει διάκριση |
| background-position: center; Το αντικείμενο του φόντου θα είναι κεντραρισμένο                                                                                                                                                                                                                                                                                                        |

| background-repeat: no-repeat;   | Το αντικείμενο του φόντου δεν θα επαναλαμβάνεται ορι- ζόντια (repeat-x), ούτε κατακόρυφα (repeat-y), ούτε και  οριζόντια και κατακόρυφα (repeat) δημιουργώντας ένα  πλακόστρωτο.      |
|---------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| text-shadow: 1px 1px 4px white; | Ορισμός σκιάς χρώματος λευκού, σε απόσταση 1px προς  τα κάτω και 1px προς τα δεξιά ως προς τη θέση του κειμέ- νου, με διάχυση 4px.                                                    |
| font-style:italic;              | Ορισμός πλάγιας γραφής χαρακτήρων. Μπορεί να πάρει  τιμές όπως normal για κανονική γραφή, italic για πλάγια,  oblique για λιγότερο πλάγιους χαρακτήρες.                               |
| line-height: 10%;               | Το ύψος της γραμμής (διάστιχο) θα είναι στο 10%. Αυτό  σημαίνει ότι οι γραμμές δεν θα έχουν μεγάλη απόσταση,  παρά το ότι το μέγεθος των χαρακτήρων (font-size) ορίζε- ται στο 1.2em. |
| white-space: pre;               | Το στοιχείο θα μορφοποιηθεί, ως προς τους μη εκτυπώσι- μους χαρακτήρες, όπως σε ένα στοιχείο pre.                                                                                     |
| white-space: normal;            | Το στοιχείο θα μορφοποιηθεί ακολουθώντας τους κανόνες  της HTML, αγνοώντας τους μη εκτυπώσιμους χαρακτή- ρες.                                                                         |
| text-align: right;              | Το κείμενο που επιλέγεται θα στοιχηθεί δεξιά.                                                                                                                                         |
| transform: rotate(-8deg);       | Περιστροφή του αντικειμένου κατά -8 μοίρες.                                                                                                                                           |
| position: fixed;                | Το αντικείμενο θα τοποθετηθεί συγκεκριμένη θέση ως  προς το παράθυρο του φυλλομετρητή και δεν θα ακολου- θεί τη φυσιολογική ροή κειμένου.                                             |
| position: fixed; left: 10px;    | Σε συνδυασμό με την position: fixed, τοποθέτηση του  αντικειμένου 10px από τα αριστερά του παραθύρου.                                                                                 |
| position: fixed; top: 20px;     | Σε συνδυασμό με την position: fixed, τοποθέτηση του  αντικειμένου 10px από το πάνω μέρος του παραθύρου.                                                                               |
| position: fixed; bottom: 20px;  | Σε συνδυασμό με την position: fixed, τοποθέτηση του  αντικειμένου 10px από το κάτω μέρος του παραθύρου.                                                                               |
| position: fixed; right: 10px;   | Σε συνδυασμό με την position: fixed, τοποθέτηση του  αντικειμένου 10px από τα δεξιά του παραθύρου.                                                                                    |
| z-index: -1;                    | Τοποθέτηση του αντικειμένου μία στρώση (layer) πιο                                                                                                                                    |
| width: 400px;                   | κάτω.                                                                                                                                                                                 |
| height: 200px;                  | Ορισμός του πλάτους της εικόνας στα 400px και του  ύψους της στα 200px.                                                                                                               |

| Επιλογέας                                                                                              | Περιγραφή         |
|--------------------------------------------------------------------------------------------------------|-------------------|
| Επιλογή των παραγράφων (p) που ανήκουν στην κλάση  «δημιουργός»                                        | p.δημιουργός      |
| Επιλογή των στοιχείων με κλάση «τίτλος»                                                                | .τίτλος           |
| Επιλογή του στοιχείου με ταυτότητα (id) "eik1"                                                         | #eik1             |
| Επιλογή του στοιχείου με ταυτότητα (id) "eik2"                                                         | #eik2             |
| Επιλογή του στοιχείου με ταυτότητα (id) "eik3"                                                         | #eik3             |
| Επιλογή του στοιχείου με ταυτότητα (id) "eik4"                                                         | #eik4             |
| Επιλογή των στοιχείων είτε με κλάση «ποίημα», είτε με  κλάση «κείμενο».                                | .ποίημα, .κείμενο |
| Επιλογή είτε των στοιχείων με κλάση «αναφορά», είτε  των στοιχείων em που περικλείονται σε στοιχείο p. | .αναφορά, p em    |

Εικόνα 19: Η Εφαρμογή 11 στο περιβάλλον του φυλλομετρητή

Εφαρμογή 12: Δεδομένα σε… φόρμα
Στο δωδέκατο παράδειγμα εφαρμογής δημιουργούμε μια ιστοσελίδα με δύο φόρμες παραγγελίας. Οι φόρμες χρησιμεύουν για τη μεταφορά δεδομένων από μια ιστοσελίδα σε μια εφαρμογή που εκτελείται σε έναν εξυπηρετητή και περιμένει τα δεδομένα αυτά για να προχωρήσει σε κάποιες ενέργειες. Παραθέτεται επίσης ο κώδικας PHP που απαιτείται για την επεξεργασία των δεδομένων που αποστέλλονται με τις φόρμες παραγγελίας στον εξυπηρετητή, αν και είναι εκτός του θέματος αυτών των σημειώσεων, μόνο για την επίδειξη της λειτουργίας του παραδείγματος.

Προσοχή: Ο κώδικας PHP έχει γραφεί για λόγους επίδειξης και άρα δεν επιτρέπεται να χρησιμοποιηθεί σε εξυπηρετητή παραγωγής (που λειτουργεί σε πραγματικές συνθήκες, εξυ -πηρετώντας πραγματικούς χρήστες και εφαρμογές στον παγκόσμιο ιστό), καθώς δεν έχει δοκιμαστεί για πιθανά κενά ασφαλείας που ίσως θέσουν τον εξυπηρετητή σε κίνδυνο.
Πηγαίος κώδικας 13: Μία ιστοσελίδα με δυο φόρμες παραγγελίας
Οι γραμμές 60-79 και 84-119 αποτελούν φόρμες επικοινωνίας της ιστοσελίδας με έναν εξυπηρετητή του παγκόσμιου ιστού. Οι φόρμες χρησιμοποιούνται ευρύτατα στις εφαρμογές του παγκόσμιου ιστού, αφού αποτελούν έναν τρόπο επικοινωνίας των χρηστών μιας υπηρεσίας με τον εξυπηρετητή που παρέχει τις υπηρεσίες της. Κάθε φορά που συμπληρώνουμε κάποια στοιχεία, όταν συνδεόμαστε σε μια υπηρεσία ή παραγγέλνουμε προϊόντα μέσω του παγκόσμιου ιστού, χρησιμοποιούμε φόρμες.

Εικόνα 20: Η Εφαρμογή 12 στο περιβάλλον του φυλλομετρητή
Μια φόρμα μπορεί να έχει οποιοδήποτε περιεχόμενο. Παράλληλα όμως με τα υπόλοιπα στοιχεία της, μια φόρμα περιέχει και ένα πλήθος στοιχείων για την εισαγωγή δεδομένων. Τα στοιχεία μιας φόρμας περικλείονται στις ετικέτες <form> … </form>. Η ετικέτα <form> έχει μια σειρά από παραμέτρους. Η name ορίζει το όνομά της, η action το URL του προγράμματος που θα υποδεχθεί τα δεδομένα και η method τη μέθοδο αποστολής των δεδομένων στον εξυπηρετητή. Όταν υποβάλλουμε μια φόρμα με τη μέθοδο post, στον εξυπηρετητή ταξιδεύουν μόνο τα δεδομένα της που αποτελούνται από ζεύγη ονομάτων μεταβλητών με τις αντίστοιχες τιμές τους και βέβαια όχι όλο το υπόλοιπο περιεχόμενο της φόρμας.

Εικόνα 21: Η απάντηση που συνθέτει και επιστρέφει ο Πηγαίος κώδικας 14, όταν του σταλεί η πρώτη μορφή παραγγελίας
Τα στοιχεία δεδομένων μιας φόρμας ονομάζονται input στην HTML, αλλά είναι γνωστά σε διάφορα περιβάλλοντα και ως control ή widget, έχουν διάφορες μορφές και χρήσεις. Κάποια είναι πλαίσια στα οποία γράφουμε, άλλα είναι πλήκτρα ενεργειών, πλαίσια ελέγχου, αναδιπλούμενες λίστες, κ.λπ. Η πρώτη φόρμα περιλαμβάνει τρία κουμπιά επιλογής (radio button) (γραμμές 63, 66, 69). Η παράμετρος type="radio" δίνει στο widget τη μορφή του κουμπιού επιλογής. Όταν επιλέγεται ένα κουμπί επιλογής καταργείται η επιλογή σε κάποιο άλλο της ίδιας ομάδας. Για το σκοπό αυτό τα τρία κουμπιά επιλογής της πρώτης φόρμας έχουν το ίδιο όνομα (name) και διαφορετική τιμή (value). Έτσι αν επιλέξουμε το πρώτο και αποστείλουμε την παραγγελία πατώντας το input με type="submit", τότε στον εξυπηρετητή θα φτάσει μεταξύ άλλων η τιμή "elliniki" για τη μεταβλητή "synthesi". Αυτό έχει ένα νόημα για το πρόγραμμα υποδοχής των δεδομένων στον εξυπηρετητή, όπου θα γίνουν μια σειρά από ενέργειες για την ικανοποίηση του αιτήματός μας.

Η πρώτη φόρμα περιλαμβάνει ακόμη τέσσερα πλαίσια κειμένου (<input type="text" …>) στις γραμμές 72-76. Τα πλαίσια κειμένου έχουν ένα όνομα, όπως πρέπει να έχει κάθε widget μιας φόρμας και επιπλέον την παράμετρο size που καθορίζει το πλήθος των χαρακτήρων που μπορούν να δεχθούν.
Η δεύτερη φόρμα διαθέτει μια σειρά από πλαίσια ελέγχου (check box). Κάθε πλαίσιο ελέγχου μπορεί να επιλεγεί ανεξάρτητα από τα υπόλοιπα και αντιστοιχεί σε μια δυαδική μεταβλητή, αφού μέσω αυτού μπορούμε να επιλέξουμε ή όχι μία τιμή. Το δεύτερο που παρατηρούμε στις ετικέτες των πλαισίων ελέγχου της φόρμας είναι ότι το όνομα κάθε πλαισίου είναι το ίδιο με τη διαφορά ότι κάθε όνομα έχει και ένα διαφορετικό αριθμό μέσα σε αγκύλες στα δεξιά του. Αυτό συμβαίνει διότι σε ομάδα πλαισίων ελέγχου τυπικά κάθε μεταβλητή είναι ανεξάρτητη. Έτσι τα ονόματα των παραμέτρων name στις γραμμές 88-103 μοιάζουν αλλά δεν είναι τα ίδια. Στην ουσία χρησιμοποιούμε ένα διάνυσμα τιμών, ένα μονοδιάστατο πίνακα με άλλα λόγια. Οι τιμές των πλαισίων ελέγχου αφορούν υλικά που το καθένα είτε θα προστεθεί στην πίτσα που θα παραγγείλουμε, είτε όχι. Μας βολεύει λοιπόν προγραμματιστικά στο σενάριο PHP να επεξεργαστούμε τις τιμές αυτών των μεταβλητών με τη βοήθεια μιας δομής επανάληψης. Τα διανύσματα μας επιτρέπουν να επεξεργαστούμε επαναληπτικά με ένα βρόχο ένα σύνολο μεταβλητών των οποίων το όνομα διαφέρει μόνο κατά έναν αριθμό, το δείκτη.

Εικόνα 22: Η απάντηση που συνθέτει και επιστρέφει ο Πηγαίος κώδικας 14, όταν λάβει τη δεύτερη μορφή παραγγελίας
Οι δύο φόρμες έχουν διαφορετικά ονόματα αφού αναφέρονται σε διαφορετικά σύνολα δεδομένων, όπου το ένα υποβάλλεται κάθε φορά στο σενάριο υποδοχής των δεδομένων στον εξυπηρετητή. Επίσης τα πλήκτρα υποβολής της κάθε φόρμας έχουν διαφορετικό όνομα για να είναι εύκολα ανιχνεύσιμα από το σενάριο υποδοχής.
Σε αυτό το παράδειγμα εκμεταλλευόμαστε πιο προχωρημένες δυνατότητες των διαδοχικών φύλλων στυλ CSS. Αλλάζουμε τη συμπεριφορά των μη εκτυπώσιμων (λευκών) χαρακτήρων του περιεχομένου για να εμφανίσουμε ποιήματα και κείμενο χωρίς τη διαρκή χρήση της ετικέτας αλλαγής γραμμής <br>. Τοποθετούμε μία εικόνα σταθερά στο υπόβαθρο και τέσσερις ακόμη σε σταθερές θέσεις στις γωνίες του παραθύρου, καθεμιά σε διαφορετική στρώση. Ορίζουμε σκιά στο κείμενο της ιστοσελίδας, ώστε να φαίνεται μπροστά από το πολύχρωμο υπόβαθρο.

| Κανόνας                                   | Περιγραφή                                                                                                                                                             |
|-------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| opacity: 0.8;                             | Ορίζεται η αδιαφάνεια του αντικειμένου στο 80% ή αλ- λιώς η διαφάνειά του στο 20%.                                                                                    |
| vertical-align:top;                       | Κατακόρυφη στοίχιση στην κορυφή.                                                                                                                                      |
| margin-left: auto; margin-right: auto;    | Ένας τρόπος να κεντράρουμε ένα στοιχείο τύπου μπλοκ.  Ορίζουμε ως αυτόματο το αριστερό και δεξιό περιθώριο. Ορίζουμε τη σχετική θέση του αντικειμένου ως προς τη      |
| position: relative; width:40%; left: 30%; | φυσιολογική θέση που θα είχε σύμφωνα με τη ροή του πε- ριεχομένου. Έτσι κεντράρουμε ένα στοιχείο τύπου μπλοκ,  αφού επιλέγουμε το πλάτος του να είναι στο 40% της πε- |

Πηγαίος κώδικας 14: Το σενάριο PHP διεκπεραίωσης της παραγγελίας στον εξυπηρετητή

Εφαρμογή 13: Πολυμεσική πανδαισία
Στη δέκατη τρίτη εφαρμογή παρουσιάζουμε τον τρόπο ενσωμάτωσης σε μια ιστοσελίδα και άλλων μορφών αναπαράστασης πληροφοριών εκτός από τα κείμενα και τις εικόνες. Τα πολυμέσα αποτελούν τον κυριότερο ίσως λόγο της διάδοσης του παγκόσμιου ιστού, οποίος αποτελεί ουσιαστικά μια πλατφόρμα ανάπτυξης πολυμεσικών και υπερμεσικών εφαρμογών. Πολυμεσικών λόγω της υποστήριξης πολλαπλών μέσων και υπερμεσικών λόγω του μεγάλου βαθμού ελευθερίας στην πλοήγηση.
Πηγαίος κώδικας 15: Μια πραγματικά πολυμεσική ιστοσελίδα

Το παράδειγμα αυτό δεν παρουσιάζει κάτι καινούργιο ως προς τη μορφοποίηση CSS, οπότε ας εστιάσουμε στις ετικέτες που αφορούν τα πολυμέσα. Στις γραμμές 34-38 συναντούμε το στοιχείο audio που εμφανίζει ένα πλαίσιο αναπαραγωγής πολυμέσων (media player) για την αναπαραγωγή ήχου. Η ετικέτα <audio> μπορεί να πάρει κάποιες παραμέτρους, χωρίς τιμή, για να αλλάξει τη συμπεριφορά του media player. Με την παράμετρο controls θα εμφανίσει τα πλήκτρα ελέγχου του media player (πλήκτρο play/pause, γραμμή χρόνου, ένταση ήχου). Με την παράμετρο autoplay ξεκινά αυτόματα η αναπαραγωγή μόλις φορτωθεί η ιστοσελίδα, ενώ με την παράμετρο loop η αναπαραγωγή επαναλαμβάνεται διαρκώς.

Το στοιχείο audio πρέπει να περικλείει ένα ή περισσότερα στοιχεία source και καλό είναι να περιλαμβάνει και ένα μήνυμα που θα ειδοποιεί σχετικά τους χρήστες των οποίων ο φυλλομετρητής δεν υποστηρίζει τη λειτουργία audio της HTML5. Κάθε ετικέτα <source> περιγράφει μια διαφορετική μορφή του ίδιου ήχου. Η διεύθυνση του αρχείου ορίζεται με την παράμετρο src, ενώ ο τύπος του με την type. Έτσι μπορούμε να ορίσουμε για παράδειγμα δύο ετικέτες source για ένα τραγούδι, μία για το αρχείο μορφής MP3 και μία για το αρχείο μορφής Ogg. Τότε δεν θα αναπαραχθούν και τα δύο αρχεία, αλλά αυτό της μορφής που υποστηρίζεται από τον εκάστοτε φυλλομετρητή που προβάλει την ιστοσελίδα. Συνήθως η μορφή αρχείων ήχου MP3 υποστηρίζεται από τους πιο δημοφιλείς φυλλομετρητές.

Στις γραμμές 42-46, 47-51 συναντούμε το στοιχείο video της HTML5 που εμφανίζει ένα πλαίσιο αναπαραγωγής πολυμέσων (media player) για την αναπαραγωγή βίντεο. Η ετικέτα <video> μπορεί όμοια με την <audio> να πάρει τις παραμέτρους controls, autoplay, loop, αλλά και τις, muted για τη μη αναπαραγωγή του ήχου του βίντεο, poster="URL εικόνας" για να εμφανίζεται μία εικόνα μέχρι να πατηθεί το play από το χρήστη, width, height για τις διαστάσεις του media player, κ.α.
Το στοιχείο video μπορεί να περικλείει ένα ή περισσότερα στοιχεία source με τη ίδια λογική που ισχύει και για το audio. Στο video όμως μπορούμε μέσα στο στοιχείο να αφήσουμε μόνο το μήνυμα ασυμβατότητας και να ορίσουμε το URL της πηγής του βίντεο στην ετικέτα <video> με την παράμετρο src. Όσο αφορά τη συμβατότητα, συνήθως η μορφή αρχείων βίντεο MP4 υποστηρίζεται από τους πιο δημοφιλείς φυλλομετρητές.

Στις γραμμές 39, 52 έχουμε δύο στοιχεία embed. Οι αντίστοιχες ετικέτες παίρνουν την παράμετρο src με τιμή το URL του πόρου που θέλουμε να αναπαράγουμε. Στην περίπτωση του
βίντεο ή άλλης πολυμεσικής εφαρμογής που προβάλει περιεχόμενο, μπορούν να προστεθούν οι παράμετροι width και height, ενώ ορισμένοι φυλλομετρητές ανταποκρίνονται και σε παραμέτρους της embed από παλαιότερες εκδόσεις της HTML, όπως φαίνεται στο σχόλιο της γραμμής 40, με την παράμετρο hidden για την απόκρυψη του media player.
Εικόνα 23: Η Εφαρμογή 13 στο περιβάλλον του φυλλομετρητή

Το πλεονέκτημα της χρήσης των στοιχείων audio και video είναι ότι η αναπαραγωγή γίνεται ανεξάρτητα από το λογισμικό τύπου media player που διαθέτει ο υπολογιστής μας, παρέχοντας ευελιξία. Από την άλλη πλευρά, το στοιχείο embed υποστηρίζει περισσότερες μορφές αρχείων πολυμέσων, εκτός από βίντεο και ήχο. Η αναπαραγωγή πολυμεσικών αρχείων με το embed βασίζεται στην κατάλληλο κάθε φορά άρθρωμα (plug-in).
Τέλος, στις γραμμές 54-56 υπάρχει ένα πλαίσιο iframe. Τα πλαίσια είναι υποδοχές στις οποίες μπορούμε να εμφανίσουμε οποιοδήποτε περιεχόμενο υποστηρίζει ένας φυλλομετρητής. Έτσι χρησιμοποιούμε ένα πλαίσιο για να εμφανίσουμε μια ροή βίντεο (video stream) που αφορά περιεχόμενο που προέρχεται από τις υπηρεσίες βίντεο του Πανελλήνιου Σχολικού Δικτύου (ΠΣΔ) ( http://vod-new.sch.gr/ ). Η ετικέτα iframe έχει την παράμετρο src για το URL της πηγής, width, height για το πλάτος και το ύψος, scrolling για την απαγόρευση κύλισης,
frameborder για το πάχος του περιγράμματος και allowfullscreen για την προβολή του βίντεο σε πλήρη οθόνη.

Στο συγκεκριμένο ιστότοπο του ΠΣΔ, όταν παρακολουθούμε κάποιο βίντεο μας παρέχεται έτοιμος ο κώδικας ενσωμάτωσής του στην ιστοσελίδα μας με τη χρήση στοιχείου iframe. Αντιγράφουμε τον κώδικα, τον επικολλούμε στον κώδικα της σελίδας μας και έχουμε ενσωματώσει τη ροή βίντεο η οποία μπορεί να αναπαραχθεί μέσα από αυτό το «παράθυρο» χωρίς να χρειάζεται να αποθηκεύσουμε τοπικά ή στο δικό μας εξυπηρετητή το συγκεκριμένο βίντεο. Διάφοροι ιστότοποι σχετικοί με βίντεο παρέχουν τον έτοιμο κώδικα ή το URL για την ενσωμάτωση των βίντεό τους.

Χρήσιμη επισήμανση: Το πλήρες URL του βίντεο είναι το http://vod-new.sch.gr/asset/ player /NaEAOOddTjMhKAMBPl2M52oc/XpElKlWpVcKjECNWX3Jzh33K , αλλά για να χωρά στο πλαίσιο του πηγαίου κώδικα του παραδείγματος συντμήθηκε χρησιμοποιώντας την υπηρεσία σύντμησης μακροσκελών URL http://goo.gl της Google. Παρόμοιες υπηρεσίες σύντμησης είναι οι https://bitly.com/, http://tinyurl.com/ , κ.α.
Εκμεταλλευόμενοι πάντως τα πλαίσια μπορούμε να φορτώσουμε για παράδειγμα άλλες ιστοσελίδες μέσα σε πλαίσια που θα περιλαμβάνονται στη δική μας. Σε παλαιότερες εκδόσεις της HTML υποστηρίζονταν και άλλου τύπου πλαίσια των οποίων η χρήση έχει αποχαρακτηριστεί και είναι καλό να μη χρησιμοποιούνται σε νέες δημιουργίες .

Εφαρμογή 14: Χάρτης εικόνας
Στη δέκατη τέταρτη εφαρμογή πειραματιζόμαστε με ένα χάρτη εικόνας. Οι χάρτες εικόνων είναι ένα από τα εντυπωσιακά χαρακτηριστικά της HTML με πληθώρα εφαρμογών.
Πηγαίος κώδικας 16: Βασισμένος σε χάρτη εικόνας διαδραστικός χάρτης της Ελλάδας
Ξεκινούμε το σχολιασμό από τη μορφοποίηση CSS του εγγράφου στην οποία εισάγεται ένας μόνο νέος κανόνας σε σχέση με όσους έχουμε σχολιάσει στα προηγούμενα παραδείγματα.

| Κανόνας                           | Περιγραφή                                                                                                                                                                      |
|-----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| background:                       | Το φόντο της ιστοσελίδας θα γεμίσει με μια γραμμική διαβάθμιση                                                                                                                 |
| linear-gradient(blue, lightgray); | (ντεγκραντέ, gradient) χρωμάτων από το μπλε έως το ανοιχτό γκρι.  (ίσως δεν εμφανιστεί σε ορισμένους φυλλομετρητές που δεν υποστη- ρίζουν αυτή τη λειτουργία της γλώσσας CSS). |

Η ιδέα ενός χάρτη εικόνας είναι απλή. Σε μία εικόνα (img) αναθέτουμε, με την παράμετρο usemap, (γραμμή 31) ένα χάρτη εικόνας (map) (γραμμές 32-95), δηλαδή ένα σύνολο από περιοχές (area). Κάθε περιοχή έχει τo σχήμα (shape) ενός κύκλου, ενός ορθογωνίου ή ενός πολυγώνου, ανάλογα με το σχήμα της περιοχής που θέλουμε να επισημάνουμε στην εικόνα μας. Έτσι, κάθε περιοχή αποτελείται από ένα σύνολο συντεταγμένων (coords), τον τίτλο της (title) που θα εμφανίζεται με τη μορφή μιας ταμπελίτσας tool tip όποτε το ποντίκι μας περνά πάνω από αυτή την περιοχή, ένα επεξηγηματικό κείμενο (alt) που περιγράφει όπως ο τίτλος ή λίγο αναλυτικότερα τη συγκεκριμένη περιοχή, το URL της ιστοσελίδας ή του πόρου που θα φορτωθεί αν πατήσουμε πάνω σε αυτή την περιοχή της εικόνας και τέλος το αν αυτός ο πόρος θα φορτωθεί στο συγκεκριμένο παράθυρο/καρτέλα ή σε νέο/α (target).

Εικόνα 24: Η Εφαρμογή 14 στο περιβάλλον του φυλλομετρητή
Για περιοχή σχήματος κύκλου οι συντεταγμένες είναι τρεις αριθμοί: x, y, ακτίνα κύκλου. Για περιοχή σχήματος ορθογωνίου οι συντεταγμένες είναι τέσσερις αριθμοί: x$\_{1}$, y$\_{1}$ της πάνω αριστερής γωνίας του και x$\_{2}$, y$\_{2}$ της κάτω δεξιάς γωνίας του. Για περιοχή σχήματος πολυγώνου χρειάζεται ένα ζευγάρι τιμών x, y για κάθε γωνία του πολυγώνου. Έτσι π.χ. για ένα πολύγωνο με 10 γωνίες χρειαζόμαστε 10 ζευγάρια συντεταγμένων: x$\_{1}$, y$\_{1}$, x$\_{2}$, y$\_{2}$, x$\_{3}$, y$\_{3}$, x$\_{4}$, y$\_{4}$, x$\_{5}$, y$\_{5}$, x$\_{6}$, y$\_{6}$, x$\_{7}$, y$\_{7}$, x$\_{8}$, y$\_{8}$, x$\_{9}$, y$\_{9}$, x$\_{10}$, y$\_{10}$.

Όταν η εφαρμογή απαιτεί μεγάλη ακρίβεια ή όταν, όπως στη περίπτωση του χάρτη της Ελλάδας, πρέπει να ορίσουμε ένα μεγάλο πλήθος συντεταγμένων, καλό είναι να χρησιμοποιήσουμε ένα λογισμικό επεξεργασίας εικόνας. Εκεί μπορούμε είτε να εντοπίσουμε ευκολότερα τις συντεταγμένες κάθε εικονοστοιχείου της εικόνας, είτε να χρησιμοποιήσουμε κάποια ενσωματωμένη λειτουργία δημιουργίας χάρτη εικόνας. Τα περισσότερα δημοφιλή εργαλεία λογισμικού επεξεργασίας εικόνων και γραφικών διαθέτουν αντίστοιχες λειτουργίες (Corel DRAW, Adobe Fireworks, GIMP, κ.α.).

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

Εφαρμογή 15: Διανυσματικά γραφικά με… τύπο
Στη δέκατη πέμπτη εφαρμογή παρουσιάζουμε την ενσωμάτωση στην ιστοσελίδα μας διανυσματικών γραφικών μέσω της γλώσσας κλιμακωτών διανυσματικών γραφικών SVG (Scalar Vector Graphics). Τα διανυσματικά γραφικά (vector graphic) χρησιμοποιούνται για την παρουσίαση κυρίως σχεδίων, ενώ τα χαρτογραφικά γραφικά (bitmap graphics) για την απόδοση φωτογραφιών. Επίσης εισάγουμε καλαίσθητους μαθηματικούς τύπους, εκμεταλλευόμενοι τις δυνατότητες της γλώσσας επισήμανσης MathML. Η SVG είναι, όπως και η HTML, μια γλώσσα επισήμανσης με την οποία παράγουμε διανυσματικά γραφικά γράφοντας κώδικα της μορφής XML. Το ίδιο ισχύει και για τη MathML. Η γλώσσα XML (Εκτεταμένη Γλώσσα Επισήμανσης, eXtended Markup Language) είναι ακόμη ένας απόγονος της SGML ο οποίος δίνει τη δυνατότητα δημιουργίας προσαρμοσμένων γλωσσών επισήμανσης, ακόμη και δικές μας, ξεκινώντας από το μηδέν. Έτσι ένα πλήθος γλωσσών επισήμανσης βασίζονται στην XML και προσφέρουν εξειδικευμένες λύσεις σε μια σειρά εφαρμογών της πληροφορικής. Το πλεονέκτημα κατανόησης, ως ένα βαθμό τουλάχιστον, γλωσσών όπως η SVG και η MathML είναι ότι μπορούμε να παράγουμε περιεχόμενο χωρίς τη χρήση κάποιας εξειδικευμένης εφαρμογής, αλλά γράφοντας απλά κείμενο.

Χρήσιμη επισήμανση: Το παράδειγμα ίσως δε λειτουργήσει σε κάθε φυλλομετρητή, τόσο ως προς τη φόρτωση του εξωτερικού αρχείου γραφικών SVG, όσο και για το περιεχόμε -νο MathML, αλλά αξίζει τον κόπο να δοκιμάσουμε να ανοίξουμε αυτή την ιστοσελίδα με περισσότερους από έναν από τους δημοφιλέστερους φυλλομετρητές, ώστε να δούμε το κα -λύτερο αποτέλεσμα. Είναι σχεδόν βέβαιο ότι όσο περνά ο καιρός κυκλοφορούν νέες εκδό σεις των φυλλομετρητών και είναι πολύ πιθανό οι λειτουργίες αυτές να υποστηρίζονται στο μέλλον. Για να εμφανιστεί το περιεχόμενο της MathML όσο καλύτερα γίνεται σε όσο δυνατό περισσότερους φυλλομετρητές, η ιστοσελίδα έχει εμπλουτιστεί με ένα σενάριο JavaScript το οποίο εντοπίζει το φυλλομετρητή που χρησιμοποιούμε και ανάλογα ενσωματώνει τη βι -βλιοθήκη MathJax για καλύτερα αποτελέσματα. Το MathJax Consortium είναι μια ένω ση της American Mathematical Society (AMS) και της Society for Industrial and Applied Mathematics (SIAM) (http://www.mathjax.org).

Πηγαίος κώδικας 17: Ενσωμάτωση διανυσματικών γραφικών SVG και τύπων MathML
Στις γραμμές 16-36 έχει γραφεί ένα σενάριο JavaScript για να εμφανιστεί το περιεχόμενο της MathML όσο καλύτερα γίνεται σε όσο δυνατό περισσότερους φυλλομετρητές. Η λογική του σεναρίου είναι να ανιχνεύσει το όνομα του φυλλομετρητή που χρησιμοποιήθηκε και αν δεν χρησιμοποιούμε το φυλλομετρητή στον οποίο αποδόθηκαν πιστότερα οι τύποι MathML, τότε να γίνεται φόρτωση της βιβλιοθήκης MathJax για να έχουμε ένα καλύτερο αποτέλεσμα.

Οι ετικέτες <script> … </script> οριοθετούν ένα σενάριο, το οποίο αν δεν δηλωθεί διαφορετικά αφορά κώδικα JavaScript. Οι γραμμές 17 και 30 αφορούν σχόλια της JavaScript και δεν λαμβάνονται υπόψη. Στις γραμμές 18-22 έχουμε τον ορισμό μίας μεταβλητής για κάθε τύπο φυλλομετρητή. Στη JavaScript το περιεχόμενο και οι λειτουργίες ενός φυλλομετρητή αντιμετωπίζονται ως μια ιεραρχία αντικειμένων (Document Object Model, DOM). Από τη σύγκριση
λοιπόν μιας ιδιότητας του αντικειμένου navigator της συγκεκριμένης ιεραρχία θα καθοριστεί η τιμή κάθε μεταβλητής. Στις γραμμές 23-28 ελέγχονται οι τιμές δύο μεταβλητών χρησιμοποιώντας λογική σύζευξη, δηλαδή τον τελεστή «λογικό και» (&&), ώστε να επιβεβαιωθεί για δύο περιπτώσεις ο τύπος του φυλλομετρητή. Μετά από αυτό λογικά μία μόνο μεταβλητή από αυτές θα έχει τιμή true και οι υπόλοιπες false.

Στις γραμμές 29-35 ελέγχεται με τη βοήθεια του τελεστή «λογικό όχι» (!), αν ο φυλλομετρητής που χρησιμοποιούμε δεν είναι είναι αυτός που τη δεδομένη χρονική στιγμή έδωσε το αρτιότερο αποτέλεσμα απόδοσης τύπων της MathML και σε αυτή την περίπτωση δημιουργείται μια μεταβλητή η οποία με τη βοήθεια της ιεραρχίας DOM δημιουργεί ένα καινούργιο στοιχείο script στο αντικείμενο document και προσθέτει το περιεχόμενό του στο τέλος του στοιχείου head. Με άλλα λόγια αυτό που πετυχαίνει η κώδικας JavaScript είναι το ίδιο με το να επεξεργαζόμασταν εμείς τον κώδικα της ιστοσελίδας και να προσθέταμε την εξωτερική βιβλιοθήκη MathJax. Μόνο που εδώ γίνεται δυναμικά για κάθε χρήστη που θα επισκεφθεί την ιστοσελίδα μας.

Όσο αφορά το στυλ μορφοποίησης του περιεχομένου δεν παρουσιάζεται στον κώδικα της ιστοσελίδας κάποιος καινούργιος κανόνας. Αξίζει όμως να επισημάνουμε ότι με τον επιλογέα math στη γραμμή 62 μπορούμε να μορφοποιήσουμε τους μαθηματικούς τύπους της ιστοσελίδας, αφού ο κώδικας MathML είναι ουσιαστικά κώδικας XML.
Εικόνα 25: Η Εφαρμογή 15 στο περιβάλλον του φυλλομετρητή
Στις γραμμές 73-94 εισάγεται στην ιστοσελίδα ο κώδικας διανυσματικών γραφικών μέσα σε ένα στοιχείο svg. Η ετικέτα <svg> φέρει τη γενική παράμετρο id για την απόδοση μίας τιμής ταυτότητας και επιπλέον τις παραμέτρους width και height για τον προσδιορισμό των διαστάσεων του καμβά σχεδίασης. Το γραφικό μας περιλαμβάνει 2 κύκλους (circle), 6 συμβολοσειρές (text) και μια ομάδα (g) σχημάτων με κοινά χαρακτηριστικά, η οποία αποτελείται από 5 ευθύγραμμα τμήματα (line) και 1 ορθογώνιο (rect). Στο τέλος του στοιχείου svg υπάρχει και το ένα μήνυμα για την περίπτωση ασυμβατότητας του φυλλομετρητή. Οι περισσότεροι παράμετροι των στοιχείων της svg είναι κατανοητές, όπως οι παράμετροι των συντεταγμένων x1, y1, x2, y2 και της ακτίνας του κύκλου r. Υπάρχουν επιπλέον παράμετροι για το χρώμα (stroke), το πάχος (stroke-width) της γραμμής του περιγράμματος και το χρώμα γεμίσματος (fill) του κάθε σχήματος. Πλήρη αναφορά στις ετικέτες της SVG μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C) ( http://www.w3.org/TR/SVG/ ).

Στις γραμμές 98-101 και 105-108 παρουσιάζεται ο τρόπος ενσωμάτωσης εξωτερικών αρχείων γραφικών SVG. Αυτό είναι ένα ιδιαίτερα χρήσιμο χαρακτηριστικό, αφού μας επιτρέπει να αποθηκεύουμε τα αρχεία γραφικών σε χωριστά αρχεία, ώστε να μπορούμε να τα χρησιμοποιήσουμε και σε άλλες ιστοσελίδες και έγγραφα, αλλά και να μειώσουμε το πλήθος των γραμμών κώδικα της ιστοσελίδας μας, το οποίο θα βοηθήσει σημαντικά στην αποσφαλμάτωσή της. Το εξωτερικό αρχείο παρουσιάζεται στο πλαίσιο Πηγαίος κώδικας 18.
Πηγαίος κώδικας 18: Εξωτερικό αρχείο διανυσματικών γραφικών SVG

Στις γραμμές 124-130 έχουμε τον κώδικα MathML που αφορά τον πρώτο από τους μαθηματικούς τύπους της ιστοσελίδες. Είναι αλήθεια ότι οι συγκεκριμένοι τύποι, καθώς και άλλοι, λίγο πολυπλοκότεροι μπορούν να αποδοθούν με τη χρήση της HTML, αλλά η MathML παράγει ένα πιο καλαίσθητο αποτέλεσμα. Φυσικά οι μαθηματικοί τύποι μπορούν να ενσωματωθούν με τη μορφή χαρτογραφικής εικόνας. Τότε όμως δεν μπορούμε να επέμβουμε για παράδειγμα στη μορφοποίησή τους και να τη διαμορφώσουμε χρησιμοποιώντας κανόνες της γλώσσας CSS. Επιπλέον, η MathML υποστηρίζει την παραγωγή οσοδήποτε πολύπλοκων τύπων. Ένα παράδειγμα αποτελεί το απόσπασμα κώδικα που παρουσιάζεται στο πλαίσιο Πηγαίος κώδικας 19 και η απόδοσή του στο παράθυρο του φυλλομετρητή, όπως παρουσιάζεται στην Εικόνα 26.

Εικόνα 26: Απόδοσή του παρακάτω κώδικα MathML (Πηγαίος κώδικας 19)
H MathML γίνεται σε γενικές γραμμές εύκολα αντιληπτή. Ένας τύπος αποτελείται από ένα στοιχείο math, μέσα στο οποίο μπορούν να υπάρχουν, κατάλληλα δομημένα, στοιχεία mfrac για κλάσματα, με mn για τον αριθμητή, όπως και στοιχεία mi για ονόματα μεταβλητών, mo για τελεστές, sup για εκθέτες, κ.λπ. Υπάρχουν παράμετροι για τις ετικέτες της MathML, αλλά μπορούμε να εισάγουμε και γενικές παραμέτρους της HTML για την απόδοση μορφοποίησης, ταυτότητας, κλάσης, κ.ο.κ. Αναφορά στις ετικέτες της MathML μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C) ( http://www.w3.org/TR/2014/RECMathML3-20140410/ ).

Πηγαίος κώδικας 19: Aπόδοση ενός πολύπλοκου μαθηματικού κανόνα με MathML

Εφαρμογή 16: Ευπροσάρμοστο περιεχόμενο
Κλείνουμε με τη δέκατη έκτη εφαρμογή που αφορά τη σύγχρονη τάση της προσαρμοστικής σχεδίασης (responsive design). Στις μέρες μας οι ιστοσελίδες προβάλλονται σε κάθε λογής τερματική συσκευή, από τηλεοράσεις, κινητά τηλέφωνα μικρά και μεγάλα, ταμπλέτες κάθε μεγέθους, υπολογιστές φορητούς και μη, κ.λπ. Πρέπει λοιπόν ένας δημιουργός ιστοσελίδων να λάβει υπόψη την πληθώρα μέσων, αλλά και τις ιδιαιτερότητες ομάδων του πληθυσμού, κατά το σχεδιασμό των ιστοσελίδων του. Τα πολλαπλά μέσα παρουσίασης αφορούν την προσαρμοστικότητα (responsiveness), ενώ οι ιδιαιτερότητες αφορούν την προσβασιμότητα (accessibility). Μεταξύ άλλων, οι παράγοντες αυτοί συμβάλουν στην υψηλή επισκεψιμότητα και άρα στην επιτυχία ενός ιστοτόπου. Σε αυτό το παράδειγμα θα αναπτύξουμε ένα αντιπροσωπευτικό παράδειγμα μιας προσαρμοστικής ιστοσελίδας. Το παράδειγμα έχει επίσης εμπλουτιστεί με λίγη περισσότερη JavaScript, ώστε να γίνει επίδειξη της διαχείρισης γεγονότων και της αλλαγής του περιεχομένου της ιστοσελίδας, χωρίς τα τρικ της γλώσσας CSS. Προσαρμοστική ιστοσελίδα σημαίνει με απλά λόγια ότι το περιεχόμενο προσαρμόζεται στο παράθυρο του φυλλομετρητή. Έτσι η ιστοσελίδα του παραδείγματος εμφανίζει ένα μενού με εικονίδια και λεζάντες. Καθώς αλλάζει το πλάτος του παραθύρου το μενού προσαρμόζεται, μικραίνοντας, αλλάζοντας διάταξη και κρύβοντας τις λεζάντες. Όταν ο χρήστης πατήσει σε μια επιλογή του μενού, τότε εμφανίζονται ανάλογοι με το θέμα σύνδεσμοι προς αξιόλογους ιστοτόπους.

Πηγαίος κώδικας 20: Το βασικό HTML περιεχόμενο του μενού επιλογών
Για να είναι ευκολότερα διαχειρίσιμος ο κώδικας του παραδείγματος χωρίστηκε σε τρία μέρη. Ένα αρχείο HTML για το βασικό περιεχόμενο, ένα αρχείο CSS για τη μορφοποίηση και ένα αρχείο JS για τον κώδικα JavaScript. Στη γραμμή 11 του αρχείου HTML γίνεται η διασύνδεση με το εξωτερικό φύλλο CSS και στη γραμμή 12 με το εξωτερικό αρχείο σεναρίου JavaScript.
Εικόνα 27: Η Εφαρμογή 16 για μεγάλο μέγεθος παραθύρου του φυλλομετρητή
Για τη δόμηση του μενού χρησιμοποιείται μια μη αριθμημένη λίστα η οποία διαμορφώνεται κατάλληλα με την βοήθεια της CSS. Κάθε στοιχείο της λίστας και άρα του μενού αποτελείται από μία εικόνα και ένα κείμενο σε σειρά. Κάθε εικόνα έχει μια παράμετρο onclick. Αυτή αφορά ένα γεγονός που συμβαίνει όποτε πατούμε με το ποντίκι μας πάνω σε κάποια από τις εικόνες. Με τη βοήθεια της onclick μπορούμε να ορίσουμε ένα υποπρόγραμμα που θα
εκτελείται κάθε φορά που συμβαίνει το γεγονός «κλικ», όταν δηλαδή πατούμε πάνω σε μια εικόνα που ορίζεται με την παράμετρο. Στο γεγονός κλικ κάθε διαφορετικής εικόνας καλούμε μια διαφορετική λειτουργία (function) της JavaScript. Οι ρουτίνες διαχείρισης των γεγονότων κλικ ορίζονται στο εξωτερικό αρχείο JavaScript. Τα στοιχεία span ανήκουν στην κατηγορία "titlosmenou" ώστε να μπορούμε να τα χειριστούμε ανάλογα με το πλάτος του παραθύρου. Στη γραμμή 49 ορίζουμε ένα στοιχείο div χωρίς περιεχόμενο. Το στοιχείο αυτό θα αποκτά περιεχόμενο με τη βοήθεια της JavaScript και του DOM, ανάλογα με την εκάστοτε επιλογή στο μενού.

Πηγαίος κώδικας 21: Το φύλλο στυλ της προσαρμοστικής ιστοσελίδας
Το αρχείο του φύλλου στυλ ξεκινά με ένα σχόλιο στις γραμμές 1-3 και τη δήλωση της κωδικοποίησης χαρακτήρων στη γραμμή 5. Στις γραμμές 7, 20, 33 και 45 υπάρχουν τέσσερα ερωτήματα μέσων (media query). Κάθε τέτοια δήλωση αποτελείται από τμήματα τα οποία αφορούν το μέσο προβολής της ιστοσελίδας και κανόνες για τις διαστάσεις του μέσου αυτού. Έτσι στο παράδειγμά μας ορίζουμε τέσσερις κανόνες που θα ισχύουν για κάθε μέσο (οθόνη, εκτυπωτής, κ.λπ.), ομαδοποιώντας διαφορετικά σύνολα κανόνων μορφοποίησης ανάλογα με το πλάτος του παραθύρου του μέσου.

| Ερώτημα μέσου                                                                                                                                          | Περιγραφή                                                                                                                                                                                                                                                            |
|--------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| @media all and ( min-width : 1201px) { img  { width :50px; height margin :10px; vertical-align :middle;  } ul li  { margin : 10px; display :inline;  } | Για κάθε μέσο πλάτους 1201px ή μεγαλύτερου: Ορίζουμε το πλάτος εικόνας στα 50px και το ύψος  της στα 50px, με περιθώριο 10px και στοίχιση του  κειμένου στο μέσο του ύψους της εικόνας. Κάθε στοιχείο του μενού θα έχει περιθώριο 10px  και θα προβάλλεται σε σειρά. |
| @media  all  and ( min-width : 901px) and  ( max-width : 1200px) { img  { width :30px; height margin :4px; vertical-align :middle; }                   | Για κάθε μέσο πλάτους μεταξύ 901px και 1200px: Ορίζουμε το πλάτος εικόνας στα 30px και το ύψος  της στα 30px, με περιθώριο 4px και στοίχιση του  κειμένου στο μέσο του ύψους της εικόνας.                                                                            |

```
@media all and ( min-width :351px) and ( max-width : 900px) { img { width :30px; height margin :1px; } ul li { margin : 1px; display :block; } } Για κάθε μέσο πλάτους μεταξύ 351px και 900px: Ορίζουμε το πλάτος εικόνας στα 30px και το ύψος της στα 30px, με περιθώριο 1px. Κάθε στοιχείο του μενού θα έχει περιθώριο 4px και θα προβάλλεται ως μπλοκ. @media all and ( max-width : 350px){ img { width:20px; height:20px; margin:1px; } ul li { margin : 1px; display :inline; } h1 { font-size: 1.5em; } p { font-size: 0.7em; } span { display :none; } } Για κάθε μέσο πλάτους 350px ή μικρότερου: Ορίζουμε το πλάτος εικόνας στα 20px και το ύψος της στα 20px, με περιθώριο 1px. Κάθε στοιχείο του μενού θα έχει περιθώριο 1px και θα προβάλλεται σε σειρά. Οι επικεφαλίδα h1 θα προβάλλεται με μέγεθος χαρακτήρων 1.5em, ενώ το κείμενο των παραγράφων με μέγεθος χαρακτήρων 0.7em. Το περιεχόμενο των ενοτήτων σε σειρά (span) δεν θα προβάλλεται.
```

Πηγαίος κώδικας 22: Ο κώδικας JavaScript για τη διαχείριση των γεγονότων κλικ
Στο αρχείο κώδικα JavaScript μετά από ένα εισαγωγικό σχόλιο στις γραμμές 1-4 υπάρχει ο ορισμός έξι λειτουργιών (function), μία για το χειρισμό του γεγονότος κλικ κάθε επιλογής του μενού. Κάθε υπορουτίνα εκμεταλλεύεται την ιεραρχία αντικειμένων DOM έτσι ώστε επιλέγοντας, μέσω του αντικειμένου document, το στοιχείο div της ιστοσελίδας από την τιμή της ταυτότητάς του (getElementById), να του αλλάζει το περιεχόμενο, αναθέτοντάς του νέο περιεχόμενο μέσω της ιδιότητας innerHTML. Το νέο περιεχόμενο είναι ένα διαφορετικό σύνολο υπερσυνδέσμων ανάλογα με το στοιχείο του μενού που πατήθηκε και άρα ανάλογα με τη ρουτίνα που καλείται κάθε φορά.

Εικόνα 28: Η Εφαρμογή 16 σε παράθυρο φυλλομετρητή μεσαίου μεγέθους
Εικόνα 29: Η Εφαρμογή 16 σε παράθυρα φυλλομετρητή μικρού και πολύ μικρού μεγέθους

Ήχοι
Δελησταύρου Κωνσταντίνος. (2015). Drum and Base 1 [MP3]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://users.sch.gr/delistavrou/.dimiourgies/sounds/
Συγγραφική Ομάδα Magic Book 2, & Μπήτρος Ιωάννης (δημιουργός). (χ.χ. 1 ). Φωτόδεντρο: Audiotext - The ant and the cricket: It's summer! [MP3]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://photodentro.edu.gr/lor/r/8521/7145

Βίντεο
Δελησταύρου Κωνσταντίνος. (2015). Objects Animation 1 [MP4]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://users.sch.gr/delistavrou/.dimiourgies/animation/
Μπαϊράμης Δημήτρης (δημιουργός). (2014). Φωτόδεντρο: Αποθήκευση στο σύννεφο και ενσωμάτωση αρχείου σε ιστολόγιο. [MP4]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http:// photodentro.edu.gr/ugc/r/8525/387
Σύβακα Τριανταφυλλιά (δημιουργός). (2015). Φωτόδεντρο: Les voyages d'Ulysse [MP4]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://photodentro.edu.gr/ugc/handle/8525/526

Εφαρμογή Adobe Flash
Ηλίας Σιτσανλής (δημιουργός). (2015). Φωτόδεντρο: Μουσικά όργανα και οι ήχοι τους [Adobe Flash (SWF)]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://photodentro.edu.gr/ lor/r/8521/7997

Εικόνες (φωτογραφίες, γραφικά)
Δελησταύρου Κωνσταντίνος. (2015). Φωτογραφίες παραλίας, θάλασσας, άμμου, γραφικό pizza [JPG, PNG]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://users.sch.gr/delistavrou/. dimiourgies/images/
Τάταρης Γιώργος (δημιουργός). (2014). Φωτόδεντρο: Ελλάδα: 9 Δισδιάστατοι Χάρτες Αν -θρωπο-Γεωγραφίας [PNG]. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://photodentro.edu. gr/lor/r/8521/5086
UNESCO: Σημαίες χωρών (από διάφορες ιστοσελίδες) . (χ.χ.). [GIF]. Ανακτήθηκαν 12 Σεπτεμβρίου 2015, από http://en.unesco.org/countries

Κείμενα
Απόσπασμα από την ενότητα '1.7 Επίλυση Τριγώνου'. (1998). Στο Ανδρεαδάκης Σ., Κατσαργύρης Β., Παπασταυρίδης Σ., Πολύζος Γ., & Σβέρκος Α., ΑΛΓΕΒΡΑ Β' ΓΕΝΙΚΟΥ ΛΥΚΕΙΟΥ (Υπουργείο Εθνικής Παιδείας και Θρησκευμάτων, Παιδαγωγικό Ινστιτούτο). Αθήνα: Οργανισμός Εκδόσεων Διδακτικών Βιβλίων.
Το βιβλίο αυτό είναι διαθέσιμο σε ηλεκτρονική μορφή από τον ιστότοπο "Ψηφιακό Σχολείο: Διαδραστικά Σχολικά Βιβλία". Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://ebooks.edu.gr/ modules/ebook/show.php/DSEPAL-B107/302/2096,7495/

Γιώργος Σαραντάρης (Ποιήματα, τόμ. 5, Gutenberg). (χ.χ.). 'Ξυπνάμε και η θάλασσα ξυπνά μαζί μας' ποίημα από την Ενότητα 1. Στο Ευριπίδης Γαραντούδης, Σοφία Χατζηδημητρίου, & Θεοδώρα Μέντη, Κείμενα Νεοελληνικής Λογοτεχνίας (Β Γυμνασίου) - Ηλεκτρονικό Βιβλίο (Υπουργείο Εθνικής Παιδείας και Θρησκευμάτων, Παιδαγωγικό Ινστιτούτο). Αθήνα: Οργανισμός Εκδόσεων Διδακτικών Βιβλίων.
Το βιβλίο αυτό είναι διαθέσιμο σε ηλεκτρονική μορφή από τον ιστότοπο "Ψηφιακό Σχολείο: Διαδραστικά Σχολικά Βιβλία". Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://ebooks.edu.gr/ modules/ebook/show.php/DSGL105/227/1664,5259/

Μαργαρίτα Λυμπεράκη (Τα ψάθινα καπέλα, Εκδόσεις Καστανιώτη). (χ.χ.). 'Οι Κυριακές στη θάλασσα' Απόσπασμα της Ενότητας 3 από το μυθιστόρημα 'Τα ψάθινα καπέλα'. Στο Ευριπίδης Γαραντούδης, Σοφία Χατζηδημητρίου, & Θεοδώρα Μέντη, Κείμενα Νεοελληνικής Λογοτεχνίας (Β Γυμνασίου) - Ηλεκτρονικό Βιβλίο (Υπουργείο Εθνικής Παιδείας και Θρησκευμάτων, Παιδαγωγικό Ινστιτούτο). Αθήνα: Οργανισμός Εκδόσεων Διδακτικών Βιβλίων.
Το βιβλίο αυτό είναι διαθέσιμο σε ηλεκτρονική μορφή από τον ιστότοπο "Ψηφιακό Σχολείο: Διαδραστικά Σχολικά Βιβλία". Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://ebooks.edu.gr/ modules/ebook/show.php/DSGL105/227/1666,5272/

Πανελλήνιο Σχολικό Δίκτυο: Υπηρεσίες. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://www.sch.gr/2010-04-06-10-06-41
JavaScript. (2015, Σεπτέμβριος 5). Στο Wikipedia, the free encyclopedia. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https://en.wikipedia.org/w/index.php?title=JavaScript&old id=679570156
JavaServer Pages. (2015, Αύγουστος 12). Στο Wikipedia, the free encyclopedia . Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https://en.wikipedia.org/w/index.php?title=JavaServer\_ Pages&oldid=675704976
Perl. (2015, Σεπτέμβριος 11). Στο Wikipedia, the free encyclopedia. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https://en.wikipedia.org/w/index.php?title=Perl&oldid=680495604

PHP. (2015, Σεπτέμβριος 13). Στο Wikipedia, the free encyclopedia. Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https://en.wikipedia.org/w/index.php?title=PHP&oldid=680781751
Rexx. (2015, Αύγουστος 10). Στο Wikipedia, the free encyclopedia . Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https://en.wikipedia.org/w/index.php?title=Rexx&oldid=675420309
Πηγές τεχνικών και επίλυσης προβλημάτων κωδικοποίησης HTML, CSS και JavaScript
CSS-Tricks. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https://css-tricks.com/
Dive Into HTML5. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://diveintohtml5.info/

Learn to code | Codecademy. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https://www. codecademy.com/
Mozilla Developer Network. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από https:// developer.mozilla.org/el/
RyPress - Quality Software Tutorials. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http:// rypress.com/
Stack Overflow. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://stackoverflow.com/
Tutorialsοpoint. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http://www.tutorialspoint. com/
W3Schools Online Web Tutorials. (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http:// www.w3schools.com/

World Wide Web Consortium (W3C). (χ.χ.). Ανακτήθηκε 12 Σεπτεμβρίου 2015, από http:// www.w3.org/

Μέρος B'

Συστήματα Διαχείρισης Περιεχομένου (CMS)
Διαχείριση Ιστότοπου με το WordPress

Χρήσιμοι Όροι

| CMS                     | Προκύπτει από τα αρχικά των λέξεων  C ontent  M anagement  S ystem, δηλ. Σύστημα Διαχείρισης Περιεχομένου. Ένα τέτοιο σύ- στημα μπορεί να χαρακτηριστεί και το WordPress.                                                                                            |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Browser ή Φυλλομετρητής | Το πρόγραμμα περιήγησης στο Internet, π.χ. Internet Explorer,  Mozilla Firefox, Google Chrome, Safari, Opera κ.ά.                                                                                                                                                    |
| Frontend                | Ο ιστότοπος όπως δημοσιεύεται στο διαδίκτυο. Το κομμάτι που  είναι προσβάσιμο από όλους τους χρήστες του διαδικτύου.                                                                                                                                                 |
| Backend                 | Το κομμάτι διαχείρισης του ιστοτόπου. Έχουν πρόσβαση μόνο  εξουσιοδοτημένοι χρήστες, εισάγοντας τα απαραίτητα στοιχεία,  ώστε να γίνει η αναγνώρισή τους από το σύστημα.                                                                                             |
| URL                     | Μια διεύθυνση του διαδικτύου. Μπορεί να πρόκειται για μια δι- εύθυνση ενός άλλου ιστοτόπου, διαφορετικού του ιστοτόπου μας  ή για μια εσωτερική, μέρος του ιστοτόπου. Πολλές φορές μπορεί  να χρειαστεί να δημιουργήσουμε συνδέσμους (URL) προς μια δι- εύθυνση URL. |
| Server ή Εξυπηρετητής   | Υπολογιστής που «φιλοξενεί» τα αρχεία που αποτελούν τον ιστό- τοπο και είναι «υπεύθυνος» για τη λειτουργία και παρουσίασή του  στο διαδίκτυο.                                                                                                                        |
| Μηχανές Αναζήτησης      | Ιστότοποι εξοπλισμένοι με μηχανισμούς, κατάλληλα προγραμμα- τισμένους, ώστε να ψάχνουν τις ιστοσελίδες που βρίσκονται στο  διαδίκτυο και να τις εμφανίζουν, ανάλογα με λέξεις - κλειδιά που  εισάγουν οι χρήστες. Η πιο γνωστή μηχανή αναζήτησης είναι η  google.    |
| Template ή Theme        | Το γραφικό περιβάλλον του ιστοτόπου.                                                                                                                                                                                                                                 |
| Domain                  | Το όνομα της διεύθυνσης του ιστοτόπου.                                                                                                                                                                                                                               |

Εισαγωγή Β' μέρους
Το WordPress είναι ελεύθερο λογισμικό ανοικτού κώδικα ( http://www.wordpress.org ) και χρησιμοποιείται για τη δημιουργία δυναμικών ιστοτόπων.
Η διαμόρφωση-διαχείριση του ιστοτόπου δεν απαιτεί τεχνικές γνώσεις από τον μαθητή, ενώ το μόνο που χρειάζεται είναι ένας φυλλομετρητής Διαδικτύου (web browser) όπως ο Chrome ή ο Firefox.
Οι σημειώσεις που ακολουθούν έχουν γίνει για να καλύψουν τις ανάγκες διαχείρισης ενός ιστοτόπου που έχει δημιουργηθεί, ή πρόκειται να δημιουργηθεί, με το WordPress (τρέχουσα έκδοση 4.3.x). Με το WordPress μπορείτε να δημιουργήσετε έναν ιστότοπο που έχει σχέση με τις σχολικές δραστηριότητες (λ.χ. ιστότοπος παρουσίασης των δράσεων του σχολείου ή της τάξης) αλλά ταυτόχρονα μπορείτε να δημιουργήσετε και ιστοτόπους για οργανισμούς, φορείς και επιχειρήσεις.

Εναλλακτικά οι σημειώσεις μπορούν να χρησιμοποιηθούν για τη δημιουργία και διαχείριση ιστολογίου μέσω της υπηρεσίας ιστολογίων (htttp://blogs.sch.gr) του Πανελληνίου Σχολικού Δικτύου που χρησιμοποιεί μια παραμετροποιημένη έκδοση του WordPress.

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

Λέξεις Κλειδιά
Ιστότοπος, WordPress, Σύστημα Διαχείρισης Περιεχομένου, πίνακας ελέγχου, άρθρο, σελίδα, κειμενογράφος, κατηγορίες, ετικέτες, κεφαλίδα, υποσέλιδο, θέμα εμφάνισης, σχόλια, πρόσθετα, μικροεφαρμογές, όνομα χώρου

1 Πρόσβαση στη διαχείριση
H διαχείριση του ιστοτόπου γίνεται μετά από την είσοδό μας στο διαχειριστικό περιβάλλον. Για την είσοδο στο διαχειριστικό περιβάλλον θα πρέπει να γνωρίζουμε το όνομα χρήστη-διαχειριστή και το αντίστοιχο συνθηματικό. Επίσης θα πρέπει να γνωρίζουμε και τη διεύθυνση της σελίδας διαχείρισης. Αυτή συνήθως βρίσκεται στη διεύθυνση: http://www.onoma-website.gr/ wp-admin όπου το onoma-website.gr θα πρέπει να αντικατασταθεί από το πραγματικό όνομα (domain name) του ιστοτόπου σας.

Αφού συλλέξουμε τα παραπάνω στοιχεία, τα βήματα για τη διαχείριση του ιστοτόπου σας είναι τα εξής:
- 1. Ανοίξτε την ιστοσελίδα διαχείρισης του ιστοτόπου μέσω ενός φυλλομετρητή (web browser) - (Εικόνα 30)
- 2. Στη φόρμα εισόδου, που εμφανίζεται, χρησιμοποιήστε το όνομα χρήστη (username) και το συνθηματικό (password), που σας έχουν ήδη δοθεί και κάνετε Σύνδεση .
Εικόνα 30: Είσοδος στη διαχείριση

1.1 Πίνακας ελέγχου - Αρχική σελίδα διαχείρισης
Η πρώτη οθόνη, που συναντάτε με την είσοδό σας στο διαχειριστικό περιβάλλον, έχει την ακόλουθη μορφή:
Εικόνα 31: Αρχική σελίδα διαχείρισης
Η κύρια περιοχή του πίνακα ελέγχου (dashboard) περιλαμβάνει περιοχές όπως: Καλώς ήρθατε στο WordPress, Ενημέρωση για το περιεχόμενο του ιστοτόπου ( περιοχή Με μια ματιά ), περιοχή πρόσφατης δραστηριότητας, Γρήγορο Πρόχειρο, Νέα του WordPress κ.ά.
Αυτές οι περιοχές μπορούν να μεταφερθούν με αριστερό κλικ και σύρσιμο και να κρυφτεί το περιεχόμενό τους με κλικ στο βελάκι, δίπλα στον τίτλο τους.

Ο πιο εύκολος τρόπος , για να ξεκινήσετε , είναι να ακολουθήσετε τα βήματα της περιοχής «Καλώς ήρθατε στο WordPress! ".
-  Περιοχή «Καλώς ήρθατε στο WordPress!"» . Σε αυτήν υπάρχουν όλα τα βήματα, που πρέπει να ακολουθήσετε ως νέος χρήστης της υπηρεσίας, για να διαμορφώσετε τον ιστότοπό σας και να αρχίσετε να καταχωρείτε δεδομένα. Έτσι σας παρέχονται άμεσοι σύνδεσμοι για προσαρμογή της εμφάνισής του, συγγραφή άρθρου κ.ά.
-  Περιοχή «Με μια ματιά» . Παρέχει μια γρήγορη περίληψη του αριθμού άρθρων, σελίδων, σχολίων, ετικετών και κατηγοριών του ιστοτόπου σας. Κάνοντας κλικ σε έναν σύνδεσμο, μεταφέρεστε στη συγκεκριμένη περιοχή στο διαχειριστικό σας περιβάλλον.

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

Επιπλέον υπάρχει ένα μενού γρήγορης Προσθήκης στο επάνω μέρος του διαχειριστικού σας περιβάλλοντος, το οποίο μπορείτε να χρησιμοποιήσετε, για να προσθέσετε νέο άρθρο, αρχείο, σελίδα ή χρήστη στον ιστότοπό σας.
Εικόνα 32: Κάθετο μενού πλοήγησης

1.3 Επιλογές Προβολής διαχειριστικών σελίδων
Το «Επιλογές Προβολής» (παρακάτω) βρίσκεται στην πάνω δεξιά πλευρά κάθε διαχειριστικής σελίδας και μπορεί να χρησιμοποιηθεί, για να προσαρμόσετε το τι εμφανίζεται και πώς στην οθόνη. Για να εμφανιστεί το περιεχόμενο της ενότητας αυτής, πατήστε τον σύνδεσμο «Επιλογές προβολής».
Ανάλογα με τη σελίδα που βρίσκεστε, έχει και διαφορετικό περιεχόμενο.
Εικόνα 33: Περιοχή «Επιλογές Προβολής»

2 Άρθρα
Ο ιστότοπος, που έχει ως βάση το WordPress, αποτελείται από δύο βασικές δομές: άρθρα και σελίδες.
Τα άρθρα είναι το βασικό συστατικό περιεχόμενο ενός ιστοτόπου και πέρα από το κείμενο μπορούν να περιέχουν εικόνες, video, συνδέσμους κ.ά., ενώ μπορούν να χαρακτηριστούν με τη βοήθεια κατηγοριών και ετικετών.
Ο ιστότοπος έχει κοινό τρόπο προβολής, με τα άρθρα να εμφανίζονται στην Αρχική Σελίδα με τα πλέον πρόσφατα στην κορυφή της (αυτό μπορείτε να το αλλάξετε μέσω της επιλογής Ρυθμίσεις t Ανάγνωση του κάθετου μενού ).

Για να διαχειριστείτε άρθρα του ιστοτόπου σας, μεταβείτε στο διαχειριστικό περιβάλλον και από το κάθετο μενού επιλέγετε «Άρθρα» . Θα εμφανιστεί σελίδα με λίστα όλων των άρθρων με 20 ανά σελίδα. Εδώ μπορείτε να τα ταξινομήσετε βάσει ημερομηνίας, κατηγορίας ή ετικέτας.
Εικόνα 34: Άρθρα t Όλα τα άρθρα
Πηγαίνοντας το ποντίκι πάνω από κάθε άρθρο βλέπετε 4 επιλογές:
- 1. Επεξεργασία , που κάνοντας κλικ ανοίγει το παράθυρο για πλήρη επεξεργασία.
- 2. Ταχυεπεξεργασία , που κάνοντας κλικ ανοίγει τη σελίδα Ταχυεπεξεργασίας επιτρέποντάς σας να διαμορφώσετε χαρακτηριστικά, όπως ο τίτλος, η κατάσταση, κωδικούς πρόσβασης, κατηγορίες, ετικέτες, σχόλια κ.ά.
- 3. Διαγραφή , που χρησιμοποιείται όταν θέλετε να διαγράψετε ένα άρθρο από τον ιστότοπό σας. Μετά τη διαγραφή ενός άρθρου αυτό μεταφέρεται στον «Κάδο», από όπου μπορείτε είτε να το ανακτήσετε είτε να το διαγράψετε οριστικά.
- 4. Προβολή , όπου μπορείτε να δείτε πώς προβάλλεται το άρθρο στον ιστότοπό σας.

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

3 Σελίδες
Οι σελίδες χρησιμοποιούνται συνήθως για συγγραφή περιγραφικών - επεξηγηματικών κειμένων, που αφορούν τον ίδιο τον ιστότοπο, π.χ. Δομή του φορέα του ιστοτόπου, στοιχεία επικοινωνίας κ.α. Κατά την προβολή του ιστοτόπου συνήθως εμφανίζονται στο πάνω οριζόντιο μενού.
Για να διαχειριστείτε τις σελίδες του ιστοτόπου σας, μεταβείτε στο διαχειριστικό περιβάλλον και από το κάθετο μενού επιλέγετε «Σελίδες t Όλες οι σελίδες» . Θα μεταβείτε σε οθόνη με λίστα όλων των σελίδων με 20 ανά σελίδα. Εδώ μπορείτε να τις ταξινομήσετε βάσει τίτλου, αριθμού σχολίων και ημερομηνίας.

Εικόνα 35: Σελίδες t Όλες οι σελίδες
Πηγαίνοντας το ποντίκι πάνω από κάθε σελίδα βλέπετε 4 επιλογές:
- 1. Επεξεργασία , που κάνοντας κλικ ανοίγει το παράθυρο για πλήρη επεξεργασία.
- 2. Ταχυεπεξεργασία , που κάνοντας κλικ ανοίγει τη σελίδα Ταχυεπεξεργασίας, επιτρέποντάς σας να διαμορφώσετε χαρακτηριστικά, όπως ο τίτλος, η κατάσταση, κωδικούς πρόσβασης, κ.α.
- 3. Διαγραφή , που την χρησιμοποιείτε, όταν θέλετε να διαγράψετε μία σελίδα από τον ιστότοπό σας. Μετά τη διαγραφή σελίδας αυτή μεταφέρεται στον «Κάδο», όπου μπορείτε είτε να την ανακτήσετε είτε να τη διαγράψετε οριστικά.
- 4. Προβολή , όπου μπορείτε να δείτε πώς προβάλλεται η σελίδα στον ιστότοπό σας.

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

4 Προσθέτοντας περιεχόμενο στον ιστότοπο
Όπως αναφέραμε παραπάνω, το βασικό περιεχόμενο ενός ιστοτόπου το αποτελούν τα άρθρα (posts) και οι σελίδες (pages). Ο τρόπος δημιουργίας τους είναι σχεδόν πανομοιότυπος. Πέρα από τη διαφορά στον τρόπο εμφάνισης τους στον ιστότοπο, που αναφέραμε σε προηγούμενη παράγραφο, η άλλη διαφορά τους είναι ότι μπορείτε να σχετίσετε Άρθρα με κατηγορίες και ετικέτες, ενώ αυτό δεν είναι δυνατόν για τις σελίδες.

4.1 Προσθήκη σελίδας
Υπάρχουν διάφοροι τρόποι, για να μεταβείτε στη σελίδα προσθήκης σελίδας:
-  Από τη σελίδα του Πίνακα ελέγχου, στην περιοχή «Καλώς ήρθατε στο WordPress!» πατώντας στο «+ Προσθέστε σελίδες».
-  Χρησιμοποιώντας το κάθετο μενού πλοήγησης: Σελίδες t Προσθήκη νέας
-  Χρησιμοποιώντας το μενού γρήγορης Προσθήκης από το πάνω μέρος της σελίδας επιλέγοντας Προσθήκη ->Σελίδας .
Εικόνα 36: Σελίδες t Νέα σελίδα
Απλά γράφετε το κείμενό σας και επιλέγετε από τα υπάρχοντα κουμπιά των γραμμών εργαλείων τη διαμόρφωση που θέλετε.

Στην πιο απλή περίπτωση συγγραφής μίας σελίδας θα πρέπει να συμπληρώσετε:
- 1. Τον τίτλο της.
- 2. Το περιεχόμενό της.
- 3. Όταν τελειώσετε, πατάτε το κουμπί Δημοσίευση .

4.2 Προσθήκη άρθρου
Υπάρχουν διάφοροι τρόποι, για να μεταβείτε στη σελίδα συγγραφής άρθρου:
-  Χρησιμοποιώντας το μενού πλοήγησης: Άρθρα t Νέο άρθρο .
-  Χρησιμοποιώντας το μενού γρήγορης Προσθήκης από το πάνω μέρος της σελίδας επιλέγοντας Προσθήκη t Άρθρου .
Ακολουθώντας έναν από τους παραπάνω τρόπους θα μεταβείτε στη σελίδα δημιουργίας/ επεξεργασίας άρθρου, όπου εμφανίζεται ένας επεξεργαστής κειμένου παραπλήσιος με το Microsoft Word καθώς και πρόσθετες επιλογές.
Απλά γράφετε το κείμενό σας και επιλέγετε από τα υπάρχοντα κουμπιά τη διαμόρφωση που θέλετε.

Στην πιο απλή περίπτωση συγγραφής ενός άρθρου θα πρέπει να συμπληρώσετε:
- 1. Τον τίτλο του.
- 2. Το περιεχόμενό του.
- 3. Όταν τελειώσετε, πατάτε το κουμπί Δημοσίευση .
Εικόνα 37: Σελίδα προσθήκης άρθρου

4.3 Χρήση κειμενογράφου για εισαγωγή περιεχομένου
Η προσθήκη περιεχομένου με τη χρήση του «Κειμενογράφου» είναι πολύ εύκολη, καθώς παρέχει τις γραμμές εργαλείων (toolbars), που σας διευκολύνουν να κάνετε έντονα ( ) ή πλάγια ( ) γράμματα, να ορίσετε λίστες ( ) κ.α. Μπορείτε ακόμη και να χρησιμοποιήσετε τις περισσότερες γνωστές συντομεύσεις πλήκτρων πχ. Ctrl+C/Cmd+C = αντιγραφή, Ctrl+X/Cmd+X = αποκοπή, Ctrl+Z/Cmd+Z = αναίρεση, κ.α
Πέρα από την καρτέλα κειμενογράφος, στην κορυφή του κειμενογράφου υπάρχουν δύο καρ-
τέλες «Κειμενογράφος» και «Κείμενο» ( ). Η καρτέλα «Κείμενο» σας επιτρέπει να εισάγετε HTML κώδικα. Για τους έμπειρους σε HTML μπορεί να είναι χρήσιμο, αλλά για όσους δεν γνωρίζουν HTML δεν συνιστάται η χρήση της.

Όταν δημιουργείτε μία νέα σελίδα ή άρθρο, το πρώτο πράγμα που κάνετε είναι να γράψετε τον τίτλο της/του. Στη συνέχεια κάνοντας κλικ μέσα στον κειμενογράφο, θα εμφανιστεί κάτω από το πλαίσιο του τίτλου ο Μόνιμος σύνδεσμος ( Permalink ) της σελίδας/άρθρου. Ο μόνιμος σύνδεσμος είναι ουσιαστικά το URL της δεδομένης σελίδας/άρθρου και προκύπτει αυτόματα από τον τίτλο.
Μπορείτε να τον αλλάξετε σε κάτι πιο σύντομο πατώντας το κουμπί Επεξεργασία , που υπάρχει δίπλα από αυτόν.
Εικόνα 38: Αλλαγή μόνιμου συνδέσμου

Αφού τον αλλάξετε, πατήστε το κουμπί Εντάξει , για να αποθηκευτεί η αλλαγή σας. Εναλλακτικά μπορείτε να κάνετε τις απαιτούμενες ρυθμίσεις μέσω του μενού Ρυθμίσεις t Μόνιμοι σύνδεσμοι , ώστε αυτοί να μην προκύπτουν από τον τίτλο αλλά με διαφορετικό τρόπο.
Για να μορφοποιήσετε κατάλληλα το κείμενό σας υπάρχουν στη γραμμή εργαλείων διάφορα εργαλεία -κουμπιά. Αν μάλιστα πατήσετε το κουμπί εναλλαγής ( ), θα εμφανιστεί και δεύτερη γραμμή εργαλείων. Παρακάτω παρουσιάζονται τα εργαλεία που μπορείτε να χρησιμοποιήσετε στη μορφοποίηση του κειμένου σας.

Προσθήκη πολυμέσων - Χρησιμοποιείται για τη μεταφόρτωση και εισαγωγή πολυμέσων όπως εικόνες, ήχοι, βίντεο ή έγγραφα
Έντονα - Έντονη γραφή Πλάγια - Πλάγια γραφή Διαγραμμένα - Προσθήκη γραμμής διαγραφής στο κείμενο Λίστα με κουκίδες - Δημιουργία λίστας με κουκίδες Αριθμητική λίστα - Δημιουργία αριθμητικής λίστας
Παράθεμα - Ένας τρόπος να δείξουμε ένα απόσπασμα κειμένου.
Οριζόντια γραμμή -Εισαγωγή οριζόντιας γραμμής στο κείμενό σας.
Στοίχιση αριστερά - Στοίχιση κειμένου στα αριστερά
Στοίχιση στο κέντρο- Στοίχιση κειμένου στο κέντρο της σελίδας

Στοίχιση δεξιά - Στοίχιση κειμένου στα δεξιά
Εισαγωγή/Επεξεργασία συνδέσμου -Δημιουργία συνδέσμου σε άλλη σελίδα ή ιστότοπο. Το κείμενο ή η εικόνα που θα περιλαμβάνει το σύνδεσμο, θα πρέπει να έχει επιλεγεί πριν την επιλογή του κουμπιού.
Αφαίρεση συνδέσμου - Αφαίρεση του συνδέσμου από το επιλεγμένο κείμενο ή εικόνα. Ο δείκτης του ποντικιού πρέπει να βρίσκεται πάνω σε ενεργό σύνδεσμο για να ενεργοποιηθεί το κουμπί της αφαίρεσης.
Εισαγωγή σήμανσης Διαβάστε περισσότερα - Εισάγει σε ένα επιλεγμένο σημείο της σελίδας ή του άρθρου μια ειδική σήμανση (Διαβάστε περισσότερα). Με τον τρόπο αυτό, η σελίδα (ή το άρθρο) δεν εμφανίζεται ολόκληρη αλλά ορατό είναι μόνο το τμήμα εκείνο που προηγείται της σήμανσης. Για να εμφανιστεί ολόκληρη η σελίδα ή το άρθρο θα πρέπει να πατήσετε την επιλογή "Διαβάστε περισσότερα".

Εναλλαγή γραμμής εργαλείων -Χρησιμοποιείται για εμφάνιση/ απόκρυψη της δεύτερης σειράς της γραμμής εργαλείων με πρόσθετα κουμπιά - εργαλεία.
Κατάσταση Αναπόσπαστης γραφής -Μεταφορά σε κατάσταση αποκλειστικής ενασχόλησης με τον κειμενογράφο, με απομάκρυνση των επιλογών που υπάρχουν εκτός των ορίων του. Επανερχόμαστε στην προηγούμενη κατάσταση αν επιλέξουμε πάλι το ίδιο κουμπί.
Παράγραφος - Χρησιμοποιείται για τη μορφοποίηση του κειμένου με βάση προκαθορισμένα στυλ.
Υπογραμμισμένα - Υπογράμμιση του κειμένου

Στοίχιση - Πλήρης στοίχιση κειμένου (και από αριστερά και από δεξιά).
Χρώμα κειμένου - Χρησιμοποιείται αν θέλουμε να αλλάξουμε το χρώμα του κειμένου
Επικόλληση ως κείμενο - Η αντιγραφή και επικόλληση από άλλες ιστοσελίδες ή επεξεργαστές κειμένου μεταφέρει, αρκετές φορές, το κείμενο μορφοποιημένο με διαφορετικό τρόπο από αυτόν που περιμένουμε. Για να αποφύγουμε τέτοιου είδους μορφοποιήσεις υπάρχει η Επικόλληση ως κείμενο που αφαιρεί όλες τις μορφοποιήσεις και μεταφέρει "καθαρό" κείμενο. Η επιλογή αυτή λειτουργεί ως διακόπτης, παραμένει δηλαδή ενεργή έως ότου την απενεργοποιήσουμε επιλέγοντας πάλι το κουμπί ή αποθηκεύσουμε το περιεχόμενο της καταχώρησης.

Αφαίρεση μορφοποίησης -Χρησιμοποιείται για την αφαίρεση όλων των μορφοποιήσεων (λ.χ. Έντονα, Πλάγια, Χρώμα κειμένου
κ.α.) από το επιλεγμένο κείμενο.
Ειδικός χαρακτήρας - Χρησιμοποιείται για την εισαγωγή ειδικών χαρακτήρων που είτε δεν είναι εύκολο είτε δεν μπορούν να βρεθούν στο πληκτρολόγιο (λ.χ.. ¼, ½, ¾, ©, €, ö κ.α.)
Μείωση κενού - Μείωση εσοχής κατά ένα επίπεδο
Αύξηση κενού - Αύξηση εσοχής κατά ένα επίπεδο
Αναίρεση - Ακύρωση της τελευταίας ενέργειας
Επαναφορά - Επαναφορά της τελευταίας ενέργειας

Συντομεύσεις πληκτρολογίου - Εμφανίζει συντομεύσεις πληκτρολογίου για τον κειμενογράφο
Κειμενογράφος/Κείμενο -Εναλλαγή μεταξύ του Κειμενογράφου και του συντάκτη κειμένου σε HTML.

4.4 Προσθήκη κατηγορίας / ετικέτας σε άρθρο
Τόσο οι κατηγορίες όσο και οι ετικέτες χρησιμεύουν στο να διευκολύνουν τους επισκέπτες του ιστοτόπου σας να βρίσκουν αυτό που ψάχνουν και να πλοηγούνται πιο εύκολα. Όπως προαναφέρθηκε, μπορείτε να προσθέσετε κατηγορίες και ετικέτες μόνο σε άρθρα και όχι σε σελίδες.
Αν σκεφτούμε τον ιστότοπό ως ένα βιβλίο, η διαφορά μεταξύ κατηγοριών και ετικετών είναι η παρακάτω:
-  Οι κατηγορίες είναι όπως τα κεφάλαια ενός βιβλίου που εντάσσουν τα άρθρα σε επιμέρους ενότητες. Συνήθως είναι περιγραφικές (άνω των δύο λέξεων), ώστε ο αναγνώστης να καταλαβαίνει το αντικείμενο των άρθρων της κατηγορίας, που πρόκειται να διαβάσει. Παράδειγμα κατηγορίας άρθρων είναι Βασικές γνώσεις τριγωνομετρίας .
-  Οι ετικέτες είναι σαν τους όρους ευρετηρίου που βρίσκουμε στο πίσω μέρος ενός βιβλίου και καθοδηγούν τον αναγνώστη βάσει λέξεων για την εύρεση κατάλληλων άρθρων. Σε αντίθεση με τις κατηγορίες, που συνήθως περιέχουν αρκετά άρθρα, σε μία ετικέτα μπορεί να αντιστοιχεί μόνο ένα άρθρο. Παράδειγμα ετικέτας είναι τριγωνομε -τρικός κύκλος .

Όμως στον ιστότοπό μας (σε αντίθεση με το βιβλίο) ένα άρθρο μπορεί να ανήκει σε περισσότερες από μία κατηγορίες και να έχει περισσότερες από μία ετικέτες.
Κατηγορίες προσθέτετε κατά τη συγγραφή άρθρου μέσω της περιοχής « Κατηγορίες » είτε:
-  Κάνοντας κλικ στο «+ Προσθήκη Κατηγορίας» της ενότητας. Θα εμφανιστεί ένα πλαίσιο κειμένου, όπου γράφετε το όνομα της νέας κατηγορίας και στη συνέχεια κάντε κλικ στο κουμπί Προσθήκη κατηγορίας .
-  Επιλέγοντας μια από τις ήδη υπάρχουσες κατηγορίες της ενότητας αυτής (Λ.χ. Ανακοινώσεις).

Οι ετικέτες εμφανίζονται στον ιστότοπό σας με τη χρήση της αντίστοιχης μικροεφαρμογής (widget) ως ένα σύννεφο από λέξεις. Κάνοντας κλικ σε μία ετικέτα θα εμφανιστούν τα άρθρα, που έχουν τη συγκεκριμένη ετικέτα. Οι ετικέτες είναι συνήθως σύντομες- μία ή δύο λέξειςκαι είναι λέξεις-κλειδιά.
Ετικέτες προσθέτετε, όταν γράφετε ένα άρθρο μέσω της περιοχής « Ετικέτες », πληκτρολογώντας τις λέξεις-κλειδιά, που θέλετε και κάνοντας κλικ στην επιλογή « Προσθήκη ». Κάθε ετικέτα πρέπει να είναι διαχωρισμένη με κόμμα, για να γίνεται αντιληπτή από το σύστημα. Για να αφαιρέσετε μια ετικέτα από ένα μήνυμα, απλά πατήστε το X στα αριστερά αυτής της ετικέτας.

Συμβουλή: Μετά την προσθήκη ενός ή περισσοτέρων άρθρων σε μία ή περισσότερες κατηγο -ρίες ή ετικέτες είναι σκόπιμο να τις προβάλλετε και στον ιστότοπό σας με τη χρήση σχετικών μικροεφαρμογών (widgets), ώστε να διευκολύνετε τους επισκέπτες σας.

4.5 Προσθήκη συνδέσμων σε άρθρο
Η εισαγωγή συνδέσμων σε άρθρα του ιστοτόπου σας είναι μία σημαντική δυνατότητα, αφού δίνει τη δυνατότητα στον αναγνώστη να μεταβαίνει εύκολα και γρήγορα στις αναφορές σας. Για να εισάγετε έναν υπέρ-σύνδεσμο σε άρθρο, κάντε τα παρακάτω:
- 1. Κατά τη συγγραφή άρθρου επιλέγετε το κείμενο, που θέλετε να συνδέσετε με τον σύνδεσμο που έχετε αντιγράψει, και πατάτε Εισαγωγή/επεξεργασία συνδέσμου στα εργαλεία επεξεργασίας κειμένου.
Εικόνα 39: Εισαγωγή συνδέσμου (1) σε άρθρο
- 2. Στο παράθυρο που θα εμφανιστεί:
-  ορίζετε το URL του συνδέσμου,
-  ορίζετε το κείμενο του συνδέσμου,
-  επιλέγετε, αν θέλετε, «Άνοιγμα συνδέσμου σε νέο παράθυρο/καρτέλα».

Εναλλακτικά μπορείτε να επιλέξετε ως σύνδεσμο κάποιο από τα υπάρχοντα άρθρα/σελίδες σας.
- 3. Τέλος πατάτε το κουμπί Προσθήκη συνδέσμου .
Εικόνα 40: Εισαγωγή συνδέσμου (2) σε άρθρο

4.6 Εισαγωγή Αρχείων
Πέρα από εικόνες μπορείτε να εισάγετε και άλλου είδους αρχεία σε σελίδα/άρθρο. Επιτρεπόμενοι τύποι αρχείων, που μπορείτε να ανεβάσετε, είναι οι παρακάτω:
-  Αρχεία ήχου-video:
-  .mp4, .m4v (MPEG-4)
- .mov (QuickTime)
-  .wmv (Windows Media Video)
- .avi
-  .mpg
- .ogv (Ogg)
-  .3gp (3GPP)
- .3g2 (3GPP2)
-  .mp3
- .m4a
-  .ogg
- .wav
-  .flv
-  Αρχεία εικόνων:
-  .jpg
- .jpeg
-  .png
- .gif
-  Έγγραφα:
-  .pdf (Portable Document Format; Adobe Acrobat)
- .doc, .docx (Microsoft Word Document)
-  .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
- .odt (OpenDocument Text Document)
-  .xls, .xlsx (Microsoft Excel Document)
-  Άλλου είδους: zip

Επιτρεπόμενο μεγέθους αρχείου: Μπορείτε να ανεβάσετε ένα αρχείο έως 20 ΜΒ.
Συνολικά διαθέσιμος χώρος για αρχεία στον ιστότοπο: Ο διαθέσιμος χώρος εξαρτάται από το πακέτο φιλοξενίας (hosting) στο υπολογιστικό κέντρο όπου φιλοξενείται ο ιστότοπος.

4.6.1 Εισαγωγή αρχείου σε άρθρο/σελίδα
Για την εισαγωγή αρχείου σε άρθρο/σελίδα, κατά τη συγγραφή του άρθρου/σελίδας πατήστε το κουμπί Προσθήκη πολυμέσων ( ).
Η διαδικασία είναι πανομοιότυπη με τη διαδικασία εισαγωγής εικόνας, που περιγράφεται στην επόμενη παράγραφο, με τη διαφορά ότι η εισαγωγή αρχείων εισάγει έναν σύνδεσμο στο κείμενο σας για το ζητούμενο αρχείο.
Κατά την προβολή του άρθρου/σελίδας στον ιστότοπό σας, πατώντας στον σύνδεσμο το αρχείο ανοίγει σε έναν άλλο φυλλομετρητή ή κατεβαίνει στον υπολογιστή σας από το διαδίκτυο.

4.7 Εισαγωγή αρχείων εικόνων και άλλων πολυμέσων σε σελίδα/ άρθρο
Η προσθήκη εικόνων και άλλων αρχείων (λ.χ. .pdf) είναι εύκολη. Όλες οι εικόνες σας και τα υπόλοιπα πολυμέσα αποθηκεύονται στη Βιβλιοθήκη Πολυμέσων. Μετά το ανέβασμα στη Βιβλιοθήκη Πολυμέσων ενός αρχείο είναι απλή η εισαγωγή του σε μία σελίδα ή άρθρο.

4.7.1 Εισαγωγή εικόνας από τον υπολογιστή σας
Για την εισαγωγή εικόνας σε άρθρο/σελίδα, κατά τη συγγραφή του άρθρου/σελίδας πατήστε το κουμπί Προσθήκη πολυμέσων ( ).
Για ανέβασμα από τον υπολογιστή στο παράθυρο, που θα εμφανιστεί, επιλέξτε «Μεταφόρτωση πολυμέσων». Στη συνέχεια μπορείτε να σύρετε αρχεία ή να πατήστε το κουμπί «Επιλογή Αρχείων» και να επιλέξτε το/τα αρχείο/α που θέλετε.
Εικόνα 41: Ανέβασμα αρχείου
Το αρχείο με την επιλογή «Άνοιγμα» αρχίζει να ανεβαίνει και σε περίπτωση που είναι μεγάλο, θα βλέπετε μια μπάρα εξέλιξης της διαδικασίας. Μετά το ανέβασμα της εικόνας, θα εμφανιστεί το παράθυρο της βιβλιοθήκης πολυμέσων μαζί με τα υπόλοιπα αρχεία, που τυχόν έχετε ανεβάσει.

Εικόνα 42: Επιλεγμένη εικόνα
Οι ιδιότητες της επιλεγμένης εικόνας εμφανίζονται στη δεξιά πλευρά.
-  Τίτλος -εμφανίζεται ως αναδυόμενο κείμενο, όταν ο δείκτης του ποντικιού περνάει πάνω από την εικόνα κατά την προβολή του άρθρου/σελίδας.
-  Λεζάντα - εμφανίζεται κάτω από την εικόνα. Μπορείτε να προσθέσετε και HTML.
-  Εναλλακτικό κείμενο- εμφανίζεται σε περίπτωση που ο φυλλομετρητής δεν μπορεί να εμφανίσει την εικόνα. Επίσης χρησιμοποιείται από αναγνώστες (screen readers) οθόνης για τα άτομα με προβλήματα όρασης και από τις μηχανές αναζήτησης.
-  Περιγραφή - συνήθως εμφανίζεται στη σελίδα συνημμένου πολυμέσου, όμως εξαρτάται από το θέμα εμφάνισης που χρησιμοποιείτε.

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

5 Άλλες ρυθμίσεις άρθρων /σελίδων

5.1 Προγραμματισμός άρθρου/σελίδας
Μπορείτε να γράψετε ένα άρθρο/σελίδα και να προγραμματίσετε να δημοσιευτεί μεταγενέστερα είτε πρόκειται για λίγες ημέρες ή εβδομάδες. Η διαδικασία είναι απλή:
- 1. Αφού ολοκληρώσετε τη συγγραφή του άρθρου σας, κάνετε κλικ στο σύνδεσμο Αλλαγή δίπλα στην επιλογή « Δημοσίευση άμεσα » στο πλαίσιο «Δημοσίευση».
- 2. Εισάγετε την ημερομηνία και την ώρα, που θέλετε να δημοσιευτεί το μήνυμα.
- 3. Κάνετε κλικ στο « Εντάξει ». Το κουμπί «Δημοσίευση» θα αλλάξει σε «Προγραμματισμός».
- 4. Κάνετε κλικ στο κουμπί Προγραμματισμός .

Το άρθρο σας θα είναι τώρα σε κράτηση μέχρι την ώρα και ημερομηνία που έχετε ορίσει και θα εμφανιστεί αυτόματα στον ιστότοπό σας, τη δεδομένη μέρα και ώρα. Μπορείτε επίσης να χρησιμοποιήσετε αυτή τη μέθοδο, για να αλλάξετε την ώρα και ημερομηνία σε υπάρχοντα άρθρα.
Εικόνα 43: Χρονοπρογραμματισμός άρθρου

5.2 Προστασία άρθρου/σελίδας με κωδικό πρόσβασης
Υπάρχουν περιπτώσεις όπου γράφετε ένα άρθρο/σελίδα και θέλετε να έχουν πρόσβαση μόνο κάποιοι αναγνώστες, που διαθέτουν έναν συγκεκριμένο κωδικό. Για παράδειγμα, το μήνυμα μπορεί να περιέχει εργασίες ή τις φωτογραφίες που θέλετε να μοιραστείτε με τους συνεργάτες σας. Για να ορίσετε κωδικό πρόσβασης, ακολουθείτε τα παρακάτω βήματα:
- 1. Αφού ολοκληρώσετε τη συγγραφή του άρθρου σας, κάνετε κλικ στην Αλλαγή στην ενότητα Ορατότητα : Δημόσιο .
- 2. Επιλέξτε το Έχει συνθηματικό .
- 3. Πληκτρολογήστε τον κωδικό σας και κάντε κλικ στο Εντάξει .

Εικόνα 44: Προστασία άρθρου/σελίδας με κωδικό πρόσβασης
Πλέον το άρθρο/σελίδα προστατεύεται με τον κωδικό, που θέσατε, και μόνον όσοι δώσουν τον κωδικό που ορίσατε, μπορούν να διαβάσουν το περιεχόμενό του.

5.3 Ορισμός άρθρου στην 1 η σελίδα του ιστοτόπου
Συνήθως στην αρχική σελίδα εμφανίζονται τα τελευταία άρθρα του ιστοτόπου. Κάποιες φορές ίσως να θέλετε πέρα από αυτά να εμφανίζεται και κάποιο συγκεκριμένο, που θεωρείτε εσείς σημαντικό π.χ. άρθρο με καταληκτικές ημερομηνίες για συμμετοχή σε εκδήλωση.
Για να ορίσετε ένα άρθρο στην αρχική σελίδα σας, ακολουθείτε την εξής διαδικασία.
- 1. Αφού ολοκληρώσετε τη συγγραφή του άρθρου σας, κάνετε κλικ στο Επεξεργασία στην ενότητα Δημόσιο .
- 2. Στην επιλογή Δημόσιο μπορείτε επίσης να κανονίσετε για μια δημοσίευση να εμφανίζεται πάντα στην πρώτη σελίδα κάνοντας τικ στην επιλογή Δημόσιο t Μόνιμα στην 1 η σελίδα .

Εικόνα 45: Ορισμός άρθρου στην 1η σελίδα
Χρήσιμη επισήμανση: Η επιλογή αυτή αναιρείται αυτόματα, αν θέσετε στις «Ρυθμίσεις t Ανάγνωση» την επιλογή «Η αρχική σελίδα δείχνει» σε κάποιο άλλο από το «Τελευταία άρ -θρα»

6 Διαχείριση αρχείων εικόνων, ήχων, video και λοιπών αρχείων
Όλα τα αρχεία που έχουν εισαχθεί στον ιστότοπό σας βρίσκονται στη «Βιβλιοθήκη πολυμέσων». Για να τα διαχειριστείτε, επιλέγετε από το κάθετο μενού πλοήγησης Πολυμέσα t Βιβλιοθήκη . Εκεί μπορείτε να τα διαχειριστείτε ή και να προσθέσετε νέα (Πολυμέσα t Νέο αρχείο).
Μπορείτε να δείτε όλα τα αντικείμενα στη Βιβλιοθήκη, αλλά και να περιορίσετε αυτά που βλέπετε φιλτράροντας με βάση το είδος τους (Όλα, Εικόνες, Ήχος, Βίντεο κ.ά.) ή την ημερομηνία τους. Επίσης μπορείτε να ψάξετε χρησιμοποιώντας λέξεις κλειδιά, για να βρείτε σχετικά αρχεία μέσω του πλαισίου «Αναζήτηση».

Εικόνα 46: Βιβλιοθήκη πολυμέσων
Στην ίδια σελίδα μπορείτε να ανεβάσετε αρχεία με την επιλογή «Νέο Αρχείο», ακολουθώντας τη διαδικασία ανεβάσματος όπως και στις εικόνες. Επίσης μπορείτε να επεξεργαστείτε, να Διαγράψετε μόνιμα και να Προβάλετε τα αρχεία σας απλά τοποθετώντας το ποντίκι πάνω στο αρχείο, για να προβληθούν οι επιλογές.

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

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

Περνώντας τον δείκτη του ποντικιού σας πάνω από κάθε σειρά της λίστας Σχολίων, εμφανίζονται σύνδεσμοι κάτω από το σχόλιο.
-  Έγκριση / Αποέγκριση - Σας επιτρέπει να εγκρίνετε την εμφάνιση του σχολίου στον ιστότοπό σας. Αν το σχόλιο είναι ήδη εγκεκριμένο, τότε αυτή η σύνδεση θα αλλάξει σε Αποέγκριση, ώστε να σταματήσετε την εμφάνισή του.
-  Απάντηση - Σας επιτρέπει να γράψετε μια απάντηση στο σχόλιο αυτό. Η απάντηση θα εμφανίζεται στον ιστότοπό σας.
-  Ταχυεπεξεργασία - Σας επιτρέπει να επεξεργαστείτε γρήγορα το όνομα του σχολιαστή, το e-mail ή το URL, καθώς και το περιεχόμενο του σχολίου.
-  Αλλαγή - Αντίστοιχο με το ταχυεπεξεργασία άλλα επίσης σας επιτρέπει να επισημάνετε το σχόλιο είτε ως Εγκεκριμένο, εν αναμονή Για έγκριση ή Ανεπιθύμητο καθώς και να αλλάξετε την ημερομηνία και ώρα υποβολής του.
-  Ιστορικό - Εμφανίζει πληροφορίες για την αλλαγή της κατάστασης του σχολίου.
-  Ανεπιθύμητο - Σας επιτρέπει να επισημάνετε το σχόλιο ως ανεπιθύμητο.
-  Διαγραφή - Σας επιτρέπει να μεταφέρετε το σχόλιο στον Κάδο. Μετά την μεταφορά του στον Κάδο, μπορείτε να το επαναφέρετε, αν το έχετε κάνει κατά λάθος ή να το διαγράψετε οριστικά.

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

8 Εμφάνιση
Οι επιλογές του μενού «Εμφάνιση» δίνουν τη δυνατότητα να αλλάξετε την εμφάνιση του ιστοτόπου σας.

8.1 Επιλογή θέματος
Η εμφάνιση ενός ιστοτόπου που έχει δημιουργηθεί με το WordPress μπορεί να τροποποιηθεί από την επιλογή «Θέματα» του μενού «Εμφάνιση». Κάθε ιστότοπος βασισμένος σε WordPress έχει ένα θέμα εμφάνισης (theme) που ελέγχει τον τρόπο παρουσίασης της πληροφορίας σε κάθε σελίδα. Υπάρχει πληθώρα διαθέσιμων θεμάτων που μπορείτε να χρησιμοποιήσετε για να αλλάξετε την προκαθορισμένη εμφάνιση του ιστοτόπου σας, τα οποία διατίθενται είτε ελεύθερα είτε με πληρωμή. Το WordPress εγκαθίσταται με έτοιμα θέματα εμφάνισης (όπως τα Twenty Thirteen, Twenty Fourteen, Twenty Fifteen) από τα οποία μπορείτε να επιλέξετε αρχικά αυτό που θα καθορίζει την εμφάνιση του ιστοτόπου σας.

Εικόνα 47: Επιλογή θέματος ιστοτόπου
Για να δείτε πως θα είναι η εμφάνιση του ιστοτόπου σας με ένα διαφορετικό θέμα από το τρέχον, απλά μετακινήστε το ποντίκι πάνω από το νέο αυτό θέμα που προτιμάτε και πατήστε το κουμπί «Ζωντανή Προεπισκόπηση». Αν σας αρέσει πατήστε «Αποθήκευση και ενεργοποίηση» και πλέον ο ιστότοπός σας έχει αλλάξει εμφάνιση.
Η ίδια διαδικασία γίνεται και απευθείας, χωρίς προεπισκόπηση, αν στη σελίδα με τα διαθέσιμα θέματα, μετακινήστε το ποντίκι πάνω από το νέο θέμα που προτιμάτε και πατήστε το κουμπί «Ενεργοποίηση».

8.2 Προσαρμογή
Μετά την επιλογή του θέματος, ακολουθεί η «Προσαρμογή» που είναι μια διαδικασία ρύθμισης μιας σειράς παραμέτρων του θέματος όπως:
-  Ο τίτλος και ο υπότιτλος του ιστοτόπου
-  Η εικόνα και το χρώμα κειμένου της κεφαλίδας
-  Το μενού πλοήγησης

8.3 Μικροεφαρμογές
Οι μικροεφαρμογές (widgets) είναι τμήματα περιεχομένου, που μπορούν να προστεθούν σε συγκεκριμένα σημεία - περιοχές που δέχονται μικροεφαρμογές. Οι περιοχές αυτές ονομάζονται πάνελς ή μπάρες. Συνήθως οι περιοχές αυτές βρίσκονται είτε στην αριστερή είτε στην δεξιά στήλη, όμως κάποια θέματα υποστηρίζουν και πάνελς μικροεφαρμογών στο υποσέλιδο ή στην κορυφή της σελίδας.
Υπάρχει πληθώρα μικροεφαρμογών που είναι διαθέσιμες και σας επιτρέπουν να προσθέσετε επιπλέον πληροφορία στον ιστότοπό σας, όπως για παράδειγμα «Πρόσφατα Σχόλια», «Κατηγορίες» ή «Μενού».

Εικόνα 48: Διαχείριση Μικροεφαρμογών (widgets)
Η περιοχή «Διαθέσιμες Mικροεφαρμογές» περιέχει όλες τις μικροεφαρμογές, που μπορείτε να χρησιμοποιήσετε. Για να δημοσιεύσετε κάποια από αυτή σε πάνελ του ιστοτόπου σας,
πατήστε και σύρτε την στο επιθυμητό πάνελ. Μετά την εκεί τοποθέτησή του και ανάλογα τη μικροεφαρμογή, θα έχετε τη δυνατότητα να κάνετε και ρυθμίσεις, που αφορούν στην εμφάνι -ση της. Πατήστε το κουμπί «Αποθήκευση» μέσα στη μικροεφαρμογή, για να αποθηκεύσετε τις ρυθμίσεις σας.
Για να αφαιρέσετε μία μικροεφαρμογή από πάνελ, αλλά να διατηρηθούν οι ρυθμίσεις σας για μελλοντική χρήση, απλώς σύρτε την από το πάνελ στην περιοχή «Ανενεργές Μικροεφαρμο -γές».

Αν θέλετε απλώς να αφαιρέσετε μικροεφαρμογές από πάνελ, πατήστε τον σύνδεσμο «Διαγρα -φή», που υπάρχει στη μικροεφαρμογή.

8.4 Διαμόρφωση Μενού
Το θέμα εμφάνισης του ιστοτόπου υποστηρίζει μενού , που μπορεί να διαμορφωθεί από τον διαχειριστή του.
Μπορείτε να χρησιμοποιήσετε προσαρμοσμένο μενού, για να αντικαταστήσατε το μενού του ιστοτόπου, ενώ παράλληλα μπορείτε να χρησιμοποιήσετε και ως μικροεφαρμογή Μενού, το επιπλέον μενού, που έχετε φτιάξει.
Η διαμόρφωση μενού γίνεται μέσω της επιλογής του κάθετου μενού πλοήγησης Εμφάνιση t Μενού.
Ένα μενού μπορεί να περιέχει συνδέσμους σε σελίδες, άρθρα, κατηγορίες, ή άλλους τύπους περιεχομένου.

8.4.1 Δημιουργία μενού
Εικόνα 49: Οθόνη Εμφάνιση t Μενού
Την πρώτη φορά που θα μεταβείτε στη διαχειριστική σελίδα Εμφάνιση t Μενού, αυτή θα έχει την παραπάνω μορφή.
Η διαδικασία, που θα πρέπει να ακολουθήσετε, για να φτιάξετε ένα νέο μενού, είναι η εξής:
- 1. Στη σελίδα Εμφάνιση t Μενού, δίπλα στο όνομα μενού, γράψτε το όνομα για το νέο μενού σας και πατήστε το φτιάξε ένα νέο μενού . Θα ενεργοποιηθούν και οι υπόλοιπες περιοχές της σελίδας.
Εικόνα 50: Διαμόρφωση μενού
- 2. Επιλέξτε στοιχεία (σελίδες, κατηγορίες, συνδέσμους) από αριστερά, για να αρχίσετε να διαμορφώνετε το μενού σας, πατώντας κάθε φορά το κουμπί Προσθήκη στο μενού .
- 3. Για κάθε στοιχείο του μενού, που προσθέτετε, μπορείτε να καθορίσετε άλλη ετικέτα μενού (όνομα Στοιχείου) από το κανονικό του και να καθορίσετε και τις άλλες ιδιότητές του.
- 4. Για να αλλάξετε τη σειρά εμφάνισης στο μενού των διαφόρων στοιχείων, αρκεί να σύρετε το κάθε στοιχείο στη σειρά που θέλετε. Ανάλογα με τις δυνατότητες του μενού μπορείτε να έχετε και 2ου επιπέδου στοιχεία μενού, που θα εμφανίζονται ως αναδυόμενη λίστα κάτω από ένα βασικό στοιχείο του μενού.
- 5. Για να αφαιρέσετε ένα στοιχείο μενού, πατήστε το βέλος, που υπάρχει δεξιά στη γραμμή του ονόματός του και στη συνέχεια πατήστε στον σύνδεσμο Αφαίρεση , που εμφανίζεται στο κάτω μέρος του πλαισίου του.
- 6. Όταν ολοκληρώσετε τη διαμόρφωση του μενού σας, πατήστε το κουμπί Αποθήκευση μενού .

8.4.2 Χρήση διαμορφωμένου μενού ως μενού πλοήγησης
Για να αντικαταστήσετε το εξ' ορισμού μενού του ιστοτόπου σας, μεταβείτε στη διαχειριστική σελίδα Εμφάνιση t Μενού και στη συνέχεια από την καρτέλα «Διαχείριση τοποθεσιών» διαλέξτε το μενού, που θέλετε να είναι το βασικό μενού πλοήγησης και τέλος πατήστε το κουμπί Αποθήκευση .
Εικόνα 51: Αντικατάσταση του μενού πλοήγησης

8.4.3 Επαναφορά αρχικού μενού πλοήγησης
Σε περίπτωση που θέλετε να επαναφέρετε το εξ' ορισμού μενού πλοήγησης του θέματος στον ιστότοπό σας, αρκεί να μεταβείτε στη σελίδα Εμφάνιση t Μενού και στην καρτέλα «Διαχείριση τοποθεσιών» στη λίστα που εμφανίζετε να διαλέξετε την Main Menu και να πατήσετε το κουμπί Αποθήκευση .

8.4.4 Χρήση διαμορφωμένου μενού ως μικροεφαρμογή
Όπως αναφέραμε, ένα μενού μπορεί να χρησιμοποιηθεί και ως μικροεφαρμογή σε πάνελ. Για να το κάνετε αυτό, αφού έχετε φτιάξει το μενού σας (βλέπε παρ. Δημιουργία μενού) μεταβείτε στη σελίδα Εμφάνιση t Μικροεφαρμογές . Εκεί από την περιοχή Διαθέσιμες Μικροεφαρμογές σύρτε τη μικροεφαρμογή Προσαρμοσμένο Μενού μέσα σε κάποιο πάνελ.
Μέσα στη μικροεφαρμογή Προσαρμοσμένο Μενού, δώστε κάποιο τίτλο, εάν θέλετε, και διαλέξτε το μενού, που θέλετε να εμφανίσετε από τη λίστα «Επιλέξτε μενού», και τέλος πατήστε στο κουμπί Αποθήκευση της μικροεφαρμογής.

9 Διαχείριση χρηστών ιστοτόπου
Πατώντας πάνω στην επιλογή μενού « Μέλη » του κάθετου μενού εμφανίζονται όλα τα μέλη (χρήστες), που έχουν κάποιο δικαίωμα πρόσβαση στο διαχειριστικό περιβάλλον του ιστοτόπου σας. Οι χρήστες με ρόλο, διαφορετικό από του «Διαχειριστή» έχουν λιγότερες επιλογές στο διαχειριστικό περιβάλλον του ιστοτόπου σας. Εσείς, ως Διαχειριστής του ιστοτόπου, μπορείτε να προσθέσετε νέους χρήστες, να διαγράψετε χρήστες ή/και να αλλάξετε ρόλο σε άλλους.
Στο πάνω μέρος της λίστας μελών υπάρχουν σύνδεσμοι, που σας επιτρέπουν να φιλτράρετε τη λίστα των χρηστών με βάση τους ρόλους.

Εικόνα 52: Μέλη t Όλα τα μέλη
Περνώντας τον δείκτη του ποντικιού πάνω από κάθε σειρά στον κατάλογο των χρηστών, ο ακόλουθος σύνδεσμος εμφανίζεται κάτω από το όνομα χρήστη.
-  Αλλαγή - Σας επιτρέπει να αλλάξετε στοιχεία του χρήστη.
-  Διαγραφή - Σας επιτρέπει να διαγράψετε τον χρήστη από τα μέλη που έχουν κάποιο ρόλο στον ιστότοπό σας. Πατώντας το διαγραφή ενός μέλους, θα μεταφερθείτε και σε μία υποσελίδα, όπου θα πρέπει να ορίσετε τι θα συμβεί με τα άρθρα, που έχει γράψει αυτό το μέλος. Μπορείτε είτε να τα διαγράψετε είτε να αποδώσετε άλλον ως συντάκτη τους.

Επίσης μπορείτε να αλλάξετε τον ρόλο του κάθε μέλους απλώς τσεκάροντας το κουτάκι δίπλα από τον/τους χρήστες και επιλέγοντας από το πλαίσιο « Αλλαγή ρόλου... », που υπάρχει στο πάνω μέρος της λίστας τον νέο ρόλο και τέλος πατάτε το κουμπί Αλλαγή .
Οι ρόλοι που μπορούν να έχει ένα μέλος και τα αντίστοιχα δικαιώματα είναι:
-  Διαχειριστής : (Administrator) -Πλήρης πρόσβαση σε όλες τις ενέργειες διαχείρισης του ιστοτόπου
-  Αρχισυντάκτης : (Editor) -Πρόσβαση στη συγγραφή, διαχείριση άρθρων, σελίδων τόσο σε δικές του όσο και σε άλλων χρηστών
-  Συντάκτης : (Author) - Μπορεί μόνο να δημοσιεύει και να διαχειρίζεται δικά του άρθρα
-  Συνεργάτης : (Contributor) - Μπορεί να γράψει άρθρα, αλλά πρέπει να εγκριθούν από τον διαχειριστή ή αρχισυντάκτη πριν την προβολή τους στον ιστότοπο
-  Συνδρομητής : (Subscriber) - Μπορεί μόνο να διαβάσει σχόλια.

8.5 Προσθήκη μέλους
Ως μέλος στον ιστότοπό σας μπορείτε να προσθέσετε χρήστες μέσω της παρακάτω φόρμας:
Εικόνα 53: Προσθήκη μέλους
Για να προσθέσετε έναν χρήστη ως μέλος του ιστοτόπου σας μεταβείτε στη διαχειριστική σελίδα Μέλη t Προσθήκη . Στη σελίδα αυτή δίνετε τα στοιχεία του χρήστη, το email, το συνθηματικό καθώς και τον ρόλο, που θέλετε αυτός να έχει στον ιστότοπό σας.
Ο χρήστης θα λάβει ένα μήνυμα, για να αποδεχτεί την πρόσκληση ως μέλος του ιστοτόπου σας, που θα περιέχει έναν σύνδεσμο αποδοχής της πρόσκλησης.

9 Εξαγωγή ιστοτόπου
Μπορείτε να εξάγετε σε ένα αρχείο το περιεχόμενο του ιστοτόπου σας, προκειμένου να το εισάγετε σε άλλη εγκατάσταση Wordpress ή πλατφόρμα. Το αρχείο εξαγωγής θα είναι ένα αρχείο τύπου XML, που ονομάζεται WXR. Άρθρα, σελίδες, σχόλια, προσαρμοσμένα πεδία, κατηγορίες και ετικέτες μπορούν να συμπεριληφθούν. Μπορείτε να επιλέξετε για το αρχείο WXR να περιλαμβάνει μόνο ορισμένα άρθρα ή σελίδες καθορίζοντας τα αντίστοιχα φίλτρα, για να φιλτράρετε τα δεδομένα προς εξαγωγή βάσει κατηγορίας, συγγραφέα, εύρος ημερομηνιών ανά μήνα, ή την κατάσταση.

Για να εξάγετε τον ιστότοπό σας, επιλέξτε από το κάθετο μενού του διαχειριστικού περιβάλλοντος « Εργαλεία t Εξαγωγή ».
Στη σελίδα που θα εμφανιστεί, κάντε τις επιθυμητές επιλογές και πατήστε το « Μεταφόρτωση αρχείου εξαγωγής ». Ανάλογα με το πλήθος των άρθρων σας η διαδικασία δημιουργίας του αρχείου διαρκεί κάποια δευτερόλεπτα.
Εικόνα 54: Οθόνη εξαγωγής ιστοτόπου
Χρήσιμη επισήμανση: Με την εξαγωγή ιστοτόπου δεν εξάγονται οι εικόνες και τα άλλα αρ -χεία, που τυχόν έχετε αποθηκεύσει στη Συλλογή Πολυμέσων, ούτε και οι ρυθμίσεις σε ό,τι αφορά την εμφάνιση του ιστοτόπου σας. Σε ό,τι αφορά τα πολυμέσα, κατά τη φάση εισαγω -γής του αρχείου XML, που δημιουργήθηκε από τον ιστότοπό σας σε κάποια άλλη εγκατά σταση, θα ερωτηθείτε από το εκεί σύστημα , αν θέλετε να γίνει και τοπική αντιγραφή των πολυμέσων.

10 Μενού «Ρυθμίσεις»
Οι διάφορες σελίδες ρυθμίσεων χρησιμοποιούνται, για να ρυθμίσετε τη συμπεριφορά του ιστοτόπου σας.
Παρακάτω περιγράφονται επιγραμματικά οι διάφορες σελίδες του μενού Ρυθμίσεων.

10.1 Ρυθμίσεις t «Γενικά»
Μέσω της σελίδας Ρυθμίσεις->Γενικά μπορείτε να τροποποιήσετε τον τίτλο και τον υπότιτλο του ιστοτόπου, την ηλεκτρονική διεύθυνση αλληλογραφίας, που θα θεωρείται ως διεύθυνση του ιδιοκτήτη του ιστοτόπου, τη ζώνη ώρας, τη μορφή της ημερομηνίας και τη γλώσσα του ιστοτόπου για τα μηνύματα συστήματος.
Εικόνα 55: Διαχειριστική σελίδα Ρυθμίσεις t Γενικά
Περισσότερα για τις γενικές ρυθμίσεις στη σελίδα
http://codex.wordpress.org/Settings\_General\_Screen (στα Αγγλικά).

10.2 Ρυθμίσεις t «Ανάγνωση»
Μέσα από τη σελίδα Ρυθμίσεις->Ανάγνωση μπορείτε να ορίσετε αν η αρχική σελίδα σας θα εμφανίζει μια στατική σελίδα ή τα τελευταία άρθρα σας, πόσα άρθρα θα εμφανίζονται σε κάθε σελίδα (πχ κατηγοριών ή ετικετών) καθώς και επιλογές, που αφορούν το RSS του.
Η ρύθμιση Ορατότητα ιστοτόπου σας δίνει τη δυνατότητα να μπλοκάρει τον ιστότοπό σας από τις μηχανές αναζήτησης.
Εικόνα 56: Ρυθμίσεις t Ανάγνωση

10.3 Ρυθμίσεις t «Συζήτηση»
Μέσω της διαχειριστικής σελίδας Ρυθμίσεις -> Συζήτηση μπορείτε να καθορίσετε το αν και πώς θα επιτρέπετε να σχολιάζει κάποιος τα άρθρα/ σελίδες του ιστοτόπου σας.
Προτείνουμε μέσω του διαχειριστικού μενού «Ρυθμίσεις -> Συζήτηση» να έχετε ενεργοποιημένα τα ακόλουθα:
Στην ενότητα Να ειδοποιούμαι όποτε:
-  Υποβάλλεται σχόλιο
-  Υπάρχει σχόλιο για έλεγχο
Στην ενότητα Για να προβληθεί ένα σχόλιο:
-  Το σχόλιο θα πρέπει να εγκριθεί χειροκίνητα.
Εικόνα 57: Διαχειριστική σελίδα Ρυθμίσεις «Συζήτηση»

10.4 Ρυθμίσεις t «Πολυμέσα»
Μέσα από τη σελίδα Ρυθμίσεις t Πολυμέσα καθορίζετε τις μέγιστες διαστάσεις, που θα αποκτά μια εικόνα, όταν εισάγεται σε ένα άρθρο ή σελίδα.
Εικόνα 58: Ρυθμίσεις t Πολυμέσα

10.5 Ρυθμίσεις t «Μόνιμοι σύνδεσμοι»
Μέσω της σελίδας " Ρυθμίσεις " t " Μόνιμοι Σύνδεσμοι " προσαρμόζετε τη δομή των URL των άρθρων και των αρχείων σας, ώστε να βελτιωθεί η αισθητική, η ευχρηστία και η μελλοντική συμβατότητά τους.
Αν θέλετε τα άρθρα του ιστοτόπου σας να έχουν πιο σύντομο URL, επιλέξτε "Αριθμός" από τη σελίδα αυτή.
Αν θέλετε όμως καλύτερη κατάταξη στις μηχανές αναζήτησης, επιλέξτε «Όνομα άρθρου» ή «Ημέρα και όνομα»
Εικόνα 59: Ρυθμίσεις t Μόνιμοι σύνδεσμοι

11 Ενδεικτικά βήματα υλοποίησης ιστοτόπου

Βήμα 1 ο : Επιλογή - κατοχύρωση ονόματος χώρου (domain name)
Κάθε ιστότοπος διαθέτει το δικό του ξεχωριστό όνομα χώρου (domain name). Το όνομα χώρου είναι στην ουσία η διεύθυνση που έχει ο ιστότοπος στο διαδίκτυο και έχει τη μορφή onoma.xyz όπου .xyz είναι η κατάληξη που συνήθως αναφέρεται στη χρήση του ή στη χώρα προέλευσης. To όνομα χώρου μπορεί να έχει διάφορες καταλήξεις όπως .com, .eu, .gr, .de, .net, .org, .info κ.λ.π.
Μπορείτε να ελέγξετε τη διαθεσιμότητα ενός ονόματος χώρου με κατάληξη .gr από τη διεύθυνση http://www.gr (επιλογή «Έλεγχος ονόματος χώρου») αλλά και από πολλούς άλλους ιστοτόπους που προσφέρουν εκτός από τον έλεγχο διαθεσιμότητας και δυνατότητα κατοχύρωσης του ονόματος, εφόσον αυτό είναι διαθέσιμο. Το κόστος κατοχύρωσης (δέσμευσης -χρήσης) του ονόματος χώρου είναι περίπου 10 ευρώ ανά έτος.

Βήμα 2 ο : Επιλογή χώρου - πακέτου φιλοξενίας
Ο ιστότοπός σας, για να είναι πάντα διαθέσιμος στους επισκέπτες του, απαιτείται να μεταφερθεί και να φιλοξενηθεί σε έναν διακομιστή, έναν ισχυρό υπολογιστή που είναι μόνιμα συνδεδεμένος στο διαδίκτυο. Η φιλοξενία ιστοσελίδων είναι μια υπηρεσία που παρέχεται από εξειδικευμένες εταιρείες.
Το κόστος ενός ετήσιου πακέτου φιλοξενίας εξαρτάται από τον αποθηκευτικό χώρο (σε GB) που απαιτεί ο ιστότοπος αλλά και από το πλήθος των επισκεπτών του, ειδικότερα από τη διακίνηση δεδομένων - το εύρος ζώνης (bandwidth) που καταναλώνει. Υπάρχει πληθώρα εταιρειών στο διαδίκτυο που παρέχουν υπηρεσίες φιλοξενίας ιστοτόπων, οι περισσότερες από τις οποίες προσφέρουν και πίνακα ελέγχου - web hosting control panel (όπως οι εφαρμογές cPanel, Plesk, Webmin κ.α.) που περιλαμβάνει πολλές χρήσιμες λειτουργίες, όπως η προβολή και διαχείριση αρχείων (File Manager), τα αντίγραφα ασφαλείας (backup) του ιστοτόπου, η δημιουργία -εισαγωγή λογαριασμών email, η ρύθμιση καθώς και η διαχείρισή τους μέσω σχετικής εφαρμογής (λ.χ. webmail), η καταγραφή στατιστικών επισκεψιμότητας κ.α.

Χρήσιμη επισήμανση: Για να μπορεί να τρέξει χωρίς προβλήματα το WordPress (έκδοση 4.3.x ή μεγαλύτερη) στον διακομιστή σας, προτείνεται αυτός να υποστηρίζει:
-  PHP έκδοση 5.6 η νεώτερη
-  MySQL έκδοση MySQL 5.5 ή νεώτερη

Βήμα 3 ο : Ενημέρωση των διακομιστών DNS (NameServers)
Στο επόμενο βήμα, θα πρέπει να γίνει η ενημέρωση των διακομιστών DNS ώστε να γίνει η διασύνδεση του ονόματος χώρου με τους nameservers της εταιρείας που παρέχει το πακέτο φιλοξενίας.
Με την προμήθεια ενός πακέτου φιλοξενίας, θα πρέπει να σας αποσταλούν τα ονόματα των διακομιστών DNS, που έχουν συνήθως τη μορφή ns1.onoma.xyz και ns2.onoma.xyz. Με τα ονόματα των διακομιστών DNS γνωστά, ακολουθεί η διαδικασία της ενημέρωσης τους στον πίνακα έλεγχου του ονόματος χώρου. Αν η εταιρεία, μέσω της οποίας έγινε η κατοχύρωση του ονόματος χώρου, δεν σας διαθέτει πρόσβαση ώστε να καταχωρίσετε εσείς τους διακομιστές DNS τότε θα πρέπει να ενημερώσετε εσείς την εταιρεία (λ.χ. με την αποστολή email) ώστε να κάνει αυτή την καταχώρισή τους. Μόλις ολοκληρωθεί η διαδικασία αυτή, αρχίζει η ενημέρωση όλων των διακομιστών DNS στο διαδίκτυο. Η διαδικασία αυτή (DNS propagation) μπορεί να διαρκέσει μέχρι 24 ώρες για να ολοκληρωθεί ώστε να είναι προσβάσιμος ο ιστότοπός σας σε όλο τον κόσμο μέσω του ονόματος χώρου που έχετε κατοχυρώσει.

Βήμα 4 ο : Εγκατάσταση WordPress
Στο βήμα αυτό θα γίνει η εγκατάσταση του WordPress στον υπολογιστή-διακομιστή που φιλοξενεί το όνομα χώρου που κατοχυρώσατε. Η διαδικασία της εγκατάστασης συνήθως γίνεται πολύ απλά και γρήγορα μέσα από τον πίνακα ελέγχου του πακέτου φιλοξενίας (web hosting control panel), μέσω λογισμικού που διευκολύνει την αυτόματη εγκατάσταση (auto installer) του WordPress, όπως τα οι εφαρμογές Softaculous, Fantastico, Application Vault κ.α.
Αν η αυτόματη διαδικασία εγκατάστασης δεν παρέχεται στο πακέτο φιλοξενίας που έχετε επιλέξει τότε θα πρέπει να γίνουν οι παρακάτω ενέργειες:

-  Δημιουργείστε μία βάση δεδομένων για το WordPress στον διακομιστή σας, καθώς και έναν χρήστη MySQL που να έχει δικαιώματα πρόσβασης και τροποποίησης της βάσης αυτής. Η ενέργεια αυτή μπορεί να γίνει είτε μέσα από ένα web panel (αν παρέχεται) είτε με το λογισμικό phpmyadmin , αν είναι εγκατεστημένο στο διακομιστή σας. Επίσης η δημιουργία βάσης δεδομένων μπορεί να γίνει με χρήση του MySQL client αν έχετε πρόσβαση, με τα αντίστοιχα δικαιώματα, σε γραμμή εντολών στο διακομιστή. Δείτε το παρακάτω ενδεικτικό παράδειγμα όπου δημιουργείται η βάση δεδομένων dbname , με χρήστη wpuser και κωδικό πρόσβασης yourpass :

-  Κατεβάστε στον υπολογιστή σας την τελευταία έκδοση του WordPress από τη διεύθυνση: http://wordpress.org/download . Αν προτιμάτε την ελληνική έκδοση τότε κατεβάστε την από εδώ: https://el.wordpress.org/
-  Δημιουργήστε έναν νέο φάκελο στον σκληρό δίσκο σας και αποσυμπιέστε το WordPress μέσα σε αυτόν.
-  (Προαιρετικό βήμα) Βρείτε το αρχείο wp-config-sample.php και μετονομάστε το σε wp-config.php
-  Ανοίξτε το wp-config.php, με έναν επεξεργαστή κειμένου όπως το Σημειωματάριο (Notepad), και συμπληρώστε τα στοιχεία που λείπουν στις ακόλουθες γραμμές:
-  define('DB\_NAME', 'database\_name'); - Το όνομα της βάσης δεδομένων που δημιουργήσατε πριν (λ.χ. dbname )
-  define('DB\_USER', 'username'); - Το όνομα χρήστη της βάσης (λ.χ. wpuser )
-  define('DB\_PASSWORD', 'password'); - Ο κωδικός χρήστη (λ.χ. yourpass )

Μετά τη συμπλήρωση αποθηκεύστε το αρχείο.
-  Με ένα πρόγραμμα FTP (όπως το FileZilla) συνδεθείτε στη διεύθυνση ftp.onoma.xyz, με το όνομα (username) και τον κωδικό (password) που έχετε δηλώσει (ή έχετε παραλάβει) κατά τη διαδικασία προμήθειας του πακέτου φιλοξενίας
-  Μεταφέρετε (με drag and drop) όλα τα αρχεία του φακέλου με το WordPress στον υπολογιστή σας στον διακομιστή (web server).
-  Μόλις ολοκληρώσετε τα προηγούμενα βήματα μεταφερθείτε στη διεύθυνση: http://www.onoma.xyz/wp-admin/install.php
-  Στη συνέχεια συμπληρώστε τα στοιχεία της φόρμας και πατήστε «Εγκατάσταση WordPress»

Ένα άλλο θέμα που θα πρέπει να ληφθεί υπόψη, μετά τη μεταφορά των αρχείων και την εγκατάσταση, είναι οι ρυθμίσεις που αφορούν τα δικαιώματα πρόσβασης (Files Permissions) στον διακομιστή. Περισσότερες πληροφορίες, μπορείτε να βρείτε, στη διεύθυνση:
https://codex.wordpress.org/Changing\_File\_Permissions

Βήμα 5 ο : Εισαγωγή στη διαχείριση
Μεταφερθείτε στο περιβάλλον διαχείρισης του WordPress από τη διεύθυνση:
http://www.onoma.xyz/wp-admin (αντικαταστείστε το "onoma.xyz" με το δικό σας όνομα χώρου).

Βήμα 1 ο : Επιλογή - κατοχύρωση ονόματος χώρου (domain name)
Κάθε ιστότοπος διαθέτει το δικό του ξεχωριστό όνομα χώρου (domain name). Το όνομα χώρου είναι στην ουσία η διεύθυνση που έχει ο ιστότοπος στο διαδίκτυο και έχει τη μορφή onoma.xyz όπου .xyz είναι η κατάληξη που συνήθως αναφέρεται στη χρήση του ή στη χώρα προέλευσης. To όνομα χώρου μπορεί να έχει διάφορες καταλήξεις όπως .com, .eu, .gr, .de, .net, .org, .info κ.λ.π.
Μπορείτε να ελέγξετε τη διαθεσιμότητα ενός ονόματος χώρου με κατάληξη .gr από τη διεύθυνση http://www.gr (επιλογή «Έλεγχος ονόματος χώρου») αλλά και από πολλούς άλλους ιστοτόπους που προσφέρουν εκτός από τον έλεγχο διαθεσιμότητας και δυνατότητα κατοχύρωσης του ονόματος, εφόσον αυτό είναι διαθέσιμο. Το κόστος κατοχύρωσης (δέσμευσης -χρήσης) του ονόματος χώρου είναι περίπου 10 ευρώ ανά έτος.

Βήμα 2 ο : Επιλογή χώρου - πακέτου φιλοξενίας
Ο ιστότοπός σας, για να είναι πάντα διαθέσιμος στους επισκέπτες του, απαιτείται να μεταφερθεί και να φιλοξενηθεί σε έναν διακομιστή, έναν ισχυρό υπολογιστή που είναι μόνιμα συνδεδεμένος στο διαδίκτυο. Η φιλοξενία ιστοσελίδων είναι μια υπηρεσία που παρέχεται από εξειδικευμένες εταιρείες.
Το κόστος ενός ετήσιου πακέτου φιλοξενίας εξαρτάται από τον αποθηκευτικό χώρο (σε GB) που απαιτεί ο ιστότοπος αλλά και από το πλήθος των επισκεπτών του, ειδικότερα από τη διακίνηση δεδομένων - το εύρος ζώνης (bandwidth) που καταναλώνει. Υπάρχει πληθώρα εταιρειών στο διαδίκτυο που παρέχουν υπηρεσίες φιλοξενίας ιστοτόπων, οι περισσότερες από τις οποίες προσφέρουν και πίνακα ελέγχου - web hosting control panel (όπως οι εφαρμογές cPanel, Plesk, Webmin κ.α.) που περιλαμβάνει πολλές χρήσιμες λειτουργίες, όπως η προβολή και διαχείριση αρχείων (File Manager), τα αντίγραφα ασφαλείας (backup) του ιστοτόπου, η δημιουργία -εισαγωγή λογαριασμών email, η ρύθμιση καθώς και η διαχείρισή τους μέσω σχετικής εφαρμογής (λ.χ. webmail), η καταγραφή στατιστικών επισκεψιμότητας κ.α.

Χρήσιμη επισήμανση: Για να μπορεί να τρέξει χωρίς προβλήματα το WordPress (έκδοση 4.3.x ή μεγαλύτερη) στον διακομιστή σας, προτείνεται αυτός να υποστηρίζει:
-  PHP έκδοση 5.6 η νεώτερη
-  MySQL έκδοση MySQL 5.5 ή νεώτερη

Βήμα 3 ο : Ενημέρωση των διακομιστών DNS (NameServers)
Στο επόμενο βήμα, θα πρέπει να γίνει η ενημέρωση των διακομιστών DNS ώστε να γίνει η διασύνδεση του ονόματος χώρου με τους nameservers της εταιρείας που παρέχει το πακέτο φιλοξενίας.
Με την προμήθεια ενός πακέτου φιλοξενίας, θα πρέπει να σας αποσταλούν τα ονόματα των διακομιστών DNS, που έχουν συνήθως τη μορφή ns1.onoma.xyz και ns2.onoma.xyz. Με τα ονόματα των διακομιστών DNS γνωστά, ακολουθεί η διαδικασία της ενημέρωσης τους στον πίνακα έλεγχου του ονόματος χώρου. Αν η εταιρεία, μέσω της οποίας έγινε η κατοχύρωση του ονόματος χώρου, δεν σας διαθέτει πρόσβαση ώστε να καταχωρίσετε εσείς τους διακομιστές DNS τότε θα πρέπει να ενημερώσετε εσείς την εταιρεία (λ.χ. με την αποστολή email) ώστε να κάνει αυτή την καταχώρισή τους. Μόλις ολοκληρωθεί η διαδικασία αυτή, αρχίζει η ενημέρωση όλων των διακομιστών DNS στο διαδίκτυο. Η διαδικασία αυτή (DNS propagation) μπορεί να διαρκέσει μέχρι 24 ώρες για να ολοκληρωθεί ώστε να είναι προσβάσιμος ο ιστότοπός σας σε όλο τον κόσμο μέσω του ονόματος χώρου που έχετε κατοχυρώσει.

Βήμα 4 ο : Εγκατάσταση WordPress
Στο βήμα αυτό θα γίνει η εγκατάσταση του WordPress στον υπολογιστή-διακομιστή που φιλοξενεί το όνομα χώρου που κατοχυρώσατε. Η διαδικασία της εγκατάστασης συνήθως γίνεται πολύ απλά και γρήγορα μέσα από τον πίνακα ελέγχου του πακέτου φιλοξενίας (web hosting control panel), μέσω λογισμικού που διευκολύνει την αυτόματη εγκατάσταση (auto installer) του WordPress, όπως τα οι εφαρμογές Softaculous, Fantastico, Application Vault κ.α.
Αν η αυτόματη διαδικασία εγκατάστασης δεν παρέχεται στο πακέτο φιλοξενίας που έχετε επιλέξει τότε θα πρέπει να γίνουν οι παρακάτω ενέργειες:

-  Δημιουργείστε μία βάση δεδομένων για το WordPress στον διακομιστή σας, καθώς και έναν χρήστη MySQL που να έχει δικαιώματα πρόσβασης και τροποποίησης της βάσης αυτής. Η ενέργεια αυτή μπορεί να γίνει είτε μέσα από ένα web panel (αν παρέχεται) είτε με το λογισμικό phpmyadmin , αν είναι εγκατεστημένο στο διακομιστή σας. Επίσης η δημιουργία βάσης δεδομένων μπορεί να γίνει με χρήση του MySQL client αν έχετε πρόσβαση, με τα αντίστοιχα δικαιώματα, σε γραμμή εντολών στο διακομιστή. Δείτε το παρακάτω ενδεικτικό παράδειγμα όπου δημιουργείται η βάση δεδομένων dbname , με χρήστη wpuser και κωδικό πρόσβασης yourpass :

-  Κατεβάστε στον υπολογιστή σας την τελευταία έκδοση του WordPress από τη διεύθυνση: http://wordpress.org/download . Αν προτιμάτε την ελληνική έκδοση τότε κατεβάστε την από εδώ: https://el.wordpress.org/
-  Δημιουργήστε έναν νέο φάκελο στον σκληρό δίσκο σας και αποσυμπιέστε το WordPress μέσα σε αυτόν.
-  (Προαιρετικό βήμα) Βρείτε το αρχείο wp-config-sample.php και μετονομάστε το σε wp-config.php
-  Ανοίξτε το wp-config.php, με έναν επεξεργαστή κειμένου όπως το Σημειωματάριο (Notepad), και συμπληρώστε τα στοιχεία που λείπουν στις ακόλουθες γραμμές:
-  define('DB\_NAME', 'database\_name'); - Το όνομα της βάσης δεδομένων που δημιουργήσατε πριν (λ.χ. dbname )
-  define('DB\_USER', 'username'); - Το όνομα χρήστη της βάσης (λ.χ. wpuser )
-  define('DB\_PASSWORD', 'password'); - Ο κωδικός χρήστη (λ.χ. yourpass )

Μετά τη συμπλήρωση αποθηκεύστε το αρχείο.
-  Με ένα πρόγραμμα FTP (όπως το FileZilla) συνδεθείτε στη διεύθυνση ftp.onoma.xyz, με το όνομα (username) και τον κωδικό (password) που έχετε δηλώσει (ή έχετε παραλάβει) κατά τη διαδικασία προμήθειας του πακέτου φιλοξενίας
-  Μεταφέρετε (με drag and drop) όλα τα αρχεία του φακέλου με το WordPress στον υπολογιστή σας στον διακομιστή (web server).
-  Μόλις ολοκληρώσετε τα προηγούμενα βήματα μεταφερθείτε στη διεύθυνση: http://www.onoma.xyz/wp-admin/install.php
-  Στη συνέχεια συμπληρώστε τα στοιχεία της φόρμας και πατήστε «Εγκατάσταση WordPress»

Ένα άλλο θέμα που θα πρέπει να ληφθεί υπόψη, μετά τη μεταφορά των αρχείων και την εγκατάσταση, είναι οι ρυθμίσεις που αφορούν τα δικαιώματα πρόσβασης (Files Permissions) στον διακομιστή. Περισσότερες πληροφορίες, μπορείτε να βρείτε, στη διεύθυνση:
https://codex.wordpress.org/Changing\_File\_Permissions

Βήμα 5 ο : Εισαγωγή στη διαχείριση
Μεταφερθείτε στο περιβάλλον διαχείρισης του WordPress από τη διεύθυνση:
http://www.onoma.xyz/wp-admin (αντικαταστείστε το "onoma.xyz" με το δικό σας όνομα χώρου).

Βήμα 6 ο : Επιλογή θέματος
Από τον Πίνακα Ελέγχου επιλέξτε Εμφάνιση -> Θέματα και επιλέξτε ένα από τα υπάρχοντα διαθέσιμα θέματα ή επιλέξτε «Προσθήκη νέου» για να προσθέσετε ένα νέο θέμα στα ήδη διαθέσιμα.
Το WordPress προσφέρει πολλά (τουλάχιστον 2.000) δωρεάν θέματα εμφάνισης (themes) του ιστοτόπου αλλά στο διαδίκτυο παρέχονται και πολλά αξιόλογα και καλοσχεδιασμένα θέματα με πληρωμή.
Χρήσιμη επισήμανση: Μπορείτε να αναζητήσετε τα κατάλληλα θέματα με λέξεις κλειδιά ή με χρήση φίλτρων. Στην αναζήτησή σας, προτιμήστε αυτά που χαρακτηρίζονται από την ιδιό -τητα «διάταξη για κινητές συσκευές» ή «responsive», γιατί αυτά τα θέματα είναι κατάλληλα σχεδιασμένα ώστε να απεικονίζεται σωστά ο ιστότοπός σας και στις κινητές συσκευές.

Αν σας αρέσει ένα θέμα, μπορείτε να το δείτε με την επιλογή "Προεπισκόπηση", ενώ αν θέλετε μπορείτε να προχωρήσετε στην "Εγκατάσταση" και στη συνέχεια στην "Ενεργοποίηση" ώστε να αντικαταστήσει το ήδη υπάρχον θέμα του ιστοτόπου σας.
Η "Ενεργοποίηση" ενός νέου θέματος δεν διαγράφει τα στοιχεία (λ.χ. άρθρα, σελίδες) που είχατε καταχωρήσει. Μπορείτε να αλλάζετε θέματα όσο συχνά θέλετε χωρίς να ανησυχείτε για το περιεχόμενο του ιστοτόπου σας.

Βήμα 7 ο : Δημιουργία βασικών σελίδων
Ο επισκέπτης ενός ιστοτόπου επιθυμεί να βρει την πληροφορία που αναζητά όσο το δυνατόν πιο εύκολα και γρήγορα. Έτσι όταν σχεδιάζουμε έναν ιστότοπο προσπαθούμε να συγκεντρώνουμε τις βασικές πληροφορίες και τις οργανώνουμε σε σελίδες που ο επισκέπτης θα μπορεί να βρει αμέσως.
Ένας ιστότοπος καλό είναι να έχει τις παρακάτω βασικές σελίδες:
-  Αρχική Σελίδα
Είναι η πρώτη σελίδα που βλέπει ο επισκέπτης του ιστοτόπου μας. Μπορεί να περιέχει στατικές πληροφορίες που αναφέρονται σε εμάς ή στην επιχείρησή μας ή να περιέχει δυναμικές πληροφορίες όπως νέα - ανακοινώσεις που ενημερώνονται σχετικά συχνά.

To WordPress, στην αρχική σελίδα, είναι προκαθορισμένο να εμφανίζει μια λίστα με τα τελευταία άρθρα που έχετε καταχωρίσει. Αν επιθυμείτε να εμφανίζει μια στατική σελίδα, πρέπει αρχικά να τη δημιουργήσετε και έπειτα να την ενεργοποιήσετε από την επιλογή Ρυθμίσεις -> Ανάγνωση.
-  Ποιοι είμαστε
Στη σελίδα αυτή μπορείτε να παρουσιάσετε με λίγα λόγια εσάς ή την επιχείρησή σας, τις δραστηριότητές σας, το βιογραφικό σας ή το ιστορικό της επιχείρησης.
-  Επικοινωνία
Καταχωρίστε τα στοιχεία επικοινωνίας, διεύθυνση, τηλέφωνα, email, ακόμα και ένα χάρτη
με το σημείο που βρίσκεται η έδρα σας. Μπορείτε να ενσωματώσετε μια φόρμα επικοινωνίας για να λαμβάνετε αιτήματα των επισκεπτών σας στο email σας.
-  Προϊόντα - Υπηρεσίες

Αναφέρετε τις βασικές υπηρεσίες ή/και τα σημαντικότερα προϊόντα που διαθέτετε και θα σας ενδιέφερε να προβάλλετε στον ιστότοπό σας.
Επίσης, χρήσιμο είναι να γνωρίζει κάποιος, το διαχωρισμό στον τρόπο λειτουργίας και της συνήθως χρήσης, των δυο βασικών τύπων προσθήκης περιεχόμενου του WordPress, δηλ. των Άρθρων (Posts) και των Σελίδων (Pages). Μπορείτε να ανατρέξετε στο κεφάλαιο 4, « Προσθέ -τοντας περιεχόμενο στον ιστότοπο », όπου γίνεται η περιγραφή της διαδικασίας καταχώρησης περιεχομένου.
Περισσότερες πληροφορίες, μπορείτε να βρείτε στη σελίδα:

https://en.support.wordpress.com/post-vs-page/

Βήμα 8ο: Εγκατάσταση προσθέτων (Plugins)
Τα « Πρόσθετα » είναι τμήματα κώδικα που επεκτείνουν τις δυνατότητες του WordPress, προσθέτοντας νέα χαρακτηριστικά και λειτουργίες. Μπορείτε να εγκαταστήσετε ένα νέο πρόσθετο από την επιλογή "Πρόσθετα -> Νέο πρόσθετο". Εδώ θα δείτε πληθώρα από πρόσθετα και αφού αναζητήσετε το πρόσθετο που επιθυμείτε μπορείτε να προχωρήσετε στην εγκατάστασή του πατώντας "Εγκατάσταση" στην πάνω δεξιά γωνία, στην καρτέλα του πρόσθετου.
Έτσι μπορείτε να αναζητήσετε και να εγκαταστήσετε πρόσθετα για τις παρακάτω λειτουργίες:

-  Βελτιστοποίηση (SEO), όπως το Yoast SEO
-  Στατιστικά - Analytics, όπως το WP Statistics
-  Αντίγραφα ασφαλείας, όπως το UpdraftPlus Backup and Restoration
-  Φόρμα Επικοινωνίας, όπως το Contact Form 7
-  Caching, όπως το WP Super Cache
Αναλυτική λίστα με όλα τα plugins για το Wordpress, μπορείτε να βρείτε επίσης, στη διεύθυνση: https://wordpress.org/plugins/.
Χρήσιμη επισήμανση: Υπάρχουν πάρα πολλά πρόσθετα που δεν είναι δωρεάν και διατίθε -νται με πληρωμή, όπως λ.χ. το πρόσθετο WPML για πολυγλωσσική υποστήριξη, το Slider Revolution για δημιουργία εντυπωσιακών μεταβάσεων, εφέ και animations, το πρόσθετο Visual Composer για εύκολη δημιουργία σελίδων με drag and drop

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

12 Προτεινόμενες Δραστηριότητες
-  Αναζητήστε στο διαδίκτυο καλά παραδείγματα αξιοποίησης του WordPress για τη δημιουργία σχολικών ιστοτόπων.
-  Εγκαταστήστε την τελευταία έκδοση του WordPress στον διακομιστή του εργαστηρίου πληροφορικής ή στο Πανελλήνιο Σχολικό Δίκτυο ( http://www.sch.gr/2753-wordpress ). Εναλλακτικά μπορείτε να κάνετε την εγκατάσταση σε ένα διακομιστή που προσφέρει υπηρεσίες δωρεάν web hosting τον οποίο θα σας υποδείξει ο καθηγητής σας.
-  Ομαδική Δραστηριότητα - Project. Δημιουργήστε έναν ιστότοπο για το τμήμα σας στο διακομιστή που κάνατε την εγκατάσταση στην προηγούμενη δραστηριότητα ή εναλλακτικά στο blogs.sch.gr
-  Καταχωρήστε σε μια σελίδα τους μαθητές και σε άλλη σελίδα τους καθηγητές του τμήματος
-  Καταχωρήστε ως άρθρα κάποιες πρόσφατες ανακοινώσεις του σχολείου
-  Καταχωρήστε ως άρθρα τα νέα της τάξης
-  Δημιουργήστε κατηγορίες και ταξινομήστε τα άρθρα σε κατηγορίες
-  Δημιουργήστε ετικέτες και δώστε ετικέτες στα άρθρα σας.
-  Προσθέστε ένα άρθρο κάθε μαθητής για τον αγαπημένο του καλλιτέχνη
-  Αναζητήστε, επιλέξτε και εγκαταστήστε ένα πρόσθετο που θα εμφανίζει ένα χάρτη και μια φόρμα επικοινωνίας. Προσθέστε τα στοιχεία επικοινωνίας (φόρμα, χάρτη, τηλέφωνα σχολείου, email, website)
-  Σχολιάστε τα άρθρα και τις ανακοινώσεις
-  Προσθέστε μικροεφαρμογές όπως Ημερολόγιο, Πρόσφατα Σχόλια, Ετικετοσύννεφο
-  Εγκαταστήστε ένα πρόσθετο που θα σας ενημερώνει για την επισκεψιμότητα του ιστοτόπου σας


ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ
ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ