Μέχρι τώρα ο ορισμός της εικόνας σας θα πρέπει να μοιάζει με κάτι τέτοιο:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Ωστόσο, στο στοιχείο img μπορούν (και πρέπει) να ανατεθούν κάποιες ιδιότητες. Πρώτα από όλα υπάρχει το alt. Ο κείμενος που καθορίζεται εδώ εμφανίζεται από τον περιηγητή όταν η εικόνα – για οποιονδήποτε λόγο – δεν μπορεί να φορτωθεί.
Δυστυχώς, υπάρχουν συχνά παρεξηγήσεις σχετικά με το χαρακτηριστικό alt. Το χαρακτηριστικό alt χρησιμεύει αποκλειστικά για την περίπτωση μη εμφάνισης της εικόνας. Ωστόσο, μερικοί περιηγητές εμφανίζουν την τιμή του χαρακτηριστικού alt σε ένα παράθυρο tooltip όταν ο χρήστης τοποθετεί τον δείκτη πάνω στην εικόνα.
Αυτή η συμπεριφορά είναι εσφαλμένη. Για τέτοια tooltips, το χαρακτηριστικό που χρησιμοποιείται είναι το title. Μια αντίστοιχη ορισμός θα μοιάζει με το εξής:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Το λογότυπο του PSD-Tutorials.de" />
Σε αυτήν την περίπτωση, η τιμή του title αντικαθιστά αυτήν του alt.
Διαστάσεις
Πλέον στο HTML συχνά δεν χρησιμοποιούνται πλέον τα χαρακτηριστικά, αλλά επιλύονται μέσω CSS. Ωστόσο, η καθορισμός των διαστάσεων δεν περιλαμβάνεται σε αυτό. Το ύψος και το πλάτος καθορίζονται αναλλοίωτα μέσω των δύο χαρακτηριστικών width και height. Ένα ακόμη παράδειγμα:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Το λογότυπο του PSD-Tutorials.de" width="200" height="150" />
Αν δεν δώσετε μονάδα μέτρησης για το width ή το height, οι αριθμητικές τιμές θα εκληφθούν ως pixel από τον περιηγητή. Φυσικά, στο παραπάνω παράδειγμα, η εικόνα είναι 200 pixel φάρδος και 150 pixel ύψος. Είναι δυνατή και μια ποσοστιαία τιμή.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Το λογότυπο του PSD-Tutorials.de" width="20%" height="15%" />
Οι ποσοστιαίες τιμές αναφέρονται στον διαθέσιμο χώρο εμφάνισης. Αν δεν γίνει καμία καθορισμένη διάσταση, οι περιηγητές εμφανίζουν τις γραφικές εικόνες στο αρχικό τους μέγεθος.
Εικόνες και παράγραφοι κειμένου
Όταν τοποθετείτε εικόνες σε συνδυασμό με ρευστό κείμενο, πρέπει να είστε προσεκτικοί.
<p><img src="logo.png" alt="" width="180" height="150" /> Αυτό το κείμενο εμφανίζεται δίπλα στην εικόνα.</p>
Το img είναι ένα λεγόμενο Inline-Στοιχείο. Έτσι, οι γραφικές μπορούν να τοποθετηθούν άμεσα μέσα στο κείμενο. Αν η εικόνα είναι ψηλότερη από το ύψος των γραμμών, το κείμενο προσαρμόζεται στη γραμμή από τον περιηγητή. Προεπιλεγμένα, το κείμενο ευθυγραμμίζεται προς τα κάτω στην εικόνα.
Η ευθυγράμμιση μπορούσε να επηρεαστεί σε παλαιότερες εκδόσεις HTML μέσω του χαρακτηριστικού align. Παρακαλώ μην το χρησιμοποιήσετε πλέον, καθώς αφαιρέθηκε από το πρότυπο HTML5. Χρησιμοποιήστε αντ' αυτού τις δυνατότητες που σάς προσφέρει το CSS. Με αυτόν τον τρόπο, μπορείτε να επιτύχετε, για παράδειγμα, να περικυκλώσετε το κείμενο με την εικόνα.
Μια μεγάλη περιγραφή
Το HTML σάς προσφέρει τη δυνατότητα να παραθέσετε μια λεπτομερή περιγραφή για μια εικόνα. Αυτό είναι πρακτικό όταν πραγματικά χρειάζεται επεξηγήσεις για μια εικόνα. Μπορείτε να αποθηκεύσετε τις πρόσθετες πληροφορίες σε διάφορα σημεία και να αναφερθείτε σε αυτές.
<img src="bild1.png" alt="Διάγραμμα 1" title="Διάγραμμα 1" longdesc="#diagramm" />
Εδώ υποθέτουμε ότι στη σελίδα υπάρχει μια περιοχή με το αναγνωριστικό diagramm.
Η πιο δημοφιλής προσέγγιση πιθανότατα να είναι αυτή στην οποία οι πληροφορίες αποθηκεύονται σε ένα εξωτερικό αρχείο.
<img src="bild1.png" alt="Διάγραμμα 1" longdesc="diagramm1.htm" />
Ωστόσο, παρατηρείται έλλειψη υποστήριξης από τους περιηγητές. Επιπλέον, αυτό το χαρακτηριστικό δημιουργεί ερωτηματικά στους κατασκευαστές περιηγητών για το πώς μπορούν να το υλοποιήσουν με απλότητα.
Για παράδειγμα, στον Firefox, η επίλυση δεν είναι πραγματικά καλή και κατανοητή. Αν μια εικόνα έχει το χαρακτηριστικό longdesc, οι κανονικοί επισκέπτες της σελίδας δεν το αναγνωρίζουν αρχικά. Πρέπει αντίθετα να κάνουν δεξί κλικ στην εικόνα. Στο μενού εμφανίζεται το σημείο Εμφάνιση περιγραφής. Αν το επιλέξουν, εμφανίζονται οι πρόσθετες πληροφορίες που δόθηκαν στο longdesc. Όπως είπαμε, αυτό λειτουργεί έτσι στον Firefox, αλλά σίγουρα δεν είναι κομψό.
Η Opera το έχει λύσει παρόμοια. Όταν κάνετε δεξί κλικ σε μια εικόνα σε αυτόν τον περιηγητή, εμφανίζεται η εισαγωγή Μακρά Περιγραφή.
Αυτή οδηγεί στις συγκεκριμένες πρόσθετες πληροφορίες.
Το WC3 προτείνει επιπλέον να δίνεται η μακροπρόθεσμη περιγραφή ως Data-URL.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Αν δεν έχετε ακόμα εμπειρία με αυτά τα Data-URLs, μπορείτε να βρείτε λεπτομερείς πληροφορίες στο http://de.wikipedia.org/wiki/Data-URL.
Ορισμός Περιγραφών Εικόνων
Μέχρι τώρα δεν υπήρχαν στο HTML καθόλου δυνατότητες για τον ορισμό λεζάντων εικόνων και ομαδοποιήσεων εικόνων. Αυτή η πτυχή άλλαξε με το HTML5. Εισήχθησαν τα δύο νέα στοιχεία figure και figcaption.
Για να το δούμε εκ των προτέρων: το στοιχείο figure δεν είναι αποκλειστικά για χρήση σε συνδυασμό με γραφικά. Πράγματι, το στοιχείο μπορεί να χρησιμοποιηθεί για όλα τα στοιχεία που επεκτείνουν ένα έγγραφο. Αυτά μπορεί να είναι εκτός από εικόνες, για παράδειγμα, διαγράμματα, παραδείγματα κώδικα και βίντεο.
Εκτός από το figure υπάρχει και το figcaption. Μέσω αυτού μπορούν να εξοπλιστούν τα περιεχόμενα που δεν είναι αναγνώσιμα για συγκεκριμένες ομάδες χρηστών με εναλλακτική περιγραφή.
Ένα παράδειγμα για τη χρήση των δύο στοιχείων figure και figcaption είναι:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Αυτό είναι το νέο μας λογότυπο.</figcaption> </figure>
Μια ματιά στο αποτέλεσμα στον περιηγητή παράγει τα παρακάτω αποτελέσματα:
Το πώς οι περιηγητές αντιμετωπίζουν τα δύο στοιχεία είναι κυρίως στα χέρια τους. Βασικά, μπορείτε φυσικά να επηρεάσετε ξανά την εμφάνιση μέσω CSS.
Μέσα σε ένα στοιχείο figure μπορούν να εισαχθούν όσες εικόνες ή άλλα στοιχεία επιθυμείτε. Ωστόσο, μπορεί να περιέχει μόνο ένα στοιχείο figcaption. Και πάλι, ένα παράδειγμα:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Αυτό είναι το νέο μας λογότυπο.</figcaption> </figure>
Με αυτόν τον τρόπο μπορείτε να εισάγετε περισσότερες εικόνες σε ένα στοιχείο figure.
Ιδιαίτερα όσον αφορά την λογική δομή των ιστοσελίδων ή των περιεχομένων, υπάρχουν αρκετές νέες εξελίξεις στο HTML5. Αυτά θα τα μάθετε λεπτομερώς κατά τη διάρκεια αυτής της σειράς, φυσικά.
