קישורים ותמונות ב-HTML
נושא מספר 3 ב-קורס תכנות לילדים.
תיאור השיעור:
בשיעור זה נלמד איך להוסיף קישורים ותמונות לדף HTML. נבין את התגיות <a> ו-<img>, ונראה כיצד להשתמש בהן כדי ליצור קישורים בין עמודים ולהוסיף תמונות.
מטרות השיעור:
- הכרת תגית הקישור
<a>והשימוש בה ליצירת קישורים בדף. - הבנת תגית התמונה
<img>וכיצד להוסיף תמונות לדף. - למידה כיצד להשתמש בתכונות של תגיות אלה (כמו
hrefו-src) כדי לשלוט בתוכן המקושר ובתמונות.
מהלך השיעור:
1. מבוא לתגיות קישורים ותמונות
ב-HTML, כדי שהדף שלנו יהיה מעניין ושימושי, נשתמש בקישורים ותמונות. קישורים עוזרים לנו לעבור בין דפים שונים באינטרנט, ותמונות מוסיפות עניין ויופי לדף שלנו.
2. מהו קישור ואיך יוצרים אותו?
קישור (Hyperlink) הוא דרך לגרום לגולש לעבור לדף אחר בלחיצת כפתור. כדי ליצור קישור ב-HTML, משתמשים בתגית <a>, שהיא קיצור של Anchor (עוגן). תגית זו מציינת לאן אנחנו רוצים לקשר ומה יהיה הטקסט או התמונה שעליהם נלחץ.
איך זה נראה?
<a href="https://1step2learn.com">לחץ כאן</a>במקרה הזה, התגית אומרת לדפדפן: "אם מישהו ילחץ על הטקסט 'לחץ כאן', תעביר אותו לדף שכתוב ב-href (הקישור)."
3. מהי תמונה ואיך מוסיפים אותה לדף?
תמונה היא אחת הדרכים הכי פשוטות להחיות את הדף שלנו. כדי להוסיף תמונה ב-HTML, משתמשים בתגית <img>. תגית זו לא עוטפת טקסט כמו קישורים, אלא רק מציינת לדפדפן מאיפה לטעון את התמונה.
איך זה נראה?
<img src="image.jpg" alt="תיאור התמונה">src(source) מציין את מיקום התמונה.altהוא תיאור של התמונה, למקרה שהיא לא נטענת או אם יש משתמשים שלא רואים תמונות (למשל, גולשים עם מוגבלות).
4. דוגמה לשימוש בקישורים ותמונות
בואו נבנה דף קטן שיש בו גם קישור וגם תמונה:
<a href="https://1step2learn.com">
<img src="image.jpg" alt="לחץ כאן לתמונה">
</a>כאן שילבנו גם קישור וגם תמונה. אם המשתמש ילחץ על התמונה, הוא יועבר לדף אחר.
5. סיכום
למדנו איך להוסיף קישורים ותמונות לדף HTML באמצעות תגיות <a> ו-<img>. כל תגית מאפשרת לדף להיות דינמי ומעניין יותר, בעזרת קישורים לדפים אחרים והצגת תמונות בצורה ברורה.
קישורים
- בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.