Υπερσύνδεσμοι
Η ετικέτα <a…>
Οι ιστοσελίδες είναι ουσιαστικά έγγραφα υπερκειμένου. Υπερκείμενο (hypertext) είναι ένα ηλεκτρονικό
κείμενο το οποίο είναι οργανωμένο με μη γραμμική μορφή. Η αναζήτηση των πληροφοριών σε ένα
υπερκείμενο γίνεται με βάση του συνδέσμους ή υπερσυνδέσμους που υπάρχουν στο σώμα του κειμένου.
Επιλέγοντας με το δείκτη του ποντικιού ένα υπερσύνδεσμο μπορούμε να πλοηγηθούμε σε διαφορετικές
ενότητες περιεχομένου, στην ίδια ή σε διαφορετικές ιστοσελίδες, οι οποίες μπορεί να βρίσκονται οπουδήποτε
στον παγκόσμιο ιστό.
Για τη δημιουργία υπερσυνδέσμων χρησιμοποιούμε την ετικέτα a η οποία έχει δύο παραμέτρους
την href με την οποία ορίζεται το σημείο σύνδεσης ή το αρχείο
την target με την οποία καθορίζεται ότι ο πόρος προορισμού θα ανοίξει σε μια νέα καρτέλα ή ένα νέο
παράθυρο του φυλλομετρητή.
Σύνταξη
<a href=”αρχείο ή σημείο σύνδεσης” target=”_blank”>Λέξη/εις υπερσύνδεσμος</a>
To αρχείο ή σημείο σύνδεσης μπορεί να είναι
Απόλυτη διεύθυνση <a href="http://www.sch.gr"> Κείμενο </a>
Σχετική διεύθυνση <a href="contact.html"> Κείμενο </a>
Αρχείο εικόνας <a href="images/xania.jpg"> Κείμενο </a>
Αρχείο ήχου <a href="sounds/song.wav"> Κείμενο </a>
Αποστολή email <a href="mailto : [email protected]"> Κείμενο </a>
Άνοιγμα της σελίδας ή <a href="http://www.sch.gr" target="_blank"> Κείμενο </a>
του αρχείου σε νέο <a href="http://www.sch.gr" > <img src="school.jpg"></a>
παράθυρο
Υπερσύνδεσμοι που
ενεργοποιούνται πάνω σε
εικόνα
Παράδειγμα
<a href="https://www.google.gr" target=”_blank”> Google</a>
Αποτέλεσμα
<body>
Η λέξη που ακολουθεί είναι υπερσύνδεσμος
<br><br>
<a href="https://www.google.gr/"> Google </a>
<br><br>
που ανοίγει τη σελίδα της Google σε νέο
παράθυρο
</body>
Κριθαριώτη Ιωάννα ΠΕ19
Υπερσύνδεσμοι στην ίδια σελίδα
Μια σημαντική λειτουργία των υπερσυνδέσμων είναι η δυνατότητα που δίνουν για να μεταφερθούμε σε
διαφορετικά σημεία στην ίδια ιστοσελίδα. Η ετικέτα <a> στην περίπτωση αυτή διαμορφώνεται ως εξής:
Ορίζει τη θέση της λέξης όρου μέσα στην ιστοσελίδα <a name=”λέξη- όρος”>Λέξη-όρος-κείμενοο</a>
Ο υπερσύνδεσμος οδηγεί μέσα στην ίδια ιστοσελίδα <a href="#λέξη- όρος" > Υπερσύνδεσμος</a>
στο σημείο που βρίσκεται η λέξη όρος
Παράδειγμα
Μορφοποίηση υπερσυνδέσμων
Οι υπερσύνδεσμοι μπορούν να μορφοποιηθούν
με οποιαδήποτε CSS ιδιότητα (π.χ. color, font-family, background-color, κ.λ.π.).
ανάλογα με την κατάσταση στην οποία βρίσκονται
a:link - Σύνδεσμος στην αρχική του κατάσταση που δεν τον έχουμε ακόμη επισκεφτεί
a:visited - Όταν έχουμε επισκεφθεί το σύνδεσμο
a:hover - Όταν ο δείκτης του ποντικιού βρίσκεται πάνω από το σύνδεσμο
a:active - Ένας ενεργός σύνδεσμος (τη στιγμή που τον πατάμε)
Να θυμάστε ότι το
o το a:hover πρέπει να είναι μετά από τα a:link και a:visited
o το a:active πρέπει να είναι μετά το a:hover
a:link {color: red;} Παραδείγματα Η ιδιότητα text-decoration,
a:visited {color: green;} χρησιμοποιείται κυρίως για να
a:hover {color: hotpink;} a:link {text-decoration: none;} αφαιρέσουμε την υπογράμμιση
a:active {color: blue;} a:visited {text-decoration: none;} από τον υπερσύνδεσμο.
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
Ιδιότητα Τιμή Τι κάνει Παράδειγμα
text-decoration ορίζουμε τον τύπο της υπογράμμισης text-decoration: underline;
underline
overline
line-through
Κριθαριώτη Ιωάννα ΠΕ19
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
7. Υπερσύνδεσμοι
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
7. Υπερσύνδεσμοι
- 1 - 2
Pages: