peris_html

ΠΕΡΙΣΣΟΤΕΡΗ HTML

ΠΙΝΑΚΕΣ
ΧΑΡΤΕΣ ΕΙΚΟΝΑΣ

ΕΙΣΑΓΩΓΗ

Μετά τα πρώτα δειλά βήματα ανάπτυξής του ο ιστός έχει αναπτύξει ταχύτατους ρυθμούς. Σήμερα έχει ξεφύγει κατά πολύ από τον κόσμο της γραμμής εντολών (command-line) και βαδίζει προς την αλληλεπίδραση με το χρήστη. Έχουν αναπτυχθεί δυνατότητες που παλιότερα ξεπερνούσαν κάθε φαντασία. Μπορεί κάποιος να συμπληρώσει μία φόρμα (form), να επεξεργαστεί ένα χάρτη ή μια εικόνα που είναι γεμάτη με θερμά σημεία (image-map) ή και να δημιουργήσει πίνακες (table). Βέβαια αυτά ακούγονται εντυπωσιακά και ελκυστικά, αλλά η δουλειά που απαιτείται για να δημιουργηθούν είναι αρκετή - τα καλά όμως κόποις κτώνται.

ΠΙΝΑΚΕΣ (Tables)

Στις πρώτες μέρες του ιστού οι πίνακες δεν υπήρχαν. Ακόμα και μέχρι το πρώτο εξάμηνο του 1995 υπήρχε ένας αρκετά σημαντικός αριθμός χρηστών των οποίων το πρόγραμμα ανάγνωσης δεν υποστήριζε πίνακες. Σήμερα όμως μπορεί ο καθένας που φτιάχνει έναν πίνακα να είναι σίγουρος ότι τα προβλήματα του παρελθόντος λύθηκαν. Η βασική δομή ενός πίνακα είναι τρεις στήλες (column) και δύο γραμμές (row). Από τη στιγμή βέβαια που κάποιος έχει κατανοήσει τη δομή αυτή είναι πολύ εύκολη οποιαδήποτε διαφοροποίηση επιθυμεί να πραγματοποιήσει, προσθέτοντας ή αφαιρώντας στήλες ή γραμμές. Η HTML που απαιτείται μπορεί να φανεί στην αρχή λίγο πολύπλοκη, αλλά στην πραγματικότητα δεν είναι τόσο δύσκολο όσο φαίνεται :

<TABLE BORDER>
<CAPTION ALIGN=TOP>Caption for the table</CAPTION>
<TR> 
<TD>Content of Cell 1A</TD>
<TD>Content of Cell 1B</TD>
<TD>Content of Cell 1C</TD>
</TR> 
<TR>
<TD>Content of Cell 2A</TD>
<TD>Content of Cell 2B</TD>
<TD>Content of Cell 2C</TD>
</TR>
</TABLE> 

(σημείωση : ό,τι βρίσκεται ανάμεσα σε <! ---this is a comment --> αποτελεί σχόλιο και δεν μεταφράζεται από το πρόγραμμα ανάγνωσης).
Αναλυτικότερα έχουμε :

<TABLE>

Ας προχωρίσουμε τώρα στην ανάλυση των ετικετών της HTML. Ενας πίνακας ορίζεται από ο,τιδήποτε υπάρχει ανάμεσα στις ετικέτες <TABLE> και </TABLE>. Μέσα στην ετικέτα <TABLE> μπορούμε να τοποθετήσουμε προσδιοριστικά που ελέχγουν την εμφάνιση όλου του πίνακα, όπως π.χ. να προσθέσουμε περίγραμμα γύρω από τον πίνακα :

Με την ετικέτα <CAPTION>, που είναι προεραιτικό και μπορεί να παραληφθεί, προσθέτουμε τίτλο στον πίνακα, στην περίπτωσή μας ο τίτλος θα είναι : Caption for the table, ότι βρίσκεται δηλαδή μεταξύ των <CAPTION> και <CAPTION>. Στην αρχική ετικέτα μπορούμε να συμπεριλάβουμε και το προσδιοριστικό ALIGN που λαμβάνει τις τιμές top και bottom και ορίζει ανάλογα τη θέση στην οποία θα τοποθετηθεί ο τίτλος του πίνακα.

