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

 

HTML - עיצוב טקסט כללי

 

תגים לעיצוב מתקדם של הטקסט

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

 

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

 

נהוג לחלק את התגים לפי קבוצות, וכך נעשה גם כאן.

 

תגי עיצוב טקסט

תג <bdo>

תג להיפוך כיוון הכתיבה ממצב ימין לשמאל לשמאל לימין ולהיפך. התג מיועד לשימוש בתוך שורה בתוך פסקה. התכונה להיפוך הטקסט היא התכונה הרגילה למטרה זו dir="rtl" לכתיבה מימין לשמאל ולהיפך - dir="ltr" בכתיבה משמאל לימין. ראו בתוצאות של הדוגמא הבאה את שינוי המקום של סימן הקריאה

תוצאההוראה
ישראל הוא מקום נהדר. a lovely place! אומרים התיירים ישראל הוא מקום נהדר. a lovely place! אומרים התיירים
ישראל הוא מקום נהדר. a lovely place! אומרים התיירים ישראל הוא מקום נהדר. <bdo dir="ltr">a lovely place!</bdo> אומרים התיירים

 

תגי <b>, <strong> ו- <i>, <em>

שתי קבוצות תגים אלו מיועדים להדגשת טקסט. הראשונה בעיבוי הטקסט והשנייה בהטייתו.

 

תוצאההוראה
הטקסט הבא כתוב בכתב מוטה. כאן כבר לא הטקסט הבא כתוב <i>בכתב מוטה</i>. כאן כבר לא
הטקסט הבא כתוב בכתב מוטה. כאן כבר לא הטקסט הבא כתוב <em> בכתב מוטה </em>. כאן כבר לא
הטקסט הבא כתוב בכתב מעובה. כאן כבר לא הטקסט הבא כתוב <b> בכתב מעובה </em>. כאן כבר לא
הטקסט הבא כתוב בכתב מודגש. כאן כבר לא הטקסט הבא כתוב <strong> בכתב מודגש </strong>. כאן כבר לא

הערה חשובה:

בין שני הזוגות קיים הבדל עקרוני.

בעוד שהתגים <b> ו- <i> מעבים (bold) ומטים (italic) את הטקסט ותו לא, שני התגים האחרים <strong> ו- <em> מתייחסים אליו כאל "טקסט חשוב". המשמעות היא שניתן לחבר קטעים אלו לכלים אחרים (קיימים או עתידיים) שיתנו לו משמעות נוספת. למשל, בתוכנות הקראה (לעיוורים), תג <strong> משמש להגברת הקול. בעתיד, יוכלו הדפדפנים לתת משמעויות נוספות לטקסט "חשוב" מעבר לעיבוי או הטייה בלבד.

 

תגי <big> ו- <small>

תגים להגדלת או הקטנת הטקסט בקפיצה אחת. התגים הללו נעים בתחום שמוגדר ע"י תג ה <font> דהיינו לא גדול יותר מגודל 7 ולא קטן מגודל 1.

תוצאההוראה
טקסט רגיל, גדול יותר, וחזרה רגיל טקסט רגיל, <big>גדול יותר</big>, וחזרה רגיל
טקסט רגיל, קטן יותר, וחזרה רגיל טקסט רגיל, <small>קטן יותר</small>, וחזרה רגיל


תגי <del> ו- <ins>

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

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

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

תוצאההוראה
המחיר הישן 100 ש"ח ומחיר המבצע החדש 1,000 ש"ח למשך החודש הקרוב בלבד! המחיר הישן <del> 100 ש"ח </del>
ומחיר המבצע החדש
<ins> 1,000 ש"ח </ins>
למשך החודש הקרוב בלבד!


תגי <sup> ו- <sub>

תגים לביצוע כתב עילי וכתב תחתי.

תוצאההוראה
נוסחת המים היא H2O נוסחת המים היא H<sub>2</sub>O
זוית ישרה היא בת 900 זוית ישרה היא בת 90<sup>0</sup>


תגים לשימוש עבור הצגת קטעי קוד בתוך ה HTML

קבוצת התגים הבאה מיועדת להצגת התווים בתצורת אותיות ייחודית:

תוצאהתג
כתב להצגת קוד מחשב Goverment of Israel לעומת: Government of Israel <code>
כתב ליצירת דוגמא ייחודית: "ממשלת ישראל" <samp>
כתב כדוגמת מקלדת: "ממשלת ישראל" <kbd>
כתב להדגשת משתנה מקומי: "קוד ייחודי" <var>
כתב של מכונת דפוס: "מכונת דפוס מכנית" <tt>
העתקת הקוד הכפי שנכתב בעריכה כולל הרווחים:
 חודש ינואר         חודש פברואר
<pre>

 

אל השיעור הקודם אל השיעור הבא