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

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

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

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

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

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

Απάντηση:

<p>Νερό: H<sub>2</sub>O — Δύναμη: x<sup>2</sup></p>
<p>Ο <cite>Τίτλος Πηγής</cite> λέει: <q>ένα σύντομο απόσπασμα</q>.</p>
<blockquote>Μια μεγαλύτερη παράθεση, ως ξεχωριστή ενότητα με εσοχή.</blockquote>
<p>Τιμή: <del>10€</del> <ins>7€</ins></p>
<p>Δώσε την εντολή <code>print('Γεια')</code>.</p>
<pre><code>for i in range(3):
    print(i)</code></pre>

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

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

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

q vs blockquote

Ερώτηση: Ποια η διαφορά <q> από <blockquote>;

Απάντηση:

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

Σύνοψη: (ενδεικτική) <q>: σύντομο inline απόσπασμα (με εισαγωγικά). <blockquote>: μεγάλη παράθεση σε ξεχωριστό μπλοκ με εσοχή.

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

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

code, samp & pre

Ερώτηση: Τι κάνουν οι <code>, <samp> και πότε χρειάζεται το <pre>;

Απάντηση:

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

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

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

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

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

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

Απάντηση:

Ως προς το πλάτος: 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).

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