Σχεδιασμός και Ανάπτυξη Ιστότοπων

Transcript

1 Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML Σύνδεσμοι (Links) Παρουσίαση 10 η 1 Βελώνης Γεώργιος Καθηγητής

2 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τι ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε αυτές τις ετικέτες πριν καταστούν παρωχημένες. Αυτό γίνεται για να εξασφαλιστεί η μελλοντική συμβατότητα. Restored/ Redefined tags in HTML5: Αναθεωρήστε αυτές τις ετικέτες στον κώδικά σας, όπως καθορίστηκαν στην HTML5 και ως εκ τούτου έχουν νέες έννοιες. 2

3 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags: ιδιότητες download, media, id Obsolete tags: Deprecated tags: ιδιότητες coords, shape, rev (<a>), link, vlink, alink (<body>) Restored/ Redefined tags in HTML5: <a> 3

4 Βελώνης Γεώργιος Καθηγητής Χρήσιμοι Ορισμοί Deprecated και Obsolete Deprecated καλείται ένα στοιχείο ή παράμετρος που θεωρείται ξεπερασμένο. Τα deprecated στοιχεία μπορεί να καταστούν άνευ αντικειμένου στο μέλλον, αλλά οι browsers θα πρέπει να συνεχίσουν να τα υποστηρίζουν για λόγους συμβατότητας με παλαιότερες εκδόσεις. Obsolete καλείται ένα στοιχείο ή χαρακτηριστικό που δεν έχει καμία εγγύηση για τη μελλοντική του από τους browsers υποστήριξη και πλέον δεν ορίζεται στην προδιαγραφή W3C. 4

5 Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari Opera

6 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Τι είναι σύνδεσμος (link) Δημιουργία συνδέσμου Βασικές ιδιότητες Γενική σύνταξη Κατέβασμα αρχείου Επιλογή ονόματος ενός anchor Επιλογή χώρου ανοίγματος συνδεδεμένου εγγράφου Μεταφορά σε σύνδεσμο με τη χρήση του πλήκτρου Tab Μεταφορά σε σύνδεσμο με τη χρήση του πλήκτρου Alt Άλλες ιδιότητες Αλλαγή χρώματος συνδέσμων 6

7 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Απόλυτοι Σύνδεσμοι Παραπομπή σε URL του Internet Παραπομπή σε αρχείο τοπικού φακέλου Σχετικοί Σύνδεσμοι Παραπομπή σε αρχείο του ιδίου φακέλου Παραπομπή σε αρχείο υποφακέλου Παραπομπή σε αρχείο ανώτερου φακέλου Παραπομπή σε αρχείο άλλου (γενικά) φακέλου Πλεονεκτήματα 7

8 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Σύνδεσμοι για αποστολή Ανεπιθύμητη Αλληλογραφία (Spam) Σύνδεσμοι για σύνδεση ftp Σύνδεσμοι για εκτέλεση κώδικα Javascript Δημιουργία σελιδοδείκτη (Bookmark) Παραπομπή από ένα σημείο της σελίδας σε ένα άλλο Παραπομπή από μια σελίδα σε ένα σημείο μιας άλλης σελίδας 8

9 Τι είναι σύνδεσμος (link) Οι σύνδεσμοι, τα γνωστά σε όλους links ή hyperlinks, είναι κομμάτια κειμένου ή εικόνες που μπορούν να παραπέμψουν τον επισκέπτη μιας ιστοσελίδας σε μια άλλη ιστοσελίδα του ιδίου ή άλλου ιστότοπου. Εκτός από την παραπομπή σε κάποια ιστοσελίδα, μπορούν να παραπέμψουν και σε άλλης μορφής ηλεκτρονικά αρχεία, όπως βίντεο, ήχου, εγγράφου κ.λπ., δίνοντας στο χρήστη την επιλογή να τα ανοίξει ή να τα αποθηκεύσει στο δίσκο του. 9

10 Δημιουργία συνδέσμου Βασικές Ιδιότητες Η δημιουργία ενός συνδέσμου μέσα σ ένα HTML έγγραφο, γίνεται με τη διπλή ετικέτα <a> (Anchor). Η πιο βασική ιδιότητα της ετικέτας είναι η href, η οποία περιέχει το URL ενός αρχείου. Το κείμενο που γράφεται ή η εικόνα που καλείται ανάμεσα στις ετικέτες <a> </a>, είναι αυτό που φαίνεται στην οθόνη και πατάει ο χρήστης επάνω του για να μεταφερθεί στο αρχείο που δείχνει η ιδιότητα href. Η εμφάνιση ενός συνδέσμου στην οθόνη ποικίλει ανάλογα και με τον browser που χρησιμοποιείται. Εξ ορισμού, οι περισσότεροι γνωστοί browsers, όπως οι IE, ο Chrome ο Mozilla Firefox κ.λπ., εμφανίζουν τους συνδέσμους με μπλε, υπογραμμισμένα γράμματα, ενώ μετά τη χρήση τους το χρώμα τους αλλάζει σε μοβ. 10

11 Δημιουργία συνδέσμου Βασικές ιδιότητες Στην HTML 4.01, η ετικέτα <a> μπορούσε να είναι μια υπερσύνδεση ή ένα anchor (σημείο παραπομπής μέσα στη σελίδα). Στην HTML5, η ετικέτα <a> είναι πάντα μια υπερσύνδεση, με εξαίρεση την περίπτωση που δεν υπάρχει η ιδιότητα href, οπότε αποτελεί απλά ένα σύμβολο κράτησης θέσης για μια υπερσύνδεση. Η HTML5 έχει δύο νέες ιδιότητες, την download και τη media, ενώ δεν υποστηρίζει τις ιδιότητες charset, coords, name, rev και shape, οι οποίες υποστηρίζονται από την HTML Επίσης, οι ιδιότητες download, hreflang, media, rel, target και type, δε μπορούν να συμπεριληφθούν στην ετικέτα <a>, αν δεν υπάρχει και η ιδιότητα href. 11

12 Δημιουργία συνδέσμου Γενική σύνταξη Η γενική σύνταξη ενός συνδέσμου είναι: <a href="url">κείμενο υπερσύνδεσμος</a> ή <a href="url">εικόνα υπερσύνδεσμος</a> Παραδείγματα: <a href=" <a href=" src="./images/google.gif "></a> Όπως προαναφέρθηκε, όπου URL είναι συνήθως η θέση κάποιας Web σελίδας (η παράμετρος href προέρχεται από τις λέξεις Hypertext REFerence). 12

13 Δημιουργία συνδέσμου Κατέβασμα αρχείου Η ιδιότητα download ενεργοποιεί το κατέβασμα ενός αρχείου όταν γίνεται κλικ στο σύνδεσμο, αντί για την πλοήγηση σε αυτό μέσω του browser και χρησιμοποιείται μόνο μαζί με την ιδιότητα href. Σύνταξη: <a download="όνομα_αρχείου"> Τιμές: όνομα_αρχείου Προαιρετικό. Καθορίζει ένα νέο όνομα αρχείου για το αρχείο που θα κατέβει. Παράδειγμα: <a href="./images/face.jpg" download="myface"> ή Σύνταξη: <a download="download"> Παράδειγμα: <a href="./images/face.jpg" download="download"> 13

14 Δημιουργία συνδέσμου Επιλογή ονόματος ενός anchor Η ιδιότητα name προσδιορίζει το όνομα ενός anchor και χρησιμοποιείται για τη δημιουργία σελιδοδεικτών μέσα σε ένα HTML έγγραφο. Η ιδιότητα δεν υποστηρίζεται από την HTML5 και στη θέση της προτείνεται η χρήση της ιδιότητας id. Σύνταξη: <a name="όνομα_anchor"> ή <a id="όνομα_anchor"> Παράδειγμα: <a name="k1">κεφάλαιο 1</a> ή <a id="k1">κεφάλαιο 1</a> 14

15 Δημιουργία συνδέσμου Επιλογή χώρου ανοίγματος συνδεδεμένου εγγράφου Η ιδιότητα target ορίζει που θα ανοίξει το συνδεδεμένο έγγραφο και χρησιμοποιείται μόνο μαζί με την ιδιότητα href. Σύνταξη: <a target="_blank _self _parent _top όνομα_πλαισίου"> Τιμές: _blank: Ανοίγει το συνδεδεμένο έγγραφο σε ένα νέο παράθυρο ή καρτέλα. _self: Ανοίγει το συνδεδεμένο έγγραφο στο ίδιο πλαίσιο. _parent: Ανοίγει το συνδεδεμένο έγγραφο στο γονικό πλαίσιο. _top: Ανοίγει την σελίδα στο ίδιο παράθυρο αγνοώντας τα πλαίσια που τυχόν υπάρχουν. όνομα_πλαισίου: Ανοίγει το συνδεδεμένο έγγραφο στο πλαίσιο με το συγκεκριμένο όνομα. 15

