Αρχική σελίδα

HTML

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

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

Στην πράξη, υπεύθυνος για την εμφάνισή της είναι ο browser μας (φυλλομετρητής: internet explorer, netscape, opera κλπ). Όταν πληκτρολογούμε σε αυτόν κάποιο url (διαδικτυακή διεύθυνση) ή κάνουμε κλικ σε κάποιο Link (υπερσύνδεσμο) τότε συμβαίνουν (περιληπτικά) τα εξής:

  • Η ονομαστική διεύθυνση που δώσαμε μεταφέρεται ως αίτημα στους servers (διακομιστές) της εταιρίας που μας προσφέρει σύνδεση στο Internet και αυτοί εντοπίζουν σε δικές τους ή άλλες βάσεις δεδομένων την αριθμητική διεύθυνση (IP) που αντιστοιχεί στο όνομα αυτό.
  • O υπολογιστής μας διασυνδέεται με αυτόν τον server και αρχίζουν να μεταφέρονται προς εμάς τα αναγκαία δεδομένα.
  • Τα δεδομένα αυτά περιλαμβάνουν: Την περιγραφή δομής της σελίδας, τα περιεχόμενα κείμενα και τις τυχόν εικόνες.
  • O browser μας συγκεντρώνει τα πιο πάνω στοιχεία και στήνει τη σελίδα στην οθόνη μας,

H πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μια ιστοσελίδας είναι η HTML (HyperText Markup Language). Η γλώσσα αυτή διαφέρει από τις προγραμματιστικές μια που απλά περιγράφει πού βρίσκεται τι και τίποτε παραπάνω. Νεώτερες γλώσσες είτε αυτόνομες είτε εξαρτώμενες από την HTML (όπως η java, η XML, το php ή το Asp) προχωρούν παραπέρα και επιτρέπουν πιο σύνθετη δομή, διαχείριση βάσεων δεδομένων και πολλά άλλα.

Σε αυτές τις σελίδες θα προσπαθήσουμε να σας μυήσουμε στον τρόπο δημιουργίας ιστοσελίδων με τη χρήση κώδικα HTML. Υπάρχουν βέβαια πολλά προγράμματα που δημιουργούν σελίδες με απλό και παραστατικό τρόπο. Παρ' όλ' αυτά, η εμβάθυνση στον κώδικα επιτρέπει τη μεγαλύτερη κατανόηση του τί συμβαίνει κι επιτρέπει τη βελτίωση των δημιουργιών μας. To μόνο που θα χρειαστείτε είναι ένας απλός text editor όπως το σημειωματάριο των windows ή το Arachnophilia που χρησιμοποιώ πάντα.

Ξεκινάμε με το πρώτο μας μάθημα. Τα υπόλοιπα θα προστίθενται σιγά-σιγά. Καλή δύναμη! ;-)

1. Tags λέμε τις μικρές 'εντολές' που ορίζουν την αρχή και το τέλος μιας λειτουργίας. Περικλείονται σε σύμβολα μικρότερου-μεγαλύτερου: <εντολή>. Όταν το tag κλείνει, περιλαμβάνει επιπλέον και μια κάθετο: </εντολή>. Αυτό είναι όλο... Για παράδειγμα, η παρακάτω σειρά λέει στον φυλλομετρητή να εμφανίζει με έντονα γράμματα (b=bold) τη λέξη 'έντονα' και με πλάγια (i=italics) τη λέξη 'πλάγια':

Η γραφή αυτή είναι με κανονικά γράμματα. 
Μπορώ να έχω <b>έντονα</b> ή και <i>πλάγια</i>.

Το αποτέλεσμα θα είναι το εξής: Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω έντονα ή και πλάγια.


2. Τα tags μπορούν να περικλείουν άλλα, δεν πρέπει όμως να μπαίνουν διασταυρωμένα.
Π.χ. Η δομή τύπου 3 2 1 1 2 3 όπου τα τριάρια περικλείουν τα δυάρια και αυτά με τη σειρά τους τούς άσσους είναι σωστή, όχι όμως και η αυτή: 3 2 1 2 3 1 όπου τα ζεύγη μπερδεύονται.

Χρησιμοποιώντας τα πιο πάνω tags μαζί με αυτό που ορίζει την υπογράμμιση (u=underlined) μπορούμε να έχουμε συνδυασμούς όπως:

Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i>
ή <u><i>πλάγια και υπογραμμισμένα</i></u>.

Μας δίνει: Μπορώ να έχω έντονα και πλάγια μαζί ή πλάγια και υπογραμμισμένα.