<TR>

Κάθε γραμμή του πίνακα εμφανίζεται ανάμεσα στις ετικέτες <TR> και </TR>.

<TD>

Το περιεχόμενο κάθε κελιού μιας γραμμής του πίνακα περικλύεται από τις ετικέτες <TD> και </TD>. Για παράδειγμα, η πρώτη σειρά του πίνακα περιλαμβάνει τα παρακάτω τρία κελιά :

<TR> 
<TD>Content of Cell 1A</TD>
<TD>Content of Cell 1B</TD>
<TD>Content of Cell 1C</TD>
</TR> 

Μπορεί να παρατηρήσει κανείς ότι οι ετικέτες <TD> και </TD> εμφανίζονται μόνο ανάμεσα στα <TR> και </TR>.

ΧΑΡΤΕΣ ΕΙΚΟΝΑΣ (Image-maps)

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

Οι χάρτες εικόνας εμφανίζονται στον ιστό όπως όλες οι εικόνες με τη διαφορά ότι περιέχουν θερμά σημεία. Τα θερμά σημεία λειτουργούν σα σύνδεσμοι. 1/4ταν ένας χρήστης κάνει κλικ πάνω σε ένα θερμό σημείο του χάρτη εικόνας τότε το πρόγραμμα ανάγνωσης στέλνει στον εξυπηρετητή τις συντεταγμένες του σημείου αυτού μαζί με το πρόγραμμα του χάρτη εικόνας. Στη συνέχεια, ο εξυπηρετητής ξεκινά την εκτέλεση του προγράμματος του χάρτη εικόνας και αυτό "συμβουλεύεται" το αρχείο του χάρτη εικόνας για να βρει που θα κατευθυνθεί. Τελικά, το πρόγραμμα του χάρτη εικόνας δίνει στον εξυπηρετητή τη νέα URL στην οποία θα κατευθυνθεί και αυτός εμφανίζει τη σελίδα ή οτιδήποτε άλλο υπάρχει στη νέα διεύθυνση (η URL που δίνει το πρόγραμμα του χάρτη εικόνας στον εξυπηρετητή είναι αυτή που αντιστοιχεί στο θερμό σημείο πάνω στο οποίο έκανε κλικ ο χρήστης και το οποίο υπάρχει αποθηκευμένο στο αρχείο του εικονοχάρτη).

Οι εικονοχάρτες που αναφέραμε παραπάνω είναι προσανατολισμένα στον εξυπηρετητή (server-side). Είναι αυτοί που χρησιμοποιούνται περισσότερο στην πράξη και προϋποθέτουν την επικοινωνία με έναν εξυπηρετητή ιστού για την επεξεργασία των συντεταγμένων και την κλήση των URL. Οι χάρτες εικόνας που είναι προσανατολισμένοι στον πελάτη (client-side image-maps) αφορούν νεότερες εξελίξεις της HTML. Εδώ η επεξεργασία γίνεται εσωτερικά από τον πελάτη, δηλαδή το πρόγραμμα ανάγνωσης, και όχι από το εξυπηρετητή πράγμα που επιτρέπει τη χρήση τους σε τοπικά HTML αρχεία ή σε αρχεία προσβάσιμα μέσω άλλων πρωτοκόλλων. Οι χάρτες εικόνας αυτής της μορφής δεν αποτελούν ακόμα επίσημο μέρος της HTML, αλλά υποστηρίζονται από τις τελευταίες εκδόσεις του MS-Internet Explorer, του Netscape και του Mosaic. Η διαφορά μεταξύ των δύο, όσον αφορά στη σύνταξη της HTML, είναι ότι στην πρώτη περίπτωση χρησιμοποιούμε την ετικέτα ISMAP, ενώ στη δεύτερη την USEMAP .

Η όλη διαδικασία δημιουργίας ενός χάρτη εικόνας είναι η ακόλουθη :

1) Δημιουργία της εικόνας
2) Δημιουργία του αρχείου που καθορίζει τα θερμά σημεία πάνω στην εικόνα (το αρχείο αυτό ονομάζεται map file)
3) Kαθορισμός του που βρίσκονται η εικόνα, το πρόγραμμα και το αρχείο του χάρτη εικόνας έτσι ώστε να γίνει επεξεργασία
4) Eγκατάσταση αυτών στον εξυπηρετητή.

1) Δημιουργία της εικόνας

Η δημιουργία ή η επιλογή της εικόνας αποτελεί τμήμα του σχεδιασμού των γραφικών για την ανάπτυξη μιας θέσης ιστού. Καταρχήν, να πούμε ότι η εικόνα πρέπει να είναι σε GIF μορφή. Την εικόνα μπορείτε να τη σχεδιάσετε μόνοι σας με ένα από τα πολλά και ιδιαίτερα εύχρηστα προγράμματα όπως είναι το Photoshop, τοPhotolab, το Paintshop ή ακόμα και το CorelDraw. Ένας εύκολος τρόπος βέβαια είναι να την κατεβάσετε από το Internet, αν φυσικά βρείτε κάτι που σας ενδιαφέρει και έχει σχέση με τη σελίδα που θέλετε να σχεδιάσετε ή να τη σαρώσετε.

2) Δημιουργία του αρχείου του εικονοχάρτη

Από τη στιγμή που έχετε δημιουργήσει την εικόνα πρέπει να καταγράψετε κατά κάποιο τρόπο τις διαφορετικές της περιοχές που σχετίζονται με κάποιες URL. Αυτό θα γίνει με την περιγραφή κάθε περιοχής από τις συντεταγμένες της και τη σύνδεση των συντεταγμένων αυτών με την αντίστοιχη URL. Οι συντεταγμένες όλων των θερμών σημείων της εικόνας με τις αντίστοιχες URLs αποθηκεύονται σε ένα αρχείο που ονομάζεται αρχείο εικονοχάρτη (map file).

Μια περιοχή που χαρακτηρίζεται σαν θερμή μπορεί να είναι πολύγωνο, κύκλος, ορθογώνιο, σημείο ή κύκλος. Επίσης, κάθε περιοχή της εικόνας που δεν αποτελεί θερμή συνδέεται με κάποια προκαθορισμένη (default) URL.

Τα αρχεία των εικονοχαρτών διακρίνονται σε NCSA και σε CERN. Ένα NCSA αρχείο είναι το ακόλουθο :

default http://www.what.ever/dir/subdir/home.htm
point http:// www.what.ever/dir/subdir/file1.htm 74, 57
rect http:// www.what.ever/dir/subdir/file2.htm 17, 18 52, 73
poly http:// www.what.ever/dir/subdir/file3.htm 12, 119 134, 119 91, 90 77, 105 39, 86 12, 119
circ http:// www.what.ever/dir/subdir/file4.htm 99, 21 138, 60

Η αντιστοιχία μεταξύ σχημάτων και ονομασίας είναι : point είναι το σημείο, rect είναι το ορθογώνιο, poly είναι το πολύγωνο και circ είναι ο κύκλος. Η http:// www.what.ever/dir/subdir/file1.htm, file2.htm, file3.htm και file4.htm είναι η νέα URL στην οποία θα κατευθυνθεί ο χρήστης κάνοντας κλικ σε ένα από τα τέσσερα σχήματα. Οι συντεταγμένες για κάθε σχήμα είναι : για το σημείο x, y, για το πολύγωνο x1, y1 x2, y2 x3, y3... , για το ορθογώνιο αριστερά, πάνω κορυφή δεξιά, κάτω μέρος και για τον κύκλο x, y ακτίνα.

Η default http://www.what.ever/dir/subdir/home.htm ορίζει μια URL που καλείται σε περίπτωση που ο χρήστης κάνει κλικ σε μια περιοχή έξω από αυτές που έχουν οριστεί και περιγράφονται στο αρχείο του χάρτη εικόνας. Με την point http:// www.what.ever/dir/subdir/file1.htm 74, 57 ορίζουμε κάποιο σημείο..

Ένα CERN αρχείο είναι το ακόλουθο :

default http://www.what.ever/dir/subdir/home.htm
rect (17, 18) (52, 73) http:// www.what.ever/dir/subdir/file2.htm
poly (12, 119) (134, 119) (91, 90) (77, 105) (39, 86) (12, 119) http:// www.what.ever/dir/subdir/file3.htm.
circ (99, 21) 138 http:// www.what.ever/dir/subdir/file4.htm

