יום שלישי ו בתשרי, 26 בספטמבר

לשרותכם מנוע חיפוש מבוסס גוגל הממוקד באתרים חינוכים.Beta

   : חפש ראשי

טובה תמונה אחת מאלף מילים

תמונה ומאפייניה (שיעור מס' 3)

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

טוב, אז איך מכניסים תמונה לאתר?
מאוד פשוט, ראשית צריך למצוא קובץ תמונה שאנו רוצים להכניס ולתת לו שם (באנגלית בלבד). כדאי שסיומת הקובץ תהיה GIF או JPG/JPEG . לא מומלץ להכניס תמונות בסיומת
BMP שזו סיומת של קבצים שצוירו בצייר של Windows מכיוון שבדפדפני Netscape לא ניתן לראות תמונות מסוג זה….
אחרי שמצאתם תמונה צריך לשים אותה באותה תיקייה שבה שמתם את קובץ HTML שייצרתם או תיצרו. רק לאחר שעשיתם את שני הצעדים הללו היכנסו לעריכת דף הHTML וכיתבו את התגית הבאה:

<img src="shimi.gif">


בקוד זה שלמעלה כתבתי GIF.SHIMI (זו התמונה שאני בחרתי) אתם צריכים לכתוב את השם המלא של התמונה שבחרתם. שימרו את הקובץ והפעילו את הדף HTML, מייד תיראו בדף את התמונה שבחרתם.
עכשיו אסביר קצת על התגית עצמה, כפי שראיתם אין לתגית זו תגית סוגרת אלא רק תגית פותחת וזה מהסיבה שהיא לא משפיעה על תוכן כל שהוא כמו תגיות עליהן למדנו בעבר. לדוגמא:
CENTER- זו תגית שיש לה גם תגית פותחת וגם תגית סוגרת מאחר והיא משפיעה על תוכן מסוים וממקמת אותו באמצע.
נחזור לתגית IMG, לתגית זו כמה מאפיינים חשובים.
1) src
2)width
3)height
4)alt
כעת נלמד בפירוט על המאפיינים,
הראשון - src המתייחס למקור התמונה, בו נכניס את שמה המלא של התמונה.

לדוגמא: shimi.gif, בתחילת ההסבר ציינתי שחייבים להכניס את התמונה לאותה תיקיה שבה נמצא קובץ ה- Html , אבל זו לא חובה…... לדוגמא ניתן ליצור בתיקיית האתר שלי תיקייה נוספת לדוגמא: images , לשם נכניס את כל התמונות, אבל אם נכתוב בדף HTML בתגית src רק את שם התמונה היא לא תימצא לעולם מאחר והמחשב יחפש אותה בתיקייה של הקובץ.
יש לזה פיתרון ! ניתן להכניס גם את המיקום של הקובץ בתוך התיקייה לתוך תגית src . לדוגמא המחשב יחפש בתיקייה של הקובץ ומשם ישלח לחפש בתיקיית images.
נכתוב זאת כך:
Images/shimi.gif
כך המחשב יחפש תיקיה שנמצאת באותה תיקייה של קובץ האתר בשם images ושם יחפש את התמונה. ניתן ליצור כך הרבה תיקיות לדוגמא , אצור בתוך תיקיית images
תיקייה בשם my שאליה אכניס את התמונות ואז המיקום ירשם כך:
Images/my/shimi.gif
התיקיות במיקום מופרדות ב"/".

המאפיינים width ו height הם המאפיינים הקובעים את גודל התמונה שתוצג לנו אם לא נכתוב אותם, התמונה תוצג בגודלה המקורי.
נשתמש בהם כך:

<img src="shimi.gif" width="100" height="150">


width מתייחס לרוחב ו height מתייחס לאורך, למאפיינים אלה נותנים ערך מספרי שהוא גודל התמונה בפיקסלים.
בדוגמא שנתתי האורך גדול יותר מהרוחב.

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

<img src="shimi.gif" alt="זה אני!">


זה הכל לשיעור זה, בשיעור הבא אלמד על אפשרויות מיוחדות בדף
כמו כותרות מובנות מראש, והכנת רשימות ממוספרות בקלות

ועד אז…, שלכם שימי גרסנר

דרך אגב נפתח פורום אינטרנט ומחשבים. אתם מוזמנים לפנות אלי בכל שאלה בנושא וכמובן גם בנושאי השיעור.


פורום מחשבים ואינטרנט

02.11.2002



השבוע בהיסטוריה
מורשת ישראל
אוכל ושאר ירקות
על הא ודע במדע
פנאי ובידור
הפסקה פעילה
בז שטח
מידענות
תיבת נח
המלצה על ספר
בניית אתרים


מנדלסון, משה

לפי תאריך :

כתוב לנו | ספר אורחים | אמנת פרטיות | פרסם בבז | הוסף אתר
כל הזכויות שמורות בז © 2000-2002 תנאי שימוש
האתר נבנה ומתוחזק עלידי אפוק