Nuvola apps bookcase Icône HS.svg
Emoji u1f3eb.svg

בתי ספר שמעוניינים להשתתף בפרויקט מוזמנים לשלוח דוא"ל לכתובת info@kidipedia.org.il

מדריך:HTML/שיעור 4

מתוך קידיפדיה
קפיצה אל: ניווט, חיפוש

בשיעור זה נלמד לייצר רשימות משני סוגים

הקדמה

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

  1. רשימה מסודרת- רשימה המסודרת לפי סדר מספרים או אותיות (כמו הרשימה שאתם קוראי עכשיו)
  2. רשימה לא מסודרת- רשימה ללא מספור כלשהו

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

רשימה מסודרת

לפניכם קוד HTML פשוט ליצירת רשימה מסודרת:

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<ol>
			<li>ביצים</li>
			<li>חלב</li>
			<li>ירקות</li>
		</ol>
	</body>
</html>

התג <ol> הוא התג שבתוכו יהיו כל איברי הרשימה. שם התג, ol, הוא ראשי תיבות של Ordered List, רשימה מסודרת.
התג <li> הוא התג המציין איבר ברשימה. הטקסט שאתם רוצים שיופיע באיבר הרשימה, ייכתב בין התג הפותח לסוגר של האיבר. הפלט של הקוד יראה כך:

  1. ביצים
  2. חלב
  3. ירקות

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

לפניכם קוד HTML פשוט ליצירת רשימה לא מסודרת:

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<ul>
			<li>ביצים</li>
			<li>חלב</li>
			<li>ירקות</li>
		</ul>
	</body>
</html>

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

  • ביצים
  • חלב
  • ירקות

עיצוב רשימות

עתה נלמד לשנות מעט את עיצוב הרשימה

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

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

"style="list-style-type:disc 

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

  • מעגל (circle)
  • ריבוע (square)
  • שום דבר (none)

רשימה מסודרת

דבר דומה ניתן לעשות לרשימה מסודרת. אבל, השורה שצריך להוסיף היא שונה.

 <ol type="1">      

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

  • 1- רשימה מסודרת על פי מספרים
  • A- רשימה המסודרת לפי אותיות אנגליות גדולות
  • a- רשימה המסודרת לפי אותיות אנגליות קטנות
  • I- רשימה המסודרת לפי אותיות רומיות גדולות
  • i- רשימה המסודרת לפי אותיות רומיות קטנות

תרגול

תרגיל מספר 1

  • כתבו קובץ html שיכיל רשימת קניות כלשהי. הרשימה צריכה להיות לא מסודרת.
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<ul>
			<li>ביצים</li>
			<li>חלב</li>
			<li>ירקות</li>
			<li>פירות</li>
		</ul>
	</body>
</html>

תרגיל מספר 2

  • כתבו קובץ html שיכיל רשימה של זוכים בתחרות כלשהי, על פי מקום ראשון, שני ושלישי (תחשבו איזו סוג רשימה תתאים).
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<ol>
			<li>יוסי</li>
			<li>עומר</li>
			<li>יובל</li>
		</ol>
	</body>
</html>

תרגיל מספר 3

  • התרגיל הא הוא טיפה יותר קשה. עליכם לעשות רשימה לא מסודרת שתכיל שלושה איברים. באיבר השני, עליכם לייצר עוד רשימה מסודרת שתכיל 4 איברים.
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<ul>
			<li>איבר 1</li>
			<li>
				<ol>
					<li>איבר 2.1</li>
					<li>איבר 2.2</li>
					<li>איבר 2.3</li>
					<li>איבר 2.4</li>
				</ol>
			</li>
			<li>איבר 4</li>
		</ul>
	</body>
</html>