Τι είναι, λοιπόν, η HTML; Σίγουρα την ακούτε συνέχεια, αλλά την έχετε κατατάξει σε ένα από "αυτά τα περίεργα" που χρησιμοποιούν οι developers για να σας κάνουν τη ζωή δύσκολη. Ας μήν σταθούμε σε αρκτικόλεξα, γιατί ακόμα και να σας εξηγήσω θα συνεχίσετε να κοιτάτε αυτό το κείμενο με το ίδιο βλέμμα αγουροξυπνημένου κυπρίνου όπως και πριν.
Ας δώσουμε ένα παράδειγμα καλύτερα.
Θέλετε να φτιάξετε μια ιστοσελίδα. Από αυτές που χτυπάς “γου-γου-γου τελεία κατιτις τελειά κομ” και σου βγάζει μαγικά διάφορα πραματάκια.
Γράφετε λοιπόν αυτό:
ΚΑΛΩΣ ΗΛΘΑΤΕ ΣΤΗ ΣΕΛΙΔΑ ΜΟΥ!
Εδώ θα βρείτε εξαιρετικά ενδιαφέροντα πράγματα όπως πληροφορίες για εμένα, αστεία facts για εμένα, τι μου αρέσει περισσότερο σε εμένα, και τι πρέπει να κάνετε αν είστε ελεύθερες, όμορφες και έξυπνες για να κάνετε σχέση με εμένα.
Επίσης θα βρειτε τρόπους να επικοινωνήσετε με εμένα.
Η σελίδα βρίσκεται υπό ανάπτυξη, περισσότερα για εμένα σε λίγες ημέρες.
Πλην του γεγονότος ότι το εν λόγω περιεχόμενο θα ενδιαφερθούν να το διαβάσουν μόνο πάσχοντες από χρονια διαταραχή αυτοεκτίμησης σε συνδυασμό με την έλλειψη έστω και του παραμικρού εναλλακτικού ενδιαφέροντος, κυρίως γιατί θα τους έχετε δεμένους στην καρέκλα αναγκάζοντάς τους να διαβάσουν μέχρι τέλους, αν επιχειρήσετε να το δείξετε αυτό σε ένα browser θα πάρετε το εξής εκπληκτικό:
ΚΑΛΩΣ ΗΛΘΑΤΕ ΣΤΗ ΣΕΛΙΔΑ ΜΟΥ!Εδώ θα βρείτε εξαιρετικά ενδιαφέροντα πράγματα όπως πληροφορίες για μένα, αστεία facts για μένα, τι μου αρέσει περισσότερο σε μένα, και τι πρέπει να κάνετε αν είστε ελεύθερες, όμορφες και έξυπνες για να κάνετε σχέση με μένα.Επίσης θα βρειτε τρόπους να επικοινωνήσετε με εμένα.Η σελίδα βρίσκεται υπό ανάπτυξη, περισσότερα για μένα σε λίγες ημέρες.
Γιατί συνέβη αυτό;
Γιατί πολύ απλά ο browser δεν καταλαβαίνει πού πρέπει να κάνει bold, να αφήσει κενή γραμμή ή να αλλάξει παράγραφο απλά επειδή εσείς νομίζατε ότι έτσι γίνεται. Πρέπει να του το ΕΞΗΓΗΣΕΤΕ.
Hint προς Project Managers: Εσείς το έχετε σίγουρα ζήσει. Δώστε σε developer ΑΣΑΦΕΙΣ οδηγίες για το πώς θα φαίνεται το user interface και θα πάρετε Times New Roman bold 48 κουμπάκια με κόκκινα γράμματα σε πράσινο φόντο. Και μια γατούλα για background.
Πώς δίνουμε οδηγίες στον browser για το πώς θα εμφανίσει τι; Ο πιό απλός τρόπος είναι χρησιμοποιώντας tags. Τα tags έχουν αυτή τη μορφή:
<Eimai_to_fobero_tag>Otidipote_asimanto_thelo_na_fainetai_eksairetika_simantiko </Eimai_to_fobero_tag>.
Περικλείουν αυτό που θέλετε να μορφοποιήσετε και το μεταλάσσουν ώστε να συμπεριφερθεί όπως ορίζει το tag.
Hint προς Project Managers: Τα tags είναι εύκολο να τα κατανοήσετε σκεπτόμενοι την παρακάτω αναλογία: Εχετε ένα developer ξυρισμένο, πλυμένο και κοντοκουρεμένο, ευωδιαστό και ευπαρουσίαστο. Τον τυλίγετε ανάμεσα σε μια ημερομηνία έναρξης και μια ημερομηνία λήξης εργασιών για την περάτωση έργου αντίστοιχου με την κατασκευή ενός ουρανοξύστη στο Ντουμπάϊ, με την ημερομηνία έναρξης και λήξης να αφορούν τον ίδιο μήνα. Το κάνετε αυτό στις 30 του μήνα. Ο developer, όπως θα έχετε ήδη βιώσει, ταχύτατα μεταλάσσεται σε μια άμορφη, τριχωτή, βρώμικη και βρωμερή μάζα από καφεϊνη, αϋπνία και αδρεναλίνη και από τη στιγμή εκείνη και μέχρι το πέρας του deadline επικοινωνεί με τον έξω κόσμο μέσω μονοσύλλαβων βρυχηθμών. Καλό είναι δε να κρατάτε κάποια απόσταση γιατί αρκετές φορές έχει παρατηρηθεί η τάση εκτόξευσης βαρέων ηλεκτρονικών συσκευών προς την κατεύθυνσή σας.
Ε, κάπως έτσι δουλεύουν και τα tags με το περιεχόμενο.
Ας δούμε τα πιό βασικά tags:
<i> ή <em>: Κάνει το κείμενο να έχει πλάγια γράμματα. Italics. Χρήσιμο για να δώσετε έμφαση σε κάτι, ειδικά αν το έχει πει άλλος και όχι εσείς. Από την πλειοψηφία των Project Managers αναμένεται εκτεταμένη χρήση του tag αυτού μια και το 80% του παραγόμενου γραπτού λόγου τους αφορούν πράγματα που δεν έχουν πει οι ίδιοι: “Η εταιρία λέει…”, “Το αφεντικό είπε…”, “Ο πελάτης ζήτησε…” κλπ.
<b> ή <strong>: Κάνει το κείμενο να έχει έντονα γράμματα. Αναμένεται να μορφοποιήσετε το υπόλοιπο 20% των κειμένων που γράφετε με αυτό το tag, μια και ο,τι έχει γραφτεί πρωτότυπα από εσάς πρέπει αναγκαστικά να είναι και εξαιρετικά σημαντικό, έτσι δεν είναι;
<p>: Χρησιμεύει για διαχωρισμό παραγράφων μεταξύ τους. Αγνωστο στους περισσότερους Project Managers, αλλά δημιουργεί ευανάγνωστα κείμενα. Αρκεί η κάθε παράγραφός σας να μην είναι 6 σελίδες.
<br>: Η λύση του φτωχού αντί του <p>. Συνώνυμο του “πατάω κάθε τόσο και λιγάκι Enter στο Word για να αφήσω κενό μεταξύ των γραμμών”.
<h1> ως <h6>: Δημιουργεί επικεφαλίδες. Το h1 είναι μεγαλύτερο, το h2 λίγο μικρότερο και ούτω καθ’εξής. Συνηθέστερα όμως χρησιμοποιείται από τους Project Managers τo h1, στα πλαίσια των φράσεων “SOS”, “ΠΡΕΠΕΙ ΝΑ ΕΙΝΑΙ ΕΤΟΙΜΟ ΣΗΜΕΡΑ”, “ΕΠΡΕΠΕ ΝΑ ΕΙΝΑΙ ΕΤΟΙΜΟ ΣΗΜΕΡΑ”, “ΓΙΑΤΙ ΔΕΝ ΕΙΝΑΙ ΕΤΟΙΜΟ ΣΗΜΕΡΑ;” και ούτω καθ’εξής.
Χρησιμοποιώντας όλες τις παραπάνω γνώσεις, αν μορφοποιήσετε το κείμενο του παραδείγματος θα προκύψει και πάλι μια αηδία, γιατί είμαστε ΑΠΟΛΥΤΑ σίγουροι οτι θα κάνετε όλο το κείμενο ταυτόχρονα bold, italics και h1 μια και δεν θα μπορείτε να αποφασίσετε τι είναι πιό σημαντικό και τι λιγότερο. Α, και θα ξεχάσετε πάλι να βάλετε οπουδήποτε αλλαγή γραμμής.
Εμείς πάντως μια προσπάθεια την κάναμε.
Σκεφτόμασταν να σας πούμε και για πίνακες, αλλά τι νόημα έχει αφού θα κάνετε πάντα copy/paste από το Excel.
Καλά projects!