HTML5 הינה שפה לבניית אתרים באינטרנט בטכנולוגיה מהמתקדמות בעולם האינטרנט ופיתוח אתרים ואפליקציות ביעילות ובמהירות והיא מלאה בהפתעות ומציע מגוון רחב של פתרונות מודרניים לפיתוח אתרים, ובניהם: הצגת סרטוני וידאו ומוסיקה, אפקטים, תלת מימד, אנימציות מובנת, ציור על קאנבאס Canvas ועוד. כל האלמנטים כבר קיימים בדפדפנים המקובלים ואין צורך בשימוש או התקנת תוספים ומודלים לשרת או למחשב אלה הכל מתבצע באופן פשוט, קל ונוח.
| שנת ההשקה | גרסה |
| 1989 | Tim Berners-Lee |
| 1991 | HTML |
| 1993 | +HTML |
| 1995 | HTML 2.0 |
| 1997 | HTML 3.2 |
| 1999 | HTML 4.01 |
| 2000 | XHTML |
| 2012 | HTML5 |
Hyper Text Markup Language הינה שפה עבור בניית אתרים באינטרנט שפותחה בשנות ה- 90, המעבירה הנחיות לדפדפנים באמצעות תגיות לאופן הצגת הנתונים בדפדפן, כגון: הצגת תמונות, הצגת סרטונים, טקסטים, טבלאות ועוד. HTML הינה שפה בסיסית לפיתוח אתרים.
התקן הנוכחי של היום לפיתוח ובניית אתרים הינו HTML5 (נכון לחודש דצמבר 2012) ונתמכת ברוב הדפדפנים, באמצעות HTML5 אנחנו יכולים לפתח אתר אינטרנט ידידותי למשתמש, נוח, עיצוב מרהיב, התאמת האתר לדרישות קידום אתרים, קוד נקי ומסודר המובן לכל מתכנת מתחיל.
למעשה HTML5 הינה שפה המאחדת את שלושת השפות הבאות (HTML + CSS + JAVASCRIPT) לשפה אחת עשירה המכילה פתרונות להצגת סרטוני וידיאו, אפקטים מרהיבים, אנימציה מובנת עם Canvas ועוד.
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8" />
<title>דוגמא <link href="css/style.css" rel="stylesheet" />
</head>
<body>
דוגמא לעמוד בסיסי ב-HTML5
</body>
</html>
המאפיין העיקרי שאנחנו חייבים להוסיף לכל דף HTML הוא השורה הבא:
<!DOCTYPE html>
המורה לדפדפנים שדף זה מכיל ומוגדר כדף HTML5 וישנם אלמנטים ואנימציות שיופעלו בעת הכניסה לדף האינטרנט.
התגית הבאה מציינת לדפדפנים את קידוד הדף:
<meta charset="utf-8" />
שהיא הרבה יותר פשוטה ליישום מהגרסאות הקומות של HTML.
התגית הבאה מציינת וכוללת הפניה למשאבים חיצוניים לטעינת קבצי עיצוב וגרפיקה כגון: CSS, JS.
<article> – בתוך תגית זו אנחנו נאחסן את גוף המאמר, התוכן הטקסטואלי של האתר והטקסט המרכזי.
<aside> – תגית זו נועדה לצורך יצירת תפריט צדדי (תפריט ימני או תפריט שמאלי) להוספת ניווט או פרסומות או ווידג'טים.
<bdi> – תגית המוגדרת להיות שונה מברירת המחדל של הטקסט.
<details> – תגית זו תספק פרטים נוספים לגולש, רק במידה והגולש החליט לקבל פרטים נוספים יוכל ללחוץ עליו ויפתח חלונית עם כל הפרטים.
דוגמא לכך לתגית סגורה:
<details>טקסט טקסט טקסט …</details>
דוגמא לכך לתגית פתוחה:
<details open="open">טקסט טקסט טקסט …</details>
<dialog> – תגית זו נועדה להגדרת דו-שיח או חלון שיחה.
<figcaption> – תגית זו נועדה להדגשת הכותרת, והיא תופיע בתוך התגית הזאת: figure. דוגמא לכך:
<figure>
<figcaption>כותרת לדוגמא עבור התמונה</figcaption> <img src=" example.jpg" />
</figure>
<figure> – תגית זו נועדה לעטיפת תמונה, גרף, קבצי וידיאו, דיאגרמות ועוד, באמצעות תגית זו אנחנו נוכל להגדיר מאפיינים לתמונות, גרפים ולכל אלמנט.
<footer> – תגית זו נועדה לחלק התחתון של האתר הנקרא footer, ובדרך כלל נועדה להוספת תפריטי ניווט, קישורים, זכויות יוצרים, תקנון האתר, קרדיטים ועוד.
<header> – בתוך תגית זו אנחנו נאחסן את הלוגו ונבנה את התפריט ניווט העליון הראשי של האתר.
<hgroup> – בתוך תגית זו אנחנו נוכל לכלול מספר כותרות נוספות, למשל הוספת תגיות:h2, h3 וכו'
<main> – תגית זו מגדירה את התוכן היעקרי והמרכזי של המאמר/המסמך.
<mark> – תגית זו נועדה להדגשת מילה או ביטויי או פסקת טקסט, ואנחנו נעטוף את המילה בתוך התגית mark. דוגמא לכך:
<p>מדריך בניית אתרים ב- <mark>HTML5</mark> – מבוא</p>
<meter> – תגית זו מציינת על התקדמות בשלבים או בפרקי פרקים, לדוגמא אם אנחנו מבצעים הרשמה לאתר, ובטופס הרשמה בשלב 1 נמלא רק את השם הפרטי והמשפחה ובשלב 2 נמלא את הכתובות ועיר. דוגמא לכך:
<meter max="10" min="1">שלבי ההתקדמות, אתה נמצא בשלב 4 מתוך 10</meter>
<nav> – תגית זו נועדה ליצירת תפריטי ניווט באתר.
<progress> – תגית זו מציינת על התקדמות לפי אחוזים, לדוגמא אם מעלים קובץ לשרת/אתר אז הוא מציין לנו כמה אחוזים הועלו עד עכשיו. דוגמא לכך:
<progress value="55" max="100">
<strong>התקדמות של 55% מתוך 100%</strong>
</progress>
<section> – תגית המיועדת להגדרת חלקים עיקריים, לדוגמא: בלוקים שהם תחליף ל-DIV, תיבות טקסט, תמונה, פסקאות ועוד.
<time> – באמצעות תג זה נגדיר את הצגת התאריך והשעה. דוגמא לכך:
<p>שעות הפעילות שלנו החל משעה: <time>08:00</time> ועד השעה <time>17:00</time></p>
<wbr> – תגית זו מציין לדפדפן לשבור שורה במידת הצורך, הוא אינו מחליף את התג הזה:<br /> אלה במקרה שיש צורך לשבור את המשפט אז המשפט ירד לשורה חדשה, ואם אין צורך בירידת שורה והמשפט נכנס בשורה תקינה אז הדפדפן לא יתייחס לתג הזה.
כיום רוב אתרי האינטרנט החדשים נבנים בטכנולוגיית HTML5 המאפשרת להתאים את אתר האינטרנט שלנו כאפליקציה וזאת על מנת לייעל ולהציע לגולש חווית גלישה מהירה ונוחה לשימוש.
באמצעות פיתוח אתרים ב- HTML5 ניתן לבנות כל אתר אינטרנט שיהיה מותאם רספונסיבית לכל הדפדפנים ולכל סוגי המסכים, החל ממסכי מחשב, מסכי אייפון / אייפד / טאבלט ולכל סמארטפון, וללא צורך בפיתוח אפליקציות מותאמות אישית לפי סוגי המכשירים (אפל, אנדרואיד וכו').
HTML5 מאפשר לנו לבנות אתר אינטרנט ביעילות ובקלות וללא צורך ושימוש בקבצי פלאש (FLASH) אשר אינם ידידותיים למנועי החיפוש ואינם ניתנים לקריאה על ידם. באמצעות פיתוח ובניית אתרים ב- HTML5 נוכל להתאים את אתרי האינטרנט שלנו לדרישות קידום אתרים בגוגל, והנגשתם למנועי החיפוש.
HTML5 מאפשרת לנו לבנות אתר אינטרנט בסטנדרים גבוהים, הכוללת חווית גלישה מהירה, נוחות הניווט, שימוש באלמנטים חדשים ומתקדמים, שימוש בטכנולוגיה מתקדמת המותאמת לדרישות גוגל ומקדמי אתרים.
לקבלת הצעת מחיר עבור בניית אתרים רספונסיביים המותאמים לדרישות קידום אתרים וגוגל בטכנולוגיה מהמתקדמות בעולם בפיתוח אתרים לחצו כאן או התקשרו עכשיו ל- 0585-900-500.