1. No category

‫איריס בנטולילה אתי הרשקוביץ‬
‫קורס מורים יוני ‪2015‬‬
‫עמוד ‪1‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫מהו דפדפן‬
‫)‪ (Browser‬הוא תוכנה המציגה דפי אינטרנט ומאפשרת לעבור בין דפים שונים (פעולת‬
‫הדפדוף מכונה גלישה )ולעתים אף לתקשר עם תוכן הדפים‪ .‬הדפדפן מוגדר כתוכנת לקוח היות‬
‫שהוא מקבל את דפי האינטרנט משרתי ה ‪-World Wide Web‬שבאינטרנט אך מורץ על מחשבו‬
‫של הגולש‪ .‬היכולת הבסיסית ביותר של תוכנת הדפדפן היא לקבל כתובת אינטרנט מהמשתמש‬
‫ולהציג את דף האינטרנט שנמצא בכתובת זו‪ .‬הצגת התוכן כוללת לכל הפחות את המלל שנמצא‬
‫בדף האינטרנט המבוקש‪ ,‬אך לרוב כוללת גם הצגת גרפיקה ותמונות ויכולת להוריד קבצים‬
‫מהאינטרנט אל המחשב‪ .‬דפדפנים מתקדמים מציגים אף סרטונים ומולטימדיה‪.‬‬
‫תוכנות נפוצות‪ :‬כרום‪ ,‬אקספלורר‪.‬‬
‫דוגמה לדפדפן‬
‫הקוד אחרי‬
‫עמוד ‪2‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫עמוד ‪3‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫כיצד עורכים דף ב ‪?HTML‬‬
‫עורך פשוט קיים בכל מחשב ונקרא‬
‫"פנקס הרשימות" (‪ (notepad.exe‬באמצעותו נכתוב את דף ה ‪HTML‬‬
‫אפשר לכתוב בעברית ובאנגלית‪(.‬המעבר יבוצע על ידי‬
‫‪ Shift + Alt‬שמאלי )‬
‫להפעלה ‪ :‬התחל > הפעלה > ‪notepad‬‬
‫יש אפשרות לכתוב בתוכנות מתקדמות יותר‬
‫‪http://www.xn--7dbbqer5d.co.il/%D7%91%D7%A0%D7%99%D7%99%D7%AA‬‬‫‪%D7%90%D7%AA%D7%A8‬‬‫‪%D7%90%D7%99%D7%A0%D7%98%D7%A8%D7%A0%D7%98/%D7%91%D7‬‬
‫‪%A0%D7%99%D7%99%D7%AA-%D7%90%D7%AA%D7%A8‬‬‫‪%D7%9C%D7%91%D7%93.html‬‬
‫‪Dreamweaver‬‬
‫‪HTML‬‬
‫מהי שפת ‪? HTML‬‬
‫המילה ‪ HTML‬הינה ראשי תיבות של ‪ Hyper Text Markup Language‬משמעות השם‬
‫שניתן לקשר בין דפים שונים ע"י לחצנים המהווים קישור או לקשר לקבצים שונים ע"י מילת‬
‫קישור (היפר טקסט)‪.‬‬
‫באמצעות שפה זו‪ ,‬ניתן לכתוב ולעצב דפי אינטרנט המוצגים על ידי הדפדפן שבאמצעותו אנו‬
‫גולשים באינטרנט‪.‬‬
‫שפה זו מורכבת מאוסף של תגיות ( = לפקודות) שונות המאפשרות להציג תוכן (טקסט)‪,‬‬
‫הגדרת פסקאות‪ ,‬הצגת תמונות‪ ,‬טבלאות‪ ,‬קישורים‪ ,‬טפסים ועוד‪.‬‬
‫שפת ‪ HTML‬אינה שפת תכנות כמו סקראץ ‪ java ,‬מאחר ואין פקודות לוגיות כמו‪ :‬לולאות‪,‬‬
‫משתנים‪ ,‬תנאי אלא שפת סימון המאפשרת לקבוע את מאפייני הדף ( גודל גופן‪ ,‬טבלה‪ ,‬מיקום‪,‬‬
‫תמונה‪ ,‬צבע רקע הדף )‪.‬‬
‫עמוד ‪4‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫מבנה בסיסי של דף ‪:HTML‬‬
‫למעשה מבנה דף ‪ html‬הנו קבוע את התוכן שברצוננו להציג יש לכתוב בין התגיות בהתאם‪.‬‬
‫>‪<html‬‬
‫חלק זה‪ ,‬יכתבו הפקודות הקשורות לכל הדף‪ .‬פקודות אלו לא יוצגו בגוף האתר‬
‫>‪</title‬‬
‫כותרת דף האתר המופיע בפס הכחול בחלון‬
‫>‪<head‬‬
‫>‪<title‬‬
‫>‪</head‬‬
‫בחלק זה‪ ,‬יכתבו כל המרכיבים אשר יוצגו בדף האתר‬
‫>‪<body‬‬
‫בגוף הדף כותבים את תוכן האתר‪ -‬ז"א כל דבר שנרצה להציג כמו‪ :‬טקסט‪ ,‬תמונה‪ ,‬טבלה‪,‬‬
‫קישור‬
‫>‪</body‬‬
‫>‪</html‬‬
‫שימו ‪‬‬
‫‪‬‬
‫‪‬‬
‫כל תגית נכתבת בתוך < > לדוגמה >‪<body‬‬
‫יש תגית פותחת < שם תגית > ויש תגית סוגרת < שם תגית ‪>/‬‬
‫לדוגמה‬
‫< ‪ >/title‬אתר הראשון שלי >‪<title‬‬
‫תגית‬
‫סוגרת ‪/‬‬
‫כותרת האתר‬
‫תגית פותחת‬
‫תרגיל ‪ – 1‬התנסות ראשונה‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫היכנסו לעורך ‪html‬‬
‫כתבו לאתר את הכותרת " האתר הראשון שלי בשפת ‪"HTML‬‬
‫בגוף האתר כתבו את שמכם ומשפחה‪ ,‬כיתה ושנה‬
‫שמרו את הדף בתיקיה שלכם בשם תרגיל ‪ – 1‬אתר הראשון‬
‫הציגו את הדף הראשון שלכם בתצוגת דפדפן‬
‫עמוד ‪5‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫תגיות‬
‫תג‪ -‬הנו פקודה אשר קובע מה יוצג בדף האתר‪ .‬הוראת התג תמיד תכתב בתוך סוגריים‬
‫משולשים < שם התג >‪.‬‬
‫סוגי תגיות‪:‬‬
‫‪‬‬
‫‪‬‬
‫תגים תוחמים‪ -‬צמד התגים שתמיד מופעים ביחד (תג פותח ותג סוגר)‪.‬‬
‫תג בודד‪ -‬תג עצמאי ללא תג סגירה‪ .‬לדוג < ‪ >br‬מעבר שורה‬
‫תכונות וערך התכונה (מאפיין)‬
‫מהי תכונה ?‬
‫כל תג מייצג אובייקט כלשהו ובעל מאפיינים שונים‪ .‬למעשה ניתן לומר שכל מאפיין מוגדר‬
‫כתכונה אשר יכולה לקבל ערך כלשהו‪.‬‬
‫דוגמה לאובייקט גופן >‪>font‬‬
‫ערך‬
‫תכונה‬
‫‪face‬‬
‫סוג הגופן‬
‫דוד‬
‫‪size‬‬
‫גודל גופן‬
‫‪12‬‬
‫‪color‬‬
‫צבע הגופן‬
‫ירוק‬
‫מבנה פקדה‬
‫<"ערך נבחר" = תכונה של שם התג >‬
‫> "‪>font face = "Arial‬‬
‫ערך‬
‫עמוד ‪6‬‬
‫תכונה‬
‫אובייקט‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫תרגיל ‪ -2‬כותבים שורות קוד‬
‫כתבו את שמכם הפרטי ומשפחה בהתאם להוראות הבאות‪:‬‬
‫‪ .1‬כתבו שורת קוד לתג גופן ‪ font‬סוג גופן אריאל ____________________________‬
‫‪ .2‬כתבו שורת קוד לתג גופן ‪ font‬גודל גופן ‪_____________________________ 16‬‬
‫‪ .3‬כתבו שורת קוד לתג גופן ‪ font‬צבע כחול _______________________________‬
‫‪ .4‬כתבו שורת קוד לתג גופן ‪ font‬צבע אדום בגודל ‪_________________________ 22‬‬
‫‪ .5‬כתבו שורת קוד לתג גופן ‪ font‬צבע ירוק בגודל ‪ 32‬מסוג מרים __________________‬
‫______________________________________________________________‬
‫תגיות ומשמעותן לעיצוב גופן‬
‫להל"ן רשימת התגים‪ ,‬תכונות וערכים‬
‫שם תג‬
‫‪Font‬‬
‫תכונה‬
‫‪face‬‬
‫<‪ >/font‬שלום <"‪ >font face="david‬כל סוג גופן הקיים בחלון ‪.‬‬
‫‪Arial, david, miriam‬‬
‫‪size‬‬
‫<‪ >/font‬לך <"‪ >font size="14‬גודל הגופן אפשרי הקיים‬
‫בחלון ‪6,8,12,22,26‬‬
‫‪color‬‬
‫>‪>b‬‬
‫דוגמה‬
‫<‪ >/font‬איריס <"‪ >font color="red‬שם הצבע או קוד ‪red,‬‬
‫‪green‬‬
‫<‪ >/b‬שלום < ‪ >b‬הקלדת טקסט רצוי שיוצג‬
‫מודגש בין תג פותח לתג‬
‫סוגר‬
‫‪BOLD‬‬
‫הדגשה‬
‫>‪>u‬‬
‫<‪ >/u‬שלום < ‪ >u‬הקלדת טקסט רצוי שיוצג‬
‫עם קו תחתי בין תג פותח‬
‫לתג סוגר‬
‫‪Underlin‬‬
‫‪e‬‬
‫קו תחתי‬
‫>‪>i‬‬
‫<‪ >/i‬שלום < ‪ >i‬הקלדת טקסט רצוי שיוצג‬
‫ככתב נטוי בין תג פותח‬
‫לתג סוגר‬
‫‪Italic‬‬
‫כתב‬
‫מוטה‬
‫> ‪> small‬‬
‫ערך אפשרי‬
‫<‪ >/small‬שלום < ‪ >small‬הקטנת גודל האותיות‬
‫ברמה אחת מערך ברירת‬
‫המחדל בין תג פותח לתג‬
‫סוגר‬
‫הקטנת‬
‫גודל‬
‫עמוד ‪7‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫> ‪>big‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫<‪ >/ big‬שלום < ‪ >big‬הגדלת גודל האותיות‬
‫ברמה אחת מערך ברירת‬
‫המחדל בין תג פותח לתג‬
‫סוגר‬
‫תרגיל ‪ – 3‬חוקרים את התגיות‬
‫השלימו את ההוראות או את תצוגת דף האינטרנט בהתאם להוראות בטבלה הבאה‪:‬‬
‫בשורות הריקות כתבו שורות ‪ html‬כרצונכם‪.‬‬
‫תצוגת דפדפן‬
‫הוראה‬
‫<‪ >/font‬שלום <" ‪font‬‬
‫‪>face="david‬‬
‫<‪ >/font‬לך <"‪>font size="14‬‬
‫<‪ >/font‬איריס <"‪>font color="red‬‬
‫<‪ >/b‬שלום < ‪>b‬‬
‫<‪ >/u‬שלום < ‪>u‬‬
‫<‪ >/i‬שלום < ‪>i‬‬
‫<‪ >/small‬שלום < ‪>small‬‬
‫<‪ >/ big‬שלום < ‪>big‬‬
‫שפת תכנות ‪html‬‬
‫ברוכים הבאים לאתר‬
‫מקיף רגר ( צבע ירוק‪ ,‬גודל ‪)20‬‬
‫שנה ‪ ( 2013‬מודגש‪ ,‬קו תחתי‪ ,‬צבע כחול)‬
‫עמוד ‪8‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫סיכום‬
‫למרבית התגים יש תג _________ותג סוגר‪.‬‬
‫לכל תג יש תכונה וערך‪ ,‬למשל ‪ face‬היא תכונה של ___________ וערך יכול להיות ____‪.‬‬
‫באמצעות תכונת _________קובעים את גודל הגופן אם נרצה להוסיף קו תחתי לטקסט נעזר‬
‫בתכונה __________‪.‬‬
‫בעזרת תכונה ‪ big‬נגדיל את ___________ ברמה אחת מברירת המחדל את הטקסט הכתוב‬
‫לאחר תג פותח לעומת תכונת ____________אשר מקטינה את ________ברמה אחת מערך‬
‫ברירת המחדל מכתיבת תג פותח‪.‬‬
‫המשך תגיות – עיצוב גראפי‬
‫שם תג‬
‫> ‪>br‬‬
‫תג בודד‬
‫דוגמה‬
‫ערך‬
‫שורת‬
‫רווח‬
‫(מעבר‬
‫שורה‬
‫חדשה)‬
‫תצוגת דפדפן\ ערכים‬
‫לומדים מחשבים <" ‪ font‬לומדים מחשבים‬
‫‪>face="david‬‬
‫בכייף‬
‫<‪> / font‬‬
‫> ‪>br‬‬
‫<‪ >/font‬בכייף <"‪>font face="arial‬‬
‫> ‪>hr‬‬
‫תג בודד‬
‫יוצר קו‬
‫אופקי‬
‫מבנה פקודה‬
‫< "ערך" = תכונה ‪> hr‬‬
‫<"‪>hr size="14‬‬
‫‪Size‬‬
‫עובי‬
‫הקו‬
‫ברירת המחדל ‪ 3‬פיקסל‬
‫<"‪>hr width ="60‬‬
‫‪Width‬‬
‫רוחב‬
‫הקו‬
‫או להגדיר באחוזים‬
‫שים לב‪ -‬אחוז מרוחב העמוד לדוגמה‬
‫‪ 60%‬מרוחב העמוד‬
‫<"‪>hr width ="50%‬‬
‫עמוד ‪9‬‬
‫=‪<hr size="5" width‬‬
‫>‪"80"/‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫<‪Left, right, center, >hr align ="left"/‬‬
‫‪Align‬‬
‫ברירת המחדל מרכז‬
‫הגדרת‬
‫מיקום‬
‫הקו‬
‫‪Nosha‬‬
‫‪de‬‬
‫‪<hr size="5" width=40%‬‬
‫>‪color="red" align=right/‬‬
‫< ‪>hr noshade‬‬
‫ברירת המחדל קו עם צל‬
‫ביטול‬
‫הצללה‬
‫תרגיל ‪4‬‬
‫‪ .1‬פתחו דף עורך ‪ html‬ושמרו בשם תרגיל ‪4‬‬
‫‪ .2‬כתבו שורות קוד הבאות‪:‬‬
‫‪ .1‬הציגו את הטקסט הבא "אם אין אני לי מי לי" בצבע אדום‪ ,‬בגופן אריאל ובגודל‬
‫‪ 12‬גופן‪.‬‬
‫‪ .2‬הוספו הוראה כך שהטקס יוצג בצד ימין‬
‫‪ .3‬הוסיפו הוראה שיוצג קו אופקי באורך ‪70‬‬
‫‪ .4‬הוסיפו הוראה שעובי בקו שיוצג כ‪30% -‬‬
‫‪ .5‬כתבו הוראה אשר תבטל את הצללה‪.‬‬
‫תרגיל ‪5‬‬
‫‪ .1‬פתחו דף עורך ‪ html‬ושמרו בשם תרגיל ‪5‬‬
‫‪ .2‬כתבו את ההוראות בהתאם לתצוגת הדף הבא‬
‫ירושלים – עיר בירת ישראל‬
‫‪ .3‬המשך תגיות – עיצוב כותרות‬
‫שם תג‬
‫> ‪>!-- --‬‬
‫תג הערות‬
‫תיעוד‬
‫תכונה‬
‫כתיבת‬
‫הערות ‪-‬‬
‫לא מוצגת בדף‬
‫האינטרנט‬
‫עמוד ‪10‬‬
‫מבנה \דוגמה‬
‫תצוגת דפדפן\‬
‫ערכים‬
‫לומדים מחשבים <" ‪ font‬לומדים מחשבים‬
‫‪>face="david‬‬
‫בכייף‬
‫<‪> / font‬‬
‫> ‪ --‬שימוש בהערה – לצורך‬
‫הסבר ‪<!--‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫<‪ >/font‬בכייף <"‪>font face="arial‬‬
‫‪ <h1>….</h‬כותרות ראשית‬
‫>‪1‬‬
‫>‪<h6‬עד >‪<h1‬‬
‫‪:‬‬
‫‪:‬‬
‫ ‪ h1‬גדול‬‫‪:‬‬
‫‪:‬‬
‫‪<h6>….</h‬‬
‫>‪6‬‬
‫‪ h6-‬קטן‬
‫‪Align‬‬
‫מיקום הכותרת‬
‫בדף בצד‬
‫>‪</h1> <br‬כותרת רצויה <‪< h1‬‬
‫הכותרת תמיד תהיה מודגשת‪ ,‬מומלץ‬
‫להשתמש פעם אחת בדף‬
‫>‪</h6> <br‬כותרת רצויה <‪< h6‬‬
‫‪Left, right,‬‬
‫כותרת רצויה‬
‫כותרת רצויה‬
‫סרט חדש‬
‫>‪</h1‬סרט חדש < "‪<h1 align= "left‬‬
‫>‪<br‬‬
‫‪center,‬‬
‫‪<marquee‬‬
‫>‬
‫טקסט בתנועה‬
‫טקסט נע > ‪,.‬ערך =תכונה‬
‫‪<marquee‬‬
‫>‪</marquee‬‬
‫טקסט בתנועה‬
‫‪- Direction‬‬
‫כיוון התנועה‬
‫‪ - left‬ימין‬
‫לשמאל‬
‫כותרת בתנועה לרוחב המסך‬
‫>‪<marquee‬‬
‫>‪</marquee‬‬
‫>"‪<marquee direction =" up‬‬
‫עולים למעלה ‪....‬‬
‫>‪</marquee‬‬
‫עולים למעלה ‪....‬‬
‫‪ - Right‬משמאל‬
‫לימין‬
‫‪ -Up‬מלמטה‬
‫למעלה‬
‫‪ Down‬מעלה‬
‫למטה‬
‫ברירת מחדל – אינסוף ‪infinite‬‬
‫‪Loop‬‬
‫עמוד ‪11‬‬
‫יורדים מטה‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫הגדרת מספר‬
‫הפעמים‬
‫שהכתובית תזוז‬
‫"‪<marquee direction =" down‬‬
‫>‪loop=4‬‬
‫יורדים למטה‬
‫>‪</marquee‬‬
‫‪Bgcolor‬‬
‫"‪<marquee direction =" down‬‬
‫= ‪bgcolor‬‬
‫רקע הכתובית‬
‫הנעה‬
‫‪Going down‬‬
‫>‪Red"> going down </marquee‬‬
‫להרחבה על תכונות נוספות של תגית ‪ markquee‬קראו באתר ויקיספר‬
‫‪http://he.wikibooks.org/wiki/HTML/%D7%94%D7%AA%D7%92%D7%99%‬‬
‫‪D7%AA_marquee‬‬
‫תרגיל ‪ – 6‬שימוש כותרות‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫‪.8‬‬
‫פתחו דף עורך ‪ html‬ושמרו בשם תרגיל ‪ -6‬שימוש בכותרות‬
‫כתבו שורות קוד בהתאם לתצוגת דפדפן‬
‫היעזרו בתגיות ‪h1-h6‬‬
‫‪10‬‬
‫הוסיפו תגיות כך שכל ספרה תוצג בצבע שונה‬
‫‪8‬‬
‫לבחירתכם‪.‬‬
‫______________________________‬
‫‪6‬‬
‫הוסיפו תגיות כך‪ ,‬שהספרות יוצגו במרכז הדף‬
‫‪4‬‬
‫_______________________________‬
‫הוסיפו תגיות כך‪ ,‬שהספרות ‪ 10‬ו ‪ 2‬יוצגו עם קו‬
‫‪2‬‬
‫תחתי‪.‬‬
‫_______________________________‬
‫הוסיפו לכותרות את המילה המתארת את‬
‫המספר ומודגשת לדוגמה ‪ – 10‬עשר‬
‫___________________________________________________________‬
‫כתבו את רצף התוכנית‬
‫__________________________________________________________‬
‫__________________________________________________________‬
‫__________________________________________________________‬
‫__________________________________________________________‬
‫__________________________________________________________‬
‫__________________________________________________________‬
‫___________________________________________________________‬
‫עמוד ‪12‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫תרגיל ‪ – 7‬כותרת בתנועה‬
‫‪ .1‬פתחו דף עורך ‪ html‬ושמרו בשם תרגיל ‪ -7‬כותרת בתנועה‬
‫‪ .2‬בחרו לכם כותרת ראשית שברצונכם להציג בדף למשל כותרת שלי בתזוזה מצד‪....‬‬
‫‪ .3‬הוסיפו תכונה לתגית ‪ markquee‬שהכותרת תנוע מצד ימין לשמאל‪ ,‬רשמו את שורת הקוד‬
‫_______________________________________________________________‬
‫_______________________________________________________________‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫‪.8‬‬
‫הוסיפו תכונה לתגית אשר תציג את כותרת בצבע שונה לבחירתכם‪ ,‬רשמו את שורת הקוד‬
‫____________________________________________________________‬
‫הוסיפו תכונה לתגית שהכותרת תנוע ‪ 7‬פעמים‪ ,‬רשמו את שורת הקוד‬
‫______________________________________________________________‬
‫הוסיפו תכונה לתגית כך שהכותרת תוצג מצד ימין של הדף‪ ,‬רשמו את שורת הקוד‬
‫______________________________________________________________‬
‫שנו את התכונה כך שהכותרת תנוע מלמטה למעלה‪ ,‬רשמו את שורת הקוד‬
‫______________________________________________________________‬
‫שנו את התכונה כך שהכותרת תנוע מלמעלה למטה ‪ ,‬רשמו את שורת הקוד‬
‫______________________________________________________________‬
‫המשך תגיות ‪ -‬מכניסים צבע לדפי האינטרנט‬
‫ניתן להגדיר צבע לגופן‪ ,‬לרקע ב‪ 2 -‬דרכים‪:‬‬
‫‪ .1‬כתיבת שם הצבע כמו‪ :‬ירוק‪ ,‬צהוב‪ ,‬אדום‬
‫‪ .2‬כתיבת ערך קוד הצבע ב‪fff000#" RGB -‬‬
‫‪red , green‬‬
‫בעת כתיבת שורות הקוד ניתן להגדיר את הצבע באחת משני הדרכים‪.‬‬
‫טבלת המכילה רשימת חלקית של הצבעים וערכי הצבע (‪( HEX‬‬
‫ערך הקסדצימלי‬
‫שם הצבע‬
‫‪#F0F8FF‬‬
‫‪AliceBlue‬‬
‫‪#FAEBD7‬‬
‫‪AntiqueWhite‬‬
‫‪#00FFFF‬‬
‫‪Aqua‬‬
‫‪#7FFFD4‬‬
‫‪Aquamarine‬‬
‫‪#F0FFFF‬‬
‫‪Azure‬‬
‫‪#F5F5DC‬‬
‫‪Beige‬‬
‫‪#FFE4C4‬‬
‫‪Bisque‬‬
‫‪#000000‬‬
‫‪Black‬‬
‫‪#FFEBCD‬‬
‫‪BlanchedAlmond‬‬
‫‪#0000FF‬‬
‫‪Blue‬‬
‫‪#8A2BE2‬‬
‫‪BlueViolet‬‬
‫‪#A52A2A‬‬
‫‪Brown‬‬
‫עמוד ‪13‬‬
‫גוון הצבע‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫גוון הצבע‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫ערך הקסדצימלי‬
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC143C
#00FFFF
#00008B
‫שם הצבע‬
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
‫לרשימה מלאה של הצבעים וערכי הקוד תוכלו למצוא באתר או חפשו בגוגל רשמית צבעים‬
.html -‫ב‬
\‫תצוגת דפדפן‬
‫ערכים‬
‫מבנה \דוגמה‬
‫תכונה‬
‫שם תג‬
<body bgcolor = " ‫ <"צבע נבחר‬....</body>
Bgcolor
<body>
<body bgcolor =" red "<....</body>
<body bgcolor ="#7FFF00"<....</body>
‫שינוי צבע‬
‫רקע הדף‬
<body text =" green" >….</body>
<body text =" blue" >….</body>
<body text =" #A52A2A " >….</body>
14 ‫עמוד‬
Text
‫הגדרת‬
‫צבע‬
‫הגופן של‬
‫דף‬
‫האינטרנט‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫תרגיל ‪ – 9‬עיצוב אישי‬
‫‪ .1‬עצבו דף אינטרנטי כרצונכם ובחרו טקסט כלשהו שברצונכם להציג בדף האינטרנט‬
‫‪ .2‬שמרו אותו כתרגיל ‪ - 9‬עיצוב אישי‬
‫‪ .3‬השתמשו בתגיות הבאות בעיצובו של הדף‪:‬‬
‫‪ ‬כותרת‬
‫‪ ‬צבע‬
‫‪ ‬גופן \ גודל גופן\ סוג גופן‬
‫‪ ‬כותרת בתנועה‬
‫‪ ‬רקע לכותרת בתנועה‬
‫‪ ‬קו תחתי‬
‫‪ ‬מיקום טקסט‪ :‬מרכז‪ ,‬ימין‪ ,‬שמאל‬
‫‪ ‬הערות – הסבירו לפחות ‪ 3‬שורות הקוד לבחירתכם את משמעותן‬
‫תרגיל ‪ - 10‬שיר בצבעים‬
‫‪ .1‬פתחו את עורך ‪ html‬ושמרו את הדף בשם תרגיל ‪ – 10‬כותבים בצבע לפניכם קטע‬
‫מתוך משיר ציור בצבעים של עליזה עזיקרי מילים‪ :‬לאה נאור לחן‪ :‬נחצ'ה היימן‬
‫בצבעים‬
‫ציירתי לי את פגישתנו מאתמול‬
‫היו לי צבעים נפלאים‬
‫אדום וצהוב לבן וכחול‬
‫וציירתי בכל הצבעים‬
‫צבעתי יפה את עיניו הכחולות‬
‫ואת תלתליו הכהים‬
‫אך בשביל החיוך החיוך בעיניו‬
‫לא הספיקו לי כל הצבעים‬
‫ואת שמלתי אז צבעתי לבן‬
‫בגדי אדומים ונאים‬
‫אך כדי לצייר את לבי הנרגש‬
‫לא הספיקו לי כל הצבעים‬
‫הוא קטף לי פרחים אדומים וצהובים‬
‫יפים וזקופים וגאים‬
‫אך כדי לצייר את ריחם המשכר‬
‫לא הספיקו לי כל הצבעים‬
‫‪ .2‬העתיקו את השיר לדף האינטרנט שלכם ובכל שורה שמצוין צבע כתבו את המילה‬
‫באותו צבע למשל אדום היעזרו בתגיות והתכונות בהתאם‪.‬‬
‫‪ .3‬בחרו צבע רקע לדף ‪ ,‬הקפידו על ניגודיות בין צבע הגופן ולרקע‬
‫עמוד ‪15‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫תרגיל ‪ - 11‬כותבים מונחים‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫לפניכם ‪ 6‬מושגים הקשורים לנושא האינטרנט‪.‬‬
‫‪ ‬רשת אינטרנט‬
‫‪ ‬שרת‬
‫‪ ‬דפדפן‬
‫‪ ‬מבנה אתר‬
‫‪ ‬מבנה כתובת אינטרנט‬
‫‪ ‬דף הבית‬
‫בחרו ‪ 3‬מושגים וכתבו את ההסבר לכל מושג‪ .‬היעזרו במידע שתמצאו ברשת‬
‫האינטרנט‪ .‬הקפידו לא לבצע העתק הדבק ממקור המידע אלא כתבו במילים שלכם עד‬
‫‪ 7‬שורות לכל מושג‪.‬‬
‫עצבו את הדף בדומה לתמונה‪ ,‬היעזרו בתגיות ובתכונות שלמדתם עד כה‬
‫שלבו ‪:‬‬
‫‪ ‬כותרת בתנועה‬
‫‪ ‬צבעים‬
‫‪ ‬סוגי גופן‬
‫‪ ‬קו אופקי‬
‫תגיות‪ -‬פסקאות ורשימות‬
‫בתגית >‪ <p‬ניתן להציג את תוכן הפסקה ולעצב את הטקסט כמו‪:‬‬
‫מאפשר מעבר שורה בסוף פסקה ( כמו > ‪)> br‬‬
‫מוסיף שורה ריקה לפני סוף פיסקה‬
‫מוסיף שורה ריקה אחרי פסקה‬
‫אפשר להשתמש בתגית זאת כבודדת ( ללא תג סוגר)‬
‫דף מושגים‬
‫מושג ראשון‬
‫הסבר\הגדרת המושג‬
‫מושג שני‬
‫הסבר\הגדרת המושג‬
‫מושג שלישי‬
‫הסבר\הגדרת המושג‬
‫עמוד ‪16‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫שם תג‬
‫>‪<p‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫מבנה \דוגמה‬
‫תכונה‬
‫הגדרת‬
‫פסקה‬
‫תצוגת דפדפן\‬
‫ערכים‬
‫>‪ ...</p‬טקסט נבחר שיוצג בפסקה >‪<p‬‬
‫תוחם‬
‫>‪<div‬‬
‫הגדרת‬
‫קטע‬
‫טקסט‬
‫עם‬
‫שימוש‬
‫מלא בכל‬
‫התכונות‬
‫העצוב‬
‫‪Direction‬‬
‫‪dir‬‬
‫כיוון‬
‫כתיבת‬
‫הטקסט‬
‫בדף \‬
‫פיסקה‬
‫>‪ ...</div‬טקסט נבחר שיוצג בפסקה>‪<div‬‬
‫>‪ ...</div‬טקסט נבחר > "‪<div align="center‬‬
‫>"‪<body dir= "rtl‬‬
‫טקסט נבחר‬
‫‪ Ltr‬משאל לימין‬
‫>"‪ Rtl <html dir="ltr‬מימין לשמאל‬
‫רשימה סדורה‬
‫הנה רשימה של פריטים ממוספרים ‪ .... 3 ,2 ,1‬או באמצעות אותיות ( א‪ ,‬ב‪ ,‬ג‪ )...‬לשם כך‬
‫נעזר בתגיות ‪.>ol<......</ol> ordered list‬‬
‫כל פריט ברשימה יתוחם בתג ‪list item‬‬
‫ז"א‬
‫>‪...>/li‬תוכן הפריט‪<li> ..‬‬
‫מבנה פקודה‬
‫< "ערך "= ‪" Start‬ערך " = ‪<Oi type‬‬
‫>‪ </li‬שם הפריט הראשון ברשימה >‪<li‬‬
‫>‪ </li‬שם הפריט השני ברשימה >‪<li‬‬
‫>‪ </li‬שם הפריט השני ברשימה >‪<li‬‬
‫>‪</ol‬‬
‫‪ - Type‬מציין את סוג הרשימה כמו‪ :‬מספר (‪ ,)1‬ספרות רומיות (‪ ,) i-I‬אותיות (‪)A a‬‬
‫‪ - Start‬מציין את הערך ההתחלתי של המספור למשל המספור מתחיל מ‪ 1 -‬או מתחיל מ‪.5 -‬‬
‫עמוד ‪17‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫תרגיל ‪ – 12‬כתובים רשימה ממוספרת‬
‫‪ .1‬העתיקו את שורות הקוד הבאות לעורך‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬כותבים רשימות>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<br‬‬
‫>‪"</font <color="blue" size="14‬רשימת קניות >‪<font‬‬
‫>"‪<oi start="1" type="I‬‬
‫>‪</li‬חלב >‪<li‬‬
‫>‪</li‬לחם >‪<li‬‬
‫>‪</li‬גלידה >‪<li‬‬
‫>‪</ol‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .2‬הריצו את התוכנית וציינו מהו הפלט שמתקבל בתצוגת הדפדפן‬
‫‪ .3‬הוסיפו לרשימה עוד ‪ 4‬פריטים שונים כרצונכם כמו סוכריות‪ ,‬גבינה‪ ,‬עוגה‪ ,‬קמח‬
‫‪ .4‬שנו את סוג המספור למספר רציף מ‪ 1 -‬עד ‪ ,7‬כתבו את שורת הקוד ___________‬
‫__________________________________________________________‬
‫__________________________________________________________‬
‫‪ .5‬שנו את הערך התחלתי של המספור שיתחיל מ‪ , 5 -‬כתבו את שורת הקוד‬
‫__________________________________________________________‬
‫__________________________________________________________‬
‫עמוד ‪18‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫‪ .6‬הוסיפו הוראה כך שרקע הדף יהיה תכלת (בהיר ) ‪ ,‬כתבו את שורת הקוד ______‬
‫______________________________________________________‬
‫‪ .7‬שמרו את הקובץ בשם תרגיל ‪ – 12‬כותבים רשימות‬
‫תרגיל ‪ – 13‬מתכון להכנת כדורי שוקולד‬
‫‪ .1‬כתבו שורות קוד כך שיוצג על דף האינטרנט את המתכון הבא ‪:‬‬
‫מצרכים‪:‬‬
‫‪ 200 .1‬גרם שוקולד‬
‫‪ 1 .2‬חבילה ביסקוויטים‬
‫‪ 50 .3‬גרם חמאה‬
‫‪ .4‬חצי כוס יין‬
‫‪ 3 .5‬כפות קקאו‬
‫‪ .6‬חצי כוס סוכר‬
‫אופן הכנה‬
‫‪ .7‬לערבב את החומרים הבאים‪ :‬שוקולד‪ ,‬חמאה‪ ,‬יין‪ ,‬סוכר וקקאו בתוך סיר על‬
‫האש‪.‬‬
‫‪ .8‬את הביסקוויטים יש לפורר לחתיכות קטנות‬
‫‪ .9‬להוסיף את הביסקוויטים לתערובת השוקולד‬
‫‪ .10‬צרו כדורים קטנים‬
‫‪ .11‬ניתן לקשט עם קוקוס או סוכריות צבעוניות‬
‫‪.2‬‬
‫הוסיפו לדף האינטרנט את האלמנטים הבאים‪:‬‬
‫‪ .1‬רקע לדף‬
‫‪ .2‬הגדירו כותרת ‪ H1‬כדור שוקולד בצבע אדום ( או צבע אחר לבחירתכם)‬
‫‪ .3‬הגדירו כותרות ‪ H2‬מצרכים ואופן הכנה בצבע כחול( או צבע אחר לבחירתכם)‬
‫‪ .4‬שנו את סוג הגופן לאופן ההכנה‬
‫‪ .3‬הנכם יכולים להוסיף או לשדרג את המתכון כרצונכם‬
‫‪ .4‬שמרו את הקובץ בשם תרגיל ‪ – 13‬כדורי שוקולד‬
‫עמוד ‪19‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫כתיבת רשימה עם תבליט – רשימה לא סדורה‬
‫ניתן לערוך רשימה אך ללא מספור אלא בשימוש בתבליט‪ .‬למשל היתרונות בשימוש‬
‫האינטרנט הם‪:‬‬
‫‪ ‬נגישות למידע‬
‫‪ ‬מידע עדכני‬
‫‪ ‬מידע מגוון ממספר מקורות מידע‬
‫‪ ‬שימוש במולטימדיה להמחשה‬
‫מבנה פקודה לרשימה לא סדורה ‪<ul>………</ul> Unordered list‬‬
‫<"ערך "= ‪<ul type‬‬
‫>‪</li‬פריט ‪<li>1‬‬
‫>‪</li‬פריט ‪<li>2‬‬
‫>‪</li‬פריט ‪<li>3‬‬
‫>‪</ul‬‬
‫‪ Type‬יכול לקבל ערכים ‪:‬‬
‫‪ -Circle ‬עיגול ריק (ברירת המחדל)‬
‫‪ – Square ‬ריבוע מלא‬
‫‪ –Disc ‬עיגול שחור מלא‬
‫תרגיל ‪ – 14‬יתרונות וחסרונות בשימוש רשת האינטרנט‬
‫‪ .1‬פתחו דף חדש ושמרו בשם יתרונות וחסרונות בשימוש ברשת האינטרנט‬
‫‪ .2‬העתיקו את שורות הקוד הבאים‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬כותבים רשימות>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<br‬‬
‫>"‪</font color="blue" size="14‬יתרונות בשימוש באינטרנט >‪<font‬‬
‫>"‪<ul type="square‬‬
‫>‪<li‬נגישות למידע>‪<br‬‬
‫>‪</li‬‬
‫>‪</li‬מידע עדכני >‪<li‬‬
‫>‪</li‬שימוש במולטימדיה >‪<li‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫עמוד ‪20‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫‪ .3‬הוסיפו כותרת בשם חסרונות‪ ,‬כתבו את שורות קוד‬
‫___________________________________________________‬
‫‪ .4‬הוסיפו עוד ‪ 4‬חסרונות בשימוש ברשת האינטרנט‪ ,‬היעזרו במידע שמצוי ברשת האינטרנט‪.‬‬
‫‪ .5‬הגדירו את התבליט מסוג עיגול ריק‬
‫‪ .6‬הוסיפו את האלמנטים הבאים לדף‬
‫‪ ‬צבע רקע לדף _______________________________________‬
‫‪ ‬כותרות ‪ H2‬ליתרונות ולחסרונות _________________________‬
‫‪ ‬צבע כותרות בצבעים שונים _____________________________‬
‫‪ ‬גודל הגופן יהיה ‪ 12‬מסוג דוד ____________________________‬
‫שדרוג התוכנית – רשימה מקוננת‬
‫ידוע שאחד החסרונות ברשת האינטרנט היא הסכנות כמו‪ :‬אנונימיות‪ ,‬התמכרות‪ ,‬הונאה‬
‫הוסיפו לרשימה של חסרונות היבט הנקרא סכנות ופרט את הסכנות המפורטות בדוגמה‬
‫‪‬‬
‫סכנות‪:‬‬
‫‪ o‬הונאה‬
‫‪ o‬אנונימיות‬
‫‪ o‬התמכרות‬
‫הוסיפו שורות קוד כך שתוצג הרשימה מקוונת‪.‬‬
‫רמז‪...‬‬
‫מתחת למילה סכנות פתחו תגית >‪ <ul‬רשמו את שאר הפריטים בין תגית >‪ </li‬הונאה >‪<li‬‬
‫וכך הלאה‪ .‬אך תשכחו בסוף לסגור את תגית >‪>/ul‬‬
‫תרגיל ‪ - 15‬פרויקט אישי שלכם‬
‫‪ .1‬בחרו נושא ותציגו את המידע המורחב בתבליטים או רשימה ממוספרת‬
‫לדוגמה מספר רעיונות‬
‫‪ o‬משורר ‪....‬כתב את השירים‪ ......... :‬בשנה ‪........‬‬
‫‪ o‬שטרות כסף בארץ‪ :‬שטר ‪ ₪ 200‬נושא את הדמות ‪ ...‬וכו'‪...‬‬
‫‪ o‬משפחת היונקים‪ :‬כוללת את החיות‪.........‬‬
‫‪ o‬סופרים‪ ......‬כתבו את ספרים‪..........‬‬
‫‪ o‬פיסיקאים מפורסמים כמו ניוטון‪ ...‬גילו את החוקים‪.....‬‬
‫‪ o‬צורה גאומטרית ‪ .....‬תכונות‪....‬‬
‫‪ .2‬הנכם יכולים לבחור נושא אחר שאינו מופיע ברשימה‪ ,‬היעזרו במידע הקיים ברשת‬
‫האינטרנט‪.‬‬
‫עמוד ‪21‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫‪ .3‬עצבו את הדף כך שהמידע שאספתם יוצג בדף האינטרנט כרשימה‪.‬‬
‫‪ .4‬שלבו אלמנטים כמו‪ :‬צבע גופן‪ ,‬צבע רקע‪ ,‬גודל גופן‪ ,‬תבליטים‪ ,‬רשימה ממוספרת‪,‬‬
‫כותרות שונות‪ ,‬פיסקה‪ ,‬כיוון כתיבה‪ ,‬כותרת נעה‪.‬‬
‫‪ .5‬שמרו את הקובץ בשם תרגיל ‪ – 15‬פרויקט אישי‬
‫שילוב תמונות בדף האינטרנט‬
‫אחד האלמנטים שבדף האינטרנט שמוסיפים עניין לדף הוא התמונה‪ .‬תמונה מאפשרת‬
‫להציג את הרעיון‪ ,‬מסר בצורה ויזואלית‪ .‬ברוח המשפט תמונה אחת שווה אלף מילים‪.‬‬
‫סוג (פורמט) סיומות לקבצי תמונה‪gif, jpeg, png ,image, :‬‬
‫מבנה פקודה לתמונה‬
‫< "סיומת‪ .‬שם תמונה‪/‬מיקום קובץ התמונה " = ‪src‬‬
‫שם התמונה הרצויה וסיומת‬
‫שם תג‬
‫>‪Img src‬‬
‫>‬
‫נתיב\ המקום שבו שמורה‬
‫התמונה‬
‫תכונה‬
‫מבנה \דוגמה‬
‫לפני הגדרת גודל רוחב התמונה‪ ,‬יש תחילה‬
‫לבדוק מהו רוחב התמונה המקורית‪ ,‬ע"י לחציה‬
‫מקש ימני של העכבר > מאפיינים‪.‬‬
‫הערכים נתונים בפיקסלים‪ .‬ניתן להגדיל או‬
‫להקטין את רוחב התמונה‪.‬‬
‫מומלץ להגדיל או להקטין את התמונה באותו יחס‬
‫‪Height=300‬‬
‫‪Height‬‬
‫הערכים נתונים בפיקסלים‪ .‬ניתן להגדיל או‬
‫להקטין את גובה התמונה‪.‬‬
‫בדומה לתכונת רוחב‬
‫עמוד ‪22‬‬
‫תג‬
‫התמונה‬
‫תצוגת דפדפן\‬
‫ערכים‬
‫‪width =200‬‬
‫‪width‬‬
‫רוחב‬
‫התמונה‬
‫מקור‬
‫התמונה‬
‫‪< img‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫>‪Img src‬‬
‫>‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫‪border‬‬
‫קביעת‬
‫"‪Border = " 5‬‬
‫רוחב‬
‫מסגרת‬
‫התמונה‬
‫ברירת המחדל היא ‪ 0‬ז"א ללא מסגרת‬
‫‪Alt‬‬
‫הקלדת תוכן\הסבר\שם לתמונה מומלץ לתת תוכן‬
‫משמעותי‪.‬‬
‫הוספת‬
‫כיתוב‬
‫לתמונה‬
‫הכיתוב יופיע שמצביע העכבר נוגע בתמונה‬
‫"כלב מקסים"=‪alt‬‬
‫כלב מקסים‬
‫תכנות נוספות שניתן לשלב בתגית תמונה‬
‫מספר דרכים לשילוב תמונה בדף אינטרנט‬
‫‪ .1‬צירוף קובץ – ז"א קובץ (תמונה) ציון נתיב מיקום התמונה השמורה במחשב‬
‫(מקומי\מוחלטת) חובה לציין את כל הנתיב ‪.‬‬
‫שם הקובץ‬
‫עם סיומת‬
‫תצוגת דפדפן‬
‫עמוד ‪23‬‬
‫שם‬
‫תיקייה‬
‫שם הכונן‬
‫קובץ‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫שילוב תמונה מאתר אינטרנט‬
‫מבנה פקודה‬
‫>"‪<img src= " url‬‬
‫כתובת ‪ url‬מלאה כולל שם‬
‫התמונה עם סיומת‬
‫תכונה רוחב ‪-‬‬
‫בפסקלים‬
‫תכונה גובה ‪-‬‬
‫בפסקלים‬
‫תצוגת דפדפן‬
‫רשמו את שורת הקוד שיש להוסיף לתוכנית אם נרצה להוסיף מסגרת בעובי של ‪ 4‬פיקסלים‬
‫_____________________________________________________________‬
‫____________________________________________________________‬
‫מהו הערך שיש לכתוב בתכונה ‪ border‬כך שהתמונה תוצג ללא מסגרת ___________‬
‫_____________________________________________________________‬
‫עמוד ‪24‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫תרגיל ‪ – 16‬תמונה ראשונה‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫‪.8‬‬
‫פתחו את עורך ‪ html‬ושמרו בשם תמונה ראשונה‬
‫בחרו נושא שברצונכם להציג מידע‬
‫הציגו את הנושא ע"י כותרת ( ‪ h1‬או כותרת בתנועה)‬
‫כתבו פסקה עד ‪ 10‬שורות המציגה את הנושא (ניתן להיעזר באינטרנט)‪.‬‬
‫בחרו תמונה רלוונטית היעזרו ברשת האינטרנט ושמרו את התמונות בתיקייה‬
‫עצבו דף את הדף (רקע‪ ,‬צבע טקסט‪ ,‬גודל גופן וכו'‪)...‬‬
‫הוסיפו את התמונה שבחרתם לדף‪ ,‬הוסיפו כיתוב לתמונה‪ ,‬מסגרת‬
‫בחרו תמונה נוספת רלוונטית לנושא שבחרתם והוסיפו את התמונה באמצעות‬
‫כתובת ‪ url‬לדף‪.‬‬
‫חקר תכונות נוספות לתגית ‪img‬‬
‫חפשו ברשת האינטרנט את משמעות התכונות הבאות‪ ,‬השלימו את המידע בטבלה‬
‫הבאה‪:‬‬
‫משמעות‬
‫תכונה‬
‫דוגמה‬
‫‪hspaces‬‬
‫‪vspaces‬‬
‫‪aling‬‬
‫שדרוג תרגיל ‪16‬‬
‫חזרו לתוכנית ושלבו תכונות אלו בתוכנית‬
‫סיכום‬
‫באמצעות תכונה ‪ hspace‬ניתן לצור רווח מצד _______או _____________בין‬
‫התמונה ל__________‪.‬‬
‫באמצעות תכונה ‪ vspace‬ניתן לצור רווח מ______ או מ_______________ בין‬
‫התמונה לטקסט‪.‬‬
‫כאשר הדפדפן לא מוצא את התמונה הרצויה הוא יציג בדף האינטרנט את הסימנים‬
‫___________________________________________________________‬
‫___________ ________________________________________________‬
‫עמוד ‪25‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫תרגיל ‪ 17‬סיכום – ערי בירה‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫בחרו עיר בירה כלשהי מרחבי העולם‬
‫חפשו ברשת האינטרנט ‪ 4‬תמונות המאפיינות את עיר הבירה‬
‫הציגו את המידע הבא באמצעות תבליט או רשימה סדורה‪:‬‬
‫שם המדינה‪ ,‬עיר הבירה‪ ,‬שפה‪ ,‬יבשת‪ ,‬סוג שלטון‪ ,‬דת‪ ,‬מטבע‬
‫הוסיפו את התמונות שבחרתם לדף האינטרנט שלכם הקפידו שאחת מהתמונות תהיה מפה‬
‫ועצבו כרצונכם‬
‫שלבו בעיצוב הדף את האלמנטים הבאים‪:‬‬
‫‪ ‬צבע רקע‬
‫‪ ‬צבע גופן‬
‫‪ ‬כותרת נעה‬
‫‪Alt ‬‬
‫‪Vspace\hspace ‬‬
‫‪Border ‬‬
‫‪height \ Width ‬‬
‫תוספת ‪ -‬שפת ‪ css‬עיצובים‬
‫שפת ‪ css‬מייצגת ן ראשי תיבות של ‪ .Sheets Style Cascading‬באמצעות שפה זו ניתן‬
‫הינה שפה המאפשרת לעצב ולשלוט במראה האתר (צבעים‪ ,‬רקעים‪ ,‬סוגי גופן‪ .).....‬שפה זו‬
‫משולבת בשפת ‪ html‬ובכך מרחב התמרון והשליטה טובה יותר על עיצוב האתר‪.‬‬
‫כיצד משלבים ‪ CSS‬בתוכנית ‪?html‬‬
‫ישנם מספר דרכים להשתמש ב‪ css -‬על ידי‪:‬‬
‫‪‬‬
‫הוספת ההוראות בראש העמוד בין התגית >‪</head‬‬
‫‪‬‬
‫הוספת ההוראות בגוף העמוד בצמוד לאלמנט הרצוי לעיצוב‪.‬‬
‫‪‬‬
‫קובץ חיצוני המכיל את ההוראות ובכך חוסכים מקום‬
‫>‪<head‬‬
‫מבנה פקודה‬
‫>"; ערך ‪ :‬תכונה ; ערך ‪ :‬תכונה"=‪<style‬‬
‫דוגמה‬
‫>";‪<p style="color: Blue; text-align:center‬‬
‫עמוד ‪26‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫שילוב תמונת כרקע לדף‬
‫ניתן להוסיף תמונה אשר תשמש כרקע לדף האינטרנט‪.‬‬
‫המלצות לבחירת תמונת רקע‪:‬‬
‫‪ ‬תמונה בהירה כך שיהיה ניתן לראות את הטקסט הכתוב‬
‫‪ ‬הקפידו שגודל התמונה גדול אחרת התמונה תשכפל את עצמה כמה פעמים‪.‬‬
‫‪ ‬מומלץ להשתמש בתמונות מיועדות לרקע‬
‫מבנה פקודה‬
‫<"סיומת הקובץ ‪.‬שם התמונה ‪ /‬מיקום קובץ התמונה" = ‪<body background‬‬
‫<"‪<body background ="image / bdog. gif‬‬
‫הוראות ‪CSS‬‬
‫‪css‬‬
‫‪ss‬‬
‫מומלץ להשתמש ב ‪ html‬בהוראות ‪ CSS‬למשל שימוש שילוב תמונות רקע‪.‬‬
‫מבנה פקודה של הוספת תמונת רקע ב‪CSS-‬‬
‫>";) הנתיב שבו התמונה שמורה (‪>body style= "background-image: url‬‬
‫נתיב שבו התמונה‬
‫שמורה‬
‫הוראה רקע‬
‫מתמונה‬
‫הוראת עיצוב‬
‫ב‪css -‬‬
‫הוראה‬
‫נכתבת בתוך‬
‫תגית ‪body‬‬
‫דוגמה‬
‫>";)‪>body style="background-image: url(bg1.jpg‬‬
‫עמוד ‪27‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫תצוגת דפדפן‬
‫כפי שניתן לראות תמונת הרקע משכפלת את עצמה מספר פעמים‪ .‬מהיבט העיצוב הדף מצב‬
‫זה אינו מומלץ‪ .‬ניתן לשנות את העיצוב בעזרת תכונות נוספות של תגית ‪ background‬ב‪-‬‬
‫‪.css‬‬
‫תכונה (מאפיין) ‪repeat‬‬
‫באמצעות תכונה זו ניתן להגדיר את מספר הפעמים שהתמונה תשוכפל על פני הדף‪.‬‬
‫מבנה פקודה‬
‫ערכים אפשריים לתכונה ‪repeat‬‬
‫משמעות‬
‫תכונה‬
‫‪Repeat‬‬
‫תמונת הרקע תחזור גם בצד האנכי והאופקי‬
‫‪repeat-x‬‬
‫תמונת הרקע יחזור על עצמו רק אופקי‬
‫עמוד ‪28‬‬
‫‪Background-repeat:‬‬
‫דוגמה‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫‪repeat-y‬‬
‫תמונת הרקע יחזור על עצמו רק אנכי‬
‫‪no-repeat‬‬
‫תמונת הרקע לא תשוכפל ז"א תוצג פעם אחת‬
‫בלבד‬
‫דוגמאות‬
‫>";‪style="background-image: url(bg1.jpg); background-repeat: no-repeat‬‬
‫>";‪style="background-image: url(bg1.jpg); background-repeat: repeat-x‬‬
‫תצוגת דפדפן‬
‫עבור ‪no-repeat‬‬
‫תרגיל ‪ - 18‬תמונת רקע‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫חפשו ברשת האינטרנט תמונת רקע‬
‫שמרו את התמונה בתיקייה שלכם‬
‫פתחו את עורך ‪ HTML‬ושמרו בשם – תרגיל ‪ 18‬תמונת רקע‬
‫כתבו שורת קוד כך שנראה את תמונת הרקע בדף ב‪html-‬‬
‫כתבו כותרת לדף‬
‫כתבו בכמה משפטים מדוע בחרתם את תמונת הרקע‬
‫כתבו את הוראת הרקע ב‪CSS -‬‬
‫‪ ‬כתבו את ההוראה שתציג את תמונת הרקע לאורך‬
‫___________________________________________‬
‫‪‬‬
‫‪‬‬
‫כתבו את ההוראה שתציג את תמונת הרקע לאורך ולרחוב‬
‫____________________________________________‬
‫כתבו את ההוראה שתציג את תמונת הרקע לרוחב‬
‫_____________________________________________‬
‫עמוד ‪29‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫‪‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫כתבו את ההוראה שתציג את תמונת הרקע פעם אחת‬
‫_____________________________________________‬
‫‪ .8‬שמרו את הקובץ‬
‫מגדירים צבע רקע לדף‬
‫משנים סוג גופן צבע וגודל גופן‬
‫יישור טקסט‬
‫‪css‬‬
‫‪ss‬‬
‫רקע דף – צבע אחיד ‪background-color‬‬
‫‪css‬‬
‫ניתן לעצב רקע לדף אינטרנט על ידי בחירת צבע אחת מתוך פלטת‬
‫הצבעים‪.‬‬
‫מבנה פקודה‬
‫‪style="background-color:‬‬
‫קוד הצבע הרצוי ב‪HEX -‬‬
‫עמוד ‪30‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫דוגמאות‬
‫;‪background-color: #ffffcc‬‬
‫;‪background-color:yellow‬‬
‫";)‪background-color: rgb(255, 255, 204‬‬
‫תרגיל ‪ – 19‬חקר הצבעים‬
‫‪ .1‬פתחו את עורך ‪ html‬ושמרו בשם חקר הצבעים‬
‫‪ .2‬השלימו את הנתונים הבאים בטבלה הבאה‪:‬‬
‫צבע‬
‫שורת קוד‬
‫לבן‬
‫;)‪background-color:rgb (125,90,120‬‬
‫‪Transparent‬‬
‫;‪background-color:#ff6600‬‬
‫כתום‬
‫תכלת‬
‫תרגיל ‪ - 20‬מוסיפים צבע‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫פתחו את עורך ‪ html‬ושמרו בשם מוסיפים צבע‬
‫כתבו שורות קוד כך שרקע הדף יהיה בצבע סגול בהיר (‪)#996699‬‬
‫הוסיפו תמונה כלשהיא לדף‬
‫הוסיפו כותרת ותנו לה שם משמעותי ( מרמז על תוכן התמונה)‬
‫שמרו את התוכנית‬
‫שנו את צבע הרקע לצהוב בהיר‪ ,‬כתבו את שורת הקוד ב‪________________ css -‬‬
‫___________________________________________________________‬
‫‪ .7‬כתבו הוראה מקבילה ב‪______________________________________ html -‬‬
‫___________________________________________________________‬
‫סיכום‬
‫‪ .1‬השלימו את החסר‪ ,‬הנכם יכולים להיעזר במידע המצוי ברשת האינטרנט‬
‫עמוד ‪31‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫ניתן לכתוב את הוראות העיצוב במספר דרכים למשל עבור ב‪ HTML -‬ההוראה לשינוי צבע‬
‫רקע הדף היא ________________________________________________ לעומת‬
‫זאת ב‪ CSS -‬נרשום את ההוראה כך ______________________________________‬
‫הגדרת קוד הצבעים בשני האפשרויות היא __________________________________‬
‫משמעות ‪ RGB‬היא __ ________________________________________________‬
‫הערכים שכל צבע יכול לקבל הוא מ‪ _____________ -‬עד _______________________‬
‫שורת הקוד לכתיבת טקסט בצבע אחיד ב‪ HTML -‬הוא _________________________‬
‫מהי ההוראה המקבילה ב‪__________________________________________ CSS -‬‬
‫מבנה פקודה ______________________________________________________‬
‫דוגמאות _________________________________________________________‬
‫_______________________________________________________________‬
‫קישורים >‪<a>……….</a‬‬
‫באמצעות תגית הקישור ניתן לקשר בין אתרים שונים‪ ,‬לדפים אחרים באתר‪ ,‬לקובץ כלשהו‪ .‬יכולת‬
‫זו משקפת את עוצמת השפה‪ .‬לרוב הקשור נעשה באמצעות טקסט‪.‬‬
‫בשימוש בתגית הקישור תמיד יש להגדיר את יעד הקישור (האתר\דף שאליו רוצים להגיע) ואת‬
‫מקור הקישור‪.‬‬
‫מבנה פקודה‬
‫מקור>"הקישור‬
‫כי‬
‫> ‪</a‬‬
‫כיתוב המייצג את הקישור כך שלחיצה‬
‫עליו תגרום להפעלת הקישור (מפעיל‬
‫קישור)‬
‫כתובת של יעד הקישור "=‪<a href‬‬
‫כתובת לקישור הרצוי‪:‬‬
‫ציון יעד הקישור‬
‫אתר‪ ,‬קובץ‪ ,‬מייל‬
‫דוגמה‬
‫>‪</a‬‬
‫מנוע חיפוש‬
‫עמוד ‪32‬‬
‫>"‪<a href="http://www.google.com‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫תצוגת דפדפן‬
‫יעדי קישור אפשריים‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫לאתר אינטרנט כלשהו‬
‫לדואר אלקטרוני ‪mailto:imbar@gmail.com‬‬
‫שם קובץ‬
‫דף ‪ – html‬לדף אחר מהאתר (סרגל ניווט)‬
‫תרגיל ‪ -21‬יוצרים קשרים‬
‫שלב הכנה‬
‫‪ o‬חפשו ברשת האינטרנט תמונות של מנוע החיפוש שבחרתם‬
‫‪ o‬שמרו אותם בתוך תיקייה‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫‪.8‬‬
‫‪.9‬‬
‫פתחו את עורך ‪ html‬ושמרו בשם יוצרים קשרים‪.‬‬
‫כתבו שורות קוד לכותרת ראשית בשם היפרקישור‬
‫עצבו את הכותרת (גודל‪ ,‬צבע‪ ,‬סוג גופן‪ ,‬רקע ‪ )....‬כרצונכם‬
‫כתבו שורות קוד לכותרת משנית בשם מנוע חיפוש‬
‫עצבו את הכותרת (גודל‪ ,‬צבע‪ ,‬סוג גופן‪ ,‬רקע ‪ )....‬כרצונכם‬
‫צרו ‪ 4‬קישורים שונים למנועי חיפוש שונים‬
‫ארגנו את הקישורים אחד מתחת לשני‬
‫הוסיפו טקסט כתבו לנו וצרו קישור למייל שלכם‬
‫שמרו את הקובץ‬
‫שדרוג התוכנית‬
‫‪ .10‬הוסיפו תמונות ליד שם המנוע חיפוש שבחרתם‪ .‬היעזרו בתכונות ‪alt ,vspace, hspace‬‬
‫ניתוח התוכנית‬
‫לפניכם שורות הקוד לתרגיל ‪ ,21‬הסבירו מה מבצעת כל שורה ( תג פותח\סוגר‪ ,‬הוראה ב‪html\ -‬‬
‫‪ ,css‬משמעות התג‪)......‬‬
‫___________________________________________________________>‪<html‬‬
‫עמוד ‪33‬‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
_____________
<head>__________________________________________________________
______________
- ‫<אינדקס‬/title>___________________________________________________
<title>‫מנוע חיפוש‬
</head>__________________________________________________________
_____________
<body
_________________________________________________________________
_______
style="background-image: url(bg2.gif); background-repeat: no-repeat; text-align:
center;">
________________________________________________________ _________
______
_________________________________________________________________
______
_________________________________________________________________
______
_________________________________________________________________
_____________
<br>_____________________________________________________________
_____________
<br>
<br>
<br>
<br>
‫<אינדקס‬/h1></font color="red"> ___________________________________
<font><h1> ‫אתרים‬
‫<מנוע‬/h2></font color="blue"> _____________________________________
<font><h2> ‫חיפוש‬
</a href="http://www.google.com">
<a><br> ‫______________________________________גוגל‬
<br>_____________________________________________________________
______________
<a href="http://www.altavista.com"> altavista
</a><br>_________________________________
<br>_____________________________________________________________
______________
<a href="http://www.about.com"> about
</a><br>_____________________________________
<br>
<br>_____________________________________________________________
_____________
</body>__________________________________________________________
34 ‫עמוד‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫____________‬
‫___________________________________________________________>‪</html‬‬
‫___________‬
‫במידה ורשמתם את תוכנית בדרך אחרת‪ ,‬כתבו אותה כאן או חלק מהתוכנית‪ .‬הסבירו את‬
‫ההבדל‬
‫_________________________________________________________________‬
‫_________________________________________________________________‬
‫_________________________________________________________________‬
‫_________________________________________________________________‬
‫_________________________________________________________________‬
‫_________________________________________________________________‬
‫מהי תצוגת הדפדפן שהתקבלה?‬
‫עתה בצעו את סעיף ‪ – 9‬שדרוג התוכנית והוסיפו תמונות‬
‫רמז ‪....‬‬
‫היעזרו בשורת הקוד הבאה‪:‬‬
‫כתבו את שורת הקוד שהוספתם עבור התמונה של מנוע החיפוש ה‪2-‬‬
‫____________________________________________________________‬
‫____________________________________________________________‬
‫כתבו את שורת הקוד שהוספתם עבור התמונה של מנוע החיפוש ה‪3-‬‬
‫____________________________________________________________‬
‫____________________________________________________________‬
‫עמוד ‪35‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫מצאו את ההבדלים‬
‫מה מבצעות ההוראות הבאות‪:‬‬
‫>‪body style="background-color:#c8c8c8‬‬
‫_________________________________________________________________‬
‫_______‬
‫>‪"body bgcolor="#C8C8C8‬‬
‫_________________________________________________________________‬
‫מה המשותף בפקודות אלו?______________________________________________‬
‫מה השונה בפקודות אלו?_____________________________________________‬
‫>"‪<p style="font-family:courier new; color:red; font-size:20px‬‬
‫מהם האלמנטים שההוראות מתייחסות ______________________________________‬
‫_________________________________________________________________‬
‫_________________________________________________________________‬
‫>‪</font>< /p‬כך כותבים בדרך הישנה < "‪p><font size="5" face="Times‬‬
‫‪>color="red‬‬
‫מהם האלמנטים שההוראות מתייחסות ______________________________________‬
‫_________________________________________________________________‬
‫___________________ ______________________________________________‬
‫תמונה כמקור הקישור‬
‫ניתן לצור קישור גם באמצעות תמונה ולא רק עם היפרטקסט‪.‬‬
‫מבנה הפקודה‬
‫> ‪</a‬‬
‫תמונה‬
‫מקור הקישור‪"> -‬‬
‫הכתובת של יעד הקישור "= ‪<a href‬‬
‫דוגמה‬
‫>‪<a href="http://www.israelpost.co.il"> <img src="post.jpg"></a‬‬
‫עמוד ‪36‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫תצוגת דפדפן‬
‫מעבר של העכבר על התמונה תוצג יד הקישור ולחיצה על העכבר יפתח האתר של דואר ישראל‪.‬‬
‫לפניכם חלק מתוכנית‬
‫;‪<a href="http://www.israelpost.co.il"> <img style="border: 0px solid ; width: 250px‬‬
‫>‪height: 100px " src="post.jpg"></a‬‬
‫ציינו את התגיות המופיעות בשורות קוד ואת ערכם‬
‫_________________________________________________________________‬
‫______‬
‫_________________________________________________________________‬
‫_____‬
‫_____________ ____________________________________________________‬
‫______‬
‫תרגיל ‪ – 22‬תמונות מקשרות‬
‫שלב הכנה‬
‫‪ o‬חשבו על נושא מסוים למשל מכונית‪ ,‬כדורסל‪ ,‬בעלי חיים‪....,‬‬
‫‪ o‬חפשו ברשת האינטרנט תמונה כלשהי רלוונטית לנושא שבחרתם‬
‫‪ o‬שמרו אותם בתוך תיקייה‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫פתחו את עורך ‪ html‬ושמרו בשם תמונות מקשרות‪.‬‬
‫כתבו שורות קוד לכותרת ראשית בשם תמונות מקושרות‬
‫עצבו את הכותרת (גודל‪ ,‬צבע‪ ,‬סוג גופן‪ ,‬רקע ‪ )....‬כרצונכם‬
‫כתבו פסקה על הנושא (עד ‪ 5‬שורות בלבד)‬
‫צרו קישור באמצעות התמונה לאתר רלוונטי המהווה את מקור המידע‪.‬‬
‫הוסיפו עוד ‪ 3‬קישורים ( היפרטקסט) לאתרים שונים העוסקים בנושא שבחרתם‬
‫שמרו את הקובץ‬
‫עמוד ‪37‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫שדרוג תוכנית‬
‫הוסיפו עוד ‪ 2‬קטגוריות שונות לבחירתכם והוסיפו לכל קטגוריה ‪ 3‬קישורים לאתרים‬
‫רלוונטיים לנושא הקטגוריה‪.‬‬
‫כתבו את שורת הקוד שהקישור נעשה באמצעות התמונה ______________________‬
‫_____________________________________________________________‬
‫כתבו את שורת הקוד שהקישור נעשה באמצעות טקסט _______________________‬
‫_____________________________________________________________‬
‫כתבו את שורות הקוד לפסקה כך שצבע הגופן‪ ,‬צבע רקע הדף‪ ,‬גודל הגופן ‪ ,12-‬צבע‬
‫הטקסט‬
‫_______ ______________________________________________________‬
‫_____________________________________________________________‬
‫_____________________________________________________________‬
‫הוספו תמונה נוספת רלוונטית לנושא כך שתופיע כתמונת רקע לאורך המסך ‪ ,‬כתבו את שורות‬
‫הקוד‬
‫_________________________________________________________________‬
‫______‬
‫לפניכם שורת קוד >‪img src="book.gif" alt="pink book" width="311" height="253" /‬‬
‫נסו לתת הסבר מדוע מומלץ לציין את ממדי התמונה ___________________________‬
‫______________ _________________________________________________‬
‫יוצרים טבלאות ב‪HTML -‬‬
‫טבלה היא אמצעי (כלי) שבעזרתו ניתן לארגן ולהציג נתונים‪ ,‬מידע ע"י קטגוריות‪ ,‬קריטריונים‬
‫(דומה‪ ,‬שונה)‪.‬‬
‫מבנה טבלה‬
‫עמודה‬
‫עמוד ‪38‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫שורה‬
‫הטקסט הכתוב בתא מוגדר‬
‫תא‬
‫תוכן התא‬
‫שימוש בטבלה ב‪HTML -‬‬
‫נעזרים בטבלה ל‪ 2-‬שימושים עיקריים‪:‬‬
‫‪‬‬
‫‪‬‬
‫הצגת מידע‪ -‬מאורגן בטבלה כמו יתרון מול חסרון‪ ,‬עלויות (שם מוצר ומחירו) וכו'‬
‫עיצוב ופריסת המידע על פני הדף האינטרנטי‪ -‬לרוב משתמשים בטבלאות שקופות ובכל‬
‫תא מקלידים או מוסיפים תמונה ‪ .‬בהתאם לעיצוב ותכנון הדף‪.‬‬
‫תגית טבלה >‪>table<.........</table‬‬
‫לצורך יצירת טבלה יש להיעזר במספר תגים שונים (בהתאם למבנה הטבלה) כמו‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫צמד התגיות >‪ <table>……….</table‬מציינים שבהמשך מתחילים לצור טבלה‪.‬‬
‫צמד תגיות >‪ <th>………</th‬תוחמים את תאי הכותרת של הטבלה‬
‫צמד תגיות >‪ <tr>………</tr‬תוחמים כל שורה בטבלה‬
‫צמד תגיות >‪ <td>………</td‬תוחמים כל תא בטבלה‬
‫מבנה פקודה‬
‫> ‪<table‬‬
‫>‪<tr‬‬
‫>‪ </th‬כותרת ‪<th< 1‬‬
‫>‪ </th‬כותרת ‪<th> 1‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪</td‬תוכן תא‪<td> 1‬‬
‫>‪</td‬תוכן תא‪<td>2‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫עמוד ‪39‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫תוכנית דוגמה‬
‫שורה‬
‫תוכן תא‬
‫תצוגת דפדפן‬
‫עמוד ‪40‬‬
‫‪- CSS‬‬
‫יישור טקסט‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫מאפיינים נוספים של תג‬
‫מאפיין \ תכונה‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫>‪<table‬‬
‫ערכים אפשריים‬
‫דוגמה‬
‫‪ –Align‬הגדרת‬
‫המיקום האופקי של‬
‫הטבלה בדף‬
‫‪Left , center, right‬‬
‫‪ -Width‬הגדרת‬
‫רוחב הכולל של‬
‫הטבלה‬
‫ברירת מחדל היא רוחב הדף‬
‫>"‪<table width="60%‬‬
‫הערכים – ב ‪ px‬או אחוזים‬
‫>" ‪<table width=" 230‬‬
‫‪cellspacing‬‬
‫מגדיר את המרווח‬
‫בין התאים בטבלה‪.‬‬
‫‪cellpadding‬‬
‫מגדיר את הרווח בין‬
‫תוכן התא לגבולות‬
‫התא‬
‫‪border‬‬
‫מגדיר את עובי הקו‬
‫המפריד בין התאים‬
‫בטבלה‬
‫‪bordercolor‬‬
‫מגדיר את צבע קו‬
‫של הטבלה‬
‫הערכים – מספר ב ‪px‬‬
‫(פיקסל)‬
‫>"‪<table cellspacing="15‬‬
‫ברירת מחדל –‪3 px‬‬
‫הערכים – מספר ב ‪px‬‬
‫>"‪<table cellpadding ="10‬‬
‫ברירת מחדל –‪3 px‬‬
‫הערכים – מספר (מס' נמוך –‬
‫קו דק‪ ,‬מס' גדול‪ -‬קו עבה)‬
‫>"‪<table border ="3‬‬
‫ברירת מחדל –‪ – 0-‬טבלה‬
‫שקופה‬
‫הערכים – שם הצבע או קוד‬
‫הצבע ב‪HEX-‬‬
‫>"‪<table bordercolor ="green‬‬
‫ברירת המחדל – צבע שחור‬
‫הוראה זו פעילה בתנאי שערך‬
‫‪ Border‬גדול מ‪0 -‬‬
‫‪bgcolor‬‬
‫ברירת המחדל – צבע לבן‬
‫מגדיר את צבע רקע‬
‫של התאים בטבלה‬
‫הערכים – שם הצבע או קוד‬
‫הצבע ב‪HEX-‬‬
‫עמוד ‪41‬‬
‫>"‪<table bgcolor ="red‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫חוקרים את תכונות הטבלה‬
‫‪ .1‬כתבו שורות קוד כפי שמוצג בתצוגת דפדפן‬
‫רמז ‪....‬‬
‫היעזרו בשורות הקוד הבאים‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬תרגיל ‪ 23‬עיצוב טבלה>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<br‬‬
‫>‪<table‬‬
‫>‪<tbody‬‬
‫>‪<tr‬‬
‫>‪</th‬שם פרטי>‪<th‬‬
‫>‪</th‬שם משפחה>‪<th‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪</td‬דני>‪<td‬‬
‫>‪</td‬לוי>‪<td‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪</td‬שרון>‪<td‬‬
‫>‪</td‬כהן>‪<td‬‬
‫>‪</tr‬‬
‫>‪</tbody‬‬
‫>‪</table‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫עמוד ‪42‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫שדרוג התוכנית‬
‫‪ .2‬הוסיפו עוד ‪ 2‬שורות לטבלה עבור ‪ 2‬אנשים שונים כרצונכם‪ ,‬כתבו את שורת הקוד‬
‫___________________________________________________________‬
‫____‬
‫___________________________________________________________‬
‫___‬
‫‪ .3‬הוסיפו קווי גבול לטבלה בעובי של ‪ , 5‬כתבו את שורת‬
‫הקוד____________________‬
‫___________________________________________________________‬
‫____‬
‫‪ .4‬הגדירו לצבע שונה לבחירתכם לגבולות הטבלה ‪ ,‬כתבו את שורת‬
‫קוד_______________‬
‫___________________________________________________________‬
‫____‬
‫‪ .5‬הוסיפו הוראה כך שהמרווח בין הטקסט לגבולות הטבלה יהיה ‪ ,8‬כתבו שורות‬
‫קוד_______‬
‫___________________________________________________________‬
‫____‬
‫מאפייני שורה תגית >‪<tr‬‬
‫מאפיין \ תכונה‬
‫‪ –Align‬הגדרת‬
‫המיקום האופקי של‬
‫תוכן התאים בשורה‬
‫ערכים אפשריים‬
‫‪Left , center, right‬‬
‫דוגמה‬
‫>"‪<tr align="right‬‬
‫ברית מחדל ‪Left‬‬
‫‪ – Valign‬יישור‬
‫האנכי של תוכן‬
‫התאים בשורה‬
‫‪Middle, top, bottom‬‬
‫>"‪<tr valign="top‬‬
‫‪Bgcolor‬‬
‫ברירת מחדל – צבע לבן‬
‫>"‪<tr bgcolor ="red‬‬
‫צבע רקע של כל‬
‫התאים בשורה‬
‫הערכים – שם הצבע או קוד‬
‫הצבע ב‪HEX-‬‬
‫עמוד ‪43‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫מאפייני תגיות >‪ <td‬תוכן התא‪ <th> ,‬כותרת‬
‫מאפיין \ תכונה‬
‫‪ –Align‬הגדרת‬
‫המיקום האופקי של‬
‫תוכן התא‬
‫ערכים אפשריים‬
‫‪Left , center, right‬‬
‫דוגמה‬
‫>"‪<th align="center‬‬
‫ברירת המחדל ‪Left‬‬
‫‪ – Valign‬יישור‬
‫האנכי של תוכן‬
‫התאים‬
‫‪Middle, top, bottom‬‬
‫‪Width‬‬
‫הערכים – ב ‪ px‬או אחוזים‬
‫הגדרת רוחב התא‬
‫ברירת המחדל– התאמה לרוחב‬
‫בהתאם לתוכן‬
‫‪Height‬‬
‫הערכים – ב ‪ px‬או אחוזים‬
‫הגדרת גובה התא‬
‫ברירת המחדל– התאמה לגובה‬
‫בהתאם לתוכן‬
‫‪Bgcolor‬‬
‫ברירת מחדל – צבע לבן‬
‫צבע רקע של תא‬
‫הערכים – שם הצבע או קוד‬
‫הצבע ב‪HEX-‬‬
‫‪colspan‬‬
‫מיזוג תאים רצויים‬
‫בשורה‬
‫הערכים – מספר‬
‫>"‪<td valign="top‬‬
‫>"‪<td bgcolor ="red‬‬
‫>"‪<td colspan ="3‬‬
‫ערך מספרי‪ -‬מציין‬
‫את מספר התאים‬
‫שיש למזג‬
‫‪Rowspan‬‬
‫הערכים – מספר‬
‫מיזוג תאים רצויים‬
‫בעמודה‬
‫ערך מספרי‪ -‬מציין‬
‫את מספר התאים‬
‫שיש למזג‬
‫עמוד ‪44‬‬
‫>"‪<td Rowspan="2‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫תרגיל ‪ – 24‬מרכזים ציונים בטבלאות‬
‫כתבו שורות קוד בהתאם לטבלה הבאה‬
‫שם תלמיד‬
‫ציון מחצית א‬
‫ציון מחצית ב‬
‫ממוצע‬
‫שיר קול‬
‫‪80‬‬
‫‪90‬‬
‫‪85‬‬
‫בני טון‬
‫‪100‬‬
‫‪90‬‬
‫‪95‬‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫פתחו את עורך ‪ html‬ושמרו בשם – מרכזים ציונים בטבלאות‬
‫כתבו שורות קוד לכותרת ראשית מרכזים ציונים בטבלאות‬
‫עצבו את הכותרת (גודל‪ ,‬צבע‪ ,‬סוג גופן‪ ,‬רקע ‪ )....‬כרצונכם‬
‫השלימו את הנתונים החסרים כרצונכם‪.‬‬
‫שלבו צבע למסגרת‪ ,‬עובי‪ ,‬רקע לתאים‪ ,‬מסגרת‪ ,‬רוחב‪ ,‬גובה לתאים ועוד כרצונכם‬
‫שמרו את הקובץ‬
‫תרגיל ‪ - 25‬ריכוז נתונים בטבלה‬
‫כתבו שורות קוד בהתאם לטבלה הבאה‬
‫מגמת אומנות‬
‫מגמת מחשבים‬
‫בנים‬
‫בנות‬
‫בנים‬
‫בנות‬
‫רגר‬
‫‪15‬‬
‫‪9‬‬
‫‪12‬‬
‫‪10‬‬
‫רבין‬
‫‪20‬‬
‫‪11‬‬
‫‪16‬‬
‫‪8‬‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫פתחו את עורך ‪ html‬ושמרו בשם – ריכוז נתונים בטבלה‬
‫כתבו שורות קוד לכותרת ראשית פילוח מספר התלמידים לפי מגמות‬
‫עצבו את הכותרת (גודל‪ ,‬צבע‪ ,‬סוג גופן‪ ,‬רקע ‪ )....‬כרצונכם‬
‫השלימו את הנתונים החסרים כרצונכם‪.‬‬
‫שלבו צבע למסגרת‪ ,‬עובי‪ ,‬רקע לתאים‪ ,‬מסגרת‪ ,‬רוחב‪ ,‬גובה לתאים ועוד כרצונכם‬
‫שמרו את הקובץ‬
‫תרגיל ‪ – 26‬טבלת קלוריות‬
‫עמוד ‪45‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫כתבו שורות קוד בהתאם לטבלה הבאה‬
‫שם מזון‬
‫מספר קלוריות‬
‫אבוקדו‬
‫‪160‬‬
‫אבטיח‬
‫‪30‬‬
‫תמונה‬
‫רמז‪.....‬‬
‫שורת קוד להוספת תמונה בטבלה >‪<td><img src="bg1.jpg"></td‬‬
‫תרגיל מסכם נושא ‪html‬‬
‫בניית אתר בשפת‬
‫‪HTML‬‬
‫הנחיות לביצוע‪:‬‬
‫‪ ‬בחר נושא כלשהו (אפשר לשלב עוד תחום דעת כמו אנגלית‪ ,‬מדעים‪)..‬‬
‫‪ ‬האתר יורכב מ‪ 3 -‬דפים לפחות‬
‫‪ ‬צרו סרגל ניווט בין הדפים בעזרת תגית הקישור >‪>a‬‬
‫‪ ‬צרו קישורים ל‪ 3 -‬מקורות מידע שונים שעל פיהם ביססתם את המידע באתר‬
‫‪ ‬האתר יכיל את האלמנטים הבאים‪:‬‬
‫‪ o‬תמונות רלוונטיות לנושא הנבחר‬
‫‪ o‬טבלה‬
‫‪ o‬רשימה סדורה או לא סדורה‬
‫‪ o‬תוכן רלוונטי לנושא הנבחר‬
‫‪ o‬רקע דף – הקפידו על רקעים נעימים ויאפשרו קריאת טקסט‬
‫‪ o‬כותרות‬
‫‪ o‬שימוש בהדגשה‪ ,‬צבע גופן‪ ,‬קו תחתי‬
‫עמוד ‪46‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫שפת ‪XML‬‬
‫הערה ‪:‬חלק מחומר המוצג באדיבותו של טל מיכאלוביץ‬
‫מבט מהיר על סימון ותגים‬
‫אנשים יוצרים מסמכים מזה מאות שנים‪ ,‬ובמשך כל אותן שנים הם סימנו מסמכים אלה‪.‬‬
‫לדוגמה‪ ,‬מורים בבית ספר מסמנים את העבודות של התלמידים כל הזמן‪ .‬הם מורים לתלמידים‬
‫להעביר פיסקאות‪ ,‬להפוך משפטים לברורים יותר‪ ,‬לתקן אותיות שגויים וכן הלאה‪ .‬סימון מסמך‬
‫הוא האופן שבו אנו מגדירים את המבנה‪ ,‬המשמעות והמראה החזותי של המידע במסמך‪ .‬אם‬
‫השתמשת אי‪-‬פעם בתכונה 'מעקב אחר שינויים' ב ‪- Microsoft Office Word,‬השתמשת בצורה‬
‫ממוחשבת של סימון‪.‬‬
‫בתחום המחשוב ‪" ,‬סימון" הוא תהליך השימוש בקודים הקרויים תגים כדי להגדיר את המבנה‪,‬‬
‫את המראה החזותי וכן — במקרה של — ‪ XML‬את משמעות הנתונים‪.‬‬
‫קוד ‪ HTML‬הוא דוגמה טובה לסימון מחשב בפעולה‪ .‬אם תעיין בקוד (ב ‪- Microsoft Internet‬‬
‫‪Explorer,‬לחץ באמצעות לחצן העכבר הימני על הדף ולאחר מכן לחץ על הצג מקור ‪),‬תראה‬
‫תערובת של טקסט קריא ותגים של שפת סימון היפר‪-‬טקסט ‪ (HTML),‬כגון >‪ <p‬ו ‪- <h2>.‬קל‬
‫לזהות תגים במסמכי ‪HTML‬‬
‫כאשר מתארים את המבנה ואת המשמעות של הנתונים‪ ,‬מאפשרי לעשות שימוש חוזר בנתונים‬
‫בדרכים שונות‪ .‬לדוגמה‪ ,‬אם יש בלוק של נתוני מכירות וכל פריט בבלוק מזוהה באופן ברור יש‬
‫אפשרות לטעון רק את הפריטים הדרושים לתוך דוח מכירות ולטעון פריטים אחרים למסד נתונים‬
‫של ניהול חשבונות‪ ,‬כלומר שילוב הנתונים במגוון מערכות שונות‪ ,‬ללא קשר לפלטפורמת‬
‫החומרה או למערכת ההפעלה‪ .‬וזוהי הסיבה לכך ש ‪- XML‬הפך את לאחת מהטכנולוגיות‬
‫הפופולריות ביותר לחילופי נתונים‪.‬‬
‫‪ HTML‬ו ‪ - XML‬מכילים נתונים המוקפים בתגים‪ ,‬אך בזאת מסתיים הדמיון בין שתי השפות‪.‬‬
‫‪ - Html‬התגים מגדרים מראה ותחושות‪.‬‬
‫‪ -xml‬התגים מגדירים את המבנה ואת המשמעות של הנתונים‪.‬‬
‫לדוגמה ‪:‬‬
‫>?"‪<?xml version="1.0" encoding="utf-8‬‬
‫>"‪<person id="1234‬‬
‫>‪<firstName>Lior</firstName‬‬
‫>‪<lastName>Zamir</lastName‬‬
‫‪</person‬‬
‫קבצי ‪ XML‬מתוארים ברמות קינון שונות ‪ .‬כול קובץ חייב להגדיר השורש של האלמנט ושורש‬
‫זה מהווה את האבא של כול שאר האלמנטים ‪.‬‬
‫עמוד ‪47‬‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
‫דוגמה לתיאור של חנות ספרים‬
XML ‫יצוג ב‬
<bookstore>
<book category="COOKING">
<title lang="en"> ‫<מהמטבח הסיני‬/title>
<author> ‫<רות סירקיס‬/author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
48 ‫עמוד‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫>‪</book‬‬
‫>‪</bookstore‬‬
‫כיצד נשלב את ה ‪ XML‬בדפדפן ?‬
‫כריכת נתונים‬
‫כריכת נתונים היא אחת מהדרכים להצגת מסמכי ‪ XML‬בדפדפן ‪.‬‬
‫באמצעות שיטה זו‪ ,‬אנו מקשרים מסמך ‪ XML‬אל מסמך ‪ HTML‬ומציגים את מסמך ‪ HTML‬זה‬
‫בדפדפן‪ .‬שיטה זו‪ ,‬מאפשרת לשלב בין יעילות אחסון המידע של ‪ , XML‬ליכולות העיצוב של‬
‫‪ HTML‬וליכולות הדינאמיות של ‪ .DHTML‬כריכת נתונים מתאימה רק למסמכי ‪ XML‬הבנויים‬
‫בצורה סימטרית (ניתנים לתרגום כאוסף רשומות בעלי שדות נתונים)‪ .‬על מנת להציג נתונים‬
‫מתוך מסמכים שאינם סימטריים יש לעשות שימוש בתסריט‪.‬‬
‫כאשר מבקשים לכרוך נתוני ‪ XML‬למסמך ‪, HTML‬יש לבצע שתי פעולות במסמך ה ‪:HTML‬‬
‫‪ .1‬קישור מסמך ‪ XML‬לדף ה ‪.HTML‬‬
‫‪ .2‬כריכת רכיבי ה ‪ HTML‬לרכיבי ה ‪.XML‬‬
‫קישור מסמך ‪ XML‬לדף ה ‪HTML‬‬
‫באמצעות הוספת רכיב >‪ <xml‬למסמך ‪.HTML‬‬
‫>‪<HTML‬‬
‫>‪<HEAD></HEAD‬‬
‫>‪<BODY‬‬
‫>‪<XML id="someId" src="XMLFile.xml"></XML‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫כאשר המאפיין ‪ Id‬מקבל ערך כלשהו ו ‪ src‬מפנה אל קובץ ‪ XML‬המכיל את הנתונים‪.‬‬
‫עמוד ‪49‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫דרך שנייה נוספת לקישור נתונים ‪ ,‬מאפשרת לכתוב את קוד ה ‪ XML‬ישירות בתוך רכיב‬
‫<‪ <XML‬במסמך ה ‪HTML‬‬
‫כך ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD></HEAD‬‬
‫>‪<BODY‬‬
‫>"‪<XML id="someId‬‬
‫>?"‪<?xml version="1.0‬‬
‫>‪<STUDENT‬‬
‫>‪<FIRSTNAME>Oz</FIRSTNAME‬‬
‫>‪<LASTNAME>Ben Ari</LASTNAME‬‬
‫>‪</STUDENT‬‬
‫>‪</XML‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫בשיטה זו‪ ,‬אנו מספקים בפועל את קוד ה ‪ XML‬לתוך מסמך ה ‪ .HTML‬שיטה זו מנוגדת לעקרון‬
‫הכללי‪ ,‬לפיו יש לנתק ככל האפשר בין הנתונים לבין העיצוב (שיטה זו איננה מומלצת אלא‬
‫במקרים בהם שיטת הקישור אל קובץ חיצוני איננה מספקת את הפונקציונאליות הרצויה)‪.‬‬
‫עמוד ‪50‬‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
XML ‫ לרכיבי ה‬HTML ‫כריכת רכיבי ה‬
‫נוכל‬,)‫ או כתובת הקובץ החיצוני‬XML ‫לאחר שסיימנו להגדיר את מקור הנתונים (אי הנתונים‬
. XML ‫ ) אל רכיבי‬span,table,div… – ‫ (כדוגמת‬HTML ‫לכרוך את רכיבי‬
.‫ בצורה אוטומטית‬XML ‫ מציג את נתוני‬XML ‫ שנכרך אל רכיב‬HTML ‫רכיב‬
: ‫דוגמא‬
: Students.xml – ‫ המכיל את הנתונים‬XML ‫מסמך‬
<?xml version="1.0" encoding="UTF-8"?>
<STUDENTS>
<STUDENT>
<FIRSTNAME>Jasmin</FIRSTNAME>
<LASTNAME>Mor</LASTNAME>
</STUDENT>
<STUDENT>
<FIRSTNAME>Yaron</FIRSTNAME>
<LASTNAME>London</LASTNAME>
</STUDENT>
<STUDENT>
<FIRSTNAME>Yoav</FIRSTNAME>
<LASTNAME>Cohen</LASTNAME>
</STUDENT>
<STUDENT>
<FIRSTNAME>Peter</FIRSTNAME>
<LASTNAME>Smolnic</LASTNAME>
</STUDENT>
</STUDENTS>
51 ‫עמוד‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
: HTML ‫כריכת הנתונים למסמך‬
<html>
<head>
<title>Data binding example</title>
</head>
<body>
<xml id="stuData" src="Students.xml" />
<p>Our students :</p>
<table datasrc="#stuData" border="1">
<thead>
<tr>
<th>First name </th>
<th>Last name </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span datafld="FIRSTNAME" />
</td>
<td>
<span datafld="LASTNAME" />
</td>
</tr>
</tbody>
</table>
</body>
52 ‫עמוד‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
</html>
:‫הסבר‬
: ‫הקישור אל מקור הנתונים‬
<xml id="stuData" src="Students.xml" />
)‫ כללית (תופיע מעל טבלת הנתונים‬HTML ‫כותרת‬
<p>Our students :</p>
: ‫ לאחסון הנתונים‬HTML ‫טבלת‬
<table id="table1" datasrc="#stuData" border="1">
<thead>
<tr>
<th>First name </th>
<th>Last name </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span datafld="FIRSTNAME" />
</td>
<td>
<span datafld="LASTNAME" />
</td>
</tr>
</tbody>
</table>
53 ‫עמוד‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫אנו כורכים את הטבלה ‪ ,table1‬עם מקור הנתונים שהוגדר קודם לכן‪ ,‬באמצעות המאפיין‬
‫‪ . datasrc‬יש להקנות למאפיין זה את ערך המזהה ‪, ID‬באמצעותו קישרנו אל המקור ‪ ,‬עם‬
‫קידומת של סולמית ‪:‬‬
‫>"‪<table id="table1" datasrc="#stuData" border="1‬‬
‫חלוקת הטבלה לשני אזורים לוגיים ‪:‬‬
‫>‪<THEAD‬‬
‫>‪<TBODY‬‬
‫תגים אלו הם רכיבי ‪ HTML‬המציינים את אזור הכותרת וגוף הטבלה‪.‬‬
‫אנו עושים שימוש בתגים אלה‪ ,‬מכיוון שהדפדפן משכפל את שורות הטבלה כמספר הרשומות‬
‫במקור הנתונים‪ .‬אילו היינו מוסיפים כותרת ‪ TH‬ללא הגדרתה ב ‪, THEAD‬היה הדפדפן משכפל‬
‫את הכותרת שוב ושוב יחד עם כל רשומה שהוא מציג‪.‬‬
‫כריכת נתוני ‪ XML‬לרכיב >‪: <span‬‬
‫באמצעות המאפיין ‪ datafld‬המקבל כערך את שם הרכיב המתאים במסמך ה ‪. XML‬‬
‫>‪<tbody‬‬
‫>‪<tr‬‬
‫>‪<td‬‬
‫>‪<span datafld="FIRSTNAME" /‬‬
‫>‪</td‬‬
‫>‪<td‬‬
‫>‪<span datafld="LASTNAME" /‬‬
‫>‪</td‬‬
‫>‪</tr‬‬
‫>‪</tbody‬‬
‫עמוד ‪54‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫שורת טבלה זו מורכבת משני תאים ‪ ,‬אשר בכל אחד מהם רכיב >‪ <span‬הכרוך לרכיב ‪XML‬‬
‫מתאים‪.‬‬
‫הערה‪:‬‬
‫לא ניתן לכרוך כל רכיב ‪ HTML‬לרכיבי ‪ . XML‬זוהי הסיבה לכך שאין אנו כורכים את התג ‪TD‬‬
‫עצמו‪ ,‬אל השדות ‪ FIRSTNAME‬ו ‪, LASTNAME‬אלא מכניסים לתוכו אלמנט ‪.SPAN‬‬
‫טבלה זו מכילה שורת כותרת יחידה ושורת נתונים יחידה‪.‬‬
‫הכותרת תופיע פעם אחת בלבד בראש הטבלה ושורת הנתונים תשוכפל באופן אוטומטי על ידי‬
‫הדפדפן‪.‬‬
‫התוצאה בדפדפן תיראה כך ‪:‬‬
‫עימוד – ‪Paging‬‬
‫על מנת להגביל את מספר הרשומות המוצגות בדף ‪ ,‬יש לבצע את הפעולות הבאות ‪:‬‬
‫‪ .1‬הקצאת המאפיין ‪ DATAPAGESIZE‬לטבלה הכורכת והקניית הערך הדרוש‪.‬‬
‫‪ .2‬הקצאת מאפיין ייחודי לטבלה – ‪. Id‬‬
‫‪ .3‬כדי לנווט בין הדפים השונים שיצרה החלוקה‪ ,‬ניתן להריץ תסריט העושה שימוש בשיטות‬
‫הבאות של רכיב הטבלה ‪:‬‬
‫עמוד ‪55‬‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
firstPage()
lastPage ()
previousePage()
nextPage()
‫הצגת ערכת רשומות היררכית‬
‫ את אוסף רכיבי‬,‫ כטבלת נתונים‬STUDENTS ‫ ניתן היה לייצג את רכיב‬,‫בדוגמא הקודמת‬
.‫ כשדות הטבלה‬LASTNAME ‫ ו‬FIRSTNAME ‫ כרשומות הטבלה ואת הרכיבים‬STUDENT
.‫זוהי הסיבה מדוע קל היה לגשת אל הנתונים התווים ולהציגם באמצעות כריכתם לטבלה‬
: ‫ בעלי היררכיה מפותחת יותר יש לנקוט בטכניקה הבאה‬XML ‫עבור מסמכי‬
: XML ‫מסמך‬
<?xml version="1.0" encoding="UTF-8"?>
<STUDENTS>
<STUDENT>
<FIRSTNAME>Jasmin</FIRSTNAME>
<LASTNAME>Mor</LASTNAME>
<ADDRESS>
<STREET>16,Haruv</STREET>
<CITY>Haifa</CITY>
</ADDRESS>
</STUDENT>
<STUDENT>
<FIRSTNAME>Yaron</FIRSTNAME>
<LASTNAME>London</LASTNAME>
<ADDRESS>
<STREET>25,Moria</STREET>
56 ‫עמוד‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
<CITY>Haifa</CITY>
</ADDRESS>
</STUDENT>
<STUDENT>
<FIRSTNAME>Yoav</FIRSTNAME>
<LASTNAME>Cohen</LASTNAME>
<ADDRESS>
<STREET>17,Hazait</STREET>
<CITY>Tel-Aviv</CITY>
</ADDRESS>
</STUDENT>
<STUDENT>
<FIRSTNAME>Peter</FIRSTNAME>
<LASTNAME>Smolnic</LASTNAME>
<ADDRESS>
<STREET>45,Herzel</STREET>
<CITY>Jerusalem</CITY>
</ADDRESS>
</STUDENT>
</STUDENTS>
.‫לא ניתן לייצג את כל הנתונים כטבלה בודדת‬, )‫במסמך היררכי (רכיבי בנים "עמוקים" יותר‬
.‫ אינו מכיל טקסט אלא רכיבים בנים נוספים‬ADDRESS ‫השדה‬
‫ של טבלת‬TD ‫על מנת לכרוך נתונים היררכיים עלינו להגדיר טבלה כורכת נוספת בתוך התא‬
.‫האם ולתוכה לכרוך את הרכיבים בנים‬
.‫דוגמא בעמוד הבא‬
57 ‫עמוד‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
<html>
<head>
<title>Data binding example</title>
</head>
<body>
<xml id="stuData" src="Students.xml" />
<p>Our students :</p>
<table id="table1" datasrc="#stuData" border="1">
<thead>
<tr>
<th>First name </th>
<th>Last name </th>
<th>Adress</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span datafld="FIRSTNAME" />
</td>
<td>
<span datafld="LASTNAME" />
</td>
<td>
<table id="table2" datasrc="#stuData" datafld="ADDRESS">
<tbody>
<tr>
58 ‫עמוד‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫>‪<td‬‬
‫>‪<span datafld="STREET" /‬‬
‫>‪</td‬‬
‫>‪<td‬‬
‫>‪<span datafld="CITY" /‬‬
‫>‪</td‬‬
‫>‪</tr‬‬
‫>‪</tbody‬‬
‫>‪</table‬‬
‫>‪</td‬‬
‫>‪</tr‬‬
‫>‪</tbody‬‬
‫>‪</table‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫הקטע המסומן באפור הוא טבלה כורכת הממוקמת בתוך תא ‪ TD‬של הטבלה האם‪.‬‬
‫יש לשים לה במיוחד אל המאפיין ‪ datafld‬של טבלה זו הכורכת את הרכיב ‪.ADDRESS‬‬
‫רכיבי ‪ SPAN‬הפנימיים ‪ ,‬כורכים בהתאמה את ‪ STREET‬ו ‪.CITY‬‬
‫הפלט בדפדפן ‪:‬‬
‫עמוד ‪59‬‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫חומר נוסף להעשרה‬
‫כריכת נתוני רשומה בודדת‬
‫הטכניקה הבאה כורכת רכיב ‪ HTML‬שאינו טבלה אל נתוני ‪.XML‬‬
‫>‪<span datasrc="#xmlDataIslandId" datafld="someXmlElement"/‬‬
‫בדומה לכריכת טבלה אנו חייבים לספק הן את אי הנתונים והן את שדה הנתונים (באמצעות‬
‫‪ datasrc‬ו ‪.) datafld‬‬
‫מכיוון שהרכיב הכורך אינו מסוג רכיב טבלאי – לא ניתן להציג באמצעותו אוסף רשומות‪ ,‬אלא‬
‫רשומה בודדת בלבד‪ .‬בנוסף‪ ,‬על מסמך ה ‪ XML‬להיות מסוג ערכת רשומות פשוטה (היכול‬
‫להתפרש כטבלה המכילה רשומות שבה כל רשומה מאופיינת באמצעות אוסף שדות)‪.‬‬
‫דוגמא ‪:‬‬
‫מסמך ‪ XML‬המכיל את הנתונים – ‪: Disks.xml‬‬
‫>? "‪<?xml version="1.0" encoding="utf-8‬‬
‫>‪<DISKCOLLECTION‬‬
‫>‪<DISK‬‬
‫>‪<TITLE>Animal brain</TITLE‬‬
‫>‪<ARTIST>John Brown</ARTIST‬‬
‫>‪<TRACKS>12</TRACKS‬‬
‫>‪<PRICE>78</PRICE‬‬
‫>‪</DISK‬‬
‫>‪<DISK‬‬
‫>‪<TITLE>Better Life in Africa</TITLE‬‬
‫>‪<ARTIST>Booby dan Brick</ARTIST‬‬
‫>‪<TRACKS>14</TRACKS‬‬
‫>‪<PRICE>70</PRICE‬‬
‫>‪</DISK‬‬
‫עמוד ‪60‬‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
<DISK>
<TITLE>Floating by concept</TITLE>
<ARTIST>Amara Kosh &amp; Sam Millsborn</ARTIST>
<TRACKS>15</TRACKS>
<PRICE>85</PRICE>
</DISK>
<DISK>
<TITLE>Talking</TITLE>
<ARTIST>Jane Mellon</ARTIST>
<TRACKS>13</TRACKS>
<PRICE>80</PRICE>
</DISK>
</DISKCOLLECTION>
61 ‫עמוד‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫מסמך ‪ HTML‬המציג את נתוני הרשומה הראשונה ‪:‬‬
‫>‪<html‬‬
‫>‪<head></head‬‬
‫>‪<body‬‬
‫>‪<xml id="disks" src="Disks.xml"></xml‬‬
‫>‪<h2>Disk Description</h2‬‬
‫>‪<span>Title: </span‬‬
‫>‪<span datasrc="#disks" datafld="TITLE" style="fontweight:bold;"></span><br‬‬
‫>‪<span>Artist: </span‬‬
‫>‪<span datasrc="#disks" datafld="ARTIST"></span><br‬‬
‫>‪<span>Tracks: </span‬‬
‫>‪<span datasrc="#disks" datafld="TRACKS"></span><br‬‬
‫>‪<span>Price: </span‬‬
‫>‪<span datasrc="#disks" datafld="PRICE"></span><br‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ניווט בין רשומות‬
‫על מנת לנווט בין כל הרשומות ‪ , DISK‬יש לעשות שימוש במספר שיטות של אובייקט מקור‬
‫הנתונים ‪.DSO‬‬
‫מהו ‪? DSO‬‬
‫כאשר דפדפן טוען דף ‪ HTML‬המכיל נתוני ‪ , XML‬קורא מעבד ‪( XML‬רכיב תוכנה פנימי‬
‫בדפדפן) את המסמך ומנתח אותו‪ .‬בנוסף יוצר הדפדפן אובייקט תכנות הקרוי אובייקט מקור‬
‫הנתונים – ‪ Data Source Object‬אובייקט זה מאחסן בפועל את נתוני ‪ XML‬ומספק את הגישה‬
‫אליהם‪.‬‬
‫עמוד ‪62‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫ה ‪ , DSO‬מספק אוסף שיטות אשר בעזרתן ניתן לגשת אל רשומות הנתונים וכן אוסף תכונות‬
‫ואירועים‪.‬‬
‫לדוגמא ‪ ,‬כאשר אנו כורכים רכיב ‪ HTML‬אל רכיב ‪ , XML‬ה ‪ DSO‬הוא זה שמספק לרכיב‬
‫הכורך את נתוני ה ‪ .XML‬בנוסף‪ ,‬ערך המאפיין ‪ ID‬אשר הקצנו לאי הנתונים ‪ XML‬הוא למעשה‬
‫שמו של ה ‪ DSO‬המשויך‪.‬‬
‫ה ‪ DSO‬מספק כאמור מספר שיטות לניהול הנתונים המאוחסנים בו‪ .‬שיטות אלה שייכות‬
‫לאובייקט ‪ RECORDSET‬הדומה לאובייקט ‪ RECORDSET‬של ‪. ADO‬‬
‫שיטות הנעת סמן (תנועה בין רשומות)‬
‫)(‪moveFirst‬‬
‫)(‪movePrevious‬‬
‫)(‪moveNext‬‬
‫)(‪moveLast‬‬
‫)‪move(i‬‬
‫ניתן לקרוא לכל אחת מהשיטות הללו באמצעות תסריט ‪:‬‬
‫עבור אי הנתונים הבא ‪:‬‬
‫>‪<xml id="disks" src="Disks.xml"></xml‬‬
‫נוכל להפעיל את השיטות כך ‪:‬‬
‫)(‪Disks.moveFirst‬‬
‫קפוץ לרשומה הראשונה‪.‬‬
‫עמוד ‪63‬‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫או‬
Disks.move(5)
‫קפוץ לרשומה השישית‬
‫ את תחילתו‬, ADO ‫ קובעים בדומה ל‬RECORDSET ‫ של אובייקט‬BOF ‫ ו‬EOF ‫המאפיינים‬
.‫או סופו של קובץ הנתונים‬
: ‫תסריט לניווט בערכת הרשומות‬
‫ מנגנון‬HTML ‫ ) נוכל להוסיף אל קובץ ה‬Disks.xml ( ‫ שבדוגמה הקודמת‬XML ‫עבור מסמך ה‬
: ‫ כך‬,‫ כך שבכל פעם תוצג רשומה אחרת‬,‫ניווט בין הרשומות‬
<html>
<head>
<script language="javascript">
function goFirst(){
disks.recordset.moveFirst();
}
function goBack(){
disks.recordset.movePrevious();
if (disks.recordset.BOF)
{disks.recordset.moveNext();}
}
function goNext(){
disks.recordset.moveNext();
if (disks.recordset.EOF)
{disks.recordset.movePrevious();}
64 ‫עמוד‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
}
function goLast(){
disks.recordset.moveLast();
}
</script>
</head>
<body>
<xml id="disks" src="Disks.xml"></xml>
<h2>Disk Description</h2>
<span>Title: </span>
<span datasrc="#disks" datafld="TITLE" style="fontweight:bold;"></span><br>
<span>Artist: </span>
<span datasrc="#disks" datafld="ARTIST"></span><br>
<span>Tracks: </span>
<span datasrc="#disks" datafld="TRACKS"></span><br>
<span>Price: </span>
<span datasrc="#disks" datafld="PRICE"></span><br>
<form name="navForm">
<input type="button" name="FirstButton" value="|< First"
onclick="goFirst()">
<input type="button" name="BackButton" value="< Back"
onclick="goBack()">
<input type="button" name="NextButton" value="> Next"
onclick="goNext()">
<input type="button" name="LastButton" value=">| Last"
onclick="goLast()">
</form>
65 ‫עמוד‬
‫איתור וגילוי מידע דיגיטלי יולי ‪2015‬‬
‫איריס בנטולילה אתי הרשקוביץ‬
‫>‪</body‬‬
‫>‪</html‬‬
‫התצוגה בדפדפן ‪:‬‬
‫לחיצה על לחצני הפקודה תציג בכל פעם תוכן רשומה אחר‪.‬‬
‫כריכת רכיבי ‪ HTML‬נוספים‬
‫כפי שראינו עד כה‪ ,‬כאשר אנו כורכים רכיב ‪ SAPN‬לשדה ‪ , XML‬מציג הרכיב את תוכן השדה‪.‬‬
‫>‪<span datasrc="#dsoId" datafld="XMLdata"></span‬‬
‫פעולה זו מתאפשרת מכיוון שהלכה למעשה אנו קושרים את התכונה ‪ innerText‬של רכיב‬
‫‪SPAN‬אל נתוני שדה ה ‪ . XML‬בנוסף לתכונה ‪ , innerText‬גם תכונת ‪ innerHTML‬נכרכת‪.‬‬
‫כזכור – ‪ innerText‬כורכת טקסט בלבד ו ‪ innerHTML‬כורכת את כל תוכן הרכיב לרבות סימוני‬
‫‪.HTML‬‬
‫רכיבי ‪ HTML‬אחרים משתמשים בתכונות שונות המשמשות כתכונות מקושרות לדוגמא ‪:‬‬
‫רכיב >‪ <A‬כורך אוטומטית באמצעות מאפיין ‪.HREF‬‬
‫עמוד ‪66‬‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
.SRC ‫< כורך באמצעות מאפיין‬IMG> ‫רכיב‬
.VALUE ‫< כורך באמצעות מאפיין‬INPUT type=text> ‫רכיב‬
: ‫רשימה חלקית‬
‫תכונה קשורה‬
value
innerText/innerHTML
‫ הנבחר‬option ‫טקסט של פריט‬
innerText/innerHtml
value
src
src
src
checked
Value
Value
checked
href
innerText/innerHTML
HTML ‫רכיב‬
Input type=text
Marquee
Select
Span
Textarea
Frame
Iframe
Img
Input type=checkbox
Input type=hidden
Input type=password
Input type=radio
A
Div
: ‫דוגמא‬
XML ‫מסמך‬
<?xml version="1.0" encoding="UTF-8"?>
<Physicians>
<Person>
<NAME>Einstein</NAME>
<PICTURE>einstein.gif</PICTURE>
</Person>
<Person>
<NAME>Hawking</NAME>
<PICTURE>1.jpg</PICTURE>
67 ‫עמוד‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
</Person>
<Person>
<NAME>Habbel</NAME>
<PICTURE>habbel.jpg</PICTURE>
</Person>
</Physicians>
: HTML ‫כריכה לרכיבי‬
<html>
<head>
<title>Physician images</title>
</head>
<body>
<xml id="physiciansData" src="physicians.xml" />
<H2>Physicians images :</H2>
<table id="table1" datasrc="#physiciansData" border="1">
<thead>
<tr>
<tr>
<th>Physician name</th>
<th>Image</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>
68 ‫עמוד‬
2015 ‫איתור וגילוי מידע דיגיטלי יולי‬
‫איריס בנטולילה אתי הרשקוביץ‬
<span datafld="NAME" />
</td>
<td>
<img datafld="PICTURE" width="100" height="100" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
: ‫תצוגה בדפדפן‬
69 ‫עמוד‬