Αλεξιάδης Γεώργιος (ΠΕ86) -

Transcript

1

2 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα επεξεργασίας εγγράφων. Είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου Ιστού.

3 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; Δεν είναι γλώσσα προγραμματισμού, αλλά μια περιγραφική γλώσσα, δηλ. ένας ειδικός τρόπος γραφής κειμένου. Ορίζει ένα σύνολο κοινών στυλ για τις ιστοσελίδες: Τίτλοι (Titles) Επικεφαλίδες (Headings) Παράγραφοι (Paragraphs) Λίστες (Lists) Πίνακες (Tables) Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα < >, που αποκαλούνται ετικέτες (tags).

4 11.1 Γενική Εισαγωγή στην HTML Ποια είναι η χρησιμότητα της HTML; Οι ιστοσελίδες που επισκεπτόμαστε στο Internet δεν είναι τίποτε άλλο παρά αρχεία τα οποία περιέχουν κώδικα γραμμένο σε HTML. Άρα, αν γνωρίζει κάποιος να συντάσσει κώδικα σε HTML, τότε ξέρει ένα από τα βασικά συστατικά για να δημιουργήσει ένα web site.

5 11.1 Γενική Εισαγωγή στην HTML Ανάκτηση ιστοσελίδας HTML: Όταν ο φυλλομετρητής ανακτά μια ιστοσελίδα, στην ουσία ανακτά τον κώδικα HTML της ιστοσελίδας. Στη συνέχεια, ο φυλλομετρητής «διαβάζει» και «διερμηνεύει» τις ετικέτες της HTML, δημιουργεί την ιστοσελίδα και την εμφανίζει στην οθόνη, μορφοποιώντας το κείμενο και τις εικόνες της. Σχετικό διαδραστικό υλικό στο Φωτόδεντρο

6 11.1 Γενική Εισαγωγή στην HTML Ιστορική Αναδρομή 1990: ο Tim Berners-Lee από το CERN δημιουργεί το πρωτόκολλο HTTP (HyperText Transfer Protocol) Σηματοδότηση της αρχής του Παγκόσμιου Ιστού (World Wide Web WWW)

7 11.1 Γενική Εισαγωγή στην HTML Ιστορική Αναδρομή : Πρώτη έκδοση της HTML και πρόχειρο HTML+ 1994: Πρότυπο HTML 2.0 από το διεθνή οργανισμό Internet Engineering Task Force (IETF) 1996: HTML 3.0 μη αποδεκτή από Microsoft και Netscape Αντικατάσταση από την HTML 3.2 της διεθνούς κοινότητας δημιουργών λογισμικού W3C 1999: HTML 4.0 από την κοινότητα W3C 2008: HTML 5.0 από την κοινότητα W3C

8 11.1 Γενική Εισαγωγή στην HTML Αρχεία HTML: Περιέχουν: το κείμενο της ιστοσελίδας, και τις ετικέτες της HTML, που υποδεικνύουν τα στοιχεία, τη δομή και τη μορφοποίηση των ιστοσελίδων, καθώς και τους συνδέσμους υπερ-κειμένου προς άλλες ιστοσελίδες ή προς αρχεία άλλων μορφών (πολυμέσα) Δημιουργούνται/γράφονται σε συντάκτες κειμένων, δηλαδή προγράμματα που μπορούν να αποθηκεύσουν αρχεία κειμένου σε μορφή ASCII, όπως το Σημειωματάριο των Windows και το Geany του Linux. Έχουν επέκταση.html ή.htm

9 11.1 Γενική Εισαγωγή στην HTML Σύνταξη και χαρακτηριστικά ετικετών της HTML: Εμφανίζονται είτε μονομελώς, π.χ. <BR>, <HR>, <IMG>, είτε κατά ζεύγη, π.χ. <P> </P>, <HEAD> </HEAD> Εμφάνιση κατά ζεύγη: <ΌνομαΕτικέτας> επηρεαζόμενο κείμενο </ΌνομαΕτικέτας> Η πρώτη ετικέτα οριοθετεί την αρχή ισχύος της, ενώ η δεύτερη το τέλος της, μεταξύ των οποίων περικλείεται το κείμενο που επηρεάζουν. Κάποιες ετικέτες περιέχουν επιπλέον πληροφορίες και κείμενο μέσα στα σύμβολα < >, π.χ. <IMG SRC=. >