16 Δημιουργία συνδέσμου Μεταφορά σε σύνδεσμο με τη χρήση του πλήκτρου Tab Καθώς σερφάρει ο χρήστης, πολλές φορές του δίνεται η δυνατότητα να επιλέξει ποιο στοιχείο από μία ομάδα στοιχείων θα γίνει ενεργό (π.χ. ένα link ή κάποιο στοιχείο μιας φόρμας). Αυτό επιτυγχάνεται με τη χρήση του πλήκτρου Tab, το οποίο μπορεί να τον μεταφέρει σειριακά ή μη σειριακά, από ένα στοιχείο σε ένα άλλο, μέσα σε μια ιστοσελίδα. Οι web developers μπορούν να ενεργοποιήσουν αυτή τη λειτουργία κάνοντας χρήση της ιδιότητας tabindex. Η τιμή που παίρνει η ιδιότητα είναι ένας ακέραιος αριθμός (>0), ο οποίος αντιστοιχεί ένα στοιχείο της σελίδας με τον αριθμό των πατημάτων του πλήκτρου Tab. 16

17 Δημιουργία συνδέσμου Μεταφορά σε σύνδεσμο με τη χρήση του πλήκτρου Tab Σύνταξη: <a tabindex="αριθμητική τιμή"> Παράδειγμα σειριακής μετακίνησης : <a href=" tabindex="1"> <a href=" tabindex="2"> <a href=" tabindex="3"> <a href=" tabindex="4"> 17

18 Δημιουργία συνδέσμου Μεταφορά σε σύνδεσμο με τη χρήση του πλήκτρου Tab Παράδειγμα μη σειριακής μετακίνησης: <a href=" tabindex="1"> <a href=" tabindex="3"> <a href=" tabindex="4"> <a href=" tabindex="2"> 18

19 Δημιουργία συνδέσμου Μεταφορά σε σύνδεσμο με τη χρήση του πλήκτρου Alt Με την ιδιότητα accesskey ορίζεται ένας χαρακτήρας του πληκτρολογίου, ο οποίος όταν πατηθεί μαζί με το πλήκτρο ALT, παρέχει άμεση προσπέλαση σε κάποιο στοιχείο της ιστοσελίδας (δηλαδή λειτουργεί σαν συντόμευση). Σύνταξη: <a accesskey="τιμή"> Παράδειγμα: <a href=" accesskey= "1"> <a href=" accesskey= "y"> Στο παραπάνω παράδειγμα, με Alt+1 ενεργοποιείται ο σύνδεσμος της Yahoo και με Alt+y ο σύνδεσμος της Yandex. 19

20 Δημιουργία συνδέσμου Μεταφορά σε σύνδεσμο με τη χρήση του πλήκτρου Alt Προσοχή! Η ιδιότητα accesskey δε λειτουργεί σε όλους τους browsers αλλά ούτε και με τον ίδιο τρόπο. Για παράδειγμα: Στους browsers Chrome, Opera και Safari, ο συνδυασμός πλήκτρων ανοίγει αυτόματα τη σελίδα που δείχνει το link. Στον ΙΕ μεταφέρει το χρήστη στο link που σχετίζεται με το συνδυασμό πλήκτρων (όπως η tabindex). Στο Yandex δε λειτουργεί για συνδυασμούς με ψηφία, ενώ λειτουργεί για συνδυασμούς με χαρακτήρες και ανοίγει τις σελίδες άμεσα, όπως για παράδειγμα και ο Chrome. Δεν υποστηρίζεται από τον Firefox. 20

21 Δημιουργία συνδέσμου Άλλες ιδιότητες Υπάρχουν επιπλέον ιδιότητες που μπορεί να πάρει η ετικέτα <a>, στις οποίες λόγω της μικρής τους σημασίας δε θα γίνει αναλυτική αναφορά και είναι οι εξής (οι περισσότερες έχουν κυρίως συμβουλευτικό ρόλο): hreflang: Ορίζει τη γλώσσα του URL «στόχου». media: Ορίζει για το τι μέσο/συσκευή η διεύθυνση URL προορισμού είναι βελτιστοποιημένη. rel: Ορίζει τη σχέση ανάμεσα στο τρέχον έγγραφο και τη διεύθυνση URL προορισμού. type: Ορίζει τον τύπο του μέσου της διεύθυνσης του URL προορισμού. 21

22 Δημιουργία συνδέσμου Άλλες ιδιότητες Υπάρχουν και ιδιότητες που δεν υποστηρίζονται από την HTML5 και είναι οι εξής: coords και shape : Χρησιμοποιούνται μαζί για να ορίσουν το μέγεθος, το σχήμα και την τοποθέτηση ενός συνδέσμου σε μια ετικέτα <object> ή <img> (δημιουργία image-map). rev: Ορίζει τη σχέση μεταξύ του συνδεδεμένου εγγράφου και του τρέχοντος εγγράφου. Για περισσότερα στη διεύθυνση: 22

23 Αλλαγή χρώματος συνδέσμων Το χρώμα των συνδέσμων ορίζεται στην ετικέτα body με τη χρήση των ιδιοτήτων link, vlink και alink. Οι ιδιότητες αυτές δεν υποστηρίζονται από την HTML5 και στη θέση τους χρησιμοποιούνται CSS. Η ιδιότητα link ορίζει το χρώμα του κειμένου που κρύβει μια παραπομπή που δεν έχει ακολουθήσει ακόμη ο χρήστης (η default τιμή είναι μπλε). Σύνταξη: <body link="όνομα_χρώματος 16δικός_αριθμός rgb_αριθμός"> Σύνταξη CSS: a:link {color: όνομα_χρώματος 16δικός_αριθμός rgb_αριθμός} 23

24 Αλλαγή χρώματος συνδέσμων Η ιδιότητα vlink ορίζει το χρώμα του κειμένου που κρύβει μια παραπομπή που έχει ακολουθηθεί στο παρελθόν (default τιμή κόκκινο). Σύνταξη: <body vlink="όνομα_χρώματος 16δικός_αριθμός rgb_αριθμός"> Σύνταξη CSS: a:visited {color:όνομα_χρώματος 16δικός_αριθμός rgb_αριθμός} 24

25 Αλλαγή χρώματος συνδέσμων Η ιδιότητα alink ορίζει το χρώμα ενός συνδέσμου πάνω στον οποίον έχει γίνει κλικ, αλλά δεν έχει ακόμη ελευθερωθεί το κουμπί του ποντικιού (αυτό λέγεται ενεργοποιημένος σύνδεσμος και συνήθως εμφανίζεται με κόκκινο χρώμα). Σύνταξη: <body alink="όνομα_χρώματος 16δικός_αριθμός rgb_αριθμός"> Σύνταξη CSS: a:active {color: όνομα_χρώματος 16δικός_αριθμός rgb_αριθμός;} 25 Σημείωση: Τα CSS θα παρουσιαστούν αναλυτικά σε επόμενα μαθήματα

26 Αλλαγή χρώματος συνδέσμων Παράδειγμα: <html> <body link="cyan" vlink="green" alink="pink"> <a href=" <a href=" <a href=" </body> </html> 26

27 Απόλυτοι σύνδεσμοι Παραπομπή σε URL του Internet Οι απόλυτοι (absolute) σύνδεσμοι δείχνουν σε ένα URL κάπου στο Internet. Για παράδειγμα: Το <a href=" είναι το πιο δημοφιλές εργαλείο αναζήτησης. Με κλικ πάνω στην λέξη «GOOGLE» ο browser θα καλέσει τη σελίδα με διεύθυνση 27

28 Απόλυτοι Σύνδεσμοι Παραπομπή σε αρχείο τοπικού φακέλου Υπάρχει και η δυνατότητα χρήσης παραπομπών που δείχνουν σε κάποιο αρχείο ενός τοπικού φακέλου, κάτι που πρέπει να αποφεύγεται. Η μεταφορά του φακέλου (ή γονικών του φακέλων) που περιέχει τα αρχεία, σε κάποια άλλη θέση στον τοπικό δίσκο, ή το ανέβασμά του σε κάποιο web server, θα κάνει αδύνατο το άνοιγμα του αρχείου που δείχνει η παραπομπή. Παράδειγμα: <a href="c:\xampp\htdocs\shapes.html">κάντε κλικ εδώ</a>. Αν για παράδειγμα ο φάκελος htdocs μεταφερθεί στο root του σκληρού δίσκου (C:\htdocs\shapes.html), κάνοντας κλικ πάνω στο σύνδεσμο, δε θα βρεθεί η σελίδα shapes.html για να φορτωθεί (υποθέστε ότι και η σελίδα που την καλεί βρίσκεται στον ίδιο φάκελο). 28

29 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο του ιδίου φακέλου Αν το αρχείο στο οποίο δείχνει η παραπομπή, βρίσκεται στον ίδιο φάκελο με τη σελίδα που περιέχει την παραπομπή, η σύνταξη του κώδικα θα έχει ως εξής: <a href="όνομα αρχείου">κείμενο υπερσύνδεσης</a> Παράδειγμα: Κάντε κλικ <a href="page1.htm">εδώ</a> για να πάτε στην άλλη σελίδα. Με κλικ πάνω στην λέξη «εδώ» ο browser θα καλέσει τη σελίδα με όνομα αρχείου page1.htm (υποθέστε ότι και οι δύο σελίδες βρίσκονται στο ίδιο φάκελο με όνομα mypages και η σελίδα που περιέχει την παραπομπή έχει όνομα main.htm). 29

30 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο του ιδίου φακέλου mypages page1.htm main.htm <a href="page1.htm">κείμενο υπερσύνδεσης</a> 30

31 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο υποφακέλου Η γενική σύνταξη, για μια παραπομπή από μια σελίδα σε ένα αρχείο, που βρίσκεται σε υποφάκελο της σελίδας που το καλεί, έχει ως εξής: <a href="υποφάκελος/webpage.htm"> κείμενο υπερσύνδεσης</a> Παράδειγμα: Υποθέστε πως η αρχική σας σελίδα έχει όνομα main.htm και βρίσκεται στην θέση c:\mypages Μια δεύτερη σελίδα έχει όνομα page1.htm και βρίσκεται στην θέση c:\mypages\part1 Η παραπομπή από την main.htm στην page1.htm θα είναι: Κάντε κλικ <a href="part1/page1.htm">εδώ</a> για να πάτε στην άλλη σελίδα. 31

32 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο υποφακέλου mypages part1 main.htm page1.htm <a href="part1/page1.htm">κείμενο υπερσύνδεσης</a> Προσοχή! Σε μερικούς unix web servers, η σύνταξη πρέπει να είναι:<a href="./part1/page1.htm">κείμενο υπερσύνδεσης</a> Υπάρχει δηλαδή μια τελεία (./) πριν από το path. 32

33 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο ανώτερου φακέλου Η γενική σύνταξη, για μια παραπομπή από μια σελίδα σε ένα αρχείο, που βρίσκεται σε ανώτερο φάκελο, έχει ως εξής: <a href="../webpage.htm">κείμενο υπερσύνδεσης</a> Δεν υπάρχει λόγος να βάλετε το όνομα του ανώτερου φακέλου διότι κάθε φάκελος έχει μόνον έναν αμέσως ανώτερο. Γι' αυτό αρκούν οι δύο τελείες. Υποθέστε πως η σελίδα σας έχει όνομα page1.htm και βρίσκεται στην θέση c:\mypages\part1. Μια δεύτερη σελίδα έχει όνομα main.htm και βρίσκεται στην θέση c:\mypages. Η παραπομπή από την page1.htm στην main.htm θα είναι: <a href="../main.htm">κείμενο υπερσύνδεσης</a> 33

34 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο ανώτερου φακέλου mypages part1 main.htm page1.htm <a href="../main.htm">κείμενο υπερσύνδεσης</a> Αν είχατε μια σελίδα page2.htm, που βρίσκεται σε μια θέση c:\mypages\part1\part1_a, τότε η παραπομπή από την page2.htm στην main.htm θα ήταν: <a href="../../main.htm">κείμενο υπερσύνδεσης </a> 34

