HTML5 םירתא תיינבל ךירדמה אבה רודה ושור תינוי

Size: px

Start display at page:

Download "HTML5 םירתא תיינבל ךירדמה אבה רודה ושור תינוי"

Erick Brooks
6 years ago
Views:

1 HTML5 המדריך לבניית אתרים הדור הבא יונית רושו

2 יועץ מקצועי: זהר עמיהוד עריכה ועיצוב: שרה עמיהוד, יצחק עמיהוד עיצוב עטיפה: אופיר ליברמן שמות מסחריים שמות המוצרים והשירותים המוזכרים בספר הינם שמות מסחריים רשומים של החברות שלהם. הוצאת הוד-עמי והמחברת עשו כמיטב יכולתם למסור מידע אודות השמות המסחריים המוזכרים בספר זה ולציין את שמות החברות, המוצרים והשירותים. שמות מסחריים רשומים ) registered (trademarks המוזכרים בספר צוינו בהתאמה. הודעה ספר זה מיועד לתת מידע אודות מוצרים שונים. נעשו מאמצים רבים לגרום לכך שהספר יהיה שלם ואמין ככל שניתן, אך אין משתמעת מכך כל אחריות שהיא. המידע ניתן "כמות שהוא" is").("as הוצאת הוד-עמי והמחברת אינם אחראים כלפי יחיד או ארגון עבור כל אובדן או נזק אשר ייגרם, אם ייגרם, מהמידע שבספר זה, או מהתקליטור/הדיסקט (אם יצורף), או מאתר האינטרנט המלווה את הספר. אין לעשות שימוש מסחרי ו/או להעתיק, לשכפל, לצלם, לתרגם, להקליט, לשדר, לקלוט ו/או לאחסן במאגר מידע בכל דרך ו/או אמצעי מכני, דיגיטלי, אופטי, מגנטי ו/או אחר - בחלק כלשהו מן המידע ו/או התמונות ו/או האיורים ו/או כל תוכן אחר הכלולים ו/או שצורפו לספר זה, בין אם לשימוש פנימי או לשימוש מסחרי. כל שימוש החורג מציטוט קטעים קצרים במסגרת של ביקורת ספרותית אסור בהחלט, אלא ברשות מפורשת בכתב מהמוציא לאור. לשם שטף הקריאה כתוב ספר זה בלשון זכר בלבד. ספר זה מיועד לגברים ונשים כאחד ואין בכוונתנו להפלות או לפגוע בציבור המשתמשים/ תו. (C) כל הזכויות שמורות הוצאת הוד-עמי בע"מ טלפון: info@hod-ami.co.il הודפס בישראל אוקטובר 2012 מסת"ב ISBN

3 הספר מוקדש באהבה לבעלי היקר אורן ולילדים שלי - שקד, דניאל וירין רושו, על כך שנתתם לי את הכוח ותמכתם לכל אורך הדרך

5 תוכן עניינים מקוצר הקדמה פרק 1: מבוא ומושגים באינטרנט פרק 2: יסודות ועקרונות שפת HTML(5) פרק 3: תגיות המבנה החדשות פרק 4: הגדרות עיצוב על ידי CSS פרק 5: מודל הקופסה ופריסות פרק 6: קוד מינימליסטי ובעל משמעות פרק פרק 8: פרק 9: 7: טפסים ב- HTML נושאים מתקדמים CSS ו- Javascript Jquery פרק 10: שילוב מדיה והאובייקט Canvas פרק 11: נושאים מתקדמים API אינדקס אינדקס תגיות למילוי עצמי תוכן עניינים 5

6 HTML5 6

7 תוכן עניינים הקדמה מבנה הספר קהל היעד קטעי הקוד על יונית רושו...20 פרק 1: מבוא ומושגים באינטרנט כתובות של מחשבים ברשת האינטרנט...22 טכנולוגיית שרת לקוח...22 הדפדפן פרוטוקול 23...HTTP פרוטוקול FTP אחסון האתר...23 דומיין תת-דומיין (HyperText Markup Language) HTML סיכום...24 פרק 2: יסודות ועקרונות שפת HTML(5) מה זה?HTML במה שונה HTML5 מהגרסאות הקודמות? תמיכת דפדפנים...27 דף HTML5 הראשון שלך...27 תגיות, מאפיינים ואלמנטים בסיסיים של השפה התגית: אבן היסוד של כל דף...31 HTML מבנה סטנדרטי של מסמך :HTML5 תגיות היסוד הצהרה על HTML5 :DOCTYPE התגית <html> התגית 33...<head> התגית <title> התגית 33...<body> תוכן עניינים 7

8 התגית 34...<section> תגיות נפוצות נוספות להגדרת אזורים בדף...35 עברית בדפי אינטרנט...35 תוכן טקסטואלי...36 הכרת המושג כותרות...36 תגיות הכותרת התגית 39...<hgroup> תגית הפ ס קה <p>...39 תגיות בסיסיות לעיצוב הטקסט חוקיות הפתיחה והסגירה של תגית בתוך תגית...40 התוכן שבין התגיות להיכן נעלמו הרווחים בין המילים ובין השורות?...41 רווח בין תווים רווח בין שורות <br>...42 שילוב תווים מיוחדים בתוכן שבין התגיות - Characters...43 ASCII מאפיינים לתגיות - Attributes סיכום: התקניות הנדרשת במסמכי 45...HTML5 תרגיל קישורים תגית הקישור a...51 המאפיין href המאפיין 52...target המאפיין 52...rel המאפיין media קישור לדואר אלקטרוני...53 mailto קישור למסמך Word שנמצא באותה תיקייה...54 קישור לדף אחר באתר שלי שנמצא באותה התיקייה קישור פנימי בתוך דף 54...Anchors- התגית base תרגיל צבעים ורקע רשימות ותבליטים רשימות תבליטים לא ממוספרות...61 רשימות תבליטים ממוספרות רשימת הגדרות - list Definition HTML5 8

9 מאפיינים (attributes) של רשימות...63 המאפיין reversed המאפיין 63...start שינוי מראה הרשימה שילוב תמונות בדף מידע כללי JPG GIF קבצי GIF ANIMATION PNG התגית img סידור סביבת העבודה - התיקייה...74 images נתיבי קבצי תמונות נתיב יחסי path) (Relative נתיב מוחלט path) (Absolute שילוב תמונה מתיקיית התמונות באתר...75 תמונה כקישור...75 הוספת תמונת רקע תרגיל טבלאות...81 תאים ריקים בטבלה...82 מרווחים בין תאים ובתוך התאים...83 סיכום...85 פרק 3: תגיות המבנה החדשות תגיות חדשות ב- HTML5 ליצירת מבניות בעלת משמעות...88 התגית <header> התגית <footer> התגית 89...<section> התגית <article> התגית 90...<nav> התגית <aside> אזורים יעודיים...91 תגיות חדשות נוספות...93 התגית <figure> תוכן עניינים 9

10 התגית 93...<figcaption> התגית 94...<mark> מודל התוכן של 95...HTML5 אלמנטים מסוג Block-level ומסוג...95 Inline ה- DOM ומודל התוכן החדש: 7 הקטגוריות Metadata Flow 98...Heading Phrasing Embedded Interactive 99...Sectioning אלגוריתם קווי המתאר של התוכן algorithm) (Outline...99 תמיכה בדפדפנים שאינם תומכים ב- HTML תרגיל סיכום פרק 4: הגדרות עיצוב על ידי CSS מה זה...?CSS 103 גרסאות של... CSS 107 היכן כותבים את הגדרות...?CSS 107 הגדרת העיצוב ישירות בתגית :HTML שיטת... Inline 108 הגדרות צבע בשיטת Inline ובאופן כללי הבעיה בשיטת... Inline 111 הפתרון: שיטת...Internal 111 הגדרת העיצוב בראש המסמך באופן גורף: התגית...<style> 112 הבעיה בשיטת תגית <style> הפתרון השיטה השלישית והנבחרת: קובץ CSS חיצוני מה עושה הדפדפן? דוגמאות... CSS 115 הגדרות CSS שימושיות לפי נושאים רקעים background-color צבע רקע background-image תמונת רקע HTML5 10

11 - background-position מיקום תמונת רקע background-repeat שכפול תמונת רקע מסגרות border-width עובי מסגרת border-style סגנון מסגרת border-color צבע מסגרת טיפוגרפיה: הגדרות עיצוב עבור טקסטים וגופנים שימוש בטקסט 'חי' Web-safe fonts גופן מערכת font-size,font-family,color צבע הגופן, משפחה וגודל font-style סגנון הגופן font-weight עובי הגופן direction כיוון הטקסט letter-spacing רווח בין אותיות line-height גובה שורה text-align יישור טקסט vertical-align יישור אנכי word-spacing רווח בין מילים... - צורת הגופן עיצוב קישורים text-decoration קישוט הטקסט lists עיצוב רשימות שוליים margin שוליים חיצוניים padding שוליים פנימיים גדלים: רוחב וגובה איחוד הגדרות למספר תגיות תרגיל 5 שלב הגדרות עיצוב שאינו גורף:...Class 129 המשך תרגיל - 5 שלב סדרי עדיפויות של הגדרות עיצוב כוכבית שימוש בשם, המאפיין... id 134 אזורים יעודיים בדף אינטרנט או ביישום שימוש בשתי מחלקות (classes) לאותו אלמנט תוכן עניינים 11

12 קישורים אינטראקטיביים Hover שינוי עיצוב במעבר עכבר מעל קישור Visited שינוי עיצוב של קישור לאחר ביקור בו יעילות הכתיבה של מסמכי...CSS 136 שימוש ב- CLASS במידה עמידה בשני תנאים: הגדרת סוג תגית וגם שימוש ב- class היררכיה ב- CSS, או קינון תגיות ההבדל בין 'צאצאים' לבין 'ילדים' מדור ראשון תגית שעוקבת אחרי תגית אחרת תגיות שנמצאות לאחר תגית מסוימת תגיות בעלות מאפיין מסוים תגיות עם מאפיין בעל ערך מסוים שימוש בהערות סיכום פרק 5: מודל הקופסה ופריסות מבנה ופריסת הדף מודל הקופסה - model... Box 147 איחוד שוליים אנכיים - collapse...margin 150 תגית מתחת לתגית הכלת תגית בתוך תגית אחרת איחוד שוליים בתוך אותו האלמנט הגדרות תצוגת Inline ותצוגת... Block 154 אלמנטים עם תצוגת... Block 154 אלמנטים עם תצוגת...Inline 155 מיקום אלמנטים זרימה רגילה של הדף - flow...normal 156 מיקום יחסי - positioning...relative 156 מיקום מוחלט - positioning...absolute 158 דוגמה שימושית מיקום מקובע - positioning... Fixed 163 אלמנטים "צפים" -...Floating 163 מסך צר של מכשיר נייד תג הפסקת ציפה - Clear יישור אופקי HTML5 12

13 יישור באמצעות שוליים אוטומטיים יישור של טקסט בתוך אלמנטים לעומת יישור של אלמנטים דפדפנים ישנים למישהו? תרגיל סיכום פרק 6: קוד מינימליסטי ובעל משמעות למה הכוונה קוד בעל משמעות? הפרדת התוכן והמשמעות מהתצוגה מינימליזם בקוד סיכום פרק 7: טפסים ב- HTML מהו הטופס ומהי מטרתו? טכנולוגיה ועיצוב יד ביד החשיבות של תכנון ועיצוב הטפסים השפעת התפתחות העיצוב והטכנולוגיה על טפסים ב- HTML לאן נשלחים הנתונים מהטופס, וכיצד סדנת עבודה התגית <form> ומבנה טופס מבנה הטופס התגית <label> הפקדים הפקדים הבסיסיים: פקדי תיבת טקסט ושליחת הנתונים...input 198 פקדי קלט נוספים עבור טקסטים ומספרים פקד אזור טקסט,... Textarea 205 פקד הלחצן -...button 206 פקדי בחירה תיבת סימון - box... check 207 פקדי רדיו - buttons... radio 208 רשימה נגללת -...select 210 פקד להעלאת קובץ - upload...file 211 עיצוב הפקדים והטופס בכללותו פקד "שלח" (submit) מעוצב עם תמונה התגיות <fieldset> ו-...<legend> 212 תוכן עניינים 13

14 התגית <details> ניהול המידע התגית <datalist> התגית...<datagrid> 214 הקוד לבניית הטופס סיכום פרק 8: נושאים מתקדמים CSS3 תמונות רקע, חזרה ודגשים הגדרת תמונת רקע עבור מעברי צבע מיקום תמונת רקע מיקום על פי פיקסלים מיקום באחוזים עיצוב קישורים מתקדם קו תחתון בעיצוב אישי טכניקות להקטנת מספר המחלקות (classes) הדגשת קישורים מסוגים שונים תפיסת התחלת מחרוזת הערך תפיסת סוף מחרוזת הערך מעברי עכבר יעילים מעל קישורים מעברי עכבר פשוטים מעברי עכבר בשימוש תמונה אחת - rollovers...pixy-style 230 תפריט אופקי טכניקות חדשות ב- CSS הוספת צללית לטקסט חי עיצוב עמודות מעברי צבע -...gradients 237 ריבוי תמונות רקע פינות מעוגלות יצירת לשוניות (tabs) עם פינות מעוגלות CSS transform אנימציות ב- CSS שינוי מצב שינוי מיקום טיפוגרפיה: עיצוב גופנים HTML5 14

15 הטמעת גופנים זכויות יוצרים אופן ההטמעה תמיכה בדפדפן... Internet Explorer 253 דוגמה שלמה Media Queries סיכום פרק :9 Jquery ו- Javascript מהי?Javascript התפקיד של Javascript בדף אינטרנט דף Javascript הראשון שלך כיצד פועלת השפה...?Javascript 257 תחביר השפה... Syntax 257 אירועים, פונקציות, אובייקטים ומשתנים מודול אובייקט המסמך - DOM האובייקט החשוב - Document תחביר הנקודה קריאת נתונים והשמת נתונים סדר קריאת הקוד על ידי הדפדפן משתנים -...variables 263 הגדרת והצהרת משתנים ערכי משתנים שרשור מספרים למחרוזות התניות וה ש מוֹת ריבוי התניות שיטות בדיקה הוראת התנאי... if 266 ההוראה - this מי אני? פונקציות מובנות שימושיות הפונקציה המובנית getelementbyid(""); הפונקציה המובנית...substring 267 הפונקציה המובנית... indexof 267 פונקציות ואירועים תוכן עניינים 15

16 החלפת קובץ התמונה במעבר העכבר שלב ראשון שלב שני שלב שלישי שינוי טקסט בדף האובייקט... Style 273 הצגה והסתרה של שכבה בלחיצה על אובייקט בדף הספריה... Jquery 275 התקנת הרכיב המרכזי להרצת...JQuery 275 כתיבת הקוד הראשון שלך ב- JQuery האירוע... document.ready 276 סימן הדולר מציאת אובייקטים על המסך שרשרת הוראות... Chaining 278 שינוי אובייקטים שינוי ערכים של מאפיינים מניפולציות על...CSS 279 אירועים הופעה איטית והיעלמות איטית של אובייקטים - Fade Jquery mobile להפעלה בנייד Jquery mobile סיכום פרק 10: שילוב מדיה והאובייקט Canvas שילוב סרטונים ב- HTML שליטה על אובייקט video באמצעות...Javascript 292 שילוב שמע ב- HTML אפשרות ראשונה: התגית... embed 293 אפשרות שנייה: תגית קישור אפשרות שלישית: קובץ פלאש אפשרות רביעית: תגית audio ב- HTML התגית... Canvas 295 הכרת התגית, דפדפנים תומכים, מטרה מערכת הקואורדינטות הוספת התגית למסמך HTML5 16

17 שינוי גודל הקנבס כתיבת הקוד הראשון בקנבס:...hello world 298 תכנות בסיסי של התגית <canvas> המאפיינים של...canvas 299 הפונקציות של...canvas 299 הכרת API לציור 2D של הקנבס - Context...HTML Canvas 2D 300 זיהוי תמיכה בקנבס תכנות בתוך הקוד שתומך בקנבס מהו הציור על הקנבס? אפשרויות הצביעה ב- API ציור מלבנים ציור קווים ציור משולשים על הקנבס הכרת המצב (state) של משטח העבודה צורות מורכבות: קשתות ונתיבים ציור עיגולים על משטח העבודה... canvas 313 עקומות ציור טקסטים יצירת צל הצגת תמונות בקנבס מסכות - paths... clipping 315 טרנספורמציות -...transformations 317 שינוי גודל הצורה -...scale 317 סיבוב הצורה -...rotate 318 שקיפויות ושכבות אנימציות אנימציות יעילות עם...double buffering 322 סיכום פרק 11: נושאים מתקדמים API מה הקשר בין API לבין...?HTML5 325 מיקום גיאוגרפי - Geolocation כיצד פועלת התכונה?Geolocation קוד בסיסי ליצירת תוכנית משולבת...Geolocation 328 תוכן עניינים 17

18 אחסון מקומי - storage...local 331 לשם מה לשמור את הנתונים בדפדפן? דוגמאות למשתמשים בשמירה מקומית דוגמה הלוגיקה לשמירת מצב החלק המרכזי של הקוד סיכום File API drag and drop גרירת קבצים מהמחשב האישי אל חלון הדפדפן תמיכת דפדפנים ההסבר הטכני:... File API 337 דוגמה לקוד שעושה שימוש ב-...File API 338 סיכום אינדקס אינדקס תגיות למילוי עצמי HTML5 18

19 הקדמה ספר זה נכתב על ידי רושו יונית, בעלת ניסיון של מספר שנות הוראה בנושא XHTML ו- HTML5 במסלול לעיצוב אינטראקטיבי בשנקר. הצלחת הסטודנטים על פי שיטת לימוד מוגדרת היטב ועקבית, תרמה ליוזמה לריכוז החומר וכתיבת הספר הזה. במהלך הלימוד בספר מנסה יונית להקפיד, עד כמה שניתן, על תהליכים מוגדרים וברורים, עבודה יעילה וקוד איכותי, ולהדגיש גם את החשיבות של יעילות הקוד. הרי לא די בכך שהאתר פועל או "עובד" - הוא צריך לשרת באופן מקצועי, יעיל ולהיות בעל משמעות. הספר מצייד אותך בכלים תיאורטיים ומעשיים להבנת רשת האינטרנט, לתכנון ולבנייה של אתרי אינטרנט בשפה,HTML5 ולעבודה עצמאית, החל בשלב הגדרת הצרכים ועד להגשת המוצר הסופי. אתה תכיר וגם תבין את הטכנולוגיה במהלך הלימוד של הטקסט והדוגמאות, ולא פחות חשוב - תוך כדי התנסות בפתרון תרגילים. עם סיום הלימוד בספר תוכל לבנות אתרי אינטרנט ויישומים למכשירים ניידים (מובייל) בשפת,HTML5 תוך שימוש בטכנולוגיות מתקדמות, לצורך בנייה מקצועית ונקייה, משולבת מדיה, אינטראקטיב וקוד. הספר מתייחס הן למסך הרחב והן למסך הצר של מובייל. מבנה הספר לאורך הספר תמצא תרגילים ברמות שונות. לכל התרגילים יש פתרונות. שים לב, לכל תרגיל יש דרכי פתרון שונות. בפתרונות יש גיוון בבחירות הדרכים ואופני הפתרון, כדי לספק לך דוגמאות מגוונות, אולם זכור שיש פתרונות נוספים שיכולים להיות טובים גם הם. בפתרונות יש הקפדה על מינימליזם בקוד, ועל קוד יעיל ואפקטיבי. הפרק העוסק בטפסים משמש כסדנת עבודה, בה בכל שלב של הלמידה מרחיבים את הטופס שבונים ביחד. הספר מחולק לשני חלקים עיקריים: פרקים 1 עד 7 מכסים את כל הנושאים הרלוונטיים להעלאת אתר מקצועי לאוויר. פרקים 8 ואילך עוסקים בנושאים מורכבים שיאפשרו לך לשדרג את הידע שלך ולהפוך את האתר לאינטראקטיבי בעזרת מדיה, קוד, איתור מיקום הגולש, מתן אפשרות לגרירת קבצים לחלון הדפדפן ועוד. הקדמה 19

20 קהל היעד בין אם אתה שואף לדעת לבנות אתר והנך ללא ניסיון או ידע בתחום, ובין אם אתה מנוסה ובקיא בגרסאות קודמות של שפת בניית האתרים,HTML תוכל למצוא בספר זה את התשובות שחיפשת. הספר כולל פרק מבוא המתאר מושגים בסיסיים הכרחיים להבנה, ובמהלך הספר טיפים למי שעבד בגרסאות קודמות. הספר מסיים ברמה מאוד גבוהה של התממשקות ל- API מורכבים, מדיה ותגית הקנבס המפורסמת. קטעי הקוד ניתן להוריד את כל קבצי הקוד ב- html ו- css והפתרונות הקיימים מאתר האינטרנט של הוצאת הוד עמי: בנוסף לקטעי הקוד תמצא בקובץ שייפתח גם קבצי תמונות של מסכים שנמצאים בספר. מכיוון שהספר מודפס ללא צבעים תוכל להיעזר במסך המקורי כדי לראות כיצד הוא נראה עם צבע. מצא את הספר באתר ואת הלינק "קוד מקור" להורדת הקבצים. לחץ עליו ועקוב אחר ההוראות. אם לא תגדיר אחרת, יועתקו הקבצים אוטומטית לדיסק שלך, לתיקייה זו: C:\HodAmiBooks\59458\ תוכל לבחור בעת ההתקנה בכל תיקייה אחרת. לאחר שתוריד את הקבצים מאתר הוד-עמי הם יימצאו (אם לא שינית) בתיקיה שנמצאת תחת HodAmiBooks שנמצאת בכונן C. בספר נתייחס לתיקיית ברירת המחדל הזו. בדרך כלל הפעולות שיש לבצע לאחר הלחיצה על הלינק: לחיצה על הפעל, לחיצה על ו- Close. OK לחיצה על,UnZip על יונית רושו מהנדסת תוכנה בעלת ניסיון מעשי רב שנים בבניית אתרים לחברות הייטק בארץ. מרצה ל- HTML5 במחלקות לתקשורת חזותית ולהנדסת תוכנה ב'שנקר' ובמכון הטכנולוגי חולון. כתבה את מדור ידיעות באתר 'נענע 10 ' וכותבת את מדור 'ניצוצות' ברשת בעיתון 'הארץ', על מגמות בעיצוב ובטכנולוגיה ברשת. מנהלת את 'דיינמיק-ווב' מקבוצת 'אולביז', אפיון, עיצוב ובניית אתרי פרימיום ואפליקציות ווב. אני מעודדת אותך לקרוא, להתנסות ולחקור מתוך מטרה להגיע לרמה בינלאומית מקצועית. יונית. HTML5 20

21 מאפיינים לתגיות 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

22 <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 מאפשרת להשאיר חלק מהתגיות פתוחות ולא לסגור אותן, כמו למשל תגית הפ סקה. גם אין חובה להשתמש בתגיות,<html>.<body>,<head> מנוסה בגרסאות קודמות של?HTML מי שרגיל לשמור על התקניות של XHTML יתקשה מאוד לקבל את השינויים בתקניות הנדרשת במסמכי.HTML5 קח נשימה, תתרגל. כדי לבדוק אם הקוד שאתה כותב חוקי ותקני, אתה מוזמן להעלות את הקובץ שכתבת ושמרת אל אתר בכתובת:. פרק 2: יסודות ועקרונות שפת HTML(5) 45

התבונן בקוד.exercise_2.9.html שים לב לתגיות החסרות בו, לערבוב בין האותיות רגילות ורישיות, לכך שאין גרשיים סביב הערך של המאפיין, ועוד. קוד exercise_2.9.html נמצא תקני בבדיקת התקינות של :HTML5 <!

23 התבונן בקוד.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) ולגוף,</html> לבין תגית הסגירה <html> ולהכיל את שניהם בין תגית הפתיחה,(body) שנכתבות לאחר שורת ההצהרה.doctype.2 עריכה נכונה - :Well-formed תגיות שבאופן אינטואיטיבי אמורות להיסגר, רצוי לסגור, ולא להשאיר פתוחות. כגון: p,body,head ואחרות. קינון נכון - nested.properly יש להקפיד על כך שתגיות הסגירה תיסגרנה כמו בחוקיות הסוגריים במשוואה מתמטית, בהתאמה לפי סדר פתיחתן. 3. סוגי אותיות - sensitive.case מומלץ להקפיד על שימוש באותיות רגילות ("קטנות") בלבד, ולא לערבב אותיות רגילות ואותיות רישיות ("גדולות"). HTML5 46

