Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1) Τ.Ε.Ι. Αθήνας Τμήμα Ηλεκτρονικής.

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1) Τ.Ε.Ι. Αθήνας Τμήμα Ηλεκτρονικής."— Μεταγράφημα παρουσίασης:

1 Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1) Τ.Ε.Ι. Αθήνας Τμήμα Ηλεκτρονικής

2 Εφαρμογές Πολυμέσων 2 HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα έγγραφα δεν είναι γλώσσα προγραμματισμού, όπως η C,C++, Java δεν είναι πρόγραμμα Διεθνές πρότυπο που χρησιμοποιείται για την «έκδοση» κειμένων στο Web

3 Εφαρμογές Πολυμέσων 3 HTML Τα αρχεία HTML είναι απλά αρχεία κειμένου, με κατάληξη.htm ή.html Για την συγγραφή των αρχείων HTML μπορούμε να χρησιμοποιήσουμε από ένα απλό κειμενογράφο (π.χ. Notepad των Windows) μέχρι μια πολύπλοκη εφαρμογή (π.χ. Adobe Dreamweaver)

4 Εφαρμογές Πολυμέσων 4 Ετικέτες (tags) Τα αρχεία HTML περιέχουν ειδικές προκαθορισμένες- δεσμευμένες λέξεις, οι οποίες ονομάζονται ετικέτες (tags) Οι ετικέτες περιγράφουν τον τρόπο με τον οποίο θα εμφανίζεται το αρχείο HTML από τον browser Δομή των ετικετών: κείμενο π.χ. CD Store Στο όνομα_ετικέτας δεν γίνεται διάκριση μεταξύ κεφαλαίων ή πεζών (μη case-sensitive) π.χ. τα,, είναι ισοδύναμα Στην XHTML γίνεται διάκριση

5 Εφαρμογές Πολυμέσων 5 Ετικέτες (tags) Στην HTML οι ετικέτες μπορεί να είναι ένθετες ετικέτες στο εσωτερικό άλλων ετικετών Hello from TEI of Athens Οι ένθετες ετικέτες τερματίζουν με αντίστροφο τρόπο από αυτόν που δηλώνονται CD Store Ορθός τρόπος γραφής ένθετων ετικέτων Ονοματεπώνυμο

6 Εφαρμογές Πολυμέσων 6 Χαρακτηριστικά ετικετών Περιγράφουν με μεγαλύτερη λεπτομέρεια τον τρόπο εμφάνισης μιας ετικέτας Περισσότερα χαρακτηριστικά διαχωρίζονται μεταξύ τους με κενό Δομή του χαρακτηριστικού ετικέτας κείμενο Hello from TEI of Athens

7 Εφαρμογές Πολυμέσων 7 Δομή εγγράφου HTML Αρχική ετικέτα η αποτελείται από δύο ετικέτες Στο … περιέχονται πληροφορίες όπως ο τίτλος της ιστοσελίδας Στο … περιέχεται το σώμα του εγγράφου τι θα εμφανιστεί στο παράθυρο του browser

8 Εφαρμογές Πολυμέσων 8 Ετικέτες στην HEAD Η ετικέτα καθορίζει τον τίτλο της σελίδας HTML περιέχεται μέσα στην ετικέτα Ο browser χρησιμοποιεί τον τίτλο ( ) εμφανίζεται στην «μπάρα τίτλου» του παραθύρου του browser χρησιμοποιείται ως όνομα στα bookmarks Το Google χρησιμοποιεί τον τίτλο για να ταξινομήσει την σελίδα Βασικός τρόπος διαφήμισης της σελίδας Μπορεί να μην λάβει υπόψη τον τίτλο αν δεν είναι ορθά ορισμένος Μη ορθή χρήση του τίτλου Η σελίδα μου Σελίδα 1 Ορθή χρήση τίτλου Ηλεκτρονικό κατάστημα πώλησης CDs

9 Εφαρμογές Πολυμέσων 9 Ετικέτες στην HEAD Η ετικέτα χρησιμοποιείται για την εισαγωγή μεταδεδομένων (metadata) στην επικεφαλίδα Χαρακτηριστικό "name" για τη δήλωση του ονόματος της ιδιότητας Χαρακτηριστικό "content" για τη δήλωση της τιμής της ιδιότητας Παράδειγμα: Η ετικέτα αποτελεί πάντα μια κενή ετικέτα έχει μόνο χαρακτηριστικά

10 Εφαρμογές Πολυμέσων 10 Ετικέτες στην HEAD Tα ονόματα χαρακτηριστικού «description» και «keywords» χρησιμοποιούνται από την Google για την ταξινόμηση και εύρεση σελίδων στο Web. Η διαδικασία εύρεσης εξετάζει την δοσμένη φράση με το description και τα keywords Το description και τα keywords δεν είναι ορατά στη σελίδα Παράδειγμα:

11 Εφαρμογές Πολυμέσων 11 Ετικέτες στην HEAD Το χαρακτηριστικό «http-equiv» της ετικέτας καθορίζει στον πελάτη να συμπεριφερθεί σαν να έχει ήδη λάβει μια επικεφαλίδα http. Παράδειγμα: καθορίζει στον Server να ανακοινώσει στον πελάτη ότι η σελίδα είναι γραμμένη σε HTML με κωδικοποίηση utf-8. Χρήσιμο όταν η σελίδα διαβάζεται τοπικά (δεν υπάρχουν επικεφαλίδες http)

