Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML Εισαγωγή γραφικών και εικόνων Παρουσίαση 9 η 1 Βελώνης Γεώργιος Καθηγητής
Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε αυτές τις ετικέτες πριν καταστούν παρωχημένες. Αυτό γίνεται για να εξασφαλιστεί η μελλοντική συμβατότητα. Restored/ Redefined tags in HTML5: Αναθεωρήστε αυτές τις ετικέτες στον κώδικά σας, όπως καθορίστηκαν στην HTML5 και ως εκ τούτου έχουν νέες έννοιες. 2
Σημασία συμβόλων HTML5 tags: ιδιότητες crossorigin, sizes Obsolete tags: ιδιότητα longdesc Deprecated tags: ιδιότητες align, border, hspace, vspace (<img>), background (<body>) Restored/ Redefined tags in HTML5: 3
Χρήσιμοι Ορισμοί Deprecated και Obsolete Deprecated καλείται ένα στοιχείο ή παράμετρος που θεωρείται ξεπερασμένο. Τα deprecated στοιχεία μπορεί να καταστούν άνευ αντικειμένου στο μέλλον, αλλά οι browsers θα πρέπει να συνεχίσουν να τα υποστηρίζουν για λόγους συμβατότητας με παλαιότερες εκδόσεις. Obsolete καλείται ένα στοιχείο ή χαρακτηριστικό που δεν έχει καμία εγγύηση για τη μελλοντική του από τους browsers υποστήριξη και πλέον δεν ορίζεται στην προδιαγραφή W3C. 4
Βελώνης Γεώργιος - Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari 5.1.7 Opera 39.0 Σημείωση: Με εξαίρεση τις ιδιότητες longdesc και sizes (HTML5), όλες οι ιδιότητες που θα παρουσιαστούν είτε obsolete είτε deprecated, συνεχίζουν να ερμηνεύονται κανονικά, τουλάχιστον μέχρι τις παραπάνω εκδόσεις των browsers που έγιναν οι δοκιμές. 5
Περιεχόμενα Εικόνες Εισαγωγή Κωδικοποίηση GIF (Graphics Interchange Format) Κωδικοποίηση JPEG (Joint Photographic Experts Group) Κωδικοποίηση PNG (Portable Network Graphic) Κωδικοποίηση BMP (Bitmap) Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός του URL του αρχείου της εικόνας Ορισμός στοίχισης της εικόνας με το περιεχόμενο που βρίσκεται δίπλα της Ορισμός εναλλακτικού κειμένου εικόνας Ορισμός πάχους περιγράμματος εικόνας 6
Περιεχόμενα Εισαγωγή εικόνας σε ιστοσελίδα (συνέχεια) Ορισμός ύψους και πλάτους εικόνας Ορισμός κενού χώρου μεταξύ της εικόνας και των στοιχείων που την περιβάλλουν Άλλες ιδιότητες της ετικέτας <img> Εισαγωγή εικόνας ως φόντο ιστοσελίδας Εισαγωγή favicon 7
Εικόνες Εισαγωγή Οι εικόνες αποτελούν αναπόσπαστο κομμάτι των HTML εγγράφων σχεδόν σε κάθε web site, από την πρώτη στιγμή που άρχισε η υποστήριξη πολυμεσικών στοιχείων μέσα σε μια ιστοσελίδα. Οι εικόνες είναι πολύ σημαντικές, διότι συχνά ομορφαίνουν τις ιστοσελίδες, αλλά το σπουδαιότερο είναι ότι μπορούν να απεικονίσουν πολύπλοκες έννοιες με απλό τρόπο. Οι εικόνες και τα γραφικά δεν είναι ενσωματωμένα σε μία ιστοσελίδα, αλλά βρίσκονται αποθηκευμένα σε ξεχωριστά αρχεία και καλούνται από τον κώδικα της ιστοσελίδας για να παρουσιαστούν σε συγκεκριμένα σημεία, ώστε να αποδοθεί το τελικό οπτικό αποτέλεσμα της ιστοσελίδας. 8
Εικόνες Εισαγωγή Τα ψηφιακά αρχεία εικόνας δημιουργούνται είτε με τη χρήση του σαρωτή (scanner), όταν ψηφιοποιούνται φωτογραφίες και εικόνες, είτε μέσω ειδικών προγραμμάτων επεξεργασίας φωτογραφίας και γραφικών, όπως το Gimp, η Ζωγραφική των Windows, το Photoshop κ.ά. Επίσης, επεξεργασία εικόνων μπορεί να γίνει και online, μέσω σχετικών ιστότοπων του Διαδικτύου, όπως το Online Photo Editor, Pixlr Editor, Photo Editor, LUNAPIC κ.ά. 9
Εικόνες Εισαγωγή Κατά την αποθήκευση ψηφιακών αρχείων εικόνας στον υπολογιστή σας, μπορεί να χρησιμοποιηθούν διάφοροι τρόποι κωδικοποίησής τους (format). Ο τύπος κωδικοποίησης μιας ψηφιακής εικόνας φαίνεται από την επέκταση του αρχείου. Μερικοί από τους συνηθέστερους τύπους κωδικοποίησης είναι οι εξής: jpg, tif, gif, png και bmp. Ο τρόπος κωδικοποίησης των ψηφιακών αρχείων εικόνας έχει σημασία για την ανάπτυξη ιστοσελίδων, που περιέχουν γραφικά και εικόνες, διότι οι browsers δεν υποστηρίζουν όλες τις μορφές κωδικοποίησης εικόνας. Αυτό έχει ως αποτέλεσμα να δημιουργούνται προβλήματα στην παρουσίαση των εικόνων στην ιστοσελίδα, όταν η κωδικοποίησή τους δεν υποστηρίζεται από το browser. 10
Εικόνες Εισαγωγή Οι περισσότεροι γνωστοί browsers αυτή τη στιγμή υποστηρίζουν τις κωδικοποιήσεις gif, jpg, png και bmp. Για το λόγο αυτό, όλα τα ψηφιακά γραφικά και εικόνες που πρόκειται να παρουσιαστούν σε μία ιστοσελίδα, θα πρέπει να είναι αποθηκευμένα με αυτές τις κωδικοποιήσεις. 11
Εικόνες Κωδικοποίηση GIF (Graphics Interchange Format) Η κωδικοποίηση GIF, είναι κατάλληλη για τη δημιουργία αρχείων εικόνας, με πολύ χαμηλή ανάλυση μέσα σε μια ιστοσελίδα και υποστηρίζει τη διαφάνεια (transparency), δηλαδή την αφαίρεση του φόντου και του περιγράμματος της εικόνας. Η διαφάνεια είναι σημαντική διότι επιτρέπει την τοποθέτηση της εικόνας επάνω από οποιοδήποτε χρώμα φόντου ή ακόμη και φωτογραφίας. Τα gif αρχεία συνήθως χρησιμοποιούνται για απλά λογότυπα, εικονίδια ή σύμβολα. Η χρήση της κωδικοποίησης gif δε συνίσταται για φωτογραφίες, επειδή τα αρχεία αυτού του τύπου περιορίζονται μόνο σε 256 διαφορετικά χρώματα. Σε ορισμένες περιπτώσεις, μπορεί να χρησιμοποιηθούν ακόμη λιγότερα χρώματα και κατ επέκταση να δημιουργηθούν ακόμη μικρότερα αρχεία. Για το λόγο αυτό, δεν είναι κατάλληλα για φωτογραφικές εικόνες ή γραφικά με κλίσεις. 12
Εικόνες Κωδικοποίηση GIF (Graphics Interchange Format) Τα gif αρχεία υποστηρίζουν επίσης ένα χαρακτηριστικό που ονομάζεται interlacing, το οποίο φορτώνει εκ των προτέρων το γραφικό. Δηλαδή, η εικόνα ξεκινά από θολή όψη και γίνεται εστιασμένη και ευκρινή όταν ολοκληρωθεί η λήψη. Αυτό κάνει τη μετάβαση για το θεατή πιο εύκολη και δεν χρειάζεται να περιμένει πολύ για να δει τα λογότυπα ή τις εικόνες ενός site. Υποστηρίζουν επίσης και κινούμενη εικόνα (animation), όχι όμως στο επίπεδο των αρχείων Flash, επιτρέποντας στο web developer να προσθέσει κίνηση ή μεταβάσεις μέσα στις σελίδες του site, χωρίς προγραμματισμό ή κωδικοποίηση. Τα gif αρχεία έχουν συμπίεση, η οποία τους δίνει μικρό μέγεθος αρχείου. 13
Εικόνες Κωδικοποίηση JPEG (Joint Photographic Experts Group) Τα αρχεία τύπου Jpeg μπορεί να είναι σχετικά μικρά σε μέγεθος, αλλά οι εικόνες εξακολουθούν να φαίνονται καθαρές και όμορφες. Έχουν υποστήριξη έως και 16,7 εκατ. διαφορετικών χρωμάτων, γεγονός που τα κάνει τη σωστότερη επιλογή για την αναπαράσταση εικόνων που δεν εμπεριέχουν κίνηση, όπως και για φωτογραφίες και διάφορα είδη (φωτο)σκιάσεων, αναλόγως και με τον φωτισμό (στο σκοτάδι ή στο φως αντίστοιχα). Με το ευρύ φάσμα των χρωμάτων που υποστηρίζουν, μπορείτε να έχετε όμορφες εικόνες, χωρίς ογκώδη μεγέθη αρχείων. Υπάρχουν επίσης και τα προοδευτικής φόρτωσης jpeg αρχεία, τα οποία έχουν προφόρτωση παρόμοια με interlaced gifs. Ξεκινούν δηλαδή με θολή μορφή και έρχονται στο προσκήνιο σταδιακά, καθώς φορτώνονται οι πληροφορίες τους. 14
Εικόνες Κωδικοποίηση PNG (Portable Network Graphic) Τα αρχεία τύπου PNG, αναπτύχθηκαν με σκοπό να αξιοποιήσουν τα πλεονεκτήματα που προσφέρουν τα αρχεία τύπου gif. Οι σχεδιαστές πρέπει να μπορούν να ενσωματώνουν τις εικόνες χαμηλής ανάλυσης που φορτώνουν γρήγορα, αλλά ταυτόχρονα αυτές να δείχνουν εξαιρετικές. Αυτό είναι ο λόγος που αναπτύχθηκε το PNG format. Το PNG-8 δεν υποστηρίζει τη διαφάνεια, αλλά το κάνουν τα PNG-24 και PNG-32. Τα png αρχεία μπορεί να έχουν διαφορετικά επίπεδα διαφάνειας, σε αντίθεση με τα gif αρχεία που έχουν μόνο ένα και είναι είτε διαφανές είτε αδιαφανές. 15
Εικόνες Κωδικοποίηση BMP (Bitmap) Τα BMP αρχεία εικόνας είναι τύπου «ψηφιοκουκίδων» και υποστηρίζουν είτε ασπρόμαυρη γκάμα χρωμάτων είτε έγχρωμη. Αποθηκεύουν μέσα τους κάθε pixel της εικόνας, με αποτέλεσμα να μην υποστηρίζεται η δυνατότητα συμπίεσή της. Για το λόγο αυτό, μια εικόνα αυτού του τύπου, καταλαμβάνει αρκετά μεγάλο μέγεθος στο δίσκο, κρατώντας όμως έτσι την ποιότητά της εξαιρετική. Λόγω του μεγάλου μεγέθους τους, δε θα δείτε αρχεία τύπου bmp να χρησιμοποιούνται ευρέως στις σελίδες του web. 16
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός του URL του αρχείου της εικόνας Για την εισαγωγή εικόνας σε ένα HTML έγγραφο, χρησιμοποιείται η απλή ετικέτα <img> (δεν υπάρχει ετικέτα κλεισίματος). Για τον λόγο αυτό, χρησιμοποιούνται αρκετές ιδιότητες μέσα σε αυτήν προκειμένου να επιτευχθούν τα επιθυμητά αποτελέσματα, με βασικότερη την ιδιότητα src, η οποία παίρνει ως τιμή τη διαδρομή και το όνομα του αρχείου εικόνας. Σύνταξη: <img src= "path/αρχείο_εικόνας" /> Οι τιμές της ιδιότητα src μπορεί να είναι απόλυτες (absolute) ή σχετικές (relative). Οι απόλυτες ορίζονται πάντα ως προς τον κατάλογο-ρίζα (π.χ. src="c:\mypages\face.gif") ή κάποιο URL μιας web σελίδας (π.χ. src="http://www.mysite.com/face.gif"). 17
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός του URL του αρχείου της εικόνας Μπορείτε όμως να ορίσετε μια διαδρομή όχι ως προς τη ρίζα, αλλά ως προς έναν άλλο κατάλογο, η οποία είναι σχετική, όπως π.χ. src="./mypages/face.gif" ή src="face.gif" (ο συμβολισμός "./" είναι ο φάκελος που βρίσκεται η σελίδα). Προτείνεται να γίνεται χρήση σχετικών συνδέσεων, διότι αυτό διευκολύνει άλλες ενέργειες, όπως τη μεταφορά ολόκληρων φακέλων με τα περιεχόμενά τους, χωρίς να χρειάζεται το πέρασμα από όλες τις HTML σελίδες του site, ψάχνοντας και αλλάζοντας τις διευθύνσεις των links. Σημείωση: Περισσότερα για τη δήλωση της διαδρομής (path) ενός αρχείου, θα παρουσιαστούν στην ενότητα «Σύνδεσμοι» που θα ακολουθήσει. 18
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός του URL του αρχείου της εικόνας Παράδειγμα: <body> <p>εικόνα JPEG</p> <img src="./images/html5.jpg"/> <p>εικόνα GIF</p> <img src="./images/burning_campfire.gif"/> <p>εικόνα PNG</p> <img src="./images/graphics_painting.png"/> <p>εικόνα BMP</p> <img src="./images/tv.bmp"/> </body> 19
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός στοίχισης της εικόνας με το περιεχόμενο που βρίσκεται δίπλα της Η ιδιότητα align ορίζει την στοίχιση της εικόνας με το κείμενο που βρίσκετε δίπλα της. Η ιδιότητα align δεν υποστηρίζετε από την HTML5 και στη θέση της χρησιμοποιούνται CSS. Σύνταξη: <img align="left right middle top bottom absmiddle absbottom baseline"> Σύνταξη CSS: img{vertical-align: baseline length sub super top text-top middle bottom text-bottom initial inherit;} Σημείωση: Τα CSS θα παρουσιαστούν αναλυτικά σε επόμενα μαθήματα 20
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός στοίχισης της εικόνας με το περιεχόμενο που βρίσκεται δίπλα της 21 Στοίχιση εικόνας ανάλογα με τις τιμές της ιδιότητας align
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός στοίχισης της εικόνας με το περιεχόμενο που βρίσκετε δίπλα της Παράδειγμα: <body> <p>μια <img src="./images/html.jpg" align="right"/>εικόνα με δεξιά ευθυγράμμιση</p> <br/><br/><br/> <p>μια <img src="./images/html.jpg" align="middle"/>εικόνα με κεντρική ευθυγράμμιση</p> </body> 22
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός εναλλακτικού κειμένου εικόνας Η ιδιότητα alt ορίζει ένα εναλλακτικό κείμενο το οποίο εμφανίζεται στη θέση της εικόνας, όταν αυτή για κάποιο λόγο δε μπορεί να φορτωθεί από το browser. Σύνταξη: <img alt="κείμενο"> Παράδειγμα: <body> <img src="./images/html.jpg" height="128" width="128" alt="html"/> </body> 23
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός πάχους περιγράμματος εικόνας Η ιδιότητα border ορίζει το πάχος του περιγράμματος της εικόνας, δεν υποστηρίζεται όμως από την HTML5 και στη θέση της χρησιμοποιούνται CSS. Σύνταξη: <img border="πάχοςpx"> Σύνταξης CSS: img{border: πάχος στυλ_γραμμής χρώμα;} Παράδειγμα: <body> <img src="./images/html.jpg" border="8" alt="html"/> </body> 24
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός ύψους και πλάτους εικόνας Οι ιδιότητες height και width ορίζουν το ύψος και το πλάτος της εικόνας αντίστοιχα, σε pixels (στην HTML 4.01 και σε %). Σύνταξη: <img height="pixels" width="pixels"/> Καλό θα είναι να καθορίζεται πάντα τόσο το ύψος όσο και το πλάτος των εικόνων. Εάν το ύψος και το πλάτος έχουν ρυθμιστεί, ο χώρος που απαιτείται για την εικόνα παραχωρείται όταν φορτώνεται η σελίδα. Ωστόσο, χωρίς αυτά τα χαρακτηριστικά, το πρόγραμμα περιήγησης δεν γνωρίζει το μέγεθος της εικόνας και δεν μπορεί να διατηρήσει το κατάλληλο χώρο γι αυτήν, με αποτέλεσμα να αλλάξει η διάταξη της σελίδας κατά τη φόρτωσή της (ενώ οι εικόνες φορτώνουν). Παράδειγμα: βλέπε διαφάνεια 23 (ιδιότητα alt) 25
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός κενού χώρου μεταξύ της εικόνας και των στοιχείων που την περιβάλλουν Οι ιδιότητες hspace και vspace ορίζουν τον κενό χώρο μεταξύ της εικόνας και των υπολοίπων περιεχομένων της σελίδας. Πιο συγκεκριμένα, η vspace ορίζει το κενό διάστημα στο επάνω και το κάτω μέρος της εικόνας (σε pixels), ενώ η hspace στην αριστερή και στη δεξιά της πλευρά (επίσης σε pixels). Οι δύο αυτές ιδιότητες δεν υποστηρίζονται από την HTML5 και στη θέση τους χρησιμοποιούνται CSS. Σύνταξη: <img hspace="pixels" vspace="pixels"/> Σύνταξη CSS: img{padding-top: τιμή; padding-right: τιμή; padding-bottom: τιμή; padding-left: τιμή;} ή img{padding: top_τιμή right_τιμή bottom_τιμή left_τιμή;} <!-- οι τιμές σε px, pt, cm, κ.λπ. --> 26
Εισαγωγή εικόνας σε ιστοσελίδα Ορισμός κενού χώρου μεταξύ της εικόνας και των στοιχείων που την περιβάλλουν Παράδειγμα: <body> Κείμενο πάνω από την εικόνα<br/> Κείμενο αριστερά <img src="./images/html.jpg" align="middle" hspace="25" vspace="25"/> Κείμενο δεξιά<br/> vspace Κείμενο κάτω από την εικόνα<br/> </body> hspace 27
Εισαγωγή εικόνας σε ιστοσελίδα Άλλες ιδιότητες της ετικέτας <img> Σημείωση: Οι ιδιότητες usemap, ismap και crossorigin θα αναφερθούν σε ξεχωριστές ενότητες, ενώ η ιδιότητα longdesc δεν υποστηρίζεται πλέον από κανέναν browser και δε θα γίνει σε αυτήν καμία απολύτως αναφορά. 28
Εισαγωγή εικόνας ως φόντο ιστοσελίδας Η ιδιότητα background της ετικέτας <body>, ορίζει μια εικόνα φόντου για ένα html έγγραφο, όμως δεν υποστηρίζεται από την HTML5 και στη θέση της χρησιμοποιούνται CSS. Σύνταξη: <body background="path/όνομα_αρχείου"> Σύνταξης CSS: body{background-image: url("path/όνομα_αρχείου"); Παράδειγμα: <!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body background="./images/abstract-ice.jpg"> <h1>1o ΕΠΑΛ Κατερίνης</h1> </body> </html> 29
Εισαγωγή favicon Το favicon (favorites icon) είναι ένα εικονίδιο το οποίο έχουν οι περισσότερες ιστοσελίδες, επάνω στη γραμμή τίτλου της καρτέλας (tab) του browser, στο πλαίσιο της οποίας φορτώνεται η ιστοσελίδα. favicon Η χρήση του εξυπηρετεί κυρίως όταν η ιστοσελίδα που το περιέχει μπαίνει στα αγαπημένα (bookmarks), ώστε να φαίνεται και εκεί για να μπορεί ο χρήστης να εντοπίσει το site ανάμεσα στα υπόλοιπα, ευκολότερα. Επίσης βοηθάει πολύ το χρήστη, όταν έχει ανοικτά πολλά tabs, στην άμεση αναγνώριση αυτού που αναζητά. 30
Εισαγωγή favicon Ο χρήστης μπορεί να χρησιμοποιήσει έτοιμα favicons, που μπορεί να βρει στο Διαδίκτυο, ή να δημιουργήσει δικά του μέσω σχετικών sites, όπως το favicon.cc (http://www.favicon.cc/) ή κάνοντας χρήση κατάλληλων εφαρμογών, όπως το Easy Picture2Icon 3.0 (http://www.picture2icon.com/) και πολλά άλλα (περισσότερες εφαρμογές http://listoffreeware.com/list-of-bestfree-favicon-generator-software/). Η προσθήκη favicon είναι πολλή εύκολη υπόθεση και δεν απαιτεί ούτε προγραμματιστικές ικανότητες, ούτε θέλει χρόνο για να υλοποιηθεί. Απλά ακολουθούνται τα παρακάτω βήματα: Βήμα 1: Βρίσκεται ένα έτοιμο favicon ή κατασκευάζεται Βήμα 2: Φορτώνεται μέσω του τμήματος <head> της ιστοσελίδας, με κλήση του μέσα από το tag <link> 31
Εισαγωγή favicon Σύνταξη: <link rel="icon" type="image/τύπος_εικόνας" href="url" /> Παραδείγματα: <link rel="icon" href="my_icon.gif" type="image/gif" /> <link rel="icon" href="my_icon.ico" type="image/x-icon" /> Σημείωση: Η HTML5 περιέχει και την παράμετρο sizes, για τον καθορισμό του μεγέθους του favicon, η οποία προς το παρόν δεν υποστηρίζεται από κανέναν browser. Παράδειγμα: <link rel="icon" href="my_icon.gif" type="image/gif" sizes="16x16"/> (ή sizes="16x16 32x32" για 2 μεγέθη) sizes 32
Εισαγωγή favicon Παράδειγμα: <!DOCTYPE html> <html> <head> <link rel="icon" href="hello.gif" type="image/gif" /> </head> <body> <h2>hello world!</h2> </body> </html> 33
Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο W3schools (http://www.w3schools.com) SitePoint (https://www.sitepoint.com/gif-jpg-pngwhats-difference/) Greek PC Blog (http://greekpcblog.com/?p=62) Τι είναι (http://ti-einai.gr/favicon/) 34