Από το χαρτί στην οθόνη

Αυτό είναι το πρώτο μέρος μιας εισαγωγής στην κατασκευή ιστοσελίδων για απλούς θνητούς, όπως εγώ.

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

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

“Ντο ρε μι, ήταν μια μέρα βροχερή, όχι σαν αυτές που είχαμε συνηθίσει σε αυτή την απόμερη πλευρά του πλανήτη Terminus Zx-78.”

Από την οθόνη στο χαρτί

Έχω τετράδιο, έχω στυλό. Έχω έχω έχω… έχω ιδέες. Ωραία, έχω πάμπολλες εικόνες στον υπολογιστή. Τι να τις κάνω; Τις εκτυπώνω σε χαμηλή ανάλυση, συνήθως 4 - 6 σε ένα χαρτί Α4. Έτσι, όταν σημειώνω βλακειούλες στο τετράδιό μου, αφήνω ένα κενό και κολλάω μια εικονίτσα. Μετά διακοσμώ την εικονίτσα με μαρκαδόρο και συνεχίζω. Βάζω και μια ημερομηνία πάνω δεξιά και βουαλά: έχω ημερολογίο. Βέβαια αυτά είναι πιο εύκολα όταν είσαι παιδί, αλλά και οι μεγάλοι με λίγη υπομονή μπορούν να τα ξανα-μάθουν.

Κάπως έτσι φτιάχνω και το σάιτ Φάλτσο. Σαν να κάνω χειροτεχνία. Δεν είμαι ιδιαίτερα καλός σε αυτό, αλλά έχει πλάκα και δεν είναι πολύ δύσκολο αν μάθεις τα βασικά.

Αν θέλετε, μπορώ να σας δείξω πως να φτιάχνετε ιστοσελίδες.

Βασικές αρχές

Ας φορτώσουμε μια οποιαδήποτε ιστοσελιδα στον browser μας. Ας πούμε αυτό: https://krofork.neocities.org/. Μπορούμε εύκολα να ανακαλύψουμε πως έχει κατασκευαστεί αυτή η σελίδα: κάνουμε δεξί κλικ σε μια περιοχή της σελίδας που δεν έχει εικόνα και στο μενού που ανοίγει επιλέγουμε [View Page Source]. Εναλλακτικά, πατάμε Ctrl+U στο πληκτρολόγιο για να ενεργοποιήσουμε αυτή την εντολή.

Ο κώδικας που εμφανίζεται στην οθόνη μας ονομάζεται HTML (Hyper Text Markup Language) και είναι οι οδηγίες που διαβάζει ο browser για να ζωγραφίσει την ιστοσελίδα που βλέπουμε. Η HTML είναι μια γλώσσα που βασίζεται στην ιδέα ότι ένα έγγραφο ή σελίδα αποτελείται από κείμενο και εικόνες τα οποία τοποθετούνται σε μια ορισμένη διάταξη, όπως όταν γράφουμε μια συνταγή μαγειρικής, ή μια ιστορία. Συνήθως μας ενδιαφέρει να απεικονίσουμε μια ιδέα με τέτοιο τρόπο ώστε να είναι ξεκάθαρη. Όταν γράφουμε μια ιστορία την χωρίζουμε σε προτάσεις, παραγράφους, κεφάλαια κλπ. Αυτό κάνει τα πράγματα πιο απλά για τη σκέψη μας. Με παρόμοιο τρόπο η HTML μας δίνει τη δυνατότητα να περιγράψουμε με ποιο τρόπο θέλουμε να εμφανίζεται το περιεχόμενό μας.

Ας δοκιμάσουμε να φτιάξουμε μια απλή ιστοσελίδα.

Εργαλεία

Αρχικά θα χρειαστούμε έναν απλό σημειωματάριο όπως είναι το Notepad στα Windowzzz.

Αυτά!

Πρώτα βήματα

Ας ξεκινήσουμε με έναν υποθετικό διάλογο. Γράψτε το παρακάτω στο σημειωματάριο και σώστε το σε ένα αρχείο με το όνομα hello.html

- Γεια σου κόσμε!

