הכנס תמונות עם HTML - איך זה עובד
אם ברצונך להוסיף תמונה באתר שלך באמצעות HTML, השתמש בתג img. קרא כאן כיצד בדיוק זה עובד ומה אתה צריך להיזהר.
כיצד להוסיף תמונות עם HTML - היסודות
- עם היום
יכול להכניס תמונות.
- מקור התמונה מוצג בתוך התג:
- אפשר גם מקורות חיצוניים דרך URL:
משלב את לוגו ה- CHIP מהשרתים שלנו.
תכונות HTML לתמונות משובצות
ניתן להוסיף מספר תכונות בתוך תג img:
- השתמש ב"רוחב "ו"גובה" כדי לקבוע את גודל התמונה באתר: התמונה
מוצג ריבוע באורך הצד של 100 פיקסלים.
- באמצעות "alt" אתה מגדיר טקסט חלופי שיוצג אם לא ניתן לטעון את התמונה בהתאמה. עליך תמיד להגדיר תכונה זו כשמכניסים תמונות ל- HTML.
- התכונה "גבול" מציינת את עובי המסגרת בפיקסלים. תמונה עם
- השתמש ב"יישור "כדי ליישר את הגרפיקה. הערכים עבור תכונה זו הם "תחתון", "למעלה", "אמצע", "שמאל", "ימין" ו"מרכז ".
- בעזרת "hspace" ו- "vspace" אתה יכול (אופקית ואנכית) להגדיר מרחק לתמונה.
באיזה פורמט עלי להשתמש?
ישנן פורמטים שונים של תמונות שתוכל לכלול בקוד ה- HTML.
- JPG: תמונות בפורמט JPG משמשות לרוב לדפי אינטרנט. פורמט זה מייצג 16.7 מיליון צבעים.בנוסף, ניתן לדחוס JPG היטב. לפיכך ניתן להפוך את קובץ התמונה לקטן מאוד, המאפשר זמן טעינה מהיר.
- PNG: פורמט PNG יכול להציג גם 16.7 מיליון צבעים וניתן לדחוס אותו. היתרון על פני פורמט JPG הוא שהדחיסה אפשרית ללא הפסדים.
- אזורים המוגדרים בפורמט PNG יכולים גם להיות מוצגים בשקיפות. עם זאת, לדפדפנים ישנים מאוד יש בעיות בהצגת שקפים.
- GIF: אם ברצונך להוסיף תמונות נעות עם HTML, פורמט GIF מתאים. בפורמט זה מוצגים רק 256 צבעים והדחיסה מתרחשת באופן אוטומטי ללא אפשרויות הגדרה.
- פורמט GIF מתאים ביותר לגרפיקה קטנה או מונפשת או לוגו. כדי להבטיח שסמלי לוגו ישתלבו בצורה הרמונית בדף, ניתן להשתמש בשקפים בפורמט GIF כמו PNG.
למשל HTML
- זה משלב את לוגו ה- CHIP מאתר האינטרנט שלנו.
- הוא מוצג בגובה של 100 פיקסלים ורוחב של 200 פיקסלים.
- אם לא ניתן לטעון אותו, "CHIP-Logo" מוצג כטקסט ריק.
- התמונה ממוסגרת על ידי מסגרת של שני פיקסלים.
- הוא מיושר ימינה ובמרחק של 50 פיקסלים זה מזה לרכיבי צד אחרים.