מאמר זה הוא הזוכה השני באתגר הכתיבה שלנו בנושא פיתוח תוכנה.
HTML – כל התורה על רגל אחת
פיתוח אתרי אינטרנט ועיצובם תופסים תאוצה בשנים האחרונות, כאשר מפתחים שונים שמים דגש מהותי באתריהם על נוחות, על שימושיות ועל מראה. אם בעבר האתרים היו מעוצבים בצורה ארכאית וטבלאית, הרי שהיום אתרי האינטרנט עברו מהפך בקנה מידה עצום, ובין היתר כוללים תוכן חזותי עשיר, עיצוב דינמי, קישורים נוחים, ובקיצור – כל מה שניתן לעלות על הדעת. אחת הדרכים הנפוצות ביותר לעיצוב אתרי אינטרנט עושה שימוש בשפת התגיות HTML. שפת HTML (ר"ת Hyper-Text Markup Language), מכילה פקודות שונות (תגיות) הכתובות בתוך סוגריים משולשים, שתכליתן הפשוטה היא לספק הוראות לדפדפן כדי שיוכל להציג את הדף לפי רצון המתכנת. מאחר שקוד ה-HTML כתוב בשפת תגיות, ישנם תפקידים מוגדרים לסוגי תגיות שונים. כך, למשל, יש ביכולתן של תגיות לאפיין סוג מסוים של טקסט (תגיות מבניות) או לחלופין, לערוך בו שינויים חזותיים (תגיות תצוגה), כדוגמת הגדלה או הקטנה, הדגשה, הטיה וכדומה. בהקשר זה, יש לציין את הארגון הבינלאומי W3C (ר"ת World Wide Web Consortium) המאגד את כללי התקינה לפיתוח אתרים ברשת. כללי התקינה הינם כללים הקובעים את האחידות במבנה שורות הקוד ובתוכנן בכל אתר ואתר. אולם, לא כל המתכנתים פועלים לפי הכללים הללו, ולכן נוצרת אי-אחידות במבנה שורות הקוד באתרים שונים ובתוכנן, העלולה לגרום לעיתים לשיבושים שונים. עדיין, נקבע כי התקן הנוכחי של שפת ה-HTML יהיה HTML 4.01, כאשר בעוד כשנתיים עתיד לצאת לאור התקן החדש יותר – HTML 5, שעליו נרחיב בהמשך. לעת עתה, נתמקד במבנה הבסיסי של קוד HTML המתואר בסכמה שלהלן:
לסיכום – הפונקציות המתוארות בסכמה שלעיל מאפשרות למתכנת הקמת דפי HTML, שיכולים לכלול כותרות, תמונות, קישורים, סקריפטים, טבלאות ועוד.
פיתוח שפת ה-HTML 5 – הכיצד?
שפת הסימון HTML 5 היא התקן החלופי לשפות הסימון הקודמות: XHTML1.1 ו-HTML4.01, ונועדה להקל על תהליך כתיבת אתרי אינטרנט ועל עיצוב יישומים מבוססי WEB. יש לציין שפיתוח השפה הזו החל עוד בשנת 2004, והוא פרי מוחה הקודח של קבוצת WHATWG (ר"ת Web Hypertext Application Technology Working Group). קבוצה זו מאגדת יחידים מחברות ידועות ברחבי העולם, כאשר כוונתה היא לעסוק בפיתוח שפת ה-HTML ובקידומה.
| היורש החדש: הסמליל הנוכחי של HTML 5 |
שפה חדשה, חדישה ומחודשת
אם נביט באופן מקצועי על קוד ה-HTML שלעיל, נבחין כי הוא לא כולל הצהרה על תקן ה-HTML שבו השתמשנו. אולם, התקן הרשמי קובע כי לפני פתיחת קוד HTML, יש לרשום את הגרסה שבה אנו משתמשים. לדוגמה: בתקן הנוכחי של HTML נדרשנו לרשום טרם התחלת המסמך את הקוד הבא:
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
לעומת זאת, בתקן HTML 5 הוחלט לוותר על הקוד הארוך הזה, ובמקומו תוכנס השורה הבאה:
< ! DOCTYPE HTML>
אולם, זהו רק חלק מזערי מהתכונות החדשות שנלוות בתקן זה. למעשה, יש המצביעים על כך שדווקא יסוד הסימון <section> הוא החידוש המוביל של התקן, שהרי באמצעותו ניתן ליצור היררכיה, מעין אילן יוחסין, בתוך המסמך. יש החושבים באופן מוטעה כי <section> הוא תחליף ליסוד <div>, אך אין זה נכון. בפועל, היסוד הזה משמש ליצירת פרקים, התחומים בכותרות עליונות – ולעיתים גם בכותרות תחתונות – וכן ליצירת כל אזור באשר הוא שיש לו אופי מוגדר. לכן יש שהוא מבטל באופן מוחלט את הפקודות <h1>, <h2> ודומיהן, שכן הוא החיוני בהגדרת המבנים באתר. ואם במבנים עסקינן, הרי שנוספו שתי אפשרויות חדשות ליצירת מבנים: הפקודה <header>, להבדיל מהפקודה המוכרת <head>, אחראית על יצירת תיחום לחלק העליון של הדף (או של האזור), בעוד שהפקודה <footer> אחראית על יצירת תיחום לחלק התחתון של הדף (או של האזור). יתר על כן, בתקן זה הוחלט להוסיף פקודה נוספת העונה לשם <nav>. פקודה זו אחראית על ניווט בין קישורים לדפים קיימים באתר. זאת ועוד, לאתרי אינטרנט המכילים תוכן מילולי רב כגון: כתבות, מאמרים, מדורים, מדריכים ועוד, הותאמה במיוחד הפקודה <article>, שבאפשרותה לתחום את התוכן המילולי המסכם באופן כרונולוגי. בדומה לכך, הפקודה <aside> מאפשרת לצרף מידע נוסף בצד הדף, כמו הוספת ביאור, מקרא, מערכת תגובות וכד'. בהקשר זה, יש לציין שהקוד לקידוד התווים בשפה זו הוחלף גם כן. הקוד הבא מהווה דוגמה אפשרית לכך:
<meta charset="UTF-8">
| האתר HWzone מחולק לפי תבנית אפשרית של HTML 5 |
Opera תומכת בhtml5
הדפדפן אופרה עובד לפי הסטנדרטים ומומלץ מאוד לשימוש. מה גם שהוא אחד הדפדפנים המהירים אם לא המהיר ביותר. והוא מעדכן ובונה לתמיכה מלאה בHTML5 כאשר HTML5 תצא בגירסתה הסופית.
נושא מעניין
אבל לא רק שטעית בכמה דברים (HTML הוא לא אחד מהפורמטים לעיצוב אתר אינטרנט… הוא השפה הבסיסית לתקשורת עם הדפדפן ! ואל תגיד לי פלאש…זה לא באמת רלוונטי), אלא גם את הדברים שהצגת, הצגת באופן מחופף.
אין אף דפדפן היום ש"תומך בצורה מלאה בHTML5" מהסיבה הפשוטה שהתקן עוד לא נסגר ! עדיין מוסיפים בו דברים ומשנים בו דברים. אבל רוב הדפדפנים העדכניים תומכים בחלקים נרחבים מHTML5.
בשביל להסביר למה הצגת וידיאו בתוך HTML בפשטות כזאת זה מהפך מטורף צריך להסביר שעד היום כמתכנת היית צריך להפעיל ACTIVE X של נגן מדיה בשביל הוידיאו ופקד של פלאש בשביל השליטה בו ואז היית מגיע למצב שחצי מהמהשתמשים באתר לא יכולים לצפות בוידיאו שלך.
לחילופין היית משתמש בנגן פלאש שצורך משאבים לא קטנים. ובדפים כאלה האתר שלך הוא לא STRICKED(פורמט HTMLי "הדוק" הוא יעיל יותר) אלא שעטנז.