Νέες Τεχνολογίες στην Εκπαίδευση

Transcript

1 Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Συνδέσεις Στεφανέας Πέτρος Ζαμαρίας Βασίλης

2 Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.

3 Βασικά στοιχεία της HTML > Συνδέσεις Η γενική μορφή του κωδικού για σύνδεση είναι: <A HREF=" ">...</A> όπου τα... μπορεί να είναι κείμενο ή εικόνα και μέσα στα εισαγωγικά βάζουμε την "διεύθυνση" της σύνδεσης που θέλετε να καταλήξει ο χρήστης αν κάνει με το ποντίκι του κλικ σε οποιοδήποτε σημείο του κειμένου ή της εικόνας που βρίσκεται ανάμεσα στον κωδικό. Υπάρχουν οι ακόλουθες περιπτώσεις σύνδεσης: 1

4 Σύνδεση με μια άλλη WEB σελίδα (1/3) Σ' αυτή τη περίπτωση η διεύθυνση που μπαίνει μέσα στα εισαγωγικά έχει τη γνωστή μορφή Για παράδειγμα, ο κώδικας: Κάνοντας κλικ στο <A HREF=" πηγαίνετε στην ιστοσελίδα του Πολυτεχνείου. θα δώσει: Κάνοντας κλικ στο ΕΜΠ πηγαίνετε στην ιστοσελίδα του Πολυτεχνείου. 2

5 Σύνδεση με μια άλλη WEB σελίδα (2/3) Η νέα ιστοσελίδα εμφανίζεται στο παράθυρο της ιστοσελίδας απ' όπου ξεκινήσατε. Χρησιμοποιώντας το "κουμπί" Back του αναγνώστη ιστοσελίδων ξαναγυρίζετε στο σημείο που ξεκινήσατε. 3

6 Σύνδεση με μια άλλη WEB σελίδα (3/3) Μπορείτε όμως να ανοίξετε τη ιστοσελίδα της σύνδεσης σε νέο παράθυρο του αναγνώστη ιστοσελίδων. Απλά, στον κωδικό <A...> προσθέστε το όρισμα TARGET="_BLANK". Οπότε ο κωδικός γίνεται: <A HREF=" TARGET="_BLANK">ΕΜΠ</A> και το ΕΜΠ μας ανοίγει σε νέο παράθυρο την ιστοσελίδα του Πολυτεχνείου. 4

7 Σύνδεση με μια άλλη ιστοσελίδα της τοποθεσίας σας (1/4) Σ' αυτή την περίπτωση, στα εισαγωγικά της διεύθυνσης γράφετε το αρχείο που περιέχει την νέα ιστοσελίδα. Σε περίπτωση που δεν είναι στον ίδιο υποφάκελο με την αρχική, πρέπει να γράψετε το πλήρες path. Μπορείτε επίσης να δημιουργήσετε μια σύνδεση που σας οδηγεί σε συγκεκριμένο σημείο μιας άλλης ιστοσελίδα. 5

8 Σύνδεση με μια άλλη ιστοσελίδα της τοποθεσίας σας (2/4) Για να το επιτύχετε αυτό θα πρέπει πρώτα να "μαρκάρετε" το σημείο αυτό. Το μαρκάρισμα γίνεται με τη χρήση του ορίσματος NAME=" " στον κωδικό <A>. Δηλαδή, το σημείο που θέλουμε να μεταφερθούμε με τη σύνδεση περικλείεται μεταξύ του <A ΝΑΜΕ=" "> και </A>. 6

9 Σύνδεση με μια άλλη ιστοσελίδα της τοποθεσίας σας (3/4) Τώρα είναι εύκολο να γίνει η σύνδεση γράφοντας: <A HREF="ONOMA_ARXEIOY#TIMH_NAME">...</A> Με τον τρόπο αυτό μπορείτε να κάνετε σύνδεση σε ένα σημείο της ιστοσελίδας που ήδη βρίσκεστε: απλά παραλείψτε το όνομα του αρχείου. 7

10 Σύνδεση με μια άλλη ιστοσελίδα της τοποθεσίας σας (4/4) Για παράδειγμα, έχοντας περικλείσει την επικεφαλίδα αυτής της ενότητας μεταξύ των <A NAME="TOP_TEST"> και </A>, μπορώ να μεταφερθώ εκεί γράφοντας τον κώδικα: <A HREF="#TOP_TEST">ΑΡΧΗ ΣΕΛΙΔΑΣ</A> που θα μας δώσει: ΑΡΧΗ ΣΕΛΙΔΑΣ 8

11 Σύνδεση σε μια εικόνα (1/3) Η τιμή του HREF=" " μπορεί να είναι και το όνομα αρχείου που περιέχει μια εικόνα. Τέτοιες περιπτώσεις είναι πολύ χρήσιμες αν έχετε σκοπό να συμπεριλάβετε στην ιστοσελίδα σας μεγάλες εικόνες. Μπορείτε στην ιστοσελίδα να εισάγετε την εικόνα σε σμίκρυνση (καλό θα είναι να είναι πραγματικά μικρότερης ανάλυσης για να μην αργεί το φόρτωμα της ιστοσελίδας), και κάνοντας κλικ πάνω της να πηγαίνετε στην μεγάλη εικόνα. 9

12 Σύνδεση σε μια εικόνα (2/3) Κώδικας: <a href="fig2.jpg" target="_blank"><img src="fig2.jpg" width="30"></a> Κάντε κλικ στην εικόνα για να τη δείτε σε φυσικό μέγεθος. Εμφάνιση: Κάντε κλικ στην εικόνα για να τη δείτε σε φυσικό μέγεθος. 10

13 Σύνδεση σε μια εικόνα (3/3) Εξ' ορισμού, ο αναγνώστης ιστοσελίδων βάζει ένα μπλε περιθώριο γύρω από μια εικόνα που οδηγεί σε σύνδεση. Για να το αποφύγετε, μπορείτε να βάλετε το όρισμα BORDER="NO" στον κωδικό <IMG>, π.χ.: Κάντε κλικ στην εικόνα για να τη δείτε σε φυσικό μέγεθος. 11

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

15 Σύνδεση σε ένα αρχείο (2/4) Αν το αρχείο είναι αρχείο html, τότε είμαστε στην περίπτωση που ήδη αναφέραμε. Αν είναι αρχείο άλλης μορφής, θα προσπαθήσει να το ανοίξει χρησιμοποιώντας κάποιο κατάλληλο λογισμικό του υπολογιστή του χρήστη. Αν δεν βρει το κατάλληλο πρόγραμμα, ο αναγνώστης ιστοσελίδων θα δώσει τη δυνατότητα στο χρήστη να αποθηκεύσει το συγκεκριμένο αρχείο. 13

16 Σύνδεση σε ένα αρχείο (3/4) Γι' αυτό, είναι χρήσιμο να συμπεριλαμβάνετε πληροφορίες σχετικές με το αρχείο που κάνετε τη σύνδεση όπως ακόμα και το δικτυακό τόπο όπου μπορεί ο χρήστης να "προμηθευτεί" το κατάλληλο λογισμικό. 14

17 Σύνδεση σε ένα αρχείο (4/4) Ας δώσουμε μερικά παραδείγματα: Η σύνδεση αυτή οδηγεί σε ένα αρχείο doc που ο αναγνώστης ιστοσελίδων θα το ανοίξει χρησιμοποιώντας το Word/Office. Η σύνδεση αυτή οδηγεί σε ένα αρχείο swf που ανοίγει με τη χρήση του FlashPlayer. Τέλος, η σύνδεση αυτή είναι ένα εκτελέσιμο αρχείο (exe) και ο αναγνώστης ιστοσελίδων θα σας προτρέψει να το αποθηκεύσετε. 15

18 Σύνδεση ηλεκτρονικού ταχυδρομείου η τοποθεσίας ftp (1/4) Η σύνδεση ηλεκτρονικού ταχυδρομείου επιτρέπει την εύκολη αποστολή ηλεκτρονικών μηνυμάτων. Το όρισμα του κωδικού <A> είναι: HREF="mailto:...", όπου στη θέση των... αντικαθίστανται από την ηλεκτρονική διεύθυνση. 16

19 Σύνδεση ηλεκτρονικού ταχυδρομείου η τοποθεσίας ftp (2/4) Για παράδειγμα, γράφοντας τον κώδικα: Αν κάνετε κλικ πάνω στο όνομα <a Νίκος Τράκας</a>, ο αναγνώστης ιστοσελίδων θα σας ανοίξει το λογισμικό του για αποστολή . 17

20 Σύνδεση ηλεκτρονικού ταχυδρομείου η τοποθεσίας ftp (3/4) Θα εμφανιστεί ως εξής: Αν κάνετε κλικ πάνω στο όνομα Νίκος Τράκας, ο αναγνώστης ιστοσελίδων θα σας ανοίξει το λογισμικό του για αποστολή . 18

21 Σύνδεση ηλεκτρονικού ταχυδρομείου η τοποθεσίας ftp (4/4) Τέλος, το ίδιο μπορείτε να κάνετε για διεύθυνση ftp, δηλαδή σε μια τοποθεσία όπου οι χρήστες μπορούν να προμηθευτούν χρήσιμα αρχεία και λογισμικά. Η σύνδεση γίνεται ακριβώς με τον ίδιο τρόπο όπως σε μια ηλεκτρονική διεύθυνση, αλλά με την ένδειξη: ftp://... αντί του 19

22 Άσκηση 4: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζεται στον αναγνώστη ιστοσελίδων το παρακάτω κείμενο: 20

23 Κάνοντας κλικ πάνω σε κάθε εικονίδιο θα πρέπει να ανοίγει νέο παράθυρο του αναγνώστη ιστοσελίδων και να εμφανίζεται η σχετική ιστοσελίδα. Για παράδειγμα, κτυπώντας στο εικονίδιο για την "Ισχυρή αλληλεπίδραση" θα πρέπει να ανοίγει η ιστοσελίδα: 21

24 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.