כמה פעמים שמענו את המושג הזה, בכל מקום אפשרי ברחבי הרשת, בכל קבוצת מעצבים, בכל פוסט בקבוצות מפתחי קוד…. אז מה זה בכלל HTML5 ואיך אנחנו נוכל להשתמש בו לטובתנו?
אנו בפיקסל פרפקט גאים להציג את הראשון מבין סדרה של מדריכים יעילים ושימושיים ללמידת פרונט אנד. בין אם אתם מעצבים שרוצים להרחיב אופקים ולהתחיל ללמוד קוד, ובין אם אתם כבר מפתחי פרונט אנד מנוסים.
אם אתם מעוניינים להשאר בעניינים ולקבל עדכונים ישירות למייל על הפוסטים שיצאו אתם מוזמנים להרשם לניוזלטר שלנו.
הקדמה לHTML5
HTML במקור היא שפת הקוד הבסיסית ביותר לסביבת ה-web.
כל דף אינטרנט תקני שאנו רואים בעצם מורכב מ-html ומרכיבים נוספים שמעשירים את חווית השימוש בו, כמו: Css, Javascript, ועוד.
HTML5 הוא גרסא נוספת ומתקדמת הרבה יותר של html שפיתחו W3C (קהילה בינלאומית המפתחת תקנים במטרה להבטיח את צמיחת הרשת) ובעצם כוללת הרבה כלים חדשים שבאו להקל על עבודת המפתחים, ולהוסיף לנו אפשרויות רבות נוספות שעד היום היו ברות-ביצוע על ידי כלים חיצוניים כמו נגני מוזיקה, סרטוני פלאש, וסרטוני וידאו.
כיום, על מנת שנוכל לשלב אנימציות, סאונד, וידאו ואפקטים נוספים באתרינו נצטרך לשלב בבניית האתר גם שפות נוספות כגון CSS וג'אווה סקריפט, שלעומת הכלים הקודמים לפניהם (פלאש וכדומה) אלו נתמכים כיום ב99.9 מהדפדפנים ומהפלטפורמות בעולם.
מכיוון שהתקן החדש הזה הוא עדיין בשלבי פיתוח תמידיים, ומכיוון שלכל דפדפן יש את המנוע שלו, ישנם כמה אלמנטים שיוצגו לנו שונה בין כל דפדפן ודפדפן. כלומר, הגרסאות החדשות של הדפדפנים כולם תומכים ב-HTML5, אך ישנם משתמשים רבים שעובדים עם דפדפנים ישנים כגון אקספלורר 7 ו-8 שלא תומכים בשפה.
זהו, חפרתי מספיק? בואו נגיע לתכלס. עתה נראה איך בנוי מסמך של HTML5.
מבנה עמוד HTML5 בסיסי
מבנה העמוד של html5 בצורתו הטיפה מורחבת נראה כך:
[html toolbar="false"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pixel Perfect HTML5 Tutorial</title>
<link rel="stylesheet" href="css/master.css">
<script src="js/master.js"></script>
</head>
<body>
Hello Pixel Perfect Users!
</body>
</html>
[/html]
למי שהכיר HTML – אז מה שונה פה? (אם לא ידעתם HTML לפני כן, דלגו על חלק זה)
1. ההכרזה על הDOCTYPE החדש קצרה וקולעת, אין לנו צורך בשורת קוד ענקית, אלא מספיק לנו להשתמש במילה html.
2. תגי הmeta שלנו מתקצרים משמעותית וכעת אנו צריכים להכריז רק על הcharset (קידוד האותיות) בדף, לא עוד content-type, שכעת מזוהה אוטומטית.
3. אין צורך להכריז על type (סוג הסקריפט/לינק) כשאנו רוצים להשתמש בקישור חיצוני לקובץ css או ג'אווה סקריפט.
4. תגיות פנימיות הנכללות בתוך תגית הbody שעליהן נפרט עכשיו.
ולמי שלא הכיר HTML מימיו, הנה הסבר בסיסי על התגיות הראשיות:
1.<!DOCTYPE html> התגית הראשונה בעמוד, שמכריזה לדפדפן באיזה גרסא של html אנו משתמשים.
2.<html> התגיות הכללית בדף , היא זו שתוחמת את כל הקוד, ובכללי אין לשים תגיות כלשהן אחריה, ולפניה התגית היחידה שתופיע היא תגית doctype.
3.<head> זאתי תגית שבה נשים את כותרת העמוד שלנו, תגיות שמפרטות את תוכן העמוד בשביל גוגל, ותגיות קישור לקוד עיצוב (css) ולקוד ג'אווהסקריפט.
4.<body> התגית שבה יימצא כל תוכן הדף שלנו, כל התמונות, טקסטים, מאמרים, וכדומה.
המבנה הבסיסי ביותר נראה כך:
- מבנה html בסיסי
מבנה פנימי ומורחב של HTML5
להלן מבנה של דף HTML5 אשר משקף את התגיות שבהן נשתמש בקוד עצמו.
* הערה נוספת למי שכבר הכיר HTML: כמו שהזכרתי בתחילת הכתבה, דברים נוספים השתנו מלבד התגיות הכלליות של דף html, וביניהן נכללים התגיות הפנימיות לשימוש שאליהן השימוש מבחינת CSS וג'אווהסקריפט אינו שונה, ותוכלו להוסיף להם קלאסים וid באותה הצורה כמו כל תגית.
- דיארגמת דף html5 בסיסי
התגיות המרכזיות הן:
Header
[html]
<header></header>
[/html]
תגית המשמשת אותנו ליצירת החלק העליון של הדף שבדר"כ יכיל את הלוגו, ואת התפריט הראשי.
Section
[html]
<section></section>
[/html]
תגית המשמשת אותנו ליצירת החלקים המרכזיים באתר, יש המתארים אותה כ"תחליף" לתגית הdiv.
Aside
[html]
<aside></aside>
[/html]
תגית המשמשת אותנו ליצירת חלקים צדדים באתר, בדר"כ משתמש להצגת תפריטים נוספים (לא התפריט המרכזי), פרסומות, ותוספים.
Article
[html]
<article></article>
[/html]
תגית המשמשת אותנו ליצירת קטעי מאמר או קטעי תוכן גדולים בדף.
Figure
[html]
<figure></figure>
[/html]
תגית המשמשת אותנו ל"עטיפת" תמונות, קבצי וידאו, דיגארמות חיצוניות בכדי לקשרן לתוכן הדף.
Footer
[html]
<footer></footer>
[/html]
תגית המשמשת אותנו ליצירת החלק התחתון של הדף שבדר"כ כלל יכלול תפריט תחתון, מפת אתר, וזכויות יוצרים.
Nav
[html]
<nav></nav>
[/html]
תגית המשמשת אותנו ליצירת התפריטים באתר.
לסיכום
HTML5 באה במטרה להקל ולעשות סדר בתהליך של בניית אתרים, ולגרום לנו לחיים קלים יותר וחווייתים מבחינת המשתמש.
לסיום, הנה כמה דוגמאות מעניינות שנוצרו על ידי החבר'ה ממיקרוסופט:
http://ie.microsoft.com/testdrive/Default.html
ואם אתם מעוניינים לדעת מה נתמך באיזה דפדפן ומה לא: http://medialoot.com/blog/html5-compendium
אם אהבתם את המדריך, או שיש לכם שאלות/הערות והארות, משהו שציפיתם לקבל במדריך זה ולא קיבלתם,
אני אשמח לשמוע אותן, אז אל תשכחו להשאיר תגובות.
