Οι εικόνες μπορούν να βελτιώσουν το σχεδιασμό και την εμφάνιση μιας ιστοσελίδας. Στην HTML, μπορούμε να προσθέσουμε εικόνες χρησιμοποιώντας την ετικέτα <img>.
Η ετικέτα <img> δεν έχει κλείσιμο, και τα στοιχεία της είναι τα εξής:
src: Τοποθεσία του αρχείου εικόνας.
- alt: Εναλλακτικό κείμενο που εμφανίζεται όταν η εικόνα δεν μπορεί να φορτωθεί.
- width: Πλάτος της εικόνας σε εικονοστοιχεία (pixels).
- height: Ύψος της εικόνας σε εικονοστοιχεία (pixels).
Μπορούμε να προσθέσουμε εικόνες στη σελίδα μας χρησιμοποιώντας την παραπάνω σύνταξη και δηλώνοντας τον σωστό τύπο αρχείου εικόνας (jpg, png, gif κλπ.). Για παράδειγμα:
<img src="example.jpg" alt="Παράδειγμα εικόνας" width="500" height="300">
Στο παραπάνω παράδειγμα, η εικόνα με όνομα “example.jpg” εμφανίζεται στη σελίδα με πλάτος 500 pixels και ύψος 300 pixels. Επίσης, υπάρχει εναλλακτικό κείμενο “Παράδειγμα εικόνας” που εμφανίζεται όταν η εικόνα δεν μπορεί να φορτωθεί.
Επιπλέον, μπορούμε να χρησιμοποιήσουμε το CSS για να εφαρμόσουμε στυλ στις εικόνες μας, όπως πλαίσια, σκίαση, αντιθέτων χρωμάτων κ.λπ. Για παράδειγμα:
<img src="https://pliroforiki-edu.gr/wp-content/uploads/2023/05/HTML.png" alt="Παράδειγμα εικόνας" style="border: 1px solid black; box-shadow: 2px 2px grey;">
Στο παραπάνω παράδειγμα, η εικόνα έχει ένα μαύρο πλαίσιο που ορίζεται με το κανονικό στυλ του CSS, ενώ η σκιά που εφαρμόζεται στην εικόνα δημιουργείται με την ιδιότητα box-shadow του CSS.
Τέλος, μπορούμε επίσης να προσθέσουμε συνδέσμους στις εικόνες μας, χρησιμοποιώντας την ετικέτα :
<a href="example.html"> <img src="https://pliroforiki-edu.gr/wp-content/uploads/2023/05/HTML.png" alt="Παράδειγμα εικόνας"> </a>
Στο παραπάνω παράδειγμα, η εικόνα γίνεται κλικάρισμα και οδηγεί στη σελίδα “example.html”. Αυτό μπορεί να χρησιμοποιηθεί για παράδειγμα, για να οδηγηθούν οι χρήστες σε άλλες σελίδες ή να επιτραπεί η προβολή ενός μεγαλύτερου μεγέθους της εικόνας.
[adinserter block=”2″]
Η σύνταξη της ετικέτας HTML <img> χρησιμοποιείται για να ενσωματώσει μια εικόνα σε μια ιστοσελίδα.
Οι εικόνες δεν εισάγονται τεχνικά στην ιστοσελίδα, αλλά συνδέονται με τις ιστοσελίδες. Η ετικέτα <img> δημιουργεί έναν χώρο για την εικόνα που αναφέρεται.
Η ετικέτα <img> είναι άδεια, περιέχει μόνο γνωρίσματα και δεν έχει κλείσιμο ετικέτας.
Η ετικέτα <img> έχει δύο υποχρεωτικά γνωρίσματα:
src: Ορίζει τη διαδρομή (path) προς την εικόνα.
alt: Ορίζει έναν εναλλακτικό κείμενο για την εικόνα.
Παράδειγμα:
<img src="path_to_image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα">
Στο παραπάνω παράδειγμα, ο κωδικός HTML δημιουργεί μια εικόνα με τον καθορισμένο δρομέα (path) προς την εικόνα “path_to_image.jpg” και έχει οριστεί ένα εναλλακτικό κείμενο που θα εμφανιστεί αν η εικόνα δεν μπορεί να φορτωθεί ή για χρήστες με προβλήματα πρόσβασης στις εικόνες.
Το υποχρεωτικό γνώρισμα src καθορίζει τη διαδρομή (URL) προς την εικόνα.
Σημείωση: Όταν μια ιστοσελίδα φορτώνεται, είναι το πρόγραμμα περιήγησης που παίρνει την εικόνα από έναν διακομιστή και την ενσωματώνει στη σελίδα. Επομένως, βεβαιωθείτε ότι η εικόνα παραμένει στην ίδια θέση σε σχέση με την ιστοσελίδα, διαφορετικά οι επισκέπτες θα βλέπουν ένα εικονίδιο χαλασμένου συνδέσμου. Το εικονίδιο του χαλασμένου συνδέσμου και το εναλλακτικό κείμενο εμφανίζονται εάν ο περιηγητής δεν μπορεί να βρει την εικόνα.
Για παράδειγμα:
<img src="path_to_image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα">
Στο παραπάνω παράδειγμα, η τιμή του γνωρίσματος src είναι “path_to_image.jpg”, η οποία πρέπει να είναι η σωστή διαδρομή προς την εικόνα που θέλετε να εμφανίσετε. Εάν η εικόνα δεν βρεθεί στην καθορισμένη διαδρομή, ο περιηγητής θα εμφανίσει το εικονίδιο του χαλασμένου συνδέσμου και το εναλλακτικό κείμενο που έχει οριστεί.
Το υποχρεωτικό γνώρισμα alt παρέχει ένα εναλλακτικό κείμενο για μια εικόνα, εάν ο χρήστης για κάποιο λόγο δεν μπορεί να τη δει (λόγω αργής σύνδεσης, σφάλματος στο γνώρισμα src ή αν ο χρήστης χρησιμοποιεί ένα αναγνώστη οθόνης).
Η τιμή του γνωρίσματος alt πρέπει να περιγράφει την εικόνα:
<img src="path_to_image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα">
Στο παραπάνω παράδειγμα, η τιμή του γνωρίσματος alt είναι “Εναλλακτικό κείμενο για την εικόνα”. Αυτό το κείμενο θα εμφανιστεί αντί για την εικόνα εάν ο χρήστης δεν μπορεί να δει την εικόνα, για παράδειγμα, λόγω προβλημάτων σύνδεσης ή αν χρησιμοποιεί αναγνώστη οθόνης.
Είναι σημαντικό να παρέχετε περιγραφικό εναλλακτικό κείμενο για τις εικόνες, καθώς αυτό βοηθά τους χρήστες με προβλήματα όρασης ή περιορισμένη πρόσβαση στις εικόνες να κατανοήσουν το περιεχόμενο της ιστοσελίδας. Επίσης, το κείμενο που παρέχετε στο γνώρισμα alt είναι επίσης σημαντικό για τους μηχανισμούς αναζήτησης. Οι μηχανές αναζήτησης δεν μπορούν να αναγνωρίσουν το περιεχόμενο των εικόνων, αλλά μπορούν να διαβάσουν το κείμενο του γνωρίσματος alt για να κατανοήσουν το περιεχόμενο της εικόνας και να το λάβουν υπόψην κατά την αναζήτηση. Αυτό μπορεί να βελτιώσει την ορατότητα της ιστοσελίδας σας στις αποτελεσματικές αναζητήσεις.
Αν ένας περιηγητής δεν μπορεί να βρει μια εικόνα, θα εμφανίσει την τιμή του γνωρίσματος alt:
<img src="path_to_image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα">
Στο παραπάνω παράδειγμα, αν ο περιηγητής δεν μπορεί να φορτώσει την εικόνα “path_to_image.jpg”, θα εμφανίσει το “Εναλλακτικό κείμενο για την εικόνα” αντί για την εικόνα.
Αυτό είναι χρήσιμο για τους χρήστες που δεν μπορούν να δουν τις εικόνες, είτε λόγω προβλημάτων σύνδεσης, είτε αν χρησιμοποιούν αναγνώστη οθόνης. Το εναλλακτικό κείμενο παρέχει μια περιγραφή της εικόνας για να κατανοήσουν το περιεχόμενο που θα έπρεπε να εμφανίζεται. Επίσης, οι μηχανές αναζήτησης χρησιμοποιούν το εναλλακτικό κείμενο για να κατανοήσουν το περιεχόμενο της εικόνας κατά την αναζήτηση και την ευρεσιτεχνία των ιστοσελίδων.
Μπορείτε να χρησιμοποιήσετε το γνώρισμα style για να καθορίσετε το πλάτος και το ύψος μιας εικόνας.
Για παράδειγμα:
<img src="path_to_image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα" style="width: 300px; height: 200px;">
Στο παραπάνω παράδειγμα, η εικόνα έχει καθοριστεί να έχει πλάτος 300 pixels και ύψος 200 pixels, χρησιμοποιώντας το γνώρισμα style και την ιδιότητα width και height. Μπορείτε να προσαρμόσετε τις τιμές ανάλογα με τις ανάγκες σας.
Η καθορισμένη διάσταση μπορεί να βοηθήσει στη σωστή εμφάνιση της εικόνας στη σελίδα και στην αποφυγή παραμορφώσεων ή αλλαγών στην αναλογία πλευρών της εικόνας. Είναι σημαντικό να προσέξετε ότι οι καθορισμένες διαστάσεις θα πρέπει να είναι συμβατές με το αρχικό μέγεθος της εικόνας, προκειμένου να αποφευχθεί η παραμόρφωση ή η αλλαγή αναλογίας πλευρών της εικόνας.
Σημείωση: Οι διαστάσεις που καθορίζονται με το γνώρισμα style είναι απόλυτες διαστάσεις και μπορεί να επηρεάσουν την ανταπόκριση της εικόνας και ενδέχεται να επηρεάσουν την δυνατότητα ανακατάταξης των στοιχείων της σελίδας σε διάφορες συσκευές ή αναλύσεις οθονών.
[adinserter block=”3″]
Για να διατηρήσετε την αναλογία πλευρών της εικόνας και να προσαρμόζετε δυναμικά το μέγεθος της εικόνας σε διαφορετικά μεγέθη οθονών ή συσκευών, μπορείτε να χρησιμοποιήσετε τεχνικές αντίστασης (responsive techniques) όπως το CSS για την ευέλικτη προσαρμογή των εικόνων.
Παράδειγμα:
<img src="path_to_image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα" style="max-width: 100%; height: auto;">
Στο παραπάνω παράδειγμα, η εικόνα έχει καθοριστεί να έχει μέγιστο πλάτος 100% του διαθέσιμου χώρου και το ύψος προσαρμόζεται αυτόματα για να διατηρήσει την αναλογία πλευρών της εικόνας. Αυτό επιτρέπει στην εικόνα να προσαρμόζεται ανάλογα με το μέγεθος της οθόνης ή της συσκευής που χρησιμοποιεί ο χρήστης.
Αυτή η τεχνική επιτρέπει την απόκριση της ιστοσελίδας σε διάφορες αναλύσεις οθονών και συσκευές, βελτιώνουν την εμφάνιση και την εμπειρία των χρηστών. Με αυτόν τον τρόπο, η εικόνα θα προσαρμόζεται αυτόματα σε διάφορα μεγέθη οθονών, διατηρώντας την αναλογία πλευρών και εξασφαλίζοντας ότι η ιστοσελίδα σας θα εμφανίζεται καλά σε διάφορες συσκευές.
Είναι σημαντικό να προσαρμόζετε το μέγεθος των εικόνων με προσοχή, έτσι ώστε να διατηρούνται η ποιότητα και η ευανάγνωστη εμφάνισή τους. Μπορείτε να προσαρμόσετε τις διαστάσεις των εικόνων χρησιμοποιώντας εξωτερικά εργαλεία επεξεργασίας εικόνας για να τις αλλάξετε πριν τις ανεβάσετε στην ιστοσελίδα σας. Αυτό θα βοηθήσει στην εξοικονόμηση εύρους ζώνης και στη βελτιστοποίηση της ταχύτητας φόρτωσης της ιστοσελίδας.
Επιπλέον, μπορείτε να χρησιμοποιήσετε το γνώρισμα width και height της ετικέτας <img> για να καθορίσετε ακριβείς διαστάσεις για την εικόνα. Ωστόσο, αυτό μπορεί να οδηγήσει σε παραμόρφωση της εικόνας αν οι ακριβείς διαστάσεις δεν είναι συμβατές με το αρχικό μέγεθος της εικόνας. Εάν χρησιμοποιήσετε το γνώρισμα width και height, σιγουρευτείτε ότι οι διαστάσεις που καθορίζετε αντιστοιχούν στην πραγματική αναλογία πλευρών της εικόνας.
Συνοψίζοντας, μπορείτε να χρησιμοποιήσετε το γνώρισμα style για να καθορίσετε το πλάτος και το ύψος μιας εικόνας, αλλά είναι προτιμότερο να χρησιμοποιήσετε τεχνικές αντίστασης (responsive techniques) για να επιτύχετε την ευελιξία στην προσαρμογή των εικόνων σε διάφορες συσκευές και μεγέθη οθονών. Ακόμη, να προσέξετε την ποιότητα και την ευανάγνωστη εμφάνιση των εικόνων, και να χρησιμοποιήσετε εξωτερικά εργαλεία επεξεργασίας εικόνας για να προσαρμόσετε τις διαστάσεις και το μέγεθός τους πριν τις ανεβάσετε στην ιστοσελίδα σας.
Εάν έχετε τις εικόνες σας σε έναν υποφάκελο, πρέπει να περιλάβετε το όνομα του φακέλου στο γνώρισμα src:
<img src="folder_name/image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα">
Στο παραπάνω παράδειγμα, ο φάκελος που περιέχει την εικόνα ονομάζεται “folder_name” και η εικόνα ονομάζεται “image.jpg”. Πρέπει να ενημερώσετε το κατάλληλο όνομα φακέλου και το όνομα της εικόνας ανάλογα με την πραγματική δομή των φακέλων και το όνομα της εικόνας που χρησιμοποιείτε.
Με αυτόν τον τρόπο, ο περιηγητής θα βρει την εικόνα στον υποφάκελο και θα την εμφανίσει στη σελίδα σας.
Για να δείξετε μια εικόνα από έναν άλλο διακομιστή ή ιστότοπο, πρέπει να καθορίσετε έναν απόλυτο (πλήρη) URL στο γνώρισμα src:
<img src="https://www.example.com/images/image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα">
Στο παραπάνω παράδειγμα, ο σύνδεσμος για την εικόνα δείχνει στο “https://www.example.com/images/image.jpg”. Αντικαταστήστε το URL με τον πραγματικό σύνδεσμο προς την εικόνα που θέλετε να εμφανίσετε.
Με αυτόν τον τρόπο, ο περιηγητής θα πάρει την εικόνα από τον άλλο διακομιστή ή ιστότοπο και θα την εμφανίσει στη σελίδα σας. Βεβαιωθείτε ότι έχετε την άδεια να χρησιμοποιήσετε την εικόνα από τον συγκεκριμένο διακομιστή ή ιστότοπο, αν η εικόνα δεν ανήκει σε εσάς.
Το HTML επιτρέπει τη χρήση κινούμενων GIF:
<img src="animated.gif" alt="Εναλλακτικό κείμενο για την κινούμενη εικόνα">
Στο παραπάνω παράδειγμα, ο σύνδεσμος για την εικόνα δείχνει στο “animated.gif”. Αντικαταστήστε το “animated.gif” με το όνομα του αρχείου GIF που θέλετε να εμφανίσετε.
Η εικόνα GIF πρέπει να είναι μια κινούμενη εικόνα με την κατάληξη .gif. Όταν εισάγετε αυτόν τον κώδικα, η εικόνα θα εμφανίζεται κινούμενη στη σελίδα σας.
Βεβαιωθείτε ότι έχετε την άδεια να χρησιμοποιήσετε την εικόνα, ειδικά αν δεν ανήκει σε εσάς.
Για να χρησιμοποιήσετε μια εικόνα ως σύνδεσμο, τοποθετήστε την ετικέτα <img> μέσα στην ετικέτα <a>:
<a href="destination.html"> <img src="image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα"> </a>
Στο παραπάνω παράδειγμα, η εικόνα με το όνομα “image.jpg” τυλίγεται μέσα στην ετικέτα <a> και ο σύνδεσμος προορίζεται να ανοίξει το αρχείο “destination.html” όταν γίνει κλικ στην εικόνα.
Μπορείτε να προσαρμόσετε τον σύνδεσμο (href) και την εικόνα (src) ανάλογα με τις ανάγκες σας.
Με αυτόν τον τρόπο, η εικόνα θα λειτουργεί ως κλικαρισμένος σύνδεσμος και θα μεταφέρει τον χρήστη στην προοριζόμενη σελίδα όταν γίνει κλικ σε αυτήν.
Χρησιμοποιήστε την ιδιότητα CSS float για να επιτρέψετε στην εικόνα να αιωρείται αριστερά ή δεξιά του κειμένου:
Για να αιωρήσετε την εικόνα αριστερά:
<img src="image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα" style="float: left;">
Για να αιωρήσετε την εικόνα δεξιά:
<img src="image.jpg" alt="Εναλλακτικό κείμενο για την εικόνα" style="float: right;">
Στα παραπάνω παραδείγματα, η εικόνα με το όνομα “image.jpg” θα αιωρείται αριστερά ή δεξιά του κειμένου ανάλογα με την ιδιότητα float που έχει οριστεί. Αυτό επιτρέπει στο κείμενο να τυλίγει γύρω από την εικόνα.
Μπορείτε να προσαρμόσετε τη θέση και το στυλ της εικόνας ανάλογα με τις ανάγκες σας. Παρακαλούμε σημειώστε ότι οτιδήποτε βρίσκεται μετά την αιωρούμενη εικόνα θα συνεχίσει από κάτω της.
[adinserter block=”4″]
Με αυτόν τον τρόπο, μπορείτε να δημιουργήσετε μια στοίχιση κειμένου γύρω από την εικόνα και να επιτύχετε το επιθυμητό εφέ εμφάνισης.
Παρακάτω είναι οι πιο κοινές μορφές αρχείων εικόνας που υποστηρίζονται από όλους τους περιηγητές (Chrome, Edge, Firefox, Safari, Opera):
| Συντομογραφία | Μορφή Αρχείου | Επέκταση Αρχείου |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Αυτές οι μορφές αρχείων εικόνας είναι κοινώς χρησιμοποιούμενες στον ιστό και υποστηρίζονται σε όλους τους σύγχρονους περιηγητές. Κάθε μορφή έχει τα δικά της χαρακτηριστικά και χρησιμοποιείται για διάφορες περιπτώσεις χρήσης.
Με τις χάρτες εικόνας στο HTML, μπορείτε να δημιουργήσετε περιοχές που μπορούν να κλικαριστούν σε μια εικόνα.
Χάρτες Εικόνας
Η ετικέτα HTML <map> ορίζει ένα χάρτη εικόνας. Ένας χάρτης εικόνας είναι μια εικόνα με κλικαρίσματα σε περιοχές. Οι περιοχές ορίζονται με έναν ή περισσότερους ετικέτες <area>.
Προσπαθήστε να κάνετε κλικ στον υπολογιστή, το τηλέφωνο ή τον φλιτζάνι καφέ στην παρακάτω εικόνα:
<img src="image.jpg" alt="Εικόνα με χάρτη εικόνας" usemap="#image-map"> <map name="image-map"> <area shape="rect" coords="0,0,200,200" alt="Υπολογιστής" href="computer.html"> <area shape="circle" coords="250,150,50" alt="Τηλέφωνο" href="phone.html"> <area shape="poly" coords="400,100,450,200,350,200" alt="Φλιτζάνι καφέ" href="coffee.html"> </map>
Στο παραπάνω παράδειγμα, οι περιοχές που μπορούν να κλικαριστούν ορίζονται με τις ετικέτες <area>. Κάθε <area> έχει ένα σχήμα (shape) και συντεταγμένες (coords) που ορίζουν την περιοχή κλικ. Οι περιοχές αναφέρονται σε συγκεκριμένες σελίδες (href). Όταν γίνει κλικ σε μια περιοχή, ο χρήστης θα μεταβεί στη σχετική σελίδα.
Στο παραπάνω παράδειγμα, υπάρχει μια εικόνα με χάρτη εικόνας που περιέχει τρεις κλικαρίσιμες περιοχές: τον υπολογιστή, το τηλέφωνο και το φλιτζάνι καφέ. Κάθε περιοχή ορίζεται από το σχήμα (shape) και τις συντεταγμένες (coords) της. Επίσης, κάθε περιοχή έχει ένα εναλλακτικό κείμενο (alt) που εμφανίζεται όταν ο χρήστης περνάει το ποντίκι πάνω από την περιοχή.
Όταν ο χρήστης κάνει κλικ σε μια περιοχή, θα μεταβεί στη σχετική σελίδα που έχει οριστεί στο γνώρισμα href της περιοχής. Για παράδειγμα, αν ο χρήστης κάνει κλικ στον υπολογιστή, θα μεταβεί στη σελίδα “computer.html”.
Αυτός είναι ένας τρόπος να δημιουργήσετε κλικαρίσιμες περιοχές σε μια εικόνα και να προσφέρετε διαδραστικότητα στους χρήστες σας. Μπορείτε να προσαρμόσετε τον κώδικα ανάλογα με τις ανάγκες σας και να προσθέσετε περισσότερες περιοχές κλικ για να ανακατευθύνετε τους χρήστες σε διάφορες σελίδες.
Για να προσθέσετε μια εικόνα φόντου σε ένα στοιχείο HTML, χρησιμοποιήστε το γνώρισμα style του HTML και την ιδιότητα CSS background-image:
<div style="background-image: url('image.jpg');">
<!-- Περιεχόμενο του στοιχείου -->
</div>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε ένα <div> στοιχείο ως παράδειγμα, αλλά μπορείτε να εφαρμόσετε την εικόνα φόντου σε οποιοδήποτε άλλο στοιχείο HTML (όπως <body>, <section>, <header>, κλπ.).
Η ιδιότητα background-image ορίζει την εικόνα που θα χρησιμοποιηθεί ως φόντο. Η τιμή της ιδιότητας είναι η διαδρομή (URL) προς την εικόνα φόντου. Στο παράδειγμα, η εικόνα με όνομα “image.jpg” χρησιμοποιείται ως φόντο για το στοιχείο <div>.
Μπορείτε να προσαρμόσετε τον κώδικα ανάλογα με την επιθυμητή εικόνα και το επιθυμητό στοιχείο HTML. Επίσης, μπορείτε να προσθέσετε περισσότερες ιδιότητες CSS για να προσαρμόσετε την εμφάνιση του φόντου, όπως το μέγεθος, την επανάληψη και τη θέση της εικόνας.
Μπορείτε επίσης να καθορίσετε την εικόνα φόντου στο στοιχείο <style>, εντός της ενότητας <head>:
<!DOCTYPE html>
<html>
<head>
<style>
.my-element {
background-image: url('image.jpg');
}
</style>
</head>
<body>
<div class="my-element">
<!-- Περιεχόμενο του στοιχείου -->
</div>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε την ετικέτα <style> εντός της ενότητας <head> για να ορίσουμε έναν κανόνα CSS για την κλάση “my-element”. Ο κανόνας καθορίζει ότι η εικόνα φόντου για τα στοιχεία με την κλάση “my-element” θα είναι η εικόνα με όνομα “image.jpg”.
Στο παράδειγμα χρησιμοποιούμε ένα <div> στοιχείο με την κλάση “my-element” για να εφαρμόσουμε τον κανόνα CSS και να ορίσουμε την εικόνα φόντου.
Αυτή η μέθοδος είναι χρήσιμη όταν θέλετε να ορίσετε πολλούς κανόνες CSS για το ίδιο στοιχείο ή όταν θέλετε να ορίσετε τους κανόνες CSS σε έναν ξεχωριστό αρχείο CSS.
Αν θέλετε ολόκληρη η σελίδα να έχει μια εικόνα φόντου, πρέπει να ορίσετε την εικόνα φόντου στο στοιχείο <body>:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('image.jpg');
}
</style>
</head>
<body>
<!-- Περιεχόμενο της σελίδας -->
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε την ετικέτα <style> εντός της ενότητας <head> για να ορίσουμε έναν κανόνα CSS για το στοιχείο <body>. Ο κανόνας καθορίζει ότι η εικόνα φόντου για το <body> θα είναι η εικόνα με όνομα “image.jpg”.
Όλο το περιεχόμενο της σελίδας θα έχει την εικόνα φόντου που ορίζεται στο <body>.
Μπορείτε να προσαρμόσετε τον κώδικα ανάλογα με την επιθυμητή εικόνα φόντου και τον τύπο του περιεχομένου της σελίδας.
Αν η εικόνα φόντου είναι μικρότερη από το στοιχείο, η εικόνα θα επαναλαμβάνεται, οριζόντια και κατακόρυφα, μέχρι να φτάσει στο τέλος του στοιχείου.
Για να απενεργοποιήσετε την επανάληψη της εικόνας φόντου, μπορείτε να χρησιμοποιήσετε την ιδιότητα background-repeat και να την ορίσετε στην τιμή “no-repeat”:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('image.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- Περιεχόμενο της σελίδας -->
</body>
</html>
Με τον κανόνα CSS background-repeat: no-repeat;, ορίζουμε ότι η εικόνα φόντου δεν θα επαναλαμβάνεται. Έτσι, η εικόνα θα εμφανιστεί μόνο μία φορά και δεν θα επαναληφθεί για να γεμίσει το στοιχείο.
[adinserter block=”5″]
Αυτός ο τρόπος είναι χρήσιμος όταν θέλετε να εφαρμόσετε μια εικόνα φόντου που δεν πρέπει να επαναληφθεί και να παραμείνει μία φορά στο στοιχείο.
Αν θέλετε η εικόνα φόντου να καλύπτει ολόκληρο το στοιχείο, μπορείτε να ορίσετε την ιδιότητα background-size στην τιμή “cover”.
Επίσης, για να εξασφαλίσετε ότι το στοιχείο θα καλύπτεται πάντα πλήρως, ορίστε την ιδιότητα background-attachment στην τιμή “fixed”:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<!-- Περιεχόμενο της σελίδας -->
</body>
</html>
Με τον κανόνα CSS background-size: cover;, ορίζουμε ότι η εικόνα φόντου θα καλύπτει ολόκληρο το στοιχείο, διατηρώντας τις αρχικές αναλογίες της εικόνας.
Με τον κανόνα CSS background-attachment: fixed;, ορίζουμε ότι η εικόνα φόντου θα παραμείνει σταθερή κατά την κύλιση της σελίδας, έτσι ώστε να διατηρείται η πλήρης κάλυψη του στοιχείου.
Αυτή η τεχνική είναι χρήσιμη όταν θέλετε να εφαρμόσετε μια εικόνα φόντου που θα καλύπτει πλήρως το στοιχείο, χωρίς να παραμορφώνεται ή να αλλοιώνεται η εικόνα.
Αν θέλετε η εικόνα φόντου να αντιστοιχίζεται για να καλύπτει ολόκληρο το στοιχείο, μπορείτε να ορίσετε την ιδιότητα background-size στην τιμή “100% 100%”:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<!-- Περιεχόμενο της σελίδας -->
</body>
</html>
Με τον κανόνα CSS background-size: 100% 100%;, ορίζετε ότι η εικόνα φόντου θα επεκτείνεται για να καλύψει ολόκληρο το στοιχείο, χωρίς να διατηρεί τις αρχικές αναλογίες της εικόνας. Η εικόνα θα απλωθεί οριζόντια και κατακόρυφα για να γεμίσει το στοιχείο.
Αυτή η τεχνική είναι χρήσιμη όταν θέλετε να εφαρμόσετε μια εικόνα φόντου που θα επεκτείνεται για να καλύψει ολόκληρο το στοιχείο, χωρίς να διατηρεί τις αρχικές αναλογίες της εικόνας. Ωστόσο, πρέπει να λάβετε υπόψη ότι η εικόνα ενδέχεται να παραμορφωθεί αν οι αρχικές αναλογίες της διαφέρουν από τις αναλογίες του στοιχείου.
Το HTML στοιχείο <picture> σας επιτρέπει να εμφανίζετε διάφορες εικόνες για διάφορες συσκευές ή μεγέθη οθονών.
Χρησιμοποιώντας το στοιχείο <picture>, μπορείτε να καθορίσετε μια σειρά από εικόνες, καθένα από τα οποία έχει τη δική του πηγή (<source>) και χαρακτηριστικά (<attributes>), καθώς και μια προεπιλεγμένη εικόνα που θα χρησιμοποιηθεί εάν καμία από τις άλλες εικόνες δεν ταιριάζει στις συνθήκες.
Εδώ είναι ένα παράδειγμα χρήσης του στοιχείου <picture>:
<picture> <source media="(min-width: 768px)" srcset="large-image.jpg"> <source media="(min-width: 480px)" srcset="medium-image.jpg"> <img src="small-image.jpg" alt="Εικόνα"> </picture>
Στο παραπάνω παράδειγμα, υπάρχουν τρεις εικόνες. Η πρώτη εικόνα (large-image.jpg) θα χρησιμοποιηθεί για συσκευές με ελάχιστο πλάτος 768px και άνω, η δεύτερη εικόνα (medium-image.jpg) θα χρησιμοποιηθεί για συσκευές με ελάχιστο πλάτος 480px και άνω, και η τρίτη εικόνα (small-image.jpg) είναι η προεπιλεγμένη εικόνα που θα χρησιμοποιηθεί αν καμία από τις άλλες εικόνες δεν ταιριάζει στις συνθήκες.
Με τον τρόπο αυτό, μπορείτε να προσαρμόσετε τις εικόνες που εμφανίζονται ανάλογα με τις απαιτήσεις της συσκευής ή το μέγεθος της οθόνης. Αυτό είναι χρήσιμο όταν θέλετε να προβάλετε εικόνες υψηλής ανάλυσης για συσκευές μεγάλης οθόνης και εικόνες χαμηλής ανάλυσης για συσκευές μικρής οθόνης, προσφέροντας έτσι βελτιωμένη εμπειρία προβολής στους χρήστες.
Μπορείτε να προσθέσετε περισσότερες συνθήκες μέσω της ιδιότητας media στο για να καθορίσετε ποια εικόνα θα χρησιμοποιηθεί ανάλογα με διάφορα κριτήρια, όπως η προσανατολισμένη οθόνη ή η πυκνότητα εικονοστοιχείων.
Είναι σημαντικό να έχετε στη διάθεσή σας τις κατάλληλες εικόνες για κάθε περίπτωση, προκειμένου να διασφαλίσετε ότι οι χρήστες θα λαμβάνουν την κατάλληλη εικόνα για τη συσκευή τους.
Συνοψίζοντας, το στοιχείο σας δίνει τη δυνατότητα να εμφανίζετε διάφορες εικόνες για διάφορες συσκευές ή μεγέθη οθονών, προσφέροντας έτσι ευελεία ευελιξία στην προβολή εικόνων στον ιστότοπό σας. Χρησιμοποιώντας τη σωστή συνδυασμό εικόνων και συνθηκών, μπορείτε να προσφέρετε βέλτιστη ποιότητα εικόνας και εμπειρία προβολής σε κάθε συσκευή και οθόνη.
Παρακάτω παρατίθεται ένα ακόμη παράδειγμα με τη χρήση του στοιχείου :
<picture> <source srcset="large-image.jpg" media="(min-width: 1200px)"> <source srcset="medium-image.jpg" media="(min-width: 768px)"> <source srcset="small-image.jpg"> <img src="fallback-image.jpg" alt="Εικόνα"> </picture>
Σε αυτό το παράδειγμα, χρησιμοποιούνται τρεις εικόνες. Η πρώτη εικόνα (large-image.jpg) θα χρησιμοποιηθεί για συσκευές με ελάχιστο πλάτος 1200px και άνω, η δεύτερη εικόνα (medium-image.jpg) θα χρησιμοποιηθεί για συσκευές με ελάχιστο πλάτος 768px και άνω, και η τρίτη εικόνα (small-image.jpg) είναι η προεπιλεγμένη εικόνα που θα χρησιμοποιηθεί αν καμία από τις άλλες εικόνες δεν ταιριάζει στις συνθήκες. Επίσης, χρησιμοποιείται μια εικόνα αντικατάστασης (fallback-image.jpg) ως εναλλακτική λύση αν ο περιηγητής δεν υποστηρίζει το στοιχείο ή αν καμία από τις οι άλλες εικόνες δεν είναι διαθέσιμες.
Με τον τρόπο αυτό, μπορείτε να προσαρμόσετε την εικόνα που εμφανίζεται ανάλογα με τις απαιτήσεις της συσκευής και του πλοηγητή, προσφέροντας έτσι την κατάλληλη εικόνα για κάθε περίπτωση.
Είναι σημαντικό να προσέξετε την ποιότητα και το μέγεθος των εικόνων που χρησιμοποιείτε, προκειμένου να διασφαλίσετε γρήγορο φόρτωμα της σελίδας και βέλτιστη εμπειρία προβολής για τους χρήστες.
Συνοψίζοντας, το στοιχείο <picture> σας επιτρέπει να εμφανίζετε διάφορες εικόνες ανάλογα με τις απαιτήσεις της συσκευής, προσφέροντας έτσι βέλτιστη ποιότητα εικόνας και εμπειρία προβολής σε κάθε πλατφόρμα.
Το στοιχείο χρησιμοποιείται για δύο κύριους λόγους:
- Εξοικονόμηση εύρους ζώνης
Εάν έχετε μια μικρή οθόνη ή συσκευή, δεν είναι απαραίτητο να φορτώσετε ένα μεγάλο αρχείο εικόνας. Ο περιηγητής θα χρησιμοποιήσει το πρώτο στοιχείο με τις αντίστοιχες τιμές γνωρισμάτων και θα αγνοήσει οποιαδήποτε από τα επόμενα στοιχεία. - Υποστήριξη μορφών
Ορισμένοι περιηγητές ή συσκευές ενδέχεται να μην υποστηρίζουν όλες τις μορφές εικόνων. Χρησιμοποιώντας το στοιχείο , μπορείτε να προσθέσετε εικόνες σε όλες τις μορφές και ο περιηγητής θα χρησιμοποιήσει την πρώτη μορφή που αναγνωρίζει και θα αγνοήσει οποιαδήποτε από τα επόμενα στοιχεία.
Με τον τρόπο αυτό, μπορείτε να εξοικονομήσετε εύρος ζώνης και να διασφαλίσετε ότι οι εικόνες που εμφανίζονται είναι συμβατές με την υποστήριξη των περιηγητών και των συσκευών που χρησιμοποιούνται από τους χρήστες.