3. Άλλα βασικά tags, απαραίτητα για τη σελίδα σας είναι τα:

  • <html> και </html> που ορίζουν την αρχή και το τέλος του κώδικα (της σελίδας)
  • <head> και </head> που ορίζουν την αρχή και το τέλος της κεφαλίδας όπου ορίζονται δεδομένα που θα δούμε αργότερα.
  • <title> και </title> που ορίζουν την αρχή και το τέλος του τίτλου της σελίδας (εμφανίζεται στη μπλε μπάρα του φυλλομετρητή). Το ποθετείται μέσα στα tags της κεφαλίδας.
  • <body> και </body> που ορίζουν την αρχή και το τέλος του 'σώματος' της σελίδας, του χώρου δηλαδή όπου θα υπάρχουν το κείμενο και οι εικόνες σας.

3. Τελειώνοντας, ας δούμε τη δομή μιας απλής σελίδας. Πιστεύω πως δε θα έχετε πρόβλημα να την κατανοήσετε. Σημειώνω πως τα tags παρουσιάζονται με τις κατάλληλες εσοχές γραμμής ώστε να φαίνεται που ανοίγει και που κλείνει το καθένα. Γράψτε τον κώδικα στο σημειωματάριο, αποθηκεύστε τον κάπου στο δίσκο σας με όνομα test.html και κάντε διπλό κλικ στο αρχείο ώστε να το δείτε με τον φυλλομετρητή σας:

<html>
   <head>
      <title>Η πρώτη μου σελίδα</title>
   </head>
   <body>
      Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i> 
      ή <u><i>πλάγια και υπογραμμισμένα</i></u>.
   </body>
</html>

Στη σελίδα αυτή έχω συγκεντρώσει τα περισσότερα από τα διαθέσιμα tags. Σε κάθε γραμμή θα βρείτε τα εξής:

  • Στην πρώτη στήλη (όπου υπάρχει) αναγράφεται το πεδίο εφαρμογής της εντολής. Το 4.0 σημαίνει πως το tag λειτουργεί σε φυλλομετρητές έκδοσης 4 και μετά. Το NS και τα Ν1 κλπ σημαίνουν πως λειτουργεί μόνον σε NetScape. To ΜS σημαίνει πως λειτουργεί μόνον σε Microsoft Internet Explorer. Όπου δεν αναγράφεται τίποτε, το tag έχει γενική εφαρμογή.
  • Στη δεύτερη στήλη και με έντονη γραφή, υπάρχει η περιγραφή του tag,
  • Στην τρίτη, η σύνταξή του.
  • Στην τέταρτη εμφανίζονται τυχόν σχόλια και διευκρινήσεις.

Κάποιες αναγκαίες επεξηγήσεις:

  • Το σύμβολο ? δηλώνει αριθμό
  • Τα σύμβολα $ και * δηλώνουν κάποιον αλφαριθμητικό χαρακτήρα (γράμμα)
ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ
 Τύπος εγγράφου<HTML></HTML> Ορίζει την αρχή και το τέλος
 Τίτλος<TITLE></TITLE> Εμφανίζεται στη μπλε μπάρα του φυλλομετρητή. Πρέπει να βρίσκεται στην επιφυλλίδα
 Επιφυλλίδα <HEAD></HEAD> Εδώ μπαίνει ο τίτλος, περιγραφή της σελίδας, τα styles και η java
 Bασικός Κορμός <BODY></BODY> το κύριο υλικό της σελίδας

ΟΡΙΣΜΟΣ ΔΟΜΗΣ
 Επικεφαλλίδα<H?></H?> Δέχεται 6 ορισμούς: H1 ως και H6
 Στοίχιση επικεφαλλίδας<H? ALIGN=LEFT|CENTER|RIGHT></H?>  
 Yποδιαίρεση κειμένου <DIV></DIV>  
 Στοίχιση υποδιαίρεσης<DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
4.0Καθορισμένο περιεχόμενο<SPAN></SPAN>  
 Παράθεση σημείωσης <BLOCKQUOTE></BLOCKQUOTE> Συνήθως με εσοχή παραγράφου
4.0Σημείωση <Q></Q> Για σύντομες σημειώσεις
 Έμφαση <EM></EM> Συνήθως εμφανίζει πλάγια (italics) γράμματα
 Έντονη έμφαση<STRONG></STRONG> Συνήθως εμφανίζει έντονα (bold) γράμματα
 Κώδικας <CODE></CODE> Για παράθεση γραμμών κώδικα
 Δείγμα<SAMP></SAMP>  
 Είσοδος από πληκτρολόγιο<KBD></KBD>  
 Μεταβλητή <VAR></VAR>  
 Ορισμός <DFN></DFN> Δε χρησιμοποιείται ευρέως