Εκμάθηση HTML/Σύνδεσμοι

Από Βικιεπιστήμιο
Πήδηση στην πλοήγηση Πήδηση στην αναζήτηση


Προηγούμενη
Ενότητα
Περιεχόμενα Τέλος



Τα γνωστά μας links μπορούν να παραπέμψουν τον επισκέπτη της ιστοσελίδας μας σε άλλη σελίδα του ίδιου ιστότοπου ή ακόμα και σε εξωτερική.

Εξωτερικοί σύνδεσμοι[επεξεργασία]

<a href="http://el.wikiversity.org/wiki/">Αυτός είναι ένας σύνδεσμος 
που οδηγεί στην κεντρική σελίδα του Βικιεπιστημίου.</a>


Το tag <a> (anchor) δίνει μερικές ιδιότητες στο κείμενό μας. Μία από αυτές είναι το href (Hypertext Reference), που δίνει την δυνατότητα να συνδέσουμε ένα κομμάτι κειμένου με μια ιστοσελίδα. Ο σύνδεσμος στον οποίο θέλουμε να οδηγεί θα πρέπει να εσωκλείεται από διπλά εισαγωγικά ". Κατόπιν κλείνουμε το open tag, γράφουμε το κείμενό μας, και γράφουμε και το close tag </a>. Περνώντας τον κέρσορα πάνω από αυτό το κείμενο, δίνεται η δυνατότητα ο επισκέπτης να κάνει κλικ πάνω του, και έτσι ανακατευθύνετε σε μια άλλη σελίδα.

Μια επίσης σημαντική παράμετρος είναι η target. Θέτοντας την target ως "_blank", η σελίδα του συνδέσμου θα ανοίξει σε μια νέα καρτέλα του φυλλομετρητή μας, και όχι στην ίδια σελίδα.
<a href="http://el.wikiversity.org/wiki/" target="_blank">Αυτός είναι ένας 
σύνδεσμος που ανοίγει μια νέα καρτέλα για το Βικιεπιστήμιο.</a>


Εσωτερικοί σύνδεσμοι[επεξεργασία]

Ήρθε η ώρα να δοκιμάσουμε κάτι πιο ενδιαφέρον.

Γράψτε τον παρακάτω κώδικα στο αρχείο index.htm σας.
<html>
<body>
 
<h1>Τίτλος σελίδας</h1>
 <a href="page1.html">Σελίδα 1</a>
 <a href="page2.html">Σελίδα 2</a>

</body>
</html>
Επίσης δημιουργήστε στον ίδιο φάκελο, άλλα δύο αρχεία με το όνομα page1.htm, και page2.htm, το καθένα με ξεχωριστό περιεχόμενο. Κατόπιν, ανοίξτε με τον φυλλομετρητή σας το αρχείο index.htm, και θα δείτε δύο συνδέσμους, ο καθένας να οδηγεί σε μια από τις δύο σελίδες. Όπως αντιλαμβάνεστε για σελίδες που βρίσκονται στον ίδιο φάκελο ή και μέσα σε άλλους φακέλους αλλά στον ίδιο υπολογιστή, μπορείτε απλά να τοποθετήσετε έναν εσωτερικό σύνδεσμο.


Σύνδεσμοι στην ίδια σελίδα[επεξεργασία]

Μια επίσης πολύ ενδιαφέρουσα παράμετρος είναι η name. Με αυτήν μπορούμε με ένα κλικ ο φυλλομετρητής να κατέβει/ανέβει στο σημείο της σελίδας που θέλουμε.
<a name="content">Κάποιο περιεχόμενο</a>
<!-- Παρεμβάλλεται αρκετό κείμενο, ούτως ώστε να υπάρξει οριζόντια μπάρα 
και ο χρήστης να χρειάζεται να κατέβει για να διαβάσει όλο το κείμενο -->
<a href="#content">Επιστροφή στο περιεχόμενο</a>


e-mail[επεξεργασία]

Τέλος έχετε την δυνατότητα να προσθέσετε έναν σύνδεσμο επικοινωνίας.
<a href="mailto:someone@wikiversity.com?subject=Γεια%20σου">Επικοινωνία</a>
<!-- O συμβολισμός %20 είναι το κενό. Αυτό που θα γίνει είναι να ανοίξει το ηλεκτρονικό 
ταχυδρομείο του επισκέπτη με τον τίτλο: Γεια σου -->