Get Adobe Flash player
דף הבית בסיס השפה עיצוב ה- Body

 

HTML - עיצוב <body>

 

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

 

צבע ברקע המסמך

תג <<body> מאפשר הוספת צבע רקע למסמך כולו ע"י תכונת bgcolor. בדוגמא שלפנינו יקבל המסך צבע רקע בגוון כחול בהיר:

<body bgcolor="lightblue">

תמונה ברקע המסמך

ניתן לשבץ תמונה כתמונת רקע. התכונה לכך היא background. התמונה מוצבת על המסך ונעה כלפי מעלה ומטה עם הקובץ כולו. על מנת שלא יווצר מקום ריק, מסודרת התמונה כריצוף כך שהרקע יהיה תמיד מכוסה בתמונה. את שם התמונה יש לכתוב עם כל המסלול – Path (ראה גם בפרק הוספת תמונה). את התמונה ניתן להוסיף בלי קשר לצבע הרקע. אם התמונה מוגדרת כ"שקופה" בצבעי הרקע שלה, הרי שצבע הרקע של המסך יראה דרכה.

 

הוספת התכונה bgproperties ואפיונה ע"י fixed תנעל את התמונה למקומה בעת שהמסמך כולו נגלל כלפי מעלה או מטה. תכונה זו מצורפת בדרך כלל, בעת שימוש בתמונה כ"לוגו" שברקע או כתמונת נוף.

<body bgcolor="lightblue" background="*.gif" bgproperties="fixed">

צבע לטקסט כברירת מחדל

הוספת תכונת text קובעת צבע ברירת מחדל לכל הטקסט שבמסמך.

<Bodybgcolor="lightblue" background="*.gif" bgproperties="fixed" text="blue">

תג <body> כולל גם תגיות לשליטה על צבע הקישורית. להסבר, עבור אל פרק הקישורים.

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

שולי הדף

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

התץכונה topmargin מגדירה את השוליים העליונים, התכונה leftmargin את השוליים השמאליים ו- rightrmargin את הימניים.

תג <body> בו השוליים נמחקו לחלוטין ייראה כך:

<body bgcolor="lightblue" background="*.gif" bgproperties="fixed" text="blue" topmargin="0" leftmargin="0" rightrmargin="o">

עברית באינטרנט

עריכת טקסטים בשפות השמיות (עברית, ערבית) שונה מהכתיבה בשפות אחרות בשני אופנים: סוג הגופן הייחודי וכיוון הכתיבה - מימין לשמאל.

 

סוג הגופן הוא בעייה לה שותפות שפות רבות, כולל שפות שאינן שמיות, והפתרון לה הוא באמצעות הוראת קידוד המסמך (ראו בפרק על תגי meta).

 

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

 

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

 

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

 

פתרון זה נעשה ע"י הוראה "חזקה" למחשב: "עבוד מימין לשמאל". את הפקודה ניתן לשלב במקומות רבים בדף ה HTML, ועוצמתה משתנה על פי מיקומה.

 

התכונה שעושה זאת היא תכונה ה dir ויש לה שני ערכים rtl (ימין לשמאל או Right To Left) ו- ltr (שמאל לימין או Left To Right).

 

כאשר נרצה להשפיע על הדף כולו, נוסיף את התכונה אל תג ה body. במיקום זה התכונה תגרום להיפוך מלא של הדף (כולל הגלגלת שתעבור מצדו הימני של המסך - לשמאלו).

 

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

<body dir="rtl">
אל השיעור הקודם אל השיעור הבא