HTML: Η ΓΛΩΣΣΑ ΤΟΥ WEB  Απλά αρχεία.  Περιέχουν εντολές και κείμενο μαζί. BROWSER.  Οι εντολές απευθύνονται στον BROWSER.  Καθορίζουν τον τρόπο εμφάνισης.

Παρουσίαση με θέμα: "HTML: Η ΓΛΩΣΣΑ ΤΟΥ WEB  Απλά αρχεία.  Περιέχουν εντολές και κείμενο μαζί. BROWSER.  Οι εντολές απευθύνονται στον BROWSER.  Καθορίζουν τον τρόπο εμφάνισης."— Μεταγράφημα παρουσίασης:

1 HTML: Η ΓΛΩΣΣΑ ΤΟΥ WEB  Απλά αρχεία.  Περιέχουν εντολές και κείμενο μαζί. BROWSER.  Οι εντολές απευθύνονται στον BROWSER.  Καθορίζουν τον τρόπο εμφάνισης του κειμένου της σελίδας.  Δημιουργούνται με οποιονδήποτε συντάκτη κειμένου.

2 Παράδειγμα HTML αρχείου ΠΑΡΑΔΕΙΓΜΑ ΠΑΡΑΔΕΙΓΜΑ Τα αρχεία σε HTML είναι απλά αρχεία και μπορούν να κατασκευαστούν από οποιονδήποτε συντάκτη κειμένου. Τέλος.

3 Eτικέτες (tags) HTLM  Είναι σημάδια που χρησιμοποιεί η HTML για να καθορίσει τον τρόπο εμφάνισης του ενδιάμεσου κειμένου.  Οι ετικέτες συνήθως συντάσσονται σε ζεύγη, π.χ.: ….  H ετικέτα καθορίζει ότι το κείμενο που ακολουθεί, θα εμφανιστεί ως επικεφαλίδα πρώτου μεγέθους.  H ετικέτα καθορίζει το τέλος του κειμένου επικεφαλίδας.

4 Η HTML είναι αναπτυσσόμενη γλώσσα και αλλάζει συνεχώς.  Πχ. σε παλιότερη έκδοση της HTML, η ετικέτα συντασσόταν χωρίς (βλέπε παράδειγμα).  Σήμερα συντάσσεται ως...  Η επιβάλλει αλλαγή παραγράφου.  Στην HTML οι εντολές μπορούν να γραφτούν με μικρά και/ή με κεφαλαία γράμματα.

5 Σχόλια στην HTML  Σχόλιο είναι οτιδήποτε βρίσκεται ανάμεσα στα:  Τα σχόλια δεν εμφανίζονται στην σελίδα.  Χρησιμοποιούνται από τους συγγραφείς σελίδων ως επεξηγήσεις.

6 Eξαιρέσεις & Eκπλήξεις  Οι Browsers δεν υποστηρίζουν όλες τις ετικέτες.  Ετικέτες που δεν υποστηρίζονται, απλώς παραβλέπονται.  Ορισμένες ετικέτες μπορεί να πάψουν να υποστηρίζονται.  Συνέχεια προστίθενται νέες δυνατότητες στην HTML.

7 ΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣ  Κάθε HTML έγγραφο, πρέπει να έχει ένα τίτλο, κυρίως για λόγους αναγνώρισης. ΚΕIΜΕΝΟ ΤΙΤΛΟΥ  Υποστηρίζονται επίσης επικεφαλίδες έξη μεγεθών. ΚΕΙΜΕΝΟ ΕΠΙΚΕΦΑΛΙΔΑΣ (n = 1,2,…,6)

8 Παράμετροι ετικετών  Η παράμετρος ALIGN Κείμενο "Κεντράρει" την επικεφαλίδα. Οι δυνατές επιλογές είναι: –ALIGN = LEFT (Αριστερή στοίχιση) –ALIGN = CENTER (Κεντράρισμα) –ALIGN = RIGHT (Δεξιά στοίχιση) Εάν παραληφθεί ισοδυναμεί με ALIGN = LEFT