.4 רצוי לתחום כל תכונה של מאפיין בגרשיים ולהקפיד שכל התכונות תיכתבנה באותיות רגילות. אם יש ערך זהה לשם המאפיין, כדוגמת המאפיין החדש hidden="hidden" אפשר לכתוב hidden> <section בלבד.

24 .4 רצוי לתחום כל תכונה של מאפיין בגרשיים ולהקפיד שכל התכונות תיכתבנה באותיות רגילות. אם יש ערך זהה לשם המאפיין, כדוגמת המאפיין החדש hidden="hidden" אפשר לכתוב hidden> <section בלבד. גם אם לא כל החוקים הרשומים בסעיף זה ברורים לך בשלב זה, אני בטוחה שעם ההתקדמות שלך בלימוד זה תכיר אותם ואת חשיבות השמירה עליהם. מנוסה בגרסאות קודמות של?HTML במהלך הלימוד בספר לא אסגור תגיות ריקות. כלומר, </ charset="utf-8" <meta או </ <br יוצגו ללא לוכסן בסוף תגית הסגירה, וזה בסדר. תרגיל 1 צור דף HTML הכולל את השלד, טקסטים ותווים מיוחדים כפי שלמדת, הכן מסמך HTML5 שייראה כפי שמוצג בתרשים 2.13: הפתרון נמצא בקוד.solution_2.1.html תרשים 2.13 פרק 2: יסודות ועקרונות שפת HTML(5) 47

נתיב מוחלט (Absolute path) נתיב מוחלט מציג את הנתיב והתיקייה, כמו לדוגמה: אל התמונה bgr1.jpg באופן מפורט, כולל שם האתר <img src="http://www.somedomain.co.il/images/bgr1.

25 נתיב מוחלט (Absolute path) נתיב מוחלט מציג את הנתיב והתיקייה, כמו לדוגמה: אל התמונה bgr1.jpg באופן מפורט, כולל שם האתר <img src=" title="circle" alt="circle"> זו יכולה להיות תמונה השמורה בשרת של האתר שלך או לחילופין, תמונה שנמצאת באתר אחר ואתה רוצה להציג אותה בדף האינטרנט שלך. היתרון של השימוש בנתיב מוחלט הוא בכך שהתמונה אינה תופסת מקום בשרת שלנו. החיסרון הוא בכך שאם ימחקו את התמונה מהשרת שבו היא נמצאת כעת וממנו מציגים אותה, עדיין יהיה לנו דף אינטרנט אבל ללא תמונה. כמו כן, יש לשקול את נושא זכויות היוצרים בדבר איסור הצגת תמונה מאתר של מישהו אחר. שילוב תמונה מתיקיית התמונות באתר כך תוצג תמונה ששמורה בתיקיית תמונות באתר שלנו: <img src="images/bgr1.jpg" title="circle" alt="circle"> תמונה כקישור עד כאן למדת ליצור קישור ולמדת להציג תמונה. כעת תוכל לשלב את שני הנושאים האלה ולהציג תמונה במקום הטקסט של הקישור. באתר הבא, תמונות הסמלים של הרשתות החברתיות מהוות למעשה קישורים לאתרים אלה: פרק 2: יסודות ועקרונות שפת HTML(5) 75

