עיצוב טקסט בעזרת שפת HTML5
תגים לעיצוב טקסט
| תג | תיאור |
|---|---|
| <b> | משמש לצורך קבלת טקסט עבה ומודגש (bold) |
| <del> | נסמן חלקים בטקסט שאנו רוצים שהקורא יידע שמחקנו אותם. מבחינה ויזואלית תג זה יגרום לקו חוצה על כל המילים שבין הרישא לסיפא שלו. |
| <em> | בעזרת תג זה נדגיש חלקים בטקסט שאנו רוצים להבליט. מבחינה ויזואלית תג זה יגרום לכל המילים שבין הרישא לסיפא שלו, להיראות מודגשות ושונות מן הטקסט הרגיל שסביבן. |
| <i> | טקסט שיימצא בין הרישא לסיפא של תג זה יוצג על ידי הדפדפנים השונים כאשר הוא מוטה (italics). |
| <ins> | תג זה ישמש אותנו כדי לשלב חלקי טקסט חדשים למסמך קיים ובצורה זו לבצע מעין ניהול של גרסאות לאותו מסמך. מבחינה ויזואלית טקסט אשר מוקף בתג <ins>יוצג על ידי רוב הדפדפנים עם קו תחתי. הרעיון מאחורי השימוש בתג הוא שהקורא יוכל להבדיל בין טקסט ישן שנמחק לבין טקסט חדש אשר התווסף למסמך לאחרונה. לכן, במקרים רבים יופיע התג <ins>לצד התג <del> כך שהטקסט החדש במסמך יוצג לצד הטקסט הישן אשר נמחק מן המסמך ומסומן לשם כך בעזרת התג <del>. |
| <small> | בעזרת תג זה נקטין את הטקסט שבתוכו כך שיהיה קטן יותר מן הטקסט שסביבו. נעשה זאת כדי להדגיש משהו, כדי להוסיף הערות למסמך וכדומה. |
| <strong> | בעזרת תג זה נגדיר מילים או משפטים בטקסט שהינם חשובים יותר מאחרים וברצוננו להדגישם. מבחינה ויזואלית השימוש בתג <strong>יגרום להדגשת הטקסט שבתוכו, באופן דומה לאפקט שיוצר התג <b>. |
| <sub> | טקסט המוקף על ידי התג <sub> מוצג לגולש מעט נמוך יותר מן הטקסט הרגיל אשר סביבו. בצורה זו ניתן להבליט את הטקסט או לאפשר כתיבת חלקי משפט הדורשים טקסט מונמך כגון הפניה להערות או נוסחאות. |
| <sup> | טקסט המוקף על ידי התג <sup> מוצג לגולש מעט גבוה וקטן ותר מן הטקסט הרגיל אשר סביבו. בצורה זו ניתן להבליט את הטקסט מסביבתו או לאפשר כתיבת חלקי משפט הדורשים טקסט מוגבה כגון הפניה להערות או נוסחאות מתמטיות. |
תגים לעיצוב טקסט דמוי פלט מחשב
| תג | תיאור |
|---|---|
| <code> | בתג <code> נשתמש כדי להציג בדף ה - HTML שלנו קוד מחשב. דוגמאות הקוד באתר זה למשל עושות שימוש בתג <code>. רוב הדפדפנים מציגים טקסט המצוי בתוך תחילית התג <code> לסיפא שלו בדרך שונה משהם מציגים טקסט רגיל. |
| <kbd> | בעזרת התג <kbd> נדגיש חלקים בטקסט שאנו רוצים שיוצגו בצורה שונה מזו שבה מוצגים חלקי הטקסט שלידם. |
| <pre> | טקסט הנמצא בין תחילת התג <pre> לסופו יוצג בדף ה - HTML שלנו כפי שהוא, כלומר יחד עם שבירות השורה והרווחים הלבנים שבתוכו. מטרת תג זה לאפשר הצגה מדויקת של טקסט, ללא שיעבור הצרנה (format) כלשהי על ידי הדפדפן. |
| <var> | בעזרת התג <var> נציין כי הטקסט שבין הרישא והסיפא של תג זה הוא משתנה. משתנה זה יכול להיות משתנה מתמטי או כל משתנה אחר. אין לבלבל תג זה עם משתנה תכנותי. באמצעות התג <var> נציין כי מבחינה סמנטית מדובר במשתנה ואילו מבחינה מעשית דין הטקסט המוגדר כמשתנה באמצעות תג זה כדין כל טקסט אחר. מבחינה ויזואלית מרבית הדפדפנים מציגים את הטקסט שבתוך התג <var> בצורה שונה מהטקסט שלידו. |
תגים לעיצוב טקסט במקרים של קיצורים, ר"ת, ציטוטים והגדרות מיוחדות
| תג | תיאור |
|---|---|
| <abbr> | נשתמש בתג <abbr> כדי להגדיר קיצור ואת המשמעות הארוכה של אותו קיצור. |
| <address> | נשתמש בתג <address> כדי להגדיר כתובות. למשל כתובת של מחבר מסמך או מאמר נכניס לתוך תג זה. במידה והתג מקנן בתוך התג <article> למשל אזי בתוך תג זה יהיו לרוב שמו וכתובתו של כותב המאמר. בתוך התג <address> לא יכולים לקנן תגים מבניים אחרים כגון: <header>, <footer>, <nav>, <aside> וכן תגי כותרות כתגי h1-h6 וכן תגי <address> אחרים. |
| <bdo> | התג <bdo> חשוב במיוחד לכותבי עמודי HTML בשפות שכיוונן מימין לשמאל כעברית וערבית. באמצעות תג זה ניתן לשנות את כיוון הטקסט כך שיפנה מימין לשמאל או משמאל לימין. |
| <blockquote> | התג <blockquote> ישמש אותנו כדי לציין שטקסט מסוים הוא ציטוט ממקור אחר. בדרך כלל מאתר אחר. נשתמש בתג זה כאשר נרצה לצטט קטע ארוך יחסית של טקסט המכיל מספר שורות טקסט. מרבית הדפדפנים יקבצו את הקטע המצוטט במצב של indent יחסית לטקסט שלידו. ביכולתנו להשתמש גם בתג <q> כדי לסמן טקסט מצוטט. תג זה יוסיף מרכאות כפולות לפני ואחרי הטקסט המצוטט. נהוג להשתמש בתג <q> כדי לצטט קטעים קצרים של טקסט ובתג <blockquote> כדי לצטט קטעים ארוכים יותר. |
| <q> | התג <q> ישמש אותנו כדי לסמן משפטים מצוטטים ממקור אחר. בדרך כלל הטקסט המצוטט יהיה קצר ומרבית הדפדפנים יוסיפו מרכאות כפולות סביב הטקסט שבתוך התג. קטעי טקסט ארוכים במיוחד נהוג להקיף בתג <blockquote> הגורם לדפדפן להכניס את הטקסט המצוטט לתוך הדף כך שהוא בולט יחסית לטקסט שסביבו. |
| <cite> | בתג <cite> נשתמש כדי לציין ציטוט או טקסט שמקורו במקום אחר. יש הנוהגים להשתמש בתג זה כדי לציין כותרות מסוגים שונים כגון כותרות של ספרים או סרטים. רוב הדפדפנים נוהגים להציג טקסט הנמצא בין תגי cite כשהוא מוטה (Italic). מן הדוגמה למטה ניתן לראות כי השימוש בתג זה הינו פשוט וכי כל שיש לעשות כדי להשתמש בו הוא להכניס בין התג המתחיל לתג המסיים כל טקסט שאנו רוצים להציג כטקסט מצוטט. |
| <dfn> |
בעזרת התג <dfn> נסמן חלקים בטקסט שאותם נרצה לסמן לצורך הגדרה. למשל, בדוגמה למטה אנו מכניסים את המונח UNO לתוך תג <dfn> ואז מספרים לקורא שמונח זה הוא קיצור של United Nation Organization או ארגון האומות המאוחדות. טקסט הנמצא בין הרישא של התג <dfn> לבין הסיפא שלו יוצג ברוב הדפדפנים בצורה שונה מאשר טקסט רגיל. |
עיצוב טקסט באמצעות CSS
אף אתר מודרני אינו שלם ללא CSS. למרות ששפת HTML מכילה תגים רבים לעיצוב טקסט, עדיין הדרך העדיפה לעיצוב טקסט היא באמצעות קוד CSS. על הדרכים השונות לעיצוב טקסט באמצעות CSS תוכלו ללמוד מן המאמר הבא: עיצוב טקסט בשפת CSS
