HTML, CSS, JavaScript, PHP, MySQLΤΟ ΑΦΕΝΤΙΚΟ ΤΡΕΛΑΘΗΚΕ ΚΑΙ ΤΑ ΔΙΝΕΙ ΤΖΑΜΠΑ!

Εισαγωγή


Πολλοί από σας μπορεί να αναρωτιέστε καμιά φορά πώς λειτουργεί το Internet· δεν μιλώ για το χειρισμό των browsers, αυτό, λίγο πολύ, το ξέρετε. Μιλώ για τα εσωτερικά τού διαδικτύου, δηλαδή τι σημαίνει ιστότοπος (site), τι πάει να πει σελίδα (page), τι είναι η HTML, τι στο καλό σημαίνει JavaScript, γιατί άλλες σελίδες έχουν παρέκταμα html και άλλες php κοκ. Στο παρόν άρθρο θα σας πω πέντε πράγματα σχετικά με τη λογική του Internet, χωρίς, ωστόσο, να έχω πρόθεση ούτε να σας ζαλίσω με πληροφορίες που δεν θα τις χρειαστείτε ποτέ, ούτε βέβαια να γράψω ένα πλήρες δοκίμιο περί διαδικτύου.

Το Internet είναι, λοιπόν, κατ' αρχήν δύο πράγματα:

• Ένα τεράστιο δίκτυο υπολογιστών διάσπαρτων σε όλη την υφήλιο.
• Ένα σύνολο από κανόνες επικοινωνίας που διέπει αυτό το τεράστιο δίκτυο.

Όσον αφορά στο πώς διασυνδέονται (φυσικά) οι υπολογιστές του διαδικτύου δεν θα σας πω πολλά. Κάθε υπολογιστής συνδέεται με κάποιο φυσικό μέσο (καλώδιο, οπτική ίνα, ασύρματα) με ένα κέντρο παροχής υπηρεσιών Internet της περιοχής του, κοινώς με κάποιο κέντρο υπολογιστών και άλλων περίπλοκων ηλεκτρονικών συσκευών (modems, routers, multiplexrs, switches κλπ), που φέρουν την ευθύνη της δρομολόγησης των πληροφοριών από τον κάθε υπολογιστή σε κάποιον άλλον. Τα κέντρα αυτά και οι εταιρείες που τα συντηρούν ονομάζονται ISPs, που πάει να πει Internet Service Providers. Όλα αυτά καθορίζονται με κανόνες (ηλεκτρονικής) επικοινωνίας που ονομάζονται πρωτόκολλα και προεξάρχον πρωτόκολλο σ'αυτό το επίπεδο της φυσικής διασύνδεσης είναι το TCP (transmission control protocol).

Το TCP πρωτόκολλο, προσανατολισμένο όμως σε συνδέσεις που βασίζονται σε αριθμητικές διευθύνσεις, που φέρουν ως ταυτότητες όλοι οι υπολογιστές του διαδικτύου, ονομάζεται TCP/IP, όπου IP σημαίνει Internet Protocol. Στο σημείο αυτό να πούμε ότι η αριθμητική διεύθυνση ενός υπολογιστή είναι μια τετράδα τριψήφιων αριθμών, π.χ. 196.2.158.15, ή 252.188.23.19 κλπ. Απλά θεωρείστε ότι κάθε υπολογιστής που είναι διασυνδεδεμένος στο Internet έχει μια μοναδική αριθμητική τέτοια ταυτότητα που χάριν συντομίας ονομάζεται IP, ενώ το πλήρες όνομα αυτής της ταυτότητας είναι Ineternet Protocol Address. Δεν είναι ακριβώς έτσι τα πράγματα, αλλά εσείς μπορείτε να θεωρήσετε ότι αυτή είναι η γενική ιδέα.

Όταν λοιπόν εσείς γράφετε μια "διεύθυνση" στον δικό σας browser, ζητώντας να σας παρουσιαστεί κάποια συγκεκριμένη "σελίδα", π.χ. www.ypepth.gr, ουσιαστικά αυτό που ζητάτε είναι να σας παρουσιαστεί η "σελίδα" που βρίσκεται στο υπολογιστή με "όνομα" www.ypepth.gr και ο διαχειριστής του υπολογιστού αυτού έχει ορίσει να παρέχεται σε όποιον προσπελάσει τη συγκεκριμένη διεύθυνση. Πού είναι όμως το IP όταν γράφουμε www.ypepth.gr; Πράγματι, καλά κάνετε και ρωτάτε. Όπως καταλαβαίνετε, θα ήταν πολύ δύσκολο να απομνημονεύουμε IPs και να δουλεύουμε με αυτά. Σκεφτείτε αν, αντί να θυμάστε το www.ypepth.gr, έπρεπε να θυμάστε το 253.125.23.99· δεν θα ήταν καθόλου ευχάριστο.

Για το λόγο αυτό, οι πάροχοι υπηρεσιών Internet μέσω των οποίων συνδεόμαστε στο διαδίκτυο, έχουν ως ένα από τα πολλά καθήκοντά τους να μεταφράζουν διευθύνσεις της μορφής www.ypepth.gr σε IPs, δηλαδή σε τετράδες αριθμών που χαρακτηρίζουν μονοσήμαντα τους ζητούμενους κόμβους (υπολογιστές) του web. Πράγματι, όταν "στήνει" κανείς έναν "server" στο διαδίκτυο, πρέπει να συνδέσει το (μοναδικό) IP του αντίστοιχου υπολογιστή, π.χ. 212.53.192.18, με μια "ανθρώπινη" διεύθυνση, π.χ. www.ypepth.gr. Αυτό το αναλαμβάνουν διεθνείς υπηρεσίες που έναντι κάποιας αμοιβής ελέγχουν τη μοναδικότητα των διευθύνσεων και σας καταχωρούν στους κεντρικούς υπολογιστές του διαδικτύου, τους οποίους με τη σειρά τους συμβουλεύονται οι διάφοροι πάροχοι ανά την υφήλιο, π.χ. ο ΟΤΕ, η Forthnet, η Google κλπ.

