4ο Μάθημα: Εικόνες

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

Εισαγωγή εικόνας:

Για την εισαγωγή εικόνας χρησιμοποιείται η ετικέτα <img> η οποία έχει το χαρακτηριστικό ότι είναι μια, δηλαδή έχει μόνο ετικέτα ανοίγματος χωρίς την ύπαρξη της ετικέτας κλεισίματος. Για τον λόγο αυτόν χρησιμοποιούνται αρκετές ιδιότητες μέσα σε αυτήν προκειμένου να οριστούν οι επιθυμητές ιδιότητες. Ο ορισμός της είναι:

<img src="url" alt="κείμενο">

Παρατηρούμε ότι μετά το όνομα της ετικέτας, img, χρησιμοποιείται η ιδιότητα src η οποία καλεί την εικόνα με αναφορά στο url της. Εάν για παράδειγμα έχουμε μια εικόνα eikona1.jpg στον φάκελο eikones τότε η ιδιότητα src θα γραφτεί:

<img src="/eikones/ eikona1.jpg">

Εάν η εικόνα βρίσκεται μέσα στον ίδιο φάκελο με την τρέχουσα σελίδα, τότε η ιδιότητα src θα γραφτεί ως εξής:

<img src=" eikona1.jpg">

Υπάρχει περίπτωση κατά την οποία καλείται μια εικόνα από ένα άλλο url εκτός του site. Στην περίπτωση αυτή χρησιμοποιούμε το πλήρες url:

<img  src=Διεύθυνση εικόνας στο διαδίκτυο (url)>

Π.χ.

Αντιγράψτε τον παρακάτω κώδικα πατώντας εδώ:

<img  src=https://platanias.scanmy.net/wp-content/uploads/dendro1.jpg>

Σας θυμίζει κάτι αυτή η εικόνα;

Εξάσκηση:

Αναζητήστε στο διαδίκτυο μια εικόνα της αρεσκείας σας. Αντιγράψτε το url της εικόνας που βρήκατε στον On Line Editor και εμφανίστε την εικόνα που επιλέξατε.

Διαστάσεις της εικόνας:

Οι ετικέτες width και height ορίζουν τις διαστάσεις της εικόνας σε pixels. Το συνηθέστερο είναι να γράφουμε τις πραγματικές διαστάσεις της εικόνας. Ορισμένες φορές όμως θέλουμε να εμφανίσουμε την εικόνα με μικρότερες ή μεγαλύτερες από τις κανονικές διαστάσεις προσαρμόζοντας ανάλογα τις ιδιότητες width και height.

Π.χ.
 Αντιγράψτε το url:

<img  src=https://platanias.scanmy.net/wp-content/uploads/dendro1.jpg width="200" height="200">

στον On Line Editor και παρατηρήστε ότι η αρχική εικόνα έγινε πλέον τετράγωνη όπου το πλάτος και το ύψος της είναι 200 pixel.

Εξάσκηση:

Αναζητήστε στο διαδίκτυο μια εικόνα της αρεσκείας σας. Αντιγράψτε το url της εικόνας που βρήκατε στον On Line Editor και εμφανίστε την εικόνα που επιλέξατε και αλλάξτε τις διαστάσεις εμφάνισης της εικόνας σας.

Περίγραμμα εικόνας:

Στις εικόνες έχουμε δυνατότητα να βάλουμε περίγραμμα, του οποίου το πάχος το ορίζουμε με την ιδιότητα border

Π.χ.
 Αντιγράψτε το url:

<img  src=https://platanias.scanmy.net/wp-content/uploads/dendro1.jpg width="400" height="400" border="3"> στον On Line Editor και παρατηρήστε το περίγραμμα της εικόνας.

Η ιδιότητα alt

Υπάρχουν ορισμένοι browsers που δεν υποστηρίζουν την εμφάνιση γραφικών με αποτέλεσμα να μην εμφανίζονται οι εικόνες που τοποθετούμε στις σελίδες μας. Η χρήση της ιδιότητας alt έχει σαν αποτέλεσμα σε έναν τέτοιο browser να εμφανίζετε αντί της εικόνας, το κείμενο το οποίο ορίζεται με την ιδιότητα. Συνήθως το κείμενο αυτό περιγράφει την εικόνα έτσι ώστε ο χρήστης που δεν μπορεί να την δει, να πάρει μια ιδέα για το τι απεικονίζεται σε αυτήν.

Π.χ.

 Αντιγράψτε το url:

<img  src=https://platanias.scanmy.net/wp-content/uploads/dendro1.jpg width="400" height="400" border="3" alt="Η ελιά των Βουβών"> στον On Line Editor.

Η ιδιότητα align

Καθορίζει την στοίχιση της εικόνας με το κείμενο που είναι δίπλα σε αυτήν. Οι τιμές που μπορεί να πάρει είναι οι εξής: baseline, top, middle, bottom, absmiddle, absbottom, left, right.

Π.χ.

 Αντιγράψτε το url:

<img  src=https://platanias.scanmy.net/wp-content/uploads/dendro1.jpg width="400" height="400" border="3" align="right"> στον On Line Editor.