בפעילויות קודמות למדתם:
- העקרונות הבסיסיים של תגים ורכיבים של 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 הנוספים. הצלחתם, כל הכבוד!