Μέσω λοιπόν αυτών των περίπλοκων διαδικασιών στήνεται όλο αυτό το τεράστιο δίκτυο υπολογιστών που ονομάζεται Internet. Δεν θα ασχοληθούμε άλλο με το Inetrnet ως φυσικό μέσο (δίκτυο), καθώς πιστεύω ότι το κομμάτι αυτό του διαδικτύου είναι αρκετά τεχνικό και δεν προσφέρει κάποια χρήσιμη γνώση στους χρήστες του διαδικτύου. Βεβαίως, για τους επαγγελματίες της πληροφορικής και των τηλεπικοινωνιών είναι εκ των ων ουκ άνευ να γνωρίζουν άριστα τα εσωτερικά του Internet ως φυσικού μέσου. Αλλά για μας, τους απλούς χρήστες και τους προγραμματιστές, τα πράγματα είναι πολύ ευκολότερα.

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

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

 Από το κεφάλαιο αυτό αρκεί να θυμόμαστε ότι όλη η πληροφορία που διακινείται στο διαδίκτυο αποστέλλεται, δρομολογείται και παραλαμβάνεται μέσω του πρωτοκόλλου TCP/IP, το οποίο είναι υπεύθυνο για τον κατακερματισμό της πληροφορίας σε μικρά "πακέτα", όπου το κάθε "πακέτο" αποκτά κάποια "ετικέτα" και ρίχνεται στο χάος του διαδικτύου με στόχου να φτάσει μέσω περίπλοκων διαδρομών και διαδικασιών στον προορισμό του, όπου το TCP/IP αναλαμβάνει και πάλι την ανασύνθεση των "πακέτων" και την τελική παραλαβή της πληροφορίας. Η ετικέτα ενός πακέτου πληροφορίας που κυκλοφορεί στο διαδίκτυο περιλαμβάνει τελείως τεχνικές πληροφορίες, όπως τη διεύθυνση IP αποστολής και παραλαβής, έναν κωδικό ευρύτερης ενότητας πληροφορίας από την οποία  προήλθε το "πακέτο", την "τάξη" του συγκεκριμένου "πακέτου" μέσα σε αυτήν την ενότητα (πρώτο, δεύτερο, τρίτο, εκατοστό κλπ), το μέγεθος της πληροφορίας που περιλαμβάνει, στοιχεία ελέγχου ορθότητας του περιεχομένου κλπ.

---

Τι στο καλό είναι το hypertext;


Ας περάσουμε όμως τώρα στο δεύτερο και οπωσδήποτε πιο ενδιαφέρον κομμάτι της λειτουργίας του διαδικτύου, αυτό που έχει να κάνει με ιστότοπους, σελίδες, γλώσσες προγαμματισμού και γλώσσσες γραφής υπερ–κειμένου (hypertext), όπως επίσης και με τα πρωτόκολλα που διέπουν τη διακίνηση της πληροφορίας στο Internet σε επίπεδο ανώτερο από αυτό της φυσικής διασύνδεσης, δηλαδή σε επίπεδο περιεχομένου. Όταν μιλάμε για ανταλλαγή πληροφορίας στο διαδίκτυο, ουσιαστικά μιλάμε για την μετάδοση ενός μείγματος πληροφορίας και κανόνων εμφάνισης αυτής της πληροφορίας σε ένα ενιαίο κείμενο το οποίο ονομάζεται hypertext, ή κατά το ελληνικότερο, υπερ–κείμενο. Hypertext είναι λοιπόν ένα κείμενο που περιέχει πληροφορία και εμφυτευμένους κανόνες που αφορούν στην πληροφορία αυτή.

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

Λοιπόν τα προγράμματα τα οποία υπάρχουν στους υπολογιστές, που παραλαμβάνουν και αποστέλλουν πληροφορία από και προς το διαδίκτυο ονομάζονται Internet browsers, ή απλά browsers και σίγουρα γνωρίζετε κάποιον από αυτούς. Οι πιο γνωστοί browsers είναι ο Internet Explorer, ο Mozilla Firefox, ο Safari και ο Opera. Βεβαίως και ο Chrome της Google. Για την ιστορία να πούμε ότι παλιότερα ο πιο διαδεδομένος browser ήταν ο NetScape, ο οποίος μετεξελίχτηκε στον Firefox της Mozilla. Πιο διαδεδομένος στους χρήστες του διαδικτύου, χωρίς απαραίτητα να είναι ο καλύτερος, έρχεται με διαφορά ο Internet Explorer (IE). Η τεράστια διάδοση του IE οφείλεται περισσότερο στο ότι είναι προϊόν της Microsoft και διατίθεται ως προεπιλεγμένος browser μαζί με τα Windows, παρά στις δυνατότητές του που είναι μάλλον περιορισμένες σε σχέση με όλους τους υπόλοιπους browsers, ενώ η ποιότητα εμφάνισης των ιστοσελίδων είναι σαφώς κατώτερη από αυτήν των Opera και Safari. Ένα τεράστιο μειονέκτημα του IE είναι ότι είναι πρόγραμμα κλειστού κώδικα, ενώ τρέχει αποκλειστικά στα Windows και όχι σε άλλα λειτουργικά.

