מדריך התוכנה של רונן

תיכנות, תוכנה,

מה חדש ב – HTML5

שפת HTML קיימת כבר משנות השישים ומאחר והאינטרנט הפך לשימוש בקרב משתמשים רבים הוחלט על הקמת גוף שנקרא W3C שתפקידו להגדיר שפה אחידה/תקן שתיקרא ע"י כל הדפדפנים, ותהיה למעשה לתקן עבור חברות המפתחות דפדפנים כדוגמת מייקרוסופט, כרום, פיירפוקס ועוד…

הגירסה המלאה האחרונה הנפוצה בשוק הינה HTML4 ששוחררה ב 1999 כדי ליצור אחידות של גירסאות קודמות.

בשנת 2000 שוחררה לראשונה גירסת XHTML שבשונה משפת HTML שמבוסס על תגיות היא מושתת על מבנה XML.

היות ועולם הטכנולוגיה ובפרט האינטרנט התפתחו רבות בשנים האחרונות והפכו ליותר דינאמיים ובעלי מדיה חזקה הוחלט ע"י ארגון W3C ו WHATWG ראשי תיבות של Working Group Web Hypertext Application Technology להגדיר גירסה חדשה שתיקרא HTML5,
להוסיף תגיות חדשות לגרסה 4 שתאפשר גם למי שאינו מפתח במקצועו ליצור דינאמיות ויכולות מראה ותצוגה מתקדמים, מאידך תיצור סטנדרט של היררכית פיגומים שתאפשר גם למתכנת שמקבל קוד HTML להבין היכן מתחילים ומסתיימים מבנים שונים באמצעות שמות התגיות.

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

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

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

השוני והתוספות בין הגרסאות מתבטא ב:

  • תגיות חדשות כמו canvas, audio, video ללא שימוש בנגנים חיצוניים.
  • שיפור ביצועים.
  • טפסים אינטרקטיביים.
  • יכולת שמירת נתונים בדפדפן.
  • התאמת תצוגות למכשירי מובייל.
  • מבנה לוגי של תגים בצורת פיגומים.

דוגמא למבנה לוגי:

<html>
<head></head>
<body>
<header></header>
<nav></nav>
<aside></aside>
<section></section>
<article></article>
<footer></footer>
<body/>
<html/>

heder – מגדיר את החלק העליון של הדף
nav – מגדיר את איזור הניווט (תפריטים) שבכותרת
aside – תפריט צדדי
article – איזור מאמרים
section – בנוי לאיזורים שאינם בהכרח טקסטואליים כמו סרטים, וידאו וכו'..

בצורה כזו קל להבין מהקוד את המיקום של כל אלמנט בדף.

, ,