Οι εικόνες προσθέτουν ζωή στις ιστοσελίδες σας και τραβούν την προσοχή των θεατών. Οι λεζάντες παρέχουν επιπλέον πληροφορίες σχετικά με τις εικόνες του ιστού σας, αλλά είναι δύσκολο να προστεθούν σε ιστοσελίδες χωρίς προηγμένες δεξιότητες HTML και CSS. Εδώ είναι μια αξιόπιστη μέθοδος για να προσθέσετε μια απλή, αλλά ελκυστική, λεζάντα σε μια εικόνα που παραμένει με την εικόνα όπου κι αν την μετακινήσετε στην ιστοσελίδα.
Βήματα σε μια υπογραφή εικόνας HTML
-
Προσθέστε μια εικόνα στην ιστοσελίδα σας.
-
Στο HTML για την ιστοσελίδα σας, τοποθετήστε μια ετικέτα div γύρω από την εικόνα:
-
Προσθέστε ένα χαρακτηριστικό στυλ στην ετικέτα div:
style = ""> -
Ορίστε το πλάτος του div στο ίδιο πλάτος με την εικόνα, με την ιδιότητα στυλ πλάτους:
-
Για λεζάντες που είναι ελαφρώς μικρότεροι από το περιβάλλον κείμενο, προσθέστε μια ιδιότητα μεγέθους γραμματοσειράς στο style div:
-
Οι υπότιτλοι φαίνονται καλύτερα αν είναι κεντραρισμένοι κάτω από την εικόνα, οπότε προσθέστε μια ιδιότητα ευθυγράμμισης κειμένου στο χαρακτηριστικό στυλ:
-
Τέλος, προσθέστε λίγο επιπλέον χώρο μεταξύ της εικόνας και της λεζάντας, προσθέτοντας μια ιδιότητα στυλ στην εικόνα με την ιδιότητα στυλ πληκτρολόγησης:
style = "padding-bottom: 0.5em;" />
-
Στη συνέχεια, προσθέστε τη λεζάντα κειμένου ακριβώς κάτω από την εικόνα:
Μεταφορτώστε την ιστοσελίδα στον διακομιστή σας και δοκιμάστε την σε ένα πρόγραμμα περιήγησης.
Συμβουλές για λεζάντες
- Οι διαστάσεις CSS μπορούν να είναι σε πολλές διαφορετικές μετρήσεις, οπότε συνήθως πρέπει να συμπεριλάβετε τον τύπο μέτρησης. Για παράδειγμα:
πλάτος: 100px; Ωστόσο, οι διαστάσεις της εικόνας HTML είναι πάντοτε σε εικονοστοιχεία, οπότε αφήνετε τη μέτρηση απενεργοποιημένη.
πλάτος = "100"
- Αν κάνετε το πλάτος του div ευρύτερο από το πλάτος της εικόνας, η λεζάντα μπορεί να εμφανιστεί δίπλα στην εικόνα. Εάν αυτό είναι αυτό που θέλετε, τότε προσθέστε ένα
ετικέτα απευθείας πριν από τη λεζάντα και μετά την ετικέτα εικόνας.
