Εισαγωγή στην γλώσσα υπερκειμένου HTML 1
Βασικές έννοιες 2
3 Yπερκείμενο - Υπερσύνδεσμος - HTML Το δομικό χαρακτηριστικό του WWW είναι το υπερκείμενο (hypertext), δηλαδή ένα αρχείο που εκτός από απλό κείμενο περιέχει και υπερσυνδέσμους με τους οποίους μπορεί κανείς να μεταβεί ανάμεσα σε διάφορα άλλα έγγραφα Ο υπερσύνδεσμος αποτελείται από: ένα ορατό τμήμα κειμένου, το οποίο είναι συνήθως υπογραμμισμένο ένα μη ορατό μέρος το οποίο περιέχει πληροφορία για το πού (διεύθυνση, τμήμα κειμένου) θα βρεθεί ο πόρος πληροφορίας (δεδομένα, φωνή, video) που αντιστοιχεί στο υπογραμμισμένο κείμενο Η HTML είναι μια απλή γλώσσα που χρησιμοποιείται για τη δημιουργία εγγράφων υπερκειμένου
4 Σχεδιασμός και Οργάνωση Ιστοσελίδων Γραμμική οργάνωση ιεραρχική οργάνωση δικτυωτή οργάνωση
5 Τρόποι δημιουργίας ιστοσελίδων απλοί συντάκτες (editors) κειμένου (π.χ. το notepad των Windows), επεξεργαστές κειμένου (π.χ. το Microsoft Word), ειδικοί συντάκτες κώδικα HTML (HTML editors), οι οποίοι έχουν ενσωματωμένες αρκετές λειτουργίες της HTML όπως χρωματισμός των ετικετών της HTML (π.χ. το notepad++ των Windows), Συντάκτες ιστοσελίδων (όπως το Dreamweaver, frontppage, το Amaya, αλλά και το SeaMonkey που αποτελεί ενσωματωμένο συντάκτη HMΤL σε φυλλομετρητή)
Ο συντάκτης ΗΤΜL Amaya -1 6
7 Ο συντάκτης ΗΤΜL Amaya -2 Μενού επιλογών: όπου ο χρήστης μπορεί να προσπελάσει κάθε δυνατή επιλογή του εργαλείου. Γραμμή διευθύνσεων: όπου ο χρήστης μπορεί να προσπελάσει μια ιστοσελίδα ή ένα αρχείο είτε στο διαδίκτυο είτε τοπικά στον υπολογιστή του. Ουσιαστικά πρόκειται για την γραμμή διευθύνσεων που έχει κάθε φυλλομετρητής Εργαλεία επεξεργασίας: Πρόκειται για την βασική εργαλειοθήκη που αφορά την δημιουργία, αποθήκευση, εκτύπωση κ.λπ. του αρχείου. Ενσωματώνει μεταξύ άλλων εργαλεία για αναίρεση ενεργειών, αντιγραφή και επικόλληση αλλά και ορθογραφικό έλεγχο. Εργαλεία μορφοποίησης: Πρόκειται για την κύρια και εκτεταμένη εργαλειοθήκη σχετικά με την μορφοποίηση του κειμένου της ιστοσελίδας, την δημιουργία πινάκων και υπερσυνδέσμων, την ενσωμάτωση εικόνων κ.λπ. Ενσωματώνει μεταξύ άλλων εργαλεία για την εισαγωγή ειδικών χαρακτήρων, μαθηματικών συμβόλων κ.λπ. Χώρος εργασίας: Ο χώρος εργασίας αποτελεί τον χώρο επεξεργασίας της ιστοσελίδας. Από το μενού Views μπορούμε να επιλέξουμε διάφορες προβολές του χώρου εργασίας. Συνίσταται η χρήση της ταυτόχρονης προβολής και επεξεργασίας σε κατάσταση WYSIWIG και προβολής και επεξεργασίας σε HTML κώδικα (μενού Views, επιλογή: Show source ).
8 Ο συντάκτης ΗΤΜL Amaya -3 Είναι διαθέσιμος στην παρακάτω διεύθυνση: http://www.w3.org/amaya/user/bindist.html
9 Η γλώσσα HTML Η γλώσσα HTML πήρε το όνομά της από τα αρχικά των λέξεων Hyper Text Markup Language (Γλώσσα Χαρακτηρισμού Υπερκειμένου). Η HTML είναι μια γλώσσα χαρακτηρισμού που δίνει στους φυλλομετρητές τη δυνατότητα της ανάγνωσης. Πρόκειται για γλώσσα περιγραφής της δομής ενός εγγράφου και όχι της πραγματικής του παρουσίασης. Είναι με λίγα λόγια, μέθοδος κωδικοποίησης των δεδομένων για μια κατάλληλη παρουσίασή τους στο WWW. Η κωδικοποίηση των δεδομένων γίνεται με την χρήση ετικετών (tags). Στην συνέχεια παρουσίαση αυτή την αναλαμβάνουν οι φυλλομετρητές οι οποίοι βασίζονται στη περιγραφόμενη από την HTML δομή.
Δημιουργία της δομής HTML εγγράφου Ένα HTML έγγραφο αποτελείται από δύο βασικές ενότητες: HEAD BODY καθώς και κάποιες πληροφορίες για την έκδοση της HTML 10
Σχόλια - Ετικέτα σχολίων Σύνταξη: <!--Σχόλιο--> Χρήση: Διευκόλυνση των προγραμματιστών για να σημειώνουν ενότητες ή άλλες πληροφορίες όπως η ταυτότητά τους ή τα πνευματικά τους δικαιώματα Σημείωση: Τα σχόλια δεν εμφανίζονται στον browser αλλά μόνο στον πηγαίο (source) κώδικα 11
Βασική Μορφοποίηση κειμένου 12
Δημιουργία Επικεφαλίδων Ενοτήτων Σύνταξη: <Ηx χαρακτηριστικά> Περιεχόμενο </Ηx> x: παίρνει τιμές από 1μέχρι 6. Με H1 δηλώνεται η σημαντικότερη/μεγαλύτερη επικεφαλίδα χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Περιεχόμενο: αυτό που φαίνεται στον browser Χρήση: Δημιουργία των έξι επικεφαλίδων σε ιεραρχική ταξινόμηση 13
Καθορισμός παραγράφων Σύνταξη: <P χαρακτηριστικά> Περιεχόμενο </P> χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Περιεχόμενο: αυτό που φαίνεται στον browser Σημειώσεις: μια ετικέτα παραγράφου ισοδυναμεί με δύο αλλαγές γραμμής Δεν έχει νόημα η σύνταξη <P>...<P>...</P>... </P> σε μια γραμμή Το </P> είναι προαιρετικό αλλά συνίσταται η χρήση του Χρήση: Καθορισμός παραγράφων 14
Αλλαγή γραμμών κειμένου Σύνταξη: <BR χαρακτηριστικά> χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Σημείωση: Δεν υπάρχει </ΒR> Χρήση: Δημιουργία κενής γραμμής. Τοποθετείται είτε σε καινούργια γραμμή ή στο τέλος μιας γραμμής 15
Ζωηρό, πλάγιο και υπογραμμισμένο κείμενο Ζωηρό κείμενο Σύνταξη: <Β χαρακτηριστικά> Περιεχόμενο </Β> Πλάγιο κείμενο Σύνταξη: <Ι χαρακτηριστικά> Περιεχόμενο </Ι> Υπογραμμισμένο κείμενο Σύνταξη: <U χαρακτηριστικά> Περιεχόμενο </U> Σημειώσεις: Ο κώδικας θα πρέπει να είναι συμμετρικός δηλαδή κάθε σετ ετικετών να είναι τοποθετημένο μέσα στο επόμενο σετ ετικετών: <Β><Ι><U> Περιεχόμενο </U></Ι></Β> Δεν έχει σημασία το ποιο σετ ετικετών βρίσκεται στο εξωτερικό των υπόλοιπων 16
Περιθώρια και κενά διαστήματα Σύνταξη: <BLOCKQUOTE χαρ/στικά> Περιεχόμενο </ BLOCKQUOTE > Χρήση: Δημιουργεί σε μια σελίδα περιθώρια, δεξιά και αριστερά Σημείωση: Τα blockquotes μπορούν να τοποθετηθούν το ένα μέσα στο άλλο διαδοχικά περισσότερα από τρία επίπεδα blockquotes είναι υπερβολικά 17
Δημιουργία μη διατεταγμένης λίστας Σύνταξη: <UL χαρ/στικά> Περιεχόμενο </ UL > Περιεχόμενο: <LI> στοιχείο της λίστας Χρήση: Δημιουργεί μια λίστα με κουκκίδες Σημείωση: Για την δημιουργία μιας μη διατεταγμένης λίστας χρησιμοποιούμε δύο ετικέτες (UL και LI) To </LI> είναι προαιρετικό υπάρχει η δυνατότητα για λίστα μέσα σε λίστα όποιο στοιχείο δεν έχει LI δεν έχει κουκκίδα 18
Δημιουργία διατεταγμένης λίστας Σύνταξη: <ΟL χαρ/στικά> Περιεχόμενο </ ΟL > Περιεχόμενο: <LI> στοιχείο της λίστας </LI> Χρήση: Δημιουργεί μια αριθμημένη λίστα Σημειώσεις: Για την δημιουργία μιας διατεταγμένης λίστας χρησιμοποιούμε δύο ετικέτες (OL και LI) To </LI> είναι προαιρετικό υπάρχει η δυνατότητα για λίστα μέσα σε λίστα όποιο στοιχείο δεν έχει LI δεν είναι αριθμημένο 19
Αλλαγή γραμμών κειμένου Σύνταξη: <ΗR χαρακτηριστικά> χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Σημείωση: Δεν υπάρχει </ΗR> Χρήση: Δημιουργία οριζόντιων γραμμών για διαχωρισμό ενοτήτων ενός εγγράφου 20
Στοίχιση ενοτήτων κειμένου Σύνταξη: <DIV χαρακτηριστικά> Περιεχόμενο </DIV > Χαρακτηριστικά: align = center, [χρήση: στοίχιση στο κέντρο] align = left, [χρήση: στοίχιση αριστερά] align = right, [χρήση: στοίχιση δεξιά] align = justify, [χρήση: πλήρης στοίχιση] Χρήση: Δημιουργεί δομή που καθορίζει ο χρήστης σε επίπεδα τμημάτων στο έγγραφο 21
Δημιουργία υπερσυνδέσμου Σύνταξη: <a href= Διεύθυνση">Περιεχόμενο</a> Διεύθυνση (το κρυφό μέρος του υπερσυνδέσμου): http://. [χρήση: απόλυτη σύνδεση ιστοσελίδας] file:///c:/...[χρήση: απόλυτη σύνδεση αρχείου από τον σκληρό δίσκο]../../... [χρήση: σχετική σύνδεση] Περιεχόμενο: το φανερό μέρος του υπερσυνδέσμου Σημείωση: Υπάρχουν δύο τρόποι για δημιουργία υπερσυνδέσμου Απόλυτη σύνδεση: Σύνδεση με ολόκληρη την διεύθυνση URL Σχετική σύνδεση: Χρησιμοποιείται για συνδέσεις με τον τοπικό διακομιστή, από έγγραφο σε έγγραφο ή από κατάλογο σε κατάλογο 22
Προσθήκη χρώματος σε HTML έγγραφο 23
Μετατροπή RGB σε Δεκαεξαδικά Χρώματα Ένα RGB (κόκκινο-πράσινο-μπλε) χρώμα με τιμές: R -> A στο δεκαεξαδικό σύστημα) G ->B στο δεκαεξαδικό σύστημα) B -> C στο δεκαεξαδικό σύστημα) σαν δεκαεξαδικό χρώμα έχει τιμή: #ABC R: 181 -> Β5 στο δεκαεξαδικό σύστημα) G: 156 -> 9C στο δεκαεξαδικό σύστημα) B: 17 -> 11στο δεκαεξαδικό σύστημα Το αντίστοιχο δεκαεξαδικό χρώμα είναι: #B59C11 Σημείωση: γιαναβρωταr, G, B χρησιμοποιώ ένα πρόγραμμα για γραφικά (π.χ. Adobe Photoshop) 24
Προσθήκη χρώματος στο φόντο Σύνταξη: <BODY bgcolor= τιμή χρώματος > τιμή χρώματος: υπάρχουν δύο τρόποι κατά όνομα -136 χρώματα (τα ονόματα υπάρχουν στο http://www.molly.com/molly/webdesign/136_colors.html) δεκαεξαδικό χρώμα: α) μετατρέποντας ένα RGB σε δεκαεξαδικό χρώμα ή β) χρησιμοποιώντας την παλέτα των 216 ασφαλών χρωμάτων (http://www.molly.com/molly/webdesign/colorchart.html) κατά όνομα: <BODY bgcolor= black > δεκαεξαδικό χρώμα: <BODY bgcolor= 000000 > 25
Προσθήκη χρώματος στο κείμενο Προεπιλεγμένο χρώμα κειμένου Σύνταξη: <BODY text = τιμή χρώματος > Xρώμα για συγκεκριμένο τμήμα κειμένου Σύνταξη: <FONT color= τιμή χρώματος > κείμενο < /FONT > 26
Χρώματα συνδέσεων Σύνταξη: <body link="χρώμα1" alink="χρώμα2" vlink="χρώμα3"> χρώμα 1: προεπιλεγμένο χρώμα σύνδεσης χρώμα 2: χρώμα ενεργής σύνδεσης χρώμα 3: χρώμα σύνδεσης που έχουμε επισκεφθεί <body link="#ff0099" alink="yellow" vlink="magenta"> 27
HTML και Εικόνες 28
Προσθήκη εικόνας σε μια σελίδα Σύνταξη: <IMG χαρακτηριστικά> Χαρακτηριστικά: src= διεύθυνση_εικόνας/όνομα_εικόνας width= πλάτος_εικόνας _σε pixels " height="ύψος_εικόνας_σε pixels " alt= περιγραφή_εικόνας align= τιμή_στοίχισης [τιμές στοίχισης είναι: left, right, center] Σημειώσεις: Δεν υπάρχει </IMG> Οι εικόνες πρέπει να είναι βελτιστοποιημένες για χρήση στο Web έτσι ώστε να διασφαλίζεται η ομαλή και γρήγορη φόρτωσή τους στον browser Είναι πολύ σημαντικό να χρησιμοποιείτε τι ακριβές πλάτος και ύψος μιας εικόνας 29
Προσθήκη εικόνας σε μια σελίδα <img src="box.gif" width="32" height="32" alt="κόκκινος Κύβος" align="center"> 30
Επίπλευση μιας εικόνας Επίπλευση μιας εικόνας είναι η δυνατότητα του κειμένου να αναδιπλώνεται ελεύθερα γύρω από μια εικόνα Βήματα: τοποθετώ την εικόνα πάνω από το κείμενο στοιχίζω την εικόνα οριζόντια [αριστερά: align= left ήδεξιά: align= right ) <img src="box.gif" alt="κόκκινος Κύβος" align="left" width="32" height="32"> <p>επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο </p> 31
Προσθήκη οριζόντιου/κατακόρυφου διαστήματος Χρησιμοποιούμε τα χαρακτηριστικά: hspace= τιμή του διαστήματος σε pixels [οριζόντιο διάστημα] vspace= τιμή του διαστήματος σε pixels [κατακόρυφο διάστημα] <img src="box.gif" alt="κόκκινος Κύβος" align="left" width="32" height="32" hspace="20" vspace="40"> <p>επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο </p> 32
Εικόνα σαν υπερσύνδεσμος σε άλλη σελίδα Σύνταξη: <a href= Διεύθυνση σελίδας"><img χαρακτηριστικά></a> <a href="sld001.htm"><img src="box.gif" alt="κόκκινος Κύβος" align="left" width="32" height="32"> </a> Σημείωση: Όταν μια εικόνα είναι υπερσύνδεσμος, αυτό θα πρέπει να είναι προφανές Πολλοί browsers τοποθετούν γύρω από την εικόνα-υπερσύνδεσμο ένα περίγραμμα. Για να το εξαλείψουμε χρησιμοποιούμε το χαρακτηριστικό border με τιμή 0 στην δήλωση της εικόνας. 33 <a href="sld001.htm"><img src="box.gif" alt="κόκκινος Κύβος" align="left" border="0" width="32" height="32"> </a>
Προσθήκη μιας εικόνας στο Φόντο Σύνταξη: <BODY background= διεύθυνση_εικόνας/όνομα_εικόνας > <body background="box.gif"> 34
Χρήση πινάκων για σχεδιασμό σελίδων 35
Γενικά Χρήση πινάκων Στην HTML οι πίνακες δεν χρησιμοποιούνται μόνο για την διάταξη κάποιων στοιχείων σε μια σελίδα, αλλά Κυρίως για την δημιουργία ενός πλέγματος πάνω στο οποίο οι σχεδιαστές δημιουργούν την σελίδα Για την δημιουργία ενός πίνακα χρησιμοποιούνται οι παρακάτω ετικέτες Δημιουργία ενός πίνακα: <TABLE χαρακτηριστικά>περιεχόμενο </TABLE> Καθορισμός μιας γραμμής: <TR χαρακτηριστικά>περιεχόμενο </TR> Καθορισμός μιας στήλης: <TD χαρακτηριστικά>περιεχόμενο </TD> Ένας πίνακας στην απλούστερη δομή (1 στήλη x1 γραμμή) του συντάσσεται ως εξής: 36 <table> <tr> <td></td> </tr> </table>
Δημιουργία πίνακα σταθερού πλάτους Χρήση: μέγιστος έλεγχος πάνω σε έναν πίνακα, καθορίζοντας επακριβώς το πλάτος του και των εσωτερικών κελιών του <table width="770"> <tr> <td width="200"></td> <td width="570"></td> </tr> </table> Σημείωση: Όταν θέλουμε η σελίδα να εμφανίζεται σωστά σε ανάλυση οθόνης 800x600 pixels, καθορίζουμε το πλάτος του πίνακα 770 pixels Επίσης καλό είναι για έναν πίνακα που ελέγχει την διάταξη ολόκληρης της σελίδας να τον κεντράρουμε στο κέντρο με την χρήση της ετικέτας <DIV align= center > </DIV> 37
Δημιουργία δυναμικού πίνακα Χρήση: αναδίπλωση του περιεχομένου του πίνακα ανάλογα με το ποσοστό του διαθέσιμου χώρου και την ανάλυση της οθόνης χρήσιμο για πίνακες με κείμενο και λίγες εικόνες <table width="100%"> <tr> <td width="30%"></td> <td width="70%"></td> </tr> </table> 38
Κατάργηση περιγραμμάτων Σύνταξη: με χρήση του χαρακτηριστικού border= 0 Χρήση: δημιουργία πλέγματος σχεδίασης <table width="100%" border="0"> <tr> <td width="30%"></td> <td width="70%"></td> </tr> </table> 39
Ρύθμιση οριζόντιας κατακόρυφης στοίχισης στα κελιά Σύνταξη: Κατακόρυφη στοίχιση: με χρήση του χαρακτηριστικού valign= τιμήστοίχισης [τιμές στοίχισης είναι: top, middle, bottom] Οριζόντια στοίχιση: με χρήση του χαρακτηριστικού align= τιμήστοίχισης [τιμές στοίχισης είναι: left, right, center] <table border="2" width="200" height="200"> <tr> <td valign="bottom">κάτω-αριστερή στοίχιση</td> </tr> <tr> <td valign="middle"align="right">μέση-δεξιά</td> </tr> <tr> <td valign="top">πάνω-αριστερή στοίχιση</td> </tr> </table> 40
Αποφυγή της κατάπτωσης των κελιών Κατάπτωση των κελιών είναι το φαινόμενο της μη εμφάνισης κενών κελιών στο ύψος που τα ορίσαμε Επίλυση: Αρχικά δημιουργούμε ένα διαφανές εικονίδιο GIF μεγέθους 1x1 pixel Το εισάγουμε σαν εικόνα στο κελί Ρυθμίζουμε το ύψος (ή τοπλάτος) του ίσο με αυτό του κελιού 41
Επέκταση κελιών και γραμμών Επέκταση κελιών (συνένωση κελιών σε μια στήλη) Σύνταξη: με χρήση του χαρακτηριστικού: colspan= αριθμός στηλών που θα επεκταθεί το κελί Επέκταση γραμμών (συνένωση κελιών σε μια γραμμή) Σύνταξη: με χρήση του χαρακτηριστικού: rowspan= αριθμός γραμμών που θα επεκταθεί το κελί <table border="1" width="200"> <tr> <td colspan="2"></td> <td></td> </tr> <tr> <td></td> <td></td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> </table> 42
Διαχείριση του φόντου των κελιών Προσθήκη χρώματος στον φόντο του κελιού Σύνταξη: <TD bgcolor = τιμή χρώματος ></TD> Προσθήκη γραφικού στον φόντο του κελιού Σύνταξη: <TDbackground= διεύθυνση_εικόνας/όνομα_εικόνας ></TD> <table border="1" width="200"> <tr> <td colspan="2"></td> <td></td> </tr> <tr> <td bgcolor="#008000"></td> <td></td> <td rowspan="2" background="box.gif"></td> </tr> <tr> <td></td> <td></td> </tr> </table> 43
Ένθεση πινάκων Η ένθεση πινάκων είναι ουσιαστικά η χρήση πίνακα μέσα σε πίνακα και γίνεται μέσα σε κελιά του πίνακα <table border="1" width="200"> <tr> <td></td> <td> <table border="1" width="200"> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </td> <td></td> </tr> </table> 44
Στοίβα πινάκων Η στοίβα πινάκων είναι ουσιαστικά η χρήση πινάκων τον ένα μετά τον άλλο και είναι πολύ χρήσιμη για την δημιουργία μιας μακριάς σελίδας με ποικιλία επέκτασης και ελέγχου των στοιχείων της. <table border="1" width="200"> <tr> <td></td> </tr> </table> <table border="1" width="200"> <tr> <td></td> </tr> </table> 45 <table border="1" width="200"> <tr> <td></td> </tr> </table>
Χρήση Πλαισίων (Framesets) 46
Δημιουργία Διάταξης Πλαισίων Σύνταξη: <FRAMESET χαρακτηριστικά>περιεχόμενο</ FRAMESET > Χρήση: Καθορίζει την διάταξη των πλαισίων μέσα στο κύριο παράθυρο <html> <head> </head> <frameset > </frameset> </html> 47 Σημείωση: Αντί για την ετικέτα </ BODY > χρησιμοποιούμε την ετικέτα </ FRAMESET > η παραπάνω διάταξη λειτουργεί σαν δοχείο που περιέχει τα υπόλοιπα περιγράμματα και τις γραμμές κύλισης η διάταξη των πλαισίων θα πρέπει να διαθέτει τουλάχιστον δύο HTML αρχεία
Προσθήκη Ανεξάρτητων Πλαισίων Βήματα: Δημιουργώ τα επιμέρους HMTL αρχεία τα οποία θέλω να εισάγω στο πλαίσιο Δημιουργώ την βασική διάταξη πλαισίων Εισάγω τα επιμέρους αρχεία στο πλαίσιο χρησιμοποιώντας μέσα στην ετικέτα <FRAMESET> </ FRAMESET > την ετικέτα <FRAME> με την παρακάτω σύνταξη: <FRAME src= διεύθυνση_επιμέρους_αρχείου_html/όνομα_του_αρχείου > <frameset> <frame src="arxeio_1.htm"> <frame src="arxeio_2.htm"> </frameset> 48
Δυναμική Διάταξη Πλαισίων ανά Στήλη Σύνταξη: Στην ετικέτα FRAMESET χρησιμοποιώ το χαρακτηριστικό cols: <frameset cols="200,*"> για την δημιουργία στηλών Σημειώσεις: Το, διαχωρίζει τις στήλες (δηλ. τα επιμέρους πλαίσια) Το 200 σημαίνει ότι το πρώτο πλαίσιο (αριστερό) είναι σταθερού πλάτους 200 pixels Το * σημαίνει ότι το δεύτερο πλαίσιο (δεξί) έχει δυναμικό πλάτος <frameset cols="200,*"> <frame src="arxeio_1.htm"> <frame src="arxeio_2.htm"> </frameset> </html> 49
Δυναμική Διάταξη Πλαισίων ανά Γραμμή Σύνταξη: Στην ετικέτα FRAMESET χρησιμοποιώ το χαρακτηριστικό rows: <frameset rows= 50,*"> για την δημιουργία στηλών Σημειώσεις: Το, διαχωρίζει τις γραμμές (δηλ. τα επιμέρους πλαίσια) Το 50 σημαίνει ότι το πρώτο πλαίσιο (επάνω) είναι σταθερού ύψους 50 pixels Το * σημαίνει ότι το δεύτερο πλαίσιο (κάτω) έχει δυναμικό ύψος <frameset rows="50,*"> <frame src="arxeio_1.htm"> <frame src="arxeio_2.htm"> </frameset> 50
Συνδυασμός Γραμμών και Στηλών Βήματα: Δημιουργώ τα επιμέρους HMTL αρχεία τα οποία θέλω να εισάγω στο πλαίσιο Δημιουργώ την βασική διάταξη πλαισίων Ορίζω τις γραμμές των επιμέρους πλαισίων Εισάγω το αρχείο για την πρώτη γραμμή Εισάγω μια νέα διάταξη πλαισίων μέσα στην ετικέτα <FRAMESET> </ FRAMESET > μια νέα ετικέτα <FRAMESET> </ FRAMESET > Εισάγω τα επιμέρους αρχεία στο πλαίσιο χρησιμοποιώντας μέσα στην ετικέτα <FRAMESET> </ FRAMESET > την ετικέτα <FRAME> <frameset rows="64,*"> <frame src="arxeio_1.htm"> <frameset cols="150,*"> <frame src="arxeio_2.htm"> <frame src="arxeio_3.htm"> </frameset> </frameset> 51
Ρύθμιση Κύλισης Σύνταξη: Για να καθορίσω αν θα φαίνονται ή όχι scrollbars δίπλα από ένα πλαίσιο χρησιμοποιώ το χαρακτηριστικό scrolling στην ετικέτα <FRAME>: scrolling= auto : εμφανίζονται scrollbars αν είναι απαραίτητο scrolling= yes : εμφανίζονται scrollbars πάντα scrolling= no : δε νεμφανίζονται scrollbars ποτέ <frame src="arxeio_2.htm" scrolling="yes" > 52
Αλλαγή μεγέθους Πλαισίων- Προσθήκη Περιθωρίων Αλλαγή μεγέθους Πλαισίων Η αλλαγή του μεγέθους των πλαισίων από τον χρήστη είναι προεπιλογή Σύνταξη: Για να μην αλλάζει το μέγεθος των πλαισίων χρησιμοποιούμε το χαρακτηριστικό noresize στην ετικέτα <FRAME> Σημείωση: Το χαρακτηριστικό noresize είναι από τα λίγα HTML χαρακτηριστικά που δεν θέλουν κάποια τιμή <frame src="arxeio_2.htm" noresize> Προσθήκη Περιθωρίων Σύνταξη: Για να τροποποιήσουμε τα περιθώρια στα πλαίσια χρησιμοποιούμε το χαρακτηριστικά marginwidth και marginheight στην ετικέτα <FRAME> δίνοντάς τους μια τιμή σε pixels 53 <frame src="arxeio_2.htm" marginwidth="10" marginheight="10">
Ονομασία Πλαισίων Χρήση: Για να κάνουμε μια αλληλεπίδραση μεταξύ των πλαισίων της ίδιας σελίδας ή να αντικαταστήσουμε την σελίδα σε ένα πλαίσιο είναι απαραίτητο να ονομάσουμε τα πλαίσια Σύνταξη: Η ονομασία των πλαισίων γίνεται με το χαρακτηριστικό name στην ετικέτα <FRAME> <frameset rows="64,*"> <frame name="banner" src="arxeio_1.htm"> <frameset cols="150,*"> <frame name="contents" src="arxeio_2.htm"> <frame name="main" src="arxeio_3.htm"> </frameset> </frameset> 54
Στόχευση Πλαισίων Από πλαίσιο της ίδιας διάταξης: Χρήση: Για να προκαθορίσω τον προορισμό τον υπερσυνδέσμων από ένα πλαίσιο της ίδιας διάταξης σε ένα άλλο Σύνταξη: Χρησιμοποιώ το χαρακτηριστικό target στην ετικέτα του αρχικού πλαισίου: target= όνομα_του_στοχευόμενου_πλαισίου <frameset rows="64,*"> <frame name="banner" target="contents" src="arxeio_1.htm"> <frameset cols="150,*"> <frame name="contents" target="main" src="arxeio_2.htm"> <frame name="main" src="arxeio_3.htm"> </frameset> </frameset> 55
Στόχευση Πλαισίων Από μια σελίδα στο πλαίσιο μιας διάταξης: Σύνταξη: Τροποποιώ το χαρακτηριστικό target στην σύνταξη του υπερσυνδέσμου <a href= Διεύθυνση target= όνομα_του_στοχευόμενου_πλαισίου >Περιεχόμενο</a> <a href="ex1.html" target="contents">arxeio 3</a> 56
Στόχευση Πλαισίων με Χρήση Ειδικών Ονομάτων Σύνταξη: Τροποποιώ το χαρακτηριστικό target στην σύνταξη του υπερσυνδέσμου δίνοντάς του σαν τιμή ένα ειδικό όνομα <a href= Διεύθυνση target= ειδικό _όνομα >Περιεχόμενο</a> Χρήση: target= _blank : ανοίγει ένα καινούργιο παράθυρο του browser target= _self : φορτώνει την σελίδα στο ίδιο παράθυρο από όπου προέρχεται η αρχική σύνδεση target= _parent : φορτώνει την σελίδα στην διάταξη πλαισίων της αρχικής διασύνδεσης target= _top : φορτώνει την σελίδα σε πλήρες παράθυρο, παραβλέποντας τα υπάρχοντα πλαίσια 57 <a href="ex1.html" target="_parent">arxeio 3</a>
Διαχείριση πρόσβασης από browsers που δεν υποστηρίζουν πλαίσια Βήματα: Κάτω από την τελική ετικέτα τερματισμού <FRAMESET> προσθέτω την ετικέτα <NOFRAMES> </NOFRAMES> Μέσα στην ετικέτα <NOFRAMES> εισάγω μια ολόκληρη σελίδα εισάγοντας την ετικέτα <BODY> </BODY> Στην σελίδα αυτή εισάγουμε ένα μήνυμα to το οποίο εμφανίζεται στους browsers που δεν έχουν την δυνατότητα να απεικονίσουν frames <html> <head> <title>frames</title> </head> <frameset rows="64,*"> <frame name="banner" scrolling="no" noresize target="contents" src="arxeio_1.htm"> <frameset cols="150,*"> <frame name="contents" target="main" src="arxeio_2.htm"> <frame name="main" src="arxeio_3.htm"> </frameset> <noframes> <body> <p>δυστυχώς ΔΕΝ υποστηρίζετε πλαίσια</p> </body> </noframes> </frameset> </html> 58
Σχεδιασμός Φορμών Ανατροφοδότησης 59
Γενικά Οι φόρμες είναι μια πανίσχυρη μέθοδος για να λαμβάνει ο διαχειριστής του site πληροφορίες από τον επισκέπτη (χρήστη) του site Βασίζονται στην αλληλεπίδραση του χρήστη με την ιστοσελίδα, και στα scripts που είναι αποθηκευμένα στον server Η παραπάνω αλληλεπίδραση υποστηρίζεται από μια διαδικασία που λέγεται Common Gateway Interface (CGI) και η οποία λειτουργεί σαν οδός μέσα από την οποία περνούν οι πληροφορίες και παραδίδονται στην πλευρά του server. Παράδειγμα χρήσης φορμών είναι η συλλογή του ονόματος, της διεύθυνσης και πληροφοριών επικοινωνίας για έναν χρήστη και η αποστολή τους με e-mail 60
Δημιουργία μιας Φόρμας Σύνταξη: Χρησιμοποιείται η ετικέτα <FORM> <FORM χαρακτηριστικά> Περιεχόμενο </FORM> Όπου χαρακτηριστικά: action= όνομα_στοχευόμενου_script (καθορίζει σε ποιο script του server θα παραδοθούν οι πληροφορίες που αποστέλλονται από την φόρμα) method= τρόπος_αποστολής_των δεδομένων Υπάρχουν δύο τρόποι: get και post. Με την get τα δεδομένα αποστέλλονται μαζί με την υπόλοιπη φόρμα Με την post τα δεδομένα αποστέλλονται ξεχωριστά (είναι πιο ευέλικτη και ασφαλής από την get) <form method="post" action="scropt.asp"> 61 </form>
Δημιουργία ενός Πεδίου Κειμένου Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (για πεδίο κειμένου): type= text (καθορίζει ότι το πεδίο είναι τύπου text - αν έχουμε type= password τότε αντί του πληκτρολογημένου χαρακτήρα φαίνεται ο χαρακτήρας * ) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) size= πλάτος_πεδίου (καθορίζει το πλάτος του πεδίου σε pixels) maxlength= αριθμός_επιτρεπόμενων χαρακτήρων (καθορίζει τον μέγιστο αριθμό χαρακτήρων που μπορούμε να εισάγουμε στο πεδίο κειμένου) <form method="post" action="script.asp"> <p>e-mail <input type="text" name="e-mail" size="20" maxlength="10"> </p> </form> 62
Δημιουργία ενός Πλαισίου Ελέγχου (check box) Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Πλαίσιο Ελέγχου ): type= checkbox (καθορίζει ότι το πεδίο είναι τύπου checkbox) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) checked (δηλώνει ότι το συγκεκριμένο πλαίσιο ελέγχου είναι προεπιλεγμένο) Χρήση: Καθορισμός επιλογών, όπου ο χρήστης μπορεί να επιλέξει περισσότερες από μια <form method="post" action="script.asp"> <p>color</p> <p>red <input type="checkbox" name="red" checked> </p> <p>green <input type="checkbox" name="green"> </p> <p>blue <input type="checkbox" name="blue"> </p> </form> 63
Δημιουργία ενός Κουμπιού Επιλογής Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Κουμπί Επιλογής): type= radio (καθορίζει ότι το πεδίο είναι κουμπί επιλογής) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) checked (δηλώνει ότι το συγκεκριμένο κουμπί επιλογής είναι προεπιλεγμένο) Χρήση: Καθορισμός επιλογών, όπου ο χρήστης μπορεί να επιλέξει μόνο μια 64 <form method="post" action="script.asp"> <p>gender</p> <p>female <input type="radio" name="female" checked> </p> <p>male <input type="radio" name="male"> </p> </form>
Δημιουργία μιας Περιοχής Κειμένου Σύνταξη: Χρησιμοποιείται η ετικέτα <TEXTAREA χαρακτηριστικά> </TEXTAREA>, η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά: rows= γραμμές_κειμένου (καθορίζει το ύψος της περιοχής κειμένου) cols= στήλες_κειμένου (καθορίζει το πλάτος της περιοχής κειμένου) Χρήση: Εισαγωγή κειμένου σε περισσότερες από μια γραμμή <form method="post" action="script.asp"> <textarea rows="5" cols="25"> </textarea> </form> 65
Δημιουργία μιας Αναπτυσσόμενης Λίστας Σύνταξη: Χρησιμοποιούνται οι ετικέτες <SELECT χαρακτηριστικά> </ SELECT>, η οποία εισάγεται ανάμεσα από την ετικέτα < FORM > Όπου χαρακτηριστικά: size= αριθμός_αντικειμένων (καθορίζει τον αριθμό των επιλογών της λίστας) multiple (επιτρέπει την επιλογή πολλαπλών αντικειμένων) <OPTION χαρακτηριστικά>, η οποία εισάγεται ανάμεσα από την ετικέτα <SELECT > και καθορίζει ένα αντικείμενο Όπου χαρακτηριστικά: name= όνομα_αμτικειμένου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο αντικείμενο) selected (επιτρέπει την επιλογή πολλαπλών αντικειμένων) Χρήση: Επιλογή ενός (ή περισσοτέρων) αντικειμένων από μια λίστα 66
Δημιουργία μιας Αναπτυσσόμενης Λίστας <form method="post" action="script.asp"> <p><select size="1"> <option name="greece"> Greece </option> <option name="italy"> Italy </option> <option name="france" selected> France </option> </select> </p> </form> Σημείωση: Χρησιμοποιούμε το χαρακτηριστικό size μόνο όταν θέλουμε να είναι ορατές όλες οι επιλογές ή ένα μέρος τους 67
Προσθήκη Κουμπιών Ακύρωσης και Υποβολής Κουμπί Υποβολής: Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Κουμπί Υποβολής): type= submit (καθορίζει ότι το πεδίο είναι κουμπί υποβολής) values= όνομα_κουμπιού (καθορίζει το κείμενο που εμφανίζεται στο κουμπί) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) Χρήση: Αποστολή των στοιχείων της φόρμας στον server Κουμπί Ακύρωσης : Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Κουμπί Ακύρωσης): type= reset (καθορίζει ότι το πεδίο είναι κουμπί ακύρωσης) values= όνομα_κουμπιού (καθορίζει το κείμενο που εμφανίζεται στο κουμπί) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) Χρήση: Διαγράφει οτιδήποτε έχουμε εισάγει στην φόρμα 68
Προσθήκη Κουμπιών Ακύρωσης και Υποβολής <form method="post" action="script.asp"> <p> <input type="submit" value="εισαγωγή" name="b1"> <input type="reset" value="διαγραφή" name="b2"> </p> </form> 69
Ενσωμάτωση Πολυμέσων και Εξειδικευμένων Προγραμμάτων 70
Δημιουργία Συνδέσεων με αρχεία Ήχου ή Video Σύνταξη: <a href= Διεύθυνση_αρχείου_ήχου-βίντεο">Περιεχόμενο</a> Σημείωση: Επειδή τα πολυμέσα που φορτώνονται απαιτούν μια κατάλληλη εφαρμογή για να εκτελεστούν καλό είναι να προσθέτουμε μια επεξήγηση στην σελίδα μας που θα αναφέρουμε την συγκεκριμένη εφαρμογή και που ο χρήστης μπορεί να την αποκτήσει. <a href="../../windows/media/chimes.wav">hxos</a> 71
Προσθήκη Ηχητικής Υπόκρουσης Υπάρχουν δύο τρόποι: Α τρόπος: με χρήση της ετικέτας <BGSOUND> Σύνταξη: Κάτω από την ετικέτα <BODY> εισάγω την ετικέτα <BGSOUND>: <BGSOUND src= Διεύθυνση_αρχείου_ήχου loop= αριθμός αναπαραγωγής του αρχείου ήχου > Σημειώσεις: Η ετικέτα <BGSOUND> είναι εξειδικευμένη και δεν λειτουργεί στονnetscape Δεν υπάρχει </BGSOUND> Η τιμήloop μπορεί να πάρει αριθμητικές τιμές (1, 2, 3,...) και δηλώνει το πόσες φορές θα παιχθεί το αρχείο ήχου. Σεπερίπτωσηπουθέλουμετοαρχείοναπαίζεται συνεχώς θέτουμε την τιμή infinite 72 <bgsound src="media/chimes.wav">
Προσθήκη Ηχητικής Υπόκρουσης Β τρόπος: με χρήση της ετικέτας < EMBED > Σύνταξη: Πάνω ακριβώς από την ετικέτα τερματισμού </BODY> εισάγω την ετικέτα <EMBED>: <EMBED src= Διεύθυνση_αρχείου_ήχου autoplay true loop= αριθμός αναπαραγωγής του αρχείου ήχου > Σημειώσεις: Η ετικέτα <EMBED> μπορεί να χρησιμοποιηθεί ταυτόχρονα με την <BGSOUND> έτσι ώστε να εξυπηρετούνται όλοι οι browsers Δεν υπάρχει </ EMBED > Το χαρακτηριστικό autoplay= true είναι απαραίτητο για την αναπαραγωγή του ήχου αυτόματα Το χαρακτηριστικό loop μπορεί να πάρει αριθμητικές τιμές (1, 2, 3,...) και δηλώνει το πόσες φορές θα παιχθεί το αρχείο ήχου. Σε περίπτωση που θέλουμε το αρχείο να παίζεται συνεχώς θέτουμε την τιμή infinite 73 <embed src="media/chimes.wav" autoplay="true" loop="false">
Αναπαραγωγή Ήχου και Video inline Σύνταξη: Χρήση της ετικέτας <EMBED>: <EMBED src= Διεύθυνση_αρχείου_ήχου-βίντεο χαρακτηριστικά> Χαρακτηριστικά: height: ύψος του βίντεο (ισχύει μόνο για βίντεο) width: πλάτος του βίντεο (ισχύει μόνο για βίντεο) controller: παίρνει τιμές true (εμφανίζεται η κονσόλα ελέγχου) και false (δεν εμφανίζεται η κονσόλα ελέγχου) autoplay: παίρνει τιμές true (για την αναπαραγωγή του αρχείου πολυμέσων αυτόματα) και false (που σημαίνει ότι ο χρήστης θα πρέπει να ξεκινήσει χειροκίνητα την αναπαραγωγή του αρχείου πολυμέσων) loop: μπορεί να πάρει αριθμητικές τιμές (1, 2, 3,...) και δηλώνει το πόσες φορές θα παιχθεί το αρχείο ήχου. Σε περίπτωση που θέλουμε το αρχείο να παίζεται συνεχώς θέτουμε την τιμή infinite pluginspage= διεύθυνση plug-in 74
Αναπαραγωγή Ήχου και Video inline <embed src="../../windows/help/explorer.avi " autoplay="true" loop="false" width="200" height="200" controller="true" pluginspage="http://www.microsoft.co m/windows/mediaplayer"></p> </body> </html> 75
Διαδοχικά Φύλλα Στυλ (CSS) 76
Τι είναι Διαδοχικό Φύλλο Στυλ Ορισμός: Ένα Διαδοχικό Φύλλο Στυλ (cascading style sheet -CSS) είναι μια ιστοσελίδα που παράγεται από διάφορες πηγές, με μια προκαθορισμένη σειρά προτεραιότητας (στην περίπτωση που ο καθορισμός ενός στυλ για κάποιο στοιχείο γίνεται σε διάφορα διαδοχικά φύλλα στυλ) Χρησιμότητα: Τα Διαδοχικά Φύλλα Στυλ δίνουν στον προγραμματιστή μεγαλύτερο έλεγχο για την εμφάνιση μιας ιστοσελίδας Μέθοδοι: Υπάρχουν τρεις μέθοδοι φύλλων στυλ Μέθοδος σύνδεσης: πουχρησιμεύειγιατονέλεγχοστυλπολλώνεγγράφων σε ένα μόνο φύλλο στυλ Ενσωματωμένα φύλλα στυλ: που χρησιμεύει για τον έλεγχο στυλ σελίδα - προς-σελίδα Inline στυλ: που χρησιμεύει για τον έλεγχο στυλ σε τμήματα της ίδιας σελίδας 77
Δημιουργία Φύλλου Στυλ για Σύνδεση Δημιουργώ ένα αρχείο με κατάληξη.css σε έναν text editor Με την παρακάτω (απλή) μορφή Στοιχείο_που_θέλω_να_επηρεάσω{ } ιδιότητα:τιμή; Η1{ 78 } color:#669999;
Σύνδεση HTML εγγράφου σε ένα Φύλλο Στυλ Ανάμεσα από τα </TITLE> και </HEAD> σεμιασελίδαγράφω: <LINK rel=stylesheet href= Διεύθυνση φύλλου στυλ type= text/css > <html> <head> <title>style</title> <link rel="stylesheet" href="css/my_style.css" type="text/css"> </head> <body> <h1>επικεφαλίδα 1</h1> <p>απλό κείμενο</p> </body> </html> Σημείωση: Με αυτόν τον τρόπο μπορώ να συνδέσω όσα έγγραφα επιθυμώ (ακόμη και ανεξάρτητα) σε ένα css. Αλλάζοντας ένα στοιχείο στο.css μπορώ να το αλλάξω αυτομάτως σε όλες τις σελίδες που το χρησιμοποιώ 79
Δημιουργία ενός ενσωματωμένου Φύλλου Στυλ.. Ανάμεσα από τα </TITLE> και </HEAD> σεμιασελίδαγράφωτοtag: <STYLE> </ STYLE > Ανάμεσα από τα <STYLE> και </ STYLE > δηλώνω τα στοιχεία και τις ιδιότητες που θέλω να τροποιήσω ως εξής: Στοιχείο_που_θέλω_να_επηρεάσω{ ιδιότητα:τιμή; ιδιότητα:τιμή; } 80
..Δημιουργία ενός ενσωματωμένου Φύλλου Στυλ <html> <head> <title>style</title> <style> h1{ color: #00FF00; } </style> </head> <body> <h1>επικεφαλίδα 1</h1> <p>απλό κείμενο</p> </body> </html> 81
Χρήση Inline Στυλ Βρίσκω το τμήμα του κειμένου που θέλω να τροποποιήσω Μέσα στην ετικέτα προσθέτω το χαρακτηριστικό style συνοδευόμενο από ιδιότητες και τιμές ως εξής: <Στοιχείο_που_θέλω_να_επηρεάσω style= ιδιότητα:τιμή;ιδιότητα:τιμή; > Περιεχόμενο </ Στοιχείο_που_θέλω_να_επηρεάσω > <p style="font-family: helvetica;"> Παράδειγμα1 </p> 82 <p style="font-family: helvetica;font-style: italic"> Παράδειγμα2 </p>
Inline, Ενσωματωμένα και Συνδεδεμένα στυλ μαζί Θα πρέπει να έχουμε υπόψη μας για την προτεραιότητα, ότι το inline στυλ προηγείται ακολουθεί το ενσωματωμένο στυλ και τέλος το συνδεδεμένο 83
Χρήση κλάσεων για προσαρμογή του φύλλου στυλ... Μια κλάση είναι ένας προσαρμοζόμενος επιλογέας Δημιουργία: σε ένα συνδεδεμένο ή ενσωματωμένο φύλλο στυλ δημιουργούμε μια κλάση με την μορφή: Στοιχείο.όνομα_κλάσης { ιδιότητα:τιμή; } Σημείωση: το «στοιχείο» είναι προαιρετικό το «όνομα_κλάσης» είναι της επιλογής μας χωρίς χαρακτήρες διαστημάτων και ειδικών συμβόλων Κλήση της κλάσης Στο HTML αρχείο γράφουμε 84 <Στοιχείο class= όνομα κλάσης > Περιεχόμενο </ Στοιχείο>
...Χρήση κλάσεων για προσαρμογή του φύλλου στυλ Δημιουργία: <style> h1.peach { color=#ff9966; } Κλήση της κλάσης: <h1 class="peach">κλάση</h1> <html> <head> <title>παράδειγμα1 για inline styl</title> <style> h1.peach { color=#ff9966; } </style> </head> <body> <h1 class="peach">κλάση</h1> <h1>κλάση </h1> </body> </html> Κλάση Κλάση 85