כיצד להכניס תמונות עם HTML?

1. העלה את התמונה.
2. פתח את קובץ ה- HTML שלך.
3. הקלד <img src = "">
4. הכנס את כתובת האתר של התמונה בין המרכאות.

Rollin Roob
Rollin Roob
• 8 דקות קריאה
כיצד אוכל להכניס תמונה מנתיב אחר ב- HTML
כיצד אוכל להכניס תמונה מנתיב אחר ב- HTML?

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

חלק 1 מתוך 2: הכנסת התמונה

  1. 1
    העלה את התמונה שלך. ישנם שירותי אירוח תמונות רבים בחינם, כגון אלבומי Picasa, Imgur, Flickr או Photobucket. קרא בעיון את התנאים. שירותים מסוימים יפחיתו את איכות התמונה שלך, אויורידו את התמונה אם יותר מדי אנשים יראו אותה (מכיוון שזה מנצל את רוחב הפס של המארח).
    • חלק משירותי אירוח הבלוגים מאפשרים לך להעלות תמונות באמצעות כלי מנהל הבלוגים.
    • אם יש לך מארח אינטרנט בתשלום, העלה את התמונה לאתר משלך באמצעות שירות FTP. מומלץ ליצור ספריית "תמונות" בכדי לשמור על קבצים מסודרים.
    • אם ברצונך להשתמש בתמונה באתר אחר, בקש מהיוצר אישור. אם היא תעניק לה, הורידו את התמונה והעלו את התמונה לאתר אירוח תמונות.
  2. 2
    פתח את קובץ ה- HTML שלך. פתח את מסמך ה- HTML עבור דף האינטרנט בו תוצג התמונה.
    • אם אתה מנסה להכניס תמונה לפורום, תוכל להקליד ישירות בפוסט. פורומים רבים משתמשים במערכת מותאמת אישית במקום ב- HTML. בקש עזרה מבעלי פורום אחרים אם זה לא עובד.
  3. 3
    התחל בתג img. מצא את הנקודה בגוף ה- HTML שלך בה תרצה להוסיף תמונה. כתוב את התג <img> כאן. זהו תג ריק, כלומר עומד לבדו, ללא תג סגירה. כל מה שאתה צריך כדי להציג את התמונה שלך ייכנס לשתי סוגרי הזווית.
    • <img>
    כיצד אוכל להכניס תמונות ללא קישור
    כיצד אוכל להכניס תמונות ללא קישור?
  4. 4
    מצא את כתובת האתר של התמונה שלך. בקר בדף האינטרנט שבו מתארחת התמונה שלך. לחץ באמצעות לחצן העכבר הימני על התמונה (לחץ באמצעות לחיצה על מקש ב- Mac) ובחר "העתק מיקום תמונה". אתה יכול גם ללחוץ על "הצג תמונה" כדי לראות את התמונה לבד בדף, ואז להעתיק את כתובת האתר בשורת הכתובת שלך.
    • אם העלית את התמונה לספריית תמונות באתר שלך, קישור אליה באמצעות / images / yourfilenamehere. אם זה לא עובד, סביר להניח שספריית התמונות נמצאת בתוך תיקיה אחרת. העבר אותו לספריית הבסיס.
  5. 5
    מקם את כתובת האתר בתכונה src. כפי שאתה אולי כבר יודע, תכונות HTML נכנסות לתג כדי לשנות אותו. Src התכונה היא קיצור של "מקור", ומספרת את הדפדפן איפה לחפש כדי למצוא את התמונה. כתוב src = "" והדבק את כתובת האתר של התמונה בין המרכאות. הנה דוגמה:
    • <img src = "aHR0cDovL2V4YW1wbGVpbWFnZWhvc3QuY29tL215LWN1dGUtZG9nLmpwZw ==">
  6. 6
    הוסף תכונת alt. מבחינה טכנית ל- HTML שלך יש את כל הדרוש כדי להציג את התמונה, אך עדיף להוסיף גם תכונת alt. זה אומר לדפדפן איזה טקסט להציג כאשר התמונה לא נטענת. חשוב מכך, זה עוזר למנועי החיפוש להבין על מה התמונה שלך, ומאפשר לקוראי המסך לתאר את התמונה למבקרים לקויי ראייה. פעל לפי דוגמה זו, תוך שינוי הטקסט בתוך המרכאות:
    • <img src = "aHR0cDovL2V4YW1wbGVpbWFnZWhvc3QuY29tL215LWN1dGUtZG9nLmpwZw ==" alt = "הכלב שלי אוכל קלמנטינה">
    • אם התמונה אינה חשובה לתוכן העמוד, כלול את תכונת alt ללא טקסט (alt = "").
  7. 7
    שמור את השינויים שלך. שמור את קובץ ה- HTML באתר שלך. בקר בדף שערכת זה עתה, או רענן את הדף אם כבר נפתח. כעת אתה אמור לראות את התמונה שלך. אם זה בגודל הלא נכון או שאתה לא מרוצה מכך מסיבה אחרת, המשך לסעיף הבא.
