Με την HTML μπορούμε να εισάγουμε εικόνες στην σελίδα μας
Η ετικέτα <img>
Με την ετικέτα αυτή εισάγουμε μια εικόνα στην σελίδα μας. Η ετικέτα <img> δεν έχει ετικέτα τέλους, οπότε βάζουμε τον χαρακτήρα / πριν τον χαρακτήρα >. Έχει τις εξής ιδιότητες:
| Ιδιότητα | Τιμή | Περιγραφή |
|---|---|---|
| align | baseline, top, middle, bottom, absmiddle, absbottom, left, right |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την στοίχιση της εικόνας με το κείμενο που βρίσκετε δίπλα της |
| alt | Κείμενο | Ορίζει εναλλακτικό κείμενο (χρησιμοποιείται για τους browsers που δεν υποστηρίζουν την εμφάνιση γραφικών) |
| border | αριθμός pixels | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το πάχος του περιγράμματος της εικόνας |
| height | αριθμός pixels % |
Ορίζει το ύψος της εικόνας |
| hspase | αριθμός pixels | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει τον κενό χώρο μεταξύ της εικόνας και των υπόλοιπων περιεχομένων της σελίδας που βρίσκονται αριστερά και δεξιά του |
| ismap | URL | Ορίζει την εικόνα σαν "χάρτη" |
| src | URL | Ορίζει το URL του αρχείου της εικόνας |
| usemap | URL | Ορίζει έναν χάρτη επάνω στην εικόνα με τον οποίον μπορούμε να έχουμε links σε διάφορα σημεία μέσα στην εικόνα Δείτε επίσης: <map> <area> |
| vspase | αριθμός pixels | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει τον κενό χώρο μεταξύ της εικόνας και των υπόλοιπων περιεχομένων της σελίδας που βρίσκονται επάνω και κάτω του |
| width | αριθμός pixels % |
Ορίζει το μήκος της εικόνας |
Εισαγωγή εικόνας στην σελίδα
<img src="/bird.jpg" width="100" height="30" border="2" alt="Χρωματιστός παπαγάλος" />
Με τον παραπάνω κώδικα προσθέτουμε στην σελίδα μας την εικόνα με όνομα bird.jpg, η οποία έχει μήκος 100 pixels και ύψος 30 pixels και το περίγραμμα της έχει πάχος 2 pixel
Η ιδιότητα alt
Υπάρχουν ορισμένοι browsers που δεν υποστηρίζουν την εμφάνιση γραφικών με αποτέλεσμα να μην εμφανίζονται οι εικόνες που τοποθετούμε στις σελίδες μας. Η χρήση της ιδιότητας alt έχει σαν αποτέλεσμα σε έναν τέτοιο browser να εμφανίζετε αντί της εικόνας, το κείμενο το οποίο ορίζεται με την ιδιότητα. Συνήθως το κείμενο αυτό περιγράφει την εικόνα έτσι ώστε ο χρήστης που δεν μπορεί να την δει, να πάρει μια ιδέα για το τι απεικονίζετε σε αυτήν. Το alt είναι τα τρια πρώτα γράμματα από την λέξη alternative
Η ιδιότητα alt
<img src="/bird.jpg" width="100" height="30" border="2" alt="χρωματιστός παπαγάλος" />
Διαστάσεις της εικόνας
Οι ετικέτες width και height ορίζουν τις διαστάσεις της εικόνας σε pixels. Το συνηθέστερο είναι να γράφουμε τις πραγματικές διαστάσεις της εικόνας. Ορισμένες φορές όμως θέλουμε να εμφανίσουμε την εικόνα με μικρότερες ή μεγαλύτερες από τις κανονικές διαστάσεις προσαρμόζοντας ανάλογα τις ιδιότητες width και height. Βέβαια αν οι διαστάσεις που ορίζουμε απέχουν πολύ από τις πραγματικές διαστάσεις της εικόνας, τότε αυτή εμφανίζεται αλλοιωμένη. Γι' αυτό είναι προτιμότερο να μικραίνετε ή να μεγαλώνετε την εικόνα μέσα σε κάποιο πρόγραμμα επεξεργασίας γραφικών (όπως το GIMP το οποίο είναι δωρεάν) γιατί εκεί χρησιμοποιούνται ειδικές συναρτήσεις που αλλάζουν το μέγεθος της εικόνας χωρίς να την αλλοιώνουν.
Η ιδιότητα align
Καθορίζει την στοίχιση της εικόνας με το κείμενο που είναι δίπλα σε αυτήν. Οι τιμές που μπορεί να πάρει είναι οι εξής: baseline, top, middle, bottom, absmiddle, absbottom, left, right
Εικόνες με την ιδιότητα align
<img src="/koumpi.jpg" width="100" height="51" align="top" />
Η ιδιότητα align δεν συμπεριελαμβάνεται στην HTML5. Χρησιοποιούμε CSS για να ορίσουμε στοίχηση των στοιχείων μιας σελίδας
Περίγραμμα στις εικόνες
Στις εικόνες έχουμε δυνατότητα να βάλουμε περίγραμμα, του οποίου το πάχος το ορίζουμε με την ιδιότητα border
Εικόνες με πλαίσιο
<img src="/bird.jpg" width="100" height="30" border="2" alt="χρωματιστός παπαγάλος" />
Η ιδιότητα border δεν συμπεριελαμβάνεται στην HTML5. Χρησιοποιούμε CSS για να ορίσουμε περίγραμμα στα στοιχεία μιας σελίδας
Οι εικόνες σαν φόντο
Εικόνες μπορούμε να βάλουμε και σαν φόντο σε διάφορα στοιχεία της σελίδας μας, όπως σε ολόκληρο πίνακα, σε μια γραμμή ενός πίνακα, σε ένα κελί ενός πίνακα, αλλά και σε ολόκληρη την σελίδα μας. Όταν μια εικόνα τοποθετείται σαν φόντο σε οποιοδήποτε στοιχείο, τότε αυτή επαναλαμβάνεται για όλο το μέγεθος του στοιχείου.
Για παράδειγμα έχω την παρακάτω εικόνα η οποία έχει μέγεθος 180Χ100 :
Αν αυτήν την εικόνα την τοποθετήσω σαν φόνο σε ένα κελί ενός πίνακα το οποίο έχει μήκος 400 και ύψος 250, τότε η εικόνα αυτή θα επαναληφθεί για όλο το μήκος του κελιού
Δείτε επίσης την ίδια εικόνα σαν φόντο σε ολόκληρο σελίδα
Βέβαια η εικόνα αυτή δεν προσφέρεται για φόντο. Συνήθως για φόντο χρησιμοποιούμε πολύ μικρά εικονίδια τα οποία όταν επαναλαμβάνονται δείχνουν σαν μια μεγάλη και ενιαία εικόνα, όπως το παρακάτω εικονίδιο το οποίο έχει μέγεθος 15Χ15:
Δείτε την εικόνα αυτή σαν φόντο στο κελί ενός πίνακα:
Δείτε αυτήν την εικόνα σαν φόντο σε ολόκληρο σελίδα
Αυτά τα εικονίδια λέγονται textures και υπάρχουν άπειρα και πολύ όμορφα στο Internet τα οποία μπορείτε να κατεβάσετε και να χρησιμοποιήσετε στις δικές σας σελίδες
Για παράδειγμα έχω την παρακάτω εικόνα η οποία έχει μέγεθος 180Χ100 :
Αν αυτήν την εικόνα την τοποθετήσω σαν φόνο σε ένα κελί ενός πίνακα το οποίο έχει μήκος 400 και ύψος 250, τότε η εικόνα αυτή θα επαναληφθεί για όλο το μήκος του κελιού
Δείτε επίσης την ίδια εικόνα σαν φόντο σε ολόκληρο σελίδα
Βέβαια η εικόνα αυτή δεν προσφέρεται για φόντο. Συνήθως για φόντο χρησιμοποιούμε πολύ μικρά εικονίδια τα οποία όταν επαναλαμβάνονται δείχνουν σαν μια μεγάλη και ενιαία εικόνα, όπως το παρακάτω εικονίδιο το οποίο έχει μέγεθος 15Χ15:
Δείτε την εικόνα αυτή σαν φόντο στο κελί ενός πίνακα:
Δείτε αυτήν την εικόνα σαν φόντο σε ολόκληρο σελίδα
Αυτά τα εικονίδια λέγονται textures και υπάρχουν άπειρα και πολύ όμορφα στο Internet τα οποία μπορείτε να κατεβάσετε και να χρησιμοποιήσετε στις δικές σας σελίδες
