‫‪HTML5‬‬ ‫המדריך לבניית אתרים‬ ‫הדור הבא‬ ‫יונית רושו‬ ‫יועץ מקצועי‪ :‬זהר עמיהוד‬ ‫עריכה ועיצוב‪ :‬שרה עמיהוד‪ ,‬יצחק עמיהוד‬ ‫עיצוב עטיפה‪ :‬אופיר ליברמן‬ ‫שמות מסחריים‬ ‫שמות המוצרים והשירותים המוזכרים בספר הינם שמות מסחריים רשומים של החברות שלהם‪.‬‬ ‫הוצאת הוד‪-‬עמי והמחברת עשו כמיטב יכולתם למסור מידע אודות השמות המסחריים המוזכרים‬ ‫בספר זה ולציין את שמות החברות‪ ,‬המוצרים והשירותים‪ .‬שמות מסחריים רשומים ) ‪registered‬‬ ‫‪ (trademarks‬המוזכרים בספר צוינו בהתאמה‪.‬‬ ‫הודעה‬ ‫ספר זה מיועד לתת מידע אודות מוצרים שונים‪ .‬נעשו מאמצים רבים לגרום לכך שהספר יהיה שלם‬ ‫ואמין ככל שניתן‪ ,‬אך אין משתמעת מכך כל אחריות שהיא‪.‬‬ ‫המידע ניתן "כמות שהוא" )"‪ .("as is‬הוצאת הוד‪-‬עמי והמחברת אינם אחראים כלפי יחיד או ארגון‬ ‫עבור כל אובדן או נזק אשר ייגרם‪ ,‬אם ייגרם‪ ,‬מהמידע שבספר זה‪ ,‬או מהתקליטור‪/‬הדיסקט )אם‬ ‫יצורף(‪ ,‬או מאתר האינטרנט המלווה את הספר‪.‬‬ ‫אין לעשות שימוש מסחרי ו‪/‬או להעתיק‪ ,‬לשכפל‪ ,‬לצלם‪ ,‬לתרגם‪ ,‬להקליט‪ ,‬לשדר‪ ,‬לקלוט ו‪/‬או לאחסן‬ ‫במאגר מידע בכל דרך ו‪/‬או אמצעי מכני‪ ,‬דיגיטלי‪ ,‬אופטי‪ ,‬מגנטי ו‪/‬או אחר ‪ -‬בחלק כלשהו מן המידע‬ ‫ו‪/‬או התמונות ו‪/‬או האיורים ו‪/‬או כל תוכן אחר הכלולים ו‪/‬או שצורפו לספר זה‪ ,‬בין אם לשימוש פנימי‬ ‫או לשימוש מסחרי‪ .‬כל שימוש החורג מציטוט קטעים קצרים במסגרת של ביקורת ספרותית אסור‬ ‫בהחלט‪ ,‬אלא ברשות מפורשת בכתב מהמוציא לאור‪.‬‬ ‫לשם שטף הקריאה כתוב ספר זה בלשון זכר בלבד‪ .‬ספר זה מיועד לגברים‬ ‫ונשים כאחד ואין בכוונתנו להפלות או לפגוע בציבור המשתמשים‪/‬ות‪.‬‬ ‫)‪(C‬‬ ‫כל הזכויות שמורות‬ ‫הוצאת הוד‪-‬עמי בע"מ‬ ‫טלפון‪09-9564716 :‬‬ ‫‪info@hod-ami.co.il‬‬ ‫‪www.hod-ami.co.il‬‬ ‫הודפס בישראל אוקטובר ‪2012‬‬ ‫מסת"ב ‪ISBN 978-965-361-393-5‬‬ ‫הספר מוקדש באהבה לבעלי היקר אורן ולילדים שלי ‪-‬‬ ‫שקד‪ ,‬דניאל וירין רושו‪ ,‬על כך שנתתם לי את הכוח‬ ‫ותמכתם לכל אורך הדרך‬ ‫תוכן עניינים מקוצר‬ ‫הקדמה ‪19 ......................................................................................‬‬ ‫פרק ‪ :1‬מבוא ומושגים באינטרנט ‪21 .....................................................‬‬ ‫פרק ‪ :2‬יסודות ועקרונות שפת )‪25 ......................................... HTML(5‬‬ ‫פרק ‪ :3‬תגיות המבנה החדשות ‪87 ........................................................‬‬ ‫פרק ‪ :4‬הגדרות עיצוב על ידי ‪103 ................................................. CSS‬‬ ‫פרק ‪ :5‬מודל הקופסה ופריסות ‪145 .......................................................‬‬ ‫פרק ‪ :6‬קוד מינימליסטי ובעל משמעות ‪177 ............................................‬‬ ‫פרק ‪ :7‬טפסים ב‪183 ............................................................ HTML5-‬‬ ‫פרק ‪ :8‬נושאים מתקדמים ‪219 .................................................... CSS3‬‬ ‫פרק ‪ Jquery :9‬ו‪255 ..................................................... Javascript-‬‬ ‫פרק ‪ :10‬שילוב מדיה והאובייקט ‪289 ........................................Canvas‬‬ ‫פרק ‪ :11‬נושאים מתקדמים ‪325 ..................................................... API‬‬ ‫אינדקס ‪341 .....................................................................................‬‬ ‫אינדקס תגיות למילוי עצמי‬ ‫תוכן עניינים ‪5‬‬ HTML5 6 ‫תוכן עניינים‬ ‫הקדמה ‪19 ......................................................................................‬‬ ‫מבנה הספר ‪19 .......................................................................................................‬‬ ‫קהל היעד ‪20 .........................................................................................................‬‬ ‫קטעי הקוד‪20 ........................................................................................................‬‬ ‫על יונית רושו ‪20 ...................................................................................................‬‬ ‫פרק ‪ :1‬מבוא ומושגים באינטרנט ‪21 .....................................................‬‬ ‫כתובות של מחשבים ברשת האינטרנט ‪22 ...................................................................‬‬ ‫טכנולוגיית שרת לקוח ‪22 ........................................................................................‬‬ ‫הדפדפן ‪22 ............................................................................................................‬‬ ‫פרוטוקול ‪23 .................................................................................................HTTP‬‬ ‫פרוטוקול ‪23 ................................................................................................... FTP‬‬ ‫אחסון האתר ‪23 .....................................................................................................‬‬ ‫דומיין ‪24 ..............................................................................................................‬‬ ‫תת‪-‬דומיין ‪24 ........................................................................................................‬‬ ‫‪24 ................................................................ (HyperText Markup Language) HTML‬‬ ‫סיכום ‪24 ..............................................................................................................‬‬ ‫פרק ‪ :2‬יסודות ועקרונות שפת )‪25 ......................................... HTML(5‬‬ ‫מה זה ‪26 ................................................................................................. ?HTML5‬‬ ‫במה שונה ‪ HTML5‬מהגרסאות הקודמות?‪26 ................................................................‬‬ ‫תמיכת דפדפנים ‪27 ................................................................................................‬‬ ‫דף ‪ HTML5‬הראשון שלך ‪27 .....................................................................................‬‬ ‫תגיות‪ ,‬מאפיינים ואלמנטים בסיסיים של השפה ‪31 .......................................................‬‬ ‫התגית‪ :‬אבן היסוד של כל דף ‪31 ................................................................. HTML‬‬ ‫מבנה סטנדרטי של מסמך ‪ :HTML5‬תגיות היסוד ‪32 ......................................................‬‬ ‫‪ :DOCTYPE‬הצהרה על ‪32 ........................................................................ HTML5‬‬ ‫התגית >‪32 ............................................................................................ <html‬‬ ‫התגית >‪33 ............................................................................................ <head‬‬ ‫התגית >‪33 ............................................................................................. <title‬‬ ‫התגית >‪33 ............................................................................................ <body‬‬ ‫תוכן עניינים ‪7‬‬ ‫התגית >‪34 ......................................................................................... <section‬‬ ‫תגיות נפוצות נוספות להגדרת אזורים בדף ‪35 ........................................................‬‬ ‫עברית בדפי אינטרנט ‪35 .........................................................................................‬‬ ‫תוכן טקסטואלי ‪36 .................................................................................................‬‬ ‫הכרת המושג כותרות ‪36 .....................................................................................‬‬ ‫תגיות הכותרת ‪37 ..............................................................................................‬‬ ‫התגית >‪39 .........................................................................................<hgroup‬‬ ‫תגית הפִסְקה >‪39 .........................................................................................<p‬‬ ‫תגיות בסיסיות לעיצוב הטקסט ‪39 ........................................................................‬‬ ‫חוקיות הפתיחה והסגירה של תגית בתוך תגית ‪40 ........................................................‬‬ ‫התוכן שבין התגיות ‪40 ............................................................................................‬‬ ‫להיכן נעלמו הרווחים בין המילים ובין השורות? ‪41 .................................................‬‬ ‫רווח בין תווים ;‪41 ...................................................................................&nbsp‬‬ ‫רווח בין שורות >‪42 .................................................................................... <br‬‬ ‫שילוב תווים מיוחדים בתוכן שבין התגיות ‪43 ............................ ASCII Characters -‬‬ ‫מאפיינים לתגיות ‪44 ............................................................................. Attributes -‬‬ ‫סיכום‪ :‬התקניות הנדרשת במסמכי ‪45 .............................................................. HTML5‬‬ ‫תרגיל ‪47 ........................................................................................................... 1‬‬ ‫קישורים ‪48 ...........................................................................................................‬‬ ‫תגית הקישור ‪51 ............................................................................................. a‬‬ ‫המאפיין ‪51 ............................................................................................... href‬‬ ‫המאפיין ‪52 .............................................................................................target‬‬ ‫המאפיין ‪52 ..................................................................................................rel‬‬ ‫המאפיין ‪52 ............................................................................................ media‬‬ ‫קישור לדואר אלקטרוני ‪53 ........................................................................ mailto‬‬ ‫קישור למסמך ‪ Word‬שנמצא באותה תיקייה ‪54 .......................................................‬‬ ‫קישור לדף אחר באתר שלי שנמצא באותה התיקייה‪54 .............................................‬‬ ‫קישור פנימי בתוך דף ‪54 ...................................................................... Anchors-‬‬ ‫התגית ‪56 ................................................................................................. base‬‬ ‫תרגיל ‪57 ........................................................................................................... 2‬‬ ‫צבעים ורקע ‪58 ......................................................................................................‬‬ ‫רשימות ותבליטים‪58 ..............................................................................................‬‬ ‫רשימות תבליטים לא ממוספרות ‪61 ......................................................................‬‬ ‫רשימות תבליטים ממוספרות ‪62 ...........................................................................‬‬ ‫רשימת הגדרות ‪62 ...................................................................... Definition list -‬‬ ‫‪HTML5 8‬‬ ‫מאפיינים )‪ (attributes‬של רשימות ‪63 ...................................................................‬‬ ‫המאפיין ‪63 .................................................................................... reversed‬‬ ‫המאפיין ‪63 .......................................................................................... start‬‬ ‫שינוי מראה הרשימה ‪63 ......................................................................................‬‬ ‫שילוב תמונות בדף ‪66 .............................................................................................‬‬ ‫מידע כללי ‪71 ...................................................................................................‬‬ ‫‪72 ............................................................................................................ JPG‬‬ ‫‪72 ............................................................................................................ GIF‬‬ ‫קבצי ‪72 ................................................................................. GIF ANIMATION‬‬ ‫‪72 ........................................................................................................... PNG‬‬ ‫התגית ‪72 .................................................................................................. img‬‬ ‫סידור סביבת העבודה ‪ -‬התיקייה ‪74 ......................................................... images‬‬ ‫נתיבי קבצי תמונות‪74 ........................................................................................‬‬ ‫נתיב יחסי )‪74 ......................................................................... (Relative path‬‬ ‫נתיב מוחלט )‪75 ..................................................................... (Absolute path‬‬ ‫שילוב תמונה מתיקיית התמונות באתר ‪75 .........................................................‬‬ ‫תמונה כקישור ‪75 .........................................................................................‬‬ ‫הוספת תמונת רקע ‪78 ....................................................................................‬‬ ‫תרגיל ‪80 ........................................................................................................... 3‬‬ ‫טבלאות ‪81 ...........................................................................................................‬‬ ‫תאים ריקים בטבלה ‪82 .......................................................................................‬‬ ‫מרווחים בין תאים ובתוך התאים ‪83 ......................................................................‬‬ ‫סיכום ‪85 ..............................................................................................................‬‬ ‫פרק ‪ :3‬תגיות המבנה החדשות ‪87 ........................................................‬‬ ‫תגיות חדשות ב‪ HTML5-‬ליצירת מבניות בעלת משמעות ‪88 .........................................‬‬ ‫התגית >‪88 ......................................................................................... <header‬‬ ‫התגית >‪88 .......................................................................................... <footer‬‬ ‫התגית >‪89 ......................................................................................... <section‬‬ ‫התגית >‪89 .......................................................................................... <article‬‬ ‫התגית >‪90 .............................................................................................. <nav‬‬ ‫התגית >‪90 ........................................................................................... <aside‬‬ ‫אזורים יעודיים ‪91 ..................................................................................................‬‬ ‫תגיות חדשות נוספות ‪93 .........................................................................................‬‬ ‫התגית >‪93 .......................................................................................... <figure‬‬ ‫תוכן עניינים ‪9‬‬ ‫התגית >‪93 ..................................................................................... <figcaption‬‬ ‫התגית >‪94 ............................................................................................<mark‬‬ ‫מודל התוכן של ‪95 ...................................................................................... HTML5‬‬ ‫אלמנטים מסוג ‪ Block-level‬ומסוג ‪95 ........................................................... Inline‬‬ ‫ה‪ DOM-‬ומודל התוכן החדש‪ 7 :‬הקטגוריות ‪97 ........................................................‬‬ ‫‪98 ............................................................................................... Metadata‬‬ ‫‪98 ...................................................................................................... Flow‬‬ ‫‪98 ................................................................................................. Heading‬‬ ‫‪99 ................................................................................................ Phrasing‬‬ ‫‪99 ............................................................................................. Embedded‬‬ ‫‪99 ............................................................................................. Interactive‬‬ ‫‪99 .............................................................................................. Sectioning‬‬ ‫אלגוריתם קווי המתאר של התוכן )‪99 ........................................ (Outline algorithm‬‬ ‫תמיכה בדפדפנים שאינם תומכים ב‪100 ......................................................... HTML5-‬‬ ‫תרגיל ‪101 ......................................................................................................... 4‬‬ ‫סיכום ‪102 ............................................................................................................‬‬ ‫פרק ‪ :4‬הגדרות עיצוב על ידי ‪103 ................................................. CSS‬‬ ‫מה זה ‪103 .................................................................................................... ?CSS‬‬ ‫גרסאות של ‪107 .............................................................................................. CSS‬‬ ‫היכן כותבים את הגדרות ‪107 ........................................................................... ?CSS‬‬ ‫הגדרת העיצוב ישירות בתגית ‪ :HTML‬שיטת ‪108 ........................................... Inline‬‬ ‫הגדרות צבע בשיטת ‪ Inline‬ובאופן כללי‪110 .....................................................‬‬ ‫הבעיה בשיטת ‪111 .............................................................................. Inline‬‬ ‫הפתרון‪ :‬שיטת ‪111 ........................................................................... Internal‬‬ ‫הגדרת העיצוב בראש המסמך באופן גורף‪ :‬התגית >‪112 .................................<style‬‬ ‫הבעיה בשיטת תגית >‪113 ................................................................... <style‬‬ ‫הפתרון ‪114 .................................................................................................‬‬ ‫השיטה השלישית והנבחרת‪ :‬קובץ ‪ CSS‬חיצוני ‪114 .................................................‬‬ ‫מה עושה הדפדפן? ‪115 .................................................................................‬‬ ‫דוגמאות ‪115 ........................................................................................ CSS‬‬ ‫הגדרות ‪ CSS‬שימושיות לפי נושאים ‪120 ....................................................................‬‬ ‫רקעים ‪120 .......................................................................................................‬‬ ‫‪ - background-color‬צבע רקע ‪120 .................................................................‬‬ ‫‪ - background-image‬תמונת רקע ‪120 ............................................................‬‬ ‫‪HTML5 10‬‬ ‫‪ - background-position‬מיקום תמונת רקע ‪120 .................................................‬‬ ‫‪ - background-repeat‬שכפול תמונת רקע ‪121 ..................................................‬‬ ‫מסגרות ‪121 .....................................................................................................‬‬ ‫‪ - border-width‬עובי מסגרת ‪121 ....................................................................‬‬ ‫‪ - border-style‬סגנון מסגרת ‪122 ....................................................................‬‬ ‫‪ - border-color‬צבע מסגרת ‪122 .....................................................................‬‬ ‫טיפוגרפיה‪ :‬הגדרות עיצוב עבור טקסטים וגופנים ‪123 ..............................................‬‬ ‫שימוש בטקסט 'חי' ‪123 .................................................................................‬‬ ‫‪ - Web-safe fonts‬גופן מערכת ‪123 ................................................................‬‬ ‫‪ - font-size ,font-family ,color‬צבע הגופן‪ ,‬משפחה וגודל ‪124 .............................‬‬ ‫‪ - font-style‬סגנון הגופן ‪124 ..........................................................................‬‬ ‫‪ - font-weight‬עובי הגופן‪124 ........................................................................‬‬ ‫‪ - direction‬כיוון הטקסט ‪125 .........................................................................‬‬ ‫‪ - letter-spacing‬רווח בין אותיות ‪125 .............................................................‬‬ ‫‪ - line-height‬גובה שורה ‪126 .........................................................................‬‬ ‫‪ - text-align‬יישור טקסט ‪126 .........................................................................‬‬ ‫‪ - vertical-align‬יישור אנכי ‪126 ......................................................................‬‬ ‫‪ - word-spacing‬רווח בין מילים ‪126 ...............................................................‬‬ ‫‪ - @font-face‬צורת הגופן ‪126 .......................................................................‬‬ ‫עיצוב קישורים ‪127 ...........................................................................................‬‬ ‫‪ - text-decoration‬קישוט הטקסט ‪127 .............................................................‬‬ ‫‪ - lists‬עיצוב רשימות ‪127 ...................................................................................‬‬ ‫שוליים ‪127 ......................................................................................................‬‬ ‫‪ - margin‬שוליים חיצוניים‪127 .......................................................................‬‬ ‫‪ - padding‬שוליים פנימיים ‪128 ......................................................................‬‬ ‫גדלים‪ :‬רוחב וגובה ‪128 ......................................................................................‬‬ ‫איחוד הגדרות למספר תגיות ‪129 ..............................................................................‬‬ ‫תרגיל ‪ 5‬שלב ‪129 ................................................................................................1‬‬ ‫הגדרות עיצוב שאינו גורף‪129 ........................................................................ Class :‬‬ ‫המשך תרגיל ‪ - 5‬שלב ‪131 ....................................................................................2‬‬ ‫סדרי עדיפויות של הגדרות עיצוב ‪132 .......................................................................‬‬ ‫כוכבית ‪133 ..........................................................................................................‬‬ ‫שימוש בשם‪ ,‬המאפיין ‪134 ................................................................................... id‬‬ ‫אזורים יעודיים בדף אינטרנט או ביישום ‪134 ..............................................................‬‬ ‫שימוש בשתי מחלקות )‪ (classes‬לאותו אלמנט ‪135 ......................................................‬‬ ‫תוכן עניינים ‪11‬‬ ‫קישורים אינטראקטיביים ‪135 ...................................................................................‬‬ ‫‪ - Hover‬שינוי עיצוב במעבר עכבר מעל קישור ‪135 ................................................‬‬ ‫‪ - Visited‬שינוי עיצוב של קישור לאחר ביקור בו ‪136 ..............................................‬‬ ‫יעילות הכתיבה של מסמכי ‪136 ..........................................................................CSS‬‬ ‫שימוש ב‪ CLASS-‬במידה‪136 ...............................................................................‬‬ ‫עמידה בשני תנאים‪ :‬הגדרת סוג תגית וגם שימוש ב‪137 .................................. class-‬‬ ‫היררכיה ב‪ ,CSS-‬או קינון תגיות ‪138 .........................................................................‬‬ ‫ההבדל בין 'צאצאים' לבין 'ילדים' מדור ראשון ‪139 .................................................‬‬ ‫תגית שעוקבת אחרי תגית אחרת ‪140 ....................................................................‬‬ ‫תגיות שנמצאות לאחר תגית מסוימת ‪141 ..............................................................‬‬ ‫תגיות בעלות מאפיין מסוים ‪141 ..........................................................................‬‬ ‫תגיות עם מאפיין בעל ערך מסוים ‪142 ..................................................................‬‬ ‫שימוש בהערות ‪143 ...............................................................................................‬‬ ‫סיכום ‪143 ............................................................................................................‬‬ ‫פרק ‪ :5‬מודל הקופסה ופריסות ‪145 .......................................................‬‬ ‫מבנה ופריסת הדף ‪146 ............................................................................................‬‬ ‫מודל הקופסה ‪147 .............................................................................. Box model -‬‬ ‫איחוד שוליים אנכיים ‪150 ............................................................. Margin collapse -‬‬ ‫תגית מתחת לתגית ‪150 ......................................................................................‬‬ ‫הכלת תגית בתוך תגית אחרת ‪152 ........................................................................‬‬ ‫איחוד שוליים בתוך אותו האלמנט‪153 ..................................................................‬‬ ‫הגדרות תצוגת ‪ Inline‬ותצוגת ‪154 .................................................................... Block‬‬ ‫אלמנטים עם תצוגת ‪154 ............................................................................ Block‬‬ ‫אלמנטים עם תצוגת ‪155 ............................................................................ Inline‬‬ ‫מיקום אלמנטים ‪156 ...............................................................................................‬‬ ‫זרימה רגילה של הדף ‪156 ..............................................................Normal flow -‬‬ ‫מיקום יחסי ‪156 ................................................................ Relative positioning -‬‬ ‫מיקום מוחלט ‪158 ............................................................ Absolute positioning -‬‬ ‫דוגמה שימושית ‪162 .....................................................................................‬‬ ‫מיקום מקובע ‪163 ................................................................. Fixed positioning -‬‬ ‫אלמנטים "צפים" ‪163 .............................................................................. Floating -‬‬ ‫מסך צר של מכשיר נייד‪165 ................................................................................‬‬ ‫תג הפסקת ציפה ‪166 .............................................................................. Clear -‬‬ ‫יישור אופקי ‪169 ....................................................................................................‬‬ ‫‪HTML5 12‬‬ ‫יישור באמצעות שוליים אוטומטיים ‪169 ................................................................‬‬ ‫יישור של טקסט בתוך אלמנטים לעומת יישור של אלמנטים‪170 ................................‬‬ ‫דפדפנים ישנים למישהו? ‪172 ..............................................................................‬‬ ‫תרגיל ‪172 ......................................................................................................... 6‬‬ ‫סיכום ‪176 ............................................................................................................‬‬ ‫פרק ‪ :6‬קוד מינימליסטי ובעל משמעות ‪177 ............................................‬‬ ‫למה הכוונה קוד בעל משמעות? ‪177 .........................................................................‬‬ ‫הפרדת התוכן והמשמעות מהתצוגה ‪180 .....................................................................‬‬ ‫מינימליזם בקוד ‪180 ...............................................................................................‬‬ ‫סיכום ‪182 ............................................................................................................‬‬ ‫פרק ‪ :7‬טפסים ב‪183 ............................................................ HTML5-‬‬ ‫מהו הטופס ומהי מטרתו? ‪184 ..................................................................................‬‬ ‫טכנולוגיה ועיצוב יד ביד ‪185 ...................................................................................‬‬ ‫החשיבות של תכנון ועיצוב הטפסים ‪187 ...............................................................‬‬ ‫השפעת התפתחות העיצוב והטכנולוגיה על טפסים ב‪191 ............................. HTML5-‬‬ ‫לאן נשלחים הנתונים מהטופס‪ ,‬וכיצד ‪192 ..................................................................‬‬ ‫סדנת עבודה‪192 ....................................................................................................‬‬ ‫התגית >‪ <form‬ומבנה טופס ‪194 ..............................................................................‬‬ ‫מבנה הטופס‪196 ...............................................................................................‬‬ ‫התגית >‪196 .......................................................................................... <label‬‬ ‫הפקדים ‪197 ..........................................................................................................‬‬ ‫הפקדים הבסיסיים‪ :‬פקדי תיבת טקסט ושליחת הנתונים ‪198 .............................. input‬‬ ‫פקדי קלט נוספים עבור טקסטים ומספרים ‪200 .......................................................‬‬ ‫פקד אזור טקסט‪205 .......................................................................... Textarea ,‬‬ ‫פקד הלחצן ‪206 ................................................................................... button -‬‬ ‫פקדי בחירה ‪206 ...............................................................................................‬‬ ‫תיבת סימון ‪207 ........................................................................ check box -‬‬ ‫פקדי רדיו ‪208 ...................................................................... radio buttons -‬‬ ‫רשימה נגללת ‪210 .................................................................................select -‬‬ ‫פקד להעלאת קובץ ‪211 ...................................................................file upload -‬‬ ‫עיצוב הפקדים והטופס בכללותו ‪212 .........................................................................‬‬ ‫פקד "שלח" )‪ (submit‬מעוצב עם תמונה ‪212 ..........................................................‬‬ ‫התגיות >‪ <fieldset‬ו‪212 ................................................................. <legend> -‬‬ ‫תוכן עניינים ‪13‬‬ ‫התגית >‪213 ....................................................................................... <details‬‬ ‫ניהול המידע ‪214 ...................................................................................................‬‬ ‫התגית >‪214 ...................................................................................... <datalist‬‬ ‫התגית >‪214 ..................................................................................... <datagrid‬‬ ‫הקוד לבניית הטופס ‪215 ..........................................................................................‬‬ ‫סיכום ‪217 ............................................................................................................‬‬ ‫פרק ‪ :8‬נושאים מתקדמים ‪219 .................................................... CSS3‬‬ ‫תמונות רקע‪ ,‬חזרה ודגשים ‪219 ................................................................................‬‬ ‫הגדרת תמונת רקע עבור מעברי צבע ‪220 ..............................................................‬‬ ‫מיקום תמונת רקע ‪221 .......................................................................................‬‬ ‫מיקום על פי פיקסלים ‪222 .............................................................................‬‬ ‫מיקום באחוזים ‪223 ......................................................................................‬‬ ‫עיצוב קישורים מתקדם ‪224 .....................................................................................‬‬ ‫קו תחתון בעיצוב אישי ‪224 .................................................................................‬‬ ‫טכניקות להקטנת מספר המחלקות )‪225 ......................................................... (classes‬‬ ‫הדגשת קישורים מסוגים שונים ‪225 ......................................................................‬‬ ‫תפיסת התחלת מחרוזת הערך ‪226 ...................................................................‬‬ ‫תפיסת סוף מחרוזת הערך ‪227 ........................................................................‬‬ ‫מעברי עכבר יעילים מעל קישורים ‪228 ......................................................................‬‬ ‫מעברי עכבר פשוטים ‪228 ...................................................................................‬‬ ‫מעברי עכבר בשימוש תמונה אחת ‪230 ................................... pixy-style rollovers -‬‬ ‫תפריט אופקי ‪231 ..............................................................................................‬‬ ‫טכניקות חדשות ב‪232 .................................................................................. CSS3-‬‬ ‫הוספת צללית לטקסט חי ‪232 ..............................................................................‬‬ ‫עיצוב עמודות ‪234 ............................................................................................‬‬ ‫מעברי צבע ‪237 ............................................................................... gradients -‬‬ ‫ריבוי תמונות רקע ‪239 .......................................................................................‬‬ ‫פינות מעוגלות ‪240 ...........................................................................................‬‬ ‫יצירת לשוניות )‪ (tabs‬עם פינות מעוגלות ‪242 ........................................................‬‬ ‫‪243 ............................................................................................... CSS transform‬‬ ‫אנימציות ב‪244 ............................................................................................CSS3-‬‬ ‫שינוי מצב‪245 ..................................................................................................‬‬ ‫שינוי מיקום ‪246 ...............................................................................................‬‬ ‫טיפוגרפיה‪ :‬עיצוב גופנים ‪248 ..................................................................................‬‬ ‫‪HTML5 14‬‬ ‫הטמעת גופנים‪251 ............................................................................................‬‬ ‫זכויות יוצרים ‪252 ........................................................................................‬‬ ‫אופן ההטמעה‪252 .............................................................................................‬‬ ‫תמיכה בדפדפן ‪253 ............................................................ Internet Explorer‬‬ ‫דוגמה שלמה ‪254 ..............................................................................................‬‬ ‫‪254 ............................................................................................... Media Queries‬‬ ‫סיכום ‪254 ............................................................................................................‬‬ ‫פרק ‪ Jquery :9‬ו‪255 ..................................................... Javascript-‬‬ ‫מהי ‪255 .............................................................................................. ?Javascript‬‬ ‫התפקיד של ‪ Javascript‬בדף אינטרנט ‪256 ..................................................................‬‬ ‫דף ‪ Javascript‬הראשון שלך ‪256 ...............................................................................‬‬ ‫כיצד פועלת השפה ‪257 ..........................................................................?Javascript‬‬ ‫תחביר השפה ‪257 ....................................................................................... Syntax‬‬ ‫אירועים‪ ,‬פונקציות‪ ,‬אובייקטים ומשתנים ‪258 ..............................................................‬‬ ‫מודול אובייקט המסמך ‪259 .......................................................................... DOM -‬‬ ‫האובייקט החשוב ‪260 .......................................................................... Document -‬‬ ‫תחביר הנקודה ‪261 .................................................................................................‬‬ ‫קריאת נתונים והשמת נתונים ‪261 .............................................................................‬‬ ‫סדר קריאת הקוד על ידי הדפדפן ‪261 ........................................................................‬‬ ‫משתנים ‪263 ......................................................................................... variables -‬‬ ‫הגדרת והצהרת משתנים ‪263 ...............................................................................‬‬ ‫ערכי משתנים ‪264 .............................................................................................‬‬ ‫שרשור מספרים למחרוזות ‪264 .................................................................................‬‬ ‫התניות ו ַהשָמוֹת ‪265 ...............................................................................................‬‬ ‫ריבוי התניות ‪266 ..............................................................................................‬‬ ‫שיטות בדיקה ‪266 .............................................................................................‬‬ ‫הוראת התנאי ‪266 .......................................................................................... if‬‬ ‫ההוראה ‪ - this‬מי אני? ‪266 ......................................................................................‬‬ ‫פונקציות מובנות שימושיות ‪267 ...............................................................................‬‬ ‫הפונקציה המובנית ;)""(‪267 ....................................................... getElementById‬‬ ‫הפונקציה המובנית ‪267 ........................................................................ substring‬‬ ‫הפונקציה המובנית ‪267 .......................................................................... indexof‬‬ ‫פונקציות ואירועים ‪268 ......................................................................................‬‬ ‫תוכן עניינים ‪15‬‬ ‫החלפת קובץ התמונה במעבר העכבר ‪269 ..............................................................‬‬ ‫שלב ראשון ‪269 ...........................................................................................‬‬ ‫שלב שני ‪269 ...............................................................................................‬‬ ‫שלב שלישי ‪271 ...........................................................................................‬‬ ‫שינוי טקסט בדף ‪273 ..............................................................................................‬‬ ‫האובייקט ‪273 ............................................................................................... Style‬‬ ‫הצגה והסתרה של שכבה בלחיצה על אובייקט בדף ‪274 ................................................‬‬ ‫הספריה ‪275 ............................................................................................... Jquery‬‬ ‫התקנת הרכיב המרכזי להרצת ‪275 .............................................................JQuery‬‬ ‫כתיבת הקוד הראשון שלך ב‪276 .............................................................. JQuery-‬‬ ‫האירוע ‪276 ............................................................................. document.ready‬‬ ‫סימן הדולר ‪277 ................................................................................................‬‬ ‫מציאת אובייקטים על המסך ‪277 ..........................................................................‬‬ ‫שרשרת הוראות– ‪278 .......................................................................... Chaining‬‬ ‫שינוי אובייקטים ‪278 .........................................................................................‬‬ ‫שינוי ערכים של מאפיינים ‪279 ............................................................................‬‬ ‫מניפולציות על ‪279 .....................................................................................CSS‬‬ ‫אירועים‪280 .....................................................................................................‬‬ ‫הופעה איטית והיעלמות איטית של אובייקטים ‪281 ...................................... Fade -‬‬ ‫‪ Jquery mobile‬להפעלה בנייד ‪283 ...........................................................................‬‬ ‫‪287 ........................................................................................... Jquery mobile‬‬ ‫סיכום ‪287 ............................................................................................................‬‬ ‫פרק ‪ :10‬שילוב מדיה והאובייקט ‪289 ........................................Canvas‬‬ ‫שילוב סרטונים ב‪289 ................................................................................. HTML5-‬‬ ‫שליטה על אובייקט ‪ video‬באמצעות ‪292 .................................................... Javascript‬‬ ‫שילוב שמע ב‪293 ......................................................................................HTML5-‬‬ ‫אפשרות ראשונה‪ :‬התגית ‪293 ................................................................... embed‬‬ ‫אפשרות שנייה‪ :‬תגית קישור ‪293 .........................................................................‬‬ ‫אפשרות שלישית‪ :‬קובץ פלאש ‪294 ......................................................................‬‬ ‫אפשרות רביעית‪ :‬תגית ‪ audio‬ב‪294 ......................................................... HTML5-‬‬ ‫התגית ‪295 ................................................................................................ Canvas‬‬ ‫הכרת התגית‪ ,‬דפדפנים תומכים‪ ,‬מטרה ‪295 ............................................................‬‬ ‫מערכת הקואורדינטות ‪295 ..................................................................................‬‬ ‫הוספת התגית למסמך ‪296 ..................................................................................‬‬ ‫‪HTML5 16‬‬ ‫שינוי גודל הקנבס ‪297 .......................................................................................‬‬ ‫כתיבת הקוד הראשון בקנבס‪298 ........................................................ hello world :‬‬ ‫תכנות בסיסי של התגית >‪298 ............................................................... <canvas‬‬ ‫המאפיינים של ‪299 ................................................................................. canvas‬‬ ‫הפונקציות של ‪299 ................................................................................. canvas‬‬ ‫הכרת ‪ API‬לציור ‪ 2D‬של הקנבס ‪300 ............................ HTML Canvas 2D Context -‬‬ ‫זיהוי תמיכה בקנבס ‪300 .....................................................................................‬‬ ‫תכנות בתוך הקוד שתומך בקנבס ‪301 ...................................................................‬‬ ‫מהו הציור על הקנבס? ‪302 .................................................................................‬‬ ‫אפשרויות הצביעה ב‪302 ........................................................................ API-‬‬ ‫ציור מלבנים ‪304 ...............................................................................................‬‬ ‫ציור קווים ‪305 .................................................................................................‬‬ ‫ציור משולשים על הקנבס ‪306 .............................................................................‬‬ ‫הכרת המצב )‪ (state‬של משטח העבודה ‪308 ...........................................................‬‬ ‫צורות מורכבות‪ :‬קשתות ונתיבים ‪311 ....................................................................‬‬ ‫ציור עיגולים על משטח העבודה ‪313 ......................................................... canvas‬‬ ‫עקומות ‪314 .....................................................................................................‬‬ ‫ציור טקסטים ‪314 ..............................................................................................‬‬ ‫יצירת צל ‪314 ...................................................................................................‬‬ ‫הצגת תמונות בקנבס‪315 ....................................................................................‬‬ ‫מסכות ‪315 .............................................................................. clipping paths -‬‬ ‫טרנספורמציות ‪317 ................................................................. transformations -‬‬ ‫שינוי גודל הצורה ‪317 .............................................................................scale -‬‬ ‫סיבוב הצורה ‪318 .................................................................................. rotate -‬‬ ‫שקיפויות ושכבות ‪319 .......................................................................................‬‬ ‫אנימציות ‪319 ...................................................................................................‬‬ ‫אנימציות יעילות עם ‪322 ........................................................... double buffering‬‬ ‫סיכום ‪323 ............................................................................................................‬‬ ‫פרק ‪ :11‬נושאים מתקדמים ‪325 ..................................................... API‬‬ ‫מה הקשר בין ‪ API‬לבין ‪325 ......................................................................... ?HTML5‬‬ ‫מיקום גיאוגרפי ‪326 ........................................................................... Geolocation -‬‬ ‫כיצד פועלת התכונה ‪326 ................................................................ ?Geolocation‬‬ ‫קוד בסיסי ליצירת תוכנית משולבת ‪328 ..........................................Geolocation‬‬ ‫תוכן עניינים ‪17‬‬ ‫אחסון מקומי ‪331 ............................................................................Local storage -‬‬ ‫לשם מה לשמור את הנתונים בדפדפן? ‪332 ............................................................‬‬ ‫דוגמאות למשתמשים בשמירה מקומית ‪332 ...........................................................‬‬ ‫דוגמה ‪332 ..................................................................................................‬‬ ‫הלוגיקה לשמירת מצב ‪333 .................................................................................‬‬ ‫החלק המרכזי של הקוד ‪334 ................................................................................‬‬ ‫סיכום‪335 ........................................................................................................‬‬ ‫‪ File API – drag and drop‬גרירת קבצים מהמחשב האישי אל חלון הדפדפן ‪336 ...............‬‬ ‫תמיכת דפדפנים ‪337 ..........................................................................................‬‬ ‫ההסבר הטכני‪337 ................................................................................ File API :‬‬ ‫דוגמה לקוד שעושה שימוש ב‪338 .......................................................... File API -‬‬ ‫סיכום ‪340 ............................................................................................................‬‬ ‫אינדקס ‪341 .....................................................................................‬‬ ‫אינדקס תגיות למילוי עצמי‬ ‫‪HTML5 18‬‬ ‫הקדמה‬ ‫ספר זה נכתב על ידי רושו יונית‪ ,‬בעלת ניסיון של מספר שנות הוראה בנושא ‪ XHTML‬ו‪-‬‬ ‫‪ HTML5‬במסלול לעיצוב אינטראקטיבי בשנקר‪ .‬הצלחת הסטודנטים על פי שיטת לימוד‬ ‫מוגדרת היטב ועקבית‪ ,‬תרמה ליוזמה לריכוז החומר וכתיבת הספר הזה‪.‬‬ ‫במהלך הלימוד בספר מנסה יונית להקפיד‪ ,‬עד כמה שניתן‪ ,‬על תהליכים מוגדרים וברורים‪,‬‬ ‫עבודה יעילה וקוד איכותי‪ ,‬ולהדגיש גם את החשיבות של יעילות הקוד‪ .‬הרי לא די בכך‬ ‫שהאתר פועל או "עובד" ‪ -‬הוא צריך לשרת באופן מקצועי‪ ,‬יעיל ולהיות בעל משמעות‪.‬‬ ‫הספר מצייד אותך בכלים תיאורטיים ומעשיים להבנת רשת האינטרנט‪ ,‬לתכנון ולבנייה של‬ ‫אתרי אינטרנט בשפה ‪ ,HTML5‬ולעבודה עצמאית‪ ,‬החל בשלב הגדרת הצרכים ועד להגשת‬ ‫המוצר הסופי‪ .‬אתה תכיר וגם תבין את הטכנולוגיה במהלך הלימוד של הטקסט והדוגמאות‪,‬‬ ‫ולא פחות חשוב ‪ -‬תוך כדי התנסות בפתרון תרגילים‪.‬‬ ‫עם סיום הלימוד בספר תוכל לבנות אתרי אינטרנט ויישומים למכשירים ניידים )מובייל(‬ ‫בשפת ‪ ,HTML5‬תוך שימוש בטכנולוגיות מתקדמות‪ ,‬לצורך בנייה מקצועית ונקייה‪ ,‬משולבת‬ ‫מדיה‪ ,‬אינטראקטיב וקוד‪ .‬הספר מתייחס הן למסך הרחב והן למסך הצר של מובייל‪.‬‬ ‫מבנה הספר‬ ‫לאורך הספר תמצא תרגילים ברמות שונות‪ .‬לכל התרגילים יש פתרונות‪ .‬שים לב‪ ,‬לכל‬ ‫תרגיל יש דרכי פתרון שונות‪ .‬בפתרונות יש גיוון בבחירות הדרכים ואופני הפתרון‪ ,‬כדי‬ ‫לספק לך דוגמאות מגוונות‪ ,‬אולם זכור שיש פתרונות נוספים שיכולים להיות טובים גם הם‪.‬‬ ‫בפתרונות יש הקפדה על מינימליזם בקוד‪ ,‬ועל קוד יעיל ואפקטיבי‪.‬‬ ‫הפרק העוסק בטפסים משמש כסדנת עבודה‪ ,‬בה בכל שלב של הלמידה מרחיבים את הטופס‬ ‫שבונים ביחד‪.‬‬ ‫הספר מחולק לשני חלקים עיקריים‪ :‬פרקים ‪ 1‬עד ‪ 7‬מכסים את כל הנושאים הרלוונטיים‬ ‫להעלאת אתר מקצועי לאוויר‪ .‬פרקים ‪ 8‬ואילך עוסקים בנושאים מורכבים שיאפשרו לך‬ ‫לשדרג את הידע שלך ולהפוך את האתר לאינטראקטיבי בעזרת מדיה‪ ,‬קוד‪ ,‬איתור מיקום‬ ‫הגולש‪ ,‬מתן אפשרות לגרירת קבצים לחלון הדפדפן ועוד‪.‬‬ ‫הקדמה ‪19‬‬ ‫קהל היעד‬ ‫בין אם אתה שואף לדעת לבנות אתר והנך ללא ניסיון או ידע בתחום‪ ,‬ובין אם אתה מנוסה‬ ‫ובקיא בגרסאות קודמות של שפת בניית האתרים ‪ ,HTML‬תוכל למצוא בספר זה את‬ ‫התשובות שחיפשת‪ .‬הספר כולל פרק מבוא המתאר מושגים בסיסיים הכרחיים להבנה‪,‬‬ ‫ובמהלך הספר טיפים למי שעבד בגרסאות קודמות‪ .‬הספר מסיים ברמה מאוד גבוהה של‬ ‫התממשקות ל‪ API-‬מורכבים‪ ,‬מדיה ותגית הקנבס המפורסמת‪.‬‬ ‫קטעי הקוד‬ ‫ניתן להוריד את כל קבצי הקוד ב‪ html -‬ו‪ css-‬והפתרונות הקיימים מאתר האינטרנט של‬ ‫הוצאת הוד עמי‪www.hod-ami.co.il :‬‬ ‫בנוסף לקטעי הקוד תמצא בקובץ שייפתח גם קבצי תמונות של מסכים שנמצאים בספר‪.‬‬ ‫מכיוון שהספר מודפס ללא צבעים תוכל להיעזר במסך המקורי כדי לראות כיצד הוא נראה‬ ‫עם צבע‪.‬‬ ‫מצא את הספר באתר ואת הלינק "קוד מקור" להורדת הקבצים‪ .‬לחץ עליו ועקוב אחר‬ ‫ההוראות‪ .‬אם לא תגדיר אחרת‪ ,‬יועתקו הקבצים אוטומטית לדיסק שלך‪ ,‬לתיקייה זו‪:‬‬ ‫\‪C:\HodAmiBooks\59458‬‬ ‫תוכל לבחור בעת ההתקנה בכל תיקייה אחרת‪ .‬לאחר שתוריד את הקבצים מאתר הוד‪-‬עמי‬ ‫הם יימצאו )אם לא שינית( בתיקיה ‪ 59458‬שנמצאת תחת ‪ HodAmiBooks‬שנמצאת בכונן ‪.C‬‬ ‫בספר נתייחס לתיקיית ברירת המחדל הזו‪.‬‬ ‫בדרך כלל הפעולות שיש לבצע לאחר הלחיצה על הלינק‪ :‬לחיצה על הפעל‪ ,‬לחיצה על‬ ‫‪ ,UnZip‬לחיצה על ‪ OK‬ו‪.Close-‬‬ ‫על יונית רושו‬ ‫מהנדסת תוכנה בעלת ניסיון מעשי רב שנים בבניית אתרים לחברות הייטק בארץ‪ .‬מרצה ל‪-‬‬ ‫‪ HTML5‬במחלקות לתקשורת חזותית ולהנדסת תוכנה ב'שנקר' ובמכון הטכנולוגי חולון‪.‬‬ ‫כתבה את מדור ידיעות באתר 'נענע‪ '10‬וכותבת את מדור 'ניצוצות' ברשת בעיתון 'הארץ'‪,‬‬ ‫על מגמות בעיצוב ובטכנולוגיה ברשת‪ .‬מנהלת את 'דיינמיק‪-‬ווב' מקבוצת 'אולביז'‪ ,‬אפיון‪,‬‬ ‫עיצוב ובניית אתרי פרימיום ואפליקציות ווב‪.‬‬ ‫אני מעודדת אותך לקרוא‪ ,‬להתנסות ולחקור מתוך מטרה להגיע לרמה בינלאומית מקצועית‪.‬‬ ‫יונית‪.‬‬ ‫‪HTML5 20‬‬ ‫מאפיינים לתגיות ‪-‬‬ ‫‪Attributes‬‬ ‫עד כה למדת לשלב תגיות במסמך ‪ HTML5‬שלך‪ .‬בתחילת הפרק עמדנו על החשיבות של‬ ‫תגיות ושל מאפיינים )‪ .(attributes‬כעת נעבור לשלב הבא‪ :‬הכרת המאפיינים‪.‬‬ ‫כמו שלכל אדם יש שם ומאפיינים מסוימים כמו צבע עיניים )כחול(‪ ,‬גובה )‪ 1.45‬ס"מ(‪ ,‬גיל‬ ‫)‪ (6‬ועוד‪ ,‬כך גם לתגית ניתן להגדיר מאפיינים מסוימים‪.‬‬ ‫לרוב התגיות ניתן להגדיר מאפיינים שמעשירים את התצוגה‪ ,‬את היכולות או את‬ ‫הפונקציונליות שלהן‪ .‬דוגמה למאפיינים‪ :‬נתיב אל תמונה‪ ,‬נתיב אל דף אינטרנט אחר‪ ,‬שם‬ ‫התגית ועוד‪ ,‬כפי שתראה בהמשך‪.‬‬ ‫הבה נמשיך בדוגמה הקודמת‪" :‬צבע העיניים" הוא המאפיין ו"כחול" הוא הערך של המאפיין‬ ‫הזה‪ .‬גם "גיל" הינו מאפיין ו‪ "6"-‬היה הערך שלו‪ .‬לרוב המאפיינים ב‪ HTML-‬יש ערך‬ ‫כלשהו‪ ,‬כפי שתוכל לראות להלן‪.‬‬ ‫כתיבת מאפיין והערך שלו נעשית באופן הבא‪.src="face.jpg" :‬‬ ‫הבא נבחן זאת‪ :‬המאפיין הוא ‪ ,src‬והערך שלו הוא ‪ face.jpg‬שרשום בין גרשיים‪.‬‬ ‫ייתכן שלא ברורה לך עדיין המשמעות של הכתיבה הזו‪ ,‬אולם מייד הדברים יובהרו‪ .‬תחילה‬ ‫צריך לדעת היכן וכיצד מגדירים את המאפיינים ואת הערכים שלהם‪ .‬המאפיינים מופיעים‬ ‫לרוב בצורת "רווח 'שם' שווה 'ערך' שרשום בין גרשיים"‪ .‬זו למעשה נוסחה‪ .‬נחזור אליה‬ ‫שוב במהלך הלימוד‪ ,‬כדי לא לטעות באופן כתיבת המאפיינים‪.‬‬ ‫ניתן גם לכתוב מאפיין שאינו שווה לערך כלשהו‪ ,‬אבל אלה מקרים בודדים‪ ,‬כפי שנלמד‬ ‫בשלב מתקדם יותר‪.‬‬ ‫מנוסה בגרסאות קודמות של ‪?HTML‬‬ ‫ב‪ HTML5-‬לא חייב להיות ערך לכל מאפיין‪ .‬על החוקיות תלמד בהמשך‪.‬‬ ‫מאפיינים )‪ (attributes‬מוגדרים תמיד בתגית הפתיחה בלבד‪ .‬אם צריך להגדיר יותר‬ ‫ממאפיין אחד‪ ,‬הם יוגדרו זה אחר זה‪ ,‬ללא חשיבות לסדר הכתיבה שלהם‪ .‬כמובן‪ ,‬לפי‬ ‫הנוסחה שלמעלה‪ ,‬יש לזכור שלפני כל מאפיין יש לכתוב את התו 'רווח'‪.‬‬ ‫התבונן בקוד ‪ ,exercise_2.8.html‬על אף שאינך מכיר עדיין את התגיות ולא יודע מה‬ ‫משמעותן‪ ,‬תוכל לזהות את המאפיינים‪ ,‬אשר מודגשים ברקע אפור‪:‬‬ ‫>‪<!DOCTYPE html‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>Attributes</title‬‬ ‫>‪</head‬‬ ‫‪HTML5 44‬‬ ‫>‪<body‬‬ ‫>‪<section‬‬ ‫>"‪<img src="logo.jpg" alt="cats" title="cats‬‬ ‫>‪<br‬‬ ‫>‪<a href="about.html">about us</a‬‬ ‫>‪</section‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫בהמשך הלימוד תכיר ותבין את משמעות המאפיינים הללו‪ .‬התוצאה אינה מוצגת כי עכשיו‬ ‫חשוב להבין מה מאפיין וכיצד כותבים אותו‪.‬‬ ‫תוכל לראות שלפני כל מאפיין יש רווח‪ ,‬לאחריו יש סימן שוויון )=(‪ ,‬ולאחריו רשום הערך‬ ‫שלו כשהוא תחום בגרשיים‪.‬‬ ‫כך תוכל לראות שהנוסחה תמיד מתקיימת‪ :‬רווח 'שם' שווה 'ערך' שרשום בין גרשיים‪.‬‬ ‫סיכום‪ :‬התקניות הנדרשת במסמכי‬ ‫‪HTML5‬‬ ‫בכתיבת קוד ‪ HTML5‬חשוב להקפיד על החוקים ולפעול על פי התקנים שנקבעו‪ ,‬למניעת‬ ‫תצוגה שונה על מסכים שונים‪ ,‬דפדפנים שונים ומערכות הפעלה שונות‪ .‬גרסאות שונות של‬ ‫דפדפנים שונים מחמירות באופן שונה בכתיבת התגיות והמאפיינים‪ ,‬ועל כן התצוגה הסופית‬ ‫משתנה מדפדפן לדפדפן‪ .‬הקפדה על התקניות המומלצת בספר זה תסייע למניעת פערי‬ ‫תצוגה בין דפדפנים שונים‪ .‬בנוסף לקריאה נוחה וכמובן‪ ,‬למען הסדר הטוב‪ .‬יש סיבות‬ ‫נוספות לצורך בהקפדה על "החוקים" או לפחות לשמירה על כללים עקביים ומסודרים בעת‬ ‫כתיבה של מסמך ‪.HTML5‬‬ ‫שפת ‪ ,HTML5‬כלומר הגרסה החדשה‪ ,‬אינה נוקשה בכלליה כפי שהיה בגרסאות קודמות‪.‬‬ ‫להלן נלמד על כמה מהחוקים החשובים ונחשף להמלצות לשמירה על סדר וחוקיות‪.‬‬ ‫אם יש לך ידע קודם ב‪ ,XHTML-‬אתה ודאי מקפיד על כך שתהיינה תגיות >‪ <head‬ו‪-‬‬ ‫>‪ ,<body‬וכל תגית חייבת להיסגר‪ .‬שפת ‪ HTML5‬אינה מקפידה על חוקיות זו‪ .‬למעשה‪,‬‬ ‫‪ HTML5‬מאפשרת להשאיר חלק מהתגיות פתוחות ולא לסגור אותן‪ ,‬כמו למשל תגית‬ ‫הפִ ְסקה‪ .‬גם אין חובה להשתמש בתגיות >‪.<body> ,<head> ,<html‬‬ ‫מנוסה בגרסאות קודמות של ‪?HTML‬‬ ‫מי שרגיל לשמור על התקניות של ‪ XHTML‬יתקשה מאוד לקבל את השינויים בתקניות‬ ‫הנדרשת במסמכי ‪ .HTML5‬קח נשימה‪ ,‬תתרגל‪.‬‬ ‫כדי לבדוק אם הקוד שאתה כותב חוקי ותקני‪ ,‬אתה מוזמן להעלות את הקובץ שכתבת‬ ‫ושמרת אל אתר בכתובת‪.http://validator.w3.org :‬‬ ‫פרק ‪ :2‬יסודות ועקרונות שפת )‪45 HTML(5‬‬ ‫התבונן בקוד ‪ .exercise_2.9.html‬שים לב לתגיות החסרות בו‪ ,‬לערבוב בין האותיות רגילות‬ ‫ורישיות‪ ,‬לכך שאין גרשיים סביב הערך של המאפיין‪ ,‬ועוד‪ .‬קוד ‪ exercise_2.9.html‬נמצא‬ ‫תקני בבדיקת התקינות של ‪:HTML5‬‬ ‫>‪<!DOCTYPE html‬‬ ‫>‪<heaD‬‬ ‫>‪<title>Attributes</TITLE‬‬ ‫>‪<meta charset=utf-8‬‬ ‫>‪<bOdy‬‬ ‫>‪<SECTION‬‬ ‫‪This is what it is.‬‬ ‫>‪</section‬‬ ‫תודה לכולכם>‪<p‬‬ ‫>‪</body‬‬ ‫למרות כל "השגיאות" כביכול האלו‪ ,‬הקוד תקין!‬ ‫תרשים ‪2.12‬‬ ‫עם זאת‪ ,‬על אף העובדה ש‪ HTML5-‬אינה מחייבת להקפיד על כללי הכתיבה‪ ,‬לשם האחידות‬ ‫אני מדגישה את החוקיות שרצוי לקיים‪:‬‬ ‫‪ .1‬מבניות ‪ .Structure -‬רצוי לחלק את המסמך לשני חלקים‪ :‬לכותרת )‪ (head‬ולגוף‬ ‫)‪ ,(body‬ולהכיל את שניהם בין תגית הפתיחה >‪ <html‬לבין תגית הסגירה >‪,</html‬‬ ‫שנכתבות לאחר שורת ההצהרה ‪.doctype‬‬ ‫‪ .2‬עריכה נכונה ‪:Well-formed -‬‬ ‫‪‬‬ ‫תגיות שבאופן אינטואיטיבי אמורות להיסגר‪ ,‬רצוי לסגור‪ ,‬ולא להשאיר פתוחות‪.‬‬ ‫כגון‪ p ,body ,head :‬ואחרות‪.‬‬ ‫‪‬‬ ‫קינון נכון ‪ .Properly nested -‬יש להקפיד על כך שתגיות הסגירה תיסגרנה‬ ‫כמו בחוקיות הסוגריים במשוואה מתמטית‪ ,‬בהתאמה לפי סדר פתיחתן‪.‬‬ ‫‪ .3‬סוגי אותיות ‪ .Case sensitive -‬מומלץ להקפיד על שימוש באותיות רגילות‬ ‫)"קטנות"( בלבד‪ ,‬ולא לערבב אותיות רגילות ואותיות רישיות )"גדולות"(‪.‬‬ ‫‪HTML5 46‬‬ ‫‪ .4‬רצוי לתחום כל תכונה של מאפיין בגרשיים ולהקפיד שכל התכונות תיכתבנה‬ ‫באותיות רגילות‪ .‬אם יש ערך זהה לשם המאפיין‪ ,‬כדוגמת המאפיין החדש‬ ‫"‪ hidden="hidden‬אפשר לכתוב >‪ <section hidden‬בלבד‪.‬‬ ‫גם אם לא כל החוקים הרשומים בסעיף זה ברורים לך בשלב זה‪ ,‬אני בטוחה שעם‬ ‫ההתקדמות שלך בלימוד זה תכיר אותם ואת חשיבות השמירה עליהם‪.‬‬ ‫מנוסה בגרסאות קודמות של ‪?HTML‬‬ ‫במהלך הלימוד בספר לא אסגור תגיות ריקות‪ .‬כלומר‪,‬‬ ‫>‪ <meta charset="utf-8" /‬או >‪ <br /‬יוצגו ללא לוכסן בסוף תגית הסגירה‪ ,‬וזה בסדר‪.‬‬ ‫תרגיל ‪1‬‬ ‫צור דף ‪ HTML‬הכולל את השלד‪ ,‬טקסטים ותווים מיוחדים כפי שלמדת‪ ,‬הכן מסמך ‪HTML5‬‬ ‫שייראה כפי שמוצג בתרשים ‪:2.13‬‬ ‫תרשים ‪2.13‬‬ ‫הפתרון נמצא בקוד ‪.solution_2.1.html‬‬ ‫פרק ‪ :2‬יסודות ועקרונות שפת )‪47 HTML(5‬‬ ‫נתיב מוחלט )‪(Absolute path‬‬ ‫נתיב מוחלט מציג את הנתיב אל התמונה ‪ bgr1.jpg‬באופן מפורט‪ ,‬כולל שם האתר‬ ‫והתיקייה‪ ,‬כמו לדוגמה‪:‬‬ ‫"‪<img src="http://www.somedomain.co.il/images/bgr1.jpg‬‬ ‫>"‪title="circle" alt="circle‬‬ ‫זו יכולה להיות תמונה השמורה בשרת של האתר שלך או לחילופין‪ ,‬תמונה שנמצאת באתר‬ ‫אחר ואתה רוצה להציג אותה בדף האינטרנט שלך‪.‬‬ ‫היתרון של השימוש בנתיב מוחלט הוא בכך שהתמונה אינה תופסת מקום בשרת שלנו‪.‬‬ ‫החיסרון הוא בכך שאם ימחקו את התמונה מהשרת שבו היא נמצאת כעת וממנו מציגים‬ ‫אותה‪ ,‬עדיין יהיה לנו דף אינטרנט אבל ללא תמונה‪ .‬כמו כן‪ ,‬יש לשקול את נושא זכויות‬ ‫היוצרים בדבר איסור הצגת תמונה מאתר של מישהו אחר‪.‬‬ ‫שילוב תמונה מתיקיית התמונות באתר‬ ‫כך תוצג תמונה ששמורה בתיקיית תמונות באתר שלנו‪:‬‬ ‫>"‪<img src="images/bgr1.jpg" title="circle" alt="circle‬‬ ‫תמונה כקישור‬ ‫עד כאן למדת ליצור קישור ולמדת להציג תמונה‪ .‬כעת תוכל לשלב את שני הנושאים האלה‬ ‫ולהציג תמונה במקום הטקסט של הקישור‪.‬‬ ‫באתר הבא‪ ,‬תמונות הסמלים של הרשתות החברתיות מהוות למעשה קישורים לאתרים אלה‪:‬‬ ‫פרק ‪ :2‬יסודות ועקרונות שפת )‪75 HTML(5‬‬ ‫באתרים רבים הלוגו הוא הקישור אל דף הבית של האתר‪:‬‬ ‫מעניינים בעיקר סמלי לוגו שמשתנים כשחולפים מעליהם עם העכבר‪:‬‬ ‫‪HTML5 76‬‬ ‫הדבר אינו שונה באתרים בעברית‪ ,‬כמובן‪:‬‬ ‫באתר של הכללית סימנתי במסגרת שחורה את התמונות המהוות קישורים לעמודים אחרים‪.‬‬ ‫כדי לעבור לכתובת קישור‪ ,‬אפשר ללחוץ על סמל או על כיתוב האומר "לחץ כאן"‪ .‬בדוגמה‬ ‫שלמטה‪ ,‬נעבור אל כתובת הקישור על ידי לחיצה על תמונת העיגול‪ ,‬כפי שתוכל לראות‬ ‫בקוד ‪:exercise_2.12.html‬‬ ‫"‪<a href="contact.html"><img src="bgr1.jpg" title="circle‬‬ ‫>‪alt="circle"></a‬‬ ‫התוצאה בדפדפן היא‪ ,‬שבעת מעבר של העכבר מעל התמונה‪ ,‬סמן העכבר יהפוך לצורת כף‬ ‫יד ואצבע המסמלת קישור‪ .‬שים לב למסגרת שהופיעה סביב התמונה בדפדפנים מסוימים‬ ‫)כגון ‪ .IE‬תרשים ‪ .(2.21‬בפרק ‪ 4‬תלמד כיצד לבטל אותה‪.‬‬ ‫פרק ‪ :2‬יסודות ועקרונות שפת )‪77 HTML(5‬‬ ‫במכשירים הניידים‪ ,‬או כשהדף מודפס‪ .‬תוכל לעשות זאת בקלות יחסית ללא צורך לשנות‬ ‫דבר בקוד ‪ HTML‬המקורי שהכנת‪.‬‬ ‫להבדיל מ‪ HTML-‬שהיא שפה מבוססת תגיות‪ CSS ,‬היא שפה שמוכוונת על ידי רשימה של‬ ‫הגדרות עיצוב‪.‬‬ ‫תוכל להבחין בין תגיות ‪ HTML‬שונות על ידי סימני >…< שנרשמים סביב שם של כל תגית‪,‬‬ ‫ואילו ב‪ CSS-‬אין קודי סימון כלל‪.‬‬ ‫כל הגדרת עיצוב מורכבת משני חלקים‪ :‬ההגדרה והערך שלה‪ .‬להלן מספר דוגמאות של‬ ‫הגדרות‪ .‬את ההגדרות צריך לכתוב באנגלית‪ .‬כאן הן נכתבו בעברית לשם הנוחות וההסבר‬ ‫בלבד‪ ,‬ולצורך ההבנה של נושא "הזוגות"‪:‬‬ ‫‪‬‬ ‫צבע רקע‪ :‬כחול; היישום‪background-color:blue :‬‬ ‫‪‬‬ ‫צבע גופן‪ :‬אדום; היישום‪color:red :‬‬ ‫‪‬‬ ‫גודל אות‪ 12 :‬פיקסלים; היישום‪font-size:12px; :‬‬ ‫‪‬‬ ‫רווח מלמעלה‪ 56 :‬פיקסלים; היישום‪padding-top:56px; :‬‬ ‫‪‬‬ ‫סוג גופן‪ :‬אריאל )‪ ;(Arial‬היישום‪font-family:Arial :‬‬ ‫שים לב שבאנגלית הפרמטר‪ ,‬כמו בדוגמה הראשונה ‪ ,blue‬נכתב צמוד לנקודתיים‪ .‬יש‬ ‫עשרות הגדרות שונות ולכל אחת מהן ניתן לקבוע מספר ערכים‪ .‬מספר האפשרויות גדול‬ ‫מאוד‪ ,‬כפי שתראה בהמשך הלימוד בפרק זה‪.‬‬ ‫כרגע חשוב שתדע שההגדרות נעשות בזוגות‪ :‬הגדרה וערך‪.‬‬ ‫גרסאות של ‪CSS‬‬ ‫כמו ‪ ,HTML5‬כך גם שפת ההגדרות ‪ CSS‬משתנה ומתפתחת ללא הרף‪ .‬חלק מהגדרות העיצוב‬ ‫כבר קיימות משנות ה‪ ,90-‬החל בגרסה הראשונה‪ .‬הגדרות העיצוב העדכניות נמצאות במסמכי‬ ‫המפרטים של ‪ .CSS3‬היכולות שמאפשרות הגדרות העיצוב של ‪ CSS3‬התפתחו באופן‬ ‫משמעותי בעשור האחרון‪ ,‬והן ממשיכות להתפתח גם בעת כתיבת שורות אלו‪.‬‬ ‫היכן כותבים את הגדרות ‪?CSS‬‬ ‫יש שלוש אפשרויות לכתוב את הגדרות העיצוב של האלמנטים בדף‪ .‬מתוכ ַן‪ ,‬מומלצת‬ ‫האפשרות השלישית בלבד‪ ,‬אך כדאי להכיר גם את שתי האחרות‪ ,‬כי לפעמים יש צורך‬ ‫להיעזר בהן‪.‬‬ ‫פרק ‪ :4‬הגדרות עיצוב על ידי ‪107 CSS‬‬ ‫הגדרת העיצוב ישירות בתגית ‪ :HTML‬שיטת‬ ‫‪Inline‬‬ ‫שיטת הגדרת עיצוב זו היא הבסיסית והקלה ביותר‪ .‬לשיטה קוראים ‪ ,Inline‬כי כל הגדרה‬ ‫מתבצעת "בתוך השורה" של התגית‪.‬‬ ‫את שיטת ההגדרה ‪ Inline‬כבר ראית בפרק ‪ ,2‬אך היא לא הוסברה‪ .‬ההגדרה מתבצעת בדרך‬ ‫זו ‪ -‬קוד ‪:exercise_4.1.html‬‬ ‫>‪<h1 style="color:red;">Profile Company</h1‬‬ ‫בתחילת הלימוד בפרק ‪ 2‬הקפדנו להבחין בין התגיות לבין המאפיינים )‪ .(attributes‬בכל‬ ‫הפרק הודגשה החשיבות של ההבנה וההפנמה של מושגים אלה‪ .‬התגיות מרכיבות את דף‬ ‫האינטרנט שלך וכל אחת מהן רשומה בין הסימנים >…<‪ .‬המאפיינים קובעים הגדרות‬ ‫מסוימות ומוגדרים בתגית הפתיחה‪ .‬המאפיינים מופיעים לרוב בצורת הנוסחה שהקפדנו‬ ‫לחזור ולהדגיש בפרק ‪" :2‬רווח 'שם' שווה 'ערך' שרשום בין גרשיים" כאשר כותבים‬ ‫מאפיינים אחדים יש ביניהם רווחים‪ ,‬ולאחר כל המאפיינים נרשם התו נקודה‪-‬פסיק );(‪.‬‬ ‫בדוגמת קוד ‪ exercise_4.1.html‬הסגנון )‪ (style‬הינו המאפיין‪ .‬הוא מוצג בתגית >‪,<h1‬‬ ‫והערך שלו הינו הביטוי שנמצא בין הגרשיים‪ .‬ראינו איפוא שהגדרת סגנון לתגית הפתיחה‬ ‫מתבצעת בצורה של מאפיין וערך‪ ,‬כפי שלמדת בפרק ‪ .2‬בדוגמה זו הערך בהגדרות הסגנון‬ ‫מורכב מזוג נתונים‪ .‬החלק הראשון הוא למעשה סוג המאפיין והחלק השני של זוג הנתונים‬ ‫מציין ערך‪ .‬זוג הנתונים מופרדים ביניהם בנקודתיים וצמודים ללא רווח‪.‬‬ ‫הבה נתבונן בדוגמה נוספת‪ :‬נכתוב את המאפיין ‪ style‬ואת סימן השוויון ואחר כך את הערך‬ ‫שלו "‪") "color:red‬צבע‪:‬אדום"(‪ .‬שים לב שגם ‪ color‬וגם ‪ red‬הם חלקים של הגדרת‬ ‫המאפיין‪ .‬הגדרה זו גרמה לכך שצבע הגופן בשורה הראשונה הוא אדום‪ ,‬כפי שתוכל לראות‬ ‫בתרשים ‪ .4.1‬הגופן בשורה השנייה הוא שחור‪ .‬הספר מודפס בשחור‪/‬לבן‪ ,‬ולכן אין בו‬ ‫הבחנה של צבעים‪ ,‬אך תוכל לראות זאת במסך‪ ,‬כאשר תפתור את התרגיל!‬ ‫תרשים ‪4.1‬‬ ‫‪HTML5 108‬‬ ‫בדרך דומה ניתן להגדיר צבע רקע‪ ,‬סוג גופן‪ ,‬רוחב שורה ועוד‪ .‬ניתן לקבוע הגדרות לתגיות‬ ‫שונות‪ ,‬לתגית כותרת‪ ,‬לתגית קישור ועוד‪ ,‬כפי שתוכל לראות בקוד ‪.exercise_4.2.html‬‬ ‫הסברים מפורטים ורשימות ערכים אפשריים מופיעים בהמשך הפרק‪ .‬הצלליות באפור‬ ‫מדגישות את המאפיינים‪" :‬רווח 'שם' שווה 'ערך' שרשום בין גרשיים"‪ .‬בסוף רשימת‬ ‫המאפיינים שבתגית כותבים נקודה‪-‬פסיק );(‪ ,‬ראה את התגית האחרונה >‪.<a‬‬ ‫>‪<section style="background-color:blue;">Profile Company</section‬‬ ‫>‪<h2 style="font-family:Arial;">Goals</h2‬‬ ‫>‪<aside style="width:200px;">Vision</aside‬‬ ‫>‪<a href="about.html" style="color:green;">Vision</a‬‬ ‫תרשים ‪4.2‬‬ ‫בתרשים ‪ 4.2‬תוכל לראות את התוצאה המתקבלת בדפדפן כרום‪ ,‬ובו לא ניתן להבחין‬ ‫באותיות השחורות של הכותרת על צבע הרקע הכחול‪ .‬על כן נוסיף את ההגדרה "צבע‪:‬לבן"‪,‬‬ ‫כדי שהאותיות תהיינה לבנות על רקע כחול )שים לב‪ :‬המראה יהיה ברור יותר על המסך‪,‬‬ ‫לאחר שתפתור את התרגיל( ‪ -‬קוד ‪:exercise_4.3.html‬‬ ‫;‪<section style="background-color:blue‬‬ ‫>‪color:white;">Profile Company</section‬‬ ‫שים לב שבין ערך אחד של המאפיין לערך אחר מפרידים על ידי נקודה‪-‬פסיק );(‪.‬‬ ‫פרק ‪ :4‬הגדרות עיצוב על ידי ‪109 CSS‬‬ ‫בתרשים ‪ 4.3‬תוכל לראות את התוצאה בדפדפן‪:‬‬ ‫תרשים ‪4.3‬‬ ‫הגדרות צבע בשיטת ‪ Inline‬ובאופן כללי‬ ‫כפי שראית בקוד ‪ ,exercise_4.2.html‬ניתן לשנות צבע אותיות וצבע רקע על ידי הגדרת‬ ‫שם של צבע‪ ,‬מספר הקסדצימלי של צבע או הגדרה של רמות הכחול‪ ,‬האדום והירוק במידת‬ ‫שקיפות רצויה‪.‬‬ ‫להלן חלק מרשימת הצבעים המוגדרים מראש‪ ,‬אשר מוכרים על ידי הדפדפנים‪:‬‬ ‫‪aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, purple, red,‬‬ ‫‪silver, teal, white, and yellow.‬‬ ‫לחילופין‪ ,‬תוכל לציין את מספר הצבע במספר בן שש ספרות לאחר הסימן סולמית ‪.#‬‬ ‫לדוגמה‪ #000000 ,‬מציין שחור‪ ,‬ו‪ #ffffff -‬מציין לבן‪ .‬את המספר ניתן לדגום בתוכנה‬ ‫פוטושופ ואחרות‪.‬‬ ‫אפשרות נוספת היא להגדיר את רמות הכחול‪ ,‬ירוק ואדום של הצבע‪ ,‬עם ציון אחוזי‬ ‫השקיפות‪.‬‬ ‫כדי להציג דף בצבע רקע שחור‪ ,‬תוכל לכתוב את אחד הקודים הבאים בשורת התגית‪ ,‬כולם‬ ‫כתובים בשיטת ‪:Inline‬‬ ‫>";‪<body style="background-color:#000000‬‬ ‫>";‪<body style="background-color:black‬‬ ‫>";)‪<body style="background-color:rgba(0,0,0,0.5‬‬ ‫בדוגמה האחרונה ברשימה שלעיל‪ ,‬הצבע יהיה חצי שקוף )‪.(0.5‬‬ ‫‪HTML5 110‬‬ ‫מנוסה בגרסאות קודמות של ‪?HTML‬‬ ‫בספר זה לא נשתמש בתגית >‪ <table‬ליצירת פריסות‪ .‬שיטת השימוש בטבלה לעימוד הדף‬ ‫הינה מיושנת כי היא אינה מפרידה כראוי בין התוכן לבין העיצוב‪ .‬לפיכך‪ ,‬כדי ליצור את‬ ‫הפריסה המוצגת בתרשים ‪ 5.2‬מומלץ להשתמש בשיטות חדשות לעימוד פריסות‪.‬‬ ‫מודל הקופסה‬ ‫‪Box model -‬‬ ‫"מודל הקופסה" קובע כיצד והיכן יוצגו אלמנטים בדף ומה יהיו יחסי הגומלין ביניהם‪.‬‬ ‫כאשר אנו מתייחסים לאלמנט או לאובייקט כלשהו‪ ,‬אנו מתכוונים למעשה לתגית שהוגדרה‬ ‫בדף‪ .‬תגיות כמו >‪ <nav> ,<header> ,<section> ,<h1‬ותגיות נוספות שלמדת בפרקים‬ ‫הקודמים‪ ,‬הן אובייקטים בדף האתר ומרכיבות את המבנה ואת המראה שלו‪ .‬על פי מודל זה‪,‬‬ ‫כל אלמנט בדף מוגדר כקופסה‪ ,‬המורכבת מהחלקים הבאים‪:‬‬ ‫‪‬‬ ‫‪ - Content area‬אזור התוכן‪ .‬משמש לטקסטים‪ ,‬תמונות ושאר מרכיבי התוכן‬ ‫שבתגית‪.‬‬ ‫‪‬‬ ‫‪ - Padding‬שוליים פנימיים‪ .‬משמשים בעיקר לציון הרווח שבין הטקסט לבין שולי‬ ‫אזור התוכן‪ .‬שוליים פנימיים אינם יכולים להיות מוגדרים כמספר שלילי‪.‬‬ ‫‪‬‬ ‫‪ - Border‬מסגרת‪ .‬המסגרת הינה חלק מהעיצוב‪ ,‬אך לרוב מבטלים את קיומה ב‪CSS-‬‬ ‫על ידי ההגדרה ‪ 0) border:0px‬פיקסלים(‪.‬‬ ‫‪‬‬ ‫‪ - Margin‬שוליים חיצוניים‪ .‬שוליים אלה תמיד שקופים ולא ניתן לראותם‪ .‬השוליים‬ ‫החיצוניים משמשים ליצירת רווח בין אלמנטים‪ .‬שוליים חיצוניים יכולים להיות‬ ‫מוגדרים כמספר שלילי )מיקום יחסית למיקום המקורי(‪.‬‬ ‫תרשים ‪5.3‬‬ ‫פרק ‪ :5‬מודל הקופסה ופריסות ‪147‬‬ ‫כשתגדיר רקע לאלמנט‪ ,‬הוא יכלול את אזור התוכן ואת אזור השוליים הפנימיים‪ ,‬עד קו‬ ‫המסגרת‪.‬‬ ‫התבונן בתרשים ‪ .5.3‬זוהי דוגמה לתגית המקטע >‪ <section‬שבהגדרות העיצוב שלה‬ ‫ב‪ CSS-‬נקבעו רוחב וגובה מסוימים‪ .‬הגדרות אלו מתייחסות לרוחב ולגובה של אזור התוכן‬ ‫בלבד‪ .‬אם תוסיף את ההגדרות ‪ border ,padding‬ו‪ ,margin-‬הממדים של הקופסה יגדלו‪ ,‬אך‬ ‫הדבר לא ישפיע על אזור התוכן שלה‪.‬‬ ‫נמחיש זאת על ידי הדוגמה הבאה‪ :‬נניח שעל פי העיצוב הרצוי‪ ,‬עליך ליצור תגית שהמקום‬ ‫הכולל שמוגדר לה‪ ,‬כולל הרווחים מכל צדדיה‪ ,‬הוא ‪ 200‬פיקסלים‪ .‬השוליים החיצוניים‬ ‫צריכים להיות ‪ 25‬פיקסלים‪ ,‬ויציגו את הרווח בינה לבין תגיות אחרות‪ .‬בנוסף‪ ,‬בעיצוב יש‬ ‫לאזור זה מסגרת ברוחב ‪ 3‬פיקסלים ושוליים פנימיים של ‪ 5‬פיקסלים‪.‬‬ ‫תרשים ‪ 5.4‬מסכם את הנתונים‪:‬‬ ‫תרשים ‪5.4‬‬ ‫נשאלת השאלה‪ :‬מהו הרוחב של אזור התוכן?‬ ‫אם השוליים החיצוניים הינם ‪ 25‬פיקסלים מכל צד‪ ,‬ורוחב המסגרת הוא ‪ 3‬פיקסלים מכל צד‬ ‫והשוליים הפנימיים הינם ‪ 5‬פיקסלים מכל צד‪ ,‬אז מימין ומשמאל דרושים יחד ‪ 66‬פיקסלים‪.‬‬ ‫הרוחב הכללי על פי העיצוב שיש למקטע >‪ <section‬הוא ‪ 200‬פיקסלים‪ ,‬ומכאן שרוחב‬ ‫אזור תוכן הוא ‪ 134‬פיקסלים‪ ,‬וכך יש להגדיר אותו‪ .‬בהגדרות של ‪ #box_example‬בקוד‬ ‫‪ exercise_5.1.html‬תוכל לראות את הגדרות העיצוב האלו‪.‬‬ ‫שים לב שההגדרות ב‪ #box_example2 -‬מבטלות לחלוטין את השוליים הפנימיים‪ ,‬את‬ ‫השוליים החיצוניים ואת המסגרת‪.‬‬ ‫‪HTML5 148‬‬ ‫תרשים ‪ 7.12‬מציג את התוצאה הסופית במכשיר הנייד‪:‬‬ ‫תרשים ‪7.12‬‬ ‫שים לב‪ ,‬שאנו כלל לא עוסקים בפרק זה בעיצוב הטפסים‪ .‬את העיצוב יש לעשות לפי‬ ‫ההנחיות והכללים שנלמדו בפרק ‪.4‬‬ ‫תרגול ‪ :7-1‬צור מסמך ‪ HTML5‬כפי שלמדת‪ .‬השאר את התגית >‪ <body‬ריקה‪.‬‬ ‫התגית >‪ <form‬ומבנה טופס‬ ‫התגית >‪ <form‬להגדרת טופס כוללת תגית פתיחה ותגית סגירה‪ .‬בין תגיות אלו מוגדרים‬ ‫הפקדים שנלמד בפרק זה‪.‬‬ ‫כאשר יש בטופס פקד "שלח"‪ ,‬כפי שתלמד ליצור בהמשך ‪ -‬לחיצה עליו תשלח אל השרת‬ ‫את כל הנתונים שהגולש מילא בטופס‪ .‬כך כותבים את התגיות להגדרת טופס‪:‬‬ ‫"‪<form action="http://www.designers.com/members.aspx‬‬ ‫>‪method="get" autocomplete‬‬ ‫>‪</form‬‬ ‫‪194‬‬ ‫‪HTML5‬‬ ‫לתגית >‪ <form‬יש מאפיינים אחדים‪:‬‬ ‫‪‬‬ ‫המאפיין ‪ - action‬הכתובת שאליה נשלחים הנתונים‪<form action> :‬‬ ‫הנתונים שהגולש ממלא בטופס צריכים להישלח אל השרת כדי שיעבד אותם ויגיב‬ ‫בהתאם‪ .‬הערך של המאפיין ‪ action‬הינו הכתובת שאליה ישלחו הנתונים‪ .‬הכתובת‬ ‫יכולה להיות אתר באינטרנט‪ ,‬דף מסוים באתר‪ ,‬ועוד‪ .‬אם לא מגדירים מאפיין זה‪,‬‬ ‫הנתונים יישלחו אל הדף הנוכחי‪.‬‬ ‫‪‬‬ ‫המאפיין ‪ - method‬אופן שליחת הנתונים אל השרת‪<form method> :‬‬ ‫יש שתי שיטות לשליחת נתונים‪ method="get"> :‬או >"‪method="post‬‬ ‫‪ :get‬זו ברירת המחדל‪ .‬באופן זה נשלחים הנתונים באופן גלוי לעיני הגולש בזוגות‬ ‫"שם פרמטר"‪/‬ערך‪ ,‬כלומר‪ ,‬הנתונים מוצגים בשורת הכתובת של הדפדפן‪ .‬ניתן‬ ‫לראות זאת לדוגמה באתר של גוגל‪ .‬היכנס‪ ,‬חפש והסתכל בשורת הכתובת‪.‬‬ ‫בתרשים הבא מחפשים את המילה ‪ .HTML5‬כפי שתוכל לראות‪ ,‬הביטוי שמחפשים‬ ‫מוצג בשורת הכתובת של הדפדפן‪:‬‬ ‫תרשים ‪7.13‬‬ ‫שיטה זו מומלצת כאשר הנתונים אינם רגישים‪ ,‬סודיים‪ ,‬או אישיים‪ .‬מספר התווים‬ ‫שניתן לשלוח ב‪ get-‬מוגבלת למספר מסוים‪ ,‬תלוי בדפדפן‪ ,‬ולכן יכול להיות שלא כל‬ ‫המידע יועבר כראוי‪.‬‬ ‫‪ :post‬הנתונים נשלחים באופן שאינו גלוי לעיני הגולש‪ .‬אין זה אומר שאם הנתונים‬ ‫אינם גלויים‪ ,‬הם מאובטחים‪ .‬בשיטה זו אין הגבלה על כמות הנתונים שאפשר לשלוח‪.‬‬ ‫דוגמה למשלוח כזה‪ :‬סיסמה‪.‬‬ ‫‪‬‬ ‫המאפיין ‪<form autocomplete> :autocomplete‬‬ ‫מאפיין זה יכול לקבל שני ערכים‪ on :‬או ‪ .off‬אם הוא דולק )‪ ,(on‬אזי הדפדפן שומר‬ ‫בזיכרון את הערכים המוזנים לו עבור השדות ובפעם הבאה הוא יציע למשתמש‬ ‫להשתמש בהם‪ .‬ברירת מחדל היא ‪.on‬‬ ‫פרק ‪ :7‬טפסים ב‪195 HTML5 -‬‬ ‫‪8‬‬ ‫נושאים מתקדמים ‪CSS3‬‬ ‫בשלב זה של הלימוד‪ ,‬אתה כבר מוכן לככב בעולם האמיתי ברשת‪ .‬למדת לבנות דפי‬ ‫‪ HTML5‬באופן מקצועי ויעיל‪ .‬למדת לעצב את הדפים ואת הגדרות העיצוב הרלוונטיות‪.‬‬ ‫לפניך אפשרויות רבות להגדרות עיצוב ב‪ .CSS-‬בפרק זה תכיר יותר את ‪ CSS‬בכלל ואת‬ ‫‪ CSS3‬בפרט‪ ,‬ותרחיב את ידיעותיך על שימוש בסוגי גופנים‪.‬‬ ‫בפרק זה נבחן את הנושאים הבאים‪:‬‬ ‫‪‬‬ ‫טכניקות מתקדמות ב‪CSS-‬‬ ‫‪‬‬ ‫‪CSS3‬‬ ‫‪‬‬ ‫הטמעת גופנים‬ ‫תמונות רקע‪ ,‬חזרה ודגשים‬ ‫על הוספת רקע פשוטה לאתר למדת בפרק ‪ .4‬כידוע‪ ,‬לתמונות יש משקל )נפח( ובעת טעינת‬ ‫עמוד אינטרנט ככל שיהיו בו יותר תמונות )תוכן או רקע(‪ ,‬כך משקלו וזמן טעינתו יהיו‬ ‫ארוכים יותר‪ .‬לכן‪ ,‬מומלץ לייעל על ידי הפחתת השימוש בתמונות רקע‪ ,‬כאשר זה אפשרי‪.‬‬ ‫כדי שתוכל לייעל את הגדרת תמונת הרקע ואת הפחתת השימוש בתמונת רקע לאפקט של‬ ‫מעברי צבע‪ ,‬הבה ניזכר בהגדרת תמונת רקע רגילה‪:‬‬ ‫‪body‬‬ ‫{‬ ‫;)‪background:url(some_pattern.jpg‬‬ ‫}‬ ‫כברירת מחדל‪ ,‬הדפדפנים משכפלים את תמונת הרקע לאורך ולגובה השטח שמוגדר עבור‬ ‫התגית שתמונת הרקע מוגדרת כרקע שלה‪.‬‬ ‫פרק ‪ :8‬נושאים מתקדמים ‪219 CSS3‬‬ ‫הגדרת תמונת רקע עבור מעברי צבע‬ ‫מה פירוש הדבר תמונת רקע לכל רוחב הדף? ראה את תרשים ‪ ,8.1‬שבה ניתן להבחין במעברי‬ ‫צבע מראש התמונה ועד תחתיתה‪ ,‬מצבע כהה למעלה ועד בהיר למטה‪ ,‬לכל רוחב הדף‪:‬‬ ‫תרשים ‪8.1‬‬ ‫יש שתי אפשרויות להגדיר את מעברי הצבע‪.‬‬ ‫בגרסאות קודמות של ‪ ,CSS‬כאשר היה צורך ליצור גרדיאנט )‪ ,gradient‬שינוי צבע הדרגתי(‬ ‫אופקי‪ ,‬כמו בתרשים ‪ ,8.2‬היית צריך לחתוך תמונה ברוחב ‪ 1‬פיקסל ולכתוב את הגדרת‬ ‫העיצוב הבאה‪:‬‬ ‫;‪background: #999999 url(some_pattern.jpg) repeat-x‬‬ ‫שורה זו הינה למעשה קיצור של אוסף ההגדרות הבא‪:‬‬ ‫;‪background-color: #999999‬‬ ‫;)‪background-image: url(some_pattern.jpg‬‬ ‫;‪background-repeat: repeat-x‬‬ ‫‪220‬‬ ‫‪HTML5‬‬ ‫‪9‬‬ ‫‪ JQuery‬ו‪Javascript-‬‬ ‫מקובל לומר שמעצב אתרים מקצועי צריך להכיר טכנולוגיות‪ ,‬ושבונה אתרים מקצועי צריך‬ ‫להבין עיצוב‪ .‬בימינו‪ ,‬כדי להצליח לאפיין‪ ,‬לעצב ולבנות אתר אינטרנט מוצלח‪ ,‬צריך להכיר‬ ‫הן את היכולות שמאפשרת לך הטכנולוגיה והן את המגמות‪ ,‬הכיוונים או הטרנדים‪ ,‬ואת‬ ‫האינטראקטיביות שהמעצב חולם עליהן‪ .‬שפת ‪ HTML5‬מצפה ממך להיעזר בכתיבת קוד‬ ‫‪ Javascript‬כדי לשלוט על סרטונים‪ ,‬צלילים‪ ,‬ציורים על הקנבס )‪ ,(Canvas‬גרירת קבצים‬ ‫לתוך חלון הדפדפן ועוד‪ .‬את כל אלה תכיר בפרקים הבאים‪ ,‬אולם כדי שתוכל להבין‬ ‫ולבצע‪ ,‬עליך להכיר תחילה את השפה ‪.Javascript‬‬ ‫בפרק זה תלמד היכן לשלב קוד ‪ Javascript‬במסמכי ‪ HTML5‬שלך‪ ,‬כיצד קוד ‪Javascript‬‬ ‫נראה ומתי משתמשים ב‪ .Javascript-‬תראה דוגמאות ותכיר את הספריה ‪JQuery‬‬ ‫העוצמתית‪ .‬בפרק זה תלמד את הבסיס של השפה ומראה כמה מההיבטים החשובים שלה‪.‬‬ ‫בפרק זה נבחן את הנושאים הבאים‪:‬‬ ‫‪‬‬ ‫מהי ‪?Javascript‬‬ ‫‪‬‬ ‫סדר קריאת קוד ‪ Javascript‬ע"י הדפדפן‬ ‫‪‬‬ ‫דף ‪ Javascript‬הראשון שלך‬ ‫‪‬‬ ‫דוגמאות‬ ‫‪‬‬ ‫תחביר השפה‬ ‫‪‬‬ ‫‪Jquery‬‬ ‫‪‬‬ ‫על משתנים‪ ,‬פונקציות‪ ,‬אובייקטים‬ ‫ואירועים‬ ‫‪‬‬ ‫‪Mobile jquery‬‬ ‫מהי ‪?Javascript‬‬ ‫‪ Javascript‬הינה שפת תכנות לכל דבר‪ ,‬ומשמשת כשפה העיקרית לכתיבת קוד באתרי‬ ‫אינטרנט‪ .‬היא נוחה‪ ,‬קלה ללימוד וליישום‪ ,‬כפי שמייד תראה‪ ,‬היא גם משתלבת כראוי בקוד‬ ‫‪ HTML5‬ובהוראות ‪ .CSS‬שפת תכנות זו מבוססת עצמים )‪ ,Object Oriented‬כפי שתלמד‬ ‫בהמשך(‪ ,‬ומספקת יכולות של פעולה הידודית )אינטראקטיבית( בין הגולש לבין האתר‪.‬‬ ‫פרק ‪ JQuery :9‬ו‪255 Javascript-‬‬ ‫השפה משתלבת באופן נוח עם רכיבי תכנות ומידע מורכבים‪ .‬מכיוון שקוד ‪ Javascript‬נקרא‬ ‫ומבוצע על ידי הדפדפן‪ ,‬הוא נקרא שפת קוד לקוח ) ‪Client Side Programming‬‬ ‫‪ .(Language‬קוד ‪ Javascript‬פועל בתוך יישום אחר‪ ,‬בדפדפן‪ .‬בדפדפנים אינטרנט‬ ‫אקספלורר‪ ,‬כרום‪ ,‬פיירפוקס‪ ,‬ספארי ואופרה יש "מנוע" ‪ Javascript‬מובנה אשר מפענח את‬ ‫הקוד‪ .‬מערכת ההפעלה מריצה את תוכנת הדפדפן‪ ,‬שמציג את דף האינטרנט‪ ,‬שבתוכו כתוב‬ ‫קוד בשפת ‪.Javascript‬‬ ‫הדפדפן‪ ,‬כפי שלמדנו בפרק הראשון‪ ,‬מקבל מידע מהשרת ומציג אותו באמצעות תגיות‬ ‫‪ .HTML‬המידע כולל תמונות‪ ,‬תוכן מילולי )טקסט(‪ ,‬סרטונים‪ ,‬קישורים ועוד‪ .‬חלק מהמידע‬ ‫מחייב חישובים‪ ,‬הקצאת משאבים‪ ,‬טעינת נתונים מאתרים אחרים או מבסיסי נתונים למיניהם‪,‬‬ ‫פעולות אינטראקטיביות שונות‪ ,‬ועוד‪ .‬בכל הפעולות מסוג זה יכולה שפת ‪ Javascript‬לטפל‪.‬‬ ‫התפקיד של ‪ Javascript‬בדף אינטרנט‬ ‫בפרק ‪ 6‬למדת על ההפרדה בין תוכן לבין תצוגה‪.‬‬ ‫‪‬‬ ‫קוד ‪ HTML‬מגדיר את התוכן בתוך תגיות בעלות משמעות‪.‬‬ ‫‪‬‬ ‫קוד ‪ CSS‬מגדיר את התצוגה על ידי הגדרות העיצוב‪.‬‬ ‫‪‬‬ ‫קוד ‪ Javascript‬מאפשר את ההתנהגות ואת האינטראקטיביות‪.‬‬ ‫דף ‪ Javascript‬הראשון שלך‬ ‫הבה נתחיל עם קוד פשוט וקל‪ ,‬כדי "לחוש" את השפה‪.‬‬ ‫הדפדפן מצפה לקרוא תגיות במסמך ‪ HTML5‬שלך ולהציג לגולש את התוכן ש ָתחום‬ ‫בתגיות‪ .‬אולם‪ ,‬קוד ‪ Javascript‬אינו צריך להיות מוצג לגולש‪ ,‬אלא אמור להתבצע ברקע על‬ ‫ידי הדפדפן‪ .‬אם כן‪ ,‬הדפדפן צריך לזהות את קוד ‪ Javascript‬ולא להתבלבל בינו לבין תגיות‬ ‫‪ .HTML5‬הגדרת אזור ‪ Javascript‬בקוד ‪ HTML‬נעשית על ידי התגית >‪ <script‬בדרך זו‪:‬‬ ‫>‪<script type="text/Javascript"></script‬‬ ‫את פקודות ‪ Javascript‬ניתן לשלב במספר מקומות במסמך ‪ HTML5‬שלך‪ .‬בדרך כלל‪ ,‬נשלב‬ ‫בתגית >‪.<head‬‬ ‫הבה נתחיל‪ :‬צור דף ‪ HTML5‬כפי שאתה כבר יודע לעשות‪ ,‬והוסף לו את הקוד המוצג בקוד‬ ‫‪ ,exercise_9.1.html‬בתוך תגית >‪:<head‬‬ ‫>"‪<script type="text/Javascript‬‬ ‫;)"!‪alert("Hello World‬‬ ‫>‪</script‬‬ ‫‪HTML5 256‬‬ ‫‪10‬‬ ‫שילוב מדיה‬ ‫והאובייקט ‪Canvas‬‬ ‫האם אתה יכול לדמיין איך היו נראים אתרי אינטרנט או יישומים ללא שימוש בסרטונים?‬ ‫ללא שמע וצלילים? ללא משחקים‪ ,‬אינטראקציות ואנימציות? סביר להניח שלא‪ .‬שפת‬ ‫‪ HTML5‬לוקחת בחשבון את הטכנולוגיה העשירה ואת התפתחות עולם המדיה בעולם‬ ‫האינטרנט ומאפשרת ניצול ויישום של עולם המדיה ללא שימוש ברכיבים חיצוניים כפלאש‬ ‫)‪ ,(Flash‬וללא טריקים מוזרים כמו שילוב שמע ממקור פלאש ברקע של הצגת אתר ‪.HTML‬‬ ‫בפרק זה נבחן את הנושאים הבאים‪:‬‬ ‫‪‬‬ ‫שמע‬ ‫‪‬‬ ‫סרטונים‬ ‫‪‬‬ ‫‪) Canvas‬קנבס(‬ ‫שילוב סרטונים‬ ‫ב‪HTML5-‬‬ ‫עד לאחרונה הצגת סרטונים באתר אינטרנט הייתה נעשית בדרך כלל על ידי התוכנה ‪Flash‬‬ ‫)פלאש(‪ .‬זו תוכנה חיצונית‪ ,‬המחייבת את התקנת ‪ Flash player‬בדפדפן של הגולש כדי‬ ‫שיוכל לצפות בסרטון‪ .‬אחת השאיפות של ‪ HTML5‬הייתה להוריד את כמות התוספים‬ ‫)‪ ,(plugins‬רכיבי תוכנה שמתקינים בדפדפן‪ ,‬כדי להריץ את האתר‪.‬‬ ‫כדי למלא דרישה זו פוּתחה התגית >‪ <video‬להפעלת סרטונים‪ .‬התגית כוללת תגית פתיחה‬ ‫וסגירה ואת המאפיין המרכזי‪ ,scr :‬שמאפשר להגדיר את קובץ הסרטון שרוצים להפעיל‪,‬‬ ‫להריץ או לנגן‪.‬‬ ‫>‪<video autoplay controls src="videos/birthday.mp4"></video‬‬ ‫פרק ‪ :10‬שילוב מדיה והאובייקט ‪289 Canvas‬‬ ‫מומלץ לשים את קבצי הווידאו בתיקייה המיועדת לכך‪ .‬כפי ששמנו את קבצי התמונות‬ ‫בתיקייה ‪ images‬כך נשים את קבצי הווידאו בתיקייה ‪.videos‬‬ ‫המאפיין ‪ autoplay‬גורם לסרטון להתחיל אוטומטית‪ .‬המאפיין ‪ controls‬מציג את שורת‬ ‫הפקדים של הסרטון‪ ,‬הכוללים בין השאר את ‪ play ,stop‬ועוד‪ .‬אם לא תכתוב מאפיין זה‪ ,‬לא‬ ‫יהיה ניתן לעצור את הסרטון‪.‬‬ ‫תוכל להגדיר טקסט שיופיע במקום הסרטון‪ ,‬כאשר הגולש מפעיל דפדפן שאינו תומך‬ ‫בתגית זו‪ .‬טקסט זה נקרא ‪ fallback content‬ומוגדר בין תגית הפתיחה לבין תגית הסגירה‬ ‫של האובייקט‪:‬‬ ‫>‪<video autoplay controls src="videos/1.mp4">Not Supported</video‬‬ ‫בתרשים ‪ 10.1‬תוכל לראות את הסרטון מתנגן ואת הפקדים מוצגים למטה‪ .‬אלה פקדי‬ ‫ברירת המחדל של דפדפן כרום‪ .‬לכל דפדפן יש פקדי ברירת מחדל בתצוגה שונה‪.‬‬ ‫תרשים ‪10.1‬‬ ‫כרגע הגדרת דף אינטרנט שבו הוראת ‪ HTML‬שמציגה נגן‪ ,‬שניתן להפעיל בדפדפנים שונים‪,‬‬ ‫וביניהם כרום ואינטרנט אקספלורר‪ .‬אין אחידות בסוג קובץ הווידאו שניתן לצפייה‬ ‫בדפדפנים השונים‪ ,‬מכיוון שהדפדפנים תומכים בשיטות קידוד שונות עבור הסרטונים‪.‬‬ ‫בתרשים ‪ 10.2‬תוכל לראות את החלון של דפדפן פיירפוקס‪ ,‬שאינו תומך בסוג קובץ ‪.mp4‬‬ ‫‪HTML5 290‬‬ ‫‪11‬‬ ‫נושאים מתקדמים ‪API‬‬ ‫שפת ‪ HTML5‬הינה אחד השמות המדוברים בעולם האינטרנט‪ ,‬ולא לחינם‪ .‬אתרי אינטרנט‪,‬‬ ‫יישומים‪ ,‬ממשקי תוכנה ורכיבים אחרים שואפים לתמוך ביכולות של ‪ HTML5‬מתוך הכרה‬ ‫ביתרונות שהשפה מספקת‪ .‬המהפכה שמתרחשת בעולם מאז שנת ‪ 2010‬לערך מתחילה‬ ‫לתפוס תאוצה גם בישראל‪ .‬הקרב בין הדפדפנים להוכיח מי הדפדפן הכי טוב קיבל תפנית‪:‬‬ ‫אם בעבר ניסו הדפדפנים להמציא יכולות משל עצמם כדי להוכיח את בידולם‪ ,‬כעת הקרב‬ ‫מתמקד ביכולת תמיכה טובה יותר בתכונות של ‪.HTML5‬‬ ‫היכולת לזהות היכן נמצא הגולש בכל רגע נתון‪ ,‬שמירת נתונים מאתר או מיישום שפועל‬ ‫בדפדפן לשם שימוש עתידי ללא עזרה מרכיבים חיצוניים וגרירת קבצים מהמחשב האישי אל‬ ‫חלון הדפדפן ‪ -‬אלה הם רק חלק מהאפשרויות שמציעה לנו ‪ .HTML5‬נושאים אלה ואחרים‬ ‫נסקור בפרק זה‪.‬‬ ‫בפרק זה נבחן את הנושאים הבאים‪:‬‬ ‫‪‬‬ ‫‪) Geolocation‬מיקום גיאוגרפי(‬ ‫‪‬‬ ‫‪) Local storage‬זיכרון מקומי‪ ,‬פנימי(‬ ‫‪‬‬ ‫‪) File API‬גרירת קבצים מהמחשב האישי לחלון האתר(‬ ‫מה הקשר בין ‪ API‬לבין ‪?HTML5‬‬ ‫עד ליציאת ‪ HTML5‬לשוק היו מסמכי הגדרות נפרדים עבור ‪ HTML‬ועבור רכיבים חיצוניים‬ ‫או משלימים‪ ,‬כמו ‪ DOM‬למשל‪ ,‬שהזכרנו בפרקים קודמים‪ .‬אחד השינויים שכלולים בפיתוח‬ ‫של ‪ HTML5‬הוא בכך שכיום אין הפרדה בין אוסף ההגדרות והחוקים של ‪ HTML5‬לבין‬ ‫מודלים של התקשרות עם רכיבים וממשקים‪ ,‬או במילים אחרות‪ .API ,‬נוצרו מספר רכיבים‬ ‫מובנים בתוך ההגדרות ‪ ,HTML5‬כדי לייעל את הדפדפן ולמזער את השימוש ברכיבים‬ ‫חיצוניים‪ .‬במילים אחרות‪ ,‬כדי לייעל את הדפדפן וכדי ליצור אחידות בין המכשירים‬ ‫)ההתקנים( השונים שהוא משרת‪ ,‬כמו טלפונים סלולריים‪ ,‬ניידים )‪ ,(mobile‬מחשבי לוח‬ ‫פרק ‪ :11‬נושאים מתקדמים ‪325 API‬‬ ‫)‪ (tablets‬או מחשבים‪ .‬למעשה‪ ,‬נוצרה שפת התקשרות אחידה בקוד עם פונקציות פנימיות‬ ‫שאינן מחייבות התקנות של תוספים )‪ (plugins‬חיצוניים‪ ,‬כמו למשל התוכנה פלאש‪.‬‬ ‫מיקום גיאוגרפי‬ ‫‪Geolocation -‬‬ ‫בעבר‪ ,‬כאשר אתר האינטרנט היה צריך לדעת היכן הגולש נמצא‪ ,‬הגולש היה צריך להזין את‬ ‫המיקום שלו‪ .‬כלומר‪ ,‬להזין ידנית את שם המדינה והעיר‪ .‬כעת יש אפשרות ב‪HTML5-‬‬ ‫לזהות באופן אוטומטי את מיקום הגולש )לאחר אישורו המוקדם( באופן פשוט וקל‪ ,‬הן עבור‬ ‫הגולש והן עבור המפתח‪.‬‬ ‫הכלי הזה ידוע בשמו המקצועי ‪) Geoloation‬מיקום גיאוגרפי( והוא כיום חלק מהמפרט של‬ ‫‪ .HTML5‬לפני שנרחיב את הדיון במושגים הטכניים‪ ,‬ננסה להבין מדוע כדאי לשלב אפשרות‬ ‫של זיהוי מקום באתר או ביישום אינטרנט‪.‬‬ ‫כיצד יכול זיהוי מקום לתרום לאתר או ליישום ‪?HTML5‬‬ ‫‪‬‬ ‫גולשים יכולים לשתף במיקום שלהם את חבריהם ברשתות חברתיות‪.‬‬ ‫‪‬‬ ‫פרסומות שמופיעות באתר יכולות להיות מבוססות מקום ולהיות רלוונטיות עבור‬ ‫הגולש‪ ,‬כמו למשל פרסומות של בתי קולנוע בת"א כאשר הגולש נמצא בת"א ולא‬ ‫בחיפה‪.‬‬ ‫‪‬‬ ‫הצגה אוטומטית של מזג האוויר על כל הפרמטרים הכרוכים בו‪ ,‬בהתאמה למקום‬ ‫שהגולש נמצא בו‪.‬‬ ‫‪‬‬ ‫אתרי קטלוגים של חנויות פיזיות אשר מוצעים לגולש על פי המקום שהוא נמצא בו‪.‬‬ ‫‪‬‬ ‫אתרי אינטרנט או יישומי רשת של חברות תחבורה‪ ,‬כמו אוטובוסים‪ ,‬רכבות או‬ ‫מוניות‪ .‬יש גם יכולת להציע תחנות קרובות או למשל‪ ,‬מוניות פנויות‪.‬‬ ‫‪‬‬ ‫אתרי "דרושים" יכולים להציג אוטומטית מודעות דרושים על פי מיקום‪.‬‬ ‫אלו הן רק חלק מהאפשרויות כשהאתר או היישום תומכים בזיהוי מיקום של הגולש‪.‬‬ ‫למעשה‪ ,‬לכל פרסום או מידע תלוי‪-‬מקום פיזי יש משמעות וצורך לדעת את המיקום של‬ ‫הגולש‪ .‬ללא ספק‪ ,‬אפשר להעלות רעיונות נוספים או לשלב דוגמאות שנובעות מגלישה‬ ‫באתרי האינטרנט הרבים שבהם יש שימוש הולך וגובר בכלי זה‪.‬‬ ‫כיצד פועלת התכונה ‪?Geolocation‬‬ ‫הבה נבחן מהי התכונה ‪ Geolocation‬וכיצד היא פועלת‪ .‬אחד הרכיבים החשובים‬ ‫והמשמעותיים ביותר הוא ‪ ,Geolocation API‬שאינו רכיב מובנה‪ ,‬אלא רכיב מקושר‪ .‬כיצד‬ ‫הוא פועל? הרכיב ‪ Geolocation‬הוא אוסף של חוקים והגדרות שמאפשרים לדפדפן לדעת‬ ‫‪HTML5 326‬‬ ‫היכן נמצא הגולש מבחינת קווי רוחב ואורך גיאוגרפיים‪ ,‬בהתאם ליכולות של הדפדפן לספק‬ ‫מידע זה ובהתאם להסכמת הגולש לחשוף נתונים אלה‪.‬‬ ‫חלק מהמידע מבוסס על רכיב ‪ GPS‬מובנה‪ ,‬בעיקר בטלפון הנייד‪ ,‬חלק מהמידע מבוסס על‬ ‫כתובת ‪ IP‬של המחשב‪ ,‬על נתונים שנשלחו מהגולש‪ ,‬נתונים שמוגדרים לרשת שבה נעשית‬ ‫הגלישה )‪ ,(SSID‬ועוד‪.‬‬ ‫השימוש ב‪ Geolocation-‬מיועד בעיקר למכשירים הניידים‪ ,‬והדבר מאוד הגיוני‪ .‬יש לקחת‬ ‫בחשבון שבנייד השימוש ב‪ GPS-‬יכול לצרוך באופן מוגבר את הסוללה‪ .‬בנוסף‪ ,‬אסור לפגוע‬ ‫בפרטיות הגולש‪ ,‬ולכן יש לקחת נתונים אלה בחשבון וצריך לקבל את אישורו לביצוע מעקב‬ ‫המיקום )‪ (GPS‬ולספק לו מידע מתאים‪.‬‬ ‫בתרשים ‪ 11.1‬תוכל לראות את נוהל בקשת הרשות על דפדפנים פיירפוקס וכרום‪:‬‬ ‫תרשים ‪11.1‬‬ ‫האתר שמוצג כדוגמה בתרשים ‪ 11.1‬מאפשר לחפש אופניים ציבוריים להשכרה‪ .‬כדי למצוא‬ ‫אופניים‪ ,‬היישום צריך לדעת תחילה היכן הגולש נמצא ולכוון אותו למקום הקרוב ביותר‪.‬‬ ‫פרק ‪ :11‬נושאים מתקדמים ‪327 API‬‬