Get Adobe Flash player
דף הבית גרפיקה באינטרנט שילוב גרפיקה בדף

האתר של רפאלי - גרפיקה, HTML

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

הדפדפן מתייחס אל התמונה באחד משני אופנים - תמונת רקע שאפשר לכתוב עליה או כאלמנט שכמוהו ככל אות, ספרה או תו אחר.

ההוראות משתנות כמובן בהתאם, וחלקן אף מועצמות באמצעות ה CSS, שמאפשר (במיוחד בתמונת רקע) יכולות שה-HTML הבסיסי לא תומך בן.

הוספת תמונה

התמונה מגיע אל המסך בשני שלבים:

שלב א'

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

שלב ב'

עם גמר קריאת קובץ ה HTML, הדפדפן מתחיל לייבא את האלמנטים הנוספים - תמונות, גרפיקה, קטעי שמע וחוזי (Video). התמונה תום במקומה על פי ההוראה - תמונת רקע או אלמנט עצמאי.

הוספת תמונה (אלמנט) - תג <img>

תג <IMG> משמש להוספת תמונה כאלמנט עצמאי המשולב בטקסט. לתג זה נלוות כמה תכונות המגדירות את כתובת קובץ התמונה, מידותיה, שם אלטרנטיבי ועוד:
תכונת SRC משמשת כהוראה לשם הקובץ והמסלול (path) המוביל למיקומו בשרת (התיקייה בה הוא נמצא). מקובל לרכז את כל תמונות הדף, ולעיתים של האתר כולו בתיקייה אחת, ולרוב שמה הוא images. ההוראה הבאה מעלה תמונה לדף. התמונה ממוקמת בהמשך לטקסט שלפניה ובאותה שורה (אן אינה גדולה מידי, כמובן): 

<p> התמונה הבאה ממוקמת בהמשך לטקסט <img src= "monkey.jpg" /> טקסט זה נמצא אחרי התמונה ובאותה שורה</p>

 והתוצאה:

תמונת ה gif המונפשת של השלד הליכה על קצה האצבעות ממוקמת בשורת הטקסט.

תכונות התג

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

מידות התמונה:

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

יש שתי סיבות לציון גדול התמונה:

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

    • לעיתים יש צורך לשנות את גודל התמונה. למשל בעת שרוצים ליצור תמונות אצבע (thumbnail). תמונת אצבע היא תמונה רגילה, שמידותיה הוגדרו לקטנות יותר (בהתאמה כמובן) מגודל התמונה המקורי.

ערכי הרוחב והגובה הן בפיקסלים, אך אין לציין את היחידות. 

טקסט אלטרנטיבי:

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

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

הטקסט האלטרנטיבי מבוצע באמצעות התכונה alt. התכונה מוגבלת ל 100 תווים באנגלית. אי לכך צריך שההסבר יהיה במינימום מילים למכסימום הסבר.

גם כאשר אין צורך בהוספת טקסט חילופי, למשל בגרפיקת "קישוט" באתר, רצוי להשאיר את התכונה alt אך במקום כתיבת הטקסט, צריך להשאיר שני זוגות גרשיים ללא רווח ביניהן: alt="". יש תוכנות הקראה שבמצב בו התכונה חסרה, תקראנה את שם הקובץ, וזה אינו מצב רצוי.

כותרת התמונה:

התכונה title, מאפשרת כתיבת שם קצר שיוצג על המסך באמצעות tool tip - כיתובית קטנה על רקע צהוב המופיע כאשר חץ העכבר עומד על התמונה.

הערה חשובה: יש דפדפנים, שבמצב ללא title, יציגו את הערך שב alt בתוך tool tip. מצב זה יצר תחושה מוטעית אצל בוני אתרים רבים, כאילו ניתן להסתפק ב-alt ולוותר על title. כאמור, זו שגיאה נפוצה שיש להימנע ממנה.

 

בדוגמא הבאה נראה את תמונת השלד במידות קטנות יותר (מחולקות ב-2 מהגודל המקורי) עם תוספת התכונות alt ו-title:

<p align="center">
<img src= "images/skeleton.gif" width= "90" height= "125" alt= "שלד שמשתדל ללכת בשקט ועל קצה האצבעות" title= "שלד חביב" />
</p>

והתוצאה:


מסגרת התמונה

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

את חשיבות תכונת המסגרת נראה בעיקר בפרק על קישורים בו יש משמעות לקביעה boredr="0"

היחס שבין התמונה והטקסט שלצידה (align)

היחס שבין תמונה לטקסט שלידה יכול להיות בשני אופנים:

1. תמונה בשורה אחת עם הטקסט

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

גובה הטקסט יחסית לתמונה נקבע ע"י תכונת align בתוך תג img. התכונה מקבלת את הערכים top, middle, bottom.  ברירת המחדל היא align="bottom"

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

align = "bottom"

align="middle

align="top"

טקסט שנמצא  בתחתית התמונה

טקסט שנמצא  בגובה המותניים

טקסט שנמצא  בגובה הכתפיים

2. גלישת טקסט - טקסט שעוטף את התמונה

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

קבע align="right"  להצבת התמונה בימין עם גלישת טקסט משמאל לה (ראו למטה בדוגמא עם כיפה אדומה).

קבע align="left" להצבת התמונה בשמאל כשהטקסט גולש מימינה.

כלל חשוב: הטקסט הגולש ייכתב בקוד תמיד אחרי תג ה- <img>

הפסקת גלישת הטקסט:

הטקסט הגולש מסביב לתמונה כולל בתוכו את כל הוראות הטקסט הרגילות - פיסקה, שבירת שורה, יישור וכו'. אבל הטקסט ימשיך לגלוש עד שיעבור את התמונה.

אבל מה קורה כשנרצה לעצור את הגלישה, ולקבוע שהטקסט אחרי נקודה מסויימת ירד אל מתחת לשורה?

לצורך זה נשתמש בהוראת "ביטול גלישה" בתכונת clear="" המצטרפת לתג <p> או <br />.

ערך התכונה clear יהיה זהה לערך ה align. אפ פקודת הגלישה היתה align="rught", פקודת הביטול תהיה: clear="right".

שוליים סביב התמונה

משהוגדרה תמונה שהטקסט גולש סביבה, נוצר גם הצורך להגדיר את גודל השוליים הריקים שסביבה. התכונות vspace ו-hspace קובעות את גודל המרווח בפיקסלים:

התכונה hspace קובעת את המרווח האופקי - דהיינו את הקטע הריק שמימין ומשמאל לאלמנט הגרפי.

התכונה vspace קובעת את המרווח האנכי שבין התמונה לבין הטקסט - משטח נקי מעל ומתחת לאלמנט.

 

בדוגמא הבאה, תג ה-img מופיע מייד לאחר הטקסט '...להזהר מ"הזאב הגדול והרע"...' שאינו גולש. הטקסט שיגלוש יהיה זה שייכתב לאחר תג img. הדוגמא כוללת גם את גודל השוליים סביב התמונה. ההוראה בדוגמא היא:

<p>...להזהר מ"הזאב הגדול והרע".</p>
<p><img src="images/site/riding-hood.gif" align="right" hspace="5" vspave="5"  width="125" height="125" />
בדרך היא אכן פגשה בזאב הרע וזה השתוקק לאכלה...</p>

והתוצאה:

כיפה אדומה

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

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

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

"סבתא, למה זה אזנייך ארוכות כל-כך?" - "כדי לשמוע אותך טוב יותר, יקירתי" ענה הזאב.

"ולמה עינייך גדולות כל-כך?" - "כדי לראות אותך טוב יותר, יקירתי".

"ולמה פיך גדול כל-כך ושינייך חדות כל-כך?" - "כדי לטרוף אותך!" ענה הזאב, זינק ובלע את כיפה אדומה.

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

 

 לסיכום גלישת הטקטס, לפניכם טבלה המסכמת את ערכי תכונת align והשפעתן על התמונה והטקסט: 

התמונה בשורה אחת עם הטקסט. השורה הבאה תהיה מתחת לתמונה.

align="bottom"

טקסט בתחתית התמונה (ברירת המחדל)

align="middle"

טקסט במחצית גובה התמונה

align="top"

טקסט בגובה כתפי התמונה

טקסט גולש סביב התמונה

align="right"

התמונה בימין, והטקסט משמאלה

align="left"

התמונה בשמאל, והטקסט מימינה

 

תרגול

בחן את קובץ הדוגמא והבן אותו.

הורד 3 תמונות מהאינטרנט ושמור אותה במחיצה חדשה: Images

צור קובץ . קרא לו images.html

הוסף לקובץ טקסט, כותרת וצבע רקע.

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

שנה את ערך התכונה Width ובחן את התוצאה.

שנה את ערך התכונה Height ובחן את התוצאה.

שנה את ערך title ובחן את התוצאה.

הוסף תמונה חדשה, בצד ימין של המסך.

הוסף שתי מילים מיד אחרי התמונה (עדיין באותה שורת טקסט, ללא < br> או <p>)

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

הוסף תמונה חדשה. הוסף מיד לאחריה טקסט ארוך (לפחות כמה שורות. אפשר לכתוב טקסט קצר, ואז בהעתק/הדבק לשכפלו הרבה פעמים).

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

שנה את הגלישה כך שהתמונה תעבור לשמאל.

הוסף פקודת יישור דו צדדי לטקסט (<p align="justify">). שים לב שהפקודה צריכה להיות לפני התמונה. בחן את התוצאה.

הוסף פקודות ריווח בין הטקסט והתמונה. תן רווח של 40, שנה ל- 20 ואחר ל – 10.

אל השיעור הקודם אל השיעור הבא