26 באתרים רבים הלוגו הוא הקישור אל דף הבית של האתר: מעניינים בעיקר סמלי לוגו שמשתנים כשחולפים מעליהם עם העכבר: HTML5 76

הדבר אינו שונה באתרים בעברית, כמובן: באתר של הכללית סימנתי במסגרת שחורה את התמונות המהוות קישורים לעמודים אחרים. כדי לעבור לכתובת קישור, אפשר ללחוץ על סמל או על כיתוב האומר "לחץ כאן".

27 הדבר אינו שונה באתרים בעברית, כמובן: באתר של הכללית סימנתי במסגרת שחורה את התמונות המהוות קישורים לעמודים אחרים. כדי לעבור לכתובת קישור, אפשר ללחוץ על סמל או על כיתוב האומר "לחץ כאן". בדוגמה שלמטה, נעבור אל כתובת הקישור על ידי לחיצה על תמונת העיגול, כפי שתוכל לראות בקוד :exercise_2.12.html <a href="contact.html"><img src="bgr1.jpg" title="circle" alt="circle"></a> התוצאה בדפדפן היא, שבעת מעבר של העכבר מעל התמונה, סמן העכבר יהפוך לצורת כף יד ואצבע המסמלת קישור. שים לב למסגרת שהופיעה סביב התמונה בדפדפנים מסוימים (כגון.IE תרשים 2.21). בפרק 4 תלמד כיצד לבטל אותה. פרק 2: יסודות ועקרונות שפת HTML(5) 77

28 במכשירים הניידים, או כשהדף מודפס. תוכל לעשות זאת בקלות יחסית ללא צורך לשנות דבר בקוד HTML המקורי שהכנת. להבדיל מ- HTML שהיא שפה מבוססת תגיות, CSS היא שפה שמוכוונת על ידי רשימה של הגדרות עיצוב. תוכל להבחין בין תגיות HTML שונות על ידי סימני < > שנרשמים סביב שם של כל תגית, ואילו ב- CSS אין קודי סימון כלל. כל הגדרת עיצוב מורכבת משני חלקים: ההגדרה והערך שלה. להלן מספר דוגמאות של הגדרות. את ההגדרות צריך לכתוב באנגלית. כאן הן נכתבו בעברית לשם הנוחות וההסבר בלבד, ולצורך ההבנה של נושא "הזוגות": background-color:blue צבע רקע: כחול; היישום: color:red צבע גופן: אדום; היישום: font-size:12px; גודל אות: 12 פיקסלים; היישום: padding-top:56px; רווח מלמעלה: 56 פיקסלים; היישום: font-family:arial היישום: ;(Arial) סוג גופן: אריאל,blue נכתב צמוד לנקודתיים. יש שים לב שבאנגלית הפרמטר, כמו בדוגמה הראשונה עשרות הגדרות שונות ולכל אחת מהן ניתן לקבוע מספר ערכים. מספר האפשרויות גדול מאוד, כפי שתראה בהמשך הלימוד בפרק זה. כרגע חשוב שתדע שההגדרות נעשות בזוגות: הגדרה וערך. גרסאות של CSS כמו,HTML5 כך גם שפת ההגדרות CSS משתנה ומתפתחת ללא הרף. חלק מהגדרות העיצוב כבר קיימות משנות ה- 90, החל בגרסה הראשונה. הגדרות העיצוב העדכניות נמצאות במסמכי המפרטים של.CSS3 היכולות שמאפשרות הגדרות העיצוב של CSS3 התפתחו באופן משמעותי בעשור האחרון, והן ממשיכות להתפתח גם בעת כתיבת שורות אלו. היכן כותבים את הגדרות?CSS יש שלוש אפשרויות לכתוב את הגדרות העיצוב של האלמנטים בדף. מתוכ ן, מומלצת האפשרות השלישית בלבד, אך כדאי להכיר גם את שתי האחרות, כי לפעמים יש צורך להיעזר בהן. פרק 4: הגדרות עיצוב על ידי 107 CSS

הגדרת העיצוב ישירות בתגית Inline שיטת :HTML שיטת הגדרת עיצוב זו היא הבסיסית והקלה ביותר. לשיטה קוראים,Inline כי כל הגדרה מתבצעת "בתוך השורה" של התגית.

29 הגדרת העיצוב ישירות בתגית Inline שיטת :HTML שיטת הגדרת עיצוב זו היא הבסיסית והקלה ביותר. לשיטה קוראים,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

30 בדרך דומה ניתן להגדיר צבע רקע, סוג גופן, רוחב שורה ועוד. ניתן לקבוע הגדרות לתגיות שונות, לתגית כותרת, לתגית קישור ועוד, כפי שתוכל לראות בקוד.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

31 בתרשים 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. לחילופין, תוכל לציין את מספר הצבע במספר בן שש ספרות לאחר הסימן סולמית #. לדוגמה, # מציין שחור, ו- #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> ליצירת פריסות. שיטת השימוש בטבלה לעימוד הדף הינה מיושנת כי היא אינה מפרידה כראוי בין התוכן לבין העיצוב.

32 מנוסה בגרסאות קודמות של?HTML בספר זה לא נשתמש בתגית <table> ליצירת פריסות. שיטת השימוש בטבלה לעימוד הדף הינה מיושנת כי היא אינה מפרידה כראוי בין התוכן לבין העיצוב. לפיכך, כדי ליצור את הפריסה המוצגת בתרשים 5.2 מומלץ להשתמש בשיטות חדשות לעימוד פריסות. מודל הקופסה Box model - "מודל הקופסה" קובע כיצד והיכן יוצגו אלמנטים בדף ומה יהיו יחסי הגומלין ביניהם. כאשר אנו מתייחסים לאלמנט או לאובייקט כלשהו, אנו מתכוונים למעשה לתגית שהוגדרה בדף. תגיות כמו <h1>, <nav>,<header>,<section> ותגיות נוספות שלמדת בפרקים הקודמים, הן אובייקטים בדף האתר ומרכיבות את המבנה ואת המראה שלו. על פי מודל זה, כל אלמנט בדף מוגדר כקופסה, המורכבת מהחלקים הבאים: - Content area אזור התוכן. משמש לטקסטים, תמונות ושאר מרכיבי התוכן שבתגית. - Padding שוליים פנימיים. משמשים בעיקר לציון הרווח שבין הטקסט לבין שולי אזור התוכן. שוליים פנימיים אינם יכולים להיות מוגדרים כמספר שלילי. מסגרת. המסגרת הינה חלק מהעיצוב, אך לרוב מבטלים את קיומה ב- CSS - Border על ידי ההגדרה (0 border:0px פיקסלים). - Margin שוליים חיצוניים. שוליים אלה תמיד שקופים ולא ניתן לראותם. השוליים החיצוניים משמשים ליצירת רווח בין אלמנטים. שוליים חיצוניים יכולים להיות מוגדרים כמספר שלילי (מיקום יחסית למיקום המקורי). תרשים 5.3 פרק 5: מודל הקופסה ופריסות 147

כשתגדיר רקע לאלמנט, הוא יכלול את אזור התוכן ואת אזור השוליים הפנימיים, עד קו המסגרת. התבונן בתרשים 5.3. זוהי דוגמה לתגית המקטע <section> שבהגדרות העיצוב שלה ב- CSS נקבעו רוחב וגובה מסוימים.

33 כשתגדיר רקע לאלמנט, הוא יכלול את אזור התוכן ואת אזור השוליים הפנימיים, עד קו המסגרת. התבונן בתרשים 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 כפי שלמדת.

34 תרשים 7.12 מציג את התוצאה הסופית במכשיר הנייד: תרשים 7.12 שים לב, שאנו כלל לא עוסקים בפרק זה בעיצוב הטפסים. ההנחיות והכללים שנלמדו בפרק 4. את העיצוב יש לעשות לפי תרגול 7-1: צור מסמך HTML5 כפי שלמדת. השאר את התגית <body> ריקה. התגית <form> ומבנה טופס התגית <form> להגדרת טופס כוללת תגית פתיחה ותגית סגירה. בין תגיות אלו מוגדרים הפקדים שנלמד בפרק זה. כאשר יש בטופס פקד "שלח", כפי שתלמד ליצור בהמשך - לחיצה עליו תשלח אל השרת את כל הנתונים שהגולש מילא בטופס. כך כותבים את התגיות להגדרת טופס: <form action=" method="get" autocomplete> </form> HTML5 194

לתגית <form> יש מאפיינים אחדים: המאפיין - action הכתובת שאליה נשלחים הנתונים: action> <form הנתונים שהגולש ממלא בטופס צריכים להישלח אל השרת כדי שיעבד אותם ויגיב בהתאם.

35 לתגית <form> יש מאפיינים אחדים: המאפיין - action הכתובת שאליה נשלחים הנתונים: action> <form הנתונים שהגולש ממלא בטופס צריכים להישלח אל השרת כדי שיעבד אותם ויגיב בהתאם. הערך של המאפיין action הינו הכתובת שאליה ישלחו הנתונים. הכתובת יכולה להיות אתר באינטרנט, דף מסוים באתר, ועוד. אם לא מגדירים מאפיין זה, הנתונים יישלחו אל הדף הנוכחי. המאפיין - method אופן שליחת הנתונים אל השרת: method> <form יש שתי שיטות לשליחת נתונים: method="get"> או method="post"> :get זו ברירת המחדל. באופן זה נשלחים הנתונים באופן גלוי לעיני הגולש בזוגות "שם פרמטר"/ערך, כלומר, הנתונים מוצגים בשורת הכתובת של הדפדפן. ניתן לראות זאת לדוגמה באתר של גוגל. היכנס, חפש והסתכל בשורת הכתובת. בתרשים הבא מחפשים את המילה.HTML5 כפי שתוכל לראות, הביטוי שמחפשים מוצג בשורת הכתובת של הדפדפן: תרשים 7.13 שיטה זו מומלצת כאשר הנתונים אינם רגישים, סודיים, או אישיים. מספר התווים שניתן לשלוח ב- get מוגבלת למספר מסוים, תלוי בדפדפן, ולכן יכול להיות שלא כל המידע יועבר כראוי. :post הנתונים נשלחים באופן שאינו גלוי לעיני הגולש. אין זה אומר שאם הנתונים אינם גלויים, הם מאובטחים. בשיטה זו אין הגבלה על כמות הנתונים שאפשר לשלוח. דוגמה למשלוח כזה: סיסמה. המאפיין <form autocomplete> :autocomplete מאפיין זה יכול לקבל שני ערכים: on או.off אם הוא דולק,(on) אזי הדפדפן שומר בזיכרון את הערכים המוזנים לו עבור השדות ובפעם הבאה הוא יציע למשתמש להשתמש בהם. ברירת מחדל היא.on פרק :7 טפסים ב - HTML5 195