Κάνοντας διπλό κλικ στο αρχείο που φτιάξατε τα windows θα το φορτώσουν στον browser που χρησιμοποιείτε για να περιηγείστε στο ίντερνετ.

Συγχαρητήρια!

Τώρα, θα μου πείτε: “Λολ, μα αυτό δεν είναι κάποιος ψαγμένος κώδικας. Είναι μια ανόητη φράση!”. Και εγώ θα σας πώ: “Εεε, πράγματι, αλλά περίμενε και θα δεις”.

Ας συμπληρώσουμε το αρχείο μας με τα ακόλουθα:

- Γεια σου κόσμε!
- Γεια σου και εσένα άνθρωπε.

Σώστε το αρχείο και ανανεώστε τη σελίδα σας στον browser. Βλέπετε; Οι δυο γραμμές εμφανίζονται σαν μια. Για να χωρίσουμε τις γραμμές θα πρέπει να τις γράψουμε ως εξής:

- Γεια σου κόσμε!<br>
- Γεια σου και εσένα άνθρωπε.

Το <br> είναι μια ταμπέλα, ή ένα tag. Το <br> σημαίνει: “Σε αυτό το σημείο σπάσε τη γραμμή”. Αυτό είναι αρκετό για το παράδειγμά μας.

Παράγραφοι

Ας δούμε πως μπορούμε να χωρίσουμε ολόκληρες παραγράφους:

- Γεια σου κόσμε!<br>
- Γεια σου και εσένα άνθρωπε.

<p>Ο άνθρωπος δεν είχε ξαναδεί τον κόσμο και απόρησε.</p>
<p>Ο κόσμος συνέχισε τη δουλειά του.</p>

Ας εξηγήσω: Το tag <p> σημαίνει παράγραφος. Ό,τι γράφουμε μεταξύ των <p>...</p> θεωρείται παράγραφος. Με αυτό τον τρόπο ο browser μπορεί να ζωγραφίσει τις παραγράφους μας με σωστό τρόπο: αφήνοντας ένα κενό πάνω και κάτω.

Θα παρατηρήσατε ότι το <p>...</p> περικλείει μια παράγραφο, ενώ το <br> είναι μόνο του, δεν έχει ζευγαράκι. Άλλο ένα μοναχικό tag είναι το <hr>:

I'm mr. Meeseeks
<hr>
look at me!

Επικεφαλίδες

Ας βάλουμε μερικές επικεφαλίδες στο παράδειγμά μας:

<h1>Η ιστορία του ανθρώπου</h1>

<h2>Κεφάλαιο 1</h2>
- Γεια σου κόσμε!<br>
- Γεια σου και εσένα, άνθρωπε.

<p>Ο άνθρωπος δεν είχε ξαναδεί τον κόσμο και απόρησε.</p>
<p>Ο κόσμος ατάραχος συνέχισε τη δουλειά του.</p>

Οι επικεφαλίδες μπορούν να έχουν ως εξι επίπεδα:

<h1>Μια</h1>
<h2>Διεσταλμένη</h2>
<h3>Χαρτοπετσέτα</h3>
<h4>Μασούλησε</h4>
<h5>Πολλές</h5>
<h6>Αγκινάρες</h6>

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

Λίστες

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

<p>Δουλειές που πρέπει να κάνω σήμερα:</p>
<ul>
  <li>Πότισμα</li>
  <li>Σκάψιμο</li>
  <li>Ανακάτεμα Γαλαξία 3FD42</li>
  <li>Σουπερ μάρκετ</li>
</ul>	

Με το tag <ul> εισάγουμε τη λίστα μας. Μέσα στο <ul> εισάγουμε τα επι μέρους στοιχεία της λίστας μας με το tag <li>. Τώρα, ο Κόσμος είναι πολύ σχολαστικός και θέλει οι σημειώσεις του να είναι αριθμημένες. Θα χρησιμοποιήσουμε το tag <ol>:

<p>Δουλειές που πρέπει να κάνω σήμερα:</p>
<ol>
  <li>Πότισμα</li>
  <li>Σκάψιμο</li>
  <li>Ανακάτεμα Γαλαξία 3FD42</li>
  <li>Σουπερ μάρκετ</li>
