html 5 הדרכה

נתחיל בתזכורת לגרסת html4 הקיימת באתר ההדרכה שלנו שם תמצאו את התגים הבסיסיים וכיצד משתמשים בהם. כמה אלמנטים מהגרסה הישנה יוצאים משימוש או משנים את יעודם בגרסת ה5 אך לפיw3c שהם המכתיבים את הסטנדרטים ברשת – יש לנו מספיק זמן להפנים ועדיין להשתמש בגרסת ה 4 , במקרה הקרוב יותר עד שנת 2014 ובהכרזה האחרונה מבטיחים סיום מוחלט של בניית התקן עד לשנת 2022. יש למה לצפות..:)

מכיוון שכמובן לא אני כותבת התקן ולא אני המפרשת אותו.. אני מביאה לכם את הפירוש המעשי שלי הלקוח מהמקורות הבאים-

הדרכה זו יוצאת מההנחה שאת התגים הבסיסיים למדתם ואתם יודעים. מכאן נמשיך ל-:

  1. תגי המסמך והגדרת הדף
  2. התגים החדשים ומה יעודם.
  3. שימוש נכון בסגנונות
  4. טיפול במדיות השונות.
  5. נענה על שאלות הבאות מכם.

נתחיל..

התגים החדשים ב html5 – שימו לב – יש לעקוב אחר השינויים בהגדרות ובהתפתחות באתר הרשמי.

1 – המסמך

התג הפותח של המסמך המודע על גרסת השפה יהיה כעת רק – <!doctype html> שימו לב לסימן הקריאה שבסוגריים המשולשים.

*- תג פותח לדף יהיה <html> כרגיל הכל התקצר ונהיה פשוט יותר.

2- התגים החדשים וייעודם

התגים העקריים שנוספו קשורים לתפיסת סידור וארגון הדף. (זה ניקרא – סמנטיקה) המחשבה של סדר בדף טובה ונכונה מכמה בחינות.
* סמנטיקה טובה מפרידה בין עיצוב לתוכן, שמה את התוכן בצורה מאורגנת בדף, מקלה על משקלו באופן כללי- ומאפשרת טעינה מהירה של הדף לדפדפנים.
* הקלה בקריאת המסמך על ידי תוכנות קוראות מסך למוגבלויות שונות.
*

התגים הבסיסיים של מבנה הדף נישארים.. כלאמר – מבנה דף בסיסי יראה כך

<!doctype html>
< html>
< head>
< meta charset="UTF-8">
< title>Untitled Document</title>
< /head>

<body>
< /body>
< /html>

ואז נוספו התגים הבאים כדי לסדר טוב יותר את המסמך-

  1. הפותח את המסמך בחלק הבודי יהיה ההדר-
    <header>
    בהדר יכלל כל המידע השייך להכרות עם הנושא שלנו. מותר לכלול בהדר גרפיקה וטקסט, הדרים המוכרים לנו כ h1-6 ואפילו טבלת מידע על העסק שלנו

    <header>
        <h1>HTML5Doctor.com</h1>
</header>
  2. <h1-6> אילו ההדרים אותם אנו מכירים, גודלם בהתאם לחשיבותם ומכאן ש1 הוא הגדול והחשוב יותר והיתר בסדר יורד.
    עד כה טוב היה לשים h1 פעם אחת לדף כדי להציג את כותרת הדף החשובה. ואחריה את תתי הכותרות בהתאם.
    כעת כשהדף מחולק לסקשנים ולארטיקלים וכל אחד הוא נושא בפני עצמו – יש לתת כותרת h1-6 לכל חלק בניפרד ואין זה נחשב לכפילות או הורדת הערך של הכותרות. להפך. הסמנטיקה הטובה היא לתת לכל מחלקה את הכותרת החשובה שלה. בתנאי שאכן חילקנו את הדף למחלקות ולארטיקלים.
    אין צורך לתת דוגמה – ובכל זאת..
    <body>
    < h1>Let's call it a draw(ing surface)</h1>
    < section>
    < h1>Diving in</h1>
    < /section>
    < section>
    < h1>Simple shapes</h1>
    < /section>
    < section>
    < h1>Canvas coordinates</h1>
    < section>
    < h1>Canvas coordinates diagram</h1>
    < /section>
    < /section>
    < section>
    < h1>Paths</h1>
    < /section>
    < /body>
  3. <hgroup> משמש לצרף יחד לקבוצה כמה כותרות יחד באותו הסקשן.

    <hgroup>
    < h1>כותרת חשובה ראשונה</h1>
    < h2>כותרת חשובה שניה – מחוברת אליה בגרופ</h2>

    </hgroup>

  4. <nav> זהו החלק השמור לתפריט האתר.
    ההגדרה אומרת שבחלק זה יופיעו קישורים המובילים להתניידות באתר. הכוונה כמובן לתפריט ולא סתם מקבץ קישורים.
    <nav>
        <ul>
                        <li>Nav Link</li>
                        <li>Nav Link</li>

                        <li>Nav Link</li>
        <ul>
</nav>
  5. <article>
    הכוונה אינה לכתיבת מאמר אלא לחלק שבו יש תוכן עצמאי. התוכן העצמאי יכול להכיל :
    טופס לשליחה, מאמר ממגזין,פוסט בבלוג או כל חלק תוכן עצמאי. תג הarticle יכול להיות מקונן (שוכן בתוך) חלק אחר של הדף, כמו למשל sction ואז הוא מהווה חלק עצמאי של אותו החלק אך חייב להיות קשור אליו רעיונית. (ראה הסבר במקור)
    <article>
        <header>
                <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
                by <a href="http://example.com/">שם כותב המאמר</a></h4>

                <time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
        </header>
        <p>
כאן כל התוכן והמאמר באריכות ובפירוט.</p>
</article>
  6. <section> אלמנט זה מציין חלק מובנה בדף, בנוי מנושא שלם הכולל כותרת משלו, תוכן ואפילו פוטר משלו.
    באתרים דף הבית למשל יכול להכיל כמה סקשנים שכל אחד מייצג תחום עיסוק אחר של העסק.
    בקןד נראה את המבנה כך
    <section>
<h1>Level 1</h1>
        <section>

        <h1>Level 2</h1>
                <section>
                <h1>Level 3</h1>
                </section>
        </section>

</section>
  7. <footer> הוא החותם את המסמך ומכיל בתוכו את כל מה שתרצו לשים כסיומת. בדרך כלל פרטי התקשרות קצרים וזכויות יוצרים.
  8. <aside>מייצג חלק בדף הקשור לתוכן הדף אך יכול להחשב ניפרד ממנו. חלק זה בדרך כלל היא הבר הצדדי.
    <aside>
        <h2>Blogroll</h2>
        <ul>
                        <li><a href="#">My Friend</a></li>

                        <li><a href="#">My Other Friend</a></li>
                        <li><a href="#">My Best Friend</a></li>
        </ul>

</aside>
או ראו בקישור הזה
  9. <abbr> מייצג קיצור- ראשי תיבות
    מגיע עם title בו נרשום את הצירוף הארוך וזה יראה במעבר עכבר על ראשי התיבות המסומנות בדפדפנים אחדים בקו מנוקד תחתיו.
    The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> started working on HTML5 in 2004.

    =
    The WHATWG started working on HTML5 in 2004.
    abbr-tag

  10. <audio> מייצג קול או הזרמת צלילים.
    הקבצים הניתמכים על ידי דפדפנים הם-

    Supported audio codecs:

    • Chrome 3+ supports .ogg and .wav
    • Firefox 3.5+ supports .ogg and .wav
    • Opera 10.5+ supports .ogg and .wav
    • Safari 4+ supports .mp3 and .wav
    <audio src="music.oga" controls>
        <a href="music.oga">Download song</a>

</audio>
  11. <bdo> משמש להוראת הצגת כיוון כתיבה במקומי, למשל בתוך השורה או בתוך קטע בשפה העברית, כשדרוש קטע באנגלית יש להפוך את כיוון הקריאה – אז יש להשתמש בפקודה זו.
    <p><bdo dir="rtl">Don't cheat by reading this in a mirror!</bdo></p>
  12. <figure> משמש להצגת אלמנט – תמונה בדרך-כלל כשהמשכה יש טקסט נלווה כהסבר.
    הטקסט הוא כהערה או פירוש לאלמנט אליו הוא מצורף. שני החלקים, האלמנט והמצורף אליו מקובצים יחד לכאלמנט אחד אותו אפשר להזיז לצד אחר במסמך או למסמך אחר ללא הפרעה בתוכן הדף הזורם.
    <figure>
    < img … > (or video, table etc)
    < figcaption>A rabid unicorn goring a fairy.</figcaption>
    < /figure>
  13. <video> משמש להצגת וידיאו עם נגן חדש מובנה, התג יכול להכיל בתוכו עוד מידע על הסרט.
    <video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download song</a>
</video>

 

הנה חלק מרשימה עליה דיברתי- תוכלו להקיש על תג ולקבל את איפיונו ושימושו- באנגלית.

Elements introduced in HTML5

There has been a few elements introduced in HTML5. Some of them were imported from XHTML2, others from large statistical surveys on made by Google, Opera and other people. The analysis of class names and id names helped defining what were the most common semantic patterns. These new elements are not yet completely imported in all browsers at this time.

Facebook Google-plus
מתלבט? בוא/י לדבר איתי בווטסאפ?