שעור שני

תמונות

מומלץ להשתמש בתמונות מסוג jpeg או
gif  או png
(
ניתן להוריד אותן מאתרי אינטרנט ע”י קליק
ימני על התמונה ושמירת תמונה בשם),
לא להשתמש
בתמונות מהצייר (עם הסיומת bmp).
אתרים להורדת תמונות לאתר:

  http://www.cksinfo.com/index2.html

הוספת תמונה:

  •  התג <img> משמש לציון תמונה על גבי הדף.
  • זהו תג מסוג placeholder, אין לו תג סוגר.
  •  הדפדפן ימקם את התמונה במקום שבו מופיע התג  <img>.
  • המאפיין src מציין את כתובת ה-url של קובץ התמונה.

<img src=”url”>

  • ה- url מצביע על המיקום שבו נמצאת התמונה.
    אם לדוגמה, התמונה נקראת photo.gif והיא נמצאת בתיקייה images, נכתוב
    כך:

<img src=”images/photo.gif”>

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

מסגרת לתמונה

  • המאפיין  border  משמש להגדרת עובי המסגרת של התמונה.
  • border=0 מציין שלא תהיה מסגרת לתמונה.
<img src=”photo.gif” border=”2″>

מיקום התמונה יחסית לטקסט

  •  המאפיין align מציינת את מיקום הטקסט ביחס לתמונה.
  • align=”top”   מציין כי הטקסט יופיע בקצה העליון של התמונה.
  • align=”bottom”   מציין כי הטקסט יופיע בקצה התחתון של התמונה.
  • align=”middle”   מציין שהטקסט יופיע במרכז התמונה.
  • align=”left”   מציין שהטקסט יופיע משמאל לתמונה.
  • align=”right”   מציין שהטקסט יופיע מימין לתמונה.

<img src=”photo.gif”
align=”left”>
זהו הטקסט שיופיע משמאל לתמונה

דוגמאות:


http://www.w3schools.com/html/

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

  • המאפיינים hspace ו- vspace  מציינים את המרווח  שמסביב
    לתמונה, מרווח אנכי ומרווח אופקי.
  • hspace  מרווח אופקי
  • vspace  מרווח אנכי

<img src=”photo.gif”
hspace=”3″ vspace=”2″>

מאפייני תמונה, גובה ורוחב

  • המאפיינים  width ו-  height  מציינים את גובה
    ורוחב התמונה.
    הערכים הם בפיקסלים. ניתן לציין ערכים באחוזים.

<img src
=”photo.gif”  width=”150″ height=”50″>
הערכים בפיקסלים

<img src =
“photo.gif” width=”100%height=”100%“>

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

תמונת רקע

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

<body
background=”photo.gif”> 

התג עם
כל המאפיינים:

לא כל המאפיינים חייבים להופיע.

<img src=“photo.gif”
align=”left” alt=”תמונה” border=”1″ height=”20″ width=”50″ hspace=”2″
vspace=”3″ >

סוגי תמונות

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

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

JPG

GIF

תכונה

תומכת ביותר מ16.7
מיליון צבעים
.

תומכת ב256 צבעים
מכסימום
.

צבע

אינה מאפשרת אנימציה.

מאפשרת אנימציה.

אנימציה.

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

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

דחיסה

יש להמתין לטעינה מלאה.

ניתן לצפות במהלך
הטעינה
.

צפיה

אינה מאפשרת שקיפות.

מאפשרת שקיפות.

שקיפות

טקסט נגלל
התג marquee  משמש להצגת טקסט נגלל על גבי הדף.

<marquee >
זהו הטקסט הנגלל </marquee>

המאפיינים לתג marquee:
behavior מציין את סגנון הגלילה. האפשרויות הן:
scroll – מתגלגל.
slide – גולש לכיוון אחד ונעצר.
alternate – גולש הלוך חזור.

direction מציין את כיוון תנועת הטקסט. האפשרויות הן:
left, right, up, down

bgcolor מציין את צבע הרקע של אזור הטקסט.
loop מציין את מספר הפעמים של חזרות התנועה.
scrolldelay מציין את זמן ההמתנה ב- milliseconds בין תנועה לתנועה.
scrollamount מציין את מספר הפיקסלים להזזת הטקסט בכל תנועה.

– מאפיינים נוספים הזהים לתגים אחרים, הם:
height, width, hspace, vspace

דוגמה:

<marquee
behavior=”scroll” direction=”down” height=100% width=15% bgcolor=”white”
loop=2 scrolldelay=”2″ scrollamount=”2″ hspace=”4″ vspace=”4″>זהו הטקסט
הנגלל</marquee&>

חזרה לראש הדף

לשעור הבא