Νέες Τεχνολογίες στην Εκπαίδευση

Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης

Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.

Βασικά στοιχεία της HTML > Μορφοποίηση κειμένου Παράγραφος, στοίχιση(1/4) Για τη δημιουργία νέας παραγράφου στο κείμενο χρησιμοποιείτε τον κωδικό (ο κωδικός αυτός δεν έχει αντίστοιχο ). Οι αναγνώστες ιστοσελίδων αφήνουν μια κενή γραμμή μεταξύ των παραγράφων. 1

Παράγραφος, στοίχιση(2/4) Εξ ορισμού, η παράγραφος στοιχίζεται στ' αριστερά. Μπορείτε όμως να αλλάξετε τη στοίχιση χρησιμοποιώντας το όρισμα ALIGN στον κωδικό: : Στη θέση της λέξης LEFT μπορείτε να χρησιμοποιήσετε επίσης τις λέξεις: CENTER, JUSTIFY ή RIGHT. Στο παρόν κείμενο έχει χρησιμοποιηθεί η εντολή . 2

Παράγραφος, στοίχιση(3/4) Αν θέλουμε να αλλάξουμε γραμμή χωρίς να αρχίσουμε μια νέα παράγραφο (οπότε ο αναγνώστης ιστοσελίδων να μην αφήσει κενή γραμμή) χρησιμοποιούμε τον κωδικό . 3

Παράγραφος, στοίχιση(4/4) Δηλαδή, γράφοντας: Το Σύμπαν θεωρείται ότι έχει διασταλεί ξεκινώντας από ένα και μοναδικό σημείο. θα πάρουμε: Το Σύμπαν θεωρείται ότι έχει διασταλεί ξεκινώντας από ένα και μοναδικό σημείο. 4

Κενά μεταξύ λέξεων (1/2) Ο αναγνώστης ιστοσελίδων αναδιπλώνει αυτόματα το κείμενο για να χωράει στην οθόνη. Αν θέλετε ορισμένες λέξεις να εμφανίζονται στην ίδια γραμμή μπορείτε να χρησιμοποιήσετε τους κωδικούς και (δες όμως και τη χρήση του κωδικού στην επόμενη παράγραφο καθώς και τον κωδικό <PRE>). 5

Κενά μεταξύ λέξεων (2/2) Ο αναγνώστης ιστοσελίδων δεν αναγνωρίζει επιπλέον κενά μεταξύ λέξεων. Η χρήση του κωδικού επιτρέπει ακριβώς αυτό. Μπορεί να χρησιμοποιηθεί επίσης και για δημιουργία εσοχής στην αρχή της παραγράφου ή, ακόμα, στη θέση του κενού μεταξύ δύο λέξεων για να τις κρατήσει στην ίδια γραμμή (ο όρος NBSP σημαίνει no-break-space). 6

Επικεφαλίδες (1/3) Οι επικεφαλίδες είναι πολύ χρήσιμες για την οργάνωση της πληροφορίας στις ιστοσελίδες. Η HTML προσφέρει έξι επίπεδα επικεφαλίδων που ορίζονται ως <H1>, <H2> κ.λπ. (με τους αντίστοιχους </H1>, </H2> κ.λπ.) όπου ο H1 είναι ο μεγαλύτερος. Η επικεφαλίδα εμφανίζεται με έντονα γράμματα και υπάρχει μια κενή γραμμή πάνω και κάτω από αυτή. 7

Επικεφαλίδες (2/3) Στο παρακάτω κείμενο μπορείτε να δείτε τα επίπεδα των επικεφαλίδων: Επικεφαλίδα πρώτου επιπέδου Επικεφαλίδα δεύτερου επιπέδου Επικεφαλίδα τρίτου επιπέδου Επικεφαλίδα τέταρτου επιπέδου Επικεφαλίδα πέμπτου επιπέδου Επικεφαλίδα έκτου επιπέδου 8

