HTML5 המדריך לבניית אתרים הדור הבא יונית רושו
יועץ מקצועי: זהר עמיהוד עריכה ועיצוב: שרה עמיהוד, יצחק עמיהוד עיצוב עטיפה: אופיר ליברמן שמות מסחריים שמות המוצרים והשירותים המוזכרים בספר הינם שמות מסחריים רשומים של החברות שלהם. הוצאת הוד-עמי והמחברת עשו כמיטב יכולתם למסור מידע אודות השמות המסחריים המוזכרים בספר זה ולציין את שמות החברות, המוצרים והשירותים. שמות מסחריים רשומים ) registered (trademarks המוזכרים בספר צוינו בהתאמה. הודעה ספר זה מיועד לתת מידע אודות מוצרים שונים. נעשו מאמצים רבים לגרום לכך שהספר יהיה שלם ואמין ככל שניתן, אך אין משתמעת מכך כל אחריות שהיא. המידע ניתן "כמות שהוא" is").("as הוצאת הוד-עמי והמחברת אינם אחראים כלפי יחיד או ארגון עבור כל אובדן או נזק אשר ייגרם, אם ייגרם, מהמידע שבספר זה, או מהתקליטור/הדיסקט (אם יצורף), או מאתר האינטרנט המלווה את הספר. אין לעשות שימוש מסחרי ו/או להעתיק, לשכפל, לצלם, לתרגם, להקליט, לשדר, לקלוט ו/או לאחסן במאגר מידע בכל דרך ו/או אמצעי מכני, דיגיטלי, אופטי, מגנטי ו/או אחר - בחלק כלשהו מן המידע ו/או התמונות ו/או האיורים ו/או כל תוכן אחר הכלולים ו/או שצורפו לספר זה, בין אם לשימוש פנימי או לשימוש מסחרי. כל שימוש החורג מציטוט קטעים קצרים במסגרת של ביקורת ספרותית אסור בהחלט, אלא ברשות מפורשת בכתב מהמוציא לאור. לשם שטף הקריאה כתוב ספר זה בלשון זכר בלבד. ספר זה מיועד לגברים ונשים כאחד ואין בכוונתנו להפלות או לפגוע בציבור המשתמשים/ תו. (C) כל הזכויות שמורות הוצאת הוד-עמי בע"מ www.hod-ami.co.il טלפון: 09-9564716 info@hod-ami.co.il הודפס בישראל אוקטובר 2012 מסת"ב ISBN 978-965-361-393-5
הספר מוקדש באהבה לבעלי היקר אורן ולילדים שלי - שקד, דניאל וירין רושו, על כך שנתתם לי את הכוח ותמכתם לכל אורך הדרך
תוכן עניינים מקוצר הקדמה... 19 פרק 1: מבוא ומושגים באינטרנט... 21 פרק 2: יסודות ועקרונות שפת HTML(5)... 25 פרק 3: תגיות המבנה החדשות... 87 פרק 4: הגדרות עיצוב על ידי...103 CSS פרק 5: מודל הקופסה ופריסות...145 פרק 6: קוד מינימליסטי ובעל משמעות... 177 פרק פרק 8: פרק 9: 7: טפסים ב- HTML5...183 נושאים מתקדמים...219 CSS3 255... ו- Javascript Jquery פרק 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: יסודות ועקרונות שפת HTML(5)... 25 מה זה?HTML5...26 במה שונה HTML5 מהגרסאות הקודמות?... 26 תמיכת דפדפנים...27 דף HTML5 הראשון שלך...27 תגיות, מאפיינים ואלמנטים בסיסיים של השפה... 31 התגית: אבן היסוד של כל דף...31 HTML מבנה סטנדרטי של מסמך :HTML5 תגיות היסוד...32 32... הצהרה על HTML5 :DOCTYPE התגית <html> 32... התגית 33...<head> התגית <title> 33... התגית 33...<body> תוכן עניינים 7
התגית 34...<section> תגיות נפוצות נוספות להגדרת אזורים בדף...35 עברית בדפי אינטרנט...35 תוכן טקסטואלי...36 הכרת המושג כותרות...36 תגיות הכותרת... 37 התגית 39...<hgroup> תגית הפ ס קה <p>...39 תגיות בסיסיות לעיצוב הטקסט... 39 חוקיות הפתיחה והסגירה של תגית בתוך תגית...40 התוכן שבין התגיות... 40 להיכן נעלמו הרווחים בין המילים ובין השורות?...41 רווח בין תווים 41... רווח בין שורות <br>...42 שילוב תווים מיוחדים בתוכן שבין התגיות - Characters...43 ASCII מאפיינים לתגיות - Attributes 44... סיכום: התקניות הנדרשת במסמכי 45...HTML5 תרגיל 47... 1 קישורים... 48 תגית הקישור a...51 המאפיין 51... href המאפיין 52...target המאפיין 52...rel המאפיין 52... media קישור לדואר אלקטרוני...53 mailto קישור למסמך Word שנמצא באותה תיקייה...54 קישור לדף אחר באתר שלי שנמצא באותה התיקייה... 54 קישור פנימי בתוך דף 54...Anchors- התגית 56... base תרגיל 57... 2 צבעים ורקע... 58 רשימות ותבליטים... 58 רשימות תבליטים לא ממוספרות...61 רשימות תבליטים ממוספרות... 62 רשימת הגדרות - list 62... Definition 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 נתיב יחסי path) (Relative 74... נתיב מוחלט path) (Absolute 75... שילוב תמונה מתיקיית התמונות באתר...75 תמונה כקישור...75 הוספת תמונת רקע... 78 תרגיל 80... 3 טבלאות...81 תאים ריקים בטבלה...82 מרווחים בין תאים ובתוך התאים...83 סיכום...85 פרק 3: תגיות המבנה החדשות... 87 תגיות חדשות ב- HTML5 ליצירת מבניות בעלת משמעות...88 התגית <header> 88... התגית <footer> 88... התגית 89...<section> התגית <article> 89... התגית 90...<nav> התגית <aside> 90... אזורים יעודיים...91 תגיות חדשות נוספות...93 התגית <figure> 93... תוכן עניינים 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 אלגוריתם קווי המתאר של התוכן algorithm) (Outline...99 תמיכה בדפדפנים שאינם תומכים ב- HTML5... 100 תרגיל... 4 101 סיכום... 102 פרק 4: הגדרות עיצוב על ידי...103 CSS מה זה...?CSS 103 גרסאות של... CSS 107 היכן כותבים את הגדרות...?CSS 107 הגדרת העיצוב ישירות בתגית :HTML שיטת... Inline 108 הגדרות צבע בשיטת Inline ובאופן כללי... 110 הבעיה בשיטת... Inline 111 הפתרון: שיטת...Internal 111 הגדרת העיצוב בראש המסמך באופן גורף: התגית...<style> 112 הבעיה בשיטת תגית <style>... 113 הפתרון... 114 השיטה השלישית והנבחרת: קובץ CSS חיצוני... 114 מה עושה הדפדפן?... 115 דוגמאות... CSS 115 הגדרות 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 שלב...1 129 הגדרות עיצוב שאינו גורף:...Class 129 המשך תרגיל - 5 שלב...2 131 סדרי עדיפויות של הגדרות עיצוב... 132 כוכבית... 133 שימוש בשם, המאפיין... id 134 אזורים יעודיים בדף אינטרנט או ביישום... 134 שימוש בשתי מחלקות (classes) לאותו אלמנט... 135 תוכן עניינים 11
קישורים אינטראקטיביים... 135 - Hover שינוי עיצוב במעבר עכבר מעל קישור... 135 - Visited שינוי עיצוב של קישור לאחר ביקור בו... 136 יעילות הכתיבה של מסמכי...CSS 136 שימוש ב- CLASS במידה... 136 עמידה בשני תנאים: הגדרת סוג תגית וגם שימוש ב- class... 137 היררכיה ב- CSS, או קינון תגיות... 138 ההבדל בין 'צאצאים' לבין 'ילדים' מדור ראשון... 139 תגית שעוקבת אחרי תגית אחרת... 140 תגיות שנמצאות לאחר תגית מסוימת... 141 תגיות בעלות מאפיין מסוים... 141 תגיות עם מאפיין בעל ערך מסוים... 142 שימוש בהערות... 143 סיכום... 143 פרק 5: מודל הקופסה ופריסות...145 מבנה ופריסת הדף... 146 מודל הקופסה - model... Box 147 איחוד שוליים אנכיים - collapse...margin 150 תגית מתחת לתגית... 150 הכלת תגית בתוך תגית אחרת... 152 איחוד שוליים בתוך אותו האלמנט... 153 הגדרות תצוגת Inline ותצוגת... Block 154 אלמנטים עם תצוגת... Block 154 אלמנטים עם תצוגת...Inline 155 מיקום אלמנטים... 156 זרימה רגילה של הדף - flow...normal 156 מיקום יחסי - positioning...relative 156 מיקום מוחלט - positioning...absolute 158 דוגמה שימושית... 162 מיקום מקובע - positioning... Fixed 163 אלמנטים "צפים" -...Floating 163 מסך צר של מכשיר נייד... 165 תג הפסקת ציפה - Clear... 166 יישור אופקי... 169 HTML5 12
יישור באמצעות שוליים אוטומטיים... 169 יישור של טקסט בתוך אלמנטים לעומת יישור של אלמנטים... 170 דפדפנים ישנים למישהו?... 172 תרגיל... 6 172 סיכום... 176 פרק 6: קוד מינימליסטי ובעל משמעות... 177 למה הכוונה קוד בעל משמעות?... 177 הפרדת התוכן והמשמעות מהתצוגה... 180 מינימליזם בקוד... 180 סיכום... 182 פרק 7: טפסים ב- HTML5...183 מהו הטופס ומהי מטרתו?... 184 טכנולוגיה ועיצוב יד ביד... 185 החשיבות של תכנון ועיצוב הטפסים... 187 השפעת התפתחות העיצוב והטכנולוגיה על טפסים ב- HTML5... 191 לאן נשלחים הנתונים מהטופס, וכיצד... 192 סדנת עבודה... 192 התגית <form> ומבנה טופס... 194 מבנה הטופס... 196 התגית <label>... 196 הפקדים... 197 הפקדים הבסיסיים: פקדי תיבת טקסט ושליחת הנתונים...input 198 פקדי קלט נוספים עבור טקסטים ומספרים... 200 פקד אזור טקסט,... Textarea 205 פקד הלחצן -...button 206 פקדי בחירה... 206 תיבת סימון - box... check 207 פקדי רדיו - buttons... radio 208 רשימה נגללת -...select 210 פקד להעלאת קובץ - upload...file 211 עיצוב הפקדים והטופס בכללותו... 212 פקד "שלח" (submit) מעוצב עם תמונה... 212 התגיות <fieldset> ו-...<legend> 212 תוכן עניינים 13
התגית <details>... 213 ניהול המידע... 214 התגית <datalist>... 214 התגית...<datagrid> 214 הקוד לבניית הטופס... 215 סיכום... 217 פרק 8: נושאים מתקדמים...219 CSS3 תמונות רקע, חזרה ודגשים... 219 הגדרת תמונת רקע עבור מעברי צבע... 220 מיקום תמונת רקע... 221 מיקום על פי פיקסלים... 222 מיקום באחוזים... 223 עיצוב קישורים מתקדם... 224 קו תחתון בעיצוב אישי... 224 טכניקות להקטנת מספר המחלקות (classes)... 225 הדגשת קישורים מסוגים שונים... 225 תפיסת התחלת מחרוזת הערך... 226 תפיסת סוף מחרוזת הערך... 227 מעברי עכבר יעילים מעל קישורים... 228 מעברי עכבר פשוטים... 228 מעברי עכבר בשימוש תמונה אחת - rollovers...pixy-style 230 תפריט אופקי... 231 טכניקות חדשות ב- CSS3... 232 הוספת צללית לטקסט חי... 232 עיצוב עמודות... 234 מעברי צבע -...gradients 237 ריבוי תמונות רקע... 239 פינות מעוגלות... 240 יצירת לשוניות (tabs) עם פינות מעוגלות... 242 243... CSS transform אנימציות ב- CSS3... 244 שינוי מצב... 245 שינוי מיקום... 246 טיפוגרפיה: עיצוב גופנים... 248 HTML5 14
הטמעת גופנים... 251 זכויות יוצרים... 252 אופן ההטמעה... 252 תמיכה בדפדפן... Internet Explorer 253 דוגמה שלמה... 254 254... Media Queries סיכום... 254 פרק :9 Jquery ו- Javascript 255... מהי?Javascript... 255 התפקיד של Javascript בדף אינטרנט... 256 דף Javascript הראשון שלך... 256 כיצד פועלת השפה...?Javascript 257 תחביר השפה... Syntax 257 אירועים, פונקציות, אובייקטים ומשתנים... 258 מודול אובייקט המסמך - DOM... 259 האובייקט החשוב - Document... 260 תחביר הנקודה... 261 קריאת נתונים והשמת נתונים... 261 סדר קריאת הקוד על ידי הדפדפן... 261 משתנים -...variables 263 הגדרת והצהרת משתנים... 263 ערכי משתנים... 264 שרשור מספרים למחרוזות... 264 התניות וה ש מוֹת... 265 ריבוי התניות... 266 שיטות בדיקה... 266 הוראת התנאי... if 266 ההוראה - this מי אני?... 266 פונקציות מובנות שימושיות... 267 הפונקציה המובנית getelementbyid("");... 267 הפונקציה המובנית...substring 267 הפונקציה המובנית... indexof 267 פונקציות ואירועים... 268 תוכן עניינים 15
החלפת קובץ התמונה במעבר העכבר... 269 שלב ראשון... 269 שלב שני... 269 שלב שלישי... 271 שינוי טקסט בדף... 273 האובייקט... Style 273 הצגה והסתרה של שכבה בלחיצה על אובייקט בדף... 274 הספריה... Jquery 275 התקנת הרכיב המרכזי להרצת...JQuery 275 כתיבת הקוד הראשון שלך ב- JQuery... 276 האירוע... document.ready 276 סימן הדולר... 277 מציאת אובייקטים על המסך... 277 שרשרת הוראות... Chaining 278 שינוי אובייקטים... 278 שינוי ערכים של מאפיינים... 279 מניפולציות על...CSS 279 אירועים... 280 הופעה איטית והיעלמות איטית של אובייקטים - Fade... 281 Jquery mobile להפעלה בנייד... 283 287... Jquery mobile סיכום... 287 פרק 10: שילוב מדיה והאובייקט 289...Canvas שילוב סרטונים ב- HTML5... 289 שליטה על אובייקט video באמצעות...Javascript 292 שילוב שמע ב- HTML5... 293 אפשרות ראשונה: התגית... embed 293 אפשרות שנייה: תגית קישור... 293 אפשרות שלישית: קובץ פלאש... 294 אפשרות רביעית: תגית audio ב- HTML5... 294 התגית... Canvas 295 הכרת התגית, דפדפנים תומכים, מטרה... 295 מערכת הקואורדינטות... 295 הוספת התגית למסמך... 296 HTML5 16
שינוי גודל הקנבס... 297 כתיבת הקוד הראשון בקנבס:...hello world 298 תכנות בסיסי של התגית <canvas>... 298 המאפיינים של...canvas 299 הפונקציות של...canvas 299 הכרת API לציור 2D של הקנבס - Context...HTML Canvas 2D 300 זיהוי תמיכה בקנבס... 300 תכנות בתוך הקוד שתומך בקנבס... 301 מהו הציור על הקנבס?... 302 אפשרויות הצביעה ב- API... 302 ציור מלבנים... 304 ציור קווים... 305 ציור משולשים על הקנבס... 306 הכרת המצב (state) של משטח העבודה... 308 צורות מורכבות: קשתות ונתיבים... 311 ציור עיגולים על משטח העבודה... canvas 313 עקומות... 314 ציור טקסטים... 314 יצירת צל... 314 הצגת תמונות בקנבס... 315 מסכות - paths... clipping 315 טרנספורמציות -...transformations 317 שינוי גודל הצורה -...scale 317 סיבוב הצורה -...rotate 318 שקיפויות ושכבות... 319 אנימציות... 319 אנימציות יעילות עם...double buffering 322 סיכום... 323 פרק 11: נושאים מתקדמים 325...API מה הקשר בין API לבין...?HTML5 325 מיקום גיאוגרפי - Geolocation... 326 כיצד פועלת התכונה?Geolocation... 326 קוד בסיסי ליצירת תוכנית משולבת...Geolocation 328 תוכן עניינים 17
אחסון מקומי - storage...local 331 לשם מה לשמור את הנתונים בדפדפן?... 332 דוגמאות למשתמשים בשמירה מקומית... 332 דוגמה... 332 הלוגיקה לשמירת מצב... 333 החלק המרכזי של הקוד... 334 סיכום... 335 File API drag and drop גרירת קבצים מהמחשב האישי אל חלון הדפדפן... 336 תמיכת דפדפנים... 337 ההסבר הטכני:... File API 337 דוגמה לקוד שעושה שימוש ב-...File API 338 סיכום... 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. בספר נתייחס לתיקיית ברירת המחדל הזו. בדרך כלל הפעולות שיש לבצע לאחר הלחיצה על הלינק: לחיצה על הפעל, לחיצה על ו- Close. OK לחיצה על,UnZip על יונית רושו מהנדסת תוכנה בעלת ניסיון מעשי רב שנים בבניית אתרים לחברות הייטק בארץ. מרצה ל- 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 מאפשרת להשאיר חלק מהתגיות פתוחות ולא לסגור אותן, כמו למשל תגית הפ סקה. גם אין חובה להשתמש בתגיות,<html>.<body>,<head> מנוסה בגרסאות קודמות של?HTML מי שרגיל לשמור על התקניות של XHTML יתקשה מאוד לקבל את השינויים בתקניות הנדרשת במסמכי.HTML5 קח נשימה, תתרגל. כדי לבדוק אם הקוד שאתה כותב חוקי ותקני, אתה מוזמן להעלות את הקובץ שכתבת ושמרת אל אתר בכתובת:.http://validator.w3.org פרק 2: יסודות ועקרונות שפת HTML(5) 45
התבונן בקוד.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 בלבד. גם אם לא כל החוקים הרשומים בסעיף זה ברורים לך בשלב זה, אני בטוחה שעם ההתקדמות שלך בלימוד זה תכיר אותם ואת חשיבות השמירה עליהם. מנוסה בגרסאות קודמות של?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.jpg" title="circle" alt="circle"> זו יכולה להיות תמונה השמורה בשרת של האתר שלך או לחילופין, תמונה שנמצאת באתר אחר ואתה רוצה להציג אותה בדף האינטרנט שלך. היתרון של השימוש בנתיב מוחלט הוא בכך שהתמונה אינה תופסת מקום בשרת שלנו. החיסרון הוא בכך שאם ימחקו את התמונה מהשרת שבו היא נמצאת כעת וממנו מציגים אותה, עדיין יהיה לנו דף אינטרנט אבל ללא תמונה. כמו כן, יש לשקול את נושא זכויות היוצרים בדבר איסור הצגת תמונה מאתר של מישהו אחר. שילוב תמונה מתיקיית התמונות באתר כך תוצג תמונה ששמורה בתיקיית תמונות באתר שלנו: <img src="images/bgr1.jpg" title="circle" alt="circle"> תמונה כקישור עד כאן למדת ליצור קישור ולמדת להציג תמונה. כעת תוכל לשלב את שני הנושאים האלה ולהציג תמונה במקום הטקסט של הקישור. באתר הבא, תמונות הסמלים של הרשתות החברתיות מהוות למעשה קישורים לאתרים אלה: פרק 2: יסודות ועקרונות שפת HTML(5) 75
באתרים רבים הלוגו הוא הקישור אל דף הבית של האתר: מעניינים בעיקר סמלי לוגו שמשתנים כשחולפים מעליהם עם העכבר: HTML5 76
הדבר אינו שונה באתרים בעברית, כמובן: באתר של הכללית סימנתי במסגרת שחורה את התמונות המהוות קישורים לעמודים אחרים. כדי לעבור לכתובת קישור, אפשר ללחוץ על סמל או על כיתוב האומר "לחץ כאן". בדוגמה שלמטה, נעבור אל כתובת הקישור על ידי לחיצה על תמונת העיגול, כפי שתוכל לראות בקוד :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
במכשירים הניידים, או כשהדף מודפס. תוכל לעשות זאת בקלות יחסית ללא צורך לשנות דבר בקוד 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 כי כל הגדרה מתבצעת "בתוך השורה" של התגית. את שיטת ההגדרה 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 - "מודל הקופסה" קובע כיצד והיכן יוצגו אלמנטים בדף ומה יהיו יחסי הגומלין ביניהם. כאשר אנו מתייחסים לאלמנט או לאובייקט כלשהו, אנו מתכוונים למעשה לתגית שהוגדרה בדף. תגיות כמו <h1>, <nav>,<header>,<section> ותגיות נוספות שלמדת בפרקים הקודמים, הן אובייקטים בדף האתר ומרכיבות את המבנה ואת המראה שלו. על פי מודל זה, כל אלמנט בדף מוגדר כקופסה, המורכבת מהחלקים הבאים: - Content area אזור התוכן. משמש לטקסטים, תמונות ושאר מרכיבי התוכן שבתגית. - Padding שוליים פנימיים. משמשים בעיקר לציון הרווח שבין הטקסט לבין שולי אזור התוכן. שוליים פנימיים אינם יכולים להיות מוגדרים כמספר שלילי. מסגרת. המסגרת הינה חלק מהעיצוב, אך לרוב מבטלים את קיומה ב- CSS - Border על ידי ההגדרה (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> HTML5 194
לתגית <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
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; HTML5 220
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
השפה משתלבת באופן נוח עם רכיבי תכנות ומידע מורכבים. מכיוון שקוד 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
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 גורם לסרטון להתחיל אוטומטית. המאפיין 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