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

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

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

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

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

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

Απάντηση:

<a href="https://www.example.com" target="_blank">Επίσκεψη</a>
<a href="mailto:[email protected]">Στείλτε email</a>
<a href="pages/about.html">Σχετικά</a>
<a href="#end">Στο τέλος</a>
<a href="https://example.com"><img src="logo.png" alt="Λογότυπο"></a>

a:hover { color: red; }

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

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

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

Το στοιχείο a & URL

Ερώτηση: Πώς φτιάχνουμε έναν σύνδεσμο και τι είναι το URL;

Απάντηση:

Με το στοιχείο <a href="διεύθυνση">κείμενο</a> — το περιεχόμενο γίνεται «θερμή περιοχή» (σύνδεσμος).
URL (Uniform Resource Locator): η διεύθυνση ενός πόρου στον Ιστό, που μπαίνει ως τιμή στην href.

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

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

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

Είδη τιμών href

Ερώτηση: Δώστε τέσσερα διαφορετικά είδη τιμών που μπορεί να πάρει η href.

Απάντηση:

Απόλυτο 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.

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