כיצד להוסיף תמונה ב- HTML?

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

תגי תמונה

התג שאחראי על הצגת התמונה באתר הוא אוניברסלי עבור כל הגירסאות של HTML. זהו תג <img>. זה עשוי לקחת צורה קצת שונה, אבל המהות נשארת זהה.

לדוגמה, ב- HTML אתה יכול פשוט להשתמש בתג אחד <img>. ב- xhtml, כל התגים חייבים להיות פרטיים. לכן, בסוף התג, אתה חייב לשים את קו נטוי ימין: <img />.

תכונות תג תמונה

בעת הוספת תמונות, נעשה שימוש בכמה מאפיינים. הבה נבחן אותם באופן עקבי.

מאפיין המפתח הוא src. הוא מציין את כתובת התמונה שברצונך לטעון לדף האינטרנט. דוגמא ל- HTML תיראה כך: <img src = "http://mysite.ru/picture.png" />
שתי תכונות נוספות מתייחסות לגודל תמונה. כלומר, תכונה width מציעה להגדיר את רוחב, גובה, בהתאמה, את גובה התמונה. דוגמא ל- HTML: <img src = "/ images / picture.png" width = "300" height = "100"> עבור xhtml: <img src = "picture.png" width = "300" height = "100" > תכונות נוספות צריך להיות prescribed עבור שפת תכנות אחת, שכן יש אנלוגיה ברורה בכל מקום.
תכונה alt חייבת לכלול תיאור קצרתמונות. טקסט זה מופיע אם התמונה אינה נטענת או אם המשתמש מחפש מידע באמצעות מנוע החיפוש בקטע "תמונות". דוגמה לשורת קוד: <img src = "/ images / picture.png" alt = "תמונה מעניינת">
הכותרת נותנת את הכותרת לתמונה. חשוב גם כאשר מחפשים את המידע הדרוש על ידי המשתמש. <img src = "/ images / picture.png" title = "תמונה">
התכונה vspace מציינת את הכניסה האנכית בין התמונה לבין רכיבי סימון אחרים (לדוגמה, טקסט). הערך נמדד בפיקסלים.
תכונה hspace מציין את הזחה זהה, אבל אופקית. הערך נמדד גם בפיקסלים. דוגמה לשתי התכונות האחרונות: <img src = "/ images / picture.png" vspace = "5" hspace = "5">
באמצעות מאפיין הגבול, התמונה מסומנת על ידי גבול. אם הערך אינו מוגדר באופן ספציפי, ברירת המחדל היא 0. דוגמה: <img src = "/ images / picture.png" border = "1">

תכונות נוספות עבור תמונות

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

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

התמונה מוכנסת לאחר תג td. כך זה ייראה: