מעצבי אינטרנט מחשב שניים: כיצד להפוך זרימת טקסט סביב תמונות

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

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

אין את התכונות החשובות פחות של זוג - "רוחב" (רוחב) ו "גובה" (גובה). הם משמשים כדי לשנות את גודל התמונות באופן ידני (אופציה שימושית עבור מתיחה ודחיסה תמונות).

פרמטרים ואחריו "hspace" ו "vspace" (מרחק מהתמונה לטקסט שמסביב). ברור, "hspace" - ריפוד אופקי "vspace" - אנכי.

יש תג אנו תכונות כגון "alt" ו "title". הם דומים זה לזה, שכן מטרתם היא לתאר את התמונה. אבל "הכותרת" שנקבע טקסט מוצג כאשר עוברים עם העכבר מעל התמונה, ואת הערך המילולי של תכונה "alt" מוצג במקרה זה לא ניתן היה להעלות תמונה.

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

אחד הפרמטרים המגדירים את המראה של התמונה הוא "גבול". הוא קובע את עובי הגבול סביב האובייקט וניתן להגדיר לכל שלם חיובי (בפיקסלים).

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

יש עוד כלי רב עוצמה - CSS (הרבה יותר תכליתי). זה יכול לשמש הרבה יותר יעיל להגדיר את התכונות תג, כולל זרימת טקסט מסביב לתמונה. CSS מאפשר לכם להגדיר את הפרמטרים, לא רק אובייקט מסוים, וכל אלה כמוהו. לדוגמה, אם אתה רוצה לציין את הזחה של כל התמונות במסמך הוא עשרה פיקסלים, זה מספיק כדי להתחבר קובץ CSS זה עם תפר אחד: "img {margin: 10px 10px 10px 10px;}" (בפועל, הציטוטים אינם נחוצים!).

זרימת טקסט סביב תמונות, למשל, על הקצה השמאלי מוגדרת: "img {align: עזוב;}".

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

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