η γλώσσα 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ον ΜΑΘΗΜΑ

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

Η γραφή αυτή είναι με κανονικά γράμματα. 

Μπορώ να έχω έντονα ή και πλάγια.

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

---

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

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

Μπορώ να έχω έντονα και πλάγια μαζί

ή πλάγια και υπογραμμισμένα.

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

---

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

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

---

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

                          Μπορώ να έχω έντονα και πλάγια μαζί  

      ή πλάγια και υπογραμμισμένα.     

το είδα 

εδώ:

http://www.stratari.gr/html/lesson_01.html