Οι ιστότοποι δεν μοιάζουν με κανένα μέσο επικοινωνίας που ήρθε μπροστά τους. Ένα από τα βασικά πράγματα που θέτουν ιστότοπους εκτός των προηγούμενων μορφών μέσων όπως η εκτύπωση, το ραδιόφωνο και ακόμη και η τηλεόραση είναι η έννοια της " υπερσύνδεσης ".
Οι υπερσυνδέσμοι, επίσης κοινώς γνωστοί ως "σύνδεσμοι", είναι αυτό που κάνει το Διαδίκτυο τόσο δυναμικό. Σε αντίθεση με μια έντυπη δημοσίευση που μπορεί να κάνει αναφορά σε άλλο άρθρο ή άλλο πόρο, οι ιστότοποι μπορούν να χρησιμοποιήσουν αυτούς τους συνδέσμους για να στείλουν πραγματικά επισκέπτες σε αυτές τις άλλες σελίδες και πόρους. Κανένα άλλο μέσο εκπομπής δεν μπορεί να το κάνει αυτό. Μπορείτε να ακούσετε μια διαφήμιση στο ραδιόφωνο ή την προβολή στην τηλεόραση, αλλά δεν υπάρχουν υπερσυνδέσεις που να σας μεταφέρουν στις εταιρείες των διαφημίσεων με τον τρόπο που μπορεί εύκολα να κάνει αυτός ο ιστότοπος. Οι σύνδεσμοι είναι πραγματικά ένα εκπληκτικό εργαλείο επικοινωνίας και αλληλεπίδρασης!
Συχνά, οι σύνδεσμοι που βρίσκονται σε έναν ιστότοπο είναι περιεχόμενο κειμένου που κατευθύνει τους επισκέπτες σε άλλες σελίδες του ιδίου ιστότοπου. Η πλοήγηση ενός ιστότοπου αποτελεί ένα παράδειγμα συνδέσμων κειμένου στην πράξη, αλλά οι συνδέσεις δεν χρειάζεται να βασίζονται σε κείμενο. Μπορείτε επίσης να συνδέσετε εύκολα εικόνες στον ιστότοπό σας. Ας δούμε πώς γίνεται αυτό, ακολουθούμενη από κάποιες περιπτώσεις όπου θα θέλατε να χρησιμοποιήσετε υπερσυνδέσεις με βάση την εικόνα.
Πώς να συνδέσετε μια εικόνα
Το πρώτο πράγμα που θα πρέπει να κάνετε είναι να τοποθετήσετε την ίδια την εικόνα στο έγγραφο HTML . Μια κοινή χρήση ενός συνδέσμου βασισμένου σε εικόνα είναι το λογότυπο του ιστότοπου, το οποίο στη συνέχεια συνδέεται πίσω στην αρχική σελίδα του ιστότοπου. Στο παρακάτω παράδειγμα κώδικα παρακάτω, το αρχείο που χρησιμοποιούμε είναι ένα SVG για το λογότυπό μας. Αυτή είναι μια καλή επιλογή δεδομένου ότι θα επιτρέψει την εικόνα μας για την κλίμακα για διαφορετικές αναλύσεις, διατηρώντας ταυτόχρονα την ποιότητα της εικόνας και ένα μικρό συνολικό μέγεθος αρχείου.
Δείτε πώς θα τοποθετήσετε την εικόνα σας στο έγγραφο HTML:
Γύρω από την ετικέτα εικόνας, θα προσθέσετε τώρα τη σύνδεση αγκύρωσης ανοίγοντας το στοιχείο αγκύρωσης πριν την εικόνα και κλείνοντας την άγκυρα μετά την εικόνα. Αυτό είναι παρόμοιο με το πώς θα συνδέσετε κείμενο, αντί να αναδιπλώνετε τις λέξεις που θέλετε να συνδεθείτε με τις ετικέτες άγκυρας, τυλίγετε την εικόνα. Στο παρακάτω παράδειγμα μας, συνδέουμε πίσω στην αρχική σελίδα του ιστότοπού μας, η οποία είναι "index.html".
Κατά την προσθήκη αυτής της HTML στη σελίδα σας, μην τοποθετείτε διαστήματα μεταξύ της ετικέτας αγκύρωσης και της ετικέτας εικόνας. Αν το κάνετε, μερικά προγράμματα περιήγησης θα προσθέσουν λίγο τσιμπούρια δίπλα στην εικόνα, η οποία θα φαίνεται περίεργη.
Η εικόνα του λογότυπου θα λειτουργούσε τώρα και ως κουμπί αρχικής σελίδας, το οποίο είναι λίγο πολύ ένα πρότυπο διαδικτύου αυτές τις μέρες. Παρατηρήστε ότι δεν συμπεριλαμβάνουμε οπτικό στυλ, όπως το πλάτος και το ύψος της εικόνας, στη σήμανση HTML. Θα αφήσουμε αυτά τα οπτικά στυλ στο CSS και θα διατηρήσουμε έναν καθαρό διαχωρισμό της δομής HTML και των στυλ CSS.
Μόλις φτάσετε στο CSS, τα στυλ που γράφετε για να στοχεύσετε αυτό το λογότυπο του λογότυπου θα μπορούσαν να περιλαμβάνουν το μέγεθος της εικόνας, συμπεριλαμβάνοντας ευαίσθητα στυλ για φιλικές προς τις πολλές εικόνες συσκευές καθώς και οποιαδήποτε γραφικά που θέλετε να προσθέσετε στην εικόνα / σύνδεσμο, όπως τα σύνορα ή το CSS σκιές. Θα μπορούσατε επίσης να δώσετε την εικόνα σας ή να συνδέσετε ένα χαρακτηριστικό κλάσης αν χρειάζεστε επιπλέον "άγκιστρα" για χρήση με τα στυλ CSS.
Χρησιμοποιήστε περιπτώσεις για συνδέσεις εικόνας
Έτσι, η προσθήκη ενός συνδέσμου εικόνας είναι αρκετά εύκολη. Όπως μόλις είδαμε, το μόνο που πρέπει να κάνετε είναι να τυλίξετε την εικόνα με τις κατάλληλες ετικέτες άγκυρας. Η επόμενη ερώτησή σας μπορεί να είναι "πότε θα το κάνατε στην πράξη εκτός από το προαναφερθέν παράδειγμα σύνδεσης λογότυπου / αρχικής σελίδας;"
Εδώ είναι μερικές σκέψεις:
- Εικόνες μικρογραφίας σε μια συλλογή που συνδέεται με μεγαλύτερες εκδόσεις αυτών των εικόνων.
- Εικόνες που χρησιμοποιούνται αποκλειστικά για την αναπαραγωγή περιεχομένου, όπως φωτογραφίες προϊόντων για έναν ιστότοπο ηλεκτρονικού εμπορίου.
- Εικόνες του Teaser που αποτελούν μέρος άλλου περιεχομένου, όπως ένα άρθρο στο blog ή ένα δελτίο τύπου, που προσελκύουν τους ανθρώπους να παρατηρούν ότι το περιεχόμενο τους δίνει μια περιοχή προορισμού για να πατήσετε ή να κάνετε κλικ για να διαβάσετε ολόκληρο το άρθρο.
- Εικόνες εικονιδίων που χρησιμοποιούνται ως κουμπιά για σύνδεση με συγκεκριμένες λειτουργίες ή σελίδες εντός του ιστότοπου.
- Σύνδεσμοι κοινωνικών μέσων που χρησιμοποιούν τα αναγνωρίσιμα λογότυπα των διάφορων ιστότοπων κοινωνικής δικτύωσης που είναι σημαντικές για αυτόν τον ιστότοπο ή εταιρεία.
- Εικόνες που χρησιμοποιούνται ως κουμπιά για συγκεκριμένες λειτουργίες, όπως υποβολές φόρμας (σημειώσεις βέλτιστων πρακτικών - από την άποψη της απόδοσης του ιστότοπου, τα κουμπιά που ονομάζονται καθαρά με το CSS είναι καλύτερη επιλογή από τα κουμπιά εικόνας).
Μια υπενθύμιση κατά τη χρήση εικόνων
Οι εικόνες μπορούν να διαδραματίσουν σημαντικό ρόλο στην επιτυχία ενός ιστοτόπου. Ένα από τα παραδείγματα που προαναφέρθηκαν με τη χρήση εικόνων παράλληλα με άλλο περιεχόμενο για να επιστήσουμε την προσοχή σε αυτό το περιεχόμενο και να κάνουμε τους ανθρώπους να το διαβάσουν.
Όταν χρησιμοποιείτε εικόνες, πρέπει να έχετε υπόψη σας ότι έχετε επιλέξει τη σωστή εικόνα για τις ανάγκες σας , συμπεριλαμβανομένου του σωστού υποδείγματος εικόνας, της μορφής και επίσης ότι οι εικόνες που χρησιμοποιείτε στον ιστότοπό σας έχουν βελτιστοποιηθεί κατάλληλα για την παράδοση του ιστότοπου . Αυτό μπορεί να φαίνεται σαν πολλή δουλειά μόνο για να προσθέσετε εικόνες, αλλά η ανταμοιβή αξίζει τον κόπο! Οι εικόνες μπορούν να προσθέσουν τόσο πολύ στην επιτυχία ενός ιστοτόπου.
Μην διστάσετε να χρησιμοποιήσετε τις κατάλληλες εικόνες στον ιστότοπό σας και συνδέστε αυτές τις εικόνες, όταν χρειάζεται, για να προσθέσετε κάποια αλληλεπιδραστικά στο περιεχόμενό σας, αλλά επίσης να έχετε επίγνωση αυτών των βέλτιστων πρακτικών εικόνας και να χρησιμοποιήσετε αυτά τα γραφικά / συνδέσμους σωστά και υπεύθυνα στην εργασία σας στο web design.