לימוד HTML חלק 12: שימוש ברכיבי Kbd, Samp, Code ו- Var ב- HTML

בדיון זה החומר יהיהנדון עוסק בעיצוב קוד (כתיבת דברים טכניים) ב- HTML הדן באופן ספציפי בפקודות כתיבה שהוזנו מהמקלדת עם התג <kbd>, כתיבת קוד לדוגמה לתוכנית עם התג <samp>, כתיבת קוד ל- HTML עם התג <code> וכתיבת טקסט המכיל משתני תוכנית או מתמטיקה עם התג <var>.

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

א. שימוש באלמנט ה <kbd>

אלמנט ה- kbd מיועד למקלדת. כאשר התג <kbd> משמש לייצוג קלט מהמשתמש (בצורה של תווים מהמקלדת או מהתקנים אחרים כמו פקודות קוליות).

טקסט או תוכן הכלולים בתג <kbd> יוצגו בגופן מונוספייס. להלן קוד לדוגמא לשימוש בתג <kbd> ב- HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen kbd di HTML</title>
</head>
<body>
<p>Untuk mematikan proses, tekan <kbd>CTRL+ALT+Delete</kbd></p>
</body>
</html>

לאחר הרצת הקוד הקוד בדפדפן אינטרנט הוא יופיע כמוצג להלן:

ב. שימוש באלמנט ה <b> samp

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

להלן קוד לדוגמא לשימוש בתג <samp> ב- HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen samp di HTML</title>
</head>
<body>
<p>Mengkonversi nilai ASCII ke dalam karakter dengan menggunakan metode <samp>string.fromCharCode()</samp>
</body>
</html>

לאחר הרצת הקוד הקוד בדפדפן אינטרנט הוא יופיע כמוצג להלן:

ג. שימוש באלמנט <code>

התג <code> משמש לכתיבת החלק של הקודמחשב ל- HTML. כאשר קוד המחשב כולל את שם רכיב ה- XML, תוכנית המחשב, שם הקובץ או קודים אחרים המוכרים על ידי המחשב.

הטקסט בתג <amp> יוצגעל ידי דפדפני אינטרנט עם גופנים מונוספיים על ידי הסרת יותר מרווח אחד. תגית זו כלולה גם בסוג האלמנט המוצב ועוקב אחר זרימת הטקסט הקיימת. בתג <amp> יש תכונה כיתתית המוצעת לשימוש כדי לציין את שפת קוד המחשב הכתוב. לדוגמה, היית כותב קוד CSS כך שתכתוב "שפה-css" בתכונה הכיתה כמו <code class = "language-css"> ... </code>.

להלן קוד לדוגמא לשימוש בתג <code> ב- HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Code di HTML</title>
</head>
<body>
<p>CSS Default Setting : <code class="language-css">code{ font-family: monospace; }</code></p>
</body>
</html>

לאחר הרצת הקוד הקוד בדפדפן אינטרנט הוא יופיע כמוצג להלן:

ד. שימוש באלמנט ה <var>

אלמנט var עומד על משתנה אשרמשמש להגדרת וכתיבת משתנה של תוכנית או נוסחה מתמטית. הטקסט הכלול בתג זה יוצג נטוי (נטוי).

להלן קוד לדוגמא לשימוש בתג <var> ב- HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Var di HTML</title>
</head>
<body>
<p>Misalkan laba diinisialisasikan sebagai <var>x</var></p>
</body>
</html>

לאחר הרצת הקוד הקוד בדפדפן אינטרנט הוא יופיע כמוצג להלן: