ݺߣ

ݺߣShare a Scribd company logo

HTML מבוא ל

•
•
E
eitanko

HTML 1 מבוא ותרגילים

1 of 20
Download to read offline
‫מבוא ל‪HTML‬‬ ‫איתן קורן‬ ‫פברואר 3102‬
‫‪ HTML‬לילדים וילדות‬ ‫איתן קורן‬ ‫מרץ 3102‬ ‫>‪<html></html‬‬
‫מה זה ‪?HTML‬‬ ‫קבצים כתובים בשפה שדפדפנים יודעים לקרוא.‬ ‫משתמשים בטאגים כדי לתאר דברים על המסך.‬ ‫טאג נפתח‬ ‫ונסגר‬ ‫>‪<html></html‬‬ ‫3‬
‫איך משתמשים בטאגים?‬ ‫דוגמא לטאג שלא צריך לסגור:‬ ‫>”‪<img src=/slideshow/sa-per-meeting-2-html-1-17097505/17097505/“http:/bit.ly/WMzSEW‬‬ ‫טאג‬ ‫תכונה‬ ‫ערך‬ ‫4‬
‫מבנה השפה‬ ‫לדפי ‪ HTML‬יש מבנה קבוע‬ ‫טאג ראשי של הדף‬ ‫מכיל מידע על הדף‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫כדי לכתוב עברית‬ ‫>"8-‪<meta charset="utf‬‬ ‫מופיע בכותרת הדפדפן‬ ‫>‪</title‬אתר החתולים שלי>‪<title‬‬ ‫זה התוכן של הדף‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫תולי החמודה‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫5‬
‫טאגים חשובים‬ ‫>"8-‪<meta charset="utf‬‬ ‫>1‪</h‬משתמשים לכותרות>1‪<h‬‬ ‫>‪</p‬כאן כותבים פיסקה של טקסט>‪<p‬‬ ‫>”‪<img src=/slideshow/sa-per-meeting-2-html-1-17097505/17097505/“http:/bit.ly/WMzSEW‬‬ ‫>‪</div‬כאן כותבים טקסט>”‪<div align=“center‬‬ ‫>‪</a‬זה משמש ללינקים>”‪<a href=“http://google.com‬‬ ‫>‪ </b‬מדגיש את הטקס ועושה את זה בולד>‪<b‬‬ ‫עושה שורה חדשה כמו ללחוץ אנטר>‪<br‬‬ ‫6‬
...‫ועוד טאגים חשובים‬ <iframe width="420" height="315" src=/slideshow/sa-per-meeting-2-html-1-17097505/17097505/"http:/www.youtube.com/embed/q1dpQKntj_w" frameborder="0" allowfullscreen></iframe> 7
‫עיצוב בעזרת ‪STYLE‬‬ ‫עם ‪ STYLE‬אפשר להוסיף צבעים לטקסט או לרקע, מידות של אורך‬ ‫ורוחב ועוד הרבה תכונות.‬ ‫מה זה‬ ‫פיקסלים?‬ ‫…>”‪ <body style=“width:600px‬מידת אורך‬ ‫…>”‪ <p style=“color:blue‬צבע גופן‬ ‫…>”‪ <div style=“background:blue‬צבע רקע‬ ‫8‬
‫תרגיל 1‬
‫מבנה השפה‬ ‫בונוס! תשתמשו‬ ‫בצבעים‬ ‫לבנות דף עם הטאגים שלמדנו.‬ ‫דוגמא:‬ ‫‪BODY + width‬‬ ‫התחביב שלי‬ ‫1‪H‬‬ ‫‪ IMG‬או ‪VIDEO‬‬ ‫התחביב שלי זה לשחק כדורגל.‬ ‫‪P+B‬‬ ‫אני משחק עם החברים בית ספר.‬ ‫לאתר הקבוצה שאני אוהב (ברצלונה)‬ ‫‪A‬‬ ‫לאתר הקבוצה שאני לא אוהב (ריאל)‬ ‫01‬
‫עוד הסברים‬
BLOCK‫ ו‬INLINE ‫ טאגים שיכולים לשבת אחד ליד השני‬INLINE ‫ טאגים שעושים שורה חדשה‬BLOCK BLOCK INLINE <H1>..<H6> <IMG> <p> <SPAN> <div> <B> 12
‫כפתוריŨĬ ?‫איך מוסיפים כפתורים לדף‬ <button onClick=“alert(‘hi’)”>‫/<כפתור‬button> window.location.href=‘noam2.html’ 13
‫מה זה?‬ ‫>1‪ <H‬כאן יש טקסט גדול‬ ‫הטקסט הזה ליד התמונה >‪<SPAN‬‬ ‫>‪<IMG‬‬ ‫הטקסט הזה מתחת לתמונה‬ ‫>‪<P‬‬ ‫האזור הזה צבוע אדום הטקסט ממורכז‬ ‫‪<DIV‬‬ ‫>‪style=background:red;align:center‬‬ ‫41‬
‫תרגיל 2‬
‫בתרגיל חופשי‬ ‫בונוס! תוסיפו לינק‬ ‫לבנות דף על חייה או על תחביב. ניתן למצוא תמונות בגוגל.‬ ‫למחשב של חבר‬ ‫דוגמאות:‬ ‫חתולים חמודים‬ ‫רובוטים‬ ‫באתר שלי אפשר ללמוד על רובוטים‬ ‫באתר שלי אפשר למצוא תמונות של חתולים‬ ‫חמודים.‬ ‫כדי לרואות תמונות נוספות אפשר ללחוץ על‬ ‫זה רובוט שעוזר בשיעורי הבית‬ ‫הקישורים הבאים.‬ ‫תחול בשחור‬ ‫חתול עם מגפים‬ ‫הרובוט הזה בעצם חוצן‬ ‫61‬
‫סיכום‬ ‫איך היה המפגש הזה?‬
‫כלי עבודה / הכנה לעבודה /‬ ‫התקנה - ‪Install‬‬
BlueGriffon ‫משימה‬ bluegriffon :‫למצוא את התוכנה הזאת‬ http://bluegriffon.org/pages/Download download installer ‫ללחוץ על‬ ‫להתקין את התוכנה‬ ‫להפעיל אותה‬ 19
BlueGriffon 20

More Related Content

HTML מבוא ל

  • 1. ‫מבוא ל‪HTML‬‬ ‫איתן קורן‬ ‫פברואר 3102‬
  • 2. ‫‪ HTML‬לילדים וילדות‬ ‫איתן קורן‬ ‫מרץ 3102‬ ‫>‪<html></html‬‬
  • 3. ‫מה זה ‪?HTML‬‬ ‫קבצים כתובים בשפה שדפדפנים יודעים לקרוא.‬ ‫משתמשים בטאגים כדי לתאר דברים על המסך.‬ ‫טאג נפתח‬ ‫ונסגר‬ ‫>‪<html></html‬‬ ‫3‬
  • 4. ‫איך משתמשים בטאגים?‬ ‫דוגמא לטאג שלא צריך לסגור:‬ ‫>”‪<img src=/slideshow/sa-per-meeting-2-html-1-17097505/17097505/“http:/bit.ly/WMzSEW‬‬ ‫טאג‬ ‫תכונה‬ ‫ערך‬ ‫4‬
  • 5. ‫מבנה השפה‬ ‫לדפי ‪ HTML‬יש מבנה קבוע‬ ‫טאג ראשי של הדף‬ ‫מכיל מידע על הדף‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫כדי לכתוב עברית‬ ‫>"8-‪<meta charset="utf‬‬ ‫מופיע בכותרת הדפדפן‬ ‫>‪</title‬אתר החתולים שלי>‪<title‬‬ ‫זה התוכן של הדף‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫תולי החמודה‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫5‬
  • 6. ‫טאגים חשובים‬ ‫>"8-‪<meta charset="utf‬‬ ‫>1‪</h‬משתמשים לכותרות>1‪<h‬‬ ‫>‪</p‬כאן כותבים פיסקה של טקסט>‪<p‬‬ ‫>”‪<img src=/slideshow/sa-per-meeting-2-html-1-17097505/17097505/“http:/bit.ly/WMzSEW‬‬ ‫>‪</div‬כאן כותבים טקסט>”‪<div align=“center‬‬ ‫>‪</a‬זה משמש ללינקים>”‪<a href=“http://google.com‬‬ ‫>‪ </b‬מדגיש את הטקס ועושה את זה בולד>‪<b‬‬ ‫עושה שורה חדשה כמו ללחוץ אנטר>‪<br‬‬ ‫6‬
  • 7. ...‫ועוד טאגים חשובים‬ <iframe width="420" height="315" src=/slideshow/sa-per-meeting-2-html-1-17097505/17097505/"http:/www.youtube.com/embed/q1dpQKntj_w" frameborder="0" allowfullscreen></iframe> 7
  • 8. ‫עיצוב בעזרת ‪STYLE‬‬ ‫עם ‪ STYLE‬אפשר להוסיף צבעים לטקסט או לרקע, מידות של אורך‬ ‫ורוחב ועוד הרבה תכונות.‬ ‫מה זה‬ ‫פיקסלים?‬ ‫…>”‪ <body style=“width:600px‬מידת אורך‬ ‫…>”‪ <p style=“color:blue‬צבע גופן‬ ‫…>”‪ <div style=“background:blue‬צבע רקע‬ ‫8‬
  • 10. ‫מבנה השפה‬ ‫בונוס! תשתמשו‬ ‫בצבעים‬ ‫לבנות דף עם הטאגים שלמדנו.‬ ‫דוגמא:‬ ‫‪BODY + width‬‬ ‫התחביב שלי‬ ‫1‪H‬‬ ‫‪ IMG‬או ‪VIDEO‬‬ ‫התחביב שלי זה לשחק כדורגל.‬ ‫‪P+B‬‬ ‫אני משחק עם החברים בית ספר.‬ ‫לאתר הקבוצה שאני אוהב (ברצלונה)‬ ‫‪A‬‬ ‫לאתר הקבוצה שאני לא אוהב (ריאל)‬ ‫01‬
  • 12. BLOCK‫ ו‬INLINE ‫ טאגים שיכולים לשבת אחד ליד השני‬INLINE ‫ טאגים שעושים שורה חדשה‬BLOCK BLOCK INLINE <H1>..<H6> <IMG> <p> <SPAN> <div> <B> 12
  • 13. ‫כפתוריŨĬ ?‫איך מוסיפים כפתורים לדף‬ <button onClick=“alert(‘hi’)”>‫/<כפתור‬button> window.location.href=‘noam2.html’ 13
  • 14. ‫מה זה?‬ ‫>1‪ <H‬כאן יש טקסט גדול‬ ‫הטקסט הזה ליד התמונה >‪<SPAN‬‬ ‫>‪<IMG‬‬ ‫הטקסט הזה מתחת לתמונה‬ ‫>‪<P‬‬ ‫האזור הזה צבוע אדום הטקסט ממורכז‬ ‫‪<DIV‬‬ ‫>‪style=background:red;align:center‬‬ ‫41‬
  • 16. ‫בתרגיל חופשי‬ ‫בונוס! תוסיפו לינק‬ ‫לבנות דף על חייה או על תחביב. ניתן למצוא תמונות בגוגל.‬ ‫למחשב של חבר‬ ‫דוגמאות:‬ ‫חתולים חמודים‬ ‫רובוטים‬ ‫באתר שלי אפשר ללמוד על רובוטים‬ ‫באתר שלי אפשר למצוא תמונות של חתולים‬ ‫חמודים.‬ ‫כדי לרואות תמונות נוספות אפשר ללחוץ על‬ ‫זה רובוט שעוזר בשיעורי הבית‬ ‫הקישורים הבאים.‬ ‫תחול בשחור‬ ‫חתול עם מגפים‬ ‫הרובוט הזה בעצם חוצן‬ ‫61‬
  • 18. ‫כלי עבודה / הכנה לעבודה /‬ ‫התקנה - ‪Install‬‬
  • 19. BlueGriffon ‫משימה‬ bluegriffon :‫למצוא את התוכנה הזאת‬ http://bluegriffon.org/pages/Download download installer ‫ללחוץ על‬ ‫להתקין את התוכנה‬ ‫להפעיל אותה‬ 19