ΠΡΟΧΕΙΡΗ ΣΕΛΙΔΑ
Σύνδεσμοι στην HTML
Σύνδεσμους (links) θα βρούμε σχεδόν σε όλες τις ιστοσελίδες. Αυτοί βοηθούν τους χρήστες να έχουν εύκολη περιήγηση από ιστοσελίδα σε ιστοσελίδα. Οι σύνδεσμοι στην HTML έχουν τις ετικέτες <a> και </a>.
Οι σύνδεσμοι στην HTML είναι υπερσύνδεσμοι. Μπορούμε να κάνουμε “κλικ” σε ένα σύνδεσμο και να μεταφερθούμε σε ένα άλλο έγγραφο.
Σημαντικές ιδιότητες συνδέσμων
Ιδιότητα href
Η ετικέτα href είναι απαραίτητη για ένα σύνδεσμο γιατί σε αυτή ορίζουμε την διεύθυνση της ιστοσελίδας που θέλουμε να μεταφερθεί ο χρήστης, όταν πατήσει πάνω σε αυτόν.
Παράδειγμα
<a href="www.csc.com.gr"> Computer Science Center </a>
Μπορούμε να ορίσουμε ως σύνδεσμο ένα κείμενο, όπως στο παραπάνω παράδειγμα, ή οποιοδήποτε άλλο στοιχείο της HTML εμείς θέλουμε.
Στο παρακάτω παράδειγμα ορίζουμε μία εικόνα ως σύνδεσμο.
<a href="www.csc.com.gr"> <img src="cscLogo" alt="Computer Science Center Logo"> </a>
Στην ιδιότητα href εκτός από μία εξωτερική ιστοσελίδα, μπορούμε να ορίσουμε ένα τοπικό σύνδεσμο (local link) που μας μεταφέρει σε ένα “συγγενικό” σύνδεσμο της ιστοσελίδας που ήδη χρησιμοποιεί ο χρήστης.
Παράδειγμα
<a href="csc_tutorials.asp"> Ιδιαίτερα Μαθήματα στο CSC </a>
Ιδιότητα target
Με τη ιδιότητα target ορίζουμε που να ανοίγει το έγγραφο του συνδέσμου, το πρόγραμμα περιήγησης. Η ιδιότητα target μπορεί να πάρει τις εξής τιμές:
- _blank (το έγγραφο ανοίγει σε καινούργια καρτέλα)
- _self (το έγγραφο ανοίγει μέσα στην ίδια καρτέλα)
- _parent (το έγγραφο ανοίγει στη γονική καρτέλα)
- _top (το έγγραφο ανοίγει σε ολόκληρο το σώμα του παραθύρου)
Παράδειγμα
<a href="www.csc.com.gr" target="_blank"> Computer Science Center </a>
Χρώματα συνδέσμων
Θα έχετε παρατηρήσει ότι όταν ο δείκτης του ποντικιού βρίσκεται πάνω από ένα σύνδεσμο, δύο πράγματα συμβαίνουν κανονικά. Ο δείκτης του ποντικιού αλλάζει σχήμα και γίνεται σαν μικρό χεράκι και αλλάζει και το χρώμα του συνδέσμου.
Από προεπιλογή οι σύνδεσμοι εμφανίζονται ως εξής:
- αυτοί που δεν έχουμε επισκεφτεί είναι υπογραμμισμένοι και μπλε
- αυτοί που έχουμε επισκεφτεί είναι υπογραμμισμένοι και μοβ
- αυτοί που είναι ενεργοί είναι υπογραμμισμένοι και κόκκινοι
Μπορούμε λοιπόν να ορίσουμε εμείς τα χρώματα που θέλουμε να έχουν οι σύνδεσμοι της ιστοσελίδας μας.
Υπάρχουν οι εξής ιδιότητες στη CSS για να ορίσουμε τα χρώματα:
- link (όταν δεν έχουμε επισκεφτεί ένα σύνδεσμο)
- visited (όταν έχουμε επισκεφτεί ένα σύνδεσμο)
- hover (όταν ο δείκτης του ποντικιού βρίσκεται πάνω από το σύνδεσμο)
- active (όταν ο σύνδεσμος είναι ενεργός)
Μπορούμε επίσης να χρησιμοποιήσουμε την ιδιότητα text-decoration για να ορίσουμε τη διακόσμηση του συνδέσμου, δηλαδή αν θα έχει υπογράμμιση ή όχι.
Παράδειγμα
<head> <style> a:link { color: green; text-decoration: none; } a:visited { color: pink; text-decoration: none; } a:hover { color: red; text-decoration: underline; } a:active { color: yellow; text-decoration: underline; } </style> </head>