רשימות וסימונים ב-HTML

נושא מספר 4 ב-קורס תכנות לילדים.

תיאור השיעור:

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

מטרות השיעור:

• הכרת תגיות רשימות מסודרות (<ol>) ורשימות לא מסודרות (<ul>).
• הבנה כיצד לשלב פריטים ברשימות באמצעות תגית <li>.
• יישום רשימות בתוך דפי HTML כדי להציג תוכן בצורה מסודרת.

מהלך השיעור:

1. מבוא קצר: למה רשימות?

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

אז איך זה עובד? בוא נצלול לעולם של תגיות רשימות ב-HTML!

2. רשימות לא מסודרות: <ul>

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

כדי ליצור רשימה כזו ב-HTML, אנחנו משתמשים בתגית <ul>, שמשמעותה unordered list – כלומר רשימה לא מסודרת. כל פריט ברשימה צריך להיות מוגדר בתוך תגית <li>, שמייצגת list item (פריט ברשימה).

ככה זה נראה בקוד:

<ul>
  <li>לחם</li>
  <li>חלב</li>
  <li>תפוחים</li>
</ul>

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

• לחם
• חלב
• תפוחים

שמת לב? כל פריט ברשימה נפתח ב-<li> ונסגר עם </li>, וככה אנחנו מוודאים שהדפדפן יבין שמדובר בפריט ברשימה.

מתי נשתמש ברשימה לא מסודרת?

רשימות לא מסודרות מתאימות כשאין חשיבות לסדר הפריטים. לדוגמה:

• רכיבים במתכון
• פריטים בתיק
• תכונות של מוצר

3. רשימות מסודרות: <ol>

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

כדי ליצור רשימה מסודרת, נשתמש בתגית <ol>, שמשמעותה ordered list – כלומר רשימה מסודרת. גם כאן כל פריט יסומן עם <li>, רק שהפעם, הדפדפן ימספר אוטומטית את הפריטים.

הנה דוגמה לרשימה מסודרת:

<ol>
  <li>להכין את הבצק</li>
  <li>לאפות בתנור</li>
  <li>להגיש לשולחן</li>
</ol>

כשהקוד הזה מוצג בדפדפן, זה ייראה כך:

1. להכין את הבצק
2. לאפות בתנור
3. להגיש לשולחן

מתי נשתמש ברשימה מסודרת?

רשימות מסודרות מתאימות כשיש חשיבות לסדר הפריטים, כמו:

• שלבים במתכון
• הוראות פעולה
• סדר עדיפויות במשימות

השוואה בין רשימות מסודרות ולא מסודרות

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

• רשימה לא מסודרת (<ul>):
  נשתמש כשלא חשוב באיזה סדר הדברים מופיעים. הרשימה תציג כל פריט עם סימון כמו נקודה או עיגול.

• רשימה מסודרת (<ol>):
  נשתמש כשהסדר הוא חלק חשוב. הדפדפן ימספר את הפריטים באופן אוטומטי.

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

תרגול:

1. צרו רשימה לא מסודרת של פריטים שאתם משתמשים בהם ביומיום.
2. צרו רשימה מסודרת שמתארת שלבים לפעולה מסוימת, כמו הכנת כריך או סידור החדר.

4. סימונים מותאמים אישית לרשימות

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

4.1 שינוי סוג הסימונים ברשימות לא מסודרות (<ul>)

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

• עיגול מלא (disc): הסימן ברירת המחדל לרשימה לא מסודרת.
• עיגול ריק (circle): עיגול חלול שמשמש כאלטרנטיבה.
• ריבוע (square): ריבוע קטן ליד כל פריט.

כדי לשנות את הסימן של רשימה, אנחנו משתמשים בתכונה list-style-type בתוך תגית <ul>. נסתכל על דוגמה:

<ul style="list-style-type: circle;">
   <li>פריט ראשון</li>
   <li>פריט שני</li>
   <li>פריט שלישי</li>
