מהן תמונות HTML וכיצד לשנות את דף האינטרנט שלך?



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

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

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

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





תחביר

img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>

קוד לדוגמא



תמונת HTML הטמעת תמונות בדף אינטרנט  

בדומה לתגיות אחרות, ישנם מאפיינים שונים המשויכים אליהם תָג. הבה נבחן כל אחד מהם בזה אחר זה, נבין את הצורך שלהם וכיצד להשתמש בהם.

תגיות תמונות HTML

  • תכונה alt

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



אם התמונה שוכנת בתוך אותה תיקייה בה נמצא קובץ ה- HTML, תוכל לציין את שם הקובץ ישירות. אחרת, יש לך לספק את הנתיב המוחלט של קובץ התמונה.

הערך של תכונת alt צריך לתאר את התמונה.

דוגמא

 לוגו של אדוריקה
תמונת HTML הטמעת תמונות בדף אינטרנט לוגו edureka 

תיאור התפקיד של מפתח נתונים גדולים
  • רוחב וגובה תמונה

תכונת סגנון משמשת לקביעת גובה ורוחב של תמונה. במאפיין סגנון אתה מציין את עיצוב ה- CSS.

תמונת HTML הטמעת תמונות בדף אינטרנט  

חלק מהנקודות החשובות בעת הטמעת תמונה בדף אינטרנט באמצעות HTML הן:

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

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

תמונת HTML הטמעת תמונות בדף אינטרנט  

  • תמונה כקישור

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

היפוך מספר בג'אווה
תמונת HTML הטמעת תמונות בדף אינטרנט  

  • תמונה צפה

ניתן גם להתאים את יישור התמונה באמצעות מאפיין צף CSS. יש לציין את כל מאפיין CSS במאפיין הסגנון.

תמונת HTML התמונה תצוף מימין לטקסט. התמונה תצוף משמאל לטקסט.

  • מפות תמונה

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

תמונת HTML  
  • תמונת רקע

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

תמונת HTML

תמונת רקע

אלמנט BODY

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

בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.

יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'תמונות HTML' ונחזור אליך.