35 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο άλλου (γενικά) φακέλου Οι παραπομπές από μια σελίδα σε ένα αρχείο, που βρίσκεται σε άλλο (γενικά) φάκελο, είναι ένας συνδυασμός των προηγούμενων σχετικών παραπομπών. Για παράδειγμα έστω πως έχετε τις σελίδες: page1.htm στην διεύθυνση c:\mypages\part1 και page2.htm στην διεύθυνση c:\mypages\part2 Η παραπομπή από την page1.htm στην page2.htm θα είναι: <a href="../part2/page2.htm">κείμενο υπερσύνδεσης </a> 35

36 Σχετικοί σύνδεσμοι Παραπομπή σε αρχείο άλλου (γενικά) φακέλου mypages part1 part2 main.htm page1.htm page2.htm <a href="../part2/page2.htm">κείμενο υπερσύνδεσης </a> Η παραπομπή αυτή σημαίνει: Από τον τρέχοντα φάκελο (part1) ανέβα στον ανώτερο (../ δηλαδή τον mypages). Από εκεί θα πας στον part2 όπου θα βρεις το αρχείο page2.htm 36

37 Σχετικοί σύνδεσμοι Πλεονεκτήματα Οι σχετικές παραπομπές επιτρέπουν τη μεταφορά χωρίς πρόβλημα, ολόκληρου του site, από μηχάνημα σε μηχάνημα (ή από φάκελο σε φάκελο), χωρίς να χρειαστεί καμία απολύτως μεταβολή. Προσοχή! Οι σχετικές παραπομπές δε λειτουργούν για το πρωτόκολλο file (ο browser προσπαθεί να βρει το αρχείο στον δικό του δίσκο και όχι στον δίσκο του κόμβου από τον οποίο πήρε αυτή την διεύθυνση). 37

38 Σύνδεσμοι για αποστολή Για την αποστολή , μπορείτε να δημιουργήσετε ένα σύνδεσμο, ο οποίος θα ανοίγει στον υπολογιστή του επισκέπτη της σελίδας ένα παράθυρο σύνταξης , με διεύθυνση παραλήπτη αυτή που έχει οριστεί. Αυτό επιτυγχάνεται με τη χρήση του πρωτοκόλλου mailto:. Σύνταξη: <a υπερσύνδεσης</a> Αν ο χρήστης επιλέξει το κείμενο ανάμεσα στα <a></a>, τότε η προεπιλεγμένη εφαρμογή που χρησιμοποιεί, θα ανοίξει ένα κενό παράθυρο αποστολής , με διεύθυνση παραλήπτη τη διεύθυνση που ακολουθεί το mailto:. Παράδειγμα: Για επικοινωνία κάντε κλικ <a 38

39 Σύνδεσμοι για αποστολή 39 Αποτέλεσμα παραδείγματος για <a

40 Σύνδεσμοι για αποστολή Σε περίπτωση που οι παραλήπτες είναι περισσότεροι από ένας, τότε οι διευθύνσεις τους χωρίζονται μεταξύ τους με «;». Σύνταξη: <a κείμενο υπερσύνδεσης</a> Για να συμπεριληφθεί και κάποιο θέμα (subject) στο που θα αποσταλεί, θα πρέπει να προστεθεί και το πεδίο subject. Η διεύθυνση (-εις) του (-ων) παραλήπτη (-ών) χωρίζονται με το πεδίο που ακολουθεί (όποιο και αν είναι αυτό) με το σύμβολο «?». Σύνταξη: <a θέματος"> κείμενο υπερσύνδεσης</a> 40

41 Σύνδεσμοι για αποστολή Μπορούν να δοθούν τιμές και στα υπόλοιπα πεδία ενός , που είναι τα Κοινοποίηση (cc), Ιδιαίτερη κοινοποίηση (bcc) και Σώμα (body). Τα πεδία ενώνονται μεταξύ τους με το σύμβολο «&». Σύνταξη: <a &subject=κείμενο θέματος&body=κείμενο μηνύματος">κείμενο υπερσύνδεσης</a> Παράδειγμα: Για επικοινωνία κάντε κλικ <a μέλη συλλόγου&body=κύριοι γεια σας">εδώ</a> 41

42 Σύνδεσμοι για αποστολή Αποτέλεσμα παραδείγματος για <a μέλη συλλόγου&body=κύριοι γεια σας"> 42

43 Ανεπιθύμητη Αλληλογραφία (Spam) Προσοχή! Όταν κάνετε χρήση μιας ηλεκτρονικής διεύθυνσης μέσα στο σώμα της ιστοσελίδας, υπάρχει κίνδυνος αυτή να «κλαπεί» από προγράμματα που «ξεψαχνίζουν» το Διαδίκτυο και υποκλέπτουν αυτού του τύπου τις πληροφορίες. Αυτό θα έχει ως συνέπεια, πολύ σύντομα, να «βομβαρδιστείτε» από ανεπιθύμητα μηνύματα ηλεκτρονικής αλληλογραφίας με διαφημιστικό περιεχόμενο (spam mails). Μια λύση για το πρόβλημα θα ήταν η αντικατάσταση κάθε χαρακτήρα της διεύθυνσης ηλεκτρονικού ταχυδρομείου με τον αντίστοιχο κωδικό του. Για παράδειγμα, η διεύθυνση θα μπορούσε να γραφτεί: #114; (οι κωδικοί χωρίς κενά μεταξύ τους). 43

44 Σύνδεσμοι για σύνδεση ftp Μία από τις πιθανές μορφές ενός (απόλυτου) URL είναι ένα FTP URL, το οποίο αρχίζει με ftp: ως μέρος του πρωτοκόλλου. Παράδειγμα: ftp://ftp.freenet.de/pub/filepilot/download/2016/06/2096/avira_fr ee_antivirus_15017de.exe Μια διεύθυνση URL FTP προσδιορίζει ένα αρχείο ή έναν κατάλογο σε έναν εξυπηρετητή (Host) στο Διαδίκτυο, που είναι προσβάσιμος χρησιμοποιώντας το πρωτόκολλο FTP. Τέτοιες διευθύνσεις URL χρησιμοποιούνται συχνά σε έγγραφα του Παγκόσμιου Ιστού, προκειμένου να παραπέμψουν το χρήστη σε έναν πόρο που είναι downloadable από ένα δημόσιο FTP server (όπως στο παραπάνω παράδειγμα). Ορισμένοι (μη δημόσιοι) FTP servers μπορεί να απαιτούν και κωδικό πρόσβασης για να επιτρέψουν την είσοδο του επισκέπτη. 44

45 Σύνδεσμοι για σύνδεση ftp Σύνταξη: Ορισμένα ή όλα τα μέρη του μπορεί να αποκλειστούν. Τα στοιχεία υπακούουν στους εξής κανόνες: user: Ένα όνομα χρήστη (user id) του εξυπηρετητή (host) password: Ο κωδικός πρόσβασης που αντιστοιχεί στο όνομα χρήστη. Σημείωση: αν τα πεδία χρήστης και κωδικός πρόσβασης σε μια διεύθυνση URL, περιέχουν τους χαρακτήρες «:» ή ή «/», τότε αυτοί θα πρέπει να κωδικοποιηθούν. host: Το πλήρως αναγνωρισμένο όνομα τομέα του δικτύου του κεντρικού υπολογιστή ή η διεύθυνση IP. port: Ο αριθμός θύρας για να συνδεθεί κάποιος, ο οποίος συνήθως παραλείπεται (προεπιλογή 21). 45

46 Σύνδεσμοι για σύνδεση ftp Σύνταξη συνέχεια: Τα στοιχεία υπακούουν στους εξής κανόνες: path: Η διαδρομή, π.χ. κατάλογος1/κατάλογος 2/.../ κατάλογοςn /όνομα_αρχείου Παραδείγματα FTP URLs: ftp://ftp.abc.net/pub/e-books/java1.pdf Παράδειγμα: Avira Antivirus <a href="ftp://ftp.freenet.de/pub/filepilot /download/2016/06/2096/avira_free_antivirus_15017de.exe"> download</a> 46

47 Σύνδεσμοι για εκτέλεση κώδικα javascript Ένας σύνδεσμος, μπορεί να είναι ακόμη πιο χρήσιμος αν χρησιμοποιείται με JavaScript. Μπορεί να κληθεί μια συνάρτηση JavaScript, μέσα από μία ετικέτα <a>, κάνοντας χρήση της ιδιότητας href. Για παράδειγμα, για τη χρήση της μεθόδου alert της Javascript (εμφανίζει ένα πλαίσιο προειδοποίησης), θα μπορούσε να γραφεί ο παρακάτω κώδικας: <a href="javascript:alert('hello World!');">Εμφάνισε μήνυμα</a> 47

