Nuvola apps bookcase Icône HS.svg
Emoji u1f3eb.svg

בתי ספר שמעוניינים להשתתף בפרויקט מוזמנים לשלוח דוא"ל לכתובת info@kidipedia.org.il

מדריך:HTML/שיעור 5

מתוך קידיפדיה
קפיצה אל: ניווט, חיפוש

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

הקדמה

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

התג <sub>

תג זה נועד לייצר הנמכה של טקסט, לרוב לצד טקסט רגיל

<sub>מונמך</sub>רגיל

והתוצאה תהיה:
מונמךרגיל

שימו לב

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

התג <sup>

תג זה נועד לייצר הנמכה של טקסט, לרוב לצד טקסט רגיל

<sup>מוגבה</sup>רגיל

והתוצאה תהיה:
מוגבהרגיל

השימושים ל-<sub> ול-<sup>

בעזרת שני התגי האלה, ניתן לכתוב בין היתר משוואות מתמטיות. לדומגה, שרוצים לכתוב X בריבוע, ניתן להשתמש ב-sup:

X<sup>2</sup>

והתוצאה תהיה: X2
אם רוצים לכתוב X1 ו- X2 (כמו פתרונות של משוואה ריבועית), ניתן לכתוב כך:

X<sub>2</sub> and X<sub>1</sub>

התג <big>

התג big נועד להגדיל טקסט.

regular and <big>big</big>

והתוצאה תהיה:
regular and big

התג <small>

התג small נועד להקטין טקסט.

regular and <small>small</small>

והתוצאה תהיה:
regular and small

כדאי לדעת

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

regular and <big><big><big>very very big</big></big></big>

התוצאה תהיה: regular and very very big

התג <s>

התג <s> נועד כדי "למחוק" טקסט, כלומר לייצר קו באמצע הטקסט, שנועד למחיקתו.

<s>deleten</s>

ייתן את התוצאה: deleten

התג <q>

התג <q> שם את הטקסט שבתוכו בתוך מרכאות (כמו ציטוט). בהמשך תבינו שזה יכול לחסוך הרבה מאמץ.

<q>this is a quote</q>

ייתן את התוצאה: this is a quote

התג <mark>

התג <mark> מגדיש את הטקסט שבתוכו (כמו מרקר).

 <mark>Marked</mark>

ייתן את התוצאה: Marked

כפילויות תווים

ב-html, ישנם כמה תווים שמבצעים את אותה הפעולה. לדוגמא, התג <del> מבצע את אותה הפעולה כמו התג <s>, והתג <strong> מבצע את אותה הפעולה כמו התג <b>. במדריך זה לימדנו אתכם את התגים שיותר נוחים לשימוש ושיותר נפוצים כיום באינטרנט. אבל, כדאי לכם לדעת את מה כל תג עושה, כי אם תיתקלו בהם בעתיד, זה יקל עליכם.

שילוב של כמה תגים ביחד

אם נשלב את שלושת התגים הראשונים שלמדנו (b, i, u) נוכל לייצר טקסט שהוא גם מודגש, גם מוטה וגם עם קו תחתון. לדבר הזה אין חשיבות לסדר. אבל, אם תשלבו את sub ו-sup ביחד, יש חשיבות לסדר שבה כותבים את התגים. לדוגמא, אם נכתוב sup בתוך sub, התוצאה לא תהיה כמו התוצאה של sub בתוך sup.

<sub>out<sup>in</sup></sub>

ייתן את התוצאה: outin

<sup>out<sub>in</sub></sup>

ייתן את התוצאה: outin

תרגול

  • כתבו את המשוואה הבאה ב-html כפי שלמדנו: X2 + 2X = 0
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
            <p>
                X<sup>2</sup> + 2X = 0
            </p>
	</body>
</html>

  • כתבו את הדבר הבא: BIGsubsup and small
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
            <p>
               <big>BIG</big><sub>sub</sub><small><sup>sup and small</sup></small>
            </p>
	</body>
</html>