Ο browser είναι λοιπόν το πρόγραμμα που τρέχουμε στον υπολογιστή μας και το οποίο μας διευκολύνει στο να ζητάμε πληροφορίες από το διαδίκτυο, αλλά, πιο σημαντικό, μας παρουσιάζει τις πληροφορίες αυτές με πολύ ευχάριστο και αποδοτικό τρόπο. Πώς γίνεται όμως αυτό; Πώς καταφέρνει ο browser να δείξει με έντονα γράμματα τα σημαντικά στοιχεία της ταυτότητάς μου, π.χ. Παπαδόπουλος, Παναγιώτης κλπ, ενώ τα επουσιώδη, όπως Όνομα, Ημ. Γέννησης κλπ, να φαίνονται πιο αχνά ή ακόμη και με άλλο χρώμα ή άλλη γραμματοσειρά; Ήρθε, λοιπόν, η ώρα να εξηγήσουμε τι σημαίνει hypertext και πώς το hypertext μπορεί να περιέχει τις πληροφορίες που μας ενδιαφέρουν μαζί με κανόνες που αφορούν στην παρουσίαση της πληροφορίας αυτής. Για το σκοπό αυτό θα σας δείξω ένα κείμενο το οποίο περιέχει, μεταξύ άλλων, ένα τμήμα από τα στοιχεία της ταυτότητάς μου:

<επουσιώδες>Επίθετο: </επουσιώδες><σημαντικό>Παπαδόπουλος</σημαντικό>
<επουσιώδες>Όνομα: </επουσιώδες><σημαντικό>Παναγιώτης</σημαντικό>

Το παραπάνω κείμενο δεν περιέχει μόνο σημαντικές πληροφορίες από τα στοιχεία της ταυτότητάς μου. Περιέχει και κάποιες λέξεις κλειδιά γραμμένες με έναν ειδικό τρόπο που περιγράφουν τη φύση και κατ' επέκταση τον τρόπο παρουσίασης της πληροφορίας αυτής, δηλαδή είναι ένα υπερ–κείμενο, ένα hypertext. Έτσι λοιπόν, αν υποθέσουμε ότι η λέξη κλειδί <επουσιώδης> σημαίνει πως ό,τι ακολουθεί από εκεί και μετά θα γράφεται με πλάγια απλά γράμματα χωρίς ιδιαίτερη έμφαση, και ότι αυτό θα ισχύει μέχρι τη λήξη της εν λόγω προδιαγραφής που σηματοδοτείται με τη λέξη κλειδί </επουσιώδης>, τότε θα έχω παρουσίαση των λέξεων Επώνυμο: και Όνομα: με πλάγια γράμματα χαμηλού βάρους. Αντίθετα, οι λέξεις κλειδιά <σημαντικό> και </σημαντικό> δηλώνουν αντίστοιχα την αρχή και το τέλος παρουσίασης πληροφορίας ιδιαίτερης βαρύτητας που θα πρέπει να παρουσιαστεί από τον browser με έντονα γράμματα καλλιγραφικής γραμματοσειράς, π.χ. Παπαδόπουλος, Παναγιώτης.

Ο browser είναι λοιπόν ένα πρόγραμμα που οφείλει, εκτός όλων των άλλων εκπληκτικών δυνατοτήτων που πρέπει να έχει, να μπορεί να "καταλάβει" την ειδική αυτή γλώσσα που χρησιμοποιούμε για να γράψουμε την πληροφορία ως hypertext και η οποία ονομάζεται HTML, ή HyperText Markup Language, που πάει να πει συμβολική γλώσσα γραφής υπερ–κειμένου. Για να μπορεί βέβαια ο browser να "καταλάβει" και να παρουσιάσει σωστά την πληροφορία που παραλαμβάνει ως hypertext, θα πρέπει να υπάρχουν σαφείς κανόνες που να διέπουν τη συμβολική αυτή γραφή.

---

HTML


Το συντακτικό και οι γενικότεροι κανόνες γραφής του hypertext ακολουθούν σήμερα ένα σύνολο κανόνων που ονομάζεται HTML. Πρόκειται για αρκτικόλεξο που σημαίνει HyperText Markup Language, δηλαδή το όνομα της "γλώσσας" δείχνει ακριβώς και τη λειτουργία της: Γλώσσα Συμβολισμού Υπερ–κειμένων. Η γλώσσα HTML δεν είναι, φυσικά, η μόνη γλώσσα που περιγράφει κανόνες εμφύτευσης εντολών, μέσα σε κείμενο πληροφορίας. Υπάρχουν αμέτρητες τέτοιες γλώσσες γραφής hypertext. Η HTML είναι απλώς μια από τις δεκάδες παρόμοιες γλώσσες, αλλά έχει τεράστιο πεδίο εφαρμογής, κθώς επελέγη και εξελίχθηκε από τους προγραμματιστές ως η γλώσσα που χρησιμοποιείται για την εμφύτευση εντολών μέσα σε πληροφορία που διακινείται στον παγκόσμιο ιστό. Επομένως, η HTML, είναι η γλώσσα που θα πρέπει να γνωρίζει κανείς ώστε να διαμορφώσει την πληροφορία που προορίζεται για το διαδίκτυο.

Φυσικά, την HTML πρέπει να τη γνωρίζουν άριστα όχι μόνο οι προγραμματιστές ή άλλοι συντάκτες διαδικτυακών "σελίδων", αλλά κυρίως οι browsers που προορίζονται να αντιλαμβάνονται το hypertext και να το παρουσιάζουν όπως πρέπει στις οθόνες ή σε άλλα μέσα των χρηστών του web. Να θυμίσουμε στο σημείο αυτό ότι ο όρος web σημαίνει ιστός και υποδηλώνει ακριβώς τον παγκόσμιο διαδικτυακό ιστό του Internet που ονομάζεται και www από τις λέξεις World Wide Web. Επομένως αυτοί που πρέπει να γνωρίζουν την HTML είναι οι συντάκτες των "σελίδων" που κυκλοφορούν στο διαδίκτυο και τα προγράμματα που αποκωδικοποιούν αυτές τις σελίδες. Οι συντάκτες των διαδικτυακών "σελίδων" είναι συνήθως άνθρωποι, προγραμματιστές ή άλλοι, ενώ οι παραλήπτες / αποκωδικοποιητές / παρουσιαστές των "σελίδων" είναι πάντα προγράμματα (browsers).

