Saltar al contenido

Πώς να συνδέσετε μια εικόνα στον ιστότοπό σας

28 de mayo de 2021

Υπάρχει μια διαφορά μεταξύ της εισαγωγής μιας εικόνας σε μια ιστοσελίδα και της μετατροπής αυτής της εικόνας σε σύνδεσμο με δυνατότητα κλικ. Αν και ο HTML είναι παρόμοιος, ένας σύνδεσμος βασίζεται σε ένα άγκυρα στοιχείο ενώ μια εικόνα χρησιμοποιεί το π.χ. στοιχείο. Ωστόσο, μια εικόνα μπορεί να φωλιάσει μέσα σε μια άγκυρα, καθιστώντας την εικόνα με δυνατότητα κλικ ως σύνδεσμος.

Εισαγωγή εικόνων σε στοιχεία αγκύρωσης

Η συνήθης χρήση ενός συνδέσμου που βασίζεται σε εικόνα είναι το γραφικό λογότυπου του ιστότοπου, το οποίο στη συνέχεια συνδέεται με την αρχική σελίδα του ιστότοπου. Δείτε πώς μπορείτε να τοποθετήσετε μια εικόνα χωρίς δυνατότητα κλικ στο έγγραφο HTML:

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

Όταν προσθέτετε αυτόν τον τύπο HTML στη σελίδα σας, μην τοποθετείτε κενά μεταξύ της ετικέτας αγκύρωσης και της ετικέτας εικόνας. Εάν το κάνετε, ορισμένα προγράμματα περιήγησης θα προσθέσουν μικρά τσιμπούρια δίπλα στην εικόνα, η οποία θα φαίνεται περίεργη. Το λογότυπο λειτουργεί επίσης ως κουμπί αρχικής σελίδας, το οποίο είναι σχεδόν ένα πρότυπο ιστού αυτές τις μέρες. Σημειώστε ότι δεν συμπεριλαμβάνουμε οπτικά στυλ, όπως το πλάτος και το ύψος της εικόνας, στη σήμανση HTML. Θα αφήσουμε αυτά τα οπτικά στυλ στο CSS και θα διατηρήσουμε έναν καθαρό διαχωρισμό της δομής HTML και των στυλ CSS.

Αναφέρετε αυτό το άρθρο

Μορφή mla apa chicago Η αναφορά σας

Kyrnin, Jennifer. «Πώς να συνδέσετε μια εικόνα στον ιστότοπό σας.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/link-an-image-on-your-website-3468291.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Πώς να συνδέσετε μια εικόνα στον ιστότοπό σας. Ανακτήθηκε από το https://www.thoughtco.com/link-an-image-on-your-website-3468291
Kyrnin, Jennifer. «Πώς να συνδέσετε μια εικόνα στον ιστότοπό σας.» ThoughtCo. https://www.thoughtco.com/link-an-image-on-your-website-3468291 (πρόσβαση στις 28 Μαΐου 2021).

αντιγραφή παραπομπής