איתור מידע דיגיטלי שעור ראשון
איריס בנטולילה אתי הרשקוביץ קורס מורים יוני 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:[email protected] שם קובץ דף – 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 & 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 עמוד
© Copyright 2024