Με την HTML μπορούμε να εισάγουμε εικόνες στην σελίδα μας

a parrot
Akis Photo
internet spy guy

Η ετικέτα <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. Βέβαια αν οι διαστάσεις που ορίζουμε απέχουν πολύ από τις πραγματικές διαστάσεις της εικόνας, τότε αυτή εμφανίζεται αλλοιωμένη. Γι' αυτό είναι προτιμότερο να μικραίνετε ή να μεγαλώνετε την εικόνα μέσα σε κάποιο πακέτο επεξεργασίας γραφικών γιατί εκεί χρησιμοποιούνται ειδικές συναρτήσεις που αλλάζουν το μέγεθος της εικόνας χωρίς να την αλλοιώνουν.
Εικόνες με συγκεκριμένες διαστάσεις
<img src="bird.jpg" width="100" height="30" />

Η ιδιότητα 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 τα οποία μπορείτε να κατεβάσετε και να χρησιμοποιήσετε στις δικές σας σελίδες

Σχετικά Θέματα

Πώς μπορώ να βάλω μια εικόνα σαν φόντο στην σελίδα μου;
Η ιδιότητα background της ετικέτας <body> ορίζει την εικόνα που θα τοποθετηθεί στο φόντο της σελίδας μας.

Πώς μπορώ να βάλω μια εικόνα σαν φόντο σε ολόκληρο πίνακα ή σε ορισμένα κελιά αυτού;

Πώς μπορώ να βάλω link σε μια εικόνα;
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.