Εισαγωγή στην HTML

(15 Οκτωβρίου, 2005)

Εισαγωγή

Στο βικιβιβλίο αυτό θα επιχειρήσουμε να κάνουμε μία εισαγωγή στον κώδικα html. Αρκετοί ίσως να θεωρούσαν το εγχείρημα αυτό άσκοπο καθώς ο κώδικας δεν πολυχρησιμοποιείται. Αυτό συμβαίνει διότι υπάρχουν αρκετά προγράμματα που προσφέρουν ιδιαίτερα εύχρηστο και απλό περιβάλλον για την κατασκευή επαγγελματικών και κομψών ιστοσελίδων με πολλές δυνατότητες σε ελάχιστο χρόνο και χωρίς να απαιτούν από τον χρήστη ειδικές γνώσεις. Επιπλέον η γλώσσα html τείνει να εξαφανιστεί καθώς υπάρχουν αρκετές άλλες περισσότερο εξελιγμένες και με μεγαλύτερες δυνατότητες όπως η XML, η sHTML κ.α. Ωστόσο η άποψη αυτή (ότι είναι άσκοπη η γνώση της html) είναι αβάσιμη καθώς αρκετές φορές θα χρειαστεί κάποιος να επέμβει στον κώδικα τόσο για αλλαγές ή ενέργειες τις οποίες το πρόγραμμα που χρησιμοποιούμε δεν μπόρεσε να εκτελέσει όσο και για διορθώσεις σφαλμάτων που μπορεί να οφείλονται σε πολλούς λόγους όπως π.χ. ασυμβατότητα προγράμματος κατασκευής ιστοσελίδων και παροχέα φιλοξενίας ιστοσελίδας. Στις περιπτώσεις αυτές αλλά και σε πολλές άλλες η γνώση html όχι μόνο μας διευκολύνει αλλά δύναται και να είναι η μόνη λύση για την κατασκευή μίας ιστοσελίδας. Ενδεικτικά μπορούμε να αναφέρουμε ότι κατά την δημιουργία λημμάτων στην Βικιπαίδεια και με δεδομένο ότι αυτή γίνεται σε ένα κειμενογράφο χωρίς πολλές δυνατότητες (σε σχέση π.χ. με το Word) η γνώση html μπορεί να δημιουργήσει εντυπωσιακές σελίδες με πλαίσια, φωτογραφίες, κ.α. Χωρίς την γνώση αυτή δεν θα ήταν δυνατόν κάτι τέτοιο να καταστεί εφικτό.

Το Βικιβιβλίο αυτό είναι γραμμένο έτσι ώστε να είναι κατανοητό ακόμα και στον αρχάριο χρήστη υπολογιστή. Έτσι ορισμένες φορές η επιστημονική ακρίβεια δύναται να υποχωρήσει προς χάριν της απλοποίησης και της κατανόησης. Ωστόσο αυτό δεν γίνεται ποτέ εις βάρος της επιστήμης των υπολογιστών.

Βασικές Γνώσεις

Πριν ξεκινήσουμε την εισαγωγή στον κώδικα αυτό σκόπιμο θεωρούμε να τονίσουμε ότι η html δεν είναι γλώσσα προγραμματισμού. Δηλαδή μέσα από την html δεν μπορούμε να κατασκευάσουμε προγράμματα (ακόμα και η αλληλεπίδραση χρήστη-διακομιστή πολλές φορές καθίσταται δύσκολη), αλλά μόνο να δώσουμε στον περιηγητή (web browser) τις οδηγίες για το τι θα εμφανίζει στο χρήστη που θα προσπελάσει μία ιστοσελίδα.

Ξεκίνημα

Για να γράψουμε κώδικα html δεν χρειαζόμαστε κάποιο πρόγραμμα που να μεταφράζει σε γλώσσα υπολογιστή ή μέσα από το οποίο να γίνεται η όλη διαδικασία κατασκευής ιστοσελίδων. Έτσι ένας απλός επεξεργαστής κειμένου (text editor) όπως το Σημειωματάριο (Notepad) των Windows ή το Kate των Linux είναι αρκετός για να φτιάξουμε τις ιστοσελίδες μας.

Το αρχείο μας θα πρέπει να έχει κατάληξη .htm ή .html για να θεωρείται ιστοσελίδα από το λειτουργικό μας σύστημα και να ανοίγει με το κατάλληλο πρόγραμμα περιήγησης (π.χ. Internet Explorer, Mozilla, Firefox, Netscape, κ.α.). Πρέπει επίσης να αναφέρουμε ότι τα προγράμματα περιήγησης (όπως τα παραπάνω) έχουν ενσωματωμένες τις οδηγίες για την "μετάφραση" των εντολών html που περιέχονται στο αρχείο μας. Δύναται επίσης να υπάρχουν διαφορές από web browser σε web browser που οφείλονται σε διαφορετικό "στυλ μετάφρασης".

Η πρώτη μας ιστοσελίδα

