Λύσεις — Εφαρμογή 9 · Σύνδεσμοι — υπερσύνδεσμοι (σελ. 46–48) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 9 · Σύνδεσμοι — υπερσύνδεσμοι (σελ. 46–48)

Ο κώδικας-λύση και ασκήσεις (a href & URL, είδη href απόλυτο/σχετικό/#id/mailto, target, ψευδο-κλάσεις a:hover). Γλώσσες HTML5+CSS.

Ο κώδικας-λύση της Εφαρμογής 9

Ερώτηση: Φτιάξτε σύνδεσμο προς εξωτερικό site (νέα καρτέλα), σύνδεσμο e-mail, εικόνα-σύνδεσμο και αλλαγή χρώματος στο hover.

Απάντηση:

• Επίσκεψη
• Στείλτε email
• Σχετικά
• Στο τέλος
• 
• a:hover { color: red; }

Σύνοψη: (ενδεικτική) με target="_blank" (νέα καρτέλα), mailto:, σχετική διαδρομή, αγκύριο #end, εικόνα-σύνδεσμος· CSS a:hover.

• Κριτήριο: σωστό , target, mailto, εικόνα μέσα σε , a:hover.

Σύνοψη: (ενδεικτική) κείμενο κάνει το περιεχόμενο σύνδεσμο. URL = η διεύθυνση του πόρου (τιμή της href).

Κριτήρια αξιολόγησης:

• Κριτήριο: + έννοια URL (διεύθυνση πόρου).

• Απόλυτο URL: https://example.com/p.html.
• Σχετική διαδρομή: pages/about.html.
• Αγκύριο σε σημείο της σελίδας: #section2 (πάει στο στοιχείο με id="section2").
• E-mail: mailto:[email protected].

Σύνοψη: (ενδεικτική) Απόλυτο URL, σχετική διαδρομή, αγκύριο #id, mailto:.

Κριτήρια αξιολόγησης:

• Κριτήριο: ≥3 σωστά είδη href (απόλυτο/σχετικό/#id/mailto).

target & καταστάσεις

Ερώτηση: Τι κάνει η παράμετρος target="_blank"; Ποιες οι ψευδο-κλάσεις κατάστασης συνδέσμου;

Απάντηση:

• target="_blank": ανοίγει τον προορισμό σε νέα καρτέλα/παράθυρο (η αρχική σελίδα μένει ανοιχτή).
• Ψευδο-κλάσεις: a:link (μη επισκεμμένος), a:visited (επισκεμμένος), a:hover (ποντίκι από πάνω), a:active (τη στιγμή του κλικ).

Σύνοψη: (ενδεικτική) target="_blank": νέα καρτέλα. Καταστάσεις: a:link, a:visited, a:hover, a:active.

Κριτήρια αξιολόγησης:

• Κριτήριο: _blank=νέα καρτέλα + οι 4 ψευδο-κλάσεις (ή τουλάχιστον hover/visited).