Οι σύνδεσμοι (links) βρίσκονται σχεδόν σε όλες τις ιστοσελίδες. Οι σύνδεσμοι επιτρέπουν στους χρήστες να κάνουν click και να επιλέγουν ποιο δρόμο θα επιλέξουν πηγαίνοντας από σελίδα σε σελίδα. Οι σύνδεσμοι ονομάζονται links ή αλλιώς hyperlinks, δηλαδή υπερσύνδεσμοι.
Οι σύνδεσμοι μας επιτρέπουν να κάνουμε κλικ πάνω τους και να μετακινηθούμε σε ένα νέο έγγραφο ή μια νέα ιστοσελίδα.
Όταν το ποντίκι πάει πάνω σε ένα σύνδεσμο τότε θα παρατηρήσουμε κάποια αλλαγή στο χρώμα του συνδέσμου. Επίσης ο κέρσορας θα αλλάξει μορφή. Συνήθως παίρνει τη μορφή χεριού (που εταοιμάζεται να κάνει κλίκ).
Εδώ να παρατηρήσουμε οτι ο σύνδεσμος δεν είναι απαραίτητο να αποτελείται από κείμενο. Ο σύνδεσμος μπορεί να είναι εικόνα ή οποιοδήποτε άλλο στοιχείο της γλώσσας HTML.
Σύνταξη των html συνδέσμων
Στη γλώσσα HTML οι σύνδεσμοι ορίζονται με την ετικέτα <a> ως εξής:
<a href=”url”>κείμενο του συνδέσμου</a>
Ακολουθεί παράδειγμα που δείχνει τη χρήση του συνδέσμου στην γλώσσα HTML:
————————-
<!DOCTYPE html>
<html>
<body>
<p><a href=”http://www.html.gr/”>Visit our HTML tutorial</a></p>
</body>
</html>
————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Το χαρακτηριστικό href καθορίζει τη διεύθυνση προορισμού (http://www.html.gr/) του συνδέσμου.
Το κείμενο του συνδέσμου είναι το ορατό κομμάτι του συνδέσμου, δηλαδή αυτό που βλέπει ο χρήστης στο φυλλομετρητή (Visit our HTML tutorial).
Όταν κάνουμε κλικ πάνω στο κείμενο του συνδέσμου τότε θα μετακινηθούμε στη διεύθυνση προορισμού (href).
Εδώ πρέπει να σημειώσουμε οτι εάν δεν βάλουμε το σύμβολο “/” στη διεύθυνση υποφακέλου (subfolder address) τότε είναι πιθανό να δημιουργηθούν δυο αιτήσεις προς το server. Κάποιοι servers τοποθετούν αυτόματα το σύμβολο “/” στο τέλος της διεύθυνσης url, και στη συνέχεια δημιουργούν νέα αίτηση.
Ποιοτική κατασκευή ιστοσελίδων
Η παραπάνω σημείωση μας δίνει ένα στίγμα του πόσο μεγάλη μπορεί να γίνει η διαφορά στην κατασκευή ιστοσελίδας ανμεσα σε έναν αρχάριο κατασκευαστή ιστοσελίδων και σε έναν έμπειρο κατασκευαστή ιστοσελίδων. Η συγκεκριμένη λεπτομέρεια με το “/” δείχνει ασήμαντη. Όμως θα δημιουργήσει κάποια καθυστέρηση στην ικανοποίηση του αιτήματος. Ο αρχάριος κατασκευαστής ιστοσελίδας θα κάνει πολλά τέτοια λαθάκια, που το καθένα είναι φαινομενικά ασήμαντο. Το άθροισμα όμως αυτών των ασήμαντων λαθών θα οδηγήσει σε μια ιστοσελίδα που δημιουργεί κακή εμπειρία χρήστη. Αντίθετα ένας έμπειρος κατασκευαστής θα δημιουργήσει μια ιστοσελίδα που θα ενθουσιάζει τον επισκέπτη. Εάν είστε εκπαιδευόμενος, σας προτείνουμε να δίνετε σημασία στις λεπτομέρειες της γλώσσας html. Εάν είστε επιχειρηματίας που θέλετε να αναθέσετε σε κάποια εταιρεία την κατασκευή της ιστοσελίδας σας, σας προτείνουμε να είστε προσεκτικός με την επιλογή της εταιρείας που θα αναλάβει τόσο την κατασκευή όσο και την προώθηση της ιστοσελίδας σας.
Τοπικοί σύνδεσμοι (Local Links)
Στο παραπάνω παράδειγμα χρησιμοποιήσαμε ένα απόλυτο URL (δηλαδή μια πλήρη διεύθυνση web address).
Ο τοπικός σύνδεσμος (local link) είναι ένας σύνδεσμος που οδηγεί σε άλλη σελίδας εντός του ιστότοπου, δηλαδή μέσα στο ίδιο web site.
Οι τοπικοί σύνδεσμοι καθορίζονται χρησιμοποιώντας σχετικά URL. Τα σχετικά URL είναι τα URL που δεν περιλαμβάνουν το “http://www….” στην αρχή τους.
Ακολουθεί παράδειγμα το οποίο μας βοηθάει να ξεκαθαρίσουμε τη διαφορά ανάμεσα στον απόλυτο και στον τοπικό σύνδεσμο. Ουσιαστικά αυτό που ξεκαθαρίζουμε είναι η διαφορά ανάμεσα στο απόλυτο και στο σχετικό URL:
————————-
<!DOCTYPE html>
<html>
<body>
<p><a href=”html_images.asp”>HTML Images</a> is a link to a page on this website.</p>
<p><a href=”http://www.w3.org/”>W3C</a> is a link to a website on the World Wide Web.</p>
</body>
</html>
————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Χρώμα συνδέσμων στην HTML
Εξ ορισμού οι σύνδεσμοι εμφανίζονται σε όλους τους φυλλομετρητές ως εξής:
Ο σύνδεσμος που δεν έχουμε επισκεφθεί ακόμα (unvisited link) έχει χρώμα μπλε και είναι υπογραμμισμένος.
Ο σύνδεσμος που έχουμε επισκεφθεί (visited link) έχει χρώμα μωβ (purple) και είναι υπογραμμισμένος.
Ο ενεργός σύνδεσμος (active link) έχει χρώμα κόκκινο και είναι υπογραμμισμένος.
Για να μάθετε περισσότερα για τα χρώματα μπορείτε να διαβάσετε το άρθρο μας σχετικά με τα χρώματα στη γλώσσα html
Μπορούμε να αλλάξουμε τα προκαθορισμένα χρώματα χρησιμοποιώντας μορφοποίηση CSS, όπως στο παράδειγμα που ακολουθεί:
————————-
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href=”html_images.asp” target=”_blank”>HTML Images</a>
</body>
</html>
————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Εισαγωγή στο CSS
Το CSS είναι μια τεχνολογία που συμπληρώνει την html και έχει ως στόχο τη μορφοποίηση των στοιχείων της html. Μπορούμε να χρησιμοποιήσουμε CSS για να καθορίσουμε λεπτομερώς με ποιόν τρόο θα εμφανιστεί κάθε στοιχείο της html. Εάν δεν γνωρίζετε ακόμα τι σημαίνει CSS, τότε δεν έχετε παρά να μεταβείτε στην ξεχωριστή ενότητα που έχουμε δημιουργήσει για το CSS. Μπορείτε να ξεκινήσετε με την εισαγωγή στο css.
Το χαρακτηριστικό target του html συνδέσμου
Το χαρακτηριστικό target attribute καθορίζει που θα ανοίξει το έγγραφο στο οποίο δείχνει ο σύνδεσμος.
Το χαρακτηριστικό target μπορεί να λάβει τις παρακάτω τιμές:
_blank – Ανοίγει το έγγραφο σε νέο παράθυρο ή νέο tab
_self – Ανοίγει το έγγραφο στο ίδιο παράθυρο / tab
_parent – Ανοίγει το έγγραφο στο parent frame (εάν έχουμε χρησιμοποιήσει frames)
_top – Ανοίγει το έγγραφο στο κεντρικό παράθυρο
framename – Ανοίγει το έγγραφο στο frame του οποίου το όνομα αναφέρεται εδώ
Ακολουθεί παράδειγμα που δείχνει το άνοιγμα του εγγράφου σε νέο παράθυρο / tab:
————————-
<!DOCTYPE html>
<html>
<body>
<a href=”http://www.w3schools.com/html/” target=”_blank”>Visit our HTML tutorial!</a>
<p>If you set the target attribute to “_blank”, the link will open in a new browser window or tab.</p>
</body>
</html>
————————-
Σημείωση: εάν η ιστοσελίδα μας έχει ανοίξει μέσα σε κάποιο frame, τότε μπορούμε να χρησιμοποιήσουμε το target=”_top” για να βγούμε από το frame και να πάμε σε κανονικό φυλλομετρητή. Ακολουθεί παράδειγμα που μας δείχνει τη χρήση του target=”_top”:
————————-
<!DOCTYPE html>
<html>
<body>
<p>Locked in a frame? <a href=”http://www.w3schools.com/html/” target=”_top”>Click here!</a></p>
</body>
</html>
————————-
Σύνδεσμος από εικόνα
Στην κατασκευή ιστοσελίδων είναι πολύ συνηθισμένο να χρησιμοποιούμε εικόνες τις οποίες να τις κάνουμε και συνδέσμους. Ακολουθεί παράδειγμα στο οποίο βλέπουμε οτι η εικόνα στην html είναι και σύνδεσμος:
————————-
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0″>
</a>
<p>We have added “border:0” to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
————————-
Στην παρακάτω εικόνα φαίνεται το αποτέλεσμα:
Το “border:0;” προστέθηκε διότι δεν θέλουμε να φαίνεται το περίγραμμα γύρω από την εικόνα. Η γλώσσα html προσθέτει περίγραμμα στην εικόνα που είναι σύνδεσμος, για να μας δείξει αυτό ακριβώς: οτι εδώ έχουμε σύνδεσμο. Για να αποφύγουμε το περίγραμμα βάζουμε το “border:0;”.
Εσωτερικοί σύνδεσμοι (html bookmarks)
Οι εσωτερικοί σύνδεσμοι (html bookmarks) μας επιτρέπουν να μετακινηθούμε σε συγκεκριμένο σημείο εντός της ιστοσελίδας.
Οι εσωτερικοί σύνδεσμοι είναι πολύ χρήσιμοι όταν η ιστοσελίδα έχει μεγάλο μήκος.
Για να δημιουργήσουμε έναν εσωτερικό σύνδεσμο, πρέπει πρώτα να δηλώσουμε το σημείο στο οποίο δείχνει ο σύνδεσμος (bookmark) και μετά να βάλουμε σύνδεσμο (link) προς αυτό.
Όταν πατήσουμε το link τότε η ιστοσελίδα θα κάνει κύλιση (scroll) μέχρι το σημείο στο οποίο υπάρχει το bookmark.
Ακολουθεί παράδειγμα το οποίο δείχνει τη χρήση των εσωτερικών συνδέσμων στην html:
————————-
<!DOCTYPE html>
<html>
<body>
<p><a href=”#C4″>Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id=”C4″>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
————————-
Στο παραπάνω παράδειγμα χρησιμοποιήσαμε παραγράφους και επικεφαλίδες html. Έχουμε δημιουργήσει ξεχωριστό άρθρο με το οποίο μπορείτε να μάθετε περισσότερες λεπτομέρειες για τις επικεφαλίδες στη γλώσσα html. Επίσης ξεχωριστό άρθρο έχουμε για τις παραγράφους στην html.
Χρήση συνδέσμων στην προώθηση ιστοσελίδων
Η προώθηση ιστοσελίδων στηρίζεται σε πολύ μεγάλο βαθμό στους συνδέσμους. Η σωστή χρήση των συνδέσμων είναι το Α και το Ω στην προώθηση ιστοσελίδων. Παρόλο που υπάρχει ξεχωριστή ενότητα για την προώθηση ιστοσελίδων στο html.gr, εδώ θα αναφέρουμε απλά μερικά πράγματα που πρέπει να γνωρίζουν όλοι όσοι ξεκινάνε να αποκτούν γνώσεις κατασκευής ιστοσελίδων. Το πρώτο και σημαντικότερο είναι το κείμενο του συνδέσμου. Εκεί πρέπει να γράφουμε κείμενο σχετικό με τη φράση κλειδί, δηλαδή με τη φράση για την οποία θέλουμε να προωθήσουμε την ιστοσελίδα μας. Το δεύτερο και εξίσου σημαντικό είναι οτι πρέπει να επιδιώκουμε να τοποθετούν άλλοι ιστότοποι συνδέσμους προς το δικό μας. Αυτοί οι σύνδεσμοι ονομάζονται backlinks. Το τρίτο είναι καλό θα είναι να χρησιμοποιούμε εμείς οι ίδιοι εσωτερικούς συνδέμους μεταξύ των σελίδων του ιστοτόπου μας. Το τέταρτο είναι οτι αντενδείκνυται να χρησιμοποιούμε frames. Αυτές οι συμβουλές βέβαια αποτελούν μόνο ένα πολύ μικρό ποσοστό των παραμέτρων που επηρεάζουν την προώθηση μιας ιστοσελίδας.
[…] σημασία σε αυτούς. Ενδείκνυται να χρησιμοποιείτε τις τυπικές συνδέσεις HTML και όχι τις συνδέσεις που προκύπτουν από τη Javascript. Εάν […]