10 11.1 Γενική Εισαγωγή στην HTML Σύνταξη και χαρακτηριστικά ετικετών της HTML: Προσέχουμε να μην υπάρχει επικάλυψη μεταξύ των ετικετών, καθώς όλες σχηματίζουν ξεχωριστές ένθετες ενότητες κειμένου. Κάθε διμελής ετικέτα πρέπει να κλείνει πάντοτε με την ετικέτα τέλους της, ενώ οι μονομελείς ετικέτες δεν επιδέχονται κλείσιμο. Ακόμη κι όταν κλείνουμε μια ετικέτα, κλείνουμε την πιο πρόσφατη που ανοίξαμε.

11 11.1 Γενική Εισαγωγή στην HTML Η HTML χρησιμοποιεί διάφορες ετικέτες για την περιγραφή της συνολικής δομής μιας ιστοσελίδας. Οι ετικέτες αυτές καθορίζουν την κατασκευή και εμφάνιση της ιστοσελίδας μας στους φυλλομετρητές, και παρέχουν απλές πληροφορίες για την ιστοσελίδα, όπως τον τίτλο και το συγγραφέα της.

12 11.1 Γενική Εισαγωγή στην HTML Βασικές ετικέτες της HTML:

13 11.1 Γενική Εισαγωγή στην HTML Ετικέτες Επικεφαλίδων: Οι επικεφαλίδες (headings) χρησιμοποιούνται για το διαχωρισμό των ενοτήτων κειμένου ακριβώς όπως και σ ένα βιβλίο. Αποτελούν στοιχεία διάρθρωσης κειμένου. 6 επίπεδα επικεφαλίδων, με ετικέτες της μορφής: <H1> Τίτλος Επικεφαλίδας </H1> Οι επικεφαλίδες δεν αριθμούνται όταν εμφανίζονται στην οθόνη, αλλά ξεχωρίζουν από το κανονικό κείμενο ως προς το μέγεθος, την ένταση ή την υπογράμμιση του κειμένου. Δεν έχει σημασία για το φυλλομετρητή εάν οι ετικέτες γραφούν με κεφαλαία ή πεζά γράμματα.

14 11.1 Γενική Εισαγωγή στην HTML Ετικέτες Επικεφαλίδων: Παράδειγμα <H1> Γαλαξίας </H1> <H2> Γη </H2> <H3> Ευρώπη </H3> <H4> Ελλάδα </H4> <H5> Κρήτη </H5> <H6> Ηράκλειο </H6>

15 11.1 Γενική Εισαγωγή στην HTML Ετικέτα Δεσμού (Anchor Tag): Δημιουργεί σύνδεσμο είτε σε μια HTML ιστοσελίδα είτε σε σημείο της ίδιας ιστοσελίδας (δεσμός). Μορφή ετικέτας: <A HREF=.. > Κείμενο εμφάνισης </A> Η ιδιότητα HREF (Hypertext REFerence Αναφορά υπερκειμένου) χρησιμοποιείται για τον καθορισμό του υπερκειμένου στο οποίο δείχνει ο σύνδεσμος. Π.χ. <A HREF= > ΠΣΔ </A> Στην ιστοσελίδα είναι ορατό μόνο το δεύτερο μέρος (πράσινο χρώμα) και όταν κάνουμε κλικ πάνω του, ο φυλλομετρητής χρησιμοποιεί το πρώτο μέρος (υπερκείμενο) ως σημείο προορισμού.

16 11.1 Γενική Εισαγωγή στην HTML Ετικέτα Εικόνας (Image Tag): Αφού αποκτήσουμε μια εικόνα σε μορφή GIF ή JPEG, μπορούμε να τη συμπεριλάβουμε στην ιστοσελίδα μας με τη μονομελή ετικέτα <IMG> χρησιμοποιώντας την ιδιότητα SRC. Η ιδιότητα SRC δείχνει το όνομα αρχείου ή το URL της εικόνας, γραμμένο μέσα σε εισαγωγικά. Μορφή ετικέτας: Π.χ. <IMG SRC= Εικόνα1.gif > <IMG SRC=.. > Στην περίπτωση αυτήν πρέπει πάντοτε η εικόνα που έχουμε αποκτήσει να βρίσκεται στον ίδιο φάκελο με το αρχείο της ιστοσελίδας μας!!!