Γιατί όμως λέμε ότι οι συντάκτες των "σελίδων" συνήθως είναι άνθρωποι; Υπάρχει περίπτωση μια "σελίδα" πληροφορίας να μην έχει γραφεί ή συνταχθεί από άνθρωπο; Η απάντηση είναι ναι! Μπορεί αυτό να φαντάζει λίγο παράξενο στην αρχή, αλλά σκεφτείτε την περίπτωση κατά την οποία ζητάτε από το διαδίκτυο να σας παρουσιάσει μια "σελίδα" στην οποία εμφανίζονται τα αποτελέσματα των πανελλαδικών εξετάσεων. Είναι προφανές ότι τη συγκεκριμένη "σελίδα" δεν την έχει γράψει κάποιος με το χέρι, αλλά έχει προκύψει μέσα από άλλα προγράμματα υπολογιστών οι οποίοι διαχειρίζονται τα αποτελέσματα των εξετάσεων που κάποιοι (άνθρωποι) καταχώρησαν στους υπολογιστές του Υπουργείου Παιδείας. Παρόμοια, όταν ζητάτε από τους υπολογιστές του Υπουργείου Οικονομικών να δείτε το έντυπο Ε9 ή το εκκαθαριστικό της εφορίας σας, είναι προφανές ότι κανένας δεν έχει κάτσει να συντάξει εκατομμύρια HTML ιστοσελίδες με τις πληροφορίες αυτές, αλλά οι σελίδες αυτές απλώς "κατασκευάζονται" από τα προγράμματα του Υπουργείου Οικονομικών, κάθε φορά που εσείς ζητάτε τις συγκεκριμένες πληροφορίες, με βάση τα δεδομένα που έχουν καταχωρηθεί από τους χειριστές και τις χειρίστριες του Υπουργείου σε προηγούμενο και ανύποπτο χρόνο.

Επειδή πιστεύω ότι έχετε αρχίσει να χάνετε κάπως το νήμα, θα επανέλθουμε για λίγο στο παράδειγμα της ταυτότητας. Μπορεί να πιστεύετε ότι είναι δύσκολο να καταλάβετε τι ακριβώς είναι η HTML, ή πώς ακριβώς γράφεται μια ιστοσελίδα (ιστοσελίδα είναι μια "σελίδα" hypertext γραμμένη με τους κανόνες της HTML), αλλά θα διαπιστώσετε ότι δεν πρόκειται για τίποτα πιο περίπλοκο από το να γράψει κανείς οποιοδήποτε άλλο είδος κειμένου. Αν μπορείτε, λοιπόν, να γράψετε και να αποθηκεύσετε στον υπολογιστή σας κάποιο κείμενο, μπορείτε πολύ απλά να συντάξετε και μια ιστοσελίδα. Ακολουθώντας τη λαϊκή ρήση «Ιδού η Ρόδος, ιδού και το πήδημα», θα προχωρήσουμε ευθύς αμέσως στη συγγραφή της πρώτης μας ιστοσελίδας.

Η πρώτη μας ιστοσελίδα

Για να συντάξουμε την πρώτη μας ιστοσελίδα θα χρειαστούμε κάποιο πρόγραμμα το οποίο θα μας βοηθήσει να γράψουμε και να αποθηκεύσουμε κείμενο στον υπολογιστή μας. Ίσως γνωρίζετε το Word της Microsoft, ή κάποιο άλλο πρόγραμμα επεξεργασίας κειμένου, αλλά δεν σας συνιστώ να χρησιμοποιήσετε ένα τέτοιο πρόγραμμα για να συντάξετε μια ιστοσελίδα. Ο λόγος είναι απλός: τα προγράμματα επεξεργασίας κειμένου, όπως είναι ο Word, εκτελούν από μόνα τους κάποιο είδος επεξεργασίας που αφορά στο φορμάρισμα και στη σελιδοποίηση του κειμένου, εξάλλου αυτός είναι και ο προορισμός τους. Επειδή όμως προτιθέμεθα να συντάξουμε ιστοσελίδα την οποία θα αναλάβει να διαβάσει, να αποκωδικοποιήσει και να παρουσιάσει, τελικά, κάποιος browser, δεν θα θέλαμε το πρόγραμμα με το οποίο θα γράψουμε την ιστοσελίδα μας να κάνει από μόνο του οποιοδήποτε είδος άλλης επεξεργασίας.

Επομένως, αυτό που χρειαζόμαστε αυτή τη στιγμή είναι ένας απλός editor που το το μόνο που κάνει είναι να μας βοηθά να γράψουμε και να αποθηκεύσουμε κείμενο, χωρίς, ωστόσο, να εκτελεί απολύτως καμία επεξεργασία στο κείμενο το οποίο εισάγουμε. Υπάρχουν αμέτρητα τέτοια προγράμματα, αλλά εφόσον ο υπολογιστής σας τρέχει τα Windows, μπορείτε απλώς να χρησιμοποιήσετε το Notepad  που παρέχεται δωρεάν (το Notepad είναι το "Σημειωματάριο" που θα βρείτε στα "Βοηθήματα" των Windows). Ο βασιλιάς των editors είναι βέβαια ο Vim, αλλά δεν νομίζω ότι είναι ώρα να ασχοληθείτε τώρα με αυτό το εξαιρετικό πρόγραμμα. Ανοίξτε, λοιπόν, το Notepad και γράψτε το παρακάτω κείμενο:

