Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #4η: HTML: σύνδεσμοι, Χάρτες Εικόνων (Image Maps) Χειμερινό εξάμηνο
Η ετικέτα <a> (anchor tag) Για τη δημιουργία συνδέσμου (link) προς μια ιστοσελίδα χρησιμοποιούμε το ζεύγος ετικετών <a> </a> (anchor tags, anchor: άγκυρα> Ορίσματα (attributes) anchor tag: href (Hypertext REFerence): η σελίδα ή διεύθυνση όπου δείχνει ο σύνδεσμος name: κρυφό διακριτικό που θα βοηθήσει κάποιο άλλο σύνδεσμο να «δείξει» προς αυτόν title: το περιεχόμενο του tooltip που θα εμφανιστεί όταν μετακινήσουμε το ποντίκι πάνω από το σύνδεσμο target: σε τι είδους παράθυρο θα ανοίξει η σελίδα στην οποία «δείχνει» ο σύνδεσμος Παράδειγμα: <a href="welcome.htm" name="welcome" title="welcome page target= _blank >Σελίδα καλωσορίσματος!</a>
Η ετικέτα <a> (anchor tag)
Οργάνωση web sites www.mydomain.gr Web server kostas index.html http://www.mydomain.gr/kostas/ interests/sports.htm bio.htm interests.htm Ποια είναι η URL διεύθυνσή της; interests sports.htm music.htm cinema.htm essays.htm
ιασύνδεση ιστοσελίδων web site index.html home bio.htm Βιογραφικό Εργασίες Ενδιαφέροντα home interests.htm home sports music cinema essays.htm interests interests interests home home home sports.htm music.htm cinema.htm
Σύνδεση τοπικών σελίδων με απόλυτες διαδρομές Τοπικές σελίδες: σελίδες που ανήκουν στο ίδιο web site, δηλ είναι αποθηκευμένες στο ίδιο τοπικό σύστημα αρχείων (file system) ενός web server Οι απόλυτες διαδρομές δείχνουν στη σελίδα προορισμού ξεκινώντας από το ανώτατο επίπεδο ιεραρχίας καταλόγων (root directory) και προχωρώντας προς τα κάτω, διασχίζοντας τους ενδιάμεσους καταλόγους Παραδείγματα: <a href="d:\examples\chap05\books1.html">σύνδεσμος απόλυτης διαδρομής</a> <a href= C:\mywebpage.html">Σύνδεσμος απόλυτης διαδρομής</a>
Σύνδεση τοπικών σελίδων με σχετικές διαδρομές (I) Οι σχετικές διαδρομές δείχνουν τη σελίδα την οποία θέλουμε να διασυνδέσουμε με την τρέχουσα, περιγράφοντας τη θέση της (τοποθεσία αποθήκευσης) σε σχέση με τη θέση της τρέχουσας σελίδας. ιαδρομή href = file.htm href = files/file.htm ή href =./files/file.htm href = files/morefiles/file.htm Σημασία To αρχείο file.htm βρίσκεται μέσα στον τρέχοντα κατάλογο To αρχείο file.htm βρίσκεται στον κατάλογο files που βρίσκεται μέσα στον τρέχοντα κατάλογο To αρχείο file.htm βρίσκεται στον κατάλογο morefiles που βρίσκεται στον κατάλογο files που με τη σειρά του βρίσκεται μέσα στον τρέχοντα κατάλογο
Σύνδεση τοπικών σελίδων με σχετικές διαδρομές (II) ιαδρομή Σημασία href =../file.htm href =../../files/file.htm To αρχείο file.htm βρίσκεται στον κατάλογο που βρίσκεται ένα επίπεδο πιο πάνω από τον τρέχοντα («πατρικός κατάλογος» To αρχείο file.htm βρίσκεται στον κατάλογο files o oποίος βρίσκεται δύο επίπεδα πιο πάνω από τον τρέχοντα κατάλογο Συμπέρασμα: Σχετικές ή Απόλυτες διαδρομές; Η χρήση απόλυτων διαδρομών μπορεί να φαίνεται η εύκολη λύση σε περιπτώσεις που το «χτίσιμο» σχετικών διαδρομών είναι πολύπλοκο, αλλά οι απόλυτες διαδρομές δεν είναι «μεταφέρσιμες» (portable) Αν οι σελίδες μετακινηθούν σε άλλο δίσκο ή κατάλογο ή κάποιος κατάλογος μετονομαστεί, όλες οι συνδέσεις παύουν να ισχύουν. Επίσης, είναι δύσκολη η μεταφορά των αρχείων του web site στον web server όταν η κατασκευή του site τελειώσει και θελήσουμε να το «δημοσιεύσουμε».
Σύνδεσμοι προς άλλα έγγραφα του web Πως δημιουργούμε σύνδεσμο προς μια σελίδα που δεν ανήκει στο ίδιο web site αλλά βρίσκεται αποθηκευμένη σε κάποιον άλλος web server; <a href = http://www.aegean.gr > Link to University of Aegean</a> Τι γίνεται σε περίπτωση που δεν ξέρουμε τη διεύθυνση (URL) της σελίδας στην οποία θέλουμε να «δείξουμε»; Εντοπίζουμε τη σελίδα είτε με κάποια μηχανή αναζήτησης είτε ακολουθώντας διαδοχικούς συνδέσμους και αντιγράφουμε τη διεύθυνση της σελίδας από το πλαίσιο που βρίσκεται συνήθως στην κορυφή του browser
Σύνδεσμοι προς συγκεκριμένα σημεία μέσα σε HTML έγγραφα ημιουργία name anchor ή bookmark <a name= apricots > ΒΕΡΥΚΟΚΑ </a> fruits.htm ΦΡΟΥΤΑ Επιλέξτε ένα συγκεκριμένο φρούτο: Καλοκαιρινά: Κεράσια Βερύκοκα Σύκα Χειμερινά: Πορτοκάλια Μήλα Ρόδια summerfruits.htm ΚΑΛΟΚΑΙΡΙΝΑ ΦΡΟΥΤΑ ΚΕΡΑΣΙΑ...... ΒΕΡΥΚΟΚΑ...... ΣΥΚΑ... <a href= summerfruits.htm#appricots >... Βερύκοκα </a>
Σύνδεσμοι προς το ίδιο έγγραφο document.htm ΕΡΓΑΣΙΑ ΙΚΤΥΑΚΩΝ ΠΟΛΥΜΕΣΩΝ Ι ΠΕΡΙΕΧΟΜΕΝΑ: Κεφάλαιο 1ο: Εισαγωγή Κεφάλαιο 2ο: Σχεδιασμός Κεφάλαιο 3ο: Ανάλυση... ΚΕΦΑΛΑΙΟ 1ο: ΕΙΣΑΓΩΓΗ blablablablablabla ΚΕΦΑΛΑΙΟ 2ο: ΣΧΕ ΙΑΣΜΟΣ blablablablablabla ΚΕΦΑΛΑΙΟ 3ο: ΑΝΑΛΥΣΗ blablablablablablablablablablabla bla bla <a href= #design > Κεφάλαιο 2ο: Σχεδιασμός </a> <a name= design > ΚΕΦΑΛΑΙΟ 2ο: ΣΧΕ ΙΑΣΜΟΣ </a>
Σύνδεσμοι Email <a href="mailto:someone@aegean.gr?subject=σχόλια για τη σελίδα σας&cc=someoneelse@aegean.gr">στείλτε μας e-mail</a>
Επιλέγοντας παράθυρο Στους συνδέσμους που είδαμε ως τώρα, όταν επιλεχθούν, «φορτώνουν» μια νέα σελίδα, αντικαθιστώντας την παλιά Υπάρχει περίπτωση να θέλετε να ανοίξετε το περιεχόμενο σε ένα δεύτερο παράθυρο, αφήνοντας άθικτο το αρχικό. Έστω ότι η αρχική σελίδα περιέχει μια λίστα με πολλούς συνδέσμους, π.χ. 50 διαφορετικές φωτογραφίες ή ορισμούς, όπου θα είναι πιο εύχρηστο αν η λίστα με τους συνδέσμους παραμείνει διαθέσιμη. <a href= page.html" target= tutorial">σύνδεσμος</α> ο browser αντιλαμβάνεται οτι πρέπει να ανoίξει τη σελίδα page.htm σε ένα ξεχωριστό παράθυρο με το όνομα tutorial. Αν δεν υπάρχει τέτοιο παράθυρο θα πρέπει να δημιουργήσει ένα. Αν υπάρχει θα αντικαταστήσει τα περιεχόμενά του με την page.htm Ειδική περίπτωση: <a href= page.html" target="_blank"> Σύνδεσμος</α> Όσες φορές κάνουμε κλικ στον σύνδεσμο, θα ανοίγει καινούριο παράθυρο για την page.htm
Επιλέγοντας παράθυρο <ul> <li> Θα ανοίξουν σε ένα δεύτερο (αλλά στο ίδιο παράθυρο) <a href="chapter1.htm" target="chapters">κεφάλαιο 1ο</a> </li> <li> <a href="chapter2.htm" target="chapters">κεφάλαιο 2ο</a> </li></ul>
Εισαγωγή ένθετων εικόνων (inline images) <html> <body> <h2>εισαγωγή εικόνας στο έγγραφο</h2> <img src="./images/aegean.jpg"> </body> </html>
Εισαγωγή γραφικών Ενσωμάτωση εικόνων σε αρχεία HTML (inline images): <IMG SRC= image.gif"> Εξ ορισμού η εισαγόμενη εικόνα τοποθετείται ώστε η κάτω ακμή του περιβλήματός της να είναι ευθυγραμμισμένη με το κάτω μέρος των χαρακτήρων του υπερκειμένου. Είναι δυνατή η διαφορετική ευθυγράμμιση μιας εικόνας, mε τη χρήση του ορίσματος: ALIGN={top, bottom,middle,left, right} ως εξής: <IMG SRC= myimage.gif" ALIGN=middle> Το όρισμα ALT παρέχει εναλλακτικό (ALTernative) κείμενο σε περίπτωση που υπάρχει κάποιο εμπόδιο για την προβολή της εικόνας (η δυνατότητα προβολής γραφικών στον browser είναι απενεργοποιημένη ή το αρχείο της εικόνας δεν βρέθηκε: <IMG SRC= aegean.gif" ALIGN=middle ALT="[Εδώ έπρεπε να εμφανιστεί το σήμα του Παν/μίου Αιγαίου]">
Ευθυγράμμιση κειμένου με γραφικά <img src="./images/aegean.jpg"> εν έχουμε χρησιμοποιήσει το όρισμα 'align' <p><img src="./images/aegean.jpg" align=middle> Αυτό το κείμενο είναι στοιχισμένο στο κέντρο της εικόνας <p><img src="./images/aegean.jpg" align=top> Αυτό το κείμενο είναι στοιχισμένο στην κορυφή της εικόνας
Οργάνωση web sites με αρχεία γραφικών www.mydomain.gr Web server kostas index.html bio.htm pictures/home.jpg interests.html pictures/photo.jpg interests sports music cinema essays pictures home.jpg photo.jpg mail.jpg../pictures/home.jpg
Αλλάζοντας το μέγεθος των γραφικών Για την ορθή στοιχειοθέτηση του υπερκειμένου, o browser θα πρέπει να ξέρει το ακριβές μέγεθος των εικόνων. Αυτό όμως είναι γνωστό μετά το φόρτωμά τους. Ο ορισμός/αλλαγή του μεγέθους δηλώνεται ως εξής: <img src="filename.gif" width=x height=y > όπου X είναι το πλάτος και όπου Y είναι το ύψος της εικόνας (σε pixels). Αν δεν αλλάξουμε το μέγεθος της εικόνας τότε φορτώνεται στο κανονικό της μέγεθος Προσοχή όταν «μεγαλώνουμε» μια εικόνα! π.χ. η εικόναaegean.jpg έχει κανονικό μέγεθος 84 82 pixels Τι θα συμβεί αν πενταπλασιάσουμε το ύψος και το πλάτος της; Το αποτέλεσμα μπορεί να είναι ακόμα πιο δυσάρεστο αν αυξήσουμε δυσανάλογα τη μία διάσταση έναντι της άλλης Παράδειγμα
Μέγεθος εικόνων Το φόρτωμα των εικόνων σε έναν πελάτη γίνεται με την παραλαβή από τον browser του αρχείου HTML. Στη συνέχεια, ο browser αναζητά τα στοιχεία IMG του εγγράφου, για τα οποία στέλνει νέες αιτήσεις προς το web server, δηλαδή κάθε αρχείο εικόνας «κατεβαίνει» από τον server με ξεχωριστό request-response Οι εικόνες που εισάγονται σε ένα υπερκείμενο δεν πρέπει να είναι πολύ μεγάλες διαφορετικά υπάρχει η πιθανότητα η πρόσβαση προς τις αντίστοιχες ιστοσελίδες να είναι πολύ αργή. Ιδανικά, το συνολικό μέγεθος των ενσωματωμένων εικόνων σε μια ιστοσελίδα δεν πρέπει να ξεπερνά τα 10-30 KBytes. Σε περίπτωση που περιέχονται πολλές και μεγάλες εικόνες σε μια σελίδα; τεχνική thumbnailing (μικρογραφιών)
Πλεονεκτήματα thumbnails (μικρογραφιών) ιατηρούν το μέγεθος μιας εικόνας σε χαμηλά επίπεδα, ώστε να μπορεί να «κατεβαίνει» γρήγορα από τον server στον browser ακόμα και μέσω αργών dial-up συνδέσεων ίνει στους αναγνώστες μια «γεύση» της εικόνας ώστε να μπορούν να αποφασίσουν κατά πόσο θέλουν να μεταφέρουν ολόκληρη τη «μεγάλη» εικόνα για να την εξετάσουν καλύτερα
Χρωματισμός εικόνων Πριν την ενσωμάτωση μιας εικόνας, πρέπει να γίνεται επεξεργασία της ώστε αυτή να μην περιλαμβάνει πολλά διαφορετικά χρώματα (αυτό μειώνει σημαντικά το μέγεθος της εικόνας). Αρκετοί browsers μπορούν να αναπαραστήσουν περιορισμένο αριθμό διαφορετικών χρωμάτων, μικρότερο από τα 256 χρώματα που μπορεί να εμφανίσει μια συνηθισμένη 8-μπιτη οθόνη.
Εικόνες που λειτουργούν ως links <html> <body> <a href="http://www.w3.org/markup/"> <img src="html.jpg"> </a> </body> </html>
Εικόνες-Σύνδεσμοι για δημιουργία thumbnails <a href="images/castle.gif"> <img src="images/sm-castle.jpg" width="106" height="62"/> </a> Εξωτερική εικόνα, σε αντίθεση με ένθετες (inline) εικόνες Ένθετη εικόνα
Χάρτες εικόνων (image maps) Τιείναιοιχάρτες εικόνας (image maps); Αλληλεπιδραστικοί (interactive) χάρτες χωρισμένοι σε τμήματα Κάθε τμήμα του χάρτη /εικόνας αποτελεί link προς κάποια διαφορετική ιστοσελίδα Ηκίνησητου ποντικιού πάνω από τα ενεργά τμήματα μπορεί να προκαλέσει κάποια δράση (π.χ. να εμφανίσει ένα μήνυμα)
Χάρτες εικόνων (image maps) Υπάρχουν ειδικά εργαλεία (tools) για τη δημιουργία image maps, π.χ. το MapEdit (http://www.boutell. com/mapedit/) Επισκόπηση ενός Image Map
Ορισμός ενεργών περιοχών σε ένα image map r x,y SHAPE = circle COORDS = x, y, r x 1,y 1 SHAPE = rect x 2,y 2 COORDS = x 1, y 1, x 2, y 2 x 1,y 1 x 5,y 5 x 4,y 4 x 2,y 2 x 3,y 3 SHAPE = poly COORDS = x 1, y 1, x 2, y 2, x 3, y 3, x 4, y 4, x 5, y 5
HTML για τη δημιουργία image map Εισαγωγή της εικόνας που θα διαμορφώσουμε σε image map: <img src="image.gif" usemap="#map_name"> (image.gif είναιτοόνοματουαρχείουτηςεικόναςκαι map_name είναι ένας σύνδεσμος anchor (ή bookmark) που οδηγεί κάπου μέσα στη ίδια σελίδα: Ορισμός των ενεργών τμημάτων του image map: <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" href= http://... > <area shape=" circle " coords="x1,y1,r" href= http://... > : : </map>
Παράδειγμα ορισμού ενεργών περιοχών
Παράδειγμα ορισμού ενεργών περιοχών <img src="gr_map.jpg" usemap="#gr_map"> <map name="gr_map"> 25 <area shape="circle" coords="322,178,25" 322,178 href="www.lesvos.com"> <area shape="rect" coords="193,398,345,450" href="http://www.explorecrete.com/"> <area shape="poly" coords="111,236,84,242,74,261, 105,333, 139,354,177,351,195,282" href="http://www.epeloponnisos.gr/"> </map> 193,398 345,450