Εφόσον έχουμε ανοίξει έναν text editor (όπως το Σημειωματάριο ή Notepad των Windows, που μπορεί να βρεθεί στο Έναρξη > Προγράμματα > Βοηθήματα ή Έναρξη > Εκτέλεση > "notepad" και [OK] ή όπως το TextEdit στα Mac που βρίσκεται στα Applications) είμαστε έτοιμοι να γράψουμε κώδικα html. Η βασική εντολή που πρέπει γράψουμε προκειμένου το πρόγραμμα περιήγησης να "αναγνωρίσει" τον κώδικα είναι <html>. Γράφουμε html μέσα σε <> τα οποία επεξηγούν στο πρόγραμμα περιήγησης ότι το περιεχόμενό τους συνιστά εντολή. Κάθε εντολή του κώδικα html πρέπει και να κλείνει (σχεδόν το 95% των εντολών, υπάρχουν και μερικές όπως θα δούμε που δεν κλείνουν). Με το κλείσιμο εννοούμε ότι παύει να ισχύει η ιδιότητα που έχουμε θέσει. Έτσι στο τέλος του κειμένου θα πρέπει να κλείσουμε την εντολή <html> για να κλείσουμε και το αρχείο μας. Όταν βάλουμε εντολή για έντονα γράμματα (Bold) θα πρέπει να την κλείσουμε εκεί που επιθυμούμε να σταματήσουν να εμφανίζονται έντονα γράμματα. Κάθε εντολή κλεισίματος είναι παρόμοια με την εντολή ανοίγματος μόνο που περιέχει τον χαρακτήρα / αμέσως μετά το <. Δηλαδή η εντολή κλεισίματος της <html> είναι: </html>.

Έτσι μέχρι στιγμής έχουμε το εξής (καλό είναι μετά από κάθε εντολή να αλλάζουμε γραμμή):

Αυτή είναι η πρώτη μας ιστοσελίδα που βέβαια δεν περιέχει απολύτως τίποτα. Αν την αποθηκεύσουμε ως paradeigma.html και την ανοίξουμε με έναν περιηγητή ιστοσελίδων θα δούμε ένα γκρι παράθυρο χωρίς να εμφανίζει τίποτα.

Για να γράψουμε κάτι, πληκτρολογούμε ανάμεσα στην εντολή ανοίγματος και κλεισίματος το κείμενο που επιθυμούμε, π.χ.:

<html>
Αυτό είναι ένα παράδειγμα
</html>

Κατά την περιήγηση αυτής της σελίδας θα εμφανιστεί μόνο το κείμενο: Αυτό είναι ένα παράδειγμα

