Λύσεις — Εφαρμογή 4 · Περισσότερες μορφοποιήσεις (σελ. 26–28) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 4 · Περισσότερες μορφοποιήσεις (σελ. 26–28)

Ο κώδικας-λύση και ασκήσεις (sub/sup, q vs blockquote, code/samp/pre, γραμματοσειρές monospace/serif). Γλώσσα HTML5.


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

Ερώτηση: Γράψτε παραδείγματα με δείκτη/εκθέτη, σύντομο & μεγάλο απόσπασμα, διαγραφή/εισαγωγή και κώδικα.

Απάντηση:

  • Νερό: H2O — Δύναμη: x2

  • Ο Τίτλος Πηγής λέει: ένα σύντομο απόσπασμα.

  • Μια μεγαλύτερη παράθεση, ως ξεχωριστή ενότητα με εσοχή.
  • Τιμή: 10€ 7€

  • Δώσε την εντολή print('Γεια').

  • for i in range(3):
      print(i)

Σύνοψη: (ενδεικτική) sub/sup για δείκτη/εκθέτη, cite+q για αναφορά/σύντομο απόσπασμα, blockquote για μεγάλη παράθεση, del/ins για αλλαγές, code+pre για κώδικα.

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

  • Κριτήριο: σωστή χρήση sub/sup, q/blockquote, del/ins, code/pre.

q vs blockquote

Ερώτηση: Ποια η διαφορά από

;

Απάντηση:

  • <q>: σύντομο απόσπασμα μέσα στη ροή του κειμένου (ο browser προσθέτει εισαγωγικά).
  • <blockquote>: μεγαλύτερη παράθεση ως ξεχωριστή ενότητα με αυξημένη αριστερή εσοχή.

Σύνοψη: (ενδεικτική) : σύντομο inline απόσπασμα (με εισαγωγικά).

: μεγάλη παράθεση σε ξεχωριστό μπλοκ με εσοχή.

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

  • Κριτήριο: inline σύντομο (q) vs μπλοκ με εσοχή (blockquote).

code, samp & pre

Ερώτηση: Τι κάνουν οι , και πότε χρειάζεται το

;

Απάντηση:

  • <code>: αναφορά σε κώδικα/εντολές (monospace). <samp>: δείγμα εξόδου (π.χ. τερματικού, monospace).
  • Και τα δύο συμπτύσσουν τα κενά/αλλαγές γραμμής (κανόνας HTML). Για να διατηρηθεί η μορφή ενός μπλοκ κώδικα (κενά/γραμμές), το τυλίγουμε σε <pre>.

Σύνοψη: (ενδεικτική) : κώδικας/εντολές (monospace)· : δείγμα εξόδου. Για διατήρηση κενών/γραμμών μπλοκ κώδικα →

.

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

  • ΠΑΓΙΔΑ: code/samp δεν διατηρούν κενά· χρειάζεται
     για μπλοκ.

Κατηγορίες γραμματοσειρών

Ερώτηση: Πώς κατηγοριοποιούνται οι γραμματοσειρές; Δώστε παραδείγματα.

Απάντηση:

  • Ως προς το πλάτος: monospace (ίδιο πλάτος ανά χαρακτήρα — Courier, Consolas· καλή στοίχιση κώδικα) vs proportional (διαφορετικό πλάτος — Arial, Times).
  • Ως προς τη διακόσμηση: serif (με «πατούρες» — Times New Roman) vs sans-serif (χωρίς — Arial, Tahoma).

Σύνοψη: (ενδεικτική) Πλάτος: monospace (ίδιο, π.χ. Courier) vs proportional (Arial). Διακόσμηση: serif (Times) vs sans-serif (Arial).

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

  • Κριτήριο: οι δύο άξονες (πλάτος & διακόσμηση) + από 1 παράδειγμα.

 ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