12 Εφαρμογές Πολυμέσων 12 Επικεφαλίδες Στην HTML υπάρχουν έξι επίπεδα επικεφαλίδων, τα οποία δηλώνονται με την ετικέτα …, όπου το n είναι ένας ακέραιος αριθμός από 1 έως και 6 Η σημαντικότητα των επικεφαλίδων ξεκινάει από την H1 (περισσότερο σημαντική) και φθίνει μέχρι την Η6 (λιγότερο σημαντική) Hello from TEI of Athens

13 Εφαρμογές Πολυμέσων 13 Ειδικές Ετικέτες Ετικέτα Αλλαγή παραγράφου διαχωρισμός του κειμένου με κενές γραμμές Ετικέτα Οριζόντια γραμμή εμφάνιση μιας οριζόντιας γραμμής στο κείμενο Ετικέτα Αλλαγή γραμμής Hello from TEI of Athens The course is called Multimedia Applications Introduction to HTML

14 Εφαρμογές Πολυμέσων 14 Σχόλια Ένα σχόλιο περιέχεται μεταξύ των Μπορεί να περιλαμβάνει περισσότερες από μία γραμμή σχολίων Τα σχόλια αγνοούνται από τον browser Η πληροφορία που περιέχεται στα σχόλια δεν εμφανίζεται Χρησιμοποιείται για να κατανοήσει ο προγραμματιστής την σελίδα Hello from TEI of Athens The course is called Multimedia Applications Introduction to HTML

15 Εφαρμογές Πολυμέσων 15 Ετικέτες καθορισμού στυλ Ετικέτα Έντονη γραφή Το κείμενο που περικλείεται εμφανίζεται με έντονη γραφή Ετικέτα Πλάγια γραφή Το κείμενο που περικλείεται εμφανίζεται με πλάγια γραφή Ετικέτα Υπογραμμισμένο κείμενο Ετικέτα Διαγραμμένο κείμενο Ετικέτα Το κείμενο εμφανίζεται σαν κείμενο από γραφομηχανή

16 Εφαρμογές Πολυμέσων 16 Ετικέτες καθορισμού στυλ Welcome to TEI of Athens

17 Εφαρμογές Πολυμέσων 17 Λίστες – Μη αριθμημένες Η αρχή και ο τερματισμός μιας μη αριθμημένης λίστα δηλώνεται με την ετικέτα ….. Κάθε στοιχείο της λίστας δηλώνεται με την ετικέτα ….. το στοιχειό πρέπει να περιέχεται εντός της ετικέτας αυτής Κάθε στοιχείο της λίστας εμφανίζεται στον browser μετά από μια κουκίδα Οι δραστηριότητες του Πανεπιστημίου: Τουρνουά Μπάσκετ Διαγωνισμός Χορού Διαγωνισμός Τάβλι

18 Εφαρμογές Πολυμέσων 18 Λίστες – Αριθμημένες Η αρχή και ο τερματισμός μιας αριθμημένης λίστα δηλώνεται με την ετικέτα ….. Κάθε στοιχείο της λίστας δηλώνεται με την ετικέτα ….. Κάθε στοιχείο της λίστας εμφανίζεται στον browser μετά από έναν αριθμό Ο αριθμός αυτός δηλώνει τη θέση του στοιχείου στη λίστα Οι δραστηριότητες του Πανεπιστημίου: Τουρνουά Μπάσκετ Διαγωνισμός Χορού Διαγωνισμός Τάβλι

19 Εφαρμογές Πολυμέσων 19 Λίστες – Λίστα Ορισμών Επιτρέπει τη δημιουργία επεξηγήσεων διαφόρων ορισμών Δηλώνεται με την ετικέτα … και περιέχει ζεύγη: τίτλος ορισμού – επεξήγηση ορισμού Για τους τίτλους των ορισμών χρησιμοποιείται η ετικέτα … Για τις επεξηγήσεις των ορισμών η ετικέτα …

20 Εφαρμογές Πολυμέσων 20 Εικόνες Βασικοί τύποι εικόνων στην HTML gif jpg bmp (μεγάλο μέγεθος αρχείου) tiff (μεγάλο μέγεθος αρχείου) Ετικέτα Εισαγωγή μιας εικόνας στη σελίδα Χαρακτηριστικά της ετικέτας src alt height width

21 Εφαρμογές Πολυμέσων 21 Εικόνες Χαρακτηριστικό src μιας εικόνας Δηλώνει την τοποθεσία που βρίσκεται το αρχείο της Χαρακτηριστικό alt μιας εικόνας Δηλώνει τον τίτλο της εικόνας Σε browser που δεν υποστηρίζουν γραφικά στη θέση της εικόνας θα φαίνεται ο τίτλος της Χαρακτηριστικά height και width μιας εικόνας height: καθορισμός ύψους width: καθορισμός πλάτους

22 Εφαρμογές Πολυμέσων 22 Εικόνες


Κατέβασμα ppt "Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1) Τ.Ε.Ι. Αθήνας Τμήμα Ηλεκτρονικής."

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google