לימוד HTML » תגיות עיצוב לטקסטים שכדאי להכיר

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

נכתב ע"י יוחאי ירמיהו

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

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

את כל הקודים מתחת אנחנו הולכים להציג בתוך פסקאות אך ניתן להוסיף אותם גם בתגיות אחרות וגם בתוך כותרות HTML.

טקסט מודגש Bold

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

זוהי שורה עם טקסט מודגש


<p>
    זוהי שורה עם <b>טקסט מודגש</b>
</p>

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

זוהי שורה עם טקסט מודגש וחשוב


<p>
    זוהי שורה עם <strong>טקסט מודגש וחשוב</strong>
</p>

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

טקסט נטוי Italic

הקוד הבא יאפשר לנו להפוך את הטקסט לנטוי.

זוהי שורה עם טקסט נטוי


<p>
    <i>זוהי שורה עם טקסט נטוי</i>
</p>

טקסט עם רקע צהוב

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

זוהי שורה עם רקע צהוב


<p>
    <mark>זוהי שורה עם רקע צהוב</mark>
</p>

טקסט מוקטן

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

זוהי שורה עם טקסט שהופך להיות קטן יותר


<p>
    זוהי שורה עם טקסט <small>שהופך להיות קטן יותר</small>
</p>

טקסט מחוק עם קו באמצע

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

~~זוהי שורה עם טקסט מחוק~~


<p>
    <del>זוהי שורה עם טקסט מחוק</del>
</p>

הוספת קו מתחת למילה

הקוד הבא יאפשר להוסיף קו תחתי מתחת למילה או לטקסט

זוהי שורה עם קו תחתון


<p>
    <ins>זוהי שורה עם קו תחתון</ins>
</p>

טקסט תחתי קטן

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

זוהי שורה רגילה עם _{טקסט תחתון קטן}


<p>
    זוהי שורה רגילה עם <sub>טקסט תחתון קטן</sub>
</p>

טקסט עליון קטן

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

זוהי שורה רגילה עם ^{טקסט עליון קטן}


<p>
    זוהי שורה רגילה עם <sup>טקסט עליון קטן</sup>
</p>

הוספת הערה גלויה לטקסט

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

על ידי ריחוף מעל האזור של ההערה ניתן יהיה לראות את ההערה שהגדרנו בחלק זה.

זוהי שורה רגילה אבל בחלק הזה יש לכם הערה


<p>
    זוהי שורה רגילה אבל 
    <abbr title='הערה לצופה שמרחף מעל המשפט'>בחלק הזה יש לכם הערה</abbr>
</p>

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

יש לכם שאלות בנוגע למדריך HTML? שתפו אותנו בתגובות!

אם יש לכם שאלות, אם משהו היה לא מובן או במידה ואתם רוצים לשתף אותנו בדעה שלכם תוכלו לעשות זאת בתגובות מתחת: