המדריך הבסיס ל-HTML – חלק ד' – סימוני טקסט

הזמינו אותי לכוס קפה
buy me coffee

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

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

התנהגויות של אלמנטים

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

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

סימוני טקסט ב-HTML

  • <strong> – תגית המשמשת להדגשת טקסט – טקסט מודגש
  • <em> – תגית המשמשת להטיית טקסט – טקסט נטוי
  • <ins> – תגית המשמשת לסימון טקסט שנוסף – טקסט שנוסף
  • <del> – תגית המשתמש לסימון טקסט שהוסר – טקסט שהוסר
  • <div> – משמשת כמעין תיחום לאזור שלו ניתן להקנות תכונות מסוימות
  • <span> – תגית המכילה תוכן, בניגוד ל-div ניתן להוסיף באותה השורה – טקסט לדוגמא

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>this is an exemple of basic HTML Document</h1>
</head>
<body>
    <p>this is an <strong>exemple</strong> of "strong" tag </p>
    <p>this is an <em>exemple</em> of "em" tag </p>
    <p>this is an <ins>exemple</ins> of "ins" tag </p>
    <p>this is an <del>exemple</del> of "del" tag </p>
    <p>this is an <span style="color:blue">exemple</span> of "span" tag </p>
    <div style="font-size: larger;">
    <p>everything in this paragraph</p>
    <p>is in a "div" tag </p>
    <p>wich ends at the end of this line</p>
    </div>
</body>
</html>

כאשר אם נריץ דוגמא זו נקבל את התוצאה הבאה:

HTML Exemple
HTML Exemple

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

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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