23-02-13, 09:31
|
# 1 |
|
חבר בקהילה
|
HTML5 הקדמה מדריך נחמד שמצאתי..
השינויים הקטנים מ - XHTML ל- HTML5
אם אתה מפתח אתרים, אתה אמור לדעת ש- HTML זו השפה שנועדה לשם בניית אתרי אינטרנט. XHTML באה אחרי ה HTML. ה XHTML הינו קוד נקי יותר, גרסה מחמירה יותר מ- HTML. אבל כשאתה כותב מסמך ב- XHTML עליך לשים לב מקרוב ולעקוב אחר החוקים כמו שצריך. לפניך מספר דוגמאות על חוקי ה XHTML: * כל מסמכי XHTML חייבים ב'תצהיר' סוג המסמך (DOCTYPE). * כל התגים ב XHTML והתכונות יצטרכו להכתב באותיות קטנות. * כל הערכים של התכונות ב XHTML ייתחמו בתגי ציטוט (גרשיים) * כל התגים ב XHTML יצטרכו להיות מקוננים כנדרש. עד כה מרבית מפתחי אינטרנט בשפת ה XHTML, חשבו כי השפה הזו קלה יותר, מפני שהחוקים פשוטים להבנה, הקוד נקי, רבים מאיתנו הצליח להקים אתר קל ונעים למראה שלא דורש המון ידע. עד שהגיע ה - HTML5. שמענו אנשים שמתלחששים על זה, אבל לא הרגשנו בצורך לשנות את סגנון החיים שלנו. ב- 2012 התחלנו לראות את המעבר. אנשים כבר לא מתלחששים על HTML5 יותר. משדרגים את אתר האינטרנט לשפה החדשה. ועכשיו כל האתרים משתמשים בטכנולוגיה מודרנית שכוללת תמיכה ב Internet Explorer 9 ובמרבית הדפדפנים. 2012 בהחלט הייתה כשנה המבטיחה להוציא את ה HTML5! בואו נראה עד כמה הדברים השתנו מ XHTML ל - Html5. אני מוכן, ואתם? =========== חדשות טובות =========== חדשות טובות לכולנו: HTML5 פשוט יותר מ XHTML =========== חדשות טובות =========== בואו נראה מה קורה בחלק העליון של הדף (איזור ה- head). 1. ב HTML 5 יש רק תצהיר אחד בשם <!doctype>, ומאוד קל להגדיר אותו על ה HTML לדוגמא: <!DOCYTYPE html> 2. הבא אחרי הקוד הזה הוא כמובן תג ה- <html> כך שאתם יכולים להשתמש בו בצורה פשוטה יותר ואם אתם רוצים להגדיר את תכונת השפה זה ייראה כך: <html lang="en"> 3. הבאים בתור הם ה <head> וה- <title>. אך אל תצפו לכלום כאן, כי אין שינויים בהם. 4. תג ה <meta> ב HTML5 פשוט יותר משנכתב ב - XHTML. הוסיפו אך ורק את "שפת הקידוד" שמתאימה ולא שום דבר נוסף. תוכלו פשוט לכתוב את הסוג: <meta charset=utf-8> או <meta charset=utf-8 /> 5. אין צורך לכלול את סוג התכונה לשימוש בסקריפטים או בגליונות צבעים (css, scripts). 5. 1. התג הראשון הוא <script> תוכלו לכתוב פשוט את הסקריפט בצורה הבאה: <script src="folder/test.js"></script> 5. 2. הבא בתור הוא תג הקישור ה - <link> שאחראי לכתיבת קובץ הגיליון של הצבעים והוא: <link rel="stylesheet" href="folder/test.css"> או שתוכלו לכתוב אותו גם עם אלכסון לפני תג הסגירה. * סעיף 5.2. מתייחס לתג הסגירה / והתג ייראה ככה: <link rel="stylesheet" href="folder/test.css" /> שמתם לב לאלכסון שהוספנו? זה תקני! *** ב HTML5, תגי הסלאש הם אופציונאלים - לא חובה להוסיפם! *** בתוך איזור גוף האתר (ה <body>) נמצא הדף עצמו של אתר האינטרנט שלכם, יש דברים שפשוט נותרו כפי שהם. השימוש ב- <h1>, <div>, <span>, <p>, <ul>, <a> עדיין קיימים וחלק מ- HTML5. אלמנטים חדשים שנוספו לשפה - הבסיסיים: HTML5 הביא איתו מספר אלמנטים ספציפיים לתוכן, כמו: * <header> * <nav> * <section> * <article> * <aside> * <footer> חשוב לזכור: כשאנחנו מחליטים להוסיף אלמנטים חדשים ב- HTML5, עלינו לזכור כי אנחנו צריכים גם להוסיף גם את האלמנטים הישנים של העיצוב על מנת 'לעזור' לדפדפנים ישנים להבין איך להציג נכון את האלמנטים החדשים האלה בצורה הבאה: קוד:
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
לצערנו הדפדפנים הישנים מ IE8 לא תומכים באלמנטים החדשים ששפת ה HTML5 מביאה איתה. אבל כדי לגרום לתגים הללו לעבוד גם על גבי ה IE7 וה- IE8 עלינו לכלול סקריפטים בג'אווה סקריפט שנקראים HTMLshiv שניתן לקחת מה Google Code ולשים על בהחלק העליון של המסמך שלך. קוד:
<--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]--> למידע נוסף על HTMLSHIV: HTML5shiv ---------------------------------------------------- סקירה מהירה ובדיקה של קוד ה HTML5 ---------------------------------------------------- קוד:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf8" /> <title>בדיקת אתר אינטרנט חדש בשפת HTML5</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> <![endif]--> <link rel="stylesheet" href="test.css" /> </head> <body> בדיקת אתר אינטרנט חדש על HTML5 </body> </html> * ב HTML5 , אתה לא צריך למקם את סימני הציטוט סביב ערכי התכונות אם אין רווחים * ב XHTML, כשאתה משתמש בתג סגירה בודד כמו <br/> אתה נדרש להוסיף אלכסון באלמנט על מנת שיהיה תקני עבור ה- XHTML. ב HTML5 האלכסון הוא אופציה ולא חובה. * HTML5 כולל תכונות חדשות שמביאות למבנה טוב יותר, נקי יותר, ומוכן לתוכן מדיה (סרטונים) בצורה ברורה יותר. * מרבית האתרים המודרנים שמציגים סרטונים באתרים שלהם, משתמשים ב HTML5 בתור הסטנדרט כדי להציגם. אנשים לא משתמשים יותר בהתקן ה Flash לשם הרצת סרטונים ותוכן אודיו (שירים). * ישנם מספר תגים שעבר זמנם ב HTML5 כגון ה: --- <acronym> --- <big> --- <dd> --- <frame> --- <strike> --- וכדומה.. HTML5 לא אומר לך מה לעשות, אבל מציע לך דרך פשוטה יותר לעבוד איתו. HTML5 מותאמת גם לצרכים הישנים של הדפדפנים השונים - HTML5 תוכננה כך שתתאים גם לעבר הרחוק, ותתאים גם ל- HTML4 וגם לסגנונות הקוד של ה- XHTML. איזור הקלה זאת! אנחנו עדיין יכולים לשמור על הקוד שלנו נקי ומאורגן. ואנחנו יכולים להשתמש בחוקים הנוקשים של ה XHTML כמו שאנחנו אוהבים, בזמן שאנחנו מוסיפים גם אלמנטים חדשים לאתרי האינטרנט שלנו! ------------------------------------- סמנטיקות דפי האינטרנט: ------------------------------------- האלמנטים החדשים ב- HTML5 עוזרים לנו לייצר סמנטיקה נוספת בדפים שלנו. לסמנטיקת דפי האינטרנט יש תגים שמשתמשים בהם-כראוי למשמעות הנכונה שלהם. מה שהופך את זה קל יותר עבור מנועי החיפוש וקל יותר לניווט בעיני המבקרים באתר האינטרנט שלנו. בנוסף, HTML5 מאפשרת לנו ליצור דברים חדשים כמו לצייר ציורים גראפיים על גבי המסך. אנחנו לא נכנס לזה, פירטנו בקצרה למעלה על הדברים הקטנים שיש ב HTML5, יש עוד המון דברים שלא הוזכרו כאן. אז בואו נתחיל בבסיס (מרמת הבנת החומר הראשוני). המדריך הבא יעסוק בצעד-אחר-צעד לטפסים שהשתנו מ- XHTML ל- HTML5 - טופסי יצירת קשר.
__________________
- אחסון אתרים בחינם ואמין - מפתח אתרי אינטרנט, משפר תבניות WordPress מעצב אתרי אינטרנט וסטודנט להנדסת חשמל. |
|
|
23-02-13, 11:23
|
# 3 |
|
חבר בקהילה
|
טעויות כמו? אני לא כתבתי את המדריך אבל מותר להפיץ אותו - אשמח לשמוע אולי נכתוב כאן מדריך שיסביר בצורה 'יותר טובה' את כל המסר "הכללי".
__________________
- אחסון אתרים בחינם ואמין - מפתח אתרי אינטרנט, משפר תבניות WordPress מעצב אתרי אינטרנט וסטודנט להנדסת חשמל. |
|
|
|
23-02-13, 12:06
|
# 5 |
|
חבר בקהילה
|
שיהיה. מוזמן מי שרוצה לשדרג את המדריך הזה. שאלה יהיו כל הצרות שלנו בחיים.
__________________
- אחסון אתרים בחינם ואמין - מפתח אתרי אינטרנט, משפר תבניות WordPress מעצב אתרי אינטרנט וסטודנט להנדסת חשמל. |
|
|
|
23-02-13, 18:08
|
# 6 |
|
חבר בקהילה
|
תודה רבה עזר לי
 |
|
|
|
24-02-13, 07:59
|
# 7 |
|
חבר וותיק
|
לדעתי אחלה מדריך שיתאים כאן למתחילים
כל הכבוד |
|
|
|
24-02-13, 21:06
|
# 8 |
|
חבר חדש
|
מדריך מעולה! כל הכבוד !
|
|
|
 |
| חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים) | |
| כלים לאשכול | |
| תצורת הצגה | |
|
|
עבור למצב קווי