9 Η ετικέτα νέας παραγράφου Κείμενο παραγράφου Επίσης υποστηρίζεται η παράμετρος ALIGN πχ Κείμενο παραγράφου Με προφανή (αντίστοιχα) αποτελέσματα.

10 Σύνδεσμοι με άλλα έγγραφα (links)  H ισχύς της HTML προέρχεται από την δυνατότητα σύνδεσης με άλλα αρχεία.  Τα σημεία όπου βρίσκονται οι σύνδεσμοι εμφανίζονται υπογραμμισμένα και είναι συνήθως χρώματος μπλέ.  Η ετικέτα για δημιουργία συνδέσμων είναι: … και συντάσσεται με διάφορους παραμέτρους. Το γράμμα Α προέρχεται από την λέξη Anchor (Άγκυρα)

11 Σύνδεσμοι...  Η δημιουργία ενός συνδέσμου με κάποιο αρχείο, πχ με το αρχείο: grades,γίνεται ως: Κείμενο Κείμενο Κείμενο  Ο Browser θα εμφανίσει το Κείμενο υπογραμμισμένο και μπλέ. Κείμενο Μόλις ο χρήστης κάνει "κλικ" πάνω στον σύνδεσμο (με το "ποντίκι") τότε συνδέεται με το αρχείο grades (που βρίσκεται στον ίδιο κατάλογο με το τρέχον αρχείο).

12 Σύνδεσμοι...  Εάν το αρχείο που "σκοπεύει" ο σύνδεσμος δεν είναι στον ίδιο κατάλογο με το τρέχον αρχείο, τότε καθορίζεται από ένα σχετικό path, πχ: Κείμενο ή ή Κείμενο  Στις παραπάνω περιπτώσεις υποτίθεται ότι το τρέχον και τα υπόλοιπα αρχεία βρίσκονται στον ίδιο εξυπηρετητή (server).

13 Σύνδεσμοι σε άλλους servers  Σύνδεσμοι με έγγραφα σε διαφορετικό server απαιτούν πλήρη διεύθυνση, πχ: Bαθμοί Η πλήρης διεύθυνση ονομάζεται URL. (Universal Resource Locator) Οι διευθύνσεις έχουν το παρακάτω γενικό σχήμα: xxxx://host.domain/path/filename όπου xxxx είναι: http, gopher και news, για αρχεία σε WWW servers, Gopher servers, Usenet servers.

14 Σύνδεσμοι για Email Η σύνταξη: Στείλτε τα σχόλιά σας στον διδάσκοντα ξεκινά την διαδικασία αποστολής Email προς τον χρήστη ggidas@gmail.com Εμφανίζεται δε ως: Στείλτε τα σχόλιά σας στον διδάσκοντα

15 Σύνδεσμοι με καθορισμένα σημεία εντός αρχείων. Υπάρχει δυνατότητα για συνδέσεις σε συγκεκριμμένο σημείο εντός κάποιου αρχείου. Πχ. η σύνδεση στο αρχείο zoo στο σημείο όπου υπάρχει το κείμενο lion  Εντός του zoo στο σημείο lion βάζουμε μια διεύθυνση: lion  Στο τρέχον αρχείο γράφουμε: κείμενο

16 Σύνδεσμοι μέσα στο ίδιο αρχείο Συνδέσεις σε σημεία του τρέχοντος αρχείου είναι δυνατές. Πχ για την σύνδεση στο σημείο όπου υπάρχει το κέιμενο: Fortran  Βάζουμε διεύθυνση: Fortran  O σύνδεσμος υλοποιείται ως: κείμενο

17 ΛΙΣΤΕΣ Για να εμφανιστεί μια λίστα πχ: Apples Oranges Χρειάζεται η ετικέτα: (unordered list) και η ετικέτα: (list item) Η σύνταξη έχει ως: Apples Oranges

18 ΛΙΣΤΕΣ Για να εμφανιστεί μια λίστα πχ: 1. Apples 2. Oranges 3. Grapes Χρειάζονται οι ετικέτες: και (OL = Ordered List) Apples Oranges Grapes

19 Λίστες -Παράμετροι Η ετικέτα έχει παραμέτρους.  Ταξινομεί με αριθμούς  Ταξινομεί με κεφαλαία γράμματα  Ταξινομεί με μικρά γράμματα  Ταξινομεί με κεφαλαίους Λατινικούς αριθμούς  Ταξινομεί με μικρούς Λατινικούς αριθμούς ισοδυναμεί με

20 Λίστες -Παράμετροι Πχ οι εντολές: Apples Oranges> Παράγουν το παρακάτω αποτέλεσμα. Α. Apples B. Oranges Οι δε εντολές: Apples Oranges> Ι. Apples ΙΙ. Oranges κλπ...

21 Λίστες -Παράμετροι  H παράμετρος START χρησιμοποιείται με την ετικέτα για να ξεκινήσει την αρίθμηση από οποιοδήποτε αριθμό.  Η παράμετρος VALUE χρησιμοποιείται με την ετικέτα για να αποφύγει κάποιους αριθμούς. Πχ οι εντολές: Apples Oranges Grapes Bananas Παράγουν το παρακάτω αποτέλεσμα.

22 3. Apples 4. Oranges 7. Grapes 8. Bananas Λίστες -Παράμετροι Εάν αντικαταστήσουμε την ετικέτα με την θα έχουμε: C. Apples D. Oranges G. Grapes H. Bananas Λίστες -Παράμετροι Εάν αντικαταστήσουμε την ετικέτα με την θα έχουμε: iii. Apples iv. Oranges vii. Grapes viii. Bananas

23 Eτικέτες επεξεργασίας κειμένου  … Έντονη (bold) γραφή.  … Πλάγια (Italic) γραφή.  … Γραφή γραφομηχανής.  … Εκθέτης.  … Δείκτης.  … Υπογράμμιση.  … Αύξηση μεγέθους.  … Μείωση μεγέθους

24 Παραδείγματα  Το νέο βιβλίο του B. Jones έχει τίτλο … Το νέο βιβλίο του B. Jones έχει τίτλο …  Το νέο βιβλίο του B. Jones έχει τίτλο … Το νέο βιβλίο του B. Jones έχει τίτλο …  Το νέο βιβλίο του B. Jones έχει τίτλο … Το νέο βιβλίο του B. Jones έχει τίτλο …  Το νέο βιβλίο του B. Jones έχει τίτλο … Το νέο βιβλίο του B. Jones έχει τίτλο …  Το νέο βιβλίο του B. Jones έχει τίτλο … Το νέο βιβλίο του B. Jones έχει τίτλο …

25 Κεντράρισμα, αλλαγή γραμμής... … Κεντράρει στην σελίδα οτιδήποτε υπάρχει ανάμεσα. Επιβάλλει αλλαγή γραμμής Τοποθετεί μια οριζόντια γραμμή Έχει παραμέτρους Καθορίζει το πάχος Καθορίζει το πλάτος απόλυτa ή σε ποσοστό της σελίδας. Καθορίζει την θέση της γραμμής ή = CENTER ή = RIGHT (αριστερά, κέντρο ή δεξιά) Μη σκιασμένη γραμμή.

26 Εικόνες στην HTML Η HTML υποστηρίζει δύο ειδών αρχεία εικόνων  GIF  JPEG  Ολοι οι ψηφιακοί σαρωτές (scanners), υποστηρίζουν τουλάχιστον μιά από τις δύο μορφές.  Yπάρχουν προγράμματα που μετασχηματίζουν άλλες μορφές σε gif ή jpeg.  Οι εικόνες μπορούν να χρησιμοποιηθούν και σαν σύνδεσμοι, και να εμφανίζονται σε διαφορετικές διαστάσεις (μεγενθυμένες ή σε σμίκρυνση).

27 H ετικέτα H ετικέτα Για ένθεση εικόνας που περιέχεται στο αρχείο πχ. globe.gif χρησιμοποιείται η ετικέτα :  Για αλλαγή του μεγέθους της εικόνας γίνεται χρήση των παραμέτρων WIDTH και HEIGHT:  Η εικόνα θα έχει πλάτος 200 και ύψος 100 pixels.  Η εικόνα θα έχει πλάτος το 50% και ύψος το 60% των αντίστοιχων διαστάσεων της σελίδας.  Eάν καθορισθεί μόνο μία εκ των δύο παραμέτρων, η άλλη υπολογίζεται αυτόματα για ισότροπη αλλαγή.

28 Εικόνες - Σύνδεσμοι Για να χρησιμοποιηθεί η εικόνα του αρχείου univ.gif ως σύνδεσμος για την διεύθυνση www.uoi.gr γράφουμε:  Κείμενο δίπλα σε εικόνα ευθυγραμμίζεται αυτόματα με το κάτω μέρος της, εκτός εάν καθοριστεί αλλοιώς με την παράμετρο ALIGN= (top, middle,bottom). Κείμενο...

29 Φόντο σελίδας  … Το φόντο της σελίδος καθορίζεται από την εικόνα του αρχείου: stone.gif  … Καθορίζει το χρώμα του φόντου. color = #RRGGBB όπου RR, GG, BB διψήφιοι δεκαεξαδικοί αριθμοί για τις εντάσεις των χρωμάτων R,G,B (Κόκκινο, Πράσινο, Μπλε). Τα ψηφία του δεκαεξαδικού είναι: 0123456789ABCDEF Πχ : κάνει το φόντο της σελίδας κόκκινο.

30 Επιπλέον εντολές ... Καθορίζει το χρώμα των χαρακτήρων του ενδιάμεσου κειμένου  … όπου εάν J = 1,2,…,7 καθορίζει το μέγεθος των χαρακτήρων, και εάν J=+3, x=-2 … (με πρόσημο) την σχετική τους διαφορά από το τρέχον μέγεθος.

31 Ετικέτα BASEFONT  J = 1,2,…,7 Καθορίζει το προεπιλεγμένο (default) μέγεθος και χρώμα των χαρακτήρων για όλη την σελίδα. Εισάγεται στο … μέρος της σελίδας.

32 Πίνακες The Bradys Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby The Bradys Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby

33 Επεξηγήσεις  Ξεκινά τον σχηματισμό ενός πίνακα Σηματοδοτεί το τέλος του πίνακα  Τοποθετεί μια λεζάντα από πάνω Σηματοδοτεί το τέλος της λεζάντας  Ξεκινά τον σχηματισμό μιας σειράς Σηματοδοτεί το τέλος της σειράς  Ξεκινά τον σχηματισμό ενός κελιού Σηματοδοτεί το τέλος του κελιού ... Όπως και το έντονο και κέντρο Table Row Table Data

34 The Bradys Agnes Wilma George Gwen Skippy Alvin Harry Melvin Joe The Bradys Agnes Gwen Harry Wilma SkippyAlvin George MelvinJoe

35 Επεξηγήσεις  BORDER="3" Κανονίζει το πάχος του περιγράμματος  CELLSPACING="1" Κανονίζει το πάχος του περιγράμματος του κελιού  CELLPADDING="1"> Κανονίζει το περιθώριο μέσα στο κελί Agnes Κανονίζει την θέση του κειμένου στο κελί. Δυνατές τιμές: "left", "center", "right"

36 ΣΥΝΘΕΤΟΙ ΠΙΝΑΚΕΣ Partial Subtotals 1999-2000 Tax 2001 TOTAL

37 Strange 1999-2000 2001 Tax Partial Subtotals TOTAL ΠΑΡΑΔΕΙΓΜΑ

38 EΙΚΟΝΕΣ σε ΠΙΝΑΚΕΣ Photos in Table Many Photos

39 Many Photos

40 Πλαίσια (frames) Δυνατότητα παρουσιάσεων με χρήση πολλών παραθύρων

