מדריך HTML מספר 5 - תמונות (Img and src)
טקסט בלבד אינו מספיק, בכדי לעשות אתר אינטרנט מושך ואטרקטיבי עליו להכיל גם תמונות, מדריך זה יסביר באילו תגיות ומאפיינים יש להשתמש בכדי להציב תמונות בדף האינטרנט שלכם.
מה תצטרך
- HTML
- תמונות
- jpg
- יישור תמונות
- נתיב
שלבים
- 1
שלב 1
כשאתם רוצים להכניס תמונה לדף האינטרנט שלכם, עליכם להשתמש בתגית . התגית היא תגית ריקה, כלומר אין לה תגית סוגרת ויש לה רק מאפיינים.
- 2
שלב 2
בכדי להגדיר תמונה עלינו לתת לתגית את המאפיין "src" (מהמילה source) שתגיד לדפדפן באיזה תמונה להשתמש ומהיכן לקחת אותה, מקור התמונה יכול להיות כל ספריה על המחשב\שרת או מאתר אינטרנט. לדוגמא:
-
- 3
שלב 3
<html>
<body>
<img src="http://www.bekaloot.co.il/images/logobeta.gif" />
</body>
</html>
- 4
שלב 4
במקרה כזה התמונה image.jpg, תוצג מספריית images באתר בקלות - bekaloot.co.il כמו כן, ניתן לשלוף קובץ הנמצא בספריה בה דף הHTML שאתם עובדים עליו כעת:
- 5
שלב 5
<img src="image.jpg">
- 6
שלב 6
ניתן להתייחס באופן יחסי למיקום בו נמצא דף הHTML שלכם לספריה בה נמצאת התמונה:
- 7
שלב 7
src="images/image.jpg" התמונה נמצאת בספריה תחת הספריה שבה הדף
src="../image.jpg" התמונה נמצאת ספריה אחת מעל לדף
src="../../image.jpg"התמונה נמצאת בספריה מעל לספריה שבה הדף
src="../images/image.jpg" התמונה נמצאת בספריה מעל ואז ספריה מתחת למיקום הדף
- 8
שלב 8
הסיבה שעדיף להשתמש בנתיבים יחסיים היא שאפשר לכתוב אתר במחשב המקומי ולאחר מכן להעלות אותו כמו שהוא (עם הספריות) בלי שהנתיבים ישתבשו.
- 9
שלב 9
במידה והתמונה לא מוצגת (מסיבות טכניות, מהירות גלישה נמוכה או שהתמונה פשוט הוסרה) תוכלו להציג טקסט אלטרנטיבי שיוצג במקום התמונה בעזרת מאפיין הalt (alternative)
- 10
שלב 10
<html>
<body>
<img src="Apple.gif" alt="I love apples!" />
</body>
</html>
- 11
שלב 11
כך זה יראה עם הטקסט החלופי.
- 12
שלב 12
זו כתיבה נכונה להכריז על גודל התמונה - רוחב ואורך (Width, height) בפיקסלים.
- 13
שלב 13
<img src="appletree.jpg" width="350" height="229">
- 14
שלב 14
בכדי למקם את התמונה במקומות שונים בדף תוכלו להשתמש במאפיין align, כאשר הערך bottom מציב למטה, הערך middle מציב באמצע והערך top מציב למעלה.
- 15
שלב 15
<img src="icon.gif" alt="icon" align="bottom" width="100" height="100"> <img src="icon.gif" alt="icon" align="middle" width="100" height="100"> <img src="icon.gif" alt="icon" align="top" width="100" height="100">
