Δ.Π.Θ. Επεξεργασία Κειμένου - 1 Επεξεργασία Κειμένου Ένα πρόγραμμα σε γλώσσα HTML είναι ανεξάρτητο της μηχανής όπου θα εκτελεστεί. Δηλαδή αγνοούνται τα.

Παρουσίαση με θέμα: "Δ.Π.Θ. Επεξεργασία Κειμένου - 1 Επεξεργασία Κειμένου Ένα πρόγραμμα σε γλώσσα HTML είναι ανεξάρτητο της μηχανής όπου θα εκτελεστεί. Δηλαδή αγνοούνται τα."— Μεταγράφημα παρουσίασης:

1

2 Δ.Π.Θ. Επεξεργασία Κειμένου - 1 Επεξεργασία Κειμένου Ένα πρόγραμμα σε γλώσσα HTML είναι ανεξάρτητο της μηχανής όπου θα εκτελεστεί. Δηλαδή αγνοούνται τα κενά και οι νέες γραμμές με αποτέλεσμα ότι βλέπουμε στην οθόνη μας να μην εμφανίζεται το ίδιο και στον φυλλομετρητή. Ο κάθε φυλλομετρητής εμφανίζει τις σελίδες με διαφορετικό τρόπο που εξαρτάται από τις επιλογές του χρήστη (settings).

3 Δ.Π.Θ. Επεξεργασία Κειμένου - 2 Για τοποθετηθεί το κείμενο σωστά σε παραγράφους χρειάζεται το tag :. Το δεν είναι υποχρεωτικό. Η ιδιότητα ALIGN επιτρέπει να τοποθετήσουμε την αρχή της παραγράφου : Γράφοντας LEFT αριστερά Γράφοντας CENTER στο κέντρο Γράφοντας RIGHT στα δεξιά. Με το tag,, μπορούμε να σταματήσουμε μια γραμμή εκεί που θέλουμε. Όταν δεν θέλουμε να προκληθεί διακοπή γραμμής χρησιμοποιούμε το tag και το.

4 Δ.Π.Θ. Επεξεργασία Κειμένου - 3 Επικεφαλίδες Υπάρχουν 6 μεγέθη από το Η1, H2, H3, H4, H5, H6 (φθίνουσα σειρά μεγεθών). Δημιουργία ε πικεφαλίδων Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6 Heading

5 Δ.Π.Θ. Επεξεργασία Κειμένου - 4 Οριζόντιες γραμμές Manned Space Craft Manned Space Craft Soviet Vostok Voskhod Soyuz American Mercury Gemini Apollo Shuttle Το πρόγραμμα αυτό δίνει την ακόλουθη εικόνα 

6 Δ.Π.Θ. Επεξεργασία Κειμένου - 5

7 Δ.Π.Θ. Επεξεργασία Κειμένου - 6 Εμφάνιση διαμορφωμένου κειμένου Αν θέλουμε να εμφανίσουμε ένα ήδη διαμορφωμένο κείμενο π.χ. ένα πρόγραμμα σε γλώσσα C ή FORTRAN, χωρίς νέες παραγράφους και διακοπές μπορούμε να χρησιμοποιήσουμε το tag.

8 Δ.Π.Θ. Επεξεργασία Κειμένου - 7 Μεμονωμένα στοιχεία διαμόρφωσης • Εμφανίζει το περιεχόμενο σε μορφή Bold. This is in bold text • Εμφανίζει το περιεχόμενο σε μορφή italic. This is in italic text • Εμφανίζει το περιεχόμενο σε μορφή typewriter font. This is in TT>teletype text • Εμφανίζει το περιεχόμενο υπογραμμισμένο (underline). This text is underlined • Εμφανίζει το περιεχόμενο με μια γραμμή στο μέσο της. This is a strikethough example

9 Δ.Π.Θ. Επεξεργασία Κειμένου - 8 • Εμφανίζει το περιεχόμενο με τα μεγαλύτερα δυνατά σε μέγεθος γράμματα. This is big text • Εμφανίζει το περιεχόμενο με τα μικρότερα δυνατά σε μέγεθος γράμματα. This is small text • Εμφανίζει το περιεχόμενο με τη μορφή δείκτη. This is a SUB>subscript • Εμφανίζει το περιεχόμενο με τη μορφή εκθέτη. This is a superscript Η εμφάνιση όλων αυτών των παρεμβάσεων στο κείμενο, φαίνεται στην ακόλουθη εικόνα.

10 Δ.Π.Θ. Επεξεργασία Κειμένου - 9

11 Δ.Π.Θ. Επεξεργασία Κειμένου - 10 Το στοιχείο FONT Με το στοιχείο FONT μπορούμε να ελέγξουμε τη μορφή της εμφάνισης του κειμένου. Οι ιδιότητες του στοιχείου αυτού μπορεί να είναι οι FACE, SIZE, και COLOR. Η FACE ορίζει τη γραμματοσειρά ή τις γραμματοσειρές που θέλουμε να εμφανιστεί το κείμενο. Font Selection Example This is an example of font selection.

12 Δ.Π.Θ. Επεξεργασία Κειμένου - 11 Η SIZE ορίζει το μέγεθος των χαρακτήρων με τιμές από 1 μέχρι 7. Το μέγεθος μπορεί να είναι απόλυτο π.χ. SIZE=5, ή σχετικό π.χ. SIZE=+2. Η δεύτερη χρησιμοποιείται όταν υπάρχει το BASEFONT. Με την COLOR ορίζουμε το χρώμα των χαρακτήρων είτε με δεκαεξαδική μορφή είτε με τα τυπικά ονόματα των χρωμάτων. Π.χ.Π.χ. Παράδειγμα για Font Color Αυτό είναι κόκκινο Αυτό είναι πράσινο

13 Δ.Π.Θ. Επεξεργασία Κειμένου - 12 Δημιουργία ειδικών χαρακτήρων Αν χρειαστεί να προσθέσουμε ειδικούς χαρακτήρες στο κείμενό μας μπορούμε να το κάνουμε γνωρίζοντας οτι από την έκδοση 4.0 της HTML έχουν προταθεί κάποιοι ειδικοί χαρακτήρες που βρίσκονται στη διεύθυνση http://www.w3.org/TR/WD-entities. http://www.w3.org/TR/WD-entities Μερικά παραδείγματα : Γραφή Χαρακτήρας &reg ® &frac12 1/2 &divide ÷ &amp & &hearts § &diams … Aπό την έκδοση 4.01 έχουν προστεθεί και νέοι, όπως o &euro για το σύμβολο € (http://www.w3.org/TR/html401/sgml/entities.html)

14 Δ.Π.Θ. Επεξεργασία Κειμένου - 13 Cascading Style Sheets •Καθορίζουν το style, τη δομή και τη θέση των στοιχείων μέσα στο αρχείο •Κάνουν εφικτό το διαχωρισμό της εμφάνισης των δεδομένων και των ίδιων των δεδομένων •Σύνταξη •selector {property: value; property2: value2} •Όπου selector μπορεί να είναι: body, p, h1, … •Και property : το χαρακτηριστικό που θέλουμε να αλλάξουμε: π.χ, color, font-family, text-align

15 Δ.Π.Θ. Επεξεργασία Κειμένου - 14 Τρόποι εισαγωγής •Inline styles –Καθορίζει το style για συγκεκριμένα στοιχεία –Χρήση του της html –Μπορεί να καθορίσει πολλές ιδιότητες •Internal styles sheets –Ορίζεται μέσα στο με το –Επηρεάζει τα στοιχεία στα οποία αναφέρεται •External style sheets –Δημιουργία ξεχωριστού αρχείου css με το οποίο συνδέεται το html αρχείο –Ιδανικό όταν το ίδιο style sheet εφαρμόζεται σε περισσότερα από ένα αντικείμενα

16 Δ.Π.Θ. Επεξεργασία Κειμένου - 15 Inline styles This text does not have any style applied to it. This text has the font- size style applied to it, making it 20pt. This text has the font-size and color styles applied to it, making it 20pt. and blue.

17 Δ.Π.Θ. Επεξεργασία Κειμένου - 16 Internal style sheets em{ background-color: #8000ff; color: white } h1{ font-family: arial, sans-serif } p{ font-size: 14pt }

18 Δ.Π.Θ. Επεξεργασία Κειμένου - 17 External style sheets External Style Sheets <link rel = "stylesheet" type = "text/css" href = "styles.css">