בחלקים האחרונים של סדרת מדריכים זו יצרנו מסמך 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 example of basic HTML Document</h1>
</head>
<body>
<p>this is an <strong>example</strong> of "strong" tag </p>
<p>this is an <em>example</em> of "em" tag </p>
<p>this is an <ins>example</ins> of "ins" tag </p>
<p>this is an <del>example</del> of "del" tag </p>
<p>this is an <span style="color:blue">example</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>
כאשר אם נריץ דוגמא זו נקבל את התוצאה הבאה:
כעת לאחר שלמדנו כיצד להציג טקסט באמצעות תגיות שונות,
נוכל להתקדם לחלק הבא של המדריך שבו נלמד כיצד להוסיף קישורים ותמונות לדף שלנו.