<html>
<head>
</head>
<body>
Αυτή είναι η πρώτη μου ιστοσελίδα!
</body>
</html>

Μην βάλετε τα κενά που έχω βάλει στην αρχή κάθε γραμμής, δεν είναι απαραίτητα· τα έβαλα απλώς για να διευκολύνω την αναγνωσιμότητα του κειμένου. Ας εξετάσουμε το παραπάνω κείμενο. Αρχίζει με μια εντολή HTML. Οι εντολές HTML είναι λέξεις κλειδιά, συνήθως γραμμένες ανάμεσα σε "<" και ">", που εμφυτεύονται ανάμεσα στην πραγματική πληροφορία που περιέχει μια ιστοσελίδα. Για παράδειγμα, η μόνη "πραγματική", δηλαδή ουσιαστική πληροφορία, που περιέχει το παραπάνω κείμενο είναι η φράση: "Αυτή είναι η πρώτη μου ιστοσελίδα!". Όλα τα υπόλοιπα αποτελούν σύμβολα (markups)  και εντολές της HTML που περιγράφουν τον τρόπο παρουσίασης της πραγματικής πληροφορίας.

Πρώτη και καλύτερη είναι λοιπόν η εντολή <html> η οποία δηλώνει ρητά και κατηγορηματικά ότι το κείμενο που ακολουθεί είναι HTML hypertext και δεν είναι κάποιο άλλο κείμενο που δόθηκε κατά λάθος, ή κακόβουλα, σε έναν browser για παρουσίαση. Πρώτος λοιπόν κανόνας της HTML: όλες οι ιστοσελίδες μας πρέπει να ξεκινούν με την εντολή <html>. Συνήθως, οι εντολές HTML έχουν και τις αντίστοιχες εντολές "κλεισίματος", με τις οποίες "κλείνει" κάποια ενότητα που "άνοιξε" με κάποια προηγούμενη HTML εντολή. Στον κανόνα αυτό υπακούει και η ίδια η <html> εντολή. Έτσι, στο τέλος της πρώτης μας ιστοσελίδας θα δείτε ότι υπάρχει εντολή </html> με την οποία κλείνουμε την ενότητα που ανοίξαμε με την αρχική <html>.

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

Υπάρχει λοιπόν πολύ σοβαρή πιθανότητα η σελίδα να μην παραληφθεί σωστά, ή μπορεί ο προγραμματιστής, ή το πρόγραμμα που συνέταξε τη σελίδα να μην την έχει ολοκληρώσει. Αυτή η πιθανότητα είναι πιο μεγάλη στην περίπτωση που μια ιστοσελίδα συντάσσεται από κάποιο πρόγραμμα, παρά στην περίπτωση που συντάσσεται από κάποιον προγραμματιστή ή άλλο χρήστη της HTML. Πράγματι, πολλές φορές, τα προγράμματα δεν λειτουργούν σωστά, "κρεμάνε", ή "κολλάνε" με αποτέλεσμα η σύνταξη μιας ιστοσελίδας να μην ολοκληρωθεί. Στην περίπτωση αυτή είναι προφανές ότι το τελικό </html> θα λείπει από την ιστοσελίδα, οπότε ο browser που πιθανόν να παραλάβει τελικά την ιστοσελίδα, έστω και μισή, να καταλάβει ότι κάτι δεν πήγε καλά και να μην παρουσιάσει καθόλου τη σελίδα αυτή· αντ' αυτού θα παρουσιάσει κάποιο μήνυμα που θα λέει ότι η ιστοσελίδα δεν είναι διαθέσιμη, ή ότι είναι κατεστραμμένη κλπ.

Είναι λοιπόν συνήθης τακτική στην HTML, μια ενότητα που ανοίγει με μια εντολή, π.χ. <εντολή>, να κλείνει με αντίστοιχη εντολή που συνήθως είναι της μορφής </εντολή>, δηλαδή με την ίδια ακριβώς κωδική λέξη, βάζοντας πριν από την κωδική λέξη μια πλάγια κάθετο (/). Άρα η εντολή <div> θα "κλείσει" κάποια στιγμή με την εντολή </div>, η εντολή <b> θα "κλείσει" με την </b> κοκ. Υπάρχουν, βέβαια και κάποιες εντολές που δεν απαιτούν αντίστοιχο κλείσιμο, αλλά προς το παρόν θα αγνοήσουμε αυτές τις εντολές.

Επιστρέφουμε λοιπόν στην πρώτη μας ιστοσελίδα και βλέπουμε ότι μετά την εντολή <html> ακολουθεί η εντολή <head>. Αυτή είναι σχεδόν πάντα η πρώτη εντολή που θα βρούμε σε μια ιστοσελίδα αμέσως μετά την εντολή <html>. Σημαίνει ότι από το σημείο αυτό και μετά, περιλαμβάνεται πληροφορία που δεν αφορά τόσο στο περιεχόμενο, δηλαδή στην ουσιαστική πληροφορία που περιέχει μια ιστοσελίδα, αλλά πληροφορία που περιγράφει διάφορα χαρακτηριστικά της ίδιας της ιστοσελίδας, π.χ. το favicon, τον τίτλο που θα εμφανίζεται στο πάνω μέρος του παραθύρου του browser, τις λέξεις που θα βοηθήσουν τις μηχανές αναζήτησης της Google, της Yahoo! κλπ να ευρετηριάσουν την ιστοσελίδα κλπ. Όλες αυτές οι πληροφορίες που αφορούν τα γενικά χαρακτηριστικά της ιστοσελίδας και όχι το ίδιο το περιεχόμενό της, ονομάονται μεταπληροφορίες, ή μεταπληροφορία. Εμείς δεν έχουμε να δώσουμε (προς το παρόν) καμία τέτοια πληροφορία στην πρώτη μας ιστοσελίδα. Επομένως ακολουθεί αμέσως η εντολή κλεισίματος της ενότητας αυτής (που ονομάζεται header, δηλαδή επικεφαλίδα). Φυσικά, η εντολή που κλείνει την ενότητα που ξεκινήσαμε με την εντολή <head> είναι η εντολή </head>. Απλά και καθαρά…

