Λύσεις — Εφαρμογή 5 · Εμφάνιση… με στυλ — Εισαγωγή στη CSS (σελ. 29–34) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 5 · Εμφάνιση… με στυλ — Εισαγωγή στη CSS (σελ. 29–34)

Ο κώδικας-λύση (inline CSS) και ασκήσεις (σύνταξη κανόνα, τιμές χρώματος, εμφάνιση ετικετών ως κείμενο). Γλώσσες HTML5+CSS.

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

Ερώτηση: Μορφοποιήστε με inline CSS μια επικεφαλίδα (κεντρ., λευκά σε μπλε φόντο) και μια παράγραφο (courier, 120%, περίγραμμα).

Απάντηση:

<h1 style="text-align: center; color: white; background-color: blue;">Τίτλος</h1>
<p style="font-family: courier; font-size: 120%; border: 1px solid black;">
  Κείμενο με στυλ.
</p>

• Κάθε κανόνας: ιδιότητα: τιμή;. Οι κανόνες χωρίζονται με ; και μπαίνουν όλοι στην τιμή της style.

Σύνοψη: (ενδεικτική) Με inline style: text-align/color/background-color στην h1· font-family/font-size/border στην p. Κανόνες «ιδιότητα: τιμή;» χωρισμένοι με ;.

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

• Κριτήριο: σωστή σύνταξη style + οι ιδιότητες στο σωστό στοιχείο.

Σύνταξη κανόνα CSS

Ερώτηση: Ποια είναι η σύνταξη ενός κανόνα CSS μέσα στην παράμετρο style;

Απάντηση:

• Κάθε κανόνας: ιδιότητα: τιμή;.
• Πολλοί κανόνες μαζί: style="ιδιότητα1: τιμή1; ιδιότητα2: τιμή2;" — η σειρά δεν έχει σημασία, χωρισμός με ;.
• Η style επηρεάζει μόνο το στοιχείο στο οποίο γράφεται.

Σύνοψη: (ενδεικτική) Κανόνας = ιδιότητα: τιμή; · πολλοί χωρίζονται με ; (σειρά αδιάφορη)· επηρεάζει μόνο το στοιχείο του.

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

• ΠΑΓΙΔΑ: κάθε κανόνας τελειώνει με ; (ερωτηματικό, semicolon)· η style επηρεάζει μόνο το στοιχείο της.
• Σημείωση: το βιβλίο ονομάζει το ; «colon»· ο σωστός αγγλικός όρος είναι semicolon (colon είναι η άνω-κάτω τελεία :).

Τιμές χρώματος

Ερώτηση: Με πόσους τρόπους δίνουμε ένα χρώμα στη CSS; Δώστε παράδειγμα για το κόκκινο.

Απάντηση:

• Τρεις τρόποι: (α) ονομαστικά — red, (β) RGB — rgb(255,0,0) (τιμές 0–255 για κόκκινο/πράσινο/μπλε), (γ) δεκαεξαδικά — #FF0000.
• Π.χ. το πράσινο: green / rgb(0,255,0) / #00FF00.

Σύνοψη: (ενδεικτική) Ονομαστικά (red), RGB rgb(255,0,0) με τιμές 0–255, hex #FF0000. (Κόκκινο και στους 3 τρόπους.)

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

• Κριτήριο: οι 3 τρόποι + σωστό παράδειγμα κόκκινου.

Εμφάνιση ετικετών ως κείμενο

Ερώτηση: Πώς εμφανίζουμε μια ετικέτα HTML (π.χ. </html>) ως ΚΕΙΜΕΝΟ σε μια σελίδα;

Απάντηση:

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

Σύνοψη: (ενδεικτική) Γράφουμε το < ως < (π.χ. </html>), ώστε ο φυλλομετρητής να το δείξει ως κείμενο αντί να το ερμηνεύσει ως ετικέτα.

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

• Κριτήριο: χρήση < + εξήγηση (αλλιώς εκτελείται ως ετικέτα).