Get Adobe Flash player
דף הבית כללי XHTML לעומת HTML

מהו ה XHTML

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

שפת XHTML היא סוג של חיבור בין HTML ו-XML. שפת ה HTML נועדה להציג מידע על המסך, שפת ה XML לעומתה, מיועדת לתיאורו. השפה מאפשרת כלים המיועדים להעברת המידע הנמצא בתוך דפי ה-HTML - אל קבצים חיצוניים לצורך עיבוד.

שפת ה XHTML מכילה את כל האלמנטים של HTML, אך צורת הכתיבה תומכת בדרישות ה-XML.

פיתוח שפת ה XHTML נועד לענות על שתי בעיות:

  • עולם האינטרנט התרחב מאוד, וכמות הדפים הכתובה בידי אנשים שאינם אנשי מקצוע בתחום הלך וגדל. כתוצאה מכך נוצרו אתרים רבים מאוד הכוללים קוד HTML שנכתב באופן שאינו תיקני (תגיות לא סגורות, ערכים ללא גרשיים, חוסר בתגי <head> או <body> וכו'). הדבר הביא למצב שבו הדפדפן צריך "לנחש" ולנסות להתאים את עצמו אל האתר, מה שגרם להגדלת נפח הדפדפן עצמו, ודרש משאבים גדולים יותר מהמחשב.

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

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

למשל, הקוד הבא ירוץ באופן תקין על הדפדפן במחשב, אך הוא אינו תקני, ולא בהכרח ירוץ באופן תקין על התקן נייד (סלולארי למשל):

<html>
 <head>
 <title>דוגמא לכתיבה גרועה</title>
 <body>
 <h1> כותרת הדף
</body>

הקוד התקני הוא כמובן:

<html>
<head>
<title>דוגמא לכתיבה נכונה ותקנית</title>
</head>
<body>
<h1> כותרת הדף</h1>
</body>
</html>

כללי ה XHTML

הקוד חייב להיות מקונן בצורה נכונה

את הקוד יש לכתוב כך שתג שנפתח ראשון ייסגר אחרון. שימו לב בדוגמא הבאה להבדלים בין השורות הבאות (סדר פתיחת וסגירת התגים):

<b><i>הטקסט הזה מודגש ונטי</b></i>

<b><i> הטקסט הזה מודגש ונטי </i></b>

הרצת שתי שורות אלו על הדפדפן כקובץ HTML, תפיק תוצאה זהה. אך אם נגדיר לדפדפן (באמצעות ה DTD (ראה בפרק הבא) שהקוד הוא XHTML, הדפדפן יחזיר שגיאה לשורה הראשונה, ויציג את השניה כהלכה.

עקרון זה חל גם על התגים הראשיים. כל עמוד חייב להכיל את שלושת התגים <html>, <head>, <body> והם יכתבו בצורה מסודרת ומקוננת:

<html>
<head> ... </head>
<body> ... </body>
</html>

הקוד חייב להיות באותיות קטנות (lowercase)

שפת XHTML רגישה לאותיות גדולות/קטנות (case-sensitive). כך למשל, התגית <BR> שונה מ-<br>. לפיכך נקבע שכל שמות התגים חייבים להיכתב באותיות קטנות (lowercase).

דוגמא לקוד שגוי:

<BODY>
<P>פסקה שגויה</P>
</BODY>

דוגמא לקוד תיקני:

<body>
<p>פסקה תקינה</p>
</body>

גם מאפייני התגים (התכונות) וערכיהן, חייבים להיות באותיות קטנות (lowercase) למעט כמובן, מקרים בהן הערך חייב להיות באות גדולה.

דוגמא לקוד שגוי (שכאמור עובד בשפת HTML רגילה):

<body bgcolor="YELLOW">
<img WIDTH="250">

דוגמא לקוד תיקני:

<body bgcolor="yellow">
<img  width="250">

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

הערכים של המאפיינים חייבים להיות בתוך מירכאות

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

דוגמא לקוד שגוי:

<img width=250>

דוגמא לקוד תיקני:

<img width="250">

כל המאפיינים חייבים להיות בתבנית: מאפיין="ערך"

תכונות שלא חייבו ערך, אינן תקניות יותר. למשל כתיבת ההוראה לסימון תיבת סימון כברירת מחדל - בדרך הבאה, אינה תקנית:

<input type="checkbox" checked>

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

<input type="checkbox" checked="checked">
<option selected="selected">
<frame noresize="noresize">

כל תגית חייבת להיסגר

כל התגיות ב-XHTML חייבות להיסגר.

דוגמא לקוד שגוי:

<p>This is a paragraph
<p>This is another paragraph

דוגמא לקוד תיקני:

<p>This is a paragraph</p> 
<p>This is another paragraph</p>

ישנן תגיות כמו "<img>, <hr> ו- <br> שאין להם תג סוגר. גם תגיות אלו חייבות להיסגר ע"י </.

לדוגמא: כאן תהיה תמונה מתחת לקו אופקי

<hr />
<br />
<img src = "happy.gif" alt = "פרצוף חייכן" />

הערה: הרווח שבא לפני הלוכסן ("/") הכרחי על מנת שהדפדפנים שאינם תומכים ב-XHTML לא יחזירו שגיאה (כשיש רווח הם פשוט לא יבינו מה הוא ה-"/" - ויתעלמו).

המאפיין ID מחליף את המאפיין NAME

בשפת HTML זיהוי התגים היה נעשה ע"י NAME ובמקרים מסוימים ע"י ID. ב-XHTML כולם מקבלים שמות עם המאפיין ID. ב-XHTML המאפיין NAME אינו קיים עוד.

המאפיין "LANG"

ב-XHTML המאפיין lang קיים כמעט בכל התגיות. אם אתם משתמשים במאפיין lang, אתם חייבים להוסיף את המאפיין xml:lang. למשל:

<div lang="he" xml:lang="he">טקסט עברי</div>
אל השיעור הקודם אל השיעור הבא