36 8 נושאים מתקדמים CSS3 בשלב זה של הלימוד, אתה כבר מוכן לככב בעולם האמיתי ברשת. למדת לבנות דפי HTML5 באופן מקצועי ויעיל. למדת לעצב את הדפים ואת הגדרות העיצוב הרלוונטיות. לפניך אפשרויות רבות להגדרות עיצוב ב- CSS. בפרק זה תכיר יותר את CSS בכלל ואת CSS3 בפרט, ותרחיב את ידיעותיך על שימוש בסוגי גופנים. בפרק זה נבחן את הנושאים הבאים: טכניקות מתקדמות ב- CSS CSS3 הטמעת גופנים תמונות רקע, חזרה ודגשים על הוספת רקע פשוטה לאתר למדת בפרק 4. כידוע, לתמונות יש משקל (נפח) ובעת טעינת עמוד אינטרנט ככל שיהיו בו יותר תמונות (תוכן או רקע), כך משקלו וזמן טעינתו יהיו ארוכים יותר. לכן, מומלץ לייעל על ידי הפחתת השימוש בתמונות רקע, כאשר זה אפשרי. כדי שתוכל לייעל את הגדרת תמונת הרקע ואת הפחתת השימוש בתמונת רקע לאפקט של מעברי צבע, הבה ניזכר בהגדרת תמונת רקע רגילה: body { background:url(some_pattern.jpg); } כברירת מחדל, הדפדפנים משכפלים את תמונת הרקע לאורך ולגובה השטח שמוגדר עבור התגית שתמונת הרקע מוגדרת כרקע שלה. פרק 8: נושאים מתקדמים 219 CSS3

37 הגדרת תמונת רקע עבור מעברי צבע מה פירוש הדבר תמונת רקע לכל רוחב הדף? ראה את תרשים 8.1 ש, בה ניתן להבחין במעברי צבע מראש התמונה ועד תחתיתה, מצבע כהה למעלה ועד בהיר למטה, לכל רוחב הדף: יש שתי אפשרויות להגדיר את מעברי הצבע. תרשים 8.1 בגרסאות קודמות של,CSS כאשר היה צורך ליצור גרדיאנט,gradient) שינוי צבע הדרגתי) אופקי, כמו בתרשים 8.2, היית צריך לחתוך תמונה ברוחב 1 פיקסל ולכתוב את הגדרת העיצוב הבאה: background: # url(some_pattern.jpg) repeat-x; שורה זו הינה למעשה קיצור של אוסף ההגדרות הבא: background-color: #999999; background-image: url(some_pattern.jpg); background-repeat: repeat-x; HTML5 220

38 9 ו- Javascript JQuery מקובל לומר שמעצב אתרים מקצועי צריך להכיר טכנולוגיות, ושבונה אתרים מקצועי צריך להבין עיצוב. בימינו, כדי להצליח לאפיין, לעצב ולבנות אתר אינטרנט מוצלח, צריך להכיר הן את היכולות שמאפשרת לך הטכנולוגיה והן את המגמות, הכיוונים או הטרנדים, ואת האינטראקטיביות שהמעצב חולם עליהן. שפת HTML5 מצפה ממך להיעזר בכתיבת קוד Javascript כדי לשלוט על סרטונים, צלילים, ציורים על הקנבס,(Canvas) גרירת קבצים לתוך חלון הדפדפן ועוד. את כל אלה תכיר בפרקים הבאים, אולם כדי שתוכל להבין ולבצע, עליך להכיר תחילה את השפה.Javascript בפרק זה תלמד היכן לשלב קוד Javascript במסמכי HTML5 שלך, כיצד קוד Javascript JQuery הספריה דוגמאות ותכיר את תראה נראה ומתי משתמשים ב- Javascript. העוצמתית. בפרק זה תלמד את הבסיס של השפה ומראה כמה מההיבטים החשובים שלה. בפרק זה נבחן את הנושאים הבאים: סדר קריאת קוד Javascript ע"י הדפדפן?Javascript מהי דוגמאות דף Javascript הראשון שלך Jquery תחביר השפה Mobile jquery על משתנים, פונקציות, אובייקטים ואירועים מהי?Javascript Javascript הינה שפת תכנות לכל דבר, ומשמשת כשפה העיקרית לכתיבת קוד באתרי אינטרנט. היא נוחה, קלה ללימוד וליישום, כפי שמייד תראה, היא גם משתלבת כראוי בקוד HTML5 ובהוראות.CSS שפת תכנות זו מבוססת עצמים Oriented),Object כפי שתלמד בהמשך), ומספקת יכולות של פעולה הידודית (אינטראקטיבית) בין הגולש לבין האתר. פרק : 9 JQuery ו Javascript- 255

39 השפה משתלבת באופן נוח עם רכיבי תכנות ומידע מורכבים. מכיוון שקוד Javascript נקרא ומבוצע על ידי הדפדפן, הוא נקרא שפת קוד לקוח ) Programming Client Side.(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 כפי שאתה כבר יודע לעשות, והוסף לו את הקוד המוצג בקוד :<head> בתוך תגית,exercise_9.1.html <script type="text/javascript"> alert("hello World!"); </script> HTML5 256

40 10 שילוב מדיה והאובייקט Canvas האם אתה יכול לדמיין איך היו נראים אתרי אינטרנט או יישומים ללא שימוש בסרטונים? ללא שמע וצלילים? ללא משחקים, אינטראקציות ואנימציות? סביר להניח שלא. שפת HTML5 לוקחת בחשבון את הטכנולוגיה העשירה ואת התפתחות עולם המדיה בעולם האינטרנט ומאפשרת ניצול ויישום של עולם המדיה ללא שימוש ברכיבים חיצוניים כפלאש.HTML וללא טריקים מוזרים כמו שילוב שמע ממקור פלאש ברקע של הצגת אתר,(Flash) בפרק זה נבחן את הנושאים הבאים: שמע סרטונים Canvas (קנבס) שילוב סרטונים ב- HTML5 עד לאחרונה הצגת סרטונים באתר אינטרנט הייתה נעשית בדרך כלל על ידי התוכנה Flash (פלאש). זו תוכנה חיצונית, המחייבת את התקנת Flash player בדפדפן של הגולש כדי שיוכל לצפות בסרטון. אחת השאיפות של HTML5 הייתה להוריד את כמות התוספים,(plugins) רכיבי תוכנה שמתקינים בדפדפן, כדי להריץ את האתר. כדי למלא דרישה זו פוּתחה התגית <video> להפעלת סרטונים. התגית כוללת תגית פתיחה וסגירה ואת המאפיין המרכזי:,scr שמאפשר להגדיר את קובץ הסרטון שרוצים להפעיל, להריץ או לנגן. <video autoplay controls src="videos/birthday.mp4"></video> פרק 10: שילוב מדיה והאובייקט 289 Canvas

מומלץ לשים את קבצי הווידאו בתיקייה המיועדת לכך. כפי ששמנו את קבצי התמונות בתיקייה images כך נשים את קבצי הווידאו בתיקייה.videos המאפיין autoplay גורם לסרטון להתחיל אוטומטית.

41 מומלץ לשים את קבצי הווידאו בתיקייה המיועדת לכך. כפי ששמנו את קבצי התמונות בתיקייה 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

42 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

43 (tablets) או מחשבים. למעשה, נוצרה שפת התקשרות אחידה בקוד עם פונקציות פנימיות שאינן מחייבות התקנות של תוספים (plugins) חיצוניים, כמו למשל התוכנה פלאש. מיקום גיאוגרפי Geolocation - בעבר, כאשר אתר האינטרנט היה צריך לדעת היכן הגולש נמצא, הגולש היה צריך להזין את המיקום שלו. כלומר, להזין ידנית את שם המדינה והעיר. כעת יש אפשרות ב- HTML5 לזהות באופן אוטומטי את מיקום הגולש (לאחר אישורו המוקדם) באופן פשוט וקל, הן עבור הגולש והן עבור המפתח. הכלי הזה ידוע בשמו המקצועי Geoloation (מיקום גיאוגרפי) והוא כיום חלק מהמפרט של.HTML5 לפני שנרחיב את הדיון במושגים הטכניים, ננסה להבין מדוע כדאי לשלב אפשרות של זיהוי מקום באתר או ביישום אינטרנט. כיצד יכול זיהוי מקום לתרום לאתר או ליישום?HTML5 גולשים יכולים לשתף במיקום שלהם את חבריהם ברשתות חברתיות. פרסומות שמופיעות באתר יכולות להיות מבוססות מקום ולהיות רלוונטיות עבור הגולש, כמו למשל פרסומות של בתי קולנוע בת"א כאשר הגולש נמצא בת"א ולא בחיפה. הצגה אוטומטית של מזג האוויר על כל הפרמטרים הכרוכים בו, בהתאמה למקום שהגולש נמצא בו. אתרי קטלוגים של חנויות פיזיות אשר מוצעים לגולש על פי המקום שהוא נמצא בו. אתרי אינטרנט או יישומי רשת של חברות תחבורה, כמו אוטובוסים, רכבות או מוניות. יש גם יכולת להציע תחנות קרובות או למשל, מוניות פנויות. אתרי "דרושים" יכולים להציג אוטומטית מודעות דרושים על פי מיקום. אלו הן רק חלק מהאפשרויות כשהאתר או היישום תומכים בזיהוי מיקום של הגולש. למעשה, לכל פרסום או מידע תלוי-מקום פיזי יש משמעות וצורך לדעת את המיקום של הגולש. ללא ספק, אפשר להעלות רעיונות נוספים או לשלב דוגמאות שנובעות מגלישה באתרי האינטרנט הרבים שבהם יש שימוש הולך וגובר בכלי זה. כיצד פועלת התכונה?Geolocation הבה נבחן מהי התכונה Geolocation וכיצד היא פועלת. אחד הרכיבים החשובים והמשמעותיים ביותר הוא,Geolocation API שאינו רכיב מובנה, אלא רכיב מקושר. כיצד הוא פועל? הרכיב Geolocation הוא אוסף של חוקים והגדרות שמאפשרים לדפדפן לדעת HTML5 326

44 היכן נמצא הגולש מבחינת קווי רוחב ואורך גיאוגרפיים, בהתאם ליכולות של הדפדפן לספק מידע זה ובהתאם להסכמת הגולש לחשוף נתונים אלה. חלק מהמידע מבוסס על רכיב GPS מובנה, בעיקר בטלפון הנייד, חלק מהמידע מבוסס על כתובת IP של המחשב, על נתונים שנשלחו מהגולש, נתונים שמוגדרים לרשת שבה נעשית הגלישה,(SSID) ועוד. השימוש ב- Geolocation מיועד בעיקר למכשירים הניידים, והדבר מאוד הגיוני. יש לקחת בחשבון שבנייד השימוש ב- GPS יכול לצרוך באופן מוגבר את הסוללה. בנוסף, אסור לפגוע בפרטיות הגולש, ולכן יש לקחת נתונים אלה בחשבון וצריך לקבל את אישורו לביצוע מעקב המיקום (GPS) ולספק לו מידע מתאים. בתרשים 11.1 תוכל לראות את נוהל בקשת הרשות על דפדפנים פיירפוקס וכרום: תרשים 11.1 האתר שמוצג כדוגמה בתרשים 11.1 מאפשר לחפש אופניים ציבוריים להשכרה. כדי למצוא אופניים, היישום צריך לדעת תחילה היכן הגולש נמצא ולכוון אותו למקום הקרוב ביותר. פרק 11: נושאים מתקדמים 327 API

HTML5. ולמערכות Web הדור הבא

HTML5. ולמערכות Web הדור הבא HTML5 המדריך לבניית אתרים ולמערכות Web הדור הבא מהדורה שנייה יונית רושו יועץ מקצועי: זהר עמיהוד עריכה ועיצוב: שרה עמיהוד, יצחק עמיהוד עיצוב עטיפה: אופיר ליברמן שמות מסחריים שמות המוצרים והשירותים המוזכרים