</ul>

בדוגמה הזו, סימני העיגול של הרשימה לא מסודרת הוחלפו בעיגולים ריקים (circle). אפשר גם להחליף אותם לריבועים בעזרת:

<ul style="list-style-type: square;">
   <li>פריט ראשון</li>
   <li>פריט שני</li>
   <li>פריט שלישי</li>
</ul>

תרגול:
נסה לשנות את הסימנים של הרשימה שלך לכמה סוגים שונים וראה איך זה משפיע על עיצוב הדף!

4.2 שינוי הסימנים ברשימות מסודרות (<ol>)

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

• מספרים רגילים (1, 2, 3...): ברירת המחדל של רשימה מסודרת.
• אותיות גדולות (A, B, C...): לשימוש באותיות במקום מספרים.
• אותיות קטנות (a, b, c...): לשימוש באותיות קטנות.
• ספרות רומיות גדולות (I, II, III...): מספרים בספרות רומיות.
• ספרות רומיות קטנות (i, ii, iii...): אותן ספרות, אבל קטנות.

כדי לשנות את צורת הסימנים, משתמשים גם כאן בתכונה list-style-type:

<ol style="list-style-type: upper-roman;">
   <li>פריט ראשון</li>
   <li>פריט שני</li>
   <li>פריט שלישי</li>
</ol>

בדוגמה הזו, כל פריט ברשימה מסודרת יוצג עם מספרים רומיים גדולים.

4.3 ביטול סימונים

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

<ul style="list-style-type: none;">
   <li>פריט ראשון</li>
   <li>פריט שני</li>
   <li>פריט שלישי</li>
</ul>

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

5. רשימות בתוך רשימות (רשימות מקוננות)

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

נראה דוגמה:

<ol>
   <li>פריט ראשון
      <ul>
         <li>תת-פריט א</li>
         <li>תת-פריט ב</li>
      </ul>
   </li>
   <li>פריט שני</li>
</ol>

בדוגמה הזו, מתחת ל"פריט ראשון" יש רשימה לא מסודרת עם שני תתי-פריטים.

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

6. סיכום: שימוש נכון ברשימות ב-HTML

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

1. רשימות לא מסודרות (<ul>) מיועדות להצגת פריטים שאין להם סדר מסוים. ברירת המחדל היא סימונים של נקודות עגולות, אך אפשר לשנות אותם לעיגולים ריקים או ריבועים בעזרת התכונה list-style-type.

2. רשימות מסודרות (<ol>) משמשות להצגת פריטים לפי סדר מוגדר, כמו צעדים בתהליך או פריטים לפי חשיבות. אפשר לשנות את אופן הצגת הסימונים (מספרים, אותיות או ספרות רומיות) בעזרת התכונה list-style-type.

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

4. התאמה אישית של סימונים נותנת לך שליטה על איך הרשימות שלך נראות, מה שהופך את האתר שלך ליותר נגיש ומעניין מבחינה ויזואלית.

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

טיפים לשימוש נכון ברשימות

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

דוגמה מתקדמת: הנה דוגמה שמציגה שילוב של כל מה שלמדנו:

<h2>תוכנית עבודה</h2>
<ol>
   <li>שלב ראשון: הכנת מסמכים
      <ul style="list-style-type: square;">
         <li>אישור חומרים</li>
         <li>הכנת דוחות</li>
      </ul>
   </li>
   <li>שלב שני: תכנון פרויקט</li>
   <li>שלב שלישי: ביצוע
      <ol style="list-style-type: lower-alpha;">
         <li>איסוף חומרים</li>
         <li>יישום בפועל</li>
      </ol>
   </li>
</ol>

בדוגמה הזו, יש לנו שילוב של רשימה מסודרת, רשימה מקוננת (לא מסודרת), ושימוש בסימונים מותאמים אישית (ריבועים ואותיות קטנות).

תרגיל סיום

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

קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.