17 11.2 Η HTML5 Τελευταία εξέλιξη της HTML Εκτενής χρήση στη δημιουργία εφαρμογών διαδικτύου για φορητές συσκευές Προσθήκη νέων χαρακτηριστικών δομής και σύνταξης Ιδιαίτερο βάρος στη σημασιολογία: η ονομασία κάθε ετικέτας υπονοεί τη χρήση της και βοηθάει στην κατανόηση της λειτουργίας της από τον άνθρωπο Νέες δυνατότητες περιορισμού της ανάγκης χρήσης πρόσθετων (plug-ins) στα προγράμματα πλοήγησης

18 11.2 Η HTML5 Οι νέες δυνατότητες της HTML5: Νέες ετικέτες για σημασιολογικό διαχωρισμό των μερών του εγγράφου (<header>, <section>, <article>, <nav>.) Νέες ετικέτες για εισαγωγή ήχου (<audio>) και βίντεο (<video>) Νέες δυνατότητες σχεδίασης (canvas), μεταφοράς και απόθεσης (drag-and-drop), αποθήκευσης απλών δεδομένων (web storage) και λειτουργίας εκτός σύνδεσης (offline web applications) Εμπλουτισμένα στοιχεία για φόρμες (όπως ημερομηνίες, ηλεκτρονικές διευθύνσεις, εύρος τιμών) και πινακοποιημένα δεδομένα, καθώς και ενσωματωμένη διαχείριση διανυσματικών γραφικών μορφής SVG

19 11.2 Η HTML5 Ετικέτα βίντεο: Μορφή ετικέτας: <VIDEO SRC=... WIDTH= HEIGHT= CONTROLS> Μήνυμα λάθους </VIDEO> Π.χ. <VIDEO SRC= giorti.mp4 WIDTH= 320 HEIGHT= 240 CONTROLS> Δεν υποστηρίζεται </VIDEO> Ιδιότητες ετικέτας: SRC: διεύθυνση αρχείου βίντεο WIDTH και HEIGHT: διαστάσεις βίντεο CONTROLS: εμφάνιση στοιχείων ελέγχου

20 11.2 Η HTML5 Ετικέτα ήχου: Μορφή ετικέτας: <AUDIO CONTROLS> <SOURCE SRC= TYPE= /> Μήνυμα λάθους </AUDIO> Π.χ. <AUDIO CONTROLS> <SOURCE SRC= ixos.mp3 TYPE= audio/mpeg /> <SOURCE SRC= ixos.ogg TYPE= audio/ogg /> Δεν υποστηρίζεται </AUDIO> Ιδιότητα SRC: διεύθυνση αρχείου ήχου Ιδιότητα TYPE: τύπος/μορφή ήχου

21 11.2 Η HTML5 Παρατηρήσεις για ετικέτες ήχου και βίντεο: Εισαγωγή εναλλακτικών αρχείων σε εμφωλευμένες ετικέτες <SOURCE> για επιλογή του καταλληλότερου από το πρόγραμμα πλοήγησης. Το Μήνυμα λάθους εμφανίζεται σε περίπτωση που δεν μπορεί να γίνει αναπαραγωγή λόγω μη υποστήριξης από το πρόγραμμα πλοήγησης ή έλλειψης απαραίτητων αποκωδικοποιητών για την αναπαραγωγή.

22 11.2 Η HTML5 Δομή εγγράφου HTML: Ακολουθεί κανόνες που αφορούν στη σειρά των δομικών στοιχείων από τα οποία αποτελείται και στη σημασία που έχει το καθένα. Η κεφαλίδα (header) προηγείται πάντοτε του υποσέλιδου (footer). Ανάμεσα σε επικεφαλίδα και υποσέλιδο τοποθετούνται τα τμήματα περιεχομένου του εγγράφου (articles, sections).

23 11.2 Η HTML5

24 11.2 Η HTML5

25 11.2 Η HTML5 HTML5 και Εφαρμογές Διαδικτύου: Σε συνδυασμό με τεχνολογίες όπως η Javascript, οι φυλλομετρητές μπορούν να εκτελούν εφαρμογές εφάμιλλες των εφαρμογών που εγκαθίστανται στον προσωπικό υπολογιστή. Αξιοποίηση της HTML5 σε εφαρμογές για φορητές συσκευές, όπως ταμπλέτες και κινητά τηλέφωνα. Με αξιοποίηση της τεχνολογίας CSS οι εφαρμογές αυτές μπορούν να προσαρμόζονται στις διαστάσεις της οθόνης και να εμφανίζουν με προσαρμοσμένο τρόπο το περιεχόμενο Αλεξιάδης της Γεώργιος εφαρμογής (ΠΕ86) - (responsive web design).

26 11.3 Ενσωμάτωση (Embedding) Η εισαγωγή βίντεο και ήχου σε ένα έγγραφο HTML είναι ένα παράδειγμα ενσωμάτωσης περιεχομένου. Η πλειονότητα των ιστοσελίδων σήμερα παρέχουν τρόπους ενσωμάτωσης περιεχομένου σε άλλες ιστοσελίδες. Η κυριότερη ετικέτα ενσωμάτωσης περιεχομένου είναι η iframe, η οποία υποστηρίζει μεταξύ των άλλων ιδιότητες καθορισμού μεγέθους και λειτουργεί ως ένα κομμάτι ξεχωριστής πλοήγησης μέσα σε μια ιστοσελίδα. Η ενσωμάτωση μπορεί να γίνει και με χρήση της ετικέτας div σε συνδυασμό με κώδικα στη γλώσσα Javascript. Δεν απαιτείται καμία ιδιαίτερη γνώση για την ενσωμάτωση περιεχομένου (copy-paste).

27 11.3 Ενσωμάτωση (Embedding)

28 11.4 Καθορίζοντας την εμφάνιση CSS CSS: Cascading Style Sheets (Αλληλουχίες Φύλλων Στυλ) Πρόκειται για μια γλώσσα σήμανσης για τον καθορισμό της μορφής και εμφάνισης εγγράφων HTML. Περιλαμβάνει κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων ενός εγγράφου HTML. Οι κανόνες είναι ανεξάρτητοι από το ίδιο το έγγραφο. Επιτρέπουν στον συντάκτη να εστιάσει στη δομή και το περιεχόμενο του εγγράφου, και να καθορίσει αυτόνομα και ανεξάρτητα τη διάταξη και την εμφάνισή του. Ο παραπάνω διαχωρισμός επιτρέπει την προσαρμογή της διάταξης και της εμφάνισης ενός εγγράφου HTML ανεξάρτητα από το ίδιο το έγγραφο, και επιτυγχάνεται συνήθως με την καταγραφή κανόνων σε ξεχωριστά αρχεία.

29 11.4 Καθορίζοντας την εμφάνιση CSS Τρόποι σύνδεσης αρχείου.css με έγγραφο HTML: 1. Με την ετικέτα <LINK> μέσα στην ετικέτα <HEAD> <LINK REL= stylesheet MEDIA= screen HREF= to-styl-mou.css > 2. Με τη ενσωμάτωση των κανόνων στο έγγραφο με την ετικέτα <STYLE> <STYLE H1 { color: red; } </STYLE>

30 11.4 Καθορίζοντας την εμφάνιση CSS Χαρακτηριστικοί κανόνες μορφοποίησης:

34 11.4 Καθορίζοντας την εμφάνιση CSS Τρόποι δημιουργίας εγγράφων HTML: Τόσο τα έγγραφα HTML όσο και τα έγγραφα CSS είναι αρχεία απλού κειμένου. Η επεξεργασία τους μπορεί να γίνει με οποιονδήποτε κειμενογράφο, όπως το Σημειωματάριο. Προτείνεται η χρήση κειμενογράφου με δυνατότητες αναγνώρισης σύνταξης, όπως το Notepad++. Ο χρωματισμός που παρέχει διευκολύνει τη σύνταξη και επεξεργασία των εγγράφων. Δυνατότητα αποθήκευσης κειμένου ως ιστοσελίδα HTML.

35 11.4 Καθορίζοντας την εμφάνιση CSS Τρόποι δημιουργίας εγγράφων HTML: Εφαρμογές διαδικτύου για δοκιμή δυνατοτήτων HTML & CSS: jfiddle ( dabblet ( cssdesk ( codepen (