Αμέσως μετά ακολουθεί η εντολή <body>, με την οποία λέμε στον browser ότι από το σημείο αυτό αρχίζει η παράθεση της ουσιαστικής πληροφορίας. Φυσικά, η ενότητα αυτή θα κλείσει αργότερα με την εντολή </body>. Αμέσως μετά την εντολή <body> υπάρχει η φράση: «Η πρώτη μου ιστοσελίδα!». Πρόκειται για κείμενο που αποτελεί πραγματική πληροφορία (δεν είναι HTML εντολή) και θα παρουσιαστεί από τον browser στην οθόνη του υπολογιστή μας. Ακολουθεί η εντολή </body> που κλείνει το "σώμα" της ιστοσελίδας, δηλαδή την ενότητα εκείνη στην οποία παρατίθεται η πραγματική πληροφορία της ιστοσελίδας μας, και αμέσως μετά ακολουθεί η εντολή </html> που κλείνει την ίδια την ιστοσελίδα. Αν υπάρχει κάτι κάτω από αυτή την εντολή, ο browser απλώς το αγνοεί.

Ας δοκιμάσουμε όμως τώρα την πρώτη μας ιστοσελίδα. Επιλέξτε από το Notepad, ή όποιον άλλον editor χρησιμοποιήσατε, την εντολή "Αρχείο" και κάντε "Αποθήκευση ως…" δίνοντας κάποιο όνομα στο αρχείο στο οποίο θα αποθηκεύσετε την ιστοσελίδα σας, π.χ. "proti.html" στο φάκελο "Τα Έγγραφά μου". Το όνομα του αρχείου μπορεί να φέρει οποιοδήποτε παρέκταμα, αλλά προς το παρόν είναι σημαντικό να δίνετε ονόματα με παρέκταμα ".html". Αυτό θα βοηθήσει το λειτουργικό σας να καταλάβει ότι πρόκειται για ιστοσελίδες HTML, οπότε όταν κάνετε διπλό κλικ πάνω σε τέτοια αρχεία θα εκκινήσει ο προεπιλεγμένος σας browser, ο οποίος θα διαβάσει και θα παρουσιάσει την ιστοσελίδα στην οθόνη του υπολογιστή σας. Μια παρένθεση για όσους από εσάς, παρά τις προειδοποιήσεις μου, επιλέξατε να χρησιμοποιήσετε το Word της Microsoft. Αν, λοιπόν, γράψατε την πρώτη σας ιστοσελίδα χρησιμοποιώντας το Word, θα πρέπει να αποθηκεύσετε το αρχείο όχι ως .html, αλλά ως .txt και κατόπιν να το μετονομάσετε αλλάζοντας το παρέκταμα από .txt σε .html. Ακόμη δεν το κάνατε; Μη χάνετε χρόνο! Αποθηκεύστε το αρχείο και κατόπιν μεταβείτε στη θέση "Τα Έγγραφά μου" και κάντε διπλό κλικ στο αρχείο "proti.html".

Αν η σελίδα σας δεν έχει εμφανιστεί στην οθόνη του υπολογιστή σας, τότε κάτι δεν έχετε κάνει καλά, οπότε κοιτάξτε πάλι το όνομα του αρχείου και το περιεχόμενό του. Εφόσον έχετε ακολουθήσει πιστά τις οδηγίες που σας έδωσα παραπάνω πρέπει να έχει εκκινήσει ο browser που συνήθως χρησιμοποιείτε για να περιδιαβαίνετε στο web και να έχετε την πρώτη σας ιστοσελίδα στην οθόνη του υπολογιστή σας! Μπράβο, είστε αξιέπαινοι. Μόλις καταφέρατε κάτι πολύ σημαντικό! Επειδή όμως τρώγοντας έρχεται η όρεξη, κλείστε τη σελίδα (κάποιο "x" στο πάνω δεξιά μέρος της αντίστοιχης καρτέλας του browser θα σας βοηθήσει να κλείσετε την ιστοσελίδα) και ανοίξτε εκ νέου το αρχείο με το Notepad, κάνοντας τις παρακάτω διορθώσεις:

<html>
<head>
</head>
<body>
<b>
Αυτή είναι η πρώτη μου ιστοσελίδα!
</b>
</body>
</html>

Προσθέστε, δηλαδή, μια εντολή <b> πριν τη φράση «Η πρώτη μου ιστοδελίδα!» και αμέσως μετά "κλείστε" την ενότητα που μόλις ανοίξατε, με την αντίστοιχη εντολή </b>. Η εντολή <b> δηλώνει στον browser ότι από εδώ και κάτω το κείμενο θα εμφανίζεται με έντονη γραφή (bold). Αντίστοιχα η εντολή </b> κλείνει μια ενότητα έντονης γραφής. Σώστε πάλι το αρχείο και κάντε διπλό κλικ στο αρχείο. Θα πρέπει να εμφανιστεί η ίδια καρτέλα στην οθόνη του υπολογιστή σας, μόνο που τώρα τα γράμματα πρέπει να είναι εμφανώς εντονότερα από πριν, όπως ακριβώς δηλώσαμε με την εντολή <b>. Τώρα θα κάνουμε κάτι παρόμοιο δηλώνοντας έντονη γραφή μόνο σε μέρος της φράσης μας, ώστε να δείτε καλύτερα την αλλαγή από κανονική σε έντονη γραφή και το αντίθετο:

