Την χρησιμοποιείς καθημερινά, αλλά γνωρίζεις πολύ λίγα για αυτήν. Επάνω της και εντός της έχει χτιστεί ένα από τα πιο εντυπωσιακά -αν όχι το πιο εντυπωσιακό- ανθρώπινα δημιουργήματα: Ο παγκόσμιος ιστός. Μοιάζει περίπλοκη, αλλά είναι εξαιρετικά απλή. Δεν είναι γλώσσα προγραμματισμού, είναι γλώσσα περιγραφής. Και την χρησιμοποιώ εδώ για να περιγράψω την φράση που την περιγράφει. Σε τι μπορεί να αναφέρομαι; φυσικά στην ψευδογλώσσα HTML.
Η HTML έπαιξε τεράστιο ρόλο στην ανάπτυξη του internet, ενώνοντας χρήσεις και ανάγκες ατόμων που τις περισσότερες φορές στην πραγματικότητα είναι εντελώς διαφορετικές μεταξύ τους, για παράδειγμα, ένας διευθύνων σύμβουλος διαφημιστικής στην Αμερική και ένας ακτιβιστής ανθρωπίνων δικαιωμάτων στην Νότια Αφρική. Το κατάφερε αυτό επειδή είναι ανοιχτή, εύκολη στην εκμάθηση και την συγγραφή, ευπροσάρμοστη, επειδή εξελίσσεται διαρκώς, επειδή δουλεύει παρέα με πολλές γλώσσες προγραμματισμού — και επειδή είναι, σε γενικές γραμμές, γαμάτη.
Οι ιστοσελίδες που φτιάχνονται με αυτήν είναι τόσο πολυποίκιλες που έχουμε φτάσει στο σημείο να λέμε πως “αν κάτι δεν υπάρχει στον παγκόσμιο ιστό, τότε δεν υπάρχει” — και πως “αν υπάρχει κάτι -οτιδήποτε!- τότε σίγουρα υπάρχει και ακατάλληλο περιεχόμενο για ανηλίκους με αυτό, θαμμένο κάπου στο world wide web“.
Αργά ή γρήγορα, τα περισσότερα από τα πράγματα που κάνουμε χρησιμοποιώντας υπολογιστές εμφανίστηκαν σε μορφή ιστοσελίδας: στέλνουμε και λαμβάνουμε emails χρησιμοποιώντας το Gmail, επικοινωνούμε με φίλους, γνωστούς, γκόμενες και απολύτως άγνωστους/τρομακτικούς τύπους μέσω Facebook και Twitter, διαβάζουμε το σύγχρονο αντίστοιχο ενός περιοδικού στο Texnologia, αποστέλλουμε και λαμβάνουμε αρχεία, παράνομα και νόμιμα με το Rapidshare και συνεργαζόμαστε για την πτυχιακή μας ανεβάζοντας και κατεβάζοντας αρχεία με το Wappwolf και το Dropbox.
Το κοινό όλων των παραπάνω; Είναι ιστοσελίδες. Φτιαγμένες με HTML. Και με CSS, και με JavaScript, και με PHP, και με MySQL, και με Perl και Python και Ruby, ακόμη και C, και με άπειρα άλλα πράγματα, δεν διαφωνώ. Απλά χωρίς την HTML όλα τα παραπάνω, πιθανότατα, δεν θα είχαν καν νόημα σ’ αυτό που αποκαλούμε χαϊδευτικά “το web“.
Αλλά δεν ήρθες εδώ για μάθημα ιστορίας ή για να μ’ ακούσεις να εξυμνώ ιστοσελίδες, ήρθες για να δεις τι ακριβώς είναι αυτό το μαραφέτι και πώς μπορείς να το χρησιμοποιήσεις, έτσι δεν είναι; Δυστυχώς δεν μπορώ να συμπεριλάβω τα πάντα για την HTML σε ένα μόνο άρθρο (έχω σκοπό να γράψω αρκετά, πάντως) αλλά μπορώ να σου δείξω τα απολύτως βασικά της. Και με την ευκαιρία της HTML5 (την οποία το άρθρο δεν αναφέρει οπουδήποτε πέρα από εδώ), αποφάσισα να κάνω αυτό ακριβώς. Για πάμε να δούμε!
Τι σημαίνει HTML
HTML σημαίνει Hyper Text Markup Language. Πιθανότατα όχι μόνο την έχεις ακουστά ως γλώσσα, αλλά και την χρησιμοποιείς -τα βασικά της τουλάχιστον- καθημερινά, είτε το γνωρίζεις, είτε όχι. Για παράδειγμα: ξέρεις πώς να κάνεις κείμενο bold ή italic στα emails που στέλνεις στο Gmail, σωστά; Μάντεψε τι χρησιμοποιείς για να το καταφέρεις αυτό — σωστά, την HTML. Ή ας δούμε ένα πιο κοντινό παράδειγμα: το κείμενο που διαβάζεις αυτή τη στιγμή έχει μορφοποιηθεί με HTML, και το Texnologia σερβίρεται από έναν HTTP server σε μορφή… το μάντεψες, HTML.
Η HTML είναι γλώσσα προγραμματισμού;
Όχι, ίσως είναι λίγο μπερδευτικό για τον μέσο χρήστη, αλλά όπως είναι ξεκάθαρο από τ’ όνομα της, η HTML είναι μια γλώσσα markup και όχι μια γλώσσα προγραμματισμού. Για να καταλάβεις τι ρόλο βαράει αυτό το “markup” και ποια η διαφορά του από τη συγγραφή κώδικα, πάμε λίγο πίσω στις εποχές που ένας editor σημείωνε τις διορθώσεις του τριγύρω και πάνω από το κείμενο (έτσι δουλεύουμε ακόμα στο Ελληνικό Πανόραμα, παρεμπιπτόντως!).
Ο editor λοιπόν, σημείωνε με διάφορα σύμβολα γύρω από το κείμενο τις διορθώσεις που ήθελε να γίνουν σε αυτό: μια ευθεία υπογράμμιση κειμένου σήμαινε “κάνε αυτό το κομμάτι έντονο“, δύο ευθείες υπογραμμίσεις σημαίναν “υπογράμμισε αυτό το κομμάτι“, μια κυματιστή υπογράμμιση σήμαινε “κάνε αυτό το κομμάτι πλάγιο“, κυκλωμένες λέξεις με βέλη δείχνανε την αλλαγή τοποθεσίας κομματιών κειμένου κτλ.
Αυτός είναι και ο ρόλος που επιτελεί η HTML: σημειώνει, γύρω από το περιεχόμενο, τις αλλαγές που πρέπει να συμβούν σε αυτό ώστε να φτάσει “φορμαρισμένο” και όμορφο πλέον στην οθόνη σου ως μέρος κάποιας ιστοσελίδας, ή, πλέον, και σε πολλές άλλες χρήσεις.
Ταυτόχρονα περιγράφει το περιεχόμενο. Για παράδειγμα, η “εντολή” της HTML περιγράφει το στοιχείο που την ακολουθεί ως επικεφαλίδα επιπέδου 1, άρα και “σημαντική επικεφαλίδα“. Σκέψου την HTML ως δομικό υλικό της αισθητικής του web και ως κάτι που περιγράφει το περιεχόμενό του ταυτόχρονα. Ο κώδικας, ασχέτως γλώσσας προγραμματισμού, επιτελεί έναν τελείως διαφορετικό ρόλο: δεν διαμορφώνει την εμφάνιση, ούτε περιγράφει περιεχόμενο αλλά χρησιμοποιεί τον υπολογιστή για να εκτελέσει μια σειρά από πράξεις και οδηγίες, με απώτερο σκοπό την δημιουργία προγραμμάτων που “κάνουν” κάτι που χρειαζόμαστε.
Επειδή έχω δει και τα δύο και έχω μπερδευτεί, σε τι διαφέρει το html από το http; Και μία που σε βρήκα εύκαιρο, τι είναι όλη αυτή η ιστορία με τους servers, τους browsers, τους clients, τα πρωτόκολλα και γενικότερα όλος αυτός ο συρφετός;
Είναι λογικό να είσαι μπερδεμένος — αν υπάρχει ένα πράγμα που οι προγραμματιστές, οι διαχειριστές, οι hardcore χρήστες και όλοι οι “αποτέτοιοι με τους υπολογιστές” λατρεύουν περισσότερο από το να δημιουργούν καινούργιους τρόπους για να τους εκμεταλλευτούν (τους υπολογιστές, ντε!), αυτό είναι το να εφευρίσκουν ακρωνύμια γι’ αυτούς τους τρόπους. Έχουμε και λέμε λοιπόν:
- Το HTTP και όχι η HTTP είναι το πρωτόκολλο με βάση το οποίο επικοινωνεί το World Wide Web – αυτό που εν μέρει λανθασμένα αποκαλείς “internet“. Αυτό περιέχει τις πληροφορίες που ανταλλάζει ο server με τον client.
- Server αποκαλούμε έναν υπολογιστή που τρέχει μια εφαρμογή υπεύθυνη για την μετάδοση/μεταφορά των εγγράφων HTML μέσω του πρωτοκόλλου HTTP, όσο και την ίδια την εφαρμογή που “σερβίρει” τα αρχεία.
- Client αποκαλούμε τόσο έναν υπολογιστή που τρέχει μια εφαρμογή (συνήθως browser) που λαμβάνει τα έγγραφα HTML από τον server, όσο και την ίδια την εφαρμογή που τα λαμβάνει.
- Browser είναι μια εφαρμογή που αναλαμβάνει να: συνδεθεί σ’ έναν server που της υποδεικνύεις (όλα αυτά τα http://www κτλ. που γράφεις για να μπεις κάπου), να ζητήσει ένα έγγραφο HTML και να στο μεταφέρει, μαζί με ό,τι περιλαμβάνει αυτό το έγγραφο: ειδικά αρχεία που το διαμορφώνουν, εικόνες, κώδικα που πρέπει να τρέξει στο μηχάνημά σου, κ.α. Επίσης εκτελεί κώδικα JS, φροντίζει για την εξίσωση FQDN ονομάτων και διευθύνσεων IP, και διάφορα άλλα κουλά υπολογιστικά ακρωνύμια που σε κουράζουν.
- Πρωτόκολλο είναι ένα σύστημα δημιουργίας μηνυμάτων και μεθόδων μετάδοσης μηνυμάτων. Είναι γενική η περιγραφή, το ξέρω, αλλά δεν αξίζει να μπούμε σε πολύ πιο βαθιά νερά εδώ. Σκέψου το πρωτόκολλο ως “μια σειρά από τελετουργικά που οι υπολογιστές πρέπει να τελέσουν προκειμένου να συνεννοηθούν σωστά και να κάνουν πάσα ο ένας στον άλλον ό,τι χρειάζεται να ειπωθεί/μεταδοθεί“.
- Το Χάος είναι η πραγματική φύση του σύμπαντος, και η τάξη καθώς και η αταξία είναι παραισθήσεις που επιβάλλονται σ’ αυτό, από το ανθρώπινο νευρικό σύστημα.
Και πως ακριβώς τη χρησιμοποιώ;
Αν εννοείς “πώς την βλέπω“, τότε την βλέπεις -όπως έλεγα και πιο πάνω- παντού, συνήθως μέσα από παράθυρα ενός ξεχωριστού τύπου προγράμματος που λέγεται… browser! Οι browsers έχουν ως κύριο σκοπό τους την προβολή ιστοσελίδων γραμμένων σε HTML, αν και μπορούν να κάνουν πολλά άλλα πράγματα. Μερικοί γνωστοί browsers είναι ο Google Chrome, o Mozilla Firefox και ο Apple Safari. Εξίσου γνωστός αλλά παράδειγμα προς αποφυγή είναι ο Microsoft Internet Explorer.
Αν πάλι εννοείς “πώς την γράφω“, τότε πάρα πολύ απλά: η HTML αποτελείται/φτιάχνεται από “tags“. Κάθε HTML tag είναι και μια εντολή της γλώσσας. Υπάρχουν tags για πράγματα μεγάλα, όπως το tag, που δηλώνει το πού σ’ ένα έγγραφο ξεκινάει η χρήση της γλώσσας HTML και tags για πράγματα απλά, όπως το tag που δηλώνει πως το κείμενο που ακολουθεί πρέπει να εμφανιστεί με πιο έντονα γράμματα — άρα και είναι πιο σημαντικό από το “απλό” κείμενο.
Τα tags ξεχωρίζουν λόγω των angle brackets (“<” και “>”) μέσα στα οποία κλείνονται και πάνε δυό δυό, σαν τους Χιώτες: ένα από αυτά “ανοίγει” κι ένα από αυτά “κλείνει” κάθε τι που θέλεις να μαρκάρεις.
Ξεχωρίζεις ποιο ανοίγει και ποιο κλείνει μια εντολή από την κάθετο που περιλαμβάνει το τελευταίο. Για παράδειγμα, για να κάνεις κάποιο κομμάτι κειμένου έντονο, χρησιμοποιείς το strong tag ως εξής:
<strong>έντονο κείμενο εδώ</strong>.Ποια είναι τα πιο χρήσιμα Tags;
Αναλόγως τη χρήση. Είναι σαν να ρωτάς “ποιο είναι το πιο χρήσιμο αμάξι;“. Αν ζεις στο κέντρο της Αθήνας, πιθανότατα ένα Smart θα σου είναι εξαιρετικά χρήσιμο. Αν, πάλι, δοκιμάσεις να σκάσεις μύτη με Smart σε επαρχιακό πετρόδρομο των Σφακίων, τότε μάλλον θα καταλήξεις να το αράζεις κάπου για να ‘χουν κάτι να παίζουν οι ντόπιοι σκοποβολή.
Με αυτό κατά νου, υπάρχει μια σειρά από tags που χρησιμοποιούνται σχεδόν σε κάθε πιθανή χρήση της HTML και που καλό είναι να γνωρίζεις. Ετοιμάσου για πινακάκι γιατί ξεκινάμε με κώδικες.
<html> και </html>: σημειώνει την αρχή και το τέλος της χρήσης της γλώσσας HTML σ’ ένα έγγραφο. Οτιδήποτε πριν και μετά από αυτά (οτιδήποτε δεν περιέχεται εντός αυτών των δύο, δηλαδή) θεωρείται “απλό κείμενο“, όχι HTML — άρα και δεν θα διαβαστεί από τον browser του επισκέπτη.
<p> και </p>: Αρχή και τέλος παραγράφου κειμένου, αντίστοιχα. Οι παράγραφοι είναι πολύ σημαντικό στοιχείο της HTML, καθώς ένα μεγάλο μέρος του περιεχομένου που θα συναντήσεις στον “παγκόσμιο ιστό” είναι κείμενο. Σε άλλες χρήσεις, όπως π.χ. στα email που στέλνεις είναι σπάνια η εμφάνισή τους — συνήθως αναλαμβάνει το κάθε πρόγραμμα να τις βάλει για εσένα.
<h1> και </h1>, <h2> και </h2> ως και <h6> και </h6>: τα ζεύγη αυτά (h1, h2, h3, h4, h5 και h6 δηλώνουν επικεφαλίδα και χρησιμοποιούνται σε σειρά για να δείξουμε τη σπουδαιότητα της επικεφαλίδας. H1 είναι η “μεγαλύτερη δυνατή” επικεφαλίδα, συνήθως τόσο σε μέγεθος (αν και αυτό καθορίζεται και από τον σχεδιασμό της ιστοσελίδας) όσο και σε σπουδαιότητα πληροφορίας.
<head> και </head>: το λεγόμενο header μιας HTML σελίδας. Το περιεχόμενο ανάμεσα σ’ αυτό το ζεύγος tags δεν εμφανίζεται στον θεατή της ιστοσελίδας, αλλά περιέχει συνήθως άλλα χρήσιμα στοιχεία όπως τον τίτλο της σελίδας, συνδέσμους προς stylesheets (κάτι τσακαλιάρικα έγγραφα που καθορίζουν την εμφάνιση της σελίδας, άλλη συζήτηση αυτά) και -πιθανότατα- προς κώδικα JavaScript.
<a> και </a> Αρχή και τέλος ενός συνδέσμου προς κάποια άλλη ιστοσελίδα. Συνήθως περιέχουν τουλάχιστον την παράμετρο href, η οποία υποδηλώνει προς ποια ιστοσελίδα οδηγεί ο σύνδεσμος. Παράδειγμα: <a href=”https://texnologia.net”>Σύνδεσμος προς το texnologia.net</a>.
<img src=”image-source” /> Ωπ! Τι έγινε εδώ; Γιατί δεν έρχεται σε ζεύγος το <img>; Επειδή… έλα ντε — ας πούμε πως είναι ένα από τα περίεργα της γλώσσας (και ας σημειώσουμε πως στην XHTML το <img> έρχεται όντως σε ζεύγη). Με το <img> τοποθετούμε μια εικόνα εντός του εγγράφου μας. Εντός της “διακήρυξης” src τοποθετούμε την πηγή της εικόνας — την τοποθεσία της, δηλαδή. Παράδειγμα: <img src=”http://texnologia.net/logo.jpg” />. Προαιρετικά, μπορούμε να διακηρύξουμε το πλάτος της εικόνας, το ύψος της και διάφορες άλλες παραμέτρους.
<strong> και </strong>: τονισμός κειμένου — μετατρέπουν το κείμενο που βρίσκεται εντός του ζεύγους των tags σε έντονο. Συνήθως κάνουμε “έντονα” πράγματα όπως: ονόματα συγκροτημάτων, χώρες και πόλεις, τίτλους βιβλίων και έξυπνες ατάκες.
<title> και </title>: ανάμεσα σ’ αυτό το ζεύγος υπάρχει ο τίτλος της ιστοσελίδας, που εμφανίζεται στο παράθυρο του browser του επισκέπτη. Πέρα από την εμφάνιση του, όμως, ο τίτλος χρησιμοποιείται σε πολλές άλλες εφαρμογές: για παράδειγμα, οι μηχανές αναζήτησης στηρίζονται στον τίτλο τόσο για να γνωρίζουν τι αυτή περιέχει (άρα και πόσο σχετική είναι με κάποια αναζήτηση χρήστη) όσο και για να την παρουσιάσουν ως αποτέλεσμα. Είναι σημαντικό λοιπόν μια σελίδα που αναφέρεται σε εκτροφή αλόγων να μην ονομάζεται “Untitled”.
<ul> και </ul>, καθώς και <ol> και </ol>: μη-αριθμημένη λίστα (λίστα “με κουκκίδες“) και αριθμημένη λίστα (λίστα “με νούμερα“) αντίστοιχα. Εντός αυτών των λιστών τοποθετούμε…
<em> και </em>: τονισμός κειμένου — μετατρέπουν το κείμενο που βρίσκεται εντός του ζεύγους των tags σε πλάγιο. Συνήθως κάνουμε “πλάγια” πράγματα που δεν είπαμε εμείς, όπως: ρητά, παροιμίες, φράσεις που ακούσαμε στον δρόμο και -στην περίπτωσή μου- έξυπνες ατάκες.
<li> και </li>: αντικείμενο λίστας, είτε αριθμημένης είτε μη. Κάθε αντικείμενο πρέπει να βρίσκεται εντός ενός τέτοιου ζεύγους. Γρήγορο παράδειγμα λίστας: <ul> <li>ένα αντικείμενο</li> <li>κι άλλο αντικείμενο</li> </ul>.
<body> και </body>: το κομμάτι ενός εγγράφου HTML που περιέχει… περιεχόμενο! Το κομμάτι, δηλαδή, που θα δει ο χρήστης όταν θα φορτωθεί το αρχείο HTML στην οθόνη του. Οτιδήποτε δεν βρίσκεται εντός αυτού του ζεύγους tags δεν εμφανίζεται στην οθόνη, αλλά παραμένει εντός του αρχείου HTML.
<u> και </u>: τονισμός κειμένου — μετατρέπουν το κείμενο που βρίσκεται εντός του ζεύγους των tags σε υπογραμμισμένο. Συνήθως υπογραμμίζουμε πράγματα επειδή θεωρούμε πως οι αναγνώστες μας δεν μπορούν να τα δουν με κάποιον άλλο τρόπο τονισμού, επειδή δουλεύουμε σε Πανεπιστήμιο και είμαστε σημαντικοί ή επειδή έτσι την βρίσκουμε και δεν πέφτει λόγος σε κανέναν, ‘νταξ’;
<!– και –>: σχόλιο HTML. Οτιδήποτε βρίσκεται ανάμεσα σ’ αυτό το ζεύγος δεν εμφανίζεται στην σελίδα που βλέπει ο χρήστης. Τα σχόλια είναι πολύ χρήσιμα στο να περιγράφουμε τι ακριβώς φτιάχνουμε, για ν’ αφήνουμε μηνύματα σε επίδοξους developers πως η σελίδα μας δεν είναι διαθέσιμη για 132 requests το δευτερόλεπτο (αν μας ανήκει κάποια σελίδα συναλλάγματος) αλλά και για απλή, καλόκαρδη πλάκα.
<div> και </div>: τα βασικά δομικά στοιχεία της HTML. Χρησιμοποιούνται για να ξεχωρίσουν κομμάτια περιεχομένου από άλλα κομμάτια. Για παράδειγμα, ένα <div> μπορεί να χρησιμοποιείται για το μενού μιας ιστοσελίδας, ένα για το κυρίως περιεχόμενο, κι ένα ακόμα για τις πληροφορίες επικοινωνίας με τον συντάκτη της.
Αυτά για σήμερα. Την επόμενη Πέμπτη πιθανότατα θα επιστρέψουμε στο imaging και σε κάποια cool χρήση του. Ως τότε, καλή τύχη με τα tutorials που -είμαι σίγουρος πως- θ’ αρχίσεις να ξεψαχνίζεις για να μάθεις περισσότερα για αυτή τη καταπληκτική γλώσσα. Και μην ξεχνάς να μοιράζεσαι στα σχόλια τις απορίες σου, τις διαφωνίες σου και τις -σπάνιες εκείνες- φορές που συμφωνείς με κάτι που γράφω.
