מדריך HTML מספר 5 - תמונות (Img and src)

Steps

1. 1

   Step 1

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

   Step 2

   בכדי להגדיר תמונה עלינו לתת לתגית את המאפיין "src" (מהמילה source) שתגיד לדפדפן באיזה תמונה להשתמש ומהיכן לקחת אותה, מקור התמונה יכול להיות כל ספריה על המחשב\שרת או מאתר אינטרנט. לדוגמא:
3. 3

   Step 3

   
4. 4

   Step 4

   
   במקרה כזה התמונה image.jpg, תוצג מספריית images באתר בקלות - bekaloot.co.il כמו כן, ניתן לשלוף קובץ הנמצא בספריה בה דף הHTML שאתם עובדים עליו כעת:
5. 5

   Step 5
6. 6

   Step 6

   ניתן להתייחס באופן יחסי למיקום בו נמצא דף הHTML שלכם לספריה בה נמצאת התמונה:
7. 7

   Step 7

   src="images/image.jpg" התמונה נמצאת בספריה תחת הספריה שבה הדף src="../image.jpg" התמונה נמצאת ספריה אחת מעל לדף src="../../image.jpg"התמונה נמצאת בספריה מעל לספריה שבה הדף src="../images/image.jpg" התמונה נמצאת בספריה מעל ואז ספריה מתחת למיקום הדף
8. 8

   Step 8

   הסיבה שעדיף להשתמש בנתיבים יחסיים היא שאפשר לכתוב אתר במחשב המקומי ולאחר מכן להעלות אותו כמו שהוא (עם הספריות) בלי שהנתיבים ישתבשו.
9. 9

   Step 9

   במידה והתמונה לא מוצגת (מסיבות טכניות, מהירות גלישה נמוכה או שהתמונה פשוט הוסרה) תוכלו להציג טקסט אלטרנטיבי שיוצג במקום התמונה בעזרת מאפיין הalt (alternative)
10. 10

    Step 10

    
11. 11

    Step 11

    
    כך זה יראה עם הטקסט החלופי.
12. 12

    Step 12

    זו כתיבה נכונה להכריז על גודל התמונה - רוחב ואורך (Width, height) בפיקסלים.
13. 13

    Step 13
14. 14

    Step 14

    בכדי למקם את התמונה במקומות שונים בדף תוכלו להשתמש במאפיין align, כאשר הערך bottom מציב למטה, הערך middle מציב באמצע והערך top מציב למעלה.
15. 15

    Step 15