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

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

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

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

בשיעור זה נלמד להוסיף תמונות וקישורים לאתרים.

הקדמה

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

קישורים

התחביר לקישור הוא פשוט למדי. להלן קוד פשוט שעושה שימוש בקישורים:

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<a href = "http://www.google.com" >קישור</a>
	</body>
</html>

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

תמונות

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

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<img src = "http://www.w3schools.com/images/colorpicker.gif" alt = "תמונה" width = "100" height = "100">
	</body>
</html>

בואו ננתח מעט את הקוד. התג <img> הוא התג שמשמש להוספת והצגת תמונות. בתוך התג הפותח, כתוב src. מה שכתוב במרכאות הכפולות שלאחר הסימן = הוא הכתובת של התמונה. כמוסיפים תמונות לאתר, ישנם שתי דרכים. דרך ראשונה היא להשתמש בתמונה שקיימת באינטרנט, וכל שעליכם לעשות, הוא לשים את הקישור בתוך המרכאות. אם התמונה היא תמונה ששמורה לכם במחשב, עליכם להעתיק את ה-path של התמונה. path לדוגמא: C:\projfiles\2\2.png . כדי לגשת ל-path עליכם להעתיק אותו מהסרגל שמופיע למעלה בסייר הקבצים שלכם. עוד דרך, היא ללחוץ לחצן ימני על התמונה, לבחור במאפיינים, ולהעתיק משם את ה-path המופיע תחת הכותרת "מיקום".

שימו לב

ה-path שאתם מעתיקי בדרכים הנתונות ייתן לכם את הנתיב של התיקיה שבה ממוקמת התמונה. עליכם לכתוב לאחר מכן את סימן backslash (\) ואחרי זה לכתוב את שם התמונה.

alt

המאפיין alt מאפשר לכם לבחור מה יהיה כתוב ב-tooltip (או בעברית: ברמז הצץ) כאשר העכבר יהיה מעל התמונה. אם אינכם יודעים מה הכוונה, ראו דוגמאות באתרים הבאים:

  • רמז צץ - ויקיפדיה העברית
  • Tooltip - ויקיפדיה האנגלית (באנגלית)

גודל התמונה

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

תרגילים

תרגיל מספר 1

  • כתבו קובץ html שיכיל קישור לדף הראשי של קידיפדיה, כך שהטקסט שיוצג יהיה "קידיפדיה".
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<a href = "http://www.kidipedia.org.il/%D7%A2%D7%9E%D7%95%D7%93_%D7%A8%D7%90%D7%A9%D7%99" >קידיפדיה</a>
	</body>
</html>

תרגיל מספר 2

כתבו קובת html שיציג תמונה כלשהי שקיימת לכם במחשב. גוד להתמונה יהיה 200X200 פיקסלים והרמז הצץ יהיה "זאת התמונה שלי".

לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<img src = "C:\Users\User\Pictures\1.PNG" alt = "זאת התמונה שלי" width = "200" height = "200">
	</body>
</html>

תרגיל מספר 3

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

לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<a href = "http://www.google.com"><img src = "http://www.w3schools.com/images/colorpicker.gif" alt = "זאת התמונה שלי" width = "200" height = "200"></a>
	</body>
</html>

המשך הלימוד

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