</ol>	

Το <ul> σημαίνει Unordered List, ενώ το <ol> σημαίνει Ordered List. Τέλος, το <li> σημαίνει List Item.

Επίλογος

Ανκαταφέρατε να φτάσετε ως εδώ, τότε φαίνεται ότι είστε αποφασισμένοι να συνεχίσετε. Μπράβο! Θα κλείσουμε το πρώτο μέρος με μια σημαντική τεχνική λεπτομέρεια:

Ένα αρχείο HTML πρέπει πάντα να περιλαμβάνει τα ακόλουθα στοιχεία:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Τίτλος σελίδας</title>
  </head>
  <body>
    <p>Εδώ μπαίνει το περιεχόμενο</p>
  </body>
</html>

Βλέπουμε έδω διάφορα tags μέσα σε άλλα tags. Αν φορτώσετε το παραπάνω παράδειγμα στον browser σας θα δείτε μόνο την παράγραφο με το κέιμενο: “Εδώ μπαίνει το περιεχόμενο”. Τα στοιχεία αυτά περιγράφουν την γενικότερη μορφή ενός εγγράφου.

Στην πρώτη γραμμή η δήλωση <!DOCTYPE html> λέει στον browser ότι το έγγραφό μας είναι HTML5. Παλαιότερα υπήρχαν πολλαπλές εκδοχές της HTML και οι browser έπρεπε να γνωρίζουν με ποια από αυτές θα αναλύσουν των κώδικά μας. Σήμερα υπάρχει μια κυρίαρχη έκδοση: η HTML5.

Εκτός του παραπάνω στοιχείου κάθε έγγραφο HTML ανοίγει και κλείνει με το tag <html>. Στο εσωτερικό αυτού του tag εισάγονται τα εξής δυο tags: το <head> και το <body>. Το head περιλαμβάνει πληροφορίες όπως είναι ο τίτλος της σελίδας, η κωδικοποίηση των χαρακτήρων και πολλά άλλα που θα τα συναντήσουμε στη συνέχεια. Το body είναι το κύριο μέρος του εγγράφου μας, μέσα στο οποίο γράφουμε το περιεχόμενο που θα ζωγραφίσει ο browser στη οθόνη μας. Σώστε το παραπάνω παράδειγμα σε ένα αρχείο, π.χ. template.html, και χρησιμοποιείστε το ως πρότυπο για όλες τις σελίδες που θα γράφετε. Συνοπτικά, μπορούμε να αναπαραστήσουμε τη δομή ενός εγγράφου HTML ως ιεραρχική λίστα, ή πιο σωστά ως δέντρο:

• DOCTYPE
• html
  • head
    • meta stuff
    • title
    • διάφορα μαγικά
  • body
    • περιεχόμενο

Κλείνουμε αυτό το μέρος με ένα πλήρες έγγραφο HTML. Μελετήστε τον παρακάτω κώδικα. Παρατηρείτε κάτι που δεν έχουμε καλύψει ως τώρα;

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
  	<title>Τίτλος σελίδας</title>
  </head>
  <body>
  	<h1>Η ιστορία του ανθρώπου</h1>
  	<img src="https://cdn.eso.org/images/thumb700x/eso1524a.jpg">
  	<h2>Κεφάλαιο 1</h2>
  	
	- Γεια σου κόσμε!<br>
	- Γεια σου και εσένα, άνθρωπε.
  
  	<p>Ο άνθρωπος δεν είχε ξαναδεί τον κόσμο και απόρησε.</p>
  	<p>Ο κόσμος ατάραχος συνέχισε τη δουλειά του.</p>   	
  	<p>Στο σημειωμάτάριο του είχε καταγράψει τις εργασίες της ημέρας, και ήταν πολλές.</p>		
  	<p>Δουλειές που πρέπει να κάνω σήμερα:</p>
  	<ul>
      <li>Πότισμα</li>
      <li>Σκάψιμο</li>
      <li>Ανακάτεμα Γαλαξία 3FD42</li>
      <li>Σουπερ μάρκετ</li>
  	</ul>	
  </body>
</html>

Πάμε στο δεύτερο μέρος του οδηγού μας.