Στο σημείο αυτό πολύ σημαντικό είναι να διευκρινίσουμε το εξής: κατά την ανάγνωση του κώδικα από το πρόγραμμα η οποιαδήποτε μορφοποίηση θέτουμε στον κειμενογράφο ακυρώνεται. Έτσι αν πατήσουμε στο παραπάνω παράδειγμα ENTER ανάμεσα στο "είναι" και στο "ένα" ενώ στον επεξεργαστή κειμένου θα εμφανιστεί η αλλαγή γραμμής (ή παραγράφου) στην ιστοσελίδα μας δεν θα εμφανιστεί. Για να αλλάξουμε συνεπώς παράγραφο θα πρέπει να βάλουμε την ειδική εντολή <P> η οποία δεν κλείνει. Ομοίως αν στον επεξεργαστή μας έχουμε κείμενο υπογραμμισμένο δεν θα εμφανιστεί η υπογράμμιση στην ιστοσελίδα (γι' αυτό άλλωστε ένας απλός κειμενογράφος χωρίς πολλές δυνατότητες είναι αρκετός και μάλιστα προτιμητέος).

Βασικές Εντολές

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

<B> - Έντονη γραφή (bold)
<U> - Υπογραμμισμένα (Underlined)

<I> - Πλάγια γραφή (Italics)

<CENTER> - Κεντρική στοίχιση
<LEFT> - Αριστερή στοίχιση
<RIGHT> - Δεξιά στοίχιση

Οι παραπάνω εντολές κλείνουν ( </B>, </U>, </I>, </CENTER> </LEFT>, </RIGHT>)

<P> - Παράγραφος
<BR> - Συνέχιση γραφής στην αμέσως αποκάτω γραμμή
<HR> - Η εντολή αυτή χαράσσει μία οριζόντια γραμμή στην σελίδα μας (χρησιμοποιείται κυρίως όταν αλλάζουμε θεματική ενότητα)

Οι τρεις παραπάνω εντολές δεν κλείνουν

Υπερσυνδέσεις - Links

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

Ο κώδικας για την δημιουργία υπερσύνδεσης είναι: <A HREF="www.tolinkmas.com">ΜΠΛΑ-ΜΠΛΑ</Α>. Στον παραπάνω κώδικα το πρώτο μέρος είναι <A HREF= όπου δηλώνεται η ύπαρξη ιστοσελίδας μέσα στα εισαγωγικά (τα οποία τοποθετούμε, δεν είναι δηλαδή για χάριν της ανάλυσης μας) την διεύθυνση στην οποία παραπέμπουμε. Μετά τον χαρακτήρα > δηλαδή στο ΜΠΛΑ-ΜΠΛΑ γράφουμε ότι θέλουμε να εμφανίζεται στην ιστοσελίδα μας και τέλος το </A> είναι η εντολή κλεισίματος του link μας.

Παράδειγμα: <A HREF="http://www.el.wikipedia.org">Κάντε κλικ εδώ για να μπείτε στην ιστοσελίδα της Βικιπαίδειας</A>. Στο παράδειγμα μας το "Κάντε κλικ εδώ για να μπείτε στην ιστοσελίδα της Βικιπαίδειας" εμφανίζεται στη ιστοσελίδα μας μπλε και υπογραμμισμένο που υποδηλώνει πως όταν κάνουμε κλικ πάνω σε αυτές τις λέξεις θα μεταβούμε στην διεύθυνση: "http://www.el.wikipedia.org".

Εικόνες

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

Η Εντολή για την προσθήκη εικόνας είναι: <IMG SRC="/εκείπουείναιηεικόναμας/εικόνα.gif">. Το εκείπουείναιηεικόναμας δηλώνει την τοποθεσία στην οποία θα ανατρέχει ο περιηγητής για να αντλεί την εικόνα και να την εμφανίζει στην ιστοσελίδα μας. Έτσι αν κάποιος έχει ανεβάσει την ιστοσελίδα του σε έναν παροχέα αυτός του προσφέρει χώρο για τις ιστοσελίδες και τα υπόλοιπα αρχεία του. Αν η διεύθυνση όπου βρίσκεται η ιστοσελίδα μας είναι για παράδειγμα www.tositemoy.gr τότε η εικόνα μπορεί να βρίσκεται στον φάκελο: www.tositemoy.gr/eikones.

Πολλές φορές κατασκευάζουμε τις ιστοσελίδες μας σε έναν τοπικό φάκελο στον σκληρό μας ή σε άλλο αποθηκευτικό μέσο. Κατασκευάζουμε στον φάκελο με την ιστοσελίδα μας έναν υποφάκελο με το όνομα π.χ. images (για να το θυμόμαστε ευκολότερα) όπου αποθηκεύουμε τις εικόνες που εμφανίζονται στην ιστοσελίδα μας. Αργότερα όταν κατασκευάσουμε όλο το site ανεβάζουμε όλα τα αρχεία (όχι μόνο τις ιστοσελίδες *.html αλλά και τους φακέλους με τις εικόνες, τους ήχους, τα βίντεο, κ.λ.π.). Στην αμέσως προηγούμενη περίπτωση (η οποία είναι και η συνηθέστερη) η εντολή θα είναι κάπως έτσι: <IMG SRC="/images/image1.gif">. Συνιστάται η χρήση όχι ολόκληρης της διαδρομής του δίσκου (π.χ. c:/istoselida/images/image1.gif) αλλά της συντμημένης, καθώς κατά το ανέβασμα θα πρέπει να την αλλάξουμε. Η συντμημένη μορφή μας εξασφαλίζει ότι η εικόνα μας θα λειτουργεί τόσο στην περιήγηση τοπικά όσο και στο ίντερνετ. Τέλος θα πρέπει να αναφέρουμε όπως είναι προφανές ότι η εντολή αυτή δεν κλείνει.

Προχωρημένες εντολές

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

Δομή σελίδας

<HEAD> Η εντολή αυτή μπαίνει στην αρχή της σελίδας ώστε να περικλείει εντολές που περιέχουν πληροφορίες προς τον browser αλλά δεν είναι μέρος της σελίδας. Παράδειγμα: <HEAD> .... </HEAD>

<BODY> Η εντολή αυτή δηλώνει στο πρόγραμμα που χρησιμοποιούμε για την περιήγηση ότι ο παρακάτω κώδικας και τα δεδομένα που γράφουμε ανήκουν στο κυρίως μέρος της ιστοσελίδας. Πρακτικά μετά την εντολή <HTML> και την HEAD με ότι περικλείει, μπαίνει η <BODY> ενώ κλείνει συνήθως αμέσως πριν από την </HTML> (η εντολή κλεισίματος όπως αναμέναμε είναι: </BODY>).

<TITLE> Η εντολή αυτή δηλώνει στον web browser τι τίτλο επιθυμούμε να έχει η ιστοσελίδα. Ο τίτλος εμφανίζεται στην επάνω λωρίδα του παραθύρου του web browser (εκεί όπου εμφανίζεται ο τίτλος της εφαρμογής / προγράμματος που χρησιμοποιούμε). Η TITLE είναι απαραίτητο να μπει μέσα στην HEAD. Παράδειγμα: <HEAD> <TITLE>My Homepage</TITLE> </HEAD>

Πίνακες

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

Η εντολή για να δώσουμε στον περιηγητή να καταλάβει ότι σκοπεύουμε να απεικονίσουμε τα επόμενα δεδομένα σε πίνακα είναι: <TABLE>. Η εντολή φυσικά κλείνει (</TABLE>) μόλις τελειώσουμε με τον πίνακα. Ωστόσο μόνο η εντολή table δεν εξηγεί στο πρόγραμμα πόσες στήλες και γραμμές θέλουμε να συμπεριλάβουμε στον πίνακα μας. Οι εντολές για την δημιουργία γραμμών είναι <TR> και για τη δημιουργία στηλών <TD>. Πρέπει πάντα στον κώδικα να ξεκινάμε με τις γραμμές και μετά με τις στήλες. Το επόμενο παράδειγμα θα μας εξηγήσει αναλυτικά πως φτιάχνουμε έναν πίνακα σε html:

<TABLE> <TR> <TD>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE>

Ο πίνακας του παραδείγματος εξηγεί στον περιηγητή ιστοσελίδων να κατασκευάσει έναν πίνακα με τη πρώτη σειρά/γραμμή (<TR>) να περιέχει δύο στήλες (<TD>): στην πρώτη να γράφει τα δεδομένα "1" και στην δεύτερη τα δεδομένα "2". Ο πίνακας όμως συνεχίζει με δεύτερη γραμμή (<TR>) η οποία επίσης έχει δύο στήλες (<TD>) με τα δεδομένα "3" και "4" αντίστοιχα. Παρατηρούμε επίσης ότι μόλις τελειώσουν τα δεδομένα σε μία στήλη μας, την κλείνουμε με την εντολή </TD> για να αρχίσουμε καινούργια στήλη (<TD>) -εφόσον επιθυμούμε-. Ομοίως μόλις τελειώσουμε με την πρώτη γραμμή θα πρέπει να την κλείσουμε με το αντίστοιχο κλείσιμο της <TR> δηλαδή την: </TR>. Σημείωση: Τα κενά δεν παίζουν κανένα ρόλο στην απεικόνιση της σελίδας απλώς διευκολύνουν την ανάγνωση από τον χρήστη.

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

<H#> Η εντολή αυτή δηλώνει τις επικεφαλίδες των διάφορων μερών του κειμένου μας π.χ. τα κεφάλαια. Μπορεί να δηλώσει μέχρι 6 κεφάλαια-υποκεφάλαια ξεκινώντας από το Η1 έως το Η6. π.χ.:
<H1>Πρώτο κεφάλαιο</H1> Το κείμενο του πρώτου κεφαλαίου είναι.....
Για να δηλώσουμε ότι ένα μέρος του κειμένου είναι υπομέρος ενός άλλου ορίζουμε στην αρχή του επικεφαλίδα επιπέδου +1 από το μητρικό του, π.χ. για ένα υποκεφάλαιο του παραπάνω θα γράφαμε:
<H1>Πρώτο κεφάλαιο</H1> Το κείμενο του πρώτου κεφαλαίου είναι..... . . <H2>Υποκεφάλαιο</H2> Κείμενο υποκεφαλαίου....
Οποτεδήποτε θέλουμε μπορούμε να ορίσουμε αρχή ενός κεφαλαίου οποιουδήποτε επιπέδου. Συνήθως στους browser οι τίτλοι των κεφαλαίων εμφανίζονται με μεγαλύτερη γραμματοσειρά, αλλά αυτή η εντολή δεν θα πρέπει να χρησιμοποιείται απλώς για λόγους εμφάνισης αλλά μόνο για να σχηματιστεί η δομή του κειμένου.

Λίστες

Ορισμένες φορές χρειάζεται να εμφανίσουμε κάποια στοιχεία σε λίστες, με ταξινόμηση ή όχι.

Αταξινόμητες λίστες

Για να δημιουργήσουμε λίστα χωρίς ταξινόμηση βάζουμε αρχικά την εντολή <UL> με την οποία δηλώνουμε ότι τα επόμενα θα είναι δεδομένα αταξινόμητης λίστας. Έπειτα για κάθε δεδομένο ή δεδομένα που θέλουμε να τοποθετήσουμε βάζουμε την εντολή <LI>. Στο τέλος του κάθε στοιχείου κλείνουμε και προχωράμε σε νέο <LI> στοιχείο της λίστας. Συνήθως το κάθε στοιχείο μιας αταξινόμητης λίστας εμφανίζεται μετά από κάποιο σύμβολο όπως η κουκκίδα. Παράδειγμα:

Οι λόγοι που οδήγησαν στο φαινόμενο είναι: <UL> <LI>Λόγος α</LI> <LI>Λόγος β</LI> </UL>

Αυτό έχει ως αποτέλεσμα:

Οι λόγοι που οδήγησαν στο φαινόμενο είναι:

Λόγος α
Λόγος β

Ταξινομημένη λίστα

Η ταξινομημένη λίστα είναι παρόμοια με την αταξινόμητη. Αντί για την αρχική εντολή <UL> βάζουμε <OL>. Το κάθε στοιχείο μιας ταξινομημένης λίστας εμφανίζεται με αύξουσα αρίθμηση ξεκινώντας από το 1. Παράδειγμα:

Οι λόγοι που οδήγησαν στο φαινόμενο είναι: <OL> <LI>Λόγος α</LI> <LI>Λόγος β</LI> </OL>

Αυτό έχει ως αποτέλεσμα:

Οι λόγοι που οδήγησαν στο φαινόμενο είναι:

Λόγος α
Λόγος β

Χρώμα Φόντου

Για να κάνουμε την ιστοσελίδα μας περισσότερο ευπαρουσίαστη πολλές φορές βάζουμε χρώμα για φόντο. Η εντολή είναι: <body bgcolor="#######">. Η εντολή δεν κλείνει όπως είναι λογικό. Οι χαρακτήρες ###### υποδηλώνουν ότι πρέπει να αντικατασταθούν από τα κατάλληλους χαρακτήρες που υποδηλώνουν το χρώμα όμως ο πρώτος χαρακτήρας διατηρείται σταθερός. Το χρώμα στην html βγαίνει βάσει του τρόπου που απεικονίζεται το χρώμα σε συσκευές όπως η οθόνη, δηλαδή RGB (red-green-blue). Η οθόνη του υπολογιστή (όπως άλλωστε και η τηλεόραση αλλά και οι υπόλοιπες παρόμοιες συσκευές) συνθέτουν το χρώμα από τα τρία βασικά χρώματα: κόκκινο-πράσινο-μπλε. Οι χαρακτήρες ###### αναφέρονται σε αυτά τα χρώματα. Τα δύο πρώτα # αναφέρονται στο κόκκινο, τα επόμενα δύο # στο πράσινο και τέλος τα τελευταία δύο # στο μπλε (όπως και η σειρά RGB). Οι τιμές που παίρνουν είναι σύμφωνες με το δεκαεξαδικό σύστημα δηλαδή από 0 έως F (0 είναι η μικρότερη τιμή και F η μεγαλύτερη). Η σειρά είναι 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Αν θέλουμε να έχουμε π.χ. άσπρο χρώμα θα πρέπει να βάλουμε τις τιμές "FFFFFF" (αφού το άσπρο αποτελεί την σύνθεση όλων των χρωμάτων). Αντίστροφα για το μαύρο "000000". Δείτε και κάποια άλλα παραδείγματα χρωμάτων εδώ. Εναλλακτικά σε τελευταίες εκδόσεις της html μπορούμε να βάλουμε τα ονόματα των χρωμάτων στα αγγλικά (π.χ. green, red, κ.λ.π.) αντί για τα ορίσματα στο δεκαεξαδικό σύστημα, ωστόσο αυτό δεν μας δίνει πολλές επιλογές όπως για παράδειγμα όλες τις αποχρώσεις του πράσινου ή του κόκκινου κ.λ.π.

Χρώμα Γραμματοσειράς

Ομοίως μπορούμε να αλλάζουμε και τα χρώματα της γραμματοσειράς μας για κομψότερες ιστοσελίδες. Η εντολή είναι <font color="#######"> και κλείνει με απλό </font>. Εδώ ισχύουν ακριβώς ότι και παραπάνω για το φόντο όσον αφορά το ορίσματα για τα #######.

Εικόνα για φόντο

Εναλλακτικά αντί για χρώμα, μπορούμε να βάλουμε εικόνα για φόντο. Η εντολή είναι: <body background=”eikona.gif”>. Η εντολή όπως είναι λογικό δεν κλείνει.

Τυπωμένο κείμενο

<TT> Η παραπάνω εντολή (με κλείσιμο </TT>) αλλάζει την προεπιλεγμένη γραμματοσειρά μας σε γράμματα γραφομηχανής. Δηλαδή στο παράδειγμα <TT>Αυτά είναι γράμματα γραφομηχανής</TT> οι λέξεις: "Αυτά είναι γράμματα γραφομηχανής" θα φαίνονται σαν γράμματα γραφομηχανής και θα ξεχωρίζουν από το υπόλοιπο κείμενο.

Ιδιότητες (Attributes)

Οι ιδιότητες είναι μέρη του κώδικα HTML που προσθέτουν κάποια επιπλέον χαρακτηριστικά στο κώδικα μας και κατ' επέκταση στο τρόπο με τον οποίο εμφανίζεται η ιστοσελίδα μας. Οι ιδιότητες προστίθονται μέσα στο κώδικα HTML μας (δηλαδή < και >) μετά από κάθε εντολή (συνήθως στο τέλος ακριβώς πριν από το >.

Η Ιδιότητα BORDER

Η ιδιότητα BORDER είναι ένα τμήμα που μπορεί να προστεθεί σε ορισμένες εντολές που εμφανίζουν πλαίσια. Συγκεκριμένα μπορούμε να χρησιμοποιήσουμε το BORDER στους πίνακες, στη δημιουργία πλαισίων και όταν βάζουμε ως απεικόνιση συνδέσμου εικόνα αντί για κείμενο (π.χ. <A HREF="selida.html"><IMG SRC="eikona.gif"></A>. Στο παράδειγμα αυτό μόλις κάνουμε κλικ στην εικόνα: eikona.gif θα μεταφερθούμε στην σελίδα: selida.html). Το BORDER υποδηλώνει το μέγεθος του πλαισίου. Έτσι όταν έχουμε BORDER="0" δεν εμφανίζεται το πλαίσιο. Όσο μεγαλύτερα νούμερα βάζουμε τόσο μεγαλύτερο (χονδρότερο) είναι και το πλαίσιο. Η ιδιότητα μπαίνει στο τέλος του κειμένου της εντολής πρίν βάλουμε τον χαρακτήρα >. (π.χ. <TABLE BORDER="0"> ή <IMG SRC="kati.jpg" BORDER="0">)

Η Ιδιότητα ALT

Η ιδιότητα ALT προστίθεται και αυτή σε ορισμένες εντολές και υποδηλώνει τον εναλλακτικό τρόπο εμφάνισης. Η κύρια χρήση του ALT είναι στις εικόνες. π.χ. <IMG SRC="eikona1.gif" ALT="Η Εικόνα 1">. Ορισμένοι παλαιοί web browser δεν είχαν την δυνατότητα εμφάνισης εικόνων (τώρα βέβαια όλοι έχουν αυτήν την δυνατότητα). Το τμήμα αυτό (ALT) υποδήλωνε στο περιηγητή που δεν εμφάνιζε εικόνες να εμφανίσει το κείμενο που περιείχε η ιδιότητα. Στο προηγούμενο παράδειγμα θα εμφανιζόταν στη θέση της εικόνας το κείμενο "Εικόνα 1" (χωρίς τα εισαγωγικά). Ακόμα όμως και σήμερα η ιδιότητα αυτή χρησιμοποιείται: Αν το χρησιμοποιήσουμε σε μία ιστοσελίδα μας, μέχρι να φορτωθούν οι εικόνες θα εμφανίζονται τα ορίσματα ALT των εικόνων αυτών (κάτι τέτοιο θα είναι ιδιαίτερα ορατό αν χρησιμοποιούμε γραφικά με μεγάλο μέγεθος τα οποία χρειάζονται κάποιο χρόνο για να φορτωθούν), επίσης η ιδιότητα αυτή είναι αρκετά φιλική στις μηχανές αναζήτησης καθώς το κείμενο προσφέρει κάποιου είδους "ταυτότητας" και περιγραφής της εικόνας σε σχέση με το περιεχόμενο της εικόνας που δεν είναι αντιληπτό από τις μηχανές.

Η ιδιότητα WIDTH

Η ιδιότητα αυτή μας επιτρέπει να δηλώσουμε το επιθυμητό πλάτος ενός στοιχείου. Συνηθισμένα στοιχεία είναι π.χ. ένας πίνακας, μία εικόνα, κ.α. Η ιδιότητα αυτή μπορεί να υποδηλώνει το πλάτος τόσο ως ποσοστό της σελίδας μάς όσο και ως αριθμό pixels. Για παράδειγμα: <table border="1" width="50%">. Ο προηγούμενος πίνακας θα έχει πλάτος το 50% της ιστοσελίδας μας (είτε προβάλετε σε οθόνη ενός κινητού τηλεφώνου είτε σε μία οθόνη υπολογιστή αρκετά μεγαλύτερου μεγέθους φυσικά). Αντίστοιχα αν αλλάξουμε το 50% σε 300px τότε θα έχουμε ένα πίνακα πλάτους 300 pixels.

Παράδειγμα:

Πίνακας
100%	πλάτους

και

Πίνακας
100	pixels

Πλαίσια

Εισαγωγή

Η κατασκευή πλαισίων αποτελεί μία δύσκολη και χρονοβόρα σχετικά διαδικασία. Θα προσπαθήσουμε συνεπώς να την αναλύσουμε με τον ευκολότερο δυνατό και κατανοητό τρόπο. Το σημείο κλειδί εδώ είναι η δημιουργία μίας σελίδας "υποδομής" η οποία δεν θα περιέχει τίποτα για εμφάνιση εκτός από κώδικα. Στη σελίδα αυτή θα ορίσουμε πως ο περιηγητής μας θα εμφανίσει τα πλαίσια, που ακριβώς θα εμφανιστούν αυτά και τι σελίδες θα περιέχουν. Η πιο συνηθισμένη κατασκευή με πλαίσια περιλαμβάνει τον διαχωρισμό της οθόνης σε δύο πλαίσια. Ένα με το μενού - περιεχόμενα του ιστότοπου (το οποίο είναι συνήθως αριστερά) και ένα όπου εμφανίζονται οι επιμέρους ιστοσελίδες (συνήθως είναι το δεξί πλαίσιο και καταλαμβάνει το μεγαλύτερο μέρος της οθόνης).

Η σελίδα υποδομής

Θα πρέπει πάντα προκειμένου να εμφανιστούν τα πλαίσια να ορίσουμε την σελίδα υποδομής μας ως κεντρική σελίδα (π.χ. index.html). Την σελίδα αυτήν θα πρέπει να διαβάζει ο web browser για να εμφανίζει τα περιεχόμενα κάθε πλαισίου. Αν προσπαθήσουμε να ανοίξουμε απευθείας μία άλλη σελίδα του ιστότοπου μας, αυτή θα ανοίξει αλλά δεν θα εμφανιστούν τα άλλα πλαίσια. Θα παρουσιάσουμε την κατασκευή της ιστοσελίδας αυτής με ένα παράδειγμα:

<HTML> <TITLE>Ο ιστότοπος μου</TITLE> <FRAMESET COLS="180,*"> <FRAME SRC="MENU.HTML" NAME="ARISTERO"> <FRAME SRC="MAIN.HTML" NAME="DEKSIO"> </FRAMESET> </HTML> τη σελίδα αυτή δίνουμε στο πρόγραμμα μας την εντολή να κατασκευάσει δύο πλαίσια σε στήλες - σειρές (<FRAMESET COLS ...). Αν βάζαμε ROWS (γραμμές) αντί για "COLS" θα φτιάχναμε οριζόντια πλαίσια (φυσικά μπορούμε να φτιάξουμε ταυτόχρονα και οριζόντια και κάθετα). Στην ίδια εντολή γράφουμε μετά το σύμβολο: = τα εξής: ( 180,* ). Αυτό σημαίνει ότι το πρώτο πλαίσιο θα έχει πλάτος 180 pixels και το * υποδηλώνει ότι το υπόλοιπο της οθόνης θα αποτελεί το άλλο πλαίσιο. Θα μπορούσαμε να βάλουμε και ποσοστά επί τοις εκατό (π.χ. 20%, 80%) δηλαδή το πρώτο πλαίσιο 20% και το υπόλοιπο 80% στο δεύτερο (το άθροισμα φυσικά θα πρέπει να συγκεντρώνει το 100%). Η σειρά με την οποία κατασκευάζονται τα πλαίσια είναι από αριστερά προς δεξιά και από πάνω προς τα κάτω (δηλαδή τα 180 pixels στο παράδειγμα μας αναφέρονται στο αριστερό πλαίσιο και το υπόλοιπο τμήμα στο αριστερό).

Στις επόμενες σειρές ( <FRAME SRC="MENU.HTML" NAME="ARISTERO"> και <FRAME SRC="MAIN.HTML" NAME="DEKSIO">) δηλώνουμε τα ονόματα των πλαισίων μας με τη σειρά που τα έχουμε κατασκευάσει απο την προηγούμενη εντολή και τις σελίδες που θα διαβάζει ο web browser μας για κάθε πλαίσιο από αυτά. Έτσι το πρώτο πλαίσιο με μέγεθος 180 pixel το ονομάζουμε ARISTERO και το δεύτερο DEKSIO. Τα ονόματα που θα διαβάσει το πρόγραμμα μας είναι menu.html για το αριστερό πλαίσιο και main.html για το δεξί.

Στο τέλος πριν κλείσουμε την εντολή html κλείνουμε την FRAMESET.

Παρατήρηση: Η μόνη εντολή που θα πρέπει (όχι βέβαια απαραίτητα) να περιέχει μία σελίδα υποδομής εκτός από αυτές για το καθορισμό των πλαισίων είναι ή TITLE. Εξάλλου όλες οι άλλες εντολές δεν έχουν νόημα: αυτό που ο χρήστης θα δει είναι τα περιεχόμενα των πλαισίων. Αν θέλουμε επίσης να μην εμφανίζονται διαχωριστικές ανάγλυφες γραμμές ανάμεσα στα πλαίσια, μπορούμε στην εντολή <FRAMESET COLS="180,*"> να προσθέσουμε το τμήμα: BORDER="0" (δηλαδή θα γίνει κάπως έτσι: <FRAMESET COLS="180,*" BORDER="0">).

Οι υπόλοιπες σελίδες

Στις υπόλοιπες σελίδες όταν τοποθετούμε έναν σύνδεσμο (link) γράφουμε και το πλαίσιο προορισμού. Έτσι στην εντολή <A HREF="kati.html">keimeno</A> Θα προσθέσουμε το κομμάτι TARGET="onoma_plaisiou". Η εντολή θα διαμορφωθεί δηλαδή έτσι: <A HREF="kati.html" TARGET="onoma_plaisiou">keimeno</A >.

Στο προηγούμενο παράδειγμα μας η σελίδα menu.html μπορεί να περιέχει τις ιστοσελίδες του ιστότοπου μας. Αν για παράδειγμα μία ιστοσελίδα περιέχει φωτογραφίες μας θα πρέπει να συμπεριλάβουμε μεταξύ άλλων στο αρχείο menu.html τα εξής:

<A HREF="fotos.html" TARGET="DEKSIO">Δείτε τις φωτογραφίες μου</A> -- Έτσι κάνοντας κλικ κάποιος στο κείμενο "Δείτε τις φωτογραφίες μου" στο δεξιό πλαίσιο θα ανοίξει η ιστοσελίδα "fotos.html".

Με αυτό τον τρόπο μπορούμε να έχουμε τα περιεχόμενα μας στο αριστερό πλαίσιο και με κλικ στους συνδέσμους που αυτό περιέχει, ο χρήστης θα μεταφέρεται στην αντίστοιχη σελίδα (η οποία θα εμφανίζεται στο δεξί πλαίσιο).

Σχετικά Ζητήματα

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

Εικόνες

Οι εικόνες που δημοσιεύονται στο διαδίκτυο πρέπει να έχουν μικρό σχετικά μέγεθος και αυτό για να κατεβαίνουν γρήγορα και εύκολα. Θα πρέπει να μην ξεχνάμε ότι ο επισκέπτης της ιστοσελίδας μας δεν έχει πάντα την υπομονή να περιμένει αρκετή ώρα για να κατέβει μία εικόνα. Ιδίως όταν οι σελίδες μας περιέχουν αρκετές εικόνες. Θα πρέπει λοιπόν να χρησιμοποιούμε ειδική κωδικοποίηση στις εικόνες μας. Συνήθως οι εικόνες με την υψηλότερη συμπίεση (και άρα το μικρότερο μέγεθος) είναι αυτές οι οποίες έχουν προέκταση gif ή jpg (εναλλακτικά: jpeg). Οι εικόνες αυτές συνήθως καταλαμβάνουν μικρό μέγεθος (ανάλογα βέβαια την ποιότητα που θα καθορίσουμε κατά την συμπίεση).

Για φωτογραφίες καλύτερα αποτελέσματα παρέχουν οι εικόνες jpg (ή jpeg), ενώ για γραφικά προτιμότερο είναι να χρησιμοποιούμε εικόνες gif οι οποίες μπορεί να καταλαμβάνουν ακόμα μικρότερο χώρο και συνεπώς να κατεβαίνουν ακόμα πιο γρήγορα σε σχέση με τις πρώτες. Ένα επίσης χαρακτηριστικό των εικόνων gif είναι ότι υποστηρίζουν και αδιαφάνεια (transparency). Αδιαφάνεια είναι όταν σε μία εικόνα ορισμένα εικονοστοιχεία (pixel) είναι διαφανή. Έτσι συνήθως αυτά τα pixel παίρνουν το χρώμα του φόντου της ιστοσελίδας μας. Έτσι αν θέλουμε να βάλουμε ως γραφικό ένα τρίγωνο ή ένα κύκλο για παράδειγμα, οι περιοχές έξω από το σχήμα οι οποίες δεν μπορούν να αποκοπούν καταστούν την ιστοσελίδα μας λιγότερο κομψή. Θα πρέπει αυτές τις περιοχές γύρω από τον κύκλο ή το τρίγωνο (ή φυσικά από οποιοδήποτε άλλο σχήμα ή γραφικό) να γίνουν διαφανείς. Αν επιχειρούσαμε να βάψουμε αυτές τις περιοχές με το χρώμα του φόντου της ιστοσελίδας μας εκτός από το μεγαλύτερο μέγεθος που θα αποκτούσε το γραφικό μας, θα καθιστούσε ασύμφορη την αλλαγή του χρώματος του φόντου μας, καθώς θα έπρεπε να ξαναλλάξουμε το χρώμα όλων των σχετικών εικόνων μας (κάτι ιδιαίτερα χρονοβόρο και ανιαρό). Τέλος άλλο ένα πολύ καλό χαρακτηριστικό που ενσωματώνουν οι εικόνες της μορφής gif είναι η δυνατότητα τους να είναι κινούμενες δηλαδή να εναλλάσσονται. Έτσι σε ένα γραφικό μπορούμε να βάλουμε δύο ή περισσότερες εικόνες που εναλλάσσονται με το πέρασμα του χρόνου. Ένα παράδειγμα είναι να βάλουμε για επικεφαλίδα της ιστοσελίδας μας για εικόνα, ένα μεγάλο χρωματιστό "Welcome" που θα αναβοσβήνει. Σχεδόν όλα τα προγράμματα επεξεργασίας εικόνας (ακόμα και τα πιο απλά) επιτρέπουν κωδικοποίηση αλλά και μετατροπή εικόνας από ένα τύπο αρχείου σε άλλο (π.χ. από bmp σε gif), έτσι δεν θα χρειαστεί να αποκτήσετε κάποιο εξειδικευμένο πρόγραμμα.

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

Κείμενο

Βασικός κανόνας που θα πρέπει να ακολουθείται πάντα κατά την κατασκευή ιστοσελίδων είναι η αποφυγή συνεχόμενης γραφής με κεφαλαία γράμματα. Τα κεφαλαία γράμματα δηλώνουν ότι κάποιος είναι "φωνακλάς" και "εκνευριστικός". Επιπλέον τα κεφαλαία γράμματα είναι κουραστικά για το μάτι. Ο κανόνας αυτός ισχύει φυσικά για μεγάλο κείμενο στα Κεφαλαία. Μπορούμε εννοείται να βάζουμε λέξεις ή ακόμα και μικρές φράσεις στα κεφαλαία όταν αυτό θεωρούμε ότι είναι απαραίτητο.

Επίλογος

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

Για καλύτερα αισθητικά αποτελέσματα με τον κώδικα html, χρησιμοποιούμε τον κώδικα CSS (Cascading Stylesheets) που δίνει πολλές δυνατότητες στην html.

Δείτε επίσης

Διαδικτυακά χρώματα