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

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

H T M L Hyper Text Markup Language Γλώσσα Χαρακτηρισμού (Σήμανσης- Μορφοποίησης) Υπερκειμένου Παπαμανώλη Μαρία.

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


Παρουσίαση με θέμα: "H T M L Hyper Text Markup Language Γλώσσα Χαρακτηρισμού (Σήμανσης- Μορφοποίησης) Υπερκειμένου Παπαμανώλη Μαρία."— Μεταγράφημα παρουσίασης:

1 H T M L Hyper Text Markup Language Γλώσσα Χαρακτηρισμού (Σήμανσης- Μορφοποίησης) Υπερκειμένου Παπαμανώλη Μαρία

2 Hypertext (Υπερκείμενο)  Μορφή ηλεκτρονικού κειμένου  Δεν έχει γραμμικότητα (ακολουθητική – σταθερή μορφή)  Τρόπος οργάνωσης της πληροφορίας σε μονάδες (nodes) σχετιζόμενες μεταξύ τους  Τμήματα υπογραμμισμένα σύνδεση με άλλους κόμβους υπερσύνδεσμοι (hyperlinks )

3 Γλώσσα HTML Περιγραφική γλώσσα προγραμματισμού Χρησιμοποιείται για τη δημιουργία σελίδων ιστού (www) Καθορίζει τη λογική οργάνωση ενός αρχείου κειμένων που περιλαμβάνει συνδέσμους Χρήση links – hyperlinks για μεταφορά από μια ιστοσελίδα σε άλλη Χρησιμοποιεί απλές εντολές-ταμπέλες (tags) για τη μορφοποίηση του κειμένου Χρησιμοποιεί απλό text editor Διαδεδομένη και ευέλικτη Η HTML βασίζεται στη γλώσσα SGML (standard generalized markup language) μεγαλύτερο σύστημα επεξεργασίας εγγράφου