41 Ποιοί υποστηρίζουν τα πλαίσια Νetscape Internet Explorer Στην HTML 4.0 τα πλαίσια έχουν ενσωματωθεί. Σήμερα χρησιμοποιούνται ευρύτατα.

42 Συνδεδεμένα Παράθυρα Νέα παράμετρος της ετικέτας  TARGET = "όνομα νέου παραθύρου" Παράδειγμα ΒΑΘΜΟΙ  Ανοίγει ένα νέο παράθυρο με το όνομα new, χωρίς να κλείσει το τρέχον.  Η παρουσίαση της σελίδας HREF="grades.html" θα εμφανιστεί στο νέο παράθυρο.

43 ΠΑΡΑΔΕΙΓΜΑ HI there You can see your grades here Math 19 Phys 18 Comp 16 Lite 19 ΑΡΧΕΙΟ grades.html Η πρώτη σελίδα εμφανίζεται ως: HI there You can see your grades here

44 Math 19 Phys 18 Comp 16 Lite 19 HI there You can see your grades here

45 Η ετικέτα BASE  Εισάγεται στο … μέρος της σελίδας.  Έχει ως αποτέλεσμα να εμφανίζονται στο καθορισμένο παράθυρο, όλες οι σελίδες που σχετίζονται με δεσμούς στους οποίους η παράμετρος TARGET έχει παραλειφθεί.

46 Math 19 Phys 18 Comp 16 Lite 19 Αρχείο Mathematics Professor: C. F.Gauss Physics Professor: A. Einstein Comp. Science Professor: A. Turing Literature Professor: S. Bellow Περιεχόμενα math.txt phys.txt comp.txt lite.txt

47 Ετικέτες: FRAMESET & FRAME Με τις ετικέτες FRAMESET καθορίζουμε την δομή του πλαισίου, που απαρτίζεται από διαφορετικά παράθυρα. Με τις ετικέτες FRAME καθορίζουμε τα περιεχόμενα των διαφορετικών παραθύρων του πλαισίου.

48 FRAMESET Συντάσσεται με μία εκ των δύο παραμέτρων  COLS = " εύρος στήλης1, εύρος στήλης2,…"  ROWS = " ύψος σειράς1, ύψος σειράς2,…" Τα εύρη (ύψη) καθορίζονται είτε: Σε αριθμό pixels, ή Σε ποσοστό κάλυψης ή Με ένα αστερίσκο (*) για αυτόματη ρύθμιση.

49  Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας σελίδας σε τρεις στήλες. Η πρώτη έχει εύρος 110 pixels, η δεύτερη έχει εύρος ίσον προς το 30% της σελίδας, και η τρίτη προσαρμόζεται στο εναπομένον εύρος. 110 270 520

50  Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας σελίδας σε τρεις σειρές. Η πρώτη έχει ύψος 110 pixels, Η δεύτερη έχει ύψος ίσον προς το 30% της σελίδας, και Η τρίτη προσαρμόζεται στο εναπομένον ύψος. 110 270 520

51 Κάθε μέρος (στήλη ή σειρά) της διαμέρισης είναι ένα διαφορετικό παράθυρο. ΣΗΜΑΝΤΙΚΟ Τα παράθυρα αυτά μπορούν να έχουν ονόματα.

52 FRAME Για κάθε στήλη (ή σειρά) πρέπει να υπάρχει μια ετικέτα τύπου FRAME που θα καθορίζει το περιεχόμενο της διαμέρισης. Χωρίζεται η σελίδα σε δύο στήλες. Η πρώτη καταλαμβάνει τα 30% του εύρους της σελίδας και τα υπόλοιπα 70% η δεύτερη.

53 Τα περιεχόμενα της πρώτης στήλης καθορίζονται από το αρχείο grades.html που ορίζεται μέσω της παραμέτρου SRC : Τα περιεχόμενα της δεύτερης στήλης καθορίζονται από το αρχείο tex8.gif που επίσης ορίζεται μέσω της παραμέτρου SRC : Παρατηρήστε την επιπλέον παράμετρο name="new", που ονομάζει το παράθυρο της δεύτερης στήλης new. Αυτό το όνομα μπορεί να χρησιμοποιηθεί σε συνδυασμό με την TARGET παράμετρο της ετικέτας

54 Math 19 Phys 18 Comp 16 Lite 19 grades.html

55 Math 19 Phys 18 Comp 16 Lite 19

56 Math 19 Phys 18 Comp 16 Lite 19 Mathematics Professor: C. F.Gauss

57 Math 19 Phys 18 Comp 16 Lite 19 Physics Professor: A. Einstein

58 Math 19 Phys 18 Comp 16 Lite 19 Comp. Science Professor: A. Turing

59 Math 19 Phys 18 Comp 16 Lite 19 Literature Professor: S. Bellow

60 Επιπλέον παράμετροι  option = AUTO, NO, YES  Απαγορεύει την μεταβολή της διαμέρισης από το χρήστη  Κανονίζει το κατακόρυφο και οριζόντιο περιθώριο

61 Ετικέτες Ετικέτες  Τοποθετούνται μεταξύ … Μηχανές Αναζήτησης  Πληροφορούν τις "Μηχανές Αναζήτησης" (MA) Οι ΜΑ ψάχνουν συνέχεια στον Ιστό και δημιουργούν βάσεις δεδομένων που συνδέουν τις σελίδες με θεματικά αντικείμενα, λέξεις κλειδιά, ονόματα συγγραφέων κλπ  Δίνουν εντολές στον Browser Υπάρχει ένα περιορισμένο σύνολο εντολών που γίνεται δεκτό μέσω των ετικετών.

62 Ετικέτες... XXX παίρνει διάφορες τιμές όπως: description keywords generator copyright expires author YYY είναι κείμενο

63 Παραδείγματα  Περιγράφει τα περιεχόμενα της σελίδας   Καθορίζει σχετικές λέξεις "κλειδιά"   Πληροφορεί για τον κατασκευαστή της σελίδας 

64 Παραδείγματα  Πληροφορεί για το copyright της σελίδας   Ημερομηνία διαγραφής από την βάση των μηχανών αναζήτησης   Πληροφορεί για το συγγραφέα της σελίδας 

65 Με ΧΧ και με αντίστοιχο ΥΥ expires Wed, 26 Feb 1977 08:21:37 GMT pragma no-cache refresh 2; URL= http://www.cs.uoi.gr/ set-cookie cookievalue=2; path=/ window-target _top content-type text/html; charset=iso-8859-7 Ετικέτες Ετικέτες

66 Παραδείγματα Εντέλει τον Browser να μην αποθηκεύσει την σελίδα ούτε καν προσωρινά. Σε χρόνο 2 sec "φορτώνει" το καθορισμένο URL

67 Παραδείγματα Φέρνει την σελίδα σε πρώτο πλάνο. Εάν πχ υπάρχουν frames η σελίδα "απελευθερώνεται" και καταλαμβάνει όλο το παράθυρο. Πληροφορεί τον Browser για το σύνολο χαρακτήρων

68 Κίνηση Στο αρχείο file1.html, υπάρχει η ετικέτα: Στο αρχείο file2.html, υπάρχει η ετικέτα: Κ.Ο.Κ....

69 Μεταφορά στον Παγκόσμιο Ιστό

70 Ενέργειες...  Δημιουργούμε το σύνολο των σελίδων και τις τοποθετούμε σε ένα κατάλογο έστω με το όνομα present  Το αρχείο της κεντρικής σελίδας πρέπει να ονομαστεί: index.html ή index.htm  Σε κάποιο Η/Υ του τμήματος με Solaris λειτουργικό δημιουργούμε έναν κατάλογο: public_html με δικαιώματα 755

71  Μεταφέρουμε τον κατάλογο present εντός του public_html  Όλα τα σχετικά αρχεία και οι κατάλογοι πρέπει να έχουν δικαιώματα 755  Εάν το login όνομα του χρήστη είναι: csst0188, τότε η διεύθυνση της αρχικής σελίδας για την εν λόγω παρουσίαση είναι: www.cs.uoi.gr/~csst0188/present/ Ενέργειες...

72

73 Cascading Style Sheets (CSS) Ποιόν σκοπό εξυπηρετούν ?  Τα "Στυλιστικά Φύλλα" σκοπό έχουν να επιδρούν στην εμφάνιση των σελίδων με ένα συνεπή, εύκολο και ολοκληρωμένο τρόπο.  Διευκολύνουν το συγγραφικό έργο.  Συντελούν στην συστηματική τήρηση κανόνων αισθητικής ομοιομορφίας.

74 Υποστήριξη  Netscape Navigator 4.0  Microsoft Internet Explorer 4.0  Emacs  Arena  Amaya... και συνεχώς η λίστα αυξάνει.

75 Εισαγωγικά Παραδείγματα CSS Example H1 {font-size: 32pt; color: red} H2 {font-size: 24pt; color: blue} Η ετικέτα … Τοποθετείται μεταξύ …

76 Επεξηγήσεις  Η ετικέτα επιτρέπει την διαμόρφωση των παραμέτρων των ετικετών της HTML.  H1 {font-size: 32pt; color: red} Καθορίζει ότι η ετικέτα θα χρησιμοποιεί γραμματοσειρά μεγέθους 32 στιγμών και χρώματος κόκκινου.  H2 {font-size: 24pt; color: blue} Αντίστοιχα για την ετικέτα

77 Στυλιστική Σύνταξη TAG { Ιδιότητα_1: τιμή; Ιδιότητα_2: τιμή; … } Όπου TAG οποιοδήποτε όνομα HTML ετικέτας, πχ :  Η1  BODY  P Απομένει να καθοριστούν οι ιδιότητες και οι αντίστοιχες τιμές.

78 Παραδείγματα Ιδιοτήτων … P { text-indent: 3em ; color: red; font-size: 18pt }  Καθορίζει ότι για την παράγραφο ( … ), η εσοχή θα είναι 3 φορές το μέγεθος της γραμματοσειράς.  Το χρώμα της γραμματοσειράς κόκκινο.  Το μέγεθος της γραμματοσειράς 18 στιγμών.

79 Κατηγορίες Είναι δυνατόν να δημιουργήσουμε διάφορες κατηγορίες διαμόρφωσης για την ίδια ετικέτα. Δηλαδή η ίδια ετικέτα μπορεί να έχει περισσότερα του ενός στυλ. Παράδειγμα:  H1.norm { color: #0000FF; font-size: 24pt }  H1.enh { color: #FF2288; font-size: 32pt } Classes

80 Στο παράδειγμα κατασκευάστηκαν δύο κατηγορίες για την ετικέτα Η1.  norm  enh Θα μπορούν δε να χρησιμοποιούνται ως εξής: Εισαγωγή ΚΕΦΑΛΑΙΟ VI Η και η

81  Οι κατηγορίες μπορούν να ορίζονται και ξεχωριστά, χωρίς την παρουσία κάποιας ετικέτας HTML. Πχ:.norm { color: #0000FF; font-size: 24pt }.enh { color: #FF2288; font-size: 32pt } Θα μπορούν δε να χρησιμοποιούνται ως εξής: Εισαγωγή ΚΕΦΑΛΑΙΟ VI

82 Ένας εναλλακτικός τρόπος για τον καθορισμό του στυλ είναι ο ID επιλογέας (ID selector).  #pib {color: black; font-size: 40pt } Χρησιμοποιείται δε ως:  Εισαγωγή Είναι προτιμητέα η χρήση των κατηγοριών

83 Ετικέτες σε συνάφεια Contextual selectors Παράδειγμα: P EM { background: yellow } Το παραπάνω στυλ ερμηνεύεται ως εξής: Κείμενο που είναι εντός και των δύο ετικετών: … κείμενο … Θα έχει κίτρινο φόντο. Προσοχή: Όχι κόμμα !!!

84 Παράδειγμα P EM { background: yellow } Παράδειγμα This is an emphasized piece of text and it is treated specially Isn't it great ? INDEED !!!

85 Παράδειγμα This is an emphasized piece of text and it is treated specially Isn't it great ? INDEED !!!Εμφάνιση

86 Ομαδοποίηση Είναι δυνατόν να ορίσει κανείς κοινές ιδιότητες για μια ομάδα ετικετών. Π.χ: H1, H2, H3 {color: red; font-family:sans-serif} font-family:sans-serif} Grouping Ο παραπάνω κανόνας επιβάλει ότι για τις ετικέτες, και το χρώμα θα είναι κόκκινο και η γραμματοσειρά τύπου sans-serif.

87 Ψευδοκατηγορίες Οι δηλώσεις:  A:link {color: red}  A:active { color: blue; font-size: 125% }  A:visited {color: green; font-size: 85% } Έχουν ως αποτέλεσμα:  Οι δεσμοί είναι κόκκινοι  Οι ενεργοί δεσμοί μπλε και 125% μεγαλύτεροι  Οι χρησιμοποιημένοι δεσμοί πράσινοι και 85% μικρότεροι Pseudo-classes Anchor pseudo-classes

88 Πρώτη Γραμμή - Πρώτο γράμμα Οι δηλώσεις:  P:first-line {font-variant: small-caps; font-weight: bold}  P:first-letter {font-size: 300% ; float: left} Επηρεάζουν αντίστοιχα την πρώτη γραμμή και το πρώτο γράμμα μιας παραγράφου.

89 Ιδιότητες  Font  Color & Background  Text  Box Ορίζονται ιδιότητες σχετικά με τις παρακάτω έννοιες

90 FONT  Font-Family  Font-Style  Font-Variant  Font-Weight  Font-Size  Font

91 Font-Family Font-family: Name1, Name2, …, Generic1, Generic2, … P {Font-Family: Arial, Times, serif} Name1, Name2 είναι ονόματα γραμματοσειρών Generic1, … είναι γενικός τύπος γραμματοσειρών Δυνατές τιμές για τα Generic1, … είναι: serif Times sans-serif Arial cursiveZapf-Chancery fantasyWestern monospace Courier

92 Font-Style  Font-Style: XXX Όπου: XXX μπορεί να είναι:  normal  italic  oblique H1 { font-style: oblique } P { font-style: normal }

93 Font-Variant  Font-Variant: XXX Όπου: XXX μπορεί να είναι:  normal  small-caps H1 { font-variant:small-caps }

94 Font-Weight  Font-Weight: XXX Όπου: XXX μπορεί να είναι:  normal  bold bolder lighter  100 200 … 900 H1 { font-weight: 800 } P { font-weight: 300 }

95 Font-Size  Font-Size: XXX Όπου: XXX μπορεί να είναι:  xx-small x-small small medium large x- large xx-large  larger smaller  Aριθμός σε pt ή in (points/inches)  Αριθμός σε % P { font-size: 90% }

96 Font  Font: XXX Όπου: XXX μπορεί να είναι:  font-style font-variant font-weight  font-size/line-height P { font: italic bold 12pt/14pt Times, serif }

97 Επιπλέον... Περαιτέρω πληροφορίες και περιγραφή μπορεί να αναζητηθούν στο Word Wide Web (WWW). Ορισμένες χρήσιμες διευθύνσεις είναι:  http://www.w3.org/  http://netspace.students.brown.edu/users/dwb/www-authoring.html  http://www.wnetc.com/technical/html.html  http://oneworld.wa.com/htmldev/devpage/dev-page1.html Yπάρχουν πολλά βιβλία για την HTML, αλλά λόγω της φύσης της (συνεχώς ανανεώνεται) η καλύτερη (πιο σύγχρονη) ενημέρωση βρίσκεται στον παγκόσμιο ιστό.