הוסף תמונה עם HTML

מְחַבֵּר: Christy White
תאריך הבריאה: 4 מאי 2021
תאריך עדכון: 1 יולי 2024
Anonim
html tutorial - שיעור 9: הוספת תמונה
וִידֵאוֹ: html tutorial - שיעור 9: הוספת תמונה

תוֹכֶן

הוספת תמונות לאתר שלך או לפרופיל הרשת החברתית היא דרך מצוינת להלביש את דף האינטרנט שלך. ל- HTML (HyperText Markup Language) יש פונקציות רבות ליצירת דפי אינטרנט, אך למרבה המזל הקוד שאתה צריך כדי להוסיף תמונות אינו קשה מדי.

לדרוך

שיטה 1 מתוך 1: הכנסת תמונות עם HTML

  1. העלה את התמונה שלך לאתר אירוח בחינם, כגון Photobucket או TinyPic, המאפשר קישור חם. קישור חם מאפשר קישור ישיר של תמונה לשרת האתר; ספקים מסוימים אסרו זאת מכיוון שקישור חם משתמש ברוחב הפס שלהם ותופס מקום בשרתים שלהם.
    • אם יש לך חשבון אירוח בתשלום, העלה את התמונות ישירות לשרת בו ממוקם אתרך. זה תמיד אמין יותר מאתר בחינם ולא צריך להיות יקר בכלל.
  2. פתח מסמך חדש בעורך טקסט (למשל., פנקס רשימות / פנקס רשימות) או פתח את הדף באתר / בפרופיל שלך בו תוכל לשנות את קוד ה- HTML ישירות.
  3. התחל עם img תָג. ה img התג ריק, כלומר אין צורך בתג סגירה. עם זאת, עבור אימות XHTML אתה עדיין יכול לשים רווח וקו נטוי לפניו גדול מ סִימָן.
    • img />
  4. יש הרבה מאפיינים זמינים, אך רק אחד הוא הכרחי:src. זהו המיקום / כתובת, או גם כתובת האתר של התמונה שלך.
    • img src = "כתובת אתר של תמונה" />
  5. הבא אתה צריך alt להוסיף תכונה. זה מציג טקסט חלופי, במקרה שהתמונה לא נטענת. זהו גם שירות ללקויי ראייה המשתמש בקוראי מסך.
    • אם אתה מעביר את הסמן מעל תמונה, טקסט זה מוצג גם כטיפ כלים, אך זה המקרה רק ב- Internet Explorer. הפיתרון שעובד עם כל הדפדפנים (Firefox ואח '.) זה לזה כותרת תכונה לשימוש בנוסף ל alt. (אתה יכול להשמיט את האחרון אם אתה לא רוצה שהתמונה תהיה בעלת תיאור כלים.)

לדוגמא:img src = "URL of image" alt = "לכל מקרה" title = "סיכום כלים" />


  1. עכשיו אתה יכול לציין את גודל התמונה עם גוֹבַה ו רוֹחַב תכונה, ועל ידי ציון הפיקסלים או האחוז. שים לב ששינוי גודל בצורה זו רק משנה את גודל התצוגה, ולא את גודל התמונה עצמה. כדי לקצר את זמן הטעינה של תמונה, עדיף, במיוחד בתמונות גדולות, לשנות את הגודל שלהן מראש באמצעות תוכנת עריכת תמונות או עם שירות מקוון כמו PicResize.com.
    • img src = "URL of image" alt = "לכל מקרה" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL of image" alt = "לכל מקרה" title = "Tooltip" height = "25px" width = "50px" />

טיפים

  • הערך של תכונות אלה ניתן בפיקסלים, או באחוזים, בין 1-100%.
  • את התמונה ניתן למקם בכל מקום בדף האינטרנט, באמצעות תכונות העיצוב השונות כמו למעלה, למטה, לאמצע, לימין, לשמאל וכו '.
  • התכונה hspace משמשת להכנסת רווח אופקי משמאל לימין לתמונה, ואילו תכונת vspace משמשת לפינוי מקום בחלק העליון והתחתון של תמונות ואובייקטים אחרים.
  • אל תתמכר יותר מדי לתמונות. זה נראה מבולגן ולא מקצועי.
  • תמונות GIF מתאימות לסמלים או סרטים מצוירים, אך סוג קובץ זה פחות מתאים לתמונות ותמונות אחרות עם צבעים רבים.
    • תמונות GIF תומכות רק בצבע 8 סיביות עם מקסימום 256 צבעים לתמונה. לכן ניתן לצפות כי ההעתקה של איור צבעוני או צילום של 16 או 24 סיביות לא תהיה טובה כל כך.
    • תמונות GIF תומכות גם בשקיפות. מעט שקיפות אפשרית, מה שאומר שניתן להפוך צבע אחד לשקוף.
    • השיתוף נתמך גם על ידי תמונות GIF, מה שאומר שמבקר האתר יקבל מושג איך תראה התמונה לפני שהיא נטענת לחלוטין.
    • פורמט ה- GIF תומך גם באנימציה.
  • ודא שכתובת האתר מציינת את פורמט הקובץ של התמונה (.webp .gif וכו ').

אזהרות

  • אל תיצור Hotlink!