 |
| |||||||||||
|
|
בניית אתרים - חלק שלישי
עד היום למדנו כיצד לכתוב דפי אינטרנט
תוך כדי שינוי גודל הטקסט וצבעו. השבוע נלמד כיצד להוסיף תמונות, מסגרות לתמונות,
רקעים ועוד.
אנו ממשיכים כעת מהנקודה בה הפסקנו
בשבוע שעבר. מי שפספס את המדור מוזמן להגיע אלינו על מנת לקבלו מודפס.
ראשית בואו ונוריד מספר תמונות על מנת
שנוכל לשלבם בדף האינטרנט שלנו.
התחברו לאינטרנט ורשמו את הכתובת הבאה:
www.gokart.co.il/comp4u/img.zip
ייפתח לכם חלון הורדה, לאחר שירד הקובץ
פתחו אותו ושמרו בתיקיית העבודה שלנו את שלושת קבצי התמונה.
כעת ניצור באמצעות פנקס הרשימות קובץ HTML
חדש:
<HTML>
<HEAD>
<TITLE>
My First HTML Page
</TITLE>
</HEAD>
<BODY>
<FONT COLOR=RED>
Hello People <BR>
</FONT>
<IMG SRC=”comp.jpg”>
<FONT COLOR=BLUE>
COMP 4 U <BR>
</FONT>
<IMG SRC=”msi.jpg” BORDER=4>
<FONT SIZE=2>
MSI <BR>
</FONT>
<IMG SRC=”gf.jpg” ALIGN=MIDDLE>
<FONT COLOR=PINK SIZE=6>
Ge Force <BR>
</FONT>
</BODY>
</HTML>
בואו נבחן את התוצאה: שמרו את הקובץ בשם
page005.htm והריצו אותו באמצעות הדפדפן.
כפי שניתן לראות אנו מקבלים כעת תמונות
בנוסף לטקסט.
כדי למקם תמונות יש להשתמש בתגית שנקראתSRC IMG.
שימו לב שתגית זו באה ללא תגית סגירה.
כדי למקם תמונה רושמים IMG SRC=
ואז מוסיפים בגרשיים את שם קובץ התמונה שאותו ברצוננו להוסיף לדף האינטרנט שלנו.
חשוב לזכור שהמחשב מתייחס אל התמונה
כטקסט לכל דבר. ולכן כשנרצה להתחיל שורה חדשה נצטרך להשתמש בתגית <BR> .
תמונת הלוגו של MSI מופיעה תחומה בתוך מסגרת. אם
נביט בשורת הקוד:
<IMG SRC=”msi.jpg” BORDER=4>
נראה שהוספנו פקודה חדשה: BORDER.
פקודה זו נותנת הוראה לדפדפן לתחום את קובץ התמונה למסגרת. המספר שמימין לפקודה
מציין את עובי המסגרת.
פקודה חדשה נוספת היא שבה השתמשנו היא ALIGN:
<IMG SRC=”gf.jpg” ALIGN=MIDDLE>
פקודה זו נותנת הוראת הצמדה של אובייקט לאובייקט, במקרה זה של
אובייקט התמונה אל הטקסט הסמוך אליו. כאשר השתמשנו באפשרות MIDDLE הרי שהטקסט הסמוך לתמונה
הופיע במקביל למרכז התמונה.
הוספת רקע
לכל המסמך:
עד עכשיו עבדנו והרקע של הדף היה לבן.
כעת נלמד איך לשנות את צבע הרקע לצבע אחר ואיך להוסיף תמונה שנבחר כרקע.
לפני שנתחיל חשוב לזכור שצריך שצבע הרקע
יתאים לצבע הטקסט שבדף ולא לבחור רקע שבו הטקסט לא ייראה בכלל או ייראה עמום.
כדי לשנות את רקע הדף נערוך את תגית
הפתיחה BODY כך:
<BODY BGCOLOR=PINK>
נשמור את הקובץ בשם page006
ונבחן את התוצאה.
שינינו את הרקע לצבע ורוד וכתוצאה מכך
איננו יכולים לראות את הכיתוב Ge Force, הסיבה היא שגם את הטקסט Ge
Force כתבנו בצבע
ורוד.
חשוב לוודא שלא נשתמש באותו צבע או בצבע
דומה כרקע וכטקסט. כעת מה שעלינו לעשות זה לשנות את צבע הטקסט מורוד לצבע אחר או
לחילופין לבחור רקע בצבע אחר.
ניתן לשלב כל צבע רקע שרוצים ע"י
כתיבת שמו באנגלית. ישנה אפשרות מתקדמת יותר של בחירת כל גוון אפשרי אבל על זה
נדבר בהמשך.
אם ברצונינו להוסיף תמונה שתשמש כרקע
לדף נכתוב את תגית ה BODY כך:
<BODY
BACKGROUND=”comp.jpg”>
נשמור את הקובץ בשם page007 ונבחן את התוצאה.
ניתן לראות שהתמונה שבחרנו מופיעה כרקע
על כל הדף.
מה שחשוב תמיד לשים לב זה עניין המעבר
והשילוב בין הצבעים. רצוי לבחור ברקעים בעלי גוונים בהירים יחסית על מנת שלא יבלעו
את הטקסט והתמונות שבדף עצמו.
עד לשבוע הבא אתם מוזמנים להוסיף תמונות
חדשות וטקסט ולהשתעשע עם החלפת רקעים ותמונות.
במידה ונתקלתם בבעיות מומלץ להעביר
אלינו את הקבצים יחד עם תיאור הבעיה במייל.
בהצלחה.