Inline Images

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

  הקוד הסטנדרטי לשיבוץ תמונות הוא :

<IMG src="URL"  alt="Alternate Text">  

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

<IMG src="/Icons/WWWlogo48.gif" Alt="[WWW]">  

התוצאה של הדוגמה לעיל היא :    

תמונות לעיתים תכופות משובצות בתוך עוגנים (anchors ) כך שהקלקה עליהם מובילה לקישור למסמך אחר (hyperlink )

לדוגמא ,  הקוד :

<a href="http://WWW.Stars.com/">

 

דוגמא נוספת :
 

<IMG src="/Icons/WWWlogo48.gif" Alt="[WWW]"></a>  

והתוצאה היא  :   [WWW]

 

IMAGES

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

 

<a href = "mailto:yair_fine@yahoo.com">
<Img src = "inline images 2.gif"
width = 108
height = 44
border = 0
hspace = 16
alt = "Graphics"
align = left ></a>

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

להלן רשימה של מאפיינים עיקריים שניתן להכניסם לתוך תו img :  

Src  

כתובת של התמונה לשיבוץ

Alt  

תאור בשביל דפדפנים שלא תומכים בתמונות

Align

 יישור אופקי או אנכי (top, middle, bottom, left or right)

Height  

 גובה בפיקסלים

Width  

רוחב בפיקסלים

Border  

רוחב מסגרת לקישור בפיקסלים

space  

מרווח אופקי בין התמונה לטקסט בפיקסלים

Vspace  

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

Usemap  

שימוש במפת תמונה , צד לקוח client-side image map

Ismap  

שימוש במפת תמונה ,   צד שרת     (server-side image map)   

מאפיין ה align

מאפיין ה align או "ישור" מפרט את היחס בין התמונה לטקסט הסובב אותה המאפיין יכול לקבל את הערכים : left, right, top, middle, bottom.

לדוגמא , הקוד  

<IMG SRC="/Icons/WWWlogo48.gif">

מציג את התמונה .

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

דוגמא שניה : הקוד  

<IMG SRC="/Icons/WWWlogo48.gif"  alt="WWW" align=left>

 

מציג את הלוגו בצד שמאל של הדף    .

דוגמא שלישית :  

<IMG SRC="/Icons/WWWlogo48.gif"  alt="WWW" align=right>

 

 מציג את הלוגו בצד ימין של הדף

דוגמא רביעית :    

<IMG SRC="/Icons/WWWlogo48.gif"  alt="WWW" align=top>  

מציג את הלוגו כאשר הוא מיושר עם הטקסט שמסביבו עם הגבול העליון שלו.

דוגמא חמישית :

<IMG SRC="/Icons/WWWlogo48.gif"  alt="WWW" align=middle>  

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

מאפיין ה alt

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

הקוד הסטנדרטי לכך הוא :

<IMG SRC="/Icons/WWWlogo48.gif"  alt="text">

מאפיין ה border

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

דוגמא :  

<a href="/index.html">

<IMG src="/Icons/WWWlogo48.gif"  Alt="[WWW]"></a>

            קוד זה מציג את [WWW] עם מסגרת שמדגישה את התמונה .

דוגמא שניה:  

 

<a href="/index.html">
<IMG src="/Icons/WWWlogo48.gif" border=0 Alt="[WWW]"></a>

קוד זה מציג את [WWW] ללא מסגרת שמדגישה את התמונה. הלוגו עדיין מהווה קישור למרות שהוא נראה כתמונה ללא קישור .

מאפיין גובה ורוחב

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

<IMG SRC="/Icons/WWWlogo48.gif" height=48 width=48>

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

חזרה לדף הראשי