הקדמה
- איך להפוך את הדף לעברית.
- כותרות (<h1> - <h6>).
- קו חוצץ (<hr />).
- ירידת שורה (<br />).
- שילוב בין CSS ל-HTML עם התג <span>.
- פקודות עיצוב ב-CSS.
- איך לעשות רשימות עם תבליטים ורשימות ממוספרות.
עד עכשיו עשינו רק מלל, מלל ומלל.
אם נרצה לגוון עם תמונה?
זה ממש פשוט! נשתמש בתג <img> (אין תג סוגר) בתבנית הבאה:
קוד HTML:
<img src="The source" alt="The Alt" />
<img
src="The source"
alt="The Alt"
כלומר אם התמונה לא נמצאה אז זה יציג מה שכתוב.
בוא נעשה דוגמה, בוא נוסיף תמונה לאתר. ניקח לדוגמה את התמונה הזאת:
אם נכנס לפה דרך הדפדפן נראה רק תמונה בצד שמאל.
בשביל להוסיף את התמונה נרשום כך ע"פ התבנית:
קוד HTML:
<img src="http://www.iatraf.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="iatraf.co.il" />
נעשה דוגמה, נרשום כך:
קוד HTML:
<img src="http://www.iatra.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="iatraf.co.il" />
http://www.iatra.co.il
עד כה הוספנו תמונות מוכנות, לא תמונות שלנו.
אם אני רוצה לעשות תמונה ולשים אותה באתר?
זה ממש פשוט, ניקח תמונה. לדוגמה נקרא לתמונה "MyPic.png" (שימו לב לפורמט).
נשים את התמונה בתיקייה שבוא נמצא הקובץ HTML שלנו וב-src נרשום כך:
קוד HTML:
<img src="MyPic.png" alt="My Pic!" />
צריך לרשום את שם התמונה "MyPic", נקודה "." ואז את שם הפורמט "png". ברור שזה יכול להשתנות, תלוי בתמונות.
אם אנחנו רוצים להיות יותר מסודרים ולהוסיף תיקייה רק של תמונות, נגיד שקוראים לתיקייה "images" ושם נמצאת התמונה שלנו.
נגדיר את זה כך:
קוד HTML:
<img src="images/MyPic.png" alt="My Pic!" />
הוספתי לפני שם התמונה את שם התיקייה (images) וסלאש ( / ) שאומר שזה נמצא בתוך התיקייה.
שימו לב
אם קראתם לתמונה A.png, אתם לא יכולים "לקרוא" לה "a.png" בשרתים מסויימים התמונה תחשב כלא נמצאה. אז עדיף לרשום את השם במדויק.
ברור?
רשימה לפורמטים(png וכ'ו) הנפוצים ביותר:
- jpg, jpeg - שניהם אותו דבר, זה לא משנה
- gif
- bmp - רק לבעלי ווינדוס
- pcx
- tift
- dib
- eps
- tga
תזכרו - בגלל של-img אין תג סוגר אז אנחנו רושמים לפני הסגירה את הסלאש ( / )!
הגדרת אורך ורוחב לתמונה
יש לכם תמונה, אלה מה? היא גדולה מידי! (או קטנה מידי) ואתם רוצים לשנות את זה לגודל מסויים.
בשביל זה יש את המאפיינים width ו-height, נשים אותם בקוד כך:
קוד HTML:
<img src="Source" alt="ALT" width="Image Width" height="Image Height" />
אפסר לרשום בשדות אך ורק מספרים, וערך מספר. כלומר יחידות מידה.
היחידות מידה שאפשר לשים:
- px - פיקסלים, אורך(או רחב) מדויקים.
- cm - סנטימטרים, אורך(או רחב) מדויקים.
- % - אחוז, כמה מאורך(או רוחב) הדפדפן.
קוד HTML:
<img src="images/MyPic.png" alt="My pic!" width="200px" height="200px" />
פשוט לא?
הוספת קישורים לאתר
עד כה, יש לנו תמונות. מלל יפה.
אבל מה עם קישורים? יש לנו רק דף אחד!
בשביל לעשות קישור, נצטרך להשתמש בתגית <a> (יש תג סוגר)
נשתמש בה כך:
קוד HTML:
<a href="http://www.SomeWebsite.com">webSite</a>
בין שני התגים יוצג המלל, מה שילחצו עליו וזה ייכנס.
שימו לב, לכל קישור צריך לשים קודם כל פרוטוקול (http כל עוד זה מקשר לאתר שלא קשור אליכם).
לדוגמה קישור שייכנס לגוגל:
קוד HTML:
<a href="https://www.google.co.il/">Google</a>
קוד HTML:
<a href="http://he.wikipedia.org/wiki/%D7%A2%D7%9E%D7%95%D7%93_%D7%A8%D7%90%D7%A9%D7%99">wikipedia</a>
קוד HTML:
<a href="http://www.iatraf.co.il/">Atraf</a>
נעשה דוגמה, ניצור עוד קובץ HTML נקרא לו "test.html" (כמו שעשינו בשיעור הראשון).
נשים אותו בתיקייה של הקובץ הראשי וניצור בקובץ הראשי קישור אליו.
בשביל זה נרשום כך:
קוד HTML:
<a href="test.html">test</a>
אותו דבר אפשר גם בתמונות, לדוגמה נעשה קישור לתמונה כך:
קוד HTML:
<a href="images/MyPic.png">MyPic</a>
הוספת קישור לתמונה
עד כה, שמנו רק תמונות וקישורים בנפרד. אך אם אנחנו רוצים לעשות תמונה כקישור, כלומר כך:
אם נלחץ על התמונה נגיע לאטרף ^
זה פשוט מאוד בשביל זה נרשום כך:
קוד HTML:
<a href="http://www.iatraf.co.il"><img src="http://www.iatraf.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="atraf" /></a>
קישור למייל
כנראה שאם אתם גולשים הרבה באינטרנט, רציתם לראות איך עושים קישור למייל, לדוגמה זה:
Mail@explame.com
אם תלחצו זה יפתח את ה-Outlook Express.
בשביל דבר כזה נכתוב:
קוד HTML:
<a href="mailto: Mail@explame.com">My Mail</a>
זה פשוט אומר לפתוח את האימייל על הכתובת שבחרנו.
פשוט מאוד
טריק נחמד
אולי לא תשתמשו בזה הרבה, אבל כמו שעשינו שליחה למייל, אפשר גם עם סקייפ:
קוד HTML:
<a href="Skype: UserName">Skype</a>
תוצאה:
skype: UserName
הפעם אין שיעורי בית!
לשיעור הקודם - שיעור מס' 3 לחצו כאן.שאלות על HTML ו-CSS בפורום שפות צד לקוח.
הודעת מערכת