Εισαγωγή στην HTML ΚΕΦΑΛΑΙΟ 11
Τι είναι η HTML HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Είναι η βασική γλώσσα δόμησης σελίδων του Παγκόσμιου Ιστού Βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language
Τι είναι η HTML (2) Δεν είναι γλώσσα προγραμματισμού αλλά περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα < > (ετικέτες - tags) Ο Φυλλομετρητής ανακτά τον κώδικα HTML, «διαβάζει» και «διερμηνεύει» τις ετικέτες, δημιουργεί την ιστοσελίδα και την εμφανίζει, μορφοποιώντας το κείμενο και τις εικόνες
Ιστορική αναδρομή Το 1990 ο Tim Berners-Lee (CERN) δημιούργησε το πρωτόκολλο HTTP (HyperText Transfer Protocol), με το οποίο μπορούμε να μεταφέρουμε κάθε είδους πληροφορία μέσα στο Διαδίκτυο Οι ιστοσελίδες, ήταν γραμμένες στην πρώτη έκδοση της γλώσσας HTML H HTML, περνώντας από HTML σε HTML+, σε HTML 2, σε HTML 3.2 και σε HTML 4, απέκτησε δυνατότητες εμφάνισης κινούμενων γραφικών εικόνων και άλλων ειδικών εφέ.
Τα αρχεία HTML Γράφονται σε συντάκτες κειμένου Αποθηκεύονται σε μορφή ASCII Έχουν επέκταση .html ή .htm Περιέχουν: το κείμενο της ιστοσελίδας τις ετικέτες της HTML
Οι ετικέτες HTML Yποδεικνύουν τα στοιχεία, τη δομή και τη μορφοποίηση των ιστοσελίδων, καθώς και τους συνδέσμους υπερ-κειμένου προς άλλες ιστοσελίδες ή προς αρχεία άλλων μορφών (πολυμέσα) Οι περισσότερες εμφανίζονται κατά ζεύγη <ΌνομαΕτικέτας> επηρεαζόμενο κείμενο </ΌνομαΕτικέτας> Oρισμένες είναι «μονομελείς», άλλες περιέχουν επιπλέον πληροφορίες και κείμενο μέσα στα σύμβολα < >
Bασικές ετικέτες <HTML>...</HTML> : Αρχή και τέλος ιστοσελίδας <HEAD>...</HEAD> : Επικεφαλίδα (Διαχειριστικής φύσεως πληροφορίες που δεν προβάλονται) <BODY>...</BODY> : Σώμα - περιεχόμενο ιστοσελίδας <TITLE>...</TITLE> : Ο τίτλος της ιστοσελίδας <P>...</P> : Παράγραφος <BR> : Αλλαγή γραμμής <IMG> : Εισαγωγή εικόνας και παραμέτρων θέσης, μεγέθους της κ.ά. <A HREF="URL">...</A> Δεσμός με ιστοσελίδα
Παράδειγμα <HTML> <HEAD> <TITLE> Εδώ είναι ο τίτλος </TITLE> </HEAD> <BODY> ... κυρίως κείμενο ... </BODY> </HTML>
Ετικέτες Επικεφαλίδων Χρησιμοποιούνται για τον διαχωρισμό των ενοτήτων κειμένου H HTML ορίζει 6 επίπεδα επικεφαλίδων, Μορφή ετικέτας <H1> Τίτλος Επικεφαλίδας </H1> Δεν αριθμούνται αλλά έχουν διαφορετική μορφοποίηση Αποτελούν στοιχεία διάρθρωσης κειμένου
Παράδειγμα επικεφαλίδων <H1>Γαλαξίας</H1> <H2>Γη </H2> <H3>Ευρώπη</H3> <H4>Ελλάδα</H4> <H5>Κρήτη</H5> <H6>Ηράκλειο</H6>
Σύνδεσμοι Ετικέτες <Α> και </Α> (anchor) Μπορεί να χρησιμοποιηθεί και για τη δημιουργία δεσμών (συνδέσμων προς σημεία της ίδιας ιστοσελίδας) Λέγεται και ετικέτα δεσμού (anchor tag) Μορφή: <A HREF="http://www.sch.gr">ΠΣΔ</A> Η ιδιότητα HREF καθορίζει που δείχνει ο σύνδεσμος Ορατό μόνο το κείμενο μεταξύ των tag
Εισαγωγή Εικόνας Ετικέτα <IMG> Δεν έχει ετικέτα τέλους Έχει πολλές ιδιότητες Πιο σημαντική η SRC (source). Δείχνει το όνομα αρχείου ή το URL της εικόνας γραμμένο μέσα σε εισαγωγικά Παράδειγμα <P> <IMG SRC="image.jpg"> </P>
Επισημάνσεις Δεν έχει σημασία για το φυλλομετρητή, εάν οι ετικέτες γραφούν με κεφαλαία ή πεζά Πρέπει να προσέχουμε, ώστε να μην υπάρχει επικάλυψη μεταξύ των ετικετών Όταν κλείνουμε μια ετικέτα, κλείνουμε την πιο πρόσφατη που ανοίξαμε
HTML 5
Η HTML5 Χρησιμοποιείται εκτενώς στη δημιουργία εφαρμογών διαδικτύου για φορητές συσκευές Προσθέτει νέα χαρακτηριστικά δομής και σύνταξης Δίνει ιδιαίτερο βάρος στη σημασιολογία των ετικετών Περιορίζει την ανάγκη χρήσης πρόσθετων (plug-ins) στα προγράμματα πλοήγησης
Πιο συγκεκιρμένα Ετικέτες για σημασιολογικό διαχωρισμό των μερών του εγγράφου (header, section, article, nav) Ετικέτες για εισαγωγή ήχου και βίντεο (audio, video) Νέες δυνατότητες σχεδίασης (canvas), drag-and-drop, αποθήκευσης απλών δεδομένων (web storage) και λειτουργίας εκτός σύνδεσης Εμπλουτισμένα στοιχεία για φόρμες (ημ/νίες, ηλεκτρονικές δ/νσεις, εύρος τιμών) Πινακοποιημένα δεδομένα Ενσωματωμένη διαχείριση διανυσματικών γραφικών μορφής SVG.
Εισαγωγή βίντεο και ήχου Η ετικέτα video περιλαμβάνει ιδιότητες για στοιχεία όπως το μέγεθος του βίντεο, το αν θα παρέχονται πλήκτρα ελέγχου κ.α. Ενσωμάτωση video <video src="car.mp4" width="440" height="240" controls></video> Ενσωμάτωση ήχου <audio controls> <source src="ixos.mp3" type="audio/mpeg" /> <source src="ixos.ogg" type="audio/ogg" /> Δυστυχώς δεν υποστηρίζεται η ετικέτα audio! </audio>
Παραδείγματα ετικετών section : μια ενότητα, ένα τμήμα του εγγράφου article : ένα αυτόνομο τμήμα περιεχομένου, όπως το κείμενο μιας ανάρτησης σε ιστολόγιο header : εισαγωγικές πληροφορίες και στοιχεία πλοήγησης footer : πληροφορίες στο τέλος του εγγράφου nav : μενού πλοήγησης ή άλλες ανάλογες πληροφορίες
Δομή εγγράφου <header> <nav> <a href="#page1">Πρώτη σελίδα</a><a href="#page2">Δεύτερη σελίδα</a> </nav> <h1>Τίτλος στην επικεφαλίδα</h1> </header> <section id="page1"> <article> <header><h3>Τίτλος σελίδας 1</h3></header> <p>Κείμενο σελίδας 1</p> </article> </section>
Δομή εγγράφου (2) <section id="page2"> <article> <header><h3>Τίτλος σελίδας 2</h3></header> <p>Κείμενο σελίδας 2</p> </article> </section> <footer> <p>Τέλος εγγράφου</p> <nav> <a href="#">Επικοινωνία</a> | <a href="#">Όροι χρήσης</a> </nav> </footer>
HTML5 και εφαρμογές διαδικτύου Σε συνδυασμό με τεχνολογίες όπως η Javascript δημιουργούνται εφαρμογές εφάμιλλες των εγγενών εφαρμογών Αξιοποίηση της HTML5 σε εφαρμογές που χρησιμοποιούνται σε φορητές συσκευές Με αξιοποίηση της τεχνολογίας CSS οι εφαρμογές μπορούν να προσαρμόζονται στις διαστάσεις της οθόνης
Ενσωμάτωση Η πλειονότητα των ιστοσελίδων παρέχουν τρόπους ενσωμάτωσης περιεχομένου σε άλλες ιστοσελίδες Η ενσωμάτωση πραγματοποιείται με εισαγωγή του κώδικα ενσωμάτωσης από την ιστοσελίδα που έχει το περιεχόμενο, στην ιστοσελίδα που θέλει να το ενσωματώσει
Τρόποι ενσωμάτωσης Ετικέτα iframe : Υποστηρίζει μεταξύ άλλων ιδιότητες καθορισμού μεγέθους και λειτουργεί ως ένα κομμάτι ξεχωριστής πλοήγησης μέσα σε μια ιστοσελίδα <iframe width="640" height="360" src="https://www.youtube.com/embed/2TCXpgL9VY8" frameborder="0" allowfullscreen></iframe> Ετικέτα div σε συνδυασμό με κώδικα στη γλώσσα προγραμματισμού Javascript
CSS
Τι είναι το CSS Cascading Style Sheets (αλληλουχίες φύλλων στυλ) Γλώσσα σήμανσης για καθορισμό της μορφής και εμφάνισης εγγράφων HTML Κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων ενός εγγράφου HTML Διαχωρισμός της δομής και του περιεχομένου (HTML) από τη διάταξη και την εμφάνιση (CSS)
Σύνδεση Ιστοσελίδας με CSS Mε την ετικέτα link, μέσα στην ετικέτα head (προτεινόμενος τρόπος): <link rel=“stylesheet” media=“screen” href=“to-styl-mou.css”> Mε ενσωμάτωση των κανόνων στο έγγραφο HTML με την ετικέτα style : <style> h1 { color: red; } </style>
Κανόνες μορφοποίησης CSS Αποτελούνται από έναν «επιλογέα» και κανόνες (μέσα σε άγκιστρα) που διαχωρίζονται από το ελληνικό ερωτηματικό «;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:» P { color: green; border-bottom: 1px solid black; padding: 10px; }
Επιλογείς – κλάσεις - id Οι «επιλογείς» είναι ονόματα ετικετών της HTML (P, H1, div), αλλά συνήθως χρησιμοποιούνται σε συνδυασμό με κλάσεις ή κωδικούς αναγνώρισης Oι κλάσεις (ιδιότητα class) ομαδοποιούν στοιχεία P.orismos { padding-left: 20px; border-left: 2px; } Oι κωδικοί αναγνώρισης (ιδιότητα id) χρησιμοποιούνται για τον μοναδικό προσδιορισμό στοιχείων P#title { color: red; font-size: 20px; }
Ονομασίες ιδιοτήτων color : χρώμα κειμένου background : φόντο font-size : μέγεθος κειμένου text-align : στοίχιση κειμένου font-weight : πάχος κειμένου border : περίγραμμα margin : απόσταση padding : περιθώριο width : πλάτος
Δημιουργία εγγράφων HTML Tα έγγραφα HTML και CSS είναι αρχεία απλού κειμένου Mε οποιονδήποτε κειμενογράφο (σημειωματάριο) Κειμενογράφος με δυνατότητες αναγνώρισης σύνταξης (Notepad++) Αποθήκευση σε μορφή HTML από άλλη εφαρμογή Με εξειδικευμένες εφαρμογές
Δημιουργία εγγράφων HTML (2) Εφαρμογές διαδικτύου για δοκιμή των δυνατοτήτων HTML και CSS jsfiddle (http://jsfiddle.net) codepen (http://codepen.io) dabblet (http://dabblet.com) cssdesk (http://cssdesk.com)