תוכן עניינים ועמודים לדוגמה מהספר

‫‪HTML5‬‬
‫המדריך לבניית אתרים‬
‫הדור הבא‬
‫יונית רושו‬
‫יועץ מקצועי‪ :‬זהר עמיהוד‬
‫עריכה ועיצוב‪ :‬שרה עמיהוד‪ ,‬יצחק עמיהוד‬
‫עיצוב עטיפה‪ :‬אופיר ליברמן‬
‫שמות מסחריים‬
‫שמות המוצרים והשירותים המוזכרים בספר הינם שמות מסחריים רשומים של החברות שלהם‪.‬‬
‫הוצאת הוד‪-‬עמי והמחברת עשו כמיטב יכולתם למסור מידע אודות השמות המסחריים המוזכרים‬
‫בספר זה ולציין את שמות החברות‪ ,‬המוצרים והשירותים‪ .‬שמות מסחריים רשומים ) ‪registered‬‬
‫‪ (trademarks‬המוזכרים בספר צוינו בהתאמה‪.‬‬
‫הודעה‬
‫ספר זה מיועד לתת מידע אודות מוצרים שונים‪ .‬נעשו מאמצים רבים לגרום לכך שהספר יהיה שלם‬
‫ואמין ככל שניתן‪ ,‬אך אין משתמעת מכך כל אחריות שהיא‪.‬‬
‫המידע ניתן "כמות שהוא" )"‪ .("as is‬הוצאת הוד‪-‬עמי והמחברת אינם אחראים כלפי יחיד או ארגון‬
‫עבור כל אובדן או נזק אשר ייגרם‪ ,‬אם ייגרם‪ ,‬מהמידע שבספר זה‪ ,‬או מהתקליטור‪/‬הדיסקט )אם‬
‫יצורף(‪ ,‬או מאתר האינטרנט המלווה את הספר‪.‬‬
‫אין לעשות שימוש מסחרי ו‪/‬או להעתיק‪ ,‬לשכפל‪ ,‬לצלם‪ ,‬לתרגם‪ ,‬להקליט‪ ,‬לשדר‪ ,‬לקלוט ו‪/‬או לאחסן‬
‫במאגר מידע בכל דרך ו‪/‬או אמצעי מכני‪ ,‬דיגיטלי‪ ,‬אופטי‪ ,‬מגנטי ו‪/‬או אחר ‪ -‬בחלק כלשהו מן המידע‬
‫ו‪/‬או התמונות ו‪/‬או האיורים ו‪/‬או כל תוכן אחר הכלולים ו‪/‬או שצורפו לספר זה‪ ,‬בין אם לשימוש פנימי‬
‫או לשימוש מסחרי‪ .‬כל שימוש החורג מציטוט קטעים קצרים במסגרת של ביקורת ספרותית אסור‬
‫בהחלט‪ ,‬אלא ברשות מפורשת בכתב מהמוציא לאור‪.‬‬
‫לשם שטף הקריאה כתוב ספר זה בלשון זכר בלבד‪ .‬ספר זה מיועד לגברים‬
‫ונשים כאחד ואין בכוונתנו להפלות או לפגוע בציבור המשתמשים‪/‬ות‪.‬‬
‫)‪(C‬‬
‫כל הזכויות שמורות‬
‫הוצאת הוד‪-‬עמי בע"מ‬
‫טלפון‪09-9564716 :‬‬
‫‪[email protected]‬‬
‫‪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‬‬