רכיבי HTML נוספים

בפעילויות קודמות למדתם:

• מידע בסיסי על תגי HTML ורכיבי HTML.
• איך לבנות דף אינטרנט.
• HTML סמנטי ושיטות מומלצות.

במאמר הזה תמשיך להתבסס על הידע שלך ב-HTML ולעסוק ברכיבי HTML נוספים.

רכיבי תוכן של טקסט

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

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

רכיב ה-blockquote

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

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

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

ניתן גם להשתמש ברכיבים שונים בתוך רכיב <blockquote>, כמו כותרת, פסקה או רשימה.

הרכיב <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

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

הרכיב <details> מועיל באמצעות ווידג'ט גלוי שמכיל מידע נוסף. הרכיב כולל מתג מובנה, והמשתמש יכול לפתוח ולסגור את המתג. כשהמתג פתוח, תוכן המידע הנוסף מתרחב והמשתמשים יכולים לקרוא אותו. כשמתג נסגר, תוכן המידע הנוסף מוסתר מהמשתמש. כדי לתת שם לווידג'ט <details> עצמו, צריך להשתמש ברכיב <summary>.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

זהו אלמנט <figure> בפעולה. כאן אפשר לראות שנעשה שימוש ב-<figure> בשילוב עם האלמנט <figcaption> כדי לשפר את החוויה החזותית.

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

הרכיב <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

האלמנט <time> מספק משמעות ומשמעות סמנטית, ומאפשר תפקוד טוב יותר באמצעות פעילויות כמו קביעת תור באינטרנט, פרסום תאריך ושעה של מאמר בבלוג, ארכיונים וכו'. כמה דוגמאות לאתרים שישתמשו באלמנט <time> כוללים שימוש ביומן Google, פרסום מאמר בפלטפורמה או קריאת ארכיונים היסטוריים באינטרנט מאתר ספרייה.

הרכיב <time> מציין זמן, ויכול לייצג את השעה של שעון של 24 שעות או תאריך ספציפי שיכול להשתנות בהתאם לאזור הזמן ולמיקום. לאלמנט הזה נדרשים תג פותח וגם תג סוגר, <time> וגם </time>. אפשר להוסיף את המאפיין datetime כדי שיהיה אפשר לקרוא תאריכים בפורמט קריא למחשבים.

מטא נתונים של מסמך

<title>Sarah's Favorite Food Recipes</title>

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

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

רכיבי תוכן מוטמעים

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

הרכיב <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

כשאתם מסיימים לקנות פריטים באינטרנט ולוחצים על אפשרות התשלום שלכם, כמו PayPal או Apple Pay, בדרך כלל התכונות האלה מתווספות לדף אינטרנט באמצעות <iframe>. צפייה באינטרנט במפה לצורך חיפוש עסק מקומי היא עוד חוויה נפוצה. אפשר להוסיף את הסוגים האלה של חוויות משתמש בדפי אינטרנט באמצעות iframe. בדוגמה שלמעלה, אתה רואה את כתובת ה-URL של ויקיפדיה בתוך iframe, שנקראת "וויקיפדיה".

הרכיב <iframe> מאפשר להוסיף תוכן ממקור אחר ולהטמיע מסגרת בדף אינטרנט. הוא יוצר מסגרת מלבנית ומציג תוכן בדפדפן. מסגרת מאפשרת להציג פריסה בצורת חלון בתוך רכיב <iframe>. זוהי דרך מתקדמת להוסיף תוכן לדף האינטרנט כדי לשפר את החוויה.

רכיבי טופס

<progress max="100" value="30"> 30% </progress>

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

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

כתיבת סקריפטים

<canvas id="canvas"></canvas>

כדי לצייר גרפיקה ואנימציות בזמן אמת, צריך להשתמש ברכיב <canvas>. כדי ליצור קנבס, צריך להציב את הרכיב <canvas> בדף האינטרנט של ה-HTML. הרכיב הזה דורש קוד JavaScript כדי לאפשר לפונקציונליות לשרטט וליצור גרפיקה.

רכיבי תוכן של טבלה

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

הרכיב <table>

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

הרכיב <th>

הרכיב <th> הוא הכותרת של קבוצת תאים.

הרכיב <tr>

הרכיב <tr> מגדיר שורה של תאים בתוך טבלה. מכאן אפשר להוסיף נתוני תא ספציפיים.

הרכיב <td>

הרכיב <td> יוצר את התא ומוסיף את התוכן הנדרש.

סיכום

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