Articles
מבוא ל-HTML
תגים הקשורים לתצוגת קוד, ציטוטים ורשימות

תגים הקשורים לתצוגת קוד, ציטוטים ורשימות

מאמר זה מסביר תגים הקשורים לתצוגת קוד, ציטוטים ורשימות.

זה מסביר כיצד לכתוב קוד מקור, ציטוטים, הערות ורשימות ב-HTML.

YouTube Video

תגיות הקשורות להצגת קוד

תגית <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • תג <code> הוא אלמנט אינליין המשמש לציון קטעי קוד או תוכניות בתוך מסמך HTML.
  • כברירת מחדל, הוא מוצג בפונט ברווח אחיד (monospace), המשפר את קריאות הקוד.

תגית <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • תג <pre> משמש להצגת טקסט בפורמט המקורי שלו בתוך מסמך HTML. שימוש בתג זה משמר רווחים ושבירת שורות בטקסט, ושומר על העיצוב המקורי. תג זה משמש בעיקר להצגת תוכן שדורש שימור עיצוב, כמו קוד תוכנה, שירה או אמנות טקסט.
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • בתוך תג <pre>, רווחים נשמרים, כך שאם יש רווח לפני תג הסגירה, שורת רווח תופיע בסיום כפי שמוצג בדוגמה זו.

תגית <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • תג <samp> הוא תג HTML המשמש לייצוג פלט של תוכנת מחשב. היא משמשת לציון פלט או הודעות מתוכניות או מערכות.

תגית <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • תג <kbd> הוא תג HTML המשמש לייצוג קלט של משתמש. הוא משמש לציון קלט מקלדת או פקודות קלט, כגון קיצורי דרך.

תגית <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • תג <var> משמש לייצוג משתנים בתוכנית או במשוואה. משתמשים בו להדגשת שמות משתנים או משתנים בנוסחאות מתמטיות.

תגיות המשמשות לציטוטים, וכדומה

תגית <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • תג <blockquote> משמש לייצוג ציטוטים ארוכים או טקסטים ממקורות אחרים, ומוצג בדרך כלל ברמת הבלוק.

תגית <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • תג <q> הוא אלמנט אינליין המשמש לייצוג ציטוטים קצרים. תג זה יכול לשמש לסימון חלק מטקסט או משפט כציטוט. טקסט שבתוך תג <q> מוצג בדרך כלל עם מרכאות. ניתן גם לקנן את תג <q>. במקרה זה, נעשה שימוש בסוגים שונים של גרשיים עבור הציטוט הפנימי.

תג <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • תגית <cite> היא אלמנט בקו המיועד לסימון מקור של ציטוט או הפניה. תגית זו משמשת בעיקר לסימון מקור של עבודה, כמו כותרות של יצירות, מאמרים, מסמכים, דפי אינטרנט או ספרים.

תג <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • תגית <address> משמשת לייצוג מידע ליצירת קשר הקשור למחבר או לבעלים של מסמך או חלק ממנו. תגית זו בדרך כלל מכילה כתובות דואר אלקטרוני, מספרי טלפון, כתובות פיזיות ומידע דומה.

תגית <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • תגית <time> משמשת לייצוג נקודת זמן מסוימת, משך זמן או זמן חוזר. תגית זו יכולה לכלול תאריכים ושעות כדי להעניק משמעות סמנטית למסמך.

תגית <data>

Current Year 
1<data value="2024">Current Year</data>
  • תגית <data> משמשת לקשר בין תוכן שניתן לקריאה על ידי בני אדם לערכים שניתן לפרש על ידי מכונות. תגית זו שימושית לסימון נתונים באופן שניתן לעיבוד קל על ידי תוכנות.

תגיות <details> ו-<summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • תגית ה-<details> יוצרת ווידג׳ט שניתן לכווץ ולהרחיב. על-ידי שימוש בה יחד עם תגית <summary>, אפשר להגדיר מקטע לחיץ שחושף פרטים נוספים, לעיתים קרובות לשימושים אינטראקטיביים כגון 'קרא עוד'.

תגים המשמשים להצגת רשימות

תג <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • זו תגית המשמשת ליצירת רשימות לא מסודרות. כל פריט ברשימה מוגדר באמצעות תגית <li>. ברירת המחדל היא שבכל פריט ברשימה מופיע נקודה שחורה בצדה.

תג <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • תגית זו משמשת ליצירת רשימה מסודרת. כל פריט ברשימה מוגדר באמצעות תגית <li>. ברירת המחדל היא שמוצגים מספרים לציון סדר הפריטים.

תג <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • תגית זו משמשת ליצירת רשימה של זוגות הכוללת מונחים והגדרות, או שמות ופרטים. הפריטים ברשימה מוגדרים באמצעות התגיות <dt> ו- <dd>. המונח או השם נכתבים בתגית <dt>, וההגדרה או ההסבר נכתבים בתגית <dd>.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תגים הקשורים לטקסטתגיות הקשורות לטבלאות