Σχεδιασμός και Ανάπτυξη Ιστοτόπων: Ηλεκτρονικό βιβλίο

Εφαρμογή 1: Μια πρώτη, μινιμαλιστική ιστοσελίδα
Ξεκινούμε το ταξίδι μας με τον ελάχιστο απαραίτητο κώδικα που πρέπει να γράψουμε για να
δημιουργήσουμε μια κενή ουσιαστικά ιστοσελίδα. Αυτός ο κώδικας καλείται συχνά και σκελετός της
ιστοσελίδας. Όλες μας οι ιστοσελίδες θα βασίζονται σε αυτό τον κώδικα, ο οποίος θα εμπλουτίζεται
ανάλογα με τις εκάστοτε απαιτήσεις.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>

<html>
<head>
<title>Τίτλος ιστοσελίδας</title>
<meta charset="utf-8">
</head>
<body>
Περιεχόμενο ιστοσελίδας
</body>
</html>
Πηγαίος κώδικας 1: Ο ελάχιστος απαραίτητος κώδικας για τη δημιουργία ιστοσελίδας
Το έγγραφο που εμφανίζεται στο πλαίσιο Πηγαίος κώδικας 1 είναι γραμμένο σε HTML5, δηλαδή
στην έκδοση 5 της γλώσσας σήμανσης υπερκειμένου HTML. Η HTML είναι η γλώσσα στην οποία
είναι γραμμένες οι περισσότερες στατικές ιστοσελίδες του παγκόσμιου ιστού. Στατικές είναι οι
ιστοσελίδες των οποίων το περιεχόμενο μεταφέρεται όπως είναι αποθηκευμένο στον εξυπηρετητή
ιστοσελίδων, άρα δεν αλλάζει, αν δεν το αλλάξει εκούσια ο δημιουργός τους.
Αντίθετα στις δυναμικές ιστοσελίδες (οι οποίες δημιουργούνται με κώδικα π.χ. PHP, ASP, JSP, κ.λπ.)
το περιεχόμενο δημιουργείται από μια εφαρμογή που εκτελείται στον εξυπηρετητή ιστοσελίδων και
άρα μπορεί να αλλάξει, μεταξύ δύο ανανεώσεων της ιστοσελίδας στο παράθυρο του φυλλομετρητή.
Μια στατική ιστοσελίδα HTML δεν είναι ένα πρόγραμμα που εκτελείται, αλλά οδηγίες για τη
διαμόρφωση ενός εγγράφου, ενώ μια δυναμική ιστοσελίδα είναι ένα πρόγραμμα που εκτελείται στο
διακομιστή ιστοσελίδων και μπορεί να δημιουργήσει διαφορετικό περιεχόμενο σε κάθε κλήση της.
Η πρώτη γραμμή του κώδικα του παραδείγματος 1, αποτελεί μια οδηγία προς το φυλλομετρητή για
το είδος του εγγράφου που ακολουθεί. Ο φυλλομετρητής χρειάζεται να γνωρίζει τον τύπο και την
έκδοση του κώδικα της ιστοσελίδας για να την εμφανίσει σωστά. Η συγκεκριμένη δήλωση
ενημερώνει ότι το έγγραφο που ακολουθεί είναι γραμμένο σε κώδικα HTML5.
Ο κώδικας HTML δεν είναι ευαίσθητος σε κεφαλαία και πεζά γράμματα (case sensitive). Έτσι είναι
ισοδύναμο, είτε γράψουμε DOCTYPE, είτε doctype, είτε DocType, κ.ο.κ. Αυτό που πρέπει να
προσέχουμε είναι η εισαγωγή διαστήματος, καθώς για το σύστημα είναι διαφορετικό το DOCTYPE
από το DOC TYPE.
18
Χρήσιμη επισήμανση: Προσοχή χρειάζεται στην εναλλαγή ελληνικού και λατινικού
πληκτρολογίου. Κατά την εμφάνιση ενός αρχείου κώδικα HTML στο φυλλομετρητή, ο
διερμηνέας HTML (εκείνο το υποπρόγραμμα του φυλλομετρητή που αναλαμβάνει να
"καταλάβει" τον κώδικα της ιστοσελίδας και να τον μετατρέψει σε οδηγίες για την κατάλληλη
εμφάνιση του περιεχομένου στο παράθυρο του φυλλομετρητή) σε αντίθεση με ότι συμβαίνει σε
μια διαδικασιακή γλώσσα προγραμματισμού, όπως π.χ. η BASIC ή η Pascal, θα αγνοήσει πιθανά
συντακτικά λάθη και εμείς θα πρέπει να εντοπίσουμε τι δεν πήγε καλά και το έγγραφο δεν
μορφοποιήθηκε όπως περιμέναμε. Έτσι ενώ οι ετικέτες <ΗΤΜL> και <HTML> μοιάζουν να
είναι ίδιες, αυτό δεν συμβαίνει γιατί στην πρώτη το ΗΤΜ είναι γραμμένο με ελληνικούς
χαρακτήρες. Συνήθως μόλις γράψουμε το Λ καταλαβαίνουμε ότι είναι στα ελληνικά, αλλά
διορθώνουμε μόνο το Λ και όχι τους προηγούμενους χαρακτήρες. Αυτός είναι ένας επιπλέον
λόγος για να προτείνουμε τα ονόματα ετικετών και παραμέτρων να γράφονται με πεζά και όχι
κεφαλαία γράμματα, καθώς τότε είναι εύκολο να ξεχωρίσουμε το <ητμλ> από το <html>.
Οι γραμμές 2-4 αποτελούν ένα σχόλιο. Κάθε σχόλιο ξεκινά με <!- - και τελειώνει με - ->. Τα σχόλια
δεν λαμβάνονται υπόψη από το φυλλομετρητή, αλλά μας βοηθούν στην τεκμηρίωση του κώδικα που
γράφουμε. Είναι καλή πρακτική να γράφουμε σχόλια στον κώδικα που αναπτύσσουμε, ώστε στο
μέλλον να μπορούμε να ανακαλέσουμε τι κάνουμε σε κάθε σημείο του.
Στη γραμμή 5 υπάρχει μια ετικέτα (tag). Η ετικέτα είναι ένα όνομα της γλώσσας HTML, το οποίο
έχει κάποια σημασία για το φυλλομετρητή. Κάθε ετικέτα οριοθετείται από δύο τριγωνικές αγκύλες (
< > ). Παρατηρούμε ότι στη γραμμή 13 υπάρχει μια ετικέτα που μοιάζει με αυτή της γραμμής 5, αλλά
το όνομα της ετικέτας της γραμμής 13 ξεκινά με το χαρακτήρα slash ( / ). Η ετικέτα της γραμμής 5
επισημαίνει την έναρξη ενός στοιχείου (element) και η ετικέτα της γραμμής 13 επισημαίνει τη λήξη
του.
Η γλώσσα HTML είναι λοιπόν μια γλώσσα με την οποία επισημαίνουμε (μαρκάρουμε) το
περιεχόμενο, τα συστατικά ενός εγγράφου, όπως κείμενα, εικόνες, πίνακες, κ.λπ. Έτσι καθορίζουμε
τη σημασία του περιεχομένου και επηρεάζουμε τη μορφοποίησή του. Κάθε έγγραφο HTML
αποτελείται από ένα σύνολο στοιχείων. Κάθε στοιχείο χαρακτηρίζεται από μία ετικέτα έναρξης και
μία ετικέτα λήξης του.
<ετικέτα>περιεχόμενο</ετικέτα>
Στοιχείο
Τα στοιχεία μπορούν να φωλιάζουν το ένα μέσα στο άλλο, αλλά όχι οι ετικέτες. Επιτρέπεται δηλαδή
το εξής:
19
<ετικέτα1><ετικέτα2>περιεχόμενο</ετικέτα2></ετικέτα1>
φωλιασμένα στοιχεία
και το εξής:
<ετικέτα1><ετικέτα2>περιεχόμενο</ετικέτα2><ετικέτα3>περιεχόμενο</ετικέτα3></ετικέτα1>
φωλιασμένα στοιχεία
αλλά όχι το εξής:
<ετικέτα1 <ετικέτα2>>
Είναι καλή πρακτική να γράφουμε κάθε ετικέτα σε χωριστή γραμμή και με αντίστοιχη εσοχή ώστε ο
κώδικας να είναι πιο ευανάγνωστος, βλέποντας τι “ανήκει” που.
<ετικέτα1>
<ετικέτα2>
περιεχόμενο
</ετικέτα2>
</ετικέτα1>
φωλιασμένα στοιχεία
Είναι επίσης καλή πρακτική να “κλείνει” πρώτο το εσωτερικό στοιχείο, όπως προηγουμένως και όχι
όπως παρακάτω:
<ετικέτα1>
<ετικέτα2>
περιεχόμενο
</ετικέτα1>
</ετικέτα2>
φωλιασμένα στοιχεία
Παρατηρούμε ότι ένα έγγραφο HTML είναι ένα στοιχείο, το html, το οποίο αποτελείται από δύο
επιμέρους στοιχεία, το στοιχείο head (κεφαλή) (γραμμές 6-9) και το στοιχείο body (σώμα) (γραμμές
10-12). Στην κεφαλή ορίζονται τα μεταδεδομένα της ιστοσελίδας. Τα μεταδεδομένα είναι
πληροφορίες που αφορούν και περιγράφουν το έγγραφο, όπως τίτλος, συγγραφέας, λέξεις κλειδιά,
κ.α. Στο σώμα ορίζονται τα περιεχόμενα της ιστοσελίδας, δηλαδή το περιεχόμενο του εγγράφου που
εμφανίζεται στο κεντρικό πλαίσιο του παραθύρου του φυλλομετρητή. Το μεγαλύτερο μέρος κώδικα
αφορά όπως είναι λογικό το σώμα της ιστοσελίδας. Ο προσεκτικός όμως καθορισμός των
μεταδομένων βοηθά στον εντοπισμό της από τις μηχανές αναζήτησης, γεγονός που της δίνει
μεγαλύτερη επισκεψιμότητα (Εικόνα 1, στη σελίδα 20 παρακάτω).
Στη γραμμή 7 ορίζεται ο τίτλος της ιστοσελίδας (title). Ο τίτλος είναι πολύ σημαντικός διότι εκτός
από τη γραμμή του τίτλου στο παράθυρο του φυλλομετρητή, εμφανίζεται και στα αποτελέσματα μιας
μηχανής αναζήτησης που έχει εντοπίσει την ιστοσελίδα μας. Έτσι πρέπει να επιλέγεται με μεγάλη
προσοχή. Στη γραμμή 8 ορίζεται ένα επιπλέον μεταδεδομένο (meta) που αφορά την κωδικοποίηση
των χαρακτήρων της ιστοσελίδας.
20
Εικόνα 1: Τίτλος ιστοσελίδας στα αποτελέσματα αναζήτησης και στο φυλλομετρητή
Ο υπολογιστής αντιλαμβάνεται κάθε χαρακτήρα ως ένα κωδικό. Η επιλογή της κατάλληλης
κωδικοποίησης είναι σημαντική διότι αν επιλέξουμε λάθος κωδικοποίηση στη θέση κάθε συμβόλου
θα εμφανίζεται ένα διαφορετικό σύμβολο, ανάλογα με τις ρυθμίσεις εντοπιότητας (χώρα, γλώσσα)
του φυλλομετρητή. Αυτό θα προκαλέσει μεγάλη σύγχυση στον επισκέπτη, ο οποίος μάλλον δεν θα
γνωρίζει πως να αλλάξει την κωδικοποίηση στον φυλλομετρητή του (συνήθως αναφέρεται στις
ρυθμίσεις του φυλλομετρητή ως Κωδικοποίηση Χαρακτήρων/Κειμένου, Character/Text Encoding),
με αποτέλεσμα να εγκαταλείψει την ιστοσελίδα μας (
Εικόνα 2).
21
Εικόνα 2: Λάθος και σωστή κωδικοποίηση χαρακτήρων
Υπάρχουν διαθέσιμες πολλές διαφορετικές κωδικοποιήσεις κειμένου. Η κωδικοποίηση UTF-8
εξασφαλίζει τη σωστή εμφάνιση του κειμένου της ιστοσελίδας σε κάθε περίπτωση. Πρέπει να έχουμε
κατά νου ότι ενώ μια ιστοσελίδα δημιουργείται σε ένα περιβάλλον (π.χ. GNU/Linux ή Microsoft
Windows) προσπελάζεται από πληθώρα διαφορετικών, συχνά ανομοιογενών περιβαλλόντων
(υπολογιστές Macintosh, συσκευές Android, iOS συσκευές με άλλα λειτουργικά συστήματα όπως
τηλεοράσεις, media player, κ.λπ.). Για το λόγο αυτό πρέπει να προσέχουμε κατά την αποθήκευση
του κώδικα, ώστε να επιλέγουμε την αποθήκευσή του σε μορφή UTF-8. Στο Σημειωματάριο αυτό
γίνεται επιλέγοντας το πλαίσιο Κωδικοποίηση (Encoding) κατά την αποθήκευση (Εικόνα 3). Στο
Notepad++ μπορούμε να επιλέξουμε την κωδικοποίηση του κειμένου από το σχετικό μενού (Εικόνα
4).
Εικόνα 3: Επιλογή κωδικοποίησης UTF-8 κατά την αποθήκευση στο Σημειωματάριο
Εικόνα 4: Επιλογή κωδικοποίησης από το μενού στο Notepad++
Με μια πιο προσεκτική ματιά στη γραμμή 8 ανακαλύπτουμε ακόμη δύο κανόνες του συντακτικού
της HTML. Ο πρώτος είναι ότι ορισμένες ετικέτες δεν είναι διπλές. Δεν υπάρχει δηλαδή ετικέτα που
να ορίζει το κλείσιμο, το πέρας ενός στοιχείου. Οι ετικέτες αυτές λέγονται μονές και αποτελούν από
μόνες τους ένα στοιχείο του εγγράφου.
Ο δεύτερος κανόνας είναι ότι οι ετικέτες μπορεί να παίρνουν παραμέτρους. Έτσι η ετικέτα meta έχει
την παράμετρο charset η οποία έχει τιμή “UTF-8”. Παραμέτρους μπορούν να πάρουν τόσο οι μονές,
όσο και οι διπλές ετικέτες. Με αυτό τον τρόπο μπορεί κάθε φορά να διαφοροποιείται η δράση μιας
ετικέτας στο περιεχόμενο που “αγκαλιάζει”. Μια ετικέτα μπορεί να έχει σε κάθε περίπτωση
περισσότερες από μία παραμέτρους, ανάλογα με το τι θέλουμε να πετύχουμε. Όλες οι παράμετροι
περικλείονται μέσα στις τριγωνικές αγκύλες της ετικέτας. Στις διπλές ετικέτες, η ετικέτα κλεισίματος
22
δεν παίρνει ποτέ παραμέτρους.
Μπορεί, όπως αναφέρθηκε, η HTML να μην είναι case sensitive, αλλά είναι καλή πρακτική, αν όχι
τα ονόματα των ετικετών, τουλάχιστο τα ονόματα των παραμέτρων να είναι γραμμένα με πεζά και
όχι κεφαλαία γράμματα. Αυτό συμβάλει στην αναγνωσιμότητα του κώδικα, γεγονός καθοριστικής
σημασίας για την εύκολη ενημέρωση του κώδικα και τον εντοπισμό σφαλμάτων. Καλό είναι επίσης
οι τιμές των παραμέτρων πάντοτε να περικλείονται σε διπλά εισαγωγικά, ώστε οι οδηγίες των
ετικετών να λειτουργούν όπως αναμένεται. Για τον ίδιο λόγο συνιστούμε για κάθε διπλή ετικέτα που
ανοίγει, να γράφεται και αυτή που κλείνει ένα στοιχείο. Αν και δεν απαιτείται, πρέπει να γίνεται ώστε
να αποφεύγονται περιπτώσεις που ο κώδικας που γράφουμε δεν έχει τα αναμενόμενα αποτελέσματα.
Συνοψίζοντας, η σύνταξη κάθε στοιχείου της HTML την εξής γενική μορφή για στοιχεία με διπλές
ετικέτες, με άλλα λόγια, ετικέτες αρχής και τέλους της επισήμανσης:
<ετικέτα παράμετρος1="τιμή1" παράμετρος2="τιμή2" ...>περιεχόμενο</ετικέτα>
στοιχείο
Ενώ ισχύει η εξής γενική μορφή για στοιχεία μονής ετικέτας, δηλαδή χωρίς ετικέτα τέλους της
επισήμανσης, όπου η ετικέτα αποτελεί το σύνολο του στοιχείου:
<ετικέτα παράμετρος1="τιμή1" παράμετρος2="τιμή2" ...>
στοιχείο
Τα αποσιωπητικά (…) σημαίνουν ότι οι παράμετροι μπορεί να είναι κατά περίπτωση, καμία, μία ή
περισσότερες.
Κλείνοντας το πρώτο μας παράδειγμα, αφού αποθηκεύσουμε την ιστοσελίδα μας, μη ξεχνώντας να
ορίσουμε ως κατάληξη την .html, ανοίγουμε το αρχείο του κώδικα με ένα πρόγραμμα φυλλομετρητή
για να δούμε το αποτέλεσμα, όπως φαίνεται στην Εικόνα 5.
Εικόνα 5: Άνοιγμα του αρχείου κώδικα HTML για την Εφαρμογή 1 με το φυλλομετρητή
Χρήσιμη επισήμανση: Αν θέλουμε να δούμε τον πηγαίο κώδικα οποιασδήποτε σελίδας, αρκεί να
πατήσουμε “ταυτόχρονα” τα πλήκτρα Ctrl + U (έχοντας πατημένο το Ctrl, πατούμε το U). Τότε
23
εμφανίζεται ένα παράθυρο με τον πηγαίο κώδικα (Εικόνα 6) ο οποίος παράγει το αποτέλεσμα
που βλέπουμε στο παράθυρο του φυλλομετρητή.
Αυτός είναι και ο κώδικας που αποθηκεύουμε ως τοπικό αρχείο, αν επιλέξουμε να αποθηκεύσουμε
μια ιστοσελίδα που βλέπουμε στο φυλλομετρητή μας. Μπορούμε να δοκιμάσουμε να δούμε τον
κώδικα που κρύβεται πίσω από οποιαδήποτε ιστοσελίδα, χωρίς όμως να αποθαρρυνθούμε, καθώς
είμαστε ακόμη στην αρχή, γνωρίζοντας επιπλέον ότι πολλές επαγγελματικές και μη ιστοσελίδες είναι
δυναμικές. Στις δυναμικές ιστοσελίδες ο δημιουργός δεν γράφει το περιεχόμενο της ιστοσελίδας,
αλλά ένα πρόγραμμα που θα εκτελεστεί στον εξυπηρετητή ιστοσελίδων και θα δημιουργήσει το
περιεχόμενο που θα φτάσει στο φυλλομετρητή μας, τη στιγμή που θα ζητήσουμε να φορτώσουμε τη
συγκεκριμένη ιστοσελίδα. Έτσι ο κώδικας HTML που φτάνει στο φυλλομετρητή μας, τις
περισσότερες φορές δεν είναι ευανάγνωστος. Το ίδιο συμβαίνει και όταν η διαχείριση του
περιεχομένου ενός ιστότοπου υλοποιείται μέσω λογισμικών που ονομάζονται συστήματα διαχείρισης
περιεχομένου (Content Management Systems, CMS). Οι διαχειριστές του περιεχομένου τέτοιων
ιστοτόπων δεν αλλάζουν τον κώδικα των στατικών ή δυναμικών ιστοσελίδων, παρά μόνο χειρίζονται
το περιεχόμενο του ιστότοπου (κείμενα, εικόνες, βίντεο, κ.λπ.), χρησιμοποιώντας τις επιλογές του
εκάστοτε λογισμικού CMS.
Εικόνα 6: Ο πηγαίος κώδικας για την Εφαρμογή 1
Εκτενή αναφορά στα στοιχεία της HTML5 μπορούμε να βρούμε στον ιστότοπο του World Wide
Web Consortium (W3C), της διεθνούς κοινότητας της οποίας το προσωπικό σε συνεργασία με
οργανισμούς και φορείς από όλο τον κόσμο, συνεργάζονται για την ανάπτυξη των προτύπων του
παγκόσμιου ιστού (http://dev.w3.org/html5/html-author/).