<html>
<head>
</head>
<body>
Αυτή είναι η <b>πρώτη</b> μου ιστοσελίδα!
</body>
</html>

Ακολουθήστε πάλι τα ίδια βήματα που κάνατε πριν: σώστε το αρχείο και κάντε διπλό κλικ πάνω στο αρχείο. Θα δείτε στην οθόνη του υπολογιστή σας τη φράση «Η πρώτη μου ιστοσελίδα!», όπου η λέξη «πρώτη» είναι γραμμένη με έντονη γραφή, όπως ακριβώς δηλώσαμε με τις εντολές <b> και </b> της HTML. Ήρθε όμως η ώρα να μεγαλώσουμε κάπως τα γράμματα με τα οποία τυπώνουμε την πρώτη μας ιστοσελίδα. Κλείστε την καρτέλα και ανοίξτε πάλι το αρχείο με το Notepad. Στο σημείο αυτό να σας πω ότι δεν είναι ανάγκη να μπαινοβγαίνετε συνεχώς στο Notepad και να ανοιγοκλείνετε καρτέλες στον browser. Μπορείτε απλώς να σώζετε το νέο περιεχόμενο του αρχείου, χωρίς να βγαίνετε από το Notepad, ενώ για να δείτε το αποτέλεσμα των αλλαγών που κάνετε, δεν είναι ανάγκη να κάνετε πάντα διπλό κλικ στο αρχείο· μπορείτε απλώς να κάνετε ανανέωση της σελίδας με το αντίστοιχο πλήκτρο του browser που χρησιμοποιείτε· στον IE είναι δύο κυκλικά βελάκια, ενώ στον Firefox είναι ένα κυκλικό βέλος. Διορθώστε λοιπόν το αρχείο, σώστε το περιεχόμενο (εντολή "Αποθήκευση")  και κάντε ανανέωση στον browser:

<html>
<head>
</head>
<body>
<span style="font-size: large">
Αυτή είναι η <b>πρώτη</b> μου ιστοσελίδα!
</span>
</body>
</html>

Η εντολή <span…> που προσθέσαμε ακριβώς πριν την φράση «Η πρώτη μου ιστοσελίδα!», δηλώνει στον browser ότι το κείμενο που ακολουθεί θα έχει μεγάλο μέγεθος γραμμάτων. Πρόκειται για εντολή γενικής χρήσης με την οποία μπορούμε να καθορίσουμε εκατοντάδες χαρακτηριστικά του κειμένου που ακολουθεί (θα μπορούσαμε να δηλώσουμε και την έντονη γραφή με μια εντολή <span>, αλλά η εντολή <b> είναι πιο απλή). Τις όποιες αλλαγές καθορίζουμε με μια εντολή <span> τις ακυρώνουμε αργότερα με  αντίστοιχη εντολή </span>. Η εντολή <span> δεν πάει ποτέ μόνη της αλλά συνοδεύεται πάντα από άλλες λέξεις κλειδιά με τις οποίες δηλώνουμε τις αλλαγές που επιθυμούμε. Εδώ θα πρέπει κανείς να ξέρει όλες αυτές τις λέξεις κλειδιά και τη σημασία τους ώστε να μπορεί να επιφέρει τις αλλαγές που επθυμεί. Στη δική μας περίπτωση, αμέσως μετά το span ακολουθεί το stlye="font-size: large", πράγμα που σημαίνει ότι με το span που ξεκινάμε προτιθέμεθα να αλλάξουμε το στιλ γραφής (style=…), και ειδικότερα το μέγεθος των γραμμάτων (font-size).

Πιο συγκεκριμένα, δηλώνουμε ότι επιθυμούμε μεγάλο μέγεθος γραμμάτων δίνοντας τις κωδικές λέξεις: "font-size: large". Σώστε το αρχείο και κάντε ανανέωση στη σελίδα σας. Θα πρέπει να δείτε τα ίδια πράγματα που είδατε και πριν, μόνο που τώρα τα γράμματα είναι μεγαλύτερα. Αλλάξτε πάλι τη σελίδα δίνοντας αντί για "font-size: large", "font-size: x-large". Έτσι δηλώνουμε στον browser ότι θέλουμε πολύ μεγάλα γράμματα. Μπορούμε να καθορίσουμε και ακόμη μεγαλύτερα (extra extra large) γράμματα με την εντολή "font-size: xx-large". Είναι όμως ώρα να κάνουμε διάλειμμα, οπότε θα πρέπει να δώσουμε μια πιο ευχάριστη νότα στη σελίδα μας, φορτώνοντας μια φωτογραφία. Για να φορτώσετε κάποια φωτογραφία, ή εικόνα γενικότερα, σε μια ιστοσελίδα, θα πρέπει κατ' αρχήν να έχετε αποθηκευμένη την εικόνα στον υπολογιστή σας ή σε κάποιον άλλον υπολογιστή στο web.