Εκείνο όμως που πρέπει να αναφέρουμε είναι ότι έχουν αναπτυχεί πολύ χρήσιμα εργαλεία που επιτρέπουν την δημιουργία του αρχείου χάρτη εικόνας με ένα εξαιρετικά απλουστευμένο τρόπο. Τέτοια εργαλεία (map-making εργαλεία) είναι το Mapedit, το WebMap κ.α.

3) Καθορισμός της θέσης των αρχείων

Το αρχείο χάρτη εικόνας που είναι προσανατολισμάνο στον εξυπηρετητή αναφέρεται στη HTML με :
<A HREF="http://www.what.ever/cgi-
bin/imagemap/dir/subdir/filename.map"> <IMG SRC="image.gif" ISMAP> </A>

Το τμήμα www.what.ever/cgi-bin/imagemap δηλώνει ότι το πρόγραμμα του χάρτη εικόνας imagemap βρίσκεται στον κατάλογο cgi-bin κάτω από τον κατάλογο ρίζα (root directory) του εξυπηρετητή. Η δήλωση dir/subdir/filename.map είναι το μονοπάτι για το αρχείο του χάρτη εικόνας για αυτό το συγκεκριμένο χάρτη εικόνας, ενώ το image.gif είναι το αρχείο που περιέχει το αρχείο εικόνας GIF. Τo ISMAP δηλώνει στο πρόγραμμα ανάγνωσης ότι πρόκειται για αρχείο εικονοχάρτη προσανατολισμένο στον εξυπηρετητή.

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

Εδώ με την ετικέτα <MAP> δηλώνουμε στο πρόγραμμα ανάγνωσης της περιοχές της εικόνας που αποτελούν σύνδεσμο. Έτσι, στο προσδιοριστικό NAME δίνουμε το όνομα του αρχείου χάρτη εικόνας που θα επεξεργαστεί το πρόγραμμα ανάγνωσης, στην δική μας περίπτωση είναι το filename (προσοχή : δεν χρησιμοποιούμε την κατάληξη του αρχείου, πρέπει όμως να είναι μορφής GIF ή JPEG). Μια θερμή περιοχή της εικόνας ορίζεται μέσα στην ετικέτα <MAP> με τη χρήση της ετικέτας <AREA> που λαμβάνει τα προσδιοριστικά :

- SHAPE, ορίζεται το σχήμα της θερμής περιοχής. Προς το παρόν η μόνη τιμή που μπορεί να λάβει είναι αυτή του ορθογώνιου, δηλαδή SHAPE="rect".
- COORDS, ορίζονται οι συντεταγμένες του σχήματος, χρησιμοποιώντας ως μονάδα μέτρησης το εικονοστοιχείο. Εφόσον το μόνο σχήμα που επιτρέπεται ως τώρα είναι το ορθογώνιο ορίζουμε τις συντεταγμένες ως εξής : "αριστερά, άνω, δεξιά, κάτω".
- HREF, λαμβάνει ως τιμή την URL που θα κληθεί όταν ο χρήστης κάνει κλικ στην δεδομένη θερμή περιοχή. Εδώ μπορούμε να δώσουμε όλο το μονοπάτι προς το αρχείο που θα κληθεί.

Το path/image.gif δηλώνει το μονοπάτι προς το αρχείο εικόνας που θα χρησιμοποιηθεί και το filename δηλώνει το όνομα του αρχείου του χάρτη εικόνας (εδώ μπορούμε να έχουμε ολόκληρα τα μονοπάτια προς αυτά τα αρχεία)

4) Εγκατάσταση των αρχείων

Το τελικό στάδιο είναι η εγκατάσταση όλων των αρχείων στον εξυπηρετητή. Γενικά, το GIF αρχείο και το HTML αρχείο αποθηκεύονται στον ίδιο υποκατάλογο που είναι και τα υπόλοιπα αρχεία για τις άλλες σελίδες. Το αρχείο του χάρτη μπορεί να πάει στον ίδιο υποκατάλογο ή σε έναν command υποκατάλογο, ανάλογα με τις συνθήκες εγκατάστασης του εξυπηρετητή.