Προγραμματισμός Εφαρμογών Διαδικτύου 02 HTML Hypertext Markup Language Φώτης Κόκκορας Τμ. Μηχανικών Πληροφορικής - ΤΕΙ Θεσσαλίας ȆİȡȚȠȡȚıȝȑȞȘ ȑțįƞıș ȖȚĮ IJȠ ĬİȡȚȞȩ ȈȤȠȜİȓȠ IJȠȣ KTE ĬİııĮȜȓĮȢ HTML Hypertext Markup Language Γλώσσα Σήμανσης Υπερκειμένου Δεν είναι γλώσσα προγραμματισμού! Σχεδιάστηκε ώστε να είναι κατά το μέγιστο δυνατό μεταφέρσιμη και ανεξάρτητη υπολογιστικών συστημάτων. Χρησιμοποιεί ένα σύνολο από markup tags (ετικέτες σήμανσης) για ννα α ορίσει τον τρόπο παρουσίασης της πληροφορίας μέσα σε μια ιστοσελίδα. αποσπασματικό παράδειγμα (θα εμφανίσει τη λέξη "δοκιμή" με έντονη γραφή): <strong>δοκιμή</strong> Υπάρχει προκαθορισμένο σύνολο ετικετών. Θα αναφέρουμε αρκετές (όχι όλες) Θα χρησιμοποιήσουμε λιγότερες (~20) Σχεδόν όλες οι ετικέτες χρησιμοποιούνται σε ζευγάρια. Για παράδειγμα: <strong> ετικέτα αρχής (ή άνοιγμα) </strong> ετικέτα τέλους (ή κλείσιμο) Αυτές που δεν χρησιμοποιούνται σε ζευγάρια είναι όσες δεν παίρνουν περιεχόμενο ενδιάμεσα (σημαντικότερες οι img, br και hr) x η ετικέτα strong παίρνει περιεχόμενο και γι αυτό χρησιμοποιείται ζευγαρωτά Φώτης Κόκκορας -2- Προγραμματισμός Εφαρμογών Διαδικτύου
HTML και Ιστοσελίδες Οι ιστοσελίδες είναι αρχεία που σε επίπεδο κώδικα περιέχουν HTML. Μπορεί να περιέχουν κι άλλου είδους κώδικα (π.χ. JavaScript) αλλά αυτό έχει να κάνει με επεκτάσεις ας το αγνοήσουμε για την ώρα! Μέσω της HTML: Συνδυάζουμε μέσα σε μια ιστοσελίδα πολλά και ετερογενή είδη δεδομένων (κείμενο, εικόνα, video, ήχο, κτλ). Καθορίζουμε τον τρόπο παρουσίασης του περιεχομένου συνήθως και με τη βοήθεια της γλώσσας CSS Διασυνδέουμε ιστοσελίδες μεταξύ τους βάζοντας συνδέσμους/links ενσωματώνουμε μηχανισμούς διαδραστικής αλληλεπίδρασης συνήθως με τη βοήθεια της γλώσσας προγραμματισμού JavaScript Για τη συγγραφή HTML χρησιμοποιούμε: απλό κειμενογράφο (Σημειωματάριο/Notepad) αποφύγετέ το!!! ειδικό κειμενογράφο με HTML υποστήριξη (Notepad++, PSPad, BlueFish, κτλ) εξειδικευμένα εργαλεία συγγραφής HTML (Dreamweaver, Expression Web, κτλ) δεν θα σας κάνουν καλό σε αυτή τη φάση απευθύνονται σε προχωρημένους Φώτης Κόκκορας -4- Προγραμματισμός Εφαρμογών Διαδικτύου Χρειάζεστε έναν Ειδικό Text Editor O editor που θα χρησιμοποιήσετε πρέπει κατ'ελάχιστο να υποστηρίζει χρώμα, τόσο στην HTML όσο και στις JavaScript και PHP (π.χ. PSPad, Notepad++) Ο HTML κώδικας γράφεται πλέον με μικρά/πεζά γράμματα! Φώτης Κόκκορας -5- Προγραμματισμός Εφαρμογών Διαδικτύου
Βασική Δομή Ιστοσελίδας Έστω το αρχείο test.html με τον κώδικα: <html> <head> <title>η πρώτη μου ιστοσελίδα!</title> </head> <body> </body> </html> Το ορατό περιεχόμενο της ιστοσελίδας. html: Δηλώνει την αρχή (και το τέλος) του εγγράφου. head: περιέχει πληροφορίες που δεν εμφανίζονται μέσα στην ιστοσελίδα αλλά απευθύνονται στην εφαρμογή του browser και στις μηχανές αναζήτησης. Δείτε για παράδειγμα στην εικόνα τι κάνει η ετικέτα title. body: ότι υπάρχει εντός της είναι το περιεχόμενο της σελίδας που απευθύνεται στον τελικό χρήστη και κατά βάση εμφανίζεται στο χώρο απεικόνισης σελίδας στο παράθυρο του browser. Στην εικόνα βλέπετε το αποτέλεσμα στον Internet Explorer 9 καθώς και το πώς αυτός αντιλαμβάνεται τον κώδικα (2 η εικόνα πατήστε F12 σε οποιονδήποτε browser). Φώτης Κόκκορας -6- Προγραμματισμός Εφαρμογών Διαδικτύου Βασικές Έννοιες Χρήσης Ετικετών Τα html, head και body χρησιμοποιούνται ΜΟΝΟ μία φορά ανά σελίδα. όλες οι υπόλοιπες ετικέτες (θα δούμε αρκετές σε λίγο) που προορίζονται για χρήση εντός του body, χρησιμοποιούνται όσες φορές θέλουμε Μέσα σε ζευγάρι ετικετών επιτρέπετε γενικά να εσωκλείονται άλλες HTML ετικέτες (όχι πάντα όλες!), χωρίς όμως να "κόβει" το ένα ζευγάρι το άλλο! Σωστό: <div> <p>δοκιμή 1</p> <p>δοκιμή 1</p> </div> Λάθος: <div> <p>δοκιμή 1</p> <p>δοκιμή 1</div></p> το div κλείνει εντός του 2 ου p ενώ άνοιξε εκτός Οι browser έχουν μεγάλη ανοχή σε σφάλματα σύνταξης και διορθώνουν απλά λάθη από μόνοι τους. Δεν είναι όμως λόγος αυτός για να επιτρέπουμε λάθη στον κώδικα. Στην XHTML/HTML5 οι απαιτήσεις για εξ αρχής σωστή σύνταξη είναι πιο αυστηρές! Φώτης Κόκκορας -7- Προγραμματισμός Εφαρμογών Διαδικτύου
Ιδιότητες Ετικετών (attributes) Εντός μιας ετικέτας ανοίγματος επιτρέπεται να ορίσουμε ιδιότητες (attributes) Παράδειγμα: <p class="foo"> η παράγραφος θα μορφοποιηθεί βάση των ρυθμίσεων του κανόνα μορφοποίησης foo Οι ιδιότητες παρέχουν επιπρόσθετες πληροφορίες στο HTML στοιχείο. Συντακτικές λεπτομέρειες των html attributes εισάγονται ΜΟΝΟ στην ετικέτα ανοίγματος, με όποια σειρά θέλουμε εισάγονται ως ζευγάρια ιδιότητας-τιμής: π.χ. <form id="a" method="post"> οι τιμές πρέπει να βρίσκονται εντός διπλών (κατά προτίμηση) εισαγωγικών είναι αποδεκτά και τα μονά εισαγωγικά αλλά στην XHTML μόνο τα διπλά Δεν υπάρχει διάκριση πεζών-κεφαλαίων για τις ιδιότητες, αλλά......το W3C προτείνει τη χρήση πεζών (όπως και για τις ετικέτες δηλαδή) Οι ιδιότητες ετικετών χρησιμοποιήθηκαν στο παρελθόν (προ CSS) κατά κόρο για να γίνονται ρυθμίσεις μορφοποίησης των html στοιχείων. Πλέον η μορφοποίηση γίνεται μέσω κανόνων CSS. Οι (λίγες) ιδιότητες που χρησιμοποιούνται ακόμη αφορούν σε άλλα θέματα. Οι ιδιότητες name, id και class υπάρχουν σε όλες τις ετικέτες. Η name θα μας απασχολήσει κύρια σε φόρμες, η id σε Javascript & CSS και η class σε CSS. Φώτης Κόκκορας -8- Προγραμματισμός Εφαρμογών Διαδικτύου Τι μπορώ να έχω εντός του <head>; title: πολύ σημαντική ετικέτα είναι ο τίτλος της ιστοσελίδας φαίνεται στο παράθυρο/tab του browser, το δείχνει και το Google στα αποτελέσματα αναζήτησης υποχρεωτικό στοιχείο στην XHTML (HTML αυστηρής σύνταξης!) style: για εντός της σελίδας ορισμό κανόνων CSS (μορφοποίησης) <style type="text/css"> body {color:blue;} </style> script: για εισαγωγή κώδικα σε κάποια client side γλώσσα προγραμματισμού <script type="text/javascript"> document.write("hello World!") </script> Υπάρχουν 3 τρόποι ενσωμάτωσης CSS κανόνων. Θα τα δούμε στο σχετικό κεφάλαιο. Περισσότερα στο σχετικό κεφάλαιο. link: για καθορισμό σχέσεων με εξωτερικά αρχεία π.χ. ενσωμάτωση κανόνων CSS από εξωτερικό αρχείο <link rel="stylesheet" type="text/css" href="mystyle.css" /> meta: καθορισμός ζεύγους τεχνικών πληροφοριών μερικά παραδείγματα: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="bio, cv, βιογραφικό, Κόκκορας, Kokkoras" /> θα δούμε τα βασικότερα meta... μετά (μελλοντικά κεφάλαιο SEO) Φώτης Κόκκορας -9- Προγραμματισμός Εφαρμογών Διαδικτύου
Τι μπορώ να έχω εντός του <body>; Οι βασικότερες ετικέτες είναι οι εξής: h1, h2... h6: επικεφαλίδες επιπέδου 1 ως 6, αντίστοιχα p: παράγραφος img: εικόνες a: υπερσύνδεσμοι strong (έντονα), em (πλάγια) ol, ul: αριθμημένες και μη λίστες ΠΡΟΣΟΧΗ! Οι HTML ετικέτες έχουν σημασιολογία! Δεν τις επιλέγουμε με βάση το τι μορφοποίηση δημιουργούν αλλά με βάση το τι σημαίνουν! π.χ. δεν βάζουμε h1 για li: στοιχείο λίστας (είτε ol ή ul) μεγάλα και έντονα γράμματα αλλά όταν θέλουμε να ορίσουμε τίτλο. table: πίνακας tr: σειρά πίνακα td: κελί πίνακα (μέσα σε σειρά) form: φόρμα (για συλλογή πληροφοριών) input, textarea, select, option: στοιχεία διεπαφής εντός φόρμας div, span: γενικού σκοπού block στοιχείο και inline στοιχείο, αντίστοιχα το πρώτο πολύ σημαντικό για χωροθέτηση σελίδας (βλ. CSS) σχόλιο: θεωρείται οτιδήποτε περικλείεται μέσα σε <!-- και --> Φώτης Κόκκορας -10- Προγραμματισμός Εφαρμογών Διαδικτύου Επικεφαλίδες <h1> ως <h6> Υπάρχουν 6 ετικέτες επικεφαλίδας: h1, h2, h3, h4, h5, h6 Block Στοιχείο. Προορίζονται για χρήση σε επικεφαλίδες/τίτλους και γενικά σε κείμενα που έχουν διάρθρωση (ενότητες, υποενότητες, κτλ). Βασικά attributes (αποφύγετε τη χρήση τους - προτιμήστε CSS): align με τιμές left (default), right, center Το κείμενο στις επικεφαλίδες, ειδικά στις "μεγάλες" (h1, h2) λαμβάνεται περισσότερο υπόψη από τις μηχανές αναζήτησης (SEO κανόνας). Μια σελίδα με τη λέξη "εκδρομή" σε h1 θεωρείται από τις μηχανές αναζήτησης πιο σχετική με αυτή τη λέξη απ' ότι μια σελίδα που την έχει σε απλή παράγραφο Παράδειγμα χρήσης και αποτέλεσμα σε ΙΕ11 Φώτης Κόκκορας -11- Προγραμματισμός Εφαρμογών Διαδικτύου
Παράγραφοι <p> Block Στοιχείο. Προορίζεται για ορισμό παραγράφων. Βασικά attributes (αποφύγετε τη χρήση τους - προτιμήστε CSS): align με τιμές left (default), right, center Παράδειγμα χρήσης και αποτέλεσμα σε ΙΕ11 Οι αλλαγές γραμμής γίνονται αυτόματα από τον browser. Για να επιβάλετε αλλαγή γραμμής υπάρχει η ετικέτα <br> (ή <br/> σε XHTML) Συνεχόμενα κενά δεν τυπώνονται. Αν θέλουμε, βάζουμε διαδοχικούς HTML χαρακτήρες κενού: Φώτης Κόκκορας -12- Προγραμματισμός Εφαρμογών Διαδικτύου Υπερσύνδεσμοι <a> In-line στοιχείο. Προορίζεται για δημιουργία υπερσυνδέσμων. Ο υπερσύνδεσμος μπορεί να οδηγεί: σε άλλο πόρο (resource) στον ιστό σε άλλο σημείο εντός της ίδιας σελίδας (εσωτερικός σύνδεσμος) Βασικά attributes (παράδειγμα χρήσης στο επόμενο slide): href: υποχρεωτικό η διεύθυνση προορισμού/στόχου target: τυπική τιμή _blank εμφανίζει τη σελίδα στόχο σε νέο παράθυρο/tab title: κείμενο tooltip/επεξήγηση για τον σύνδεσμο ανάμεσα στις ετικέτες αρχής-τέλους μπαίνει το κείμενο του συνδέσμου μπορεί να μπει και ετικέτα εικόνας οπότε ολόκληρη η εικόνα γίνεται σύνδεσμος γενικεύοντας, μπορεί να μπει κείμενο ή/και οποιοδήποτε άλλο in-line στοιχείο. Σύνδεσμος για email: <a href="mailto:user@teilar.gr">email</a> Με click, o browser εκκινεί το δηλωμένο πρόγραμμα αλληλογραφίας του Η/Υ. Η διεύθυνση email είναι εκτεθειμένη σε mail spiders (ευνοεί το spam)! καλύτερα βάλτε μια εικόνα με το κείμενο της διεύθυνσης ή ως user[at]teilar.gr αλλά θα χάσετε τον αυτοματισμό της εκκίνησης της εφαρμογής email Φώτης Κόκκορας -13- Προγραμματισμός Εφαρμογών Διαδικτύου
Υπερσύνδεσμοι (συνέχεια) Παράδειγμα χρήσης και αποτέλεσμα σε ΙΕ11 Προσέξτε την έννοια του inline στοιχείου στο προηγούμενο παράδειγμα: Τα 2 πρώτα links τυπώνονται διαδοχικά και παράγραφος ξεκινά από κάτω τους, αριστερά (normal flow/κανονική ροή σχεδίασης- θα τα πούμε αργότερα) Ένα inline στοιχείο μπορεί να μπει στη ροή του κειμένου κάτι που δεν ισχύει για τα block στοιχεία όπως π.χ. το p ή το h1 (περισσότερα για block/inline αργότερα) Φώτης Κόκκορας -14- Προγραμματισμός Εφαρμογών Διαδικτύου Εσωτερικοί Υπερσύνδεσμοι Σύνδεσμοι μέσα στην ίδια την ιστοσελίδα (εσωτερικοί) Χρήση ως σύνδεσμοι εσωτερικής μετακίνηση σε σελίδες μεγάλου μήκους (το scrolling κουράζει τους χρήστες) αλλά και επιστροφής στην κορυφή της σελίδας Ορίζουμε ένα στόχο σε κάποιο σημείο της σελίδας σε HTML: <a name="a1">κεφάλαιο 1</a> σε ΧHTML: <a id="a1">κεφάλαιο 1</a> Συμβατότητα βάζουμε και τα δύο!: <a name="a1" id="a1">κεφάλαιο 1</a> Προσθέτουμε σύνδεσμο προς το στόχο ως εξής: <a href="#a1">κλικ εδώ για Κεφάλαιο 1</a> <a href="page.html#a1">...</a> <a href="http://ert.gr/page.html#a1">...</a> Ο στόχος δεν χρειάζεται να περικλείει κάποιο στοιχείο/κείμενο! <a name="a1" /> Το # ως τιμή στην ιδιότητα href ορίζει ως στόχο την ίδια τη σελίδα και μάλιστα χωρίς επαναφόρτωση. χρήσιμο για ορισμό dummy συνδέσμων, που θα οριστούν πλήρως μελλοντικά Φώτης Κόκκορας -15- Προγραμματισμός Εφαρμογών Διαδικτύου
Διάφορες Ετικέτες Μορφοποίησης Είναι inline στοιχεία. Εξακολουθούν να χρησιμοποιούνται πάρα τη CSS. br: εξαναγκασμένη αλλαγή γραμμής σε παράγραφο (μονή ετικέτα <br/> ) hr: οριζόντια γραμμή (ιδιότητες: width, align) (μονή ετικέτα <hr/> ) sub και sup: δείκτης και εκθέτης strong: έντονη γραφή (ή b έχει καταργηθεί) em: πλάγια γραφή (ή i έχει καταργηθεί) u: υπογραμμισμένη (underline) γραφή strike: διαγραμμένη γραφή (ή s έχει καταργηθεί) font: ιδιότητες face/γραμματοσειρά, size/μέγεθος, color/χρώμα το μαύρο πρόβατο της html ΑΠΑΓΟΡΕΥΕΤΑΙ "δια ροπάλου"! Πλέον, μόνο CSS. Παραδείγματα Κώδικα: Φώτης Κόκκορας -16- Προγραμματισμός Εφαρμογών Διαδικτύου Εικόνες - Πρότυπα Κωδικοποίησης Joint Photographic Experts Group (.jpeg/.jpg) απωλεστική συμπίεση, 24-bit χρώμα (real color) 16.7 εκατομ. Χρώματα, ταυτόχρονα κατάλληλο για φωτογραφίες, screenshots από παιχνίδια αυστηρά ακατάλληλο για "εικόνες" με κείμενα γιατί εισάγει "θόρυβο" εκτός κι αν η συμπίεση είναι πολύ μικρή Graphics Interchange Format (.gif) μη απωλεστική συμπίεση, υποστήριξη διαφάνειας και animation 8-bit χρώμα (ως 256 ταυτόχρονα χρώματα) πολύ λίγα για σωστή απεικόνιση φωτογραφιών πλέον χρήσιμο μόνο για απλό animation διαφάνεια έχει και το PNG Portable Network Graphics (.png) πρότυπο του W3C στη θέση του GIF μη απωλεστική συμπίεση με 24-bit χρώμα και διαφάνεια σε πρόσφατες βελτιώσεις υποστηρίζει και κινούμενες εικόνες η καλύτερη επιλογή για εικόνες με κείμενα όχι τόσο καλή επιλογή για φωτογραφίες - χαμηλή συμπίεση σε σχέση με JPG Φώτης Κόκκορας -17- Προγραμματισμός Εφαρμογών Διαδικτύου
Εικόνες Παραδείγματα #1 Παραδείγματα για να γίνουν κατανοητά τα προηγούμενα! υψηλή JPG συμπίεση χαμηλή JPG συμπίεση PNG κωδικοποίηση Προσέξτε την αλλοίωση του κειμένου που προκαλεί η υψηλή JPG συμπίεση (αριστερή εικόνα). Καλύτερη επιλογή για screenshots διεπαφών αλλά και γραφικά διεπαφών/ιστοσελίδων είναι η PNG κωδικοποίηση (δεξιά εικόνα). αποδεκτή και η JPG κωδικοποίηση χαμηλής όμως συμπίεσης (μεσαία εικόνα) στην πραγματικότητα, η μεσαία εικόνα είναι ελαφρώς θολή σε σχέση με την PNG εικόνα δεξιά, που ποιοτικά είναι η καλύτερη Φώτης Κόκκορας -18- Προγραμματισμός Εφαρμογών Διαδικτύου Εικόνες Παραδείγματα #2 Αριστερά: η εφαρμογή υπερβολικής JPG συμπίεσης αλλοίωσε την εικόνα, χρωματικά αλλά και γεωμετρικά (δείτε τα artifacts στα περιγράμματα των αερόστατων) Δεξιά: εικόνα GIF. Προσέξτε στο κάτω δεξιά αερόστατο πώς αλλοιώθηκαν τα χρώματα (φαινόμενο banding ζώνες ίδιου, flat χρώματος) εξαιτίας του χαμηλού βάθους χρώματος της GIF κωδικοποίησης (ακατάλληλη για ποιοτικές φωτογραφίες κατάλληλη για απλά γραφικά και λίγα χρώματα). Φώτης Κόκκορας -19- Προγραμματισμός Εφαρμογών Διαδικτύου
Εικόνες <img> Inline html στοιχεία για ενσωμάτωση εικόνας. Βασικά attributes: src: υποχρεωτικό - ένα URL που ορίζει τη θέση της εικόνας σχετική διεύθυνση: src="images/logo.png" απόλυτη διεύθυνση: src="http://www.auth.gr/logo_el.gif" alt: για ορισμό εναλλακτικού κειμένου το οποίο χρειάζεται: σε χρήστες με προβλήματα όρασης και χρήση μηχανικών αναγνωστών σελίδας σε περιπτώσεις αδυναμία φόρτωσης των γραφικών (π.χ. δε βρέθηκε το αρχείο) για σωστότερη δεικτοδότηση (indexing) από τις μηχανές αναζήτησης εικόνων Την ιδιότητα alt την ορίζουμε μόνο όταν η εικόνα έχει σχέση με το κείμενο και δεν είναι απλά διακοσμητική (πχ γραφικά διεπαφής). Αλλιώς βάζουμε alt=" " width και height: ορίζουμε τις διαστάσεις απεικόνισης μέσα στη σελίδα ο browser μπορεί να κάνει δυναμικό resize (δηλ. όχι μόνιμο!) align: για στοίχιση (left, right, center) (καλύτερα με CSS) usemap: για ορισμό hot-spots πάνω στην εικόνα (βλ. συνέχεια) Εικόνα ως Σύνδεσμος: ετικέτα <img> μέσα σε ετικέτα <a> <a href=" "><img src="myimage.png" alt="sometext" /></a> Φώτης Κόκκορας -20- Προγραμματισμός Εφαρμογών Διαδικτύου Εικόνες Οδηγίες Οι browsers απεικονίζουν σκέτες εικόνες σε σμίκρυνση αν είναι μεγαλύτερες από τον διαθέσιμο χώρο του παραθύρου. το κάνουν δυναμικά δεν αλλάζουν μόνιμα την εικόνα Καλύτερα να φτιάχνετε τις εικόνες στις διαστάσεις που τις θέλετε και όχι όπως προέκυψαν από την υψηλής ανάλυσης ψηφιακή φωτογραφική μηχανή Μια ποιοτικά καλή εικόνα για θέαση στην οθόνη, δε χρειάζεται να είναι πάνω από ~2000 pixels σε πλάτος. Σε τέτοια διάσταση το παραγόμενο αρχείο είναι σχετικά μικρό (π.χ. <400 ΚΒ) και εξοικονομείται bandwidth στον web server. Αν πρέπει να δώσετε πρόσβαση σε μεγάλες εικόνες, φτιάξτε μικρογραφίες (thumbnails, π.χ. πλάτους 200px) και με σύνδεσμο πάνω τους δώστε πρόσβαση στην μεγάλη εικόνα (π.χ. πλάτους 2000px). Για οργανωτικούς και διαχειριστικούς λόγους, καλό είναι οι εικόνες ενός site να βρίσκονται σε δικό τους φάκελο στο server. Σε site μεγάλης κίνησης, οι εικόνες μπορεί να βρίσκονται σε άλλον server! Τα γραφικά διεπαφής συνήθως τα τοποθετούμε μέσω κανόνων CSS, στο φόντο (background) block στοιχείων (π.χ. DIV). Φώτης Κόκκορας -22- Προγραμματισμός Εφαρμογών Διαδικτύου
Λίστες <ul> και <ol> και στοιχεία λίστας <li> Block στοιχεία για κατασκευή λιστών από (συνήθως) "συναφή" πράγματα. με ul φτιάχνουμε unordered list (λίστα με κουκίδες) με ol φτιάχνουμε ordered list (αριθμημένη λίστα) ΠΡΟΣΟΧΗ: και στις δύο περιπτώσεις, στοιχεία λίστας (list item) βάζει το li Βασικά attributes type: καθορίζει το είδος κουκίδας/αρίθμησης σε μια λίστα ή ένα στοιχείo λίστας σε ul/li σε ol/li type="circle" για κύκλο type="disk" για δίσκο (bullet) type="square" για τετράγωνο type="1" για 1, 2, 3, κτλ type="i" για i, ii, iii, iv, κτλ type="i" για Ι, ΙΙ, ΙΙΙ, ΙV, κτλ type="a" για a, b, c, d, κτλ type="a" για A, B, C, D, κτλ Όπως όλες οι ρυθμίσεις μορφοποίησης, έχει αντικατασταθεί από CSS ρυθμίσεις για απλές σελίδες βέβαια, η χρήση είναι αποδεκτή Επιτρέπονται μικτές λίστες ή/και φωλιασμένες λίστες (δείτε επόμενο παράδειγμα) Με λίστες και CSS φτιάχνονται τα μενού, οριζόντια ή κάθετα! Φώτης Κόκκορας -23- Προγραμματισμός Εφαρμογών Διαδικτύου Λίστες - Παραδείγματα Το type χρησιμοποιείται είτε σε ul/ol ή σε li στοιχεία Προσέξτε πως γίνονται τα φωλιάσματα: σε ένα li στοιχείο, εκτός από κείμενο (Ευρώπη ή Ασία στο παράδειγμα), βάζουμε επιπλέον μια νέα λίστα και μετά κλείνουμε το li Φώτης Κόκκορας -24- Προγραμματισμός Εφαρμογών Διαδικτύου
Πίνακες <table> σειρές πίνακα <tr> - κελιά μέσα σε σειρά <td> Το table είναι block στοιχείο για κατασκευή πινάκων. Χρησιμοποιήθηκε κατά κόρο παλαιότερα για χωροθέτηση σελίδας. Πλέον η χωροθέτηση γίνεται με CSS (θα τα δούμε και τα δύο σε εργαστήρια) Η ετικέτα table ορίζει τον πίνακα. Μέσα της έχει tr. Κάθε τέτοιο ορίζει μια σειρά. Μέσα στα tr βάζουμε td για να ορίσουμε κελιά. Βασικά attributes για table (ξεπερασμένα πλέον γίνονται με CSS) width: για ορισμό πλάτους πίνακα ή κελιού (σε pixel ή % του διαθέσιμου πλάτους) height: για ορισμό ύψους κελιού (σε pixels) align: για στοίχιση πίνακα ή περιεχομένου κελιού (left, center, right) cellpadding: κενός χώρος από την έσω πλευρά των κελιών (σε pixels) cellspacing: κενό ανάμεσα σε γειτονικά κελιά (σε pixels) border: πάχος γραμμής σκελετού του πίνακα (σε pixels) Δείτε παρακάτω και τα attributes (SOS): bgcolor: χρώμα φόντου σε κελί ή πίνακα rowspan και colspan background: για ορισμό εικόνας ως φόντου στο κελί που συγχωνεύουν κελιά. Υπάρχουν κι άλλες ετικέτες σχετικές με πίνακα για περισσότερη λεπτομέρεια! th, caption, thead, tbody, tfoot, col, colgroup (δείτε σε w3schools) Φώτης Κόκκορας -25- Προγραμματισμός Εφαρμογών Διαδικτύου Πίνακες Παράδειγμα Χρήσης Η μορφοποίηση με attributes είναι παρωχημένη. Πλέον γίνεται με CSS. H ιδιότητα colspan σε κελί/td προκαλεί συγχώνευσή του με τα επόμενα Ν κελιά, όπου Ν η τιμή της ιδιότητας. Όμοια η rowspan προκαλεί συγχώνευση του κελιού με τα Ν από κάτω του κελιά. (βλ.σχήμα τα κελιά με το b και το d) Σημείωση: Η κόκκινη διακεκομμένη γραμμή στο d, προστέθηκε με Photoshop! Το ύψος των κελιών μπορεί να ρυθμιστεί με ιδιότητα height αλλά συνήθως το αφήνουμε να προκύψει με βάση το περιεχόμενο του κελιού (ή με CSS). Φώτης Κόκκορας -26- Προγραμματισμός Εφαρμογών Διαδικτύου
Χωροθέτηση με Πίνακες (ξεπερασμένη!) Ζητούμενο είναι να ορίσουμε πάνω στη σελίδα ζώνες/ περιοχές χρήσης με πίνακα. Στην εικόνα/παράδειγμα, οι κόκκινες γραμμές μπήκαν με Photoshop για να τονιστούν οι φωλιασμένοι πίνακες! Η χωροθέτηση με table απαιτεί καλό σχεδιασμό και φωλιασμένους πίνακες. Ως λύση είναι περιοριστική με τα σημερινά δεδομένα (π.χ. μετέπειτα δραστικές αλλαγές είναι δύσκολες, προκύπτουν "άκαμπτες σχεδιάσεις" που δεν εξυπηρετούν διάφορα μεγέθη συσκευών), είναι όμως γρήγορη λύση. Εξακολουθεί να υφίσταται σε πολλά sites γιατί απαιτείται δραστική επανασχεδίαση του site για μετάβαση σε χωροθέτηση με CSS (πολύ μεγάλο κόστος). Η χρήση table για χωροθέτηση είναι εδώ και πολλά χρόνια κάκιστη πρακτική. Φώτης Κόκκορας -27- Προγραμματισμός Εφαρμογών Διαδικτύου Πότε χρησιμοποιούμε πίνακα; Όταν τα δεδομένα το απαιτούν! Όχι για διαρρύθμιση σελίδας! Η εικόνα είναι από το phpmyadmin (site διαχείρισης MySQL). Τέτοιας φύσεως δεδομένα προφανώς θέλουν πίνακα! Χρησιμοποιούμε ετικέτα table όταν αυτό αρμόζει στα δεδομένα. μια λίστα φοιτητών (π.χ. ονοματεπώνυμο) την φτιάχνουμε εύκολα με <list> αν όμως έχουμε και ΑΜ, τηλέφωνο, email τότε προφανώς θέλει <table> Φώτης Κόκκορας -28- Προγραμματισμός Εφαρμογών Διαδικτύου
Παρατηρήσεις #1 Διαχωρισμός Αρμοδιοτήτων! Θα κάνουμε ένα διάλλειμα με τις ετικέτες για μερικές παρατηρήσεις: Η HTML καθορίζει κύρια θέματα δομής και περιεχομένου μιας ιστοσελίδας. Οι ετικέτες έχουν σημασιολογία, σημαίνουν κάτι, και αυτό το κάτι το αντιλαμβάνεται ο Η/Υ (αν όχι πλήρως σήμερα, θα το κάνει προσεχώς)! π.χ. έχοντας ετικέτα <h1> είναι εύκολο να εντοπιστεί ο τίτλος στο περιεχόμενο μιας σελίδας (αρκεί βέβαια να έγινε σωστή χρήση από τον δημιουργό της!) π.χ. η ετικέτα <strong> τονίζει κάποιο κείμενο (το κείμενο μέσα σε <strong> αποκτά βαρύτητα για μια μηχανή αναζήτησης) δεν είναι διακοσμητική η φύση της! π.χ. η ετικέτα <address> προορίζεται να έχει μια διεύθυνση μέσα (οδό, αριθμό, ΤΚ, κτλ). Το πώς θα φαίνεται στο ανθρώπινο μάτι είναι θέμα CSS. Ο έξυπνος μελλοντικός Η/Υ όμως θα καταλάβει ότι είναι διεύθυνση από την ετικέτα. Επειδή το περιεχόμενο που μπαίνει σε HTML tags απευθύνεται σε ανθρώπους, όλες οι ετικέτες έχουν κάποιες default ρυθμίσεις μορφοποίησης και διάταξης στην οθόνη (που αν δεν μας αρέσουν τις αλλάζουμε με CSS). Υπάρχει διαχωρισμός αρμοδιοτήτων στις εμπλεκόμενες τεχνολογίες. H HTML περιγράφει το περιεχόμενο της σελίδας. Η CSS φροντίζει τη μορφοποίηση. Η JavaScript την αλληλεπίδραση με το χρήστη! Φώτης Κόκκορας -30- Προγραμματισμός Εφαρμογών Διαδικτύου Παρατηρήσεις #2 Block και In-Line στοιχεία Tα στοιχεία της HTML που είναι τύπου block: Αποτελούν τα δομικά στοιχεία της σελίδας και μπορεί να περιέχουν άλλα block ή/και inline στοιχεία ή/και κείμενο. Ορισμένες φορές ένα block στοιχείο δεν επιτρέπεται να περιέχει άλλα block στοιχεία π.χ. μέσα σε <p> δεν μπορούμε να βάλουμε <h1> - θα "σπάσει" η παράγραφος στα δύο! Προφανώς δεν επιτρέπονται block στοιχεία μέσα σε in-line στοιχεία. π.χ. δεν βάζουμε <p> μέσα σε <span> ούτε <li> μέσα σε <a> Αν δεν χρησιμοποιείται CSS στη σελίδα, κάθε block στοιχείο σχεδιάζεται από τον browser κάτω και αριστερά από το προηγούμενο block στοιχείο και καταλαμβάνει όλο το διαθέσιμο πλάτος. Αυτή είναι η normal flow η κανονική ροή σχεδίασης του browser. Φυσικά μπορούμε να τη "διαταράξουμε" με CSS για πιο πολύπλοκο αποτέλεσμα! Tα στοιχεία της HTML που είναι τύπου inline: Μπορεί να περιέχουν μόνο άλλα inline στοιχεία και κείμενο (π.χ. <strong>) Αν δεν "πειραχτούν" με CSS, τα inline στοιχεία εμφανίζονται στη ροή του κειμένου μέσα σε block στοιχεία. Με CSS όμως μπορούμε π.χ. να κάνουμε το <li> που είναι block να συμπεριφέρεται σαν inline (θα το δούμε σε μενού). Φώτης Κόκκορας -31- Προγραμματισμός Εφαρμογών Διαδικτύου
Ετικέτες div και span Ο καλύτερος ίσως χαρακτηρισμός για αυτές είναι: div: γενικού σκοπού block στοιχείο span: γενικού σκοπού inline στοιχείο Χρησιμοποιούνται σε συνδυασμό με CSS κανόνες ως στοιχεία ομαδοποίησης άλλων στοιχείων. Θα τις δούμε εκτενώς όταν μιλήσουμε για CSS. πχ μέσω του div γίνεται η χωροθέτηση ιστοσελίδας, δηλαδή η δημιουργία υποπεριοχών μέσα στις οποίες θα μπουν άλλες HTML ετικέτες (sidebar, footer, κτλ) Φώτης Κόκκορας -47- Προγραμματισμός Εφαρμογών Διαδικτύου Μεταδεδομένα (Ετικέτα <meta>) #1 Πρόσθετες πληροφορίες για μια σελίδα σε μορφή ζεύγους ονόματος-τιμής. <meta name="keywords" content="html, css, xml" /> Λέξεις κλειδιά για μηχανές αναζήτησης <meta name="description" content="this is my home page" /> Περιγραφή/Περίληψη ιστοσελίδας <meta charset="utf-8"/> ( η σύνταξη αυτή ισχύει σε HTML5, δηλ. σε <!DOCTYPE html> ) Λέμε στον browser να δείξει τη σελίδα με κωδικοσελίδα χαρακτήρων utf-8. Εννοείται ότι το περιεχόμενο της σελίδας θα πρέπει να είναι γραμμένο σε utf-8. <meta name="author" content="f.kokkoras" /> Ορίζουμε τον συγγραφέα της σελίδας <meta http-equiv="refresh" content="5" /> Λέει στον browser να ξαναφορτώσει αυτόματα τη σελίδα μετά από 5 sec. Χρήσιμο σε σελίδες "βιτρίνα" που πρέπει να ανανεώνονται μόνες τους. <meta http-equiv="refresh" content="3; url=http://deixto.com" /> Ανακατεύθυνση έπειτα από 3 sec στη σελίδα με τη διεύθυνση url Αποφύγετέ το. Κάντε ανακατευθύνσεις μέσω του.htaccess file ώστε να ενημερώνονται σωστά και οι μηχανές αναζήτησης. (Google it!!!) Φώτης Κόκκορας -49- Προγραμματισμός Εφαρμογών Διαδικτύου
Μεταδεδομένα (Ετικέτα <meta>) #2 <meta name="robots" content="index, nofollow"> Οδηγίες της σελίδας προς προγράμματα χαρτογράφησης και δεικτοδότησης (indexing) ιστού (web crawlers, web robots, κτλ) index (noindex): search engine bots should (not) include this page follow (nofollow): robots should (not) follow links from this page to other pages none: robots can ignore the page. noarchive: Google uses this to prevent archiving of the page. <meta http-equiv="pragma" content="no-cache"> παλιός τρόπος ελέγχου του caching, δηλαδή του αν ο browser θα κρατήσει αντίγραφο της σελίδας στο δίσκο του χρήστη καλύτερα το επόμενο (ή και τα δύο μαζί!) <meta http-equiv="cache-control" content="no-cache"> public - may be cached in public shared caches (π.χ. proxies) private - may only be cached in private cache (π.χ. στον browser) no-cache - may not be cached no-store - may be cached but not archived Φώτης Κόκκορας -50- Προγραμματισμός Εφαρμογών Διαδικτύου Μεταδεδομένα (Ετικέτα <meta>) #3 Η ακόλουθη meta ρύθμιση, μας επιτρέπει να ελέγξουμε τη διάρκεια ζωής των σελίδων που αποθηκεύονται (caching) στο δίσκο του "πελάτη". <meta http-equiv="expires" content="tue, 31 Dec 2008 23:59:59 GMT"> μετά την ορισθείσα ημερομηνία, η σελίδα θεωρείται "ληγμένη" και ζητείται εκ νέου από το server, αν δεν είναι "ληγμένη" ο browser επιχειρεί να την ανακαλέσει από την προσωρινή μνήμη cache (στον τοπικό δίσκο) αν βάλουμε μηδέν (ή μη αποδεκτή τιμή ώρας) πρακτικά καταργούμε το caching Μέσω αυτής της παραμέτρου λέμε στα web-robots: πότε να προγραμματίσουν νέα επίσκεψη στη σελίδα μας πότε να τη σβήσουν από το ευρετήριο τους (index) Κωδικοποίηση ημερομηνίας λήξης: weekday, date time GMT weekday = ένα από τα: Mon, Tue, Wed, Thu, Fri, Sat, Sun date =day (2 ψηφία) month (όπως παρακάτω) year (4 ψηφία) (π.χ. 01 Jan 2014) time = ώρες:λεπτά:δεύτερα (όλα με 2 ψηφία) π.χ. 23:09:59 month = (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec) Φώτης Κόκκορας -51- Προγραμματισμός Εφαρμογών Διαδικτύου
Ειδικοί HTML Χαρακτήρες Επειδή κάποιοι χαρακτήρες αγνοούνται από του browsers (π.χ. συνεχόμενα κενά/spaces) ή είναι δεσμευμένοι χαρακτήρες της HTML, υπάρχουν οι λεγόμενοι HTML χαρακτήρες που πετυχαίνουν το ίδιο αποτέλεσμα. Σύμβολο Σημασία HTML χαρακτήρας κενό που τυπώνεται πάντα > μεγαλύτερο από > < μικρότερο από < & και & " διπλό εισαγωγικό " ' μονό εισαγωγικό ' (μόνο XHTML) copyright registered trademark ευρώ Για περισσότερους google: html chars Φώτης Κόκκορας -52- Προγραμματισμός Εφαρμογών Διαδικτύου favicons Τι είναι; Μικρή εικόνα που εμφανίζεται δίπλα στο URL στη γραμμή διεύθυνσης καθώς και δίπλα στον τίτλο της σελίδας στην καρτέλα (tab) και στη λίστα αγαπημένων. Κωδικοποίηση τύπος αρχείου.ico (16x16 pixel, 16 χρώματα) κάποιοι browsers υποστηρίζουν PNG/JPG/GIF Πώς μπορούμε να φτιάξουμε: σε εφαρμογή γραφικών (συνήθως σχεδίαση σε PNG (για υποστήριξη διαφάνειας) και έπειτα αποθήκευση σε.ico) μέσω της on-line εφαρμογής: http://www.favicon.cc/ Τρόπος ενσωμάτωσης (μέσα στο τμήμα <head> του κώδικα της σελίδας): <link rel="shortcut icon" href="site.ico" /> στη θέση του site.ico βάζετε το δικό σας αρχείο Περισσότερα: http://en.wikipedia.org/wiki/favicon Φώτης Κόκκορας -53- Προγραμματισμός Εφαρμογών Διαδικτύου
Μερικές νέες block ετικέτες που εισάγει η HTML5 header και footer για το τέρμα άνω και τέρμα κάτω αντίστοιχα τμήματα των σελίδων nav: ορίζει περιοχές με συνδέσμους πλοήγησης χρήση σε menu σελίδων με οριζόντια ή κατακόρυφη ul λίστα εντός main: ορίζει το κύριο μέρος μιας ιστοσελίδας. section: ορίζει τμήματα/ενότητες περιεχομένου, συνήθως μέσα στο main. Χρήση σε σελίδες με πολλές ανεξάρτητες ενότητες, όπως πχ μια σελίδα με ομάδες ειδήσεων (Κόσμος, Υγεία, κτλ) όπου κάθε μία ομάδα είναι ένα section. article: ορίζει ένα άρθρο (συγγραφικό). Για παράδειγμα, οι επιμέρους ειδήσεις στην ενότητα ειδήσεων "Κόσμος", του προηγούμενου παραδείγματος. Μέσα στο article μπορούμε να έχουμε μια κλασική δομή με ετικέτες τίτλου και παραγράφων. figure: για περιεχόμενο όπως εικόνες, διαγράμματα, σκίτσα, κτλ. π.χ. figure με μέσα img για την εικόνα και p για τη λεζάντα της Ακολουθεί ένα παράδειγμα οργάνωσης σε HTML5. Φώτης Κόκκορας -62- Προγραμματισμός Εφαρμογών Διαδικτύου Ενδεικτική Οργάνωση με HTML5 tags Φώτης Κόκκορας -63- Προγραμματισμός Εφαρμογών Διαδικτύου