Πως ορίζουμε μια ετικέτα HTML για εικόνα
Στο μάθημα αυτό μάθουμε να ορίζουμε και να επεξεργαζόμαστε ετικέτα HTML για εικόνα καθώς και τις κυριότερες ιδιότητες που χρησιμοποιούνται.
Στην html χρησιμοποιείται η ετικέτα <img> η οποία έχει το χαρακτηριστικό ότι είναι μια, δηλαδή έχει μόνο ετικέτα ανοίγματος χωρίς την ύπαρξη της ετικέτας κλεισίματος. Για τον λόγο αυτόν χρησιμοποιούνται αρκετές ιδιότητες μέσα σε αυτήν προκειμένου να οριστούν οι επιθυμητές ιδιότητες. Ο ορισμός της είναι:
<img src="url" alt="κείμενο">
Η ιδιότητα src
Παρατηρούμε ότι μετά το όνομα της ετικέτας, img, χρησιμοποιείται η ιδιότητα src η οποία καλεί την εικόνα με αναφορά στο url της. Εάν για παράδειγμα έχουμε μια εικόνα myimage.jpg στον φάκελο images τότε η ιδιότητα src θα γραφτεί:
<img src="/images/myimage.jpg">
Εάν η εικόνα βρίσκεται μέσα στον ίδιο φάκελο με την τρέχουσα σελίδα, τότε η ιδιότητα src θα γραφτεί ως εξής:
<img src="myimage.jpg">
Υπάρχει περίπτωση κατά την οποία καλείται μια εικόνα από ένα άλλο url εκτός του site. Στην περίπτωση αυτή χρησιμοποιούμε το πλήρες url:
<img src=http://www.theothersite.com/images/myimage.jpg>
Χρήση της εικόνας ως σύνδεσμο
Σε προηγούμενο μάθημα είχαμε αναφερθεί για τους υπερσυνδέσμους. Σε έναν υπερσύνδεσμο μπορούμε να χρησιμοποιήσουμε μια ετικέτα html για εικόνα αντί για κείμενο υπερσυνδέσμου. Στην περίπτωση αυτή όταν φέρουμε τον δείκτη του ποντικιού επάνω στην εικόνα θα δούμε το γνωστό χεράκι δίχως να δούμε τις καταστάσεις αλλαγής του υπερσυνδέσμου. Ο ορισμός σε αυτή την περίπτωση έχει ως εξής:
<a href="mypage.php"> <img src=http://www.theothersite.com/images/myimage.jpg> </a>
Σε αυτό το παράδειγμα χρησιμοποιούμε την ετικέτα υπερσυνδέσμους <a> με την διαφορά ότι ανάμεσα στα tags ανοίγματος και κλεισίματος της ενσωματώνουμε την ετικέτα εικόνας <img>. Το αποτέλεσμα είναι ένα link εικόνας.
Χρήση εναλλακτικού κειμένου – ιδιότητα alt
Όλοι μας θα έχουμε δει το φαινόμενο κατά το οποίο αφήνοντας τον δείκτη του ποντικιού επάνω σε μια εικόνα, εμφανίζεται δίπλα του ένα μικρό κίτρινο πλαίσιο με λίγο κείμενο, κάτι σαν tooltip δηλαδή. Αυτό ονομάζεται alternative text, δηλαδή, εναλλακτικό κείμενο. Το κείμενο αυτό μπορεί να εμφανιστεί και στην θέση της εικόνας σε περίπτωση που για κάποιον λόγο δεν φορτωθεί στην σελίδα.
Το κείμενο αυτό στην img ετικέτα ορίζεται από την ιδιότητα alt ως εξής:
<img src="myimage.jpg" alt”Κείμενο εικόνας”>
Όταν λοιπόν φορτώσει η εικόνα myimage.jpg Και αφήσουμε τον δείκτη του ποντικιού επάνω σε αυτήν, θα εμφανιστεί ως tooltip το κείμενο κείμενο εικόνας.
Ορισμός μεγέθους εικόνας – width, height
Κάθε εικόνα έχει συγκεκριμένες διαστάσεις πλάτους και ύψους. Ωστόσο μπορούμε να τις αλλάξουμε με τις αντίστοιχες ιδιότητες width και height. Οι διαστάσεις ορίζονται σε εικονοστοιχεία, pixels. όπως φαίνεται στο ακόλουθο παράδειγμα.
<img src="myimage.jpg" alt”Κείμενο εικόνας” width="100" height="150">
Παρατηρούμε ότι στην περίπτωση αυτή δεν χρησιμοποιούμε την μονάδα μέτρησης των Pixels, px. Ο λόγος είναι ότι πρόκειται για την εξ ορισμού μονάδα μέτρησης.
Στην ετικέτα HTML για εικόνα , μπορούμε να χρησιμοποιήσουμε την ιδιότητα style στην οποία συμπεριλαμβάνουμε τις ιδιότητες των διαστάσεων της εικόνας.
<img src="myimage.jpg" alt”Κείμενο εικόνας” style="width:128px; height:128px">
Στην περίπτωση αυτή χρησιμοποιούμε και την μονάδα μέτρησης px. Επίσης παρατηρήστε ότι μέσα στην ιδιότητα style ο ορισμός των ιδιοτήτων width και height τερματίζεται με το ελληνικό ερωτηματικό ;.
Ποιος είναι ο σωστός τρόπος;
Ποιος από τους δύο τρόπους για τον ορισμό των διαστάσεων της εικόνας είναι σωστός;
Στο μάθημα με τους τρόπους εισαγωγής css είχαμε πει ότι μπορούμε να εισάγουμε κανόνες css με την ετικέτα style τόσο στο head κομμάτι της σελίδας, εσωτερικό στυλ, όσο και μέσα σε μια άλλη ετικέτα html ως inline style. Τον τελευταίο τρόπο τον είδαμε ποιο πάνω με την χρήση της style μέσα στην ετικέτα img. Σε περίπτωση χρήσης και των δύο τρόπων ισχύει ο νόμος της προτεραιότητας των στυλ. Αυτός λέει ότι ένα inline style προηγείται σε ισχύ έναντι ενός εσωτερικού στυλ. Ας δούμε λοιπόν το ακόλουθο παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<p>Ένα inline style έχει προτεραιότητα έναντι του εσωτερικού στυλ</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Στο παράδειγμα αυτό χρησιμοποιείται η ιδιότητα width τόσο ως εσωτερικό στυλ στο head κομμάτι της σελίδας όσο και ως inline στυλ μέσα στις ετικέτες img.
Στην πρώτη ετικέτα img η ιδιότητα πλάτους χρησιμοποιείται μέσα στο εσωτερικό στυλ της εικόνας με τιμή 128 pixels. Αυτό σημαίνει ότι θα υπερισχύσει έναντι του αντίστοιχου πλάτους το οποίο έχει οριστεί στο εσωτερικό στυλ και το οποίο έχει τιμή 100% του πλάτους της σελίδας.
Στην 2η ετικέτα img η ιδιότητα πλάτους χρησιμοποιείται ως ιδιότητα της ετικέτας img, δίχως την χρήση του στυλ δηλαδή. Αυτό σημαίνει ότι η τιμή 128, pixels, θα παρακαμφτεί θέτοντας σε ισχύ την τιμή 100% η οποία ορίζεται στο εσωτερικό στυλ.
Το αποτέλεσμα, όπως είναι επόμενο, είναι η πρώτη εικόνα να έχει πλάτος 128 pixels ενώ η 2η εικόνα ακολουθεί το πλάτος του εσωτερικού στυλ. Όταν λοιπόν θέλουμε για μια συγκεκριμένη εικόνα μέσα στην σελίδα να ορίσουμε ξεχωριστές διαστάσεις, καλό είναι να χρησιμοποιούμε το inline style με την ιδιότητα style.
Επίλογος
Στο μάθημα αυτό είδαμε την ετικέτα HTML για εικόνα καθώς και τις κυριότερες ιδιότητες της.