Θα εξετάσουμε και τις δυο περιπτώσεις. Πρώτα θα "ανεβάσουμε" μια εικόνα που έχουμε αποθηκευμένη σε κάποιο σημείο των σκληρών δίσκων του υπολογιστή μας. Φαντάζομαι ότι έχετε κάποιες φωτογραφίες σας αποθηκευμένες στον υπολογιστή σας. Αν δεν έχετε, δεν πειράζει. Μπορείτε να "κατεβάσετε" εύκολα εικόνες από το διαδίκτυο. Αν δεν έχετε λοιπόν δικές σας φωτογραφίες αποθηκευμένες στον υπολογιστή σας, μπείτε στις εικόνες του Google, δώστε κάποιο θέμα και εντοπίστε κάποια φωτογραφία που σας αρέσει. Κάντε κλικ στη φωτογραφία που επιλέξατε, δώστε "προβολή πλήρους μεγέθους" και, εφόσον έχετε μπροστά σας κάποια φωτογραφία με ικανοποιητικό μέγεθος (όχι μικρογραφία), πατήστε δεξί κλικ πάνω στην εικόνα. Θα εμφανιστεί μενού από το οποίο μπορείτε να διαλέξετε "Αποθήκευση εικόνας ως…" και να αποθηκεύσετε την εικόνα στον υπολογιστή σας. Αποθηκεύστε, λοιπόν, την εικόνα που επιλέξατε στο φάκελο "Οι Εικόνες μου", με το όνομα "proti.jpg".

Αφού κάνετε όλη την παραπάνω διαδικασία διορθώστε τη σελίδα σας ως εξής:

<html>
<head>
</head>
<body>
<span style="font-size: large">
Αυτή είναι η <b>πρώτη</b> μου ιστοσελίδα!
</span>
<img src="file:///C:/"file:///C:/Documents and Settings/panos/Τα έγγραφά μου/Οι εικόνες μου/proti.jpg">
</body>
</html>

Μην αφήσετε κενά, ούτε να αλλάξετε γραμμή μέσα στο όνομα του αρχείου εικόνας. Γράψτε το όπως ακριβώς είναι και αφήστε το Notepad να αλλάξει μόνο του γραμμή. Εννοείται ότι στο σημείο του ονόματος που αναφέρεται η λέξη panos, θα εμφανίζεται το δικό σας όνομα. Με την εντολή <img…> δηλώνουμε στον browser ότι θέλουμε σ' αυτό το σημείο να εμφανιστεί η εικόνα που έχουμε αποθηκευμένη σε αρχείο με το όνομα που καθορίζουμε με την κωδική λέξη "src=…". Σώστε τη σελίδα και κάντε ανανέωση. Θα πρέπει να εμφανιστεί η εικόνα που καθορίσατε, αμέσως μετά τη φράση «Η πρώτη μου ιστοσελίδα!». Αν στη θέση της εικόνας εμφανιστεί ένα παράξενο εικονίδιο, αυτό σημαίνει ότι δεν καθορίσατε σωστά το όνομα του αρχείου στο οποίο αποθηκεύσατε την εικόνα. Ελέγξτε το όνομα του αρχείου, όπως επίσης και το αν έχετε όντως αποθηκεύσει την εικόνα σ' αυτό το αρχείο.

Να σας πω ότι το πρόθεμα "file:///" που βάζουμε μπροστά από το όνομα του αρχείου σημαίνει ότι η εικόνα δεν βρίσκεται κάπου στο web, αλλά είναι αποθηκευμένη τοπικά, στον υπολογιστή μας. Αν προσέξετε η URL που εμφανίζει ο browser στο πάνω μέρος, θα δείτε ότι και η διεύθυνση της σελίδας μας είναι επίσης τοπική, π.χ. "file:///C:/Documents%20and%20Settings/panos/Τα%20έγγραφά%20μου/proti.html", ή κάτι τέτοιο. Αυτό είναι σωστό γιατί την πρώτη μας ιστοσελίδα την φτιάξαμε και την αποθηκεύσαμε τοπικά στον υπολογιστή μας και όχι σε κάποιον άλλον υπολογιστή του web. Οι σελίδες που παραλαμβάνουμε από άλλους υπολογιστές του διαδικτύου έχουν URL που συνήθως ξεκινάνε με το πρόθεμα: "http://", ή "https://", ενώ το πρόθεμα "file:///" υποδηλώνει τοπικό URL. Παρεμπιπτόντως το URL σημαίνει Uniform Resource Locator και μπορούμε να το μεταφράσουμε στα ελληνικά, απλά ως διεύθυνση, αντί του κυριολεκτικού "Ενιαίος Εντοπιστής Πόρου".

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

<html>
<head>
</head>
<body>
<span style="font-size: large">
Αυτή είναι η <b>πρώτη</b> μου ιστοσελίδα!
</span>
<img src="http://sites.google.com/site/panos1962archive/blog-archive/october-2009/PanosKarafla.jpg">
</body>
</html>

Σώστε το αρχείο στο Notepad και κάντε ανανέωση της σελίδας στον browser. Θα πρέπει να εμφανιστεί η αφεντιά μου με την καράφλα μου σε όλο της το μεγαλείο, δίπλα στη φράση «Η πρώτη μου ιστοσελίδα!». Αν στη θέση του ονόματος "PanosKarafla" βάλετε το "PanosSmile" θα δείτε άλλη μια εκδοχή μου, ώστε να με εμπεδώσετε καλύτερα. Οι δύο φωτογραφίες μου είναι "ανεβασμένες" στο web, σε κάποιους υπολογιστές της Google, οπότε μπορείτε απλά να χρησιμοποιήσετε τα URL τους για τις εμφανίσετε μέσα στις ιστοσελίδες σας. Αυτό ισχύει φυσικά για όλες τις εικόνες που βρίσκονται στο web. Για να αποσπάσετε το URL κάποιας εικόνας, κάντε απλά δεξί κλικ πάνω στην εικόνα (όχι στη μικρογραφία της) και πάρτε το URL με "Αντιγραφή διεύθυνσης συνδέσμου".

συνεχίζεται…