logo

תמונת HTML

תג HTML img משמש להצגת תמונה בדף האינטרנט. HTML img תג הוא תג ריק שמכיל תכונות בלבד, תגיות סגירה אינן משמשות ברכיב תמונה HTML.

בוא נראה דוגמה לתמונת HTML.

הפשטה ב-java
 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 
בדוק את זה עכשיו

תְפוּקָה:

בוקר טוב חברים

תכונות של תג HTML img

ה-src וה-alt הם תכונות חשובות של תג HTML img. כל התכונות של תג תמונה HTML ניתנות להלן.

1) src

זוהי תכונה הכרחית המתארת ​​את המקור או הנתיב של התמונה. הוא מורה לדפדפן היכן לחפש את התמונה בשרת.

המיקום של התמונה עשוי להיות באותה ספרייה או בשרת אחר.

2) הכל

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

3) רוחב

זוהי תכונה אופציונלית המשמשת לציון הרוחב להצגת התמונה. זה לא מומלץ עכשיו. עליך להחיל CSS במקום תכונת width.

ipconfig על אובונטו

4) גובה

זה h3 את גובה התמונה. תכונת גובה HTML תומכת גם ברכיבי iframe, תמונה ואובייקט. זה לא מומלץ עכשיו. עליך להחיל CSS במקום תכונת הגובה.

ג'אווה tuples

שימוש בתכונת גובה ורוחב עם תג img

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

דוגמא:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 
בדוק את זה עכשיו

תְפוּקָה:

תמונת HTML

הערה: נסה תמיד להכניס את התמונה לגובה ולרוחב, אחרת היא עלולה להבהב בזמן ההצגה בדף האינטרנט.


שימוש בתכונת alt

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

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

תְפוּקָה:

קרא מ-csv java
תמונת HTML

איך משיגים תמונה ממדריך/תיקיה אחרת?

כדי להוסיף תמונה לאינטרנט שלך, התמונה הזו חייבת להיות קיימת באותה תיקיה שבה שמת את קובץ ה-HTML. אבל אם במקרה מסוים התמונה זמינה בספרייה אחרת, אתה יכול לגשת לתמונה כך:

 

בהצהרה לעיל שמנו תמונה בדיסק המקומי E------>תיקיית תמונות------>img/html-tutorial/39/html-image-2.webp.

הערה: אם כתובת האתר של src תהיה שגויה או איות שגויה, היא לא תציג את התמונה שלך בדף האינטרנט, אז נסה לשים כתובת URL נכונה.


להשתמש תייג כקישור

אנחנו יכולים גם לקשר תמונה עם דף אחר או שאנחנו יכולים להשתמש בתמונה בתור קישור. כדי לעשות זאת, שים תג בתוך תָג.

דוגמא:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 
בדוק את זה עכשיו

תְפוּקָה:


דפדפנים תומכים

אֵלֵמֶנט דפדפן כרוםכרום כלומר דפדפןכְּלוֹמַר דפדפן פיירפוקספיירפוקס דפדפן אופרהאוֹפֵּרָה דפדפן ספאריספארי
כןכןכןכןכן