כיצד לעטוף טקסט סביב תמונה

תסתכל על כל דף אינטרנט ואתה תראה שילוב של תוכן טקסט ותמונות. שני המרכיבים הללו הם מרכיבים חיוניים להצלחת האתר. תוכן טקסט הוא מה המבקרים באתר יקרא ומה מנועי החיפוש ישתמשו כחלק האלגוריתמים הדירוג שלהם. תמונות יוסיפו עניין חזותי לאתר ויעזרו להדגיש את תוכן הטקסט.

הוספת טקסט ותמונות לאתרים היא קלה. טקסט נוסף עם תגי HTML סטנדרטיים כגון פסקאות, כותרות ורשימות, בעוד שהתמונות ממוקמות בדף עם אלמנט . עם זאת, לאחר שהוספת תמונה לדף האינטרנט שלך, ייתכן שתרצה שזרימת הטקסט תהיה ליד התמונה, במקום ליישר מתחתיה (שהיא ברירת המחדל שבה תוסיף תמונה לקוד HTML בדפדפן). מבחינה טכנית, יש שתי דרכים להשיג את המראה הזה, בין אם באמצעות CSS (מומלץ) או על ידי הוספת הוראות חזותיות ישירות לתוך HTML (לא מומלץ, שכן אתה רוצה לשמור על הפרדה של סגנון ומבנה עבור אתר האינטרנט שלך).

שימוש ב- CSS

הדרך הנכונה לשנות את הדרך שבה פריסת טקסט ותמונה של הדף וכיצד סגנונות חזותיים שלהם מופיעים בדפדפן היא באמצעות CSS . רק תזכור, כי אנחנו מדברים על שינוי חזותי על הדף (מה שהופך את זרימת טקסט סביב תמונה), זה אומר שזה תחום של גיליונות סגנון מדורגים.

1. ראשית, הוסף את התמונה שלך לדף האינטרנט שלך. זכור שלא לכלול מאפיינים חזותיים (כגון ערכי רוחב וגובה) מאותו HTML. זה חשוב, במיוחד עבור אתר תגובה שבו גודל התמונה ישתנה בהתאם לדפדפן. תוכנות מסוימות, כמו Adobe Dreamweaver, יוסיפו מידע רוחב וגובה לתמונות שמוכנסות לכלי זה, לכן הקפד להסיר מידע זה מקוד ה- HTML! עם זאת, הקפד לכלול טקסט alt מתאים . הנה דוגמה לאופן שבו קוד ה- HTML שלך עשוי להיראות:
2. למטרות עיצוב, ניתן גם להוסיף מחלקה לתמונה. ערך מחלקה זה הוא מה נשתמש בקובץ CSS שלנו. שים לב כי הערך שאנו משתמשים בו הוא שרירותי, אם כי, עבור סגנון מסוים זה, אנו נוטים להשתמש בערכים של "שמאל" או "נכון", תלוי באיזו דרך אנחנו רוצים התמונה שלנו ליישר. אנו מוצאים כי תחביר פשוט לעבוד טוב ולהיות קל עבור אחרים שעשויים לנהל אתר בעתיד כדי להבין, אבל אתה יכול לתת את זה כל ערך בכיתה שאתה רוצה.
   2. כשלעצמו, ערך המחלקה הזה לא יעשה דבר. התמונה לא תהיה מיושרת באופן אוטומטי משמאל לטקסט. בשביל זה, אנחנו צריכים עכשיו לפנות לקובץ CSS שלנו.

