Πώς να τυλίξετε το κείμενο γύρω από μια εικόνα

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

Η προσθήκη κειμένου και εικόνων σε ιστότοπους είναι εύκολη. Το κείμενο προστίθεται με τυπικές ετικέτες HTML όπως παραγράφους, επικεφαλίδες και λίστες, ενώ οι εικόνες τοποθετούνται σε μια σελίδα με το στοιχείο . Μόλις προσθέσετε μια εικόνα στην ιστοσελίδα σας, ωστόσο, ίσως θέλετε να έχετε τη ροή κειμένου δίπλα στην εικόνα, αντί να ευθυγραμμίσετε κάτω από αυτήν (ο οποίος είναι ο προεπιλεγμένος τρόπος που θα εμφανιστεί μια εικόνα που προστέθηκε στον κώδικα HTML στο πρόγραμμα περιήγησης). Τεχνικά, υπάρχουν δύο τρόποι με τους οποίους μπορείτε να επιτύχετε αυτό το βλέμμα, είτε χρησιμοποιώντας το CSS (συνιστάται) είτε προσθέτοντας τις οπτικές οδηγίες απευθείας στο HTML (δεν συνιστάται, επειδή θέλετε να διατηρήσετε τον διαχωρισμό του στυλ και της δομής για τον ιστότοπό σας).

Χρησιμοποιώντας το CSS

Ο σωστός τρόπος για να αλλάξετε τον τρόπο με τον οποίο το κείμενο και οι εικόνες της σελίδας και πώς εμφανίζονται τα οπτικά τους στυλ στο πρόγραμμα περιήγησης είναι με το CSS . Απλά θυμηθείτε, αφού μιλάμε για μια οπτική αλλαγή στη σελίδα (η ροή κειμένου γύρω από μια εικόνα), αυτό σημαίνει ότι είναι ο τομέας των Cascading Style Sheets.

1. Πρώτα, προσθέστε την εικόνα σας στην ιστοσελίδα σας. Θυμηθείτε να αποκλείσετε οποιαδήποτε οπτικά χαρακτηριστικά (όπως τις τιμές πλάτους και ύψους) από το HTML. Αυτό είναι σημαντικό, ειδικά για έναν ανταποκρινόμενο ιστότοπο όπου το μέγεθος της εικόνας θα διαφέρει ανάλογα με το πρόγραμμα περιήγησης. Ορισμένο λογισμικό, όπως το Adobe Dreamweaver, θα προσθέσει πληροφορίες πλάτους και ύψους στις εικόνες που έχουν εισαχθεί με αυτό το εργαλείο, γι 'αυτό φροντίστε να αφαιρέσετε αυτές τις πληροφορίες από τον κώδικα HTML! Φροντίστε, ωστόσο, να συμπεριλάβετε το κατάλληλο alt κείμενο . Ακολουθεί ένα παράδειγμα του τρόπου εμφάνισης του κώδικα HTML:
2. Για λόγους styling, μπορείτε επίσης να προσθέσετε μια κλάση σε μια εικόνα. Αυτή η τιμή κλάσης είναι αυτό που θα χρησιμοποιήσουμε στο αρχείο CSS. Σημειώστε ότι η αξία που χρησιμοποιούμε εδώ είναι αυθαίρετη, αν και για το συγκεκριμένο στυλ τείνουμε να χρησιμοποιούμε τιμές "αριστερά" ή "δεξιά", ανάλογα με τον τρόπο που θέλουμε να ευθυγραμμιστεί η εικόνα μας. Θεωρούμε ότι αυτή η απλή σύνταξη λειτουργεί καλά και είναι εύκολη για τους άλλους που ίσως πρέπει να διαχειριστούν μια τοποθεσία στο μέλλον για να κατανοήσουν, αλλά θα μπορούσατε να δώσετε αυτήν την αξία της τάξης που θέλετε.
   2. Από μόνη της, αυτή η τάξη αξία δεν θα κάνει τίποτα. Η εικόνα δεν θα ευθυγραμμιστεί αυτόματα προς τα αριστερά του κειμένου. Για αυτό, πρέπει τώρα να στραφούμε στο αρχείο CSS.

1. Στο φύλλο στυλ σας, μπορείτε τώρα να προσθέσετε το ακόλουθο στυλ:
   1. .left {
   2. float: αριστερά.
   3. συμπλήρωμα: 0 20px 20px 0;
   4. }}
   5. Αυτό που κάνατε εδώ είναι να χρησιμοποιήσετε την ιδιότητα CSS "float" , η οποία θα τραβήξει την εικόνα από την κανονική ροή εγγράφων (με τον τρόπο που κανονικά θα εμφανίζεται η εικόνα, με το κείμενο ευθυγραμμισμένο κάτω από αυτό) και θα ευθυγραμμίζεται με την αριστερή πλευρά του δοχείου . Το κείμενο που έρχεται μετά από αυτό στο σημάδι HTML τώρα περιτυλίγεται γύρω από αυτό. Προσθέσαμε επίσης ορισμένες τιμές γεμίσματος έτσι ώστε αυτό το κείμενο να μην είναι μόνο αντίθετο προς την εικόνα. Αντ 'αυτού, θα έχει κάποια ωραία απόσταση που θα είναι οπτικά ελκυστική στο σχεδιασμό της σελίδας. Στη συντομογραφία CSS για προσθήκη, προσθέσαμε 0 τιμές στην επάνω και την αριστερή πλευρά της εικόνας και 20 εικονοστοιχεία στην αριστερή και την κάτω πλευρά. Θυμηθείτε, θα πρέπει να προσθέσετε κάποια επένδυση στη δεξιά πλευρά μιας εικόνας αριστερά ευθυγραμμισμένης. Μια δεξιά ευθυγραμμισμένη εικόνα (την οποία θα κοιτάξουμε σε μια στιγμή) θα έχει την επένδυση που εφαρμόζεται στην αριστερή της πλευρά.