Επικεφαλίδες (3/3) Οι επικεφαλίδες στοιχίζονται, εξ ορισμού, αριστερά. Αλλά μπορείτε να χρησιμοποιήσετε το όρισμα ALIGN στον κωδικό επικεφαλίδας. Για παράδειγμα, γράφοντας: <H3 ALIGN="RIGHT"> Δεξιά στοιχισμένη επικεφαλίδα</h3> ο αναγνώστης ιστοσελίδων θα δώσει: Δεξιά στοιχισμένη επικεφαλίδα 9

Προ-μορφοποιημένο κείμενο (1/4) Στην προ-μορφοποίηση ο αναγνώστης ιστοσελίδων παρουσιάζει το κείμενο που βρίσκεται ανάμεσα στους κωδικούς <PRE> και </PRE> όπως ακριβώς φαίνεται στον κειμενογράφο (με ό,τι κενά πληκτρολογήθηκαν). 10

Προ-μορφοποιημένο κείμενο (2/4) Σ' αυτή την περίπτωση το κείμενο παρουσιάζεται με γραμματοσειρά μονού διαστήματος (κάθε χαρακτήρας καταλαμβάνει τον ίδιο χώρο), π.χ. η γραμματοσειρά Courier. Η προ-μορφοποίηση είναι χρήσιμη για σύνταξη απλών πινάκων. Μη χρησιμοποιείτε μεγάλες γραμμές που δεν θα χωρούν στο παράθυρο του αναγνώστη ιστοσελίδων. 11

Προ-μορφοποιημένο κείμενο (3/4) Έτσι ο κώδικας: <HTML> <HEAD> <TITLE>Προ-μορφοποιημένο κείμενο </TITLE> </HEAD> <BODY> <PRE> ΤΙΤΛΟΣ ΣΚΗΝΟΘΕΤΗΣ ΧΩΡΑ Ο Νότος Σολάνας Αργεντινή - Γαλλία Πρόβα Ορχήστρας Φελλίνι Ιταλία Φαρενάιτ 451 Τρυφώ Γαλλία Αγγλία </PRE> </BODY> </HTML> 12

Προ-μορφοποιημένο κείμενο (4/4) θα εμφανίζεται ως: 13

Έντονα, πλάγια, υπογραμμισμένα και διαγραμμένα γράμματα (1/3) Για να δώσουμε έμφαση στο κείμενο μπορούμε να χρησιμοποιήσουμε τους κωδικούς <Β> για έντονα γράμματα, για πλάγια, για υπογραμμισμένα και <STRIKE> για να βάλετε μια γραμμή πάνω στα γράμματα (διαγραφή), με τους αντίστοιχους κωδικούς τέλους. 14

Έντονα, πλάγια, υπογραμμισμένα και διαγραμμένα γράμματα (2/3) Έτσι, το κείμενο: Αυτό το κείμενο είναι σε έντονα γράμματα, αυτό είναι σε πλάγια (Italics), αυτό είναι υπογραμμισμένο, <STRIKE> ενώ αυτό είναι διεγραμμένο </STRIKE> 15

Έντονα, πλάγια, υπογραμμισμένα και διαγραμμένα γράμματα (3/3) θα εμφανίζεται ως: Αυτό το κείμενο είναι σε έντονα γράμματα, αυτό είναι σε πλάγια (Italics), αυτό είναι υπογραμμισμένο, ενώ αυτό είναι διεγραμμένο 16

Εισαγωγή αναφοράς (Blockquote) (1/2) Με τον κωδικό <BLOCKQUOTE> (και </BLOCKQUOTE>) μπορείτε να παρουσιάσετε μια εκτεταμένη αναφορά, αυξάνοντας τα περιθώρια και από τις δυο μεριές της σελίδας, π.χ.: 17

Εισαγωγή αναφοράς (Blockquote) (2/2) Πυθαγόρειο Θεώρημα: Το τετράγωνο της υποτείνουσας ορθογωνίου τριγώνου ισούται με το άθροισμα των τετραγώνων των δύο καθέτων πλευρών. Ο κωδικός της παραγράφου μπορεί να χρησιμοποιηθεί στο εσωτερικό του <BLOCKQUOTE>. 18