1. בגיליון הסגנונות שלך, כעת תוכל להוסיף את הסגנון הבא:
   1. .שמאלה {
   2. צף: משמאל;
   3. ריפוד: 0 20px 20px 0;
   4. }
   5. מה שעשית כאן הוא להשתמש במאפיין CSS "float" , אשר ימשוך את התמונה מזרימת מסמכים רגילה (האופן שבו התמונה תוצג בדרך כלל, כשהטקסט מיושר מתחתיה) והיא תיישר אותה לצד השמאלי של המכל שלה . הטקסט שמגיע אחריו בסימון ה- HTML עם עכשיו לעטוף אותו. הוספנו גם כמה ערכי ריפוד כך שהטקסט הזה לא יסתמך ישירות על התמונה. במקום זאת, זה יהיה קצת ריווח נחמד זה יהיה מושך ויזואלית בעיצוב של הדף. ב CSS קצרנות עבור ריפוד, הוספנו 0 ערכים הדף בצד שמאל של התמונה, ו 20 פיקסלים משמאל ותחתיתה. זכור, עליך להוסיף קצת ריפוד בצד ימין של תמונה מיושרת שמאלה. תמונה מיושרת מימין (אשר נתבונן בה בעוד רגע) תהיה ריפוד מוחל על צדה השמאלי.
2. אם אתה מציג את דף האינטרנט שלך בדפדפן, עכשיו אתה צריך לראות את התמונה שלך מיושר בצד שמאל של הדף ואת הטקסט יפה עוטפת אותו. דרך נוספת לומר זאת היא כי התמונה היא "צף שמאלה".

1. אם אתה רוצה לשנות את התמונה הזאת כדי להיות מיושר לימין (כמו בדוגמה תמונה המלווה מאמר זה), זה יהיה פשוט. ראשית, עליך לוודא כי בנוסף לסגנון הוספנו רק ל- CSS שלנו עבור הערך בכיתה של "שמאל", יש לנו גם אחד יישור ימינה. זה ייראה כך:
   1. .ימין {
   2. צף: ימינה;
   3. ריפוד: 0 0 20px 20px;
   4. }
   5. אתה יכול לראות שזה כמעט זהה ל- CSS הראשון שכתבנו. ההבדל היחיד הוא הערך שבו אנו משתמשים עבור המאפיין "float" וערכי הריפוד בהם אנו משתמשים (הוספת חלק בצד השמאלי של התמונה שלנו במקום מימין).
2. לבסוף, תשנה את הערך של מחלקה של התמונה מימין לשמאל ב- HTML:
3. תסתכל על הדף שלך בדפדפן עכשיו ואת התמונה שלך צריך להיות מיושר ימינה עם טקסט עטוף היטב סביב זה. אנו נוטים להוסיף את שני סגנונות אלה, "שמאל" ו"זכות "לכל דפי הסגנונות שלנו, כך שנוכל להשתמש בסגנונות חזותיים אלה לפי הצורך בעת יצירת דפי אינטרנט. שני סגנונות אלה הופכים נחמד, תכונות לשימוש חוזר שאנחנו יכולים לפנות בכל פעם שאנחנו צריכים סגנון תמונות עם גלישת טקסט סביבם.

שימוש ב- HTML במקום CSS (ולמה אתה לא צריך לעשות את זה)

למרות שניתן לעשות גלישת טקסט סביב תמונה עם HTML, תקני האינטרנט קובעים כי CSS (והצעדים המוצגים לעיל) היא הדרך ללכת, כך שנוכל לשמור על הפרדה בין מבנה (HTML) וסגנון (CSS). זה חשוב במיוחד כאשר אתה מחשיב את זה, עבור התקנים מסוימים פריסות, כי טקסט לא צריך לזרום סביב התמונה. במסכים קטנים יותר, פריסת אתר תגובה עשויה לדרוש שהטקסט אכן יישר מתחת לתמונה ושהתמונה תמתח את רוחב המסך כולו. הדבר נעשה בקלות עם שאילתות מדיה אם הסגנונות שלך נפרדים מסימון ה- HTML שלך. בעולם המרובה של היום, שבו תמונות וטקסט יופיעו בצורה שונה עבור מבקרים שונים ובמסכים שונים, ההפרדה הזו חיונית להצלחה ולניהול ארוכי טווח של דף אינטרנט.