2. Αν δείτε την ιστοσελίδα σας σε ένα πρόγραμμα περιήγησης, θα πρέπει τώρα να δείτε ότι η εικόνα σας ευθυγραμμίζεται με την αριστερή πλευρά της σελίδας και το κείμενο τυλίγει ωραία γύρω της. Ένας άλλος τρόπος να το πούμε είναι ότι η εικόνα "μεταφέρεται προς τα αριστερά".

1. Εάν θέλετε να αλλάξετε αυτήν την εικόνα για να ευθυγραμμιστεί προς τα δεξιά (όπως στο παράδειγμα φωτογραφίας που συνοδεύει αυτό το άρθρο), θα ήταν απλή. Πρώτον, πρέπει να βεβαιωθείτε ότι, εκτός από το στυλ που μόλις προσθέσαμε στο CSS για την τιμή κλάσης "αριστερά", έχουμε επίσης ένα για ευθυγράμμιση δεξιά. Θα φαινόταν έτσι:
   1. .σωστά {
   2. float: right?
   3. πληκτρολόγηση: 0 0 20px 20px;
   4. }}
   5. Μπορείτε να δείτε ότι αυτό είναι σχεδόν ίδιο με το πρώτο CSS που γράψαμε. Η μόνη διαφορά είναι η τιμή που χρησιμοποιούμε για την ιδιότητα "float" και τις τιμές padding που χρησιμοποιούμε (προσθέτοντας μερικές στην αριστερή πλευρά της εικόνας μας αντί της δεξιάς).
2. Τέλος, θα αλλάζετε την τιμή της κλάσης της εικόνας από "αριστερά" σε "δεξιά" στην HTML σας:
3. Κοιτάξτε τη σελίδα σας στο πρόγραμμα περιήγησης τώρα και η εικόνα σας θα πρέπει να ευθυγραμμιστεί προς τα δεξιά με το κείμενο να τυλίγεται γύρω από το κείμενο. Έχουμε την τάση να προσθέτουμε και τα δύο αυτά στυλ "αριστερά" και "σωστά" σε όλα τα φύλλα στυλ, ώστε να μπορούμε να χρησιμοποιήσουμε αυτά τα οπτικά στυλ, όπως απαιτείται, όταν δημιουργούμε ιστοσελίδες. Αυτά τα δύο στυλ γίνονται ωραία, επαναχρησιμοποιήσιμα χαρακτηριστικά που μπορούμε να κάνουμε όποτε χρειαζόμαστε να στυλίσουμε εικόνες με περιτύλιγμα κειμένου γύρω τους.

Χρήση HTML αντί του CSS (και γιατί δεν πρέπει να το κάνετε αυτό)

Ακόμα κι αν είναι δυνατό να κάνουμε wrap text γύρω από μια εικόνα με HTML, τα πρότυπα του διαδικτύου υπαγορεύουν ότι το CSS (και τα βήματα που παρουσιάζονται παραπάνω) είναι ο τρόπος να προχωρήσουμε ώστε να διατηρήσουμε ένα διαχωρισμό της δομής (HTML) και του στυλ (CSS). Αυτό είναι ιδιαίτερα σημαντικό όταν θεωρείτε ότι, για ορισμένες συσκευές και διατάξεις, το κείμενο ενδέχεται να μην χρειάζεται να κυκλοφορήσει στην εικόνα. Για μικρότερες οθόνες, η διάταξη του ανταποκριτικού ιστότοπου μπορεί να απαιτεί ότι το κείμενο να ευθυγραμμίζεται πράγματι κάτω από την εικόνα και ότι η εικόνα εκτείνεται σε όλο το πλάτος της οθόνης. Αυτό γίνεται εύκολα με ερωτήματα μέσων, εάν τα στυλ σας είναι ξεχωριστά από τη σήμανση HTML. Στον σημερινό κόσμο με πολλές συσκευές, όπου οι εικόνες και το κείμενο θα εμφανίζονται διαφορετικά για διαφορετικούς επισκέπτες και σε διαφορετικές οθόνες, αυτός ο διαχωρισμός είναι απαραίτητος για τη μακροπρόθεσμη επιτυχία και τη διαχείριση μιας ιστοσελίδας.