Get Adobe Flash player
דף הבית כתיבת טקסט עיצוב הגופן

 

HTML - עיצוב הגופן

 

הערות כלליות לכתיבת טקסט בדפי HTML

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

 

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

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

 

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

 

כשמדובר בשליטה בתווים עצמם, בודדים או כמילים, משתמשים בתג <font>.

תג <Font>

הערה חשובה: תג זה עומד להתבטל, וכבר אינו בשימוש בשפת XHTML. הנחיות עיצוב הטקסט מבוצעת כיום באמצעות CSS

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

 

לתג <font> יש שלוש תכונות ראשיות המאפשרות שליטה על סוג הגופן, צבעו וגודלו.

  • FACE - להגדרת סוג הגופן
  • SIZE - להגדרת גודל הגופן
  • COLOR - להגדרת צבע הגופן

קביעת סוג גופן

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

הערה: "סוג הגופן" אינו עובד עבור שיטת הקידוד הישנה: Hebre-Visual.

דוגמא להגדרת גופן:

<font face="Arial">זהו גופן מסוג Arial</font>

קביעת גודל גופן

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

גודל מוחלט נעשה ע"י הגדרת ערך הנע בין 1 ל-7. גודל ברירת המחדל (במקרה ולא מציינים במיוחד גודל גופן) הוא 3.

הגדרת גודל גופן באופן מוחלט:

<font Size="1"> גופן זה קטן מאוד</font>

<font Size="7">גופן זה גדול מאוד</font>

הגדרת גודל הגופן באופן יחסי:

באומרנו "שינוי יחסי", אנו מתכוונים לשינוי גודל הגופן באופן יחסי אל גודל ברירת המחדל של המחשב.

ברירת המחדל היא בדרך כלל size="3" ושינוי הערך יעשה יחסית לגודל זה. התכונה size="+2" תציב את הגודל כאילו היה size="5", והתכונה size="-2" תגרום לתוצאה size="1".

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

קביעת צבע

תכונת COLOR משמשת להוספת צבע לגופן. תכונה זו משמשת גם תגים אחרים כפי שנראה בהמשך. הצבע מוגדר בשני אופנים. האחד ע"י מתן שם (red, blue, green) וכו'. והאופן השני ע"י מתן ערך.

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

דוגמא להגדרת צבע באמצעות שם:

<font color ="red">טקסט אדום</font>

דוגמא להגדרת צבע באמצעות ערך הקסאדצימלי:

<font color="#ff0000" >טקסט אדום </font>

שילוב תכונות בתג:

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

<font face="Arial" size="7" color="#0000ff">

הגופן שנוצר הוא Arial, גדול, ובצבע כחול.

<font face="Tahoma" size="4">

הגופן הוא Tahoma בגודל בינוני

<FONT color="red" face="Times New Roman" >

הגופן הוא Times New Roman בצבע אדום

שינוי ברירת המחדל של הטקסט:

לעיתים נוצר צורך להגדיר אזור בתוך הקובץ שעליו חלים חוקי ברירת מחדל אחרים. הגדרת האזור והתכונות החדשות נעשים ע"י תג <Basefont>. זהו תג מכולה, ששומר על עיצוב חדש בתחומו הוא בלבד.

דוגמא לשימוש:

<basefont size="2" face="tahoma" color="#ooooff">

...

...

...   

</basefont>

ברירת המחדל של הטקסט באזור שבין פתיחת התג וסגירתו מוגדרת ל: גודל 2, תצורה: Tahoma, צבע: כחול.

 

שינויים בטקסט באמצעות תג <Font> ישפיעו מקומית, וסגירתו תחזיר את הטקסט אל ברירת המחדל החדשה, עד אשר התג יבוטל.

 

תרגול:

תרגיל 1

צור קובץ HTML, קרא לו Font.html. כתוב 3 שורות טקסט, והחלף בחלקים שונים של הטקסט את:

  • גודל אותיות
  • צבע
  • צורת אות

תרגיל 2

בקובץ שבנית, קבע ברירת מחדל חדשה (Basefont) ובדוק את השפעתה על הטקסט.

תרגיל 3

צור את המילה הבאה. האות המרכזית היא בגודל 7. הגודל יורד בהדרגה מימין ומשמאל, תוך החלפת הצבע.

Jerusalem

תרגיל 4

חזור על התרגיל האחרון, ובצע זאת באמצעות תגים מקוננים (רמז, ההגדרה של האות u למשל, תשמש גם האות a.

אל השיעור הבא