4 Εκδόσεις HTML 1990 Ο Tim Berners-Lee στη Γενεύη δημιούργησε το πρωτόκολλο http σηματοδότησε την αρχή του internet οι σελίδες που ήταν η βάση του www ήταν γραμμένες στη γλώσσα HTML (πρώτη έκδοση) 1994 από τον οργανισμό Internet Engineering Task Force πρότυπο HTML έκδοση 3.2 (αποδεκτή από Microsoft και Netscape) 1997 έκδοση 4.0 μια παραλλαγή της αρχικής γλώσσας είναι η XΗTML 4.01(δυναμικές εντολές

5 HTML και Internet Κάθε ιστοσελίδα στο Internet είναι αρχείο γραμμένο σε html Η σχεδίαση και η δομή σελίδας οργάνωση : - ιεραρχική δομή - γραμμική δομή Χαρακτηριστικά σελίδων:  Σαφήνεια –συντομία  Αυτονομία  Συμβατότητα γλώσσας για πολλούς browsers Δημοσίευση ιστοσελίδων στο διαδίκτυο: WED publishing Wizard (Windows)

6 HTML μια δομημένη γλώσσα Η βασική δομή ενός HTML αρχείου είναι: This is a title Εδώ παρεμβάλλονται οι εντολές της HTML TAGS

7 Τα tags Ορισμός:  Μικρές «εντολές» που ορίζουν την αρχή και το τέλος μιας λειτουργίας (εντολές δήλωσης)  Περικλείονται σε σύμβολα μικρότερου & μεγαλύτερου :  Όταν το tag κλείνει μια λειτουργία (tag τέλους) περιλαμβάνει και μια κάθετο Συνηθέστερη μορφή: επηρεαζόμενο κείμενο

8 Ανάλυση των βασικών tags ενός Html αρχείου - δήλωση στο browser ότι αρχίζει ένα html έγγραφο - περιέχει κώδικα γραμμένο σε html - ελέγχει τη δομή εγγράφου της σελίδας - όλο το περιεχόμενο της σελίδας βρίσκεται εντός της ετικέτας html -κάθε ετικέτα html εμφωλιασμένη (nested) - βασική πληροφορία που αφορούν το έγγραφο /πρόλογος για το υπόλοιπο κείμενο -συχνά όμως δεν εμφανίζεται στο browser -περιέχει την ετικέτα -αμφίπλευρη ετικέτα

9 … - τίτλος εγγράφου αντιστοιχεί στο περιεχόμενο της σελίδας -εντός της head - χρησιμοποιείται από σελιδοδείκτες (bookmarkers) του φυλλομετρητή -ετικέτα αμφίπλευρη -κυρίως περιεχόμενο (κείμενο- links) εγγράφου -αμφίπλευρη ετικέτα δήλωση στο browser ότι τελειώνει ένα html έγγραφο

10 Άλλα χαρακτηριστικά των Tags  Οι ετικέτες δεν εμφανίζονται από τα προγράμματα ανάγνωσης (μόνο από html αρχείο ή από το προέλευση εγγράφου)  Συχνά λειτουργούν ως μεταβλητές που παίρνουν τιμές  Δίνουν τίτλους στα διάφορα στοιχεία της σελίδας  Δεν γίνεται διάκριση μεταξύ κεφαλαίων και πεζών γραμμάτων αμφίπλευρες (δηλώνουν αρχή και τέλος κειμένου)  Λειτουργούν ως «μονόπλευρες» πχ

11 Δημιουργία HTML Τα αρχεία της HTML τα γράφουμε σε συντάκτες κειμένου (Frontpage Editor, Dreamweaver, WebEdit, HotDog, Home Site, HtmlNotes, WedMatter) προγράμματα που αποθηκεύουν αρχεία κειμένου σε μορφή ASCII. Τέτοια προγράμματα είναι : Notepad, wordpad, write (Windows) Edit (Dos) Vi, emacs, pico (Unix) TeachText (Macintosh) ⋆ το όνομα του αρχείου θα πρέπει να έχει επέκταση.Html ή.htm σε συστήματα dos ή windows που επιτρέπουν τις επεκτάσεις μόνο τριών χαρακτήρων.

12 Text Editor (διορθωτές) Το περιβάλλον του προγράμματος αυτού περιέχει: oΔυνατότητα χειρισμού εγγράφων HTML oΕργαλειόμπαρες ενσωμάτωση εντολών Html oΕκκίνηση με διαφορετικά πρότυπα (templates) δημιουργία ιστοσελίδων oΆμεσος έλεγχος του κώδικα & σχεδίασης της ιστοσελίδας (Internal Viewer) oΈλεγχος του κώδικα με εξωτερικούς browser [ Internet Explorer, Netscape Navigator]

13 ΧΗΤΜL Χαρακτηριστικά: Αποτελεί την υλοποίηση της Html πάνω στην λογική της XML, αυστηρότεροι όροι σύνταξης των tags Συμβατή με όλους τους browsers. Απαραίτητη προϋπόθεση το κενό (space) πριν το σύμβολο “/ ” Δημιουργία «καλοσχηματισμένων» (well formed) εγγράφων Όλες οι τιμές πρέπει να είναι εντός εισαγωγικών αλλά Όλα τα ονόματα πρέπει να είναι με μικρά γράμματα αλλά


14 XHTML Απαγορεύεται η σμίκρυνση αλλά Το όνομα (name) αντικαθίσταται από το (ID) Πρέπει να υπάρχει δήλωση του τύπου του εγγράφου (

15 Πορεία εμφάνισης Ιστοσελίδας Αφού πληκτρολογήσουμε το Url (δικτυακή διεύθυνση)… 1.Η ονομαστική διεύθυνση μεταφέρεται ως αίτημα στους servers ( διακομιστές που προσφέρουν σύνδεση στο Internet) 2.O server εντοπίζει την αριθμητική διεύθυνση (IP) που αντιστοιχεί σ’ αυτό το όνομα 3.Ο υπολογιστής διασυνδέεται μ’ αυτό το server και αρχίζουν να μεταφέρονται τα δεδομένα ( δομή σελίδας, περιεχόμενα, εικόνες..) 4.Ο browser συγκεντρώνει τις πληροφορίες και τις μορφοποιεί 5.Στήνει τη σελίδα στην οθόνη (ανάκτηση σελίδας από Web) Browser (φυλλομετρητής) πρόγραμμα ερμηνείας εντολών html (Ιnternet Explorer, opera κ.α

16 Επιπλέον.. Οι φυλλομετρητές (browsers) : λειτουργούν ως μορφοποιητές για την HTML) Διαδικασία : Διαβάζουμε μια σελίδα γραμμένη με την HTML σε ένα browser Ο browser διερμηνεύει τα tags (ετικέτες) της HTML Μορφοποιεί το κείμενο και τις εικόνες στην οθόνη Ωστόσο… Διαφορετικοί browsers σε διάφορους Η/Υ εμφανίζουν με διαφορετικό τρόπο κάθε στοιχείο της σελίδας

17 Μορφοποίηση κειμένου ΦΥΣΙΚA ΣΤΥΛ :, έντονη γραφή (Bold)., πλάγια γραφή (Italic)., υπογράμμιση., διακριτή διαγραφή., μεγαλύτερο μέγεθος από το περιβάλλον κείμενο., μικρότερο μέγεθος από το περιβάλλον κείμενο., δείκτης., εκθέτης. κεντρική στοίχιση η μορφοποίηση γίνεται σύμφωνα με τη δομή που δίνεται στο διορθωτή

18 ΛΟΓΙΚΑ ΣΤΥΛ : Τρόπο με τον οποίο το επιλεγμένο κείμενο χρησιμοποιείται από το φυλλομετρητή (όχι το πώς παρουσιάζεται) 1. κείμενο (Emphasize) πλάγια (italics) 2. κείμενο έντονα (bold) 3. χρήση μη αναλογικής γραμματοσειράς 4. κείμενο παραδείγματος μη αναλογική γραμματοσειρά 5. κείμενο για πληκτρολόγηση 6. μορφοποίηση μεταβλητής που αντικαθίσταται από τιμή 7. μορφοποιεί ορισμούς 8. μορφοποιεί ένα σύντομο αποσπάσιμα /παραπομπή

19 ΠΙΚΕΦΑΛΙΔΕΣ ΕΠΙΚΕΦΑΛΙΔΕΣ (Headings) Ξεχωριστό στυλ σε τμήματα του κειμένου Η HTML περιέχει 6 επίπεδα: πρώτο επίπεδο …. έκτο επίπεδο  στοίχιση στο κέντρο  αριστερή στοίχιση  H1 ALIGN=RIGHT> δεξιά στοίχιση ΠΑΡΑΓΡΑΦΟΙ Ετικέτα Διαχωρισμός παραγράφων (απόσταση) Νεότερες εκδόσεις αμφίπλευρη  στοίχιση στο κέντρο  αριστερή στοίχιση  P ALIGN=RIGHT> δεξιά στοίχιση ALIGN: παράμετρος που δίνει τη δυνατότητα στοίχισης

20 ΟΡΙΖΟΝΤΙΟΙ ΧΑΡΑΚΕΣ οριζόντια γραμμή στη θέση της ιστοσελίδας που εισάγεται (χωρίζει σε τμήματα) Παράμετροι: SIZE (πάχος γραμμής) WIDTH (οριζόντιο πλάτος γραμμής) NOSHADE (απλή γραμμή/ όχι τρισδιάστατη) ΑΛΛΑΓΗ ΓΡΑΜΜΗΣ- ΔΙΑΧΩΡΙΣΜΟΣ ΛΕΞΕΩΝ Αλλαγή γραμμής Αριστερό περιθώριο επόμενης γραμμής (παραμένει στην ίδια γραμμή) (κατάλληλο σημείο διαχωρισμού γραμμής)

21 ΓΡΑΜΜΑΤΟΣΕΙΡΑ  Αλλαγή γραμματοσειράς κείμενο  Αλλαγή μεγέθους γραμματοσειράς κείμενο ΧΡΩΜΑ Παράμετρος :TEXT=“RGB” (βάση παραγωγής χρώματος/ αριθμός 0-255) Κειμένου Τμήμα κειμένου κείμενο Φόντου

22 ΛΙΣΤΕΣ Λίστα :καταγραφή ομοειδών στοιχείων & χωρίζονται με σαφή και διακριτό τρόπο Μορφοποιήσεις: 1. Αριθμημένες λίστες (Ordered List ) first list item second list item 2. Μη αριθμημένες λίστες (Unordered List) first list item second list item εισαγωγή:με μονόπλευρη ετικέτα (List Item)

23 Λίστες ορισμού ή γλωσσάριου (Definition List) επεξηγήσεις first term its definition second term its definition 4. Φωλιασμένες λίστες (Nested List) ενσωματώνουν στοιχεία από άλλες λίστες

24 Εικόνες  Εισαγωγή εικόνας: (μονόπλευρη ετικέτα δήλωσης της εικόνας) (IMaGe SouRCe) παράμετροι:  WIDTH καθορισμός πλάτους  HEIGHT καθορισμός ύψους  ALT (ALTernatne Τag) τίτλος σε εικόνα  ALIGN στοίχιση ( LEFT,RIGHT,TOP,BOTTOM MIDDLE) * οι περισσότεροι browsers: JPEG,GIF,PNG (γραφικά)

25  Χρήση εικόνας ως συμβόλου συνδέσμου  Φόντο Ιστοσελίδας  Ένθετες & εξωτερικές εικόνες(inline images) Φορτώνονται αυτόματα μαζί με το κείμενο Μορφοποίηση GIF, GPEG Προγράμματα ψηφιακής επεξεργασίας εικόνας: Adobe Photoshop, Paint Shop Pro, CorelDraw

26 Σύνδεσμοι (links) Σύνδεσμος ενός σημείου μιας σελίδας σημαίνει τη δυνατότητα παραπομπής του Διαδικτύου σε άλλες πηγές πληροφόρησης Σκοπός :επικοινωνία ενός σημείου της html σε άλλο σημείο της ίδιας ή άλλης ιστοσελίδας Η κατασκευή ενός συνδέσμου σε html απαιτεί: Το όνομα αρχείου ή Url που δείχνει ο σύνδεσμος Κείμενο που θα χρησιμοποιηθεί ως ενεργό σημείο (hotspot) τονισμένο στο φυλλομετρητή

27 Ενεργό σημείο ετικέτα ανοίγματος σελίδα μετάβασης κείμενο που λειτουργεί ως Link tag κλεισίματος  Αποστολή ηλεκτρονικού ταχυδρομείου Όνομα MAILTO: address address:ηλεκτρονική διεύθυνση παραλήπτη Όνομα:παραλήπτη

28 πίνακες …. … … ….. ….. …….. BORDER πλαίσια πίνακα CAPTION κείμενο τίτλου Ετικέτα εισαγωγής πίνακα Τίτλος πίνακα Επικεφαλίδα πίνακα Δεδομένα πίνακα Ετικέτα τέλους πίνακα περιεχόμενο επικεφαλίδας περιεχόμενο γραμμών δεδομένα

29 Άλλες… ΦΟΡΜΕΣ Επιτρέπει: Εισαγωγή κειμένου Επιλογές  Πλαίσια κειμένου (επιλογή ενός ή περισσότερων στοιχείων )  Πλήκτρα επιλογής ( επιλογή ενός στοιχείου)  Λίστες επιλογής ΣΧΟΛΙΑ ΣΧΟΛΙΑ ( ( αγνοούνται από τo browser) ΑΠΟΣΠΑΣΜΑΤΑ ΑΠΟΣΠΑΣΜΑΤΑ ( Διαφοροποιούνται από το κανονικό κείμενο με εσοχές) ΔΙΕΥΘΥΝΣΕΙΣ ΔΙΕΥΘΥΝΣΕΙΣ ( υπογραφή, ημερομηνία δημιουργίας, πνευματικά δικαιώματα)

30

31 ΟΔΗΓΟΣ ΣΠΟΥΔΩΝ ΟΔΗΓΟΣ ΣΠΟΥΔΩΝ ΔΥΝΗΤΙΚΕΣ ΚΟΙΝΟΤΗΤΕΣ : ΚΟΙΝΩΝΙΟ-ΨΥΧΟΛΟΓΙΚΕΣ ΠΡΟΣΕΓΓΙΣΕΙΣ ΚΑΙ ΤΕΧΝΙΚΕΣ ΕΦΑΡΜΟΓΕΣ Πάντειο Πανεπιστήμιο (Τμήμα Ψυχολογίας) Ερευνητικό Ακαδημαϊκό Ινστιτούτο Τεχνολογίας Υπολογιστών ΤΕΙ Μεσολογγίου Ηλεκτρονική Δημοκρατία Δυνητική Οργάνωση Ηλεκτρονικό Εμπόριο Ηλεκτρονική Εκπαίδευση adress: Μαραθωνοδρόμων και Χατζοπούλου 16


Κατέβασμα ppt "H T M L Hyper Text Markup Language Γλώσσα Χαρακτηρισμού (Σήμανσης- Μορφοποίησης) Υπερκειμένου Παπαμανώλη Μαρία."

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


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