כיצד אוכל להכניס תמונה למסמך MS Word הניתן לצפייה בכל מחשב
כיצד אוכל להכניס תמונה למסמך MS Word הניתן לצפייה בכל מחשב?

חלק 2 מתוך 2: התאמות אופציונליות

  1. 1
    שנה את גודל התמונה. לקבלת התוצאות הטובות ביותר, שנה את גודל התמונה באמצעות תוכנת עריכה בחינם, ואז העלה את הגרסה החדשה. הגדרת רוחב ו גובה HTML באמצעות אומרת לדפדפן להתכווץ או להרחיב את התמונה, אשר יכולה להיות עקבי בדפדפנים (לעתים רחוקות) הגורם שגיאות תצוגה. אם אתה רוצה התאמה מהירה ושירותית, השתמש בפורמט זה:
    • <img src = "aHR0cDovL2V4YW1wbGUuY29tL2V4YW1wbGUucG5n" alt = "הצג את זה" width = 200 height = 200> (מספר הפיקסלים או "פיקסלי CSS" הידידותיים יותר לטלפון ב- HTML5.)
    • או <img src = "aHR0cDovL2V4YW1wbGUuY29tL2V4YW1wbGUucG5n" width = 100% height = 10%> (אחוז ממדי דף האינטרנט, או אחוז רכיב ה- HTML המכיל את התמונה.)
    • אם תזין רק מאפיין אחד (רוחב או גובה), הדפדפן צריך לשמור על יחס רוחב: גובה.
  2. 2
    הוסף טיפ כלים. כותרת התכונה יכולה לשמש כדי להוסיף תגובה נוספת או מידע לגבי התמונה. לדוגמה, תוכל לזכות את האמן כאן. ברוב המקרים, טקסט זה יוצג כאשר המבקר מעביר את הסמן מעל התמונה.
    • <img src = "aHR0cDovL2V4YW1wbGUuY29tL2V4YW1wbGUucG5n" title = "צילום ג'יי גודפרי">
  3. 3
    הפוך אותו לקישור. כדי ליצור תמונה שהיא גם קישור, הכניסו את תג התמונה לתג ההיפר-קישור <a> </a>. הנה דוגמה:
    • <a href="http://urloflink.com"> <img src = "aHR0cDovL3VybG9maW1hZ2UuY29tL2ltYWdlLmdpZg =="> </a>
קוד ה- HTML להוספת תמונות הוא פשוט
קוד ה- HTML להוספת תמונות הוא פשוט, ולעיתים קרובות אחד השיעורים הראשונים עבור טירון HTML.

