Λύσεις — Εφαρμογή 2 · Συμβολικό… κείμενο (σελ. 20–22) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 2 · Συμβολικό… κείμενο (σελ. 20–22)

Ο κώδικας-λύση (παράγραφοι, οντότητες, μορφοποίηση) και ασκήσεις κατανόησης (entities, χειρισμός κενών, strong vs b). Γλώσσα HTML5.

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

Ερώτηση: Φτιάξτε σελίδα με δύο παραγράφους, ένα σύμβολο €, μια αλλαγή γραμμής και έντονα/μικρά γράμματα.

Απάντηση:

<!DOCTYPE html>
<html>
  <head><title>Συμβολικό κείμενο</title><meta charset="UTF-8"></head>
  <body>
    <p>Η τιμή είναι 10&euro;.<br>Δωρεάν μεταφορικά!</p>
    <p><strong>Σημαντικό:</strong> ισχύει έως αύριο. <small>(όροι)</small></p>
  </body>
</html>

• Το € γίνεται €, το <br> αλλάζει γραμμή (χωρίς νέα παράγραφο), το <strong> δίνει έντονα, το <small> μικρά.

Σύνοψη: (ενδεικτική) Δύο <p>, η οντότητα € → €, <br> για αλλαγή γραμμής, <strong> για έντονα, <small> για μικρά.

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

• Κριτήριο: σωστές ετικέτες <p>/<br>/<strong>/<small> + η οντότητα €.

Οντότητες (entities)

Ερώτηση: Τι είναι οι οντότητες στην HTML και πώς γράφουμε τα σύμβολα <, >, &;

Απάντηση:

• Οντότητες: κωδικοί που ξεκινούν με & και τελειώνουν με ;, και μετατρέπονται σε σύμβολα.
• < → <, > → >, & → & (αυτά τα σύμβολα έχουν ειδική σημασία, γι' αυτό γράφονται ως οντότητες).
• Άλλα: € → €, © → ©,   → αδιάσπαστο κενό.

Σύνοψη: (ενδεικτική) Οντότητα = &όνομα; (ή &#κωδικός;) → σύμβολο. Ειδικά: < → <, > → >, & → &.

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

• Κριτήριο: μορφή &…; + οι 3 βασικές (< > &).

Χειρισμός κενών

Ερώτηση: Τι συμβαίνει με τα πολλαπλά κενά/αλλαγές γραμμής στον κώδικα HTML;

Απάντηση:

• Τα πολλαπλά διαστήματα, tab και αλλαγές γραμμής συμπτύσσονται σε ένα απλό διάστημα — δεν εμφανίζονται όπως στον κώδικα.
• Η αλλαγή γραμμής γίνεται αυτόματα ανάλογα με το πλάτος του παραθύρου. Για αλλαγή γραμμής χρησιμοποιούμε <br>, για διατήρηση κενών <pre>.

Σύνοψη: (ενδεικτική) Πολλά κενά/enter/tab → ένα διάστημα (αυτόματη αναδίπλωση). Αλλαγή γραμμής: <br>· διατήρηση κενών: <pre>.

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

• ΠΑΓΙΔΑ: τα κενά του κώδικα ΔΕΝ αποδίδονται 1:1· θέλεις <br> ή <pre>.
• Σημείωση: το βιβλίο (σελ. 21) γράφει ότι η αλλαγή γραμμής χωρίς αλλαγή παραγράφου γίνεται με την <hr>· η σωστή ετικέτα είναι η <br> (η <hr> εμφανίζει οριζόντια γραμμή, όπως λέει και το ίδιο στη σελ. 25).

strong vs b

Ερώτηση: Ποια η διαφορά των ετικετών <strong> και <b>; Πότε προτιμάμε CSS;

Απάντηση:

• Και οι δύο δίνουν έντονα γράμματα. Η διαφορά είναι σημασιολογική: το <strong> σημαίνει «σημαντικό» (νόημα), ενώ το <b> είναι καθαρά οπτικό (χωρίς νόημα).
• Για σύνθετες μορφοποιήσεις προτιμάμε CSS (η HTML ορίζει δομή/σημασία, το CSS εμφάνιση)· πολλές παλιές ετικέτες μορφοποίησης έχουν αποχαρακτηριστεί.

Σύνοψη: (ενδεικτική) Και οι δύο έντονα· <strong> έχει σημασία («σημαντικό»), <b> μόνο οπτικό. Σύνθετη μορφοποίηση → CSS.

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

• Κριτήριο: σημασιολογία strong vs οπτικό b + ρόλος CSS.