48 Δημιουργία σελιδοδείκτη (Bookmark) Παραπομπή από ένα σημείο της σελίδας σε ένα άλλο Πολλές φορές χρειάζεται να γίνει παραπομπή του επισκέπτη όχι σε άλλη σελίδα αλλά σε άλλο τμήμα της ίδιας σελίδας. Αυτό επιτυγχάνεται με τη δημιουργία ενός σελιδοδείκτη, ο οποίος θα περιέχει μια από τις ιδιότητες name ή id (προτιμότερο διότι η ιδιότητα name δεν υποστηρίζεται από την HTML5), ώστε να δοθεί όνομα στο σημείο, στο οποίο θα οδηγεί η παραπομπή. Αφού δημιουργηθεί ο σελιδοδείκτης, στη συνέχεια θα πρέπει να προστεθεί μια σύνδεση με αυτόν. Οι σελιδοδείκτες είναι χρήσιμοι, κυρίως στις περιπτώσεις που μία ιστοσελίδα είναι πολλή μεγάλη. Όταν γίνει κλικ στη σύνδεση, η σελίδα θα κυλίσει στο σημείο με το σελιδοδείκτη. 48

49 Δημιουργία σελιδοδείκτη (Bookmark) Παραπομπή από ένα σημείο της σελίδας σε ένα άλλο Δημιουργία σελιδοδείκτη: <a id="όνομα_σελιδοδείκτη">[κείμενο σελιδοδείκτη]</a> Σημείωση: Μπορεί να γίνει χρήση και άλλων ετικετών εκτός της <a>, όπως για παράδειγμα της <h>. Δημιουργία σύνδεσης με το σελιδοδείκτη: <a href="#όνομα_σελιδοδείκτη">κείμενο ή εικόνα υπερσύνδεσης</a> Παράδειγμα: <a href="#mclaren">visit the Team McLaren Honda</a> <h2 id="mclaren">team McLaren Honda</h2> 49

50 Δημιουργία σελιδοδείκτη (Bookmark) Παραπομπή από ένα σημείο της σελίδας σε ένα άλλο <a href="#software">λογισμικό</a> <a href="#hardware">υλικό</a> <a id="software"></a> Μπλα, μπλα, μπλα Μπλα, μπλα, μπλα <a id="hardware"></a> Μπλα, μπλα, μπλα Μπλα, μπλα, μπλα 50

51 Δημιουργία σελιδοδείκτη (Bookmark) Παραπομπή από μια σελίδα σε ένα σημείο μιας άλλης σελίδας Πολλές φορές χρειάζεται η παραπομπή του επισκέπτη, να μην είναι στην κορυφή μιας άλλης σελίδας, αλλά σε ένα συγκεκριμένο σημείο της. Αυτό επιτυγχάνεται χρησιμοποιώντας και πάλι μια από τις ιδιότητες name ή id, για να δοθεί όνομα στο σημείο, στο οποίο θα οδηγεί η παραπομπή. Δημιουργία σελιδοδείκτη: <a id="όνομα_σελιδοδείκτη">[κείμενο σελιδοδείκτη]</a> Σημείωση: Μπορεί να γίνει χρήση και άλλων ετικετών εκτός της <a>, όπως για παράδειγμα της <h>. Δημιουργία σύνδεσης με το σελιδοδείκτη: <a href="path/όνομα_σελίδας#όνομα_σελιδοδείκτη">κείμενο ή εικόνα υπερσύνδεσης</a> 51

52 Δημιουργία σελιδοδείκτη (Bookmark) Παραπομπή από μια σελίδα σε ένα σημείο μιας άλλης σελίδας Οι σελίδες στο παράδειγμα που ακολουθεί βρίσκονται στον ίδιο φάκελο, οπότε δε χρειάζεται η δήλωση του path. <a href="page2.htm#software">λογισμικό</a> <a href="page2.htm #hardware">υλικό</a> <a name="software">λογισμικό</a> Μπλα, μπλα, μπλα <a name="hardware">υλικό</a> Μπλα, μπλα, μπλα page1.htm page2.htm 52

53 Βιβλιογραφία W3schools ( Επιτήδειος Γεώργιος ( Tampere University Of Technology ( 53