טיפים

  • שמור גיבוי של התמונה במחשב שלך, לכל מקרה.
  • וודא שכתובת האתר כוללת את פורמט הקובץ של התמונה (.jpg,.gif וכו ').
  • תמונות GIF פועלות היטב עבור סמלי לוגו או סרטים מצוירים, ואילו תמונות JPEG פועלות היטב עבור תמונות מורכבות כגון תצלומים.
  • ברוב המקרים, תרצה להיצמד לתמונות עם הקבצים formats.gif,.jpeg,.jpg, או.png. סביר להניח שפורמטים אחרים לא יופיעו כהלכה בכל הדפדפנים.

אזהרות

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

שאלות ותשובות

  • האם עלי לשנות את גודל התמונה לפני העלאתה, או שמא אוכל להשתמש במאפייני רוחב וגובה?
    אם אתה מצמצם תמונה גדולה במיוחד, עדיף לעשות זאת בתוכנת עריכת תמונות לפני העלאה. מבקר האתר שלך צריך להוריד את התמונה המדויקת שהעלית, גם אם היא מסתיימת רק בתמונה ממוזערת זעירה על המסך שלו.
  • התמונה הופיעה בעבר אבל עכשיו אני פשוט רואה קופסה ריקה. מה קרה?
    אם התמונה כבר לא זמינה בכתובת האתר שהפנית אליה, היא לא תופיע באתר שלך. סביר להניח שהאתר המארח את התמונה הוריד אותה או העביר אותה לעמוד אחר.
  • האם זה חייב להיות קובץ jpg בעת הכנסת תמונות עם HTML?
    לא. אתה יכול להשתמש בכל סוג קובץ תמונה אלא אם כן האתר המארח מאפשר רק סוגי קבצים מסוימים.
  • כיצד אוכל להכניס תמונות ללא קישור?
    ניתן לעצור לאחר ביצוע השלבים עד לסוף חלק 1. השלבים בחלק 2 הם אופציונליים.
  • האם זה עובד גם עבור משתמשים המבקרים באתר שלי?
    כן, כל עוד אתה משתמש באחד מהאינטרנט או שיש לך תמונה מהמחשב שלך.
  • כיצד אוכל להחליף את התמונה אם קורה לה משהו?
    שנה את הקוד שבו השתמשת כדי להכניס את התמונה הקודמת והוסף את הקוד להחלפה. לאחר מכן, שמור אותו וטען מחדש בדף האינטרנט.
  • איזה סוג קבצים נדרש להכנסת תמונה?
    אתה יכול להשתמש בכל סוג קובץ תמונה, אלא אם כן האתר המארח מאפשר רק סוגי קבצים מסוימים.
  • מה עלי לעשות כאשר התמונה לא תופיע באתר HTML?
    מארח התמונה כנראה שינה את הקישור שלו, ובמקרה כזה עליכם לברר את הקישור החדש שלה ולשנות את הקישור שכתבתם ב- HTML שלכם, לשמור אותו ולהטעין מחדש את דף האינטרנט שלכם. המארח אולי גם הוריד את התמונה, ובמקרה כזה אתה צריך למצוא תמונה אחרת.
  • יש לי תמונה במחשב. האם אוכל להוסיף אותו ב- HTML מבלי להעלותו לאתר?
    אתה יכול, אבל התמונה עדיין תהיה רק במחשב שלך, ולא תוצג על ידי מישהו אחר שמבקר באתר שלך. לשם כך, השתמש בנתיב הקובץ של התמונה במקום בכתובת אתר. כדי למצוא את נתיב הקובץ, השתמש בפונקציה "פתח קובץ" של הדפדפן כדי לפתוח את התמונה ואז הסתכל בשורת הכתובת. זה יגיד משהו כמו "C: \ Users \ guide \ image.jpg"
  • כיצד אוכל להכניס תמונה?
    הקוד להכנסת תמונה ל- HTML מופיע במאמר זה. אנא קרא אותו למעלה.
שאלות ללא מענה
  • כיצד אוכל להכניס תמונה למסמך MS Word הניתן לצפייה בכל מחשב?
  • כיצד אוכל להכניס תמונה מנתיב אחר ב- HTML?
  • כיצד אוכל להשתמש בתמונות גולמיות?
  • מה עלי לעשות אם השרת שלי קורס.
  • האם אוכל להוסיף בה גם אנימציה? אם כך, איך?

קרא גם:

  1. כיצד להריץ קובץ HTML?
מאמרים בנושאים דומים
  1. כיצד להריץ קובץ HTML?Damien Griffiths
  2. כיצד לגרום לאתר 508 להיות תואם?Rollin Roob
  3. איך לשלוח מייל אנונימי?Finley Lee
  4. כיצד לשנות את סיסמת הדוא"ל שלך?Brandon Kovacek
  5. כיצד ליצור מספר חשבונות דוא"ל?Noah Cook
  6. כיצד לפתוח אימייל?Brandon Kovacek
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail