Πώς μπορώ να μετατρέψω ένα σύνδεσμο σε μια εικόνα;

Οι εικόνες μπορούν να βελτιώσουν την εμφάνιση μιας ιστοσελίδας διαιρώντας το κείμενο και προσθέτοντας οπτικό ενδιαφέρον. Οι εικόνες που είναι ορατές σε μια ιστοσελίδα είναι στην πραγματικότητα συνδέσεις είτε σε εσωτερική είτε σε απομακρυσμένη εικόνα. Με άλλα λόγια, οι εικόνες είναι ένα άλλο αρχείο, είτε στον ίδιο διακομιστή όσο και στην ιστοσελίδα ή σε απομακρυσμένο διακομιστή. Για να τοποθετήσετε μια εικόνα μέσα σε μια ιστοσελίδα, πρέπει να πείτε στο πρόγραμμα περιήγησης πού να αναζητήσετε την εικόνα. Αυτές οι πληροφορίες τοποθετούνται στην ετικέτα με το χαρακτηριστικό "src".

Δημιουργία της εικόνας

Αν η εικόνα σας κρατιέται στον διακομιστή ιστού που φιλοξενεί την ιστοσελίδα σας, μπορείτε απλά να τοποθετήσετε το όνομα της εικόνας στην ετικέτα όπως: Ωστόσο, εάν η εικόνα σας βρίσκεται σε απομακρυσμένο διακομιστή, πρέπει να τοποθετήσετε έναν σύνδεσμο στην εικόνα στην ετικέτα όπως: Εάν χρησιμοποιείτε μια τοπική ή απομακρυσμένη εικόνα, υπάρχουν ορισμένα χαρακτηριστικά που έχετε μπορεί να χρησιμοποιήσει για να ευθυγραμμίσει την εικόνα σας στη σελίδα. Το χαρακτηριστικό "ευθυγράμμιση" χρησιμοποιείται για την ευθυγράμμιση της εικόνας οριζόντια. Οι τιμές μπορούν να είναι "σωστές", "αριστερές" ή κεντρικές. Για παράδειγμα, για να τοποθετήσετε μια απομακρυσμένη εικόνα στη δεξιά πλευρά της σελίδας, ο κώδικας HTML θα είναι: Το χαρακτηριστικό "valign" χρησιμοποιείται για την ευθυγράμμιση της εικόνας κατακόρυφα στην οθόνη. Οι τιμές μπορούν να είναι "κορυφή", "κάτω" και "κέντρο". Για να ευθυγραμμίσετε το παραπάνω παράδειγμα στην επάνω δεξιά πλευρά της οθόνης, ο κώδικας θα είναι: Ένα άλλο χαρακτηριστικό είναι το χαρακτηριστικό "alt". Αυτό χρησιμοποιείται για την τοποθέτηση κειμένου όπου η εικόνα θα πρέπει να είναι αν ο επισκέπτης χρησιμοποιεί ένα πρόγραμμα περιήγησης στο Web που βασίζεται σε κείμενο ή εάν έχει σπάσει ο σύνδεσμος προς την εικόνα. Το χαρακτηριστικό "alt" χρησιμοποιείται με τον ακόλουθο τρόπο: Τέλος, μπορείτε να κάνετε την εικόνα σας να γίνει υπερσύνδεσμος προσθέτοντας την ετικέτα. Αυτό επιτρέπει στους επισκέπτες να κάνουν κλικ στη φωτογραφία που θα μεταφερθεί σε μια απομακρυσμένη σελίδα ή στην ίδια τη φωτογραφία. Ο κώδικας HTML για τη δημιουργία μιας εικόνας με μια υπερ-σύνδεση είναι: