Σχεδιασμός και Ανάπτυξη Ιστοτόπων: Ηλεκτρονικό βιβλίο

Εφαρμογή 2: Συμβολικό… κείμενο
Το δεύτερο παράδειγμα εφαρμογής αφορά τον τρόπο που γράφουμε κείμενο και πως μπορούμε να
το εμπλουτίσουμε με σύμβολα. Στο πλαίσιο Πηγαίος κώδικας 2 παρουσιάζεται ο κώδικας της
δεύτερης εφαρμογής μας.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>

<html>
<head>
<title>Κείμενο με σύμβολα</title>
<meta charset="utf-8">
</head>
<body>

Δημιουργία ομάδων 
∀ ομάδα μαθητών υπάρχει ένας διαθέσιμος υπολογιστής.
Mια ομάδα δεν μπορεί να είναι ∅, πρέπει να συμμετέχουν
σε αυτή τουλάχιστο δύο μαθητές.
Έτσι κάθε μαθητής θα πρέπει να ∈ σε μία ομάδα,
ενώ κανένας μαθητής ∉ σε δύο ή περισσότερες ομάδες. 
Άρα, σε μία ομάδα της
τάξης θα ∈ τρεις μαθητές
μόνο αν το πλήθος των μαθητών της τάξης είναι περιττό.

▚     ▚     ▚
Καλοκαίρι στην πόλη
❤ πολύ τη θάλασσα και το κολύμπι. Σήμερα λοιπόν που έχει
☼ θα πάρω ένα από τα ⛴ που ξεκινούν από το ⚓ της
Θεσσαλονίκης, για να πάω σε κάποια από τις κοντινές ⛱ του
Θερμαϊκού. Δεν θα πάρω αυτοκίνητο για να μην βάλω ⛽. Θα πάρω
μαζί μου και μία ☂, μήπως ⛅ και ☔. Δεν θα πάρω
το ☎ μου, για να έχω την ησυχία μου. Το βράδυ θα επιστρέψω με
το τελευταίο ⛴, για να δω τον αγώνα ⚽ για τα
προκριματικά του κυπέλλου που θα δείξει η τηλεόραση.
</body>
</html>
Πηγαίος κώδικας 2: Ιστοσελίδα με παραγράφους, σύμβολα και στοιχειώδη μορφοποίηση
Ένα έγγραφο αποτελείται συνήθως στο μεγαλύτερο τμήμα του από κείμενο, το οποίο οργανώνεται
σε παραγράφους. Έτσι στο παράδειγμά μας χρησιμοποιούμε το στοιχείο παραγράφων (ετικέτες 
… ) για να καθορίσουμε τα όρια των τριών παραγράφων που απαρτίζουν το κείμενο (γραμμές
11-23, 25, 27, 28-35). Η κάθε παράγραφος αποτελεί μία μικρή ενότητα κειμένου.
Στον κώδικα παρατηρούμε επίσης την ύπαρξη κωδικών που ξεκινούν με το χαρακτήρα ampersand (
& ) και τελειώνουν με το χαρακτήρα colon ( ; ) (το ερωτηματικό). Οι κωδικοί αυτοί ονομάζονται
οντότητες (entities) και κατά την απόδοση του κώδικα στο φυλλομετρητή μετατρέπονται στα
αντίστοιχα σύμβολα. Ορισμένα σύμβολα έχουν ένα λογικό όνομα, όπως π.χ. € για το €, ενώ
άλλα σύμβολα διαθέτουν κωδικό. Τα πιο συχνά χρησιμοποιούμενα σύμβολα διαθέτουν και λογικό
26
όνομα και κωδικό στο δεκαδικό ή στο δεκαεξαδικό σύστημα αρίθμησης. Επαρκή αναφορά στις
οντότητες της HTML5 μπορούμε να βρούμε στον ιστότοπο του World Wide Web Consortium (W3C)
(http://dev.w3.org/html5/html-author/charref).
Κοιτάζοντας προσεκτικά τον κώδικα του παραδείγματος παρατηρούμε ότι υπάρχουν κάποια κενά
διαστήματα μεταξύ λέξεων και παραγράφων. Ανοίγοντας όμως το αρχείο του παραδείγματος με το
φυλλομετρητή μας, παρατηρούμε ότι τα διαστήματα αυτά δεν εμφανίζονται. Αυτό συμβαίνει διότι οι
χαρακτήρες αλλαγής γραμμής (Line Feed, LF, με κωδικό ASCII 10), οριζόντιου διαστήματος
(Horizontal Tab, HT, με κωδικό ASCII 9) και επιστροφής του δρομέα στην αρχή της γραμμής
(Carriage Return, CR, με κωδικό ASCII 13), είναι μη-εκτυπώσιμοι χαρακτήρες ελέγχου. Η γλώσσα
HTML προέρχεται από την Πρότυπη Γενικευμένη Γλώσσα Σήμανσης (Standard Generalized Markup
Language, SGML). Στις εφαρμογές της SGML η χρήση χαρακτήρων ελέγχου περιορίζεται για να
υπάρχει μεγαλύτερη πιθανότητα επιτυχούς ανταλλαγής πληροφοριών μεταξύ ετερογενών
συστημάτων μέσω ετερογενών δικτύων. Στην HTML μόνο οι τρεις προηγούμενοι χαρακτήρες
ερμηνεύονται και μόνο όταν αποτελούν περιεχόμενα του στοιχείου <pre> … </pre>.
Έτσι λοιπόν στην HTML η ύπαρξη συνεχόμενων μη εκτυπώσιμων χαρακτήρων, όπως οι στηλοθέτες
(tab), οι αλλαγές παραγράφου (enter/return) και τα διαστήματα (space) αντικαθίστανται από ένα απλό
διάστημα. Επομένως, όπως συμβαίνει και σε ένα λογισμικό κειμενογράφου, η αλλαγή γραμμής
γίνεται αυτόματα, ενώ παράγραφος θεωρείται ότι περικλείεται στις ετικέτες … (στον
κειμενογράφου πατούμε το πλήκτρο Enter για αλλαγή παραγράφου). Αλλαγή γραμμής, αλλά όχι
παραγράφου υλοποιείται με την ετικέτα <hr> (όπως όταν πατούμε Shift+Enter στον κειμενογράφο
μας) (γραμμές 12, 19). Παρατηρούμε επίσης ότι η γραμμή 27 που αποτελεί από μόνη της μία
παράγραφο έχει μεγαλύτερη απόσταση από την παράγραφο που ακολουθεί, σε σχέση με τη γραμμή
12 στην οποία απλά εισάγεται μια αλλαγή γραμμής. Η παράγραφος είναι μια ενότητα περιεχομένου
η οποία μπορεί με τις κατάλληλες οδηγίες να έχει τα δικά της περιθώρια και τη δική της θέση στη
ροή του κειμένου της ιστοσελίδας.
Τέλος, στη γραμμή 12 παρατηρούμε τις ετικέτες … που ορίζουν να εμφανιστεί
το κείμενο με έντονα γράμματα, όπως συμβαίνει και με τις ετικέτες … της γραμμής 27. Η
διαφορά έγκειται μόνο στη σημασιολογία, καθώς το στοιχείο strong δίνει ένα επιπλέον νόημα στο
κείμενο, το οποίο συνήθως εκμεταλλευόμαστε σε πολυπλοκότερα έγγραφα. Το κείμενο των γραμμών
20-22 γράφεται με μικρότερα γράμματα, λόγω της επισήμανσής του με τις ετικέτες …
. Πολυπλοκότερες βέβαια μορφοποιήσεις προτείνεται να γίνονται χρησιμοποιώντας τη
γλώσσα των Διαδοχικών Φύλλων Στυλ (Cascading Style Sheet, CSS), καθώς η μορφοποίηση με
ετικέτες της γλώσσας HTML έχει περιορισμούς, ενώ πολλές από τις παλαιότερες ετικέτες
μορφοποίησης έχουν πλέον αποχαρακτηριστεί, οπότε υπάρχει πιθανότητα να μην υποστηρίζονται
27
από μελλοντικές εκδόσεις των φυλλομετρητών.
Κλείνοντας πρέπει να τονίσουμε ότι αλλάζοντας το μέγεθος του παραθύρου του φυλλομετρητή,
αλλάζουν όπως είναι λογικό και τα σημεία αλλαγής γραμμών. Αυτό είναι το ζητούμενο. Η κάθε
ιστοσελίδα να "γεμίζει" το κενό παράθυρο του φυλλομετρητή με περιεχόμενο σύμφωνα με τις
οδηγίες μας, τις οποίες δίνουμε γράφοντας κώδικα. Η σύγχρονη τάση είναι το περιεχόμενο μιας
ιστοσελίδας να προσαρμόζεται αρμονικά σε κάθε μέγεθος οθόνης. Αυτός είναι ο στόχος της
προσαρμοστικής σχεδίασης, επίκαιρης λόγω της πληθώρας των τερματικών συσκευών που
χρησιμοποιούμε στις μέρες μας για την πρόσβασή μας στο περιεχόμενο του παγκόσμιου ιστού.
Εικόνα 7: Η Εφαρμογή 2 στο περιβάλλον του φυλλομετρητή