Σημείωση: Αν δεν έχετε τα αρχεία των προηγούμενων μαθημάτων, μπορείτε να τα κατεβάσετε τώρα.
Για όλες τις σελίδες που εργαστήκαμε εως τώρα, κάναμε αρχεία που έχουν υπερσυνδέσμους, τους οποίους αν επιλέξουμε, φορτώνουν μια νέα σελίδα, αντικαθιστώντας την παλιά. Το ίδιο γίνεται και αν χρησιμοποιήσουμε τις επιλογές back/forward του browser.
Αλλά μπορεί να υπάρχει περίπτωση να θέλετε να ανοίξετε το περιεχόμενο σε ένα δεύτερο παράθυρο, αφήνοντας άθικτο το αρχικό. Μια τέτοια περίπτωση είναι η αρχική σελίδα να περιέχει μια λίστα με πολλούς συνδέσμους, π.χ. 50 διαφορετικές φωτογραφίες ή ορισμούς, όπου θα είναι πιο εύχρηστο αν η λίστα με τους συνδέσμους παραμείνει διαθέσιμη.
Σε αυτό το μάθημα θα δούμε πως μπορούμε να τροποποιήσουμε την ετικέτα <a href=...> ώστε ο στόχος του συνδέσμου να ανοίγει σε ενα νεο παράθυρο.
Πριν ξεκινήσουμε, να ξεκαθαρίσουμε ορισμένα πράγματα. Αν οι σελίδες σας ανοίγουν πάρα πολλά διαφορετικά παράθυρα, μπορεί να οδηγήσουν σε σύγχυση τους αναγνώστες, ώστε να μη γνωρίζουν απο που ξεκίνησαν. Επίσης, σε ορισμένους υπολογιστές το νεο παράθυρο μπορεί να καλύπτει όλα τα άλλα με αποτέλεσμα ο χρήστης να μην αντιληφθεί καν, οτι αυτό που βλέπει είναι νεο παράθυρο. Για όλα τα παραπάνω , χρησιμοποιήστε αυτή τη δυνατότητα μονο όταν υπάρχει λόγος.
Η ιδιότητα TARGET
Ο κώδικας HTML που χρησιμοποιούμε για να ορίσουμε το παράθυρο που θα εμφανιστεί το περιεχόμενο της σελίδας μοιάζει:
<a href="some_url.html" target="window_name">
όπου όπως ξέρουμε απο προηγούμενα μαθήματα η ετικέτα href ορίζει τη URL, είτε διεύθυνση (http://www....) είτε μια άλλη ιστοσελίδα (file.html). Το νέο στοιχείο στην ετικέτα είναι το όνομα που δίνουμε στο target=.
Μπορούμε να δώσουμε οποιοδήποτε όνομα θέλουμε, καθώς είναι μια εσωτερική ιδιότητα που αναγνωρίζει ο browser. Αυτό που συμβαίνει όταν κάνετε κλικ σε έναν υπερσύνδεσμο όπως:
<a href="http://www.servername.com/tut/likethis.html" target="tutorial">
είναι οτι ο browser αντιλαμβάνεται οτι πρέπει να αναζητήσει τη σελίδα που βρίσκεται στη URL http://www.servername.com/tut/likethis.htm, και να την ανοίξει σε ένα παράθυρο με το όνομα tutorial. Αν δεν υπάρχει τέτοιο παράθυρο θα πρέπει να δημιουργήσει ένα.
ΣΗΜΕΙΩΣΗ: Την 1η φορά που δοκιμάζετε τον πιο πάνω σύνδεσμο, θα πρέπει να εμφανίσει μια ιστοσελίδα σε ενα νεο παράθυρο που "κάθετε" πάνω απο το παράθυρο του μαθήματος. Αν κλείσετε το νέο παράθυρο, και δοκιμάσετε πάλι τον σύνδεσμο, θα συμπεριφερθεί ξανά το ίδιο.
Δοκιμάστε ξανά, αλλά αυτή τη φορά μη κλείσετε το νεο παράθυρο. Σε πολλούς web browsers, κάνετε κλικ στο σύνδεσμο ξανά, θα ξαναφορτώσει το παράθυρο, αλλά χωρίς να το φέρει μπροστά, με συνέπεια ο σύνδεσμος μα μοιάζει ανενεργός.
Το όνομα που δίνεται στο χαρακτηριστικό target= μπορεί να είναι σχεδόν οτιδήποτε. Στη συνέχεια θα δούμε 4 ονόματα που έχουν ιδιαίτερη σημασία:
Πάντως σε γενικές γραμμές, προτείνουμε να χρησιμοποιείτε μικρά αλλά περιγραφικά ονόματα.
Προσθέτοντας Στις Σελίδες Σας Υπερσυνδέσμους Με Παράθυρα-Στόχους
Θα χρησιμοποιήσουμε, λοιπόν, το νεο κώδικα στο μάθημα για το Volcano Web. Απο προηγούμενη δουλειά, η σελίδα Volcanoes in the United States που δημιουργήσαμε, περιέχει μια μικρή εικόνα ενός σεισμογράγου, στην οποία αν κάνουμε κλικ, μας οδηγεί σε μια ίδια μεγαλύτερη εικόνα. Στη συνέχεια θα προσθέσουμε τη νεα HTML έτσι ώστε η μεγαλύτερη εικόνα να ανοίγει σε διαφορετικό παράθυρο.
<a href="../pictures/seismo.jpg">
και αλλάξτε τα με:
<a href="../pictures/seismo.jpg" target="photo">
Θα πρέπει μετά τις αλλάγες, και οι δυο σύνδεσμοι (κείμενο και εικόνα) να ανοίγουν τη μεγαλύτερη εικόνα σε ένα νέο παράθυρο.
Στη συνέχεια θα δούμε πως μπορούμε να κάνουμε τον υπερσύνδεσμο να ανοίγει ενα νεο παράθυρο το οποίο μένει μπροστά, χρησιμοποιώντας το όνομα "_blank" που είδαμε πιο πάνω. Το μειονέκτημα αυτής της μεθόδου είναι οτι αν έχετε σε μια σελίδα 20 συνδέσμους που τη χρησιμοποιούν, θα ανοίξετε 20 διαφορετικά παράθυρα. Αυτό όμως σημαίνει κατανάλωση μνήμης, πράγμα που μπορεί να κάνει τον υπολογιστή να "κολλήσει"
Αλλά ας δούμε μια περίπτωση που μπορούμε να χρησιμοποιήσουμε αυτή τη μέθοδο. Στο Volcano Web Site, η σελίδα Volcano Terminology περιέχει την εικόνα με διάφορα είδη ηφαιστείων, που κάθε ένα περιέχει έναν υπερσύνδεσμο που οδηγεί σε ένα εξωτερικό web site. Παρόλο που οι σύνδεσμοι href είναι γραμμένοι διαφορετικά καθώς είναι μέρος ενός χάρτη γαρφικών που δημιουργήσαμε στο μάθημα 24, μπορούμε να τους τροποποιήσουμε ως εξής:
<map name="volcmap">
<area shape="rect"
href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html"
target="_blank" coords="48,46,204,153">
<area shape="rect" href="explode.html"
target="_blank" coords="0,66,26,227">
<area shape="rect" href="height.html"
target="_blank" coords="95,283,378,309">
<area shape="rect"
href="http://www.geo.mtu.edu/volcanoes/pinatubo/"
target="_blank" coords="321,154,468,261">
<area shape="rect" href="http://stromboli.net/"
target="_blank" coords="172,155,318,274">
<area shape="rect"
href="http://hvo.wr.usgs.gov/volcanowatch/"
target="_blank" coords="36,155,168,276">
<area shape="rect"
href="http://www.geo.mtu.edu/volcanoes/santamaria/"
target="_blank" coords="90,3,343,123">
</map>
Αν γράφαμε τον κώδικα κατ'αυτόν τον τρόπο, κάθε σύνδεσμος του χάρτη θα άνοιγε σε νεο παράθυρο. Αλλά εφόσον έχουμε μια σειρά απο συνδέσμους με το ίδιο παράθυρο-στόχο, μπορούμε να χρησιμοποιήσουμε μια διαφορετική ετικέτα που θα κάνει το ίδιο πράγμα:
<base target="window_name">
η οποία σημαίνει οτι όλοι οι σύνδεσμοι μετά απο αυτή την ετικέτα θα ανοίξουν στο παράθυρο που έχουμε ορίσει. Ας το δούμε στην πράξη.
<font size=+2>Investigate each type by clicking on a picture</font><br>
προσθέστε και αυτή τη γραμμή:
<font size=-1>each link will open its own browser window</font><br>
Με αυτό τον τρόπο εμφανίζεται ενα μήνυμα που ειδοποιεί το χρήστη για το τι θα συμβεί αν ακολουθήσει τους συνδέσμους αυτούς.
<map name="volcmap">
insert this HTML:
<base target="_blank">
Αλλά έχουμε ενα ακόμη μικρό πρόβλημα. Κάτω απο το χάρτη γαρφικών έχουμε μερικούς επιπλέον συνδέσμους σε άλλα αρχεία και sites που δεν θέλουμε να ανοίγουν σε νεο παράθυρο! Μπορούμε να ρυθμίσουμε το πρόβληματάκι αυτό χρησιμοποιώντας το όνομα "_self ", που είδαμε πιο πάνω, και που έχει σαν αποτέλεσμα ο στόχος του συνδέσμου να ανοίγει στο ίδιο παράθυρο.
</map>
προσθέστε τη γραμμή:
<base target="_self">
Ελέγξτε τη δουλειά σας
Συγκρίνετε τις σελίδες σας με το δείγμα για το πως θα πρέπει να εμφανίζονται.
Στη συνέχεια: 27. Ιστοσελίδες Πλαισίων