Λύσεις — Εφαρμογή 3 · Περιεχόμενο με σημασία (σελ. 23–25) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ
Λύσεις — Εφαρμογή 3 · Περιεχόμενο με σημασία (σελ. 23–25)
Ο κώδικας-λύση (σημασιολογική δομή) και ασκήσεις (σημασιολογικά στοιχεία, lang, em vs i, abbr). Γλώσσα HTML5.
Ο κώδικας-λύση της Εφαρμογής 3
Ερώτηση: Φτιάξτε σελίδα με σημασιολογική δομή (header/article/footer), γλώσσα, μια συντομογραφία και επισήμανση.
Απάντηση:
-
- <!DOCTYPE html>
-
Σημασιολογικό έγγραφο -
Το ιστολόγιό μου
-
-
Το ΠΣΔ είναι χρήσιμο.
-
- Η
lang="el-GR"δηλώνει γλώσσα· ταheader/article/footerδίνουν σημασία· το<abbr title>δίνει tooltip· το<mark>επισημαίνει.
Σύνοψη: (ενδεικτική) html lang="el-GR", δομή header/article/footer, για tooltip, για επισήμανση.
Κριτήρια αξιολόγησης:
- Κριτήριο: σημασιολογικά header/article/footer + lang + abbr/title + mark.
Σημασιολογικά στοιχεία
Ερώτηση: Τι πετυχαίνουμε με τα σημασιολογικά στοιχεία
Απάντηση:
- Δίνουν σημασία (τι είναι το κάθε τμήμα) χωρίς να αλλάζουν από μόνα τους τη μορφοποίηση.
- Ωφελούν τις μηχανές αναζήτησης, την ενσωμάτωση σε CMS και μας επιτρέπουν να στοχεύουμε τμήματα με CSS.
Σύνοψη: (ενδεικτική) Χαρακτηρίζουν τη σημασία τμημάτων (κεφαλίδα/άρθρο/υποσέλιδο) — καλύτερα για μηχανές αναζήτησης, CMS και CSS.
Κριτήρια αξιολόγησης:
- Κριτήριο: «σημασία, όχι μορφοποίηση» + όφελος (SEO/CMS/CSS).
Η παράμετρος lang
Ερώτηση: Τι δηλώνει η παράμετρος lang στην ετικέτα html (π.χ. lang="el-GR");
Απάντηση:
- Δηλώνει τη γλώσσα του περιεχομένου (
el=ελληνικά) και τη χώρα (GR). - Βοηθά τις μηχανές αναζήτησης να προτείνουν τη σελίδα σε χρήστες που ζητούν ελληνικό περιεχόμενο (και βοηθά την προσβασιμότητα).
Σύνοψη: (ενδεικτική) Τη γλώσσα (el) και χώρα (GR) του περιεχομένου· βοηθά μηχανές αναζήτησης & προσβασιμότητα.
Κριτήρια αξιολόγησης:
- Κριτήριο: γλώσσα-χώρα + όφελος αναζήτησης/προσβασιμότητας.
em vs i & abbr
Ερώτηση: Ποια η διαφορά από ; Τι κάνει το ;
Απάντηση:
- Και τα δύο εμφανίζουν πλάγια, αλλά το
<em>προσδίδει σημασιολογική έμφαση (και επιτρέπει διαφοροποίηση με CSS)· το<i>είναι μόνο οπτικό. - Το
<abbr title="…">ορίζει συντομογραφία με tooltip: όταν το ποντίκι σταθεί πάνω, εμφανίζεται η εξήγηση (μέσω της παραμέτρουtitle).
Σύνοψη: (ενδεικτική) : πλάγια με σημασία έμφασης· : πλάγια μόνο οπτικά. : συντομογραφία με tooltip.
Κριτήρια αξιολόγησης:
- Κριτήριο: σημασιολογία em vs οπτικό i + λειτουργία abbr/title (tooltip).