Δείκτης, εκθέτης Για να γράψετε εκθέτη ή δείκτη χρησιμοποιείτε τους κωδικούς και , με τους αντίστοιχους κωδικούς τέλους: Ο κώδικας: 10 5 10 3 =10 8 θα δώσει: 10 5 10 3 =10 8 19

Γραμματοσειρές (1/9) Ο κύριος κωδικός είναι ο (και ο αντίστοιχος ) που μπορεί να πάρει ως ορίσματα τα FACE, SIZE και COLOR για το είδος, το μέγεθος και το χρώμα της γραμματοσειράς. 20

Γραμματοσειρές (2/9) Το όρισμα FACE παίρνει για τιμές το όνομα της γραμματοσειράς. Μπορείτε να καθορίσετε πάνω από μία γραμματοσειρά (χωρίζοντάς τες με κόμμα και κενό), για να μπορεί ο αναγνώστης ιστοσελίδων να χρησιμοποιήσει την επόμενη αν δεν είναι διαθέσιμη στον υπολογιστή η προηγούμενη (γι' αυτό προτείνεται μια από τις γραμματοσειρές να είναι κλασσική, όπως Arial). 21

Γραμματοσειρές (3/9) Για παράδειγμα, η πρόταση αυτή γράφτηκε με τη γραμματοσειρά Verdana. 22

Γραμματοσειρές (4/9) Το όρισμα SIZE μπορεί να πάρει τις τιμές 1 (μικρότερο) έως 7 (μεγαλύτερο). Τα 7 μεγέθη αντιστοιχούν σε γράμματα 8, 10, 12, 14, 18, 24 και 36 στιγμών (pt). Χρησιμοποιώντας +/- πριν τον αριθμό, μεγαλώνετε ή μικραίνετε τη γραμματοσειρά σας κατά τον αντίστοιχο αριθμό. 23

Γραμματοσειρές (5/9) Τέλος, το όρισμα COLOR παίρνει τιμές σε δεκαεξαδική μορφή που αντιστοιχούν σε ορισμένο χρώμα. Για παράδειγμα, #FF0000 αντιστοιχεί στο κόκκινο. Για ορισμένα βασικά χρώματα, υπάρχει και όνομα (γραμμένο σε πιο ανθρώπινη μορφή!) 24

Γραμματοσειρές (6/9) Ας γράψουμε τώρα ένα παράδειγμα χρησιμοποιώντας τα παραπάνω: Οι βασικοί δομικοί λίθοι της ύλης χωρίζονται σε δύο ομάδες: τα κουάρκ και τα λεπτόνια. 25

Γραμματοσειρές (7/9) Ο κώδικας είναι ο ακόλουθος: Ο ι βασικοί δομικοί λίθοι της ύλης χωρίζονται σε δύο ομάδες: τα κουάρκ και τα λεπτόνια. 26

Γραμματοσειρές (8/9) Μπορείτε όμως να καθορίσετε το μέγεθος της γραμματοσειράς για όλη την ιστοσελίδα σας χρησιμοποιώντας τον κωδικό <BASEFONT SIZE="3"> στην αρχή του κειμένου (μετά τον κωδικό<body>). 27

Γραμματοσειρές (9/9) Επίσης, μπορείτε να καθορίσετε το χρώμα του κειμένου σας σ' όλη την ιστοσελίδα σας με τη χρήση του ορίσματος TEXT στον κωδικό BODY: <BODY TEXT="#0000FF">. Οι δύο παραπάνω κωδικοί, λοιπόν, μας επιτρέπουν μια συνολική επιλογή μεγέθους και χρώματος γραμματοσειράς, ενώ με τον κωδικό FONT, και τα ορίσματά του COLOR και SIZE, κάνουμε τοπικές επιλογές (έως την εντολή ). 28

Χρώμα φόντου Τέλος, μπορείτε να προσθέσετε ένα χρώμα φόντου στην ιστοσελίδα σας με τη χρήση του ορίσματος BGCOLOR στον κωδικό BODY: <BODY BGCOLOR="lime">. 29

Άσκηση 1: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζεται στον αναγνώστη ιστοσελίδων το: 30

Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.