Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1) Τ.Ε.Ι. Αθήνας Τμήμα Ηλεκτρονικής
HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα έγγραφα δεν είναι γλώσσα προγραμματισμού, όπως η C,C++, Java δεν είναι πρόγραμμα Διεθνές πρότυπο που χρησιμοποιείται για την «έκδοση» κειμένων στο Web Εφαρμογές Πολυμέσων
HTML Τα αρχεία HTML είναι απλά αρχεία κειμένου, με κατάληξη .htm ή .html Για την συγγραφή των αρχείων HTML μπορούμε να χρησιμοποιήσουμε από ένα απλό κειμενογράφο (π.χ. Notepad των Windows) μέχρι μια πολύπλοκη εφαρμογή (π.χ. Adobe Dreamweaver) Εφαρμογές Πολυμέσων
Ετικέτες (tags) Τα αρχεία HTML περιέχουν ειδικές προκαθορισμένες-δεσμευμένες λέξεις, οι οποίες ονομάζονται ετικέτες (tags) Οι ετικέτες περιγράφουν τον τρόπο με τον οποίο θα εμφανίζεται το αρχείο HTML από τον browser Δομή των ετικετών: <όνομα_ετικέτας> κείμενο </όνομα_ετικέτας> π.χ. <HEAD> CD Store </HEAD> Στο όνομα_ετικέτας δεν γίνεται διάκριση μεταξύ κεφαλαίων ή πεζών (μη case-sensitive) π.χ. τα <HEAD>, <Head>, <head> είναι ισοδύναμα Στην XHTML γίνεται διάκριση Εφαρμογές Πολυμέσων
Ετικέτες (tags) Στην HTML οι ετικέτες μπορεί να είναι ένθετες ετικέτες στο εσωτερικό άλλων ετικετών <p>Hello from <font color=“red”>TEI of Athens</font></p> Οι ένθετες ετικέτες τερματίζουν με αντίστροφο τρόπο από αυτόν που δηλώνονται <HTML><head>CD Store</head></HTML> Ορθός τρόπος γραφής ένθετων ετικέτων <table> <tr> <td>Ονοματεπώνυμο</td> </tr> </table> Εφαρμογές Πολυμέσων
Χαρακτηριστικά ετικετών Περιγράφουν με μεγαλύτερη λεπτομέρεια τον τρόπο εμφάνισης μιας ετικέτας Περισσότερα χαρακτηριστικά διαχωρίζονται μεταξύ τους με κενό Δομή του χαρακτηριστικού ετικέτας <όνομα_ετικέτας όνομα_χαρακτηριστικού = τιμή_χαρακτηριστικού> κείμενο </όνομα_ετικέτας> <όνομα_ετικέτας όνομα_χαρακτηριστικού_1 = τιμή_χαρακτηριστικού_1 όνομα_χαρακτηριστικού_2 = τιμή_χαρακτηριστικού_2 > κείμενο </όνομα_ετικέτας> <font color="red" size="5">Hello from TEI of Athens</font> Εφαρμογές Πολυμέσων
Δομή εγγράφου HTML Αρχική ετικέτα η <HTML></HTML> αποτελείται από δύο ετικέτες <HEAD></HEAD> <BODY></BODY> Στο <HEAD>…</HEAD> περιέχονται πληροφορίες όπως ο τίτλος της ιστοσελίδας Στο <BODY>…</BODY> περιέχεται το σώμα του εγγράφου τι θα εμφανιστεί στο παράθυρο του browser Εφαρμογές Πολυμέσων
Ετικέτες στην HEAD Η ετικέτα <TITLE></TITLE> καθορίζει τον τίτλο της σελίδας HTML περιέχεται μέσα στην ετικέτα <HEAD</HEAD> Ο browser χρησιμοποιεί τον τίτλο (<TITLE>) εμφανίζεται στην «μπάρα τίτλου» του παραθύρου του browser χρησιμοποιείται ως όνομα στα bookmarks Το Google χρησιμοποιεί τον τίτλο για να ταξινομήσει την σελίδα Βασικός τρόπος διαφήμισης της σελίδας Μπορεί να μην λάβει υπόψη τον τίτλο αν δεν είναι ορθά ορισμένος Μη ορθή χρήση του τίτλου Η σελίδα μου Σελίδα 1 Ορθή χρήση τίτλου Ηλεκτρονικό κατάστημα πώλησης CDs Εφαρμογές Πολυμέσων
Ετικέτες στην HEAD Η ετικέτα <meta/> χρησιμοποιείται για την εισαγωγή μεταδεδομένων (metadata) στην επικεφαλίδα Χαρακτηριστικό "name" για τη δήλωση του ονόματος της ιδιότητας Χαρακτηριστικό "content" για τη δήλωση της τιμής της ιδιότητας Παράδειγμα: <meta name="author" content="Nikos Papadopoulos"/> Η ετικέτα <meta/> αποτελεί πάντα μια κενή ετικέτα έχει μόνο χαρακτηριστικά Εφαρμογές Πολυμέσων
Ετικέτες στην HEAD Tα ονόματα χαρακτηριστικού «description» και «keywords» χρησιμοποιούνται από την Google για την ταξινόμηση και εύρεση σελίδων στο Web. Η διαδικασία εύρεσης εξετάζει την δοσμένη φράση με το description και τα keywords Το description και τα keywords δεν είναι ορατά στη σελίδα Παράδειγμα: <meta name="description" content="CD Store"/> <meta name="keywords" content=“CD,store“/> Εφαρμογές Πολυμέσων
Ετικέτες στην HEAD Το χαρακτηριστικό «http-equiv» της ετικέτας <meta/> καθορίζει στον πελάτη να συμπεριφερθεί σαν να έχει ήδη λάβει μια επικεφαλίδα http. Παράδειγμα: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> καθορίζει στον Server να ανακοινώσει στον πελάτη ότι η σελίδα είναι γραμμένη σε HTML με κωδικοποίηση utf-8. Χρήσιμο όταν η σελίδα διαβάζεται τοπικά (δεν υπάρχουν επικεφαλίδες http) Εφαρμογές Πολυμέσων
Επικεφαλίδες Στην HTML υπάρχουν έξι επίπεδα επικεφαλίδων, τα οποία δηλώνονται με την ετικέτα <Hn>…</Hn>, όπου το n είναι ένας ακέραιος αριθμός από 1 έως και 6 Η σημαντικότητα των επικεφαλίδων ξεκινάει από την H1 (περισσότερο σημαντική) και φθίνει μέχρι την Η6 (λιγότερο σημαντική) <h1>Hello from TEI of Athens</h1> <h2>Hello from TEI of Athens </h2> <h3>Hello from TEI of Athens </h3> <h4>Hello from TEI of Athens </h4> <h5>Hello from TEI of Athens </h5> <h6>Hello from TEI of Athens </h6> Εφαρμογές Πολυμέσων
Ειδικές Ετικέτες Ετικέτα <p></p> Ετικέτα <hr> Αλλαγή παραγράφου διαχωρισμός του κειμένου με κενές γραμμές Ετικέτα <hr> Οριζόντια γραμμή εμφάνιση μιας οριζόντιας γραμμής στο κείμενο Ετικέτα <br> Αλλαγή γραμμής <p>Hello from TEI of Athens <br/>The course is called Multimedia Applications <hr/> Introduction to HTML </p> Εφαρμογές Πολυμέσων
Σχόλια Ένα σχόλιο περιέχεται μεταξύ των <!– και --> Μπορεί να περιλαμβάνει περισσότερες από μία γραμμή σχολίων Τα σχόλια αγνοούνται από τον browser Η πληροφορία που περιέχεται στα σχόλια δεν εμφανίζεται Χρησιμοποιείται για να κατανοήσει ο προγραμματιστής την σελίδα <p>Hello from TEI of Athens <br/>The course is called Multimedia Applications <hr/> Introduction to HTML <!- Introduction to CSS Introduction to XHTML --> </p> Εφαρμογές Πολυμέσων
Ετικέτες καθορισμού στυλ Ετικέτα <b></b> Έντονη γραφή Το κείμενο που περικλείεται εμφανίζεται με έντονη γραφή Ετικέτα <i></i> Πλάγια γραφή Το κείμενο που περικλείεται εμφανίζεται με πλάγια γραφή Ετικέτα <u></u> Υπογραμμισμένο κείμενο Ετικέτα <strike></strike> Διαγραμμένο κείμενο Ετικέτα <tt></tt> Το κείμενο εμφανίζεται σαν κείμενο από γραφομηχανή Εφαρμογές Πολυμέσων
Ετικέτες καθορισμού στυλ <p> Welcome to TEI of Athens <br/><b>Welcome to TEI of Athens</b> <br/><i>Welcome to TEI of Athens </i> <br/><u>Welcome to TEI of Athens </u> <br/><strike>Welcome to TEI of Athens </strike> <br/><tt>Welcome to TEI of Athens </tt> </p> Εφαρμογές Πολυμέσων
Λίστες – Μη αριθμημένες Η αρχή και ο τερματισμός μιας μη αριθμημένης λίστα δηλώνεται με την ετικέτα <ul>…..</ul> Κάθε στοιχείο της λίστας δηλώνεται με την ετικέτα <li>…..</li> το στοιχειό πρέπει να περιέχεται εντός της ετικέτας αυτής Κάθε στοιχείο της λίστας εμφανίζεται στον browser μετά από μια κουκίδα Οι δραστηριότητες του Πανεπιστημίου: <ul> <li>Τουρνουά Μπάσκετ</li> <li>Διαγωνισμός Χορού</li> <li>Διαγωνισμός Τάβλι</li> </ul> Εφαρμογές Πολυμέσων
Λίστες – Αριθμημένες Η αρχή και ο τερματισμός μιας αριθμημένης λίστα δηλώνεται με την ετικέτα <ol>…..</ol> Κάθε στοιχείο της λίστας δηλώνεται με την ετικέτα <li>…..</li> Κάθε στοιχείο της λίστας εμφανίζεται στον browser μετά από έναν αριθμό Ο αριθμός αυτός δηλώνει τη θέση του στοιχείου στη λίστα Οι δραστηριότητες του Πανεπιστημίου: <οl> <li>Τουρνουά Μπάσκετ</li> <li>Διαγωνισμός Χορού</li> <li>Διαγωνισμός Τάβλι</li> </οl> Εφαρμογές Πολυμέσων
τίτλος ορισμού – επεξήγηση ορισμού Λίστες – Λίστα Ορισμών Επιτρέπει τη δημιουργία επεξηγήσεων διαφόρων ορισμών Δηλώνεται με την ετικέτα <DL>…</DL> και περιέχει ζεύγη: τίτλος ορισμού – επεξήγηση ορισμού Για τους τίτλους των ορισμών χρησιμοποιείται η ετικέτα <DT>…</DT> Για τις επεξηγήσεις των ορισμών η ετικέτα <DD>…</DD> Εφαρμογές Πολυμέσων
Εικόνες Βασικοί τύποι εικόνων στην HTML Ετικέτα <img/> gif jpg bmp (μεγάλο μέγεθος αρχείου) tiff (μεγάλο μέγεθος αρχείου) Ετικέτα <img/> Εισαγωγή μιας εικόνας στη σελίδα Χαρακτηριστικά της ετικέτας <img/> src alt height width Εφαρμογές Πολυμέσων
Εικόνες Χαρακτηριστικό src μιας εικόνας Δηλώνει την τοποθεσία που βρίσκεται το αρχείο της <img src="multimedia.gif" /> Χαρακτηριστικό alt μιας εικόνας Δηλώνει τον τίτλο της εικόνας Σε browser που δεν υποστηρίζουν γραφικά στη θέση της εικόνας θα φαίνεται ο τίτλος της <img src="multimedia.gif" alt="Δικτυωμένα Πολυμέσα"/> Χαρακτηριστικά height και width μιας εικόνας height: καθορισμός ύψους width: καθορισμός πλάτους <img src="multimedia.gif" alt="Δικτυωμένα Πολυμέσα" height="419" width="336"/> Εφαρμογές Πολυμέσων
Εικόνες <img src="multimedia.gif" alt="Δικτυωμένα Πολυμέσα" height="419" width="336"/> <img src="multimedia.gif" alt="Δικτυωμένα Πολυμέσα" height="219" width="336"/> Εφαρμογές Πολυμέσων