שעור שני
תמונות
מומלץ להשתמש בתמונות מסוג 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 מציין שלא תהיה מסגרת לתמונה.
מיקום התמונה יחסית לטקסט
- המאפיין 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&>
