מ-HTML ל-XHTML: הבדלים בין גרסאות בדף

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי
תוכן שנמחק תוכן שנוסף
ארז סגל (שיחה | תרומות)
ארז סגל (שיחה | תרומות)
שורה 40: שורה 40:


===תג xml===
===תג xml===
מסמך XHTML הוא סוג של מסמך XML. לכן מומלץ לשים בו את הכותרת הבאה שמזהה אותו בתור מסמך XML.
מסמך XHTML הוא סוג של מסמך XML. לכן ניתן לשים בו את הכותרת הבאה שמזהה אותו בתור מסמך XML. יחד עם זאת, דפדפנים מסויימים עלולים להתקשות בפירוש התג. חשיבותו הגדולה היא לזהות את קידוד המסמך. ללא התג יניח הדפדפן שהקידוד הוא utf-8. לכן ההמלצה היא לא להשתמש בו בשלב זה אך לשמור את כל המסמכים כ-utf-8.
{{קוד מקור||קוד=
{{קוד מקור||קוד=
<pre>
<pre>
שורה 46: שורה 46:
</pre>
</pre>
}}
}}
כותרת זו, אם היא בשימוש, תהיה השורה הראשונה בקובץ. יתרה מזאת: אין למקם לפניה אף תו, רווח או רווח לבן.
ההמלצה מקבלת משנה תוקף כאשר הקידוד בו המסמך שלכם כתוב אינו utf-8 שהוא ברירת המחדל למסמכי xml. במקרה כזה תחליפו את ערך המאפיין encoding לקידוד המסמך שלכם (למשל: Windows-1255).

כותרת זו, אם היא בשימוש, תהיה השורה הראשונה בקובץ!


===DTD - הגדרת סוג מסמך===
===DTD - הגדרת סוג מסמך===

גרסה מ־02:18, 19 במרץ 2006

פורמט XHTML עתיד להחליף בקרוב את פורמט HTML. הסיבות מגוונות ועליהן נרחיב בהמשך.

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

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

כמו HTML גם XHTML קיים בגרסאות שונות. הגרסה המוצגת כאן היא XHTML 1.0 STRICT. זוהי הגרסה המומלצת ביותר של פורמט XHTML, שדפדפנים עובדים איתה כיום. גירסה 1.1 כבר קיימת אמנם, אך בשל העובדה שיש לשלוח אותה כ-application/xml+xhtml היא אינה נתמכת ב-IE. גירסה 2.0 כבר מתוכננת אך עדיין אינה רשמית, ואינה נתמכת ברוב הדפדפנים.

בין XHTML ל-HTML שינויים מעטים אך חשובים מאוד. אלו הם:

מבנה המסמך

בHTML אין חובת שימוש במבנה מסמך.

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

<b> טקסט </b>


בXHTML חובה להשתמש במבנה אחיד אותו נסביר מיד. להלן אותו מסמך במבנה XHTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">
  <head>
    <title>הטקסט המודגש שלי</title>
  </head>
  <body>
    <p><b> טקסט </b></p>
  </body>
</html>


זה נראה מסובך יותר אבל יש לזה חשיבות רבה. כעת נעבור על כל חלק בנפרד ונלמד על המבנה.

תג xml

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

<?xml version="1.0" encoding="utf-8"?>


כותרת זו, אם היא בשימוש, תהיה השורה הראשונה בקובץ. יתרה מזאת: אין למקם לפניה אף תו, רווח או רווח לבן.

DTD - הגדרת סוג מסמך

הצהרת ה-DTD היא חובה בXHTML, והיא מגדירה באופן חד משמעי את סוג המסמך כ- XHTML 1.0 STRICT. הגדרה זו חוסכת ניחושים מיותרים מהדפדפן וחוסכת זמן עיבוד וזיכרון. ההצהרה אינה חלק מהמסמך ולכן אין לסגור אותה עם לוכסן. ההצהרה תמוקם בראש המסמך לפני תג ה-html ואחרי תג ה-xml אם בשימוש. יש להעתיק את ההצהרה כמו שהיא בלי אף שינוי.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


תג html

לאחר הצהרת סוג המסמך, יופיע תג ה-html. בניגוד ל-HTML ב-XHTML חובה להשתמש בו! בתג ה-html חייב להיות מאפיין ושמו xmlns שמגדיר את מרחב-השם xml וערכו http://www.w3.org/1999/xhtml. (אם לא הבנתם למה, לא חשוב העיקר שהשורה תופיע כמו בדוגמא הבאה).

מומלץ מאוד להגדיר בתג ה-html את השפה העיקרית שבה כתוב המסמך. שפה מגדירים על-ידי המאפיין xml:lang. מאפיין זה מחליף את המאפיין lang שאין להשתמש בו החל מ XHTML 1.1.

דוגמה לתג html במסמך שכתוב בעברית:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">


דוגמה לתג html במסמך שכתוב באנגלית:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


תג title

חובה להשתמש בתג title בתוך התג head ולתת בתוכו ערך.

דוגמה רעה: חסר תג title בתג head.

<head>
</head>


דוגמה רעה: בתג ה-title אין כלום.

<head>
<title></title>
</head>


דוגמה טובה:

<head>
<title>כותרת משמעותית למסמך שמעידה על תוכנו</title>
</head>



אז איך בדיוק בנוי המסמך?

בHTML מותר לוותר על מקטע ה-head למשל, אם אין בו תוכן, כמו גם על תג ה-html וה-body ופשוט לרשום מסמך html ללא אף אחד מהקטעים האלו.

לXHTML יש מבנה מחייב. שעונה על הכללים הבאים:

  • שורת ה-xml היא חובה אם הקידוד שונה מ-utf-8 ומומלצת אם הוא כן.
  • חייבת להופיע שורת ה-doctype אחרי ה-xml או בראש המסמך אם אין xml.
  • אחרי הצהרת ה-doctype יופיע גוש html. (גוש - תג פותח, תג סוגר ומה שבינהם).
  • תג ה-html כולל מאפיין xmlns עם ערך http://www.w3.org/1999/xhtml.
  • מאפיין xml:lang מומלץ מאוד בתג ה-html עם ערך השפה שבה כתוב המסמך.
  • ל-html שני צאצאים בדיוק: head ו- body. בראשון כל הגדרות המסמך, בשני כל התוכן למשתמש.
  • ל-head חייב להיות צאצא title אחד בדיוק, ומותר (ורצוי) שיהיו צאצאים נוספים.
  • לגוש ה-title חייב להיות תוכן.
  • בגוש ה-body אין טקסט אלא רק גושים מסוג מקטע. (כמו p, div ועוד).

להלן דוגמה למבנה כזה. מומלץ בחום להעתיק את המבנה הזה ולהשתמש בו כבסיס לכל מסמכי ה-XHTML שלכם.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
  <head>
    <title>כותרת משמעותית למסמך שמעידה על תוכנו</title>
    ...
  </head>
  <body>
    ...
  </body>
</html>


עוד המלצה: להשתמש בקידוד utf-8 לכל מסמכי ה-XHTML ומסמכים נוספים באינטרנט. אם כך עשיתם, והמסמך שלכם כתוב בעברית, תוכלו פשוט להעתיק את הדוגמה הנ"ל, לשנות בה את הכותרת (גוש ה-title) ולהכניס מידע נוסף רק בין הקטעים המסומנים בשלוש נקודות (...).

למידע נוסף על מבנה המסמך

חובה לסגור תגים

בHTML יש תגים רבים שאין חובה לסגור כמו: td, li ועוד.

ב-XHTML חובה לסגור את כל התגים עם הסוגר המתאים.

דוגמה לHTML עם תגים שאין חובה לסגור אותם:

<table>
  <tr>
    <td>שורה פתוחה - עמודה פתוחה
    <td>עמודה סגורה</td>
  <tr>
    <td> שורה סגורה
    <td> שורה סגורה 
  </tr>
</table> 


אותה דוגמה בXHTML:

<table>
  <tr>
    <td>סגור</td>
    <td>סגור</td>
  </tr>
  <tr>
    <td>סגור</td>
    <td>סגור</td>
  </tr>
</table> 



חובה לסגור גם תגים ריקים

בHTML יש תגים רבים שאין להם תג סוגר (תגים ריקים), כמו למשל br, hr, img, input.

לגבי התגים שאין להם סוגר (תגים ריקים) יש לסגור אותם עם לוכסן רגיל בסוף התג.

תג </ br> במקום <br> תג </ hr> במקום <hr> תג </ "..."=img src> במקום <"..."=img src>

על מנת לשמור על תאימות לאחור עם דפדפנים שאינם מכירים עדיין XHTML יש להוסיף רווח בודד לפני הלוכסן הסוגר בתגיות אלו.


דוגמה לHTML עם תגים ריקים:

<p> 
  טקסט טקסט
  <br>
  <img src="..."> 
  <hr>
</p>
<form>
  <input type="text">
</form>


דוגמה ל-XHTML עם תגים ריקים סגורים.

<p>
  טקסט טקסט 
  <br />
  <img src="..." /> 
  <hr />
</p>
<form>
  <input type="text" />
</form>


תגים חייבים להיות מקוננים היטב

  • גוש - התג הפותח, התג הסוגר ומה שביניהם. למשל בשורה הבאה גוש ה-div מודגש.

Text <div> MyBody </div> Text

בHTML מותר למקטעי תגים לחפוף אחד את השני. אחד מתחיל בתוך השני ומסתיים אחרי סגירתו.

ב-XHTML מקטעי תגים חייבים להיות מקוננים היטב. מקטע תג שמתחיל בתוך מקטע תג אחר, חייב גם להיסגר בתוכו.

דוגמה לHTML עם תגים שאינם מקוננים (חופפים)

<b>
<i>
טקסט
</b>
</i>


אותה דוגמה בXHTML עם תגים מקוננים

<b>
  <i>
    טקסט
  </i>
</b>


כאן ניתן לומר בבירור שהטקסט נמצא בתוך מקטע התגית i שנמצא בתוך מקטע התגית b. זו הכוונה במקונן היטב.

שימוש באותיות קטנות

הבהרה: על פי שורת הקוד הבאה נגדיר: img הוא שם התג. src הוא מאפיין של התג, test.jpg הוא ערך המאפיין src.

 <img src="test.jpg" /> 


בHTML מותר לרשום את שמות התגים והמאפיניים בלי חשיבות לגודל האותיות.

<DiV>
  טקסט 
  <BR>
  <ImG sRc = "...">
</DIV>


בXHTML כל התגים והמאפיינים שלהם חייבים להרשם באותיות קטנות.

<div>
  טקסט 
  <br />
  <img src = "..." />
</div>


כמו כן ב-HTML מוגדרים ערכי מאפיינים קבועים למשל:

<input type="text" />


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

ערכי מאפיינים במרכאות

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

דוגמה: בHTML אין חובה להשתמש במרכאות בחלק מערכי המאפיינים:

 <input size = 50 /> 


דוגמה: בXHTML חובה להשתמש במרכאות בכל ערכי המאפיינים!

 <input size = "50" /> 


אין שימוש במאפיינים ללא ערכים

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

דוגמאות למאפיינים מצומצמים ב-HTML:

<option selected>
<dl compact>


בדוגמה הראשונה, כפי שהסברנו מקודם, option - זהו שם התג, selected זהו מאפיין. למאפיין selected אין ערך. מצב זה אסור ב-XHTML. כיצד נמנעים ממנו? נותנים למאפיין הבולאני ערך השווה לשמו. למשל: למאפיין selected ניתן ערך selected. לא לשכוח לשים את הערך במרכאות!

כך עושים זאת ב-XHTML!

<option selected="selected">
<dl compact="compact">


רשימת הערכים המצומצמים ב-HTML.

  • checked
  • compact
  • declare
  • defer
  • disabled
  • ismap
  • multiple
  • nohref
  • noresize
  • noshade
  • nowrap
  • readonly
  • selected

שימוש ב-id במקום ב-name

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

<input type="text" name="MyInput">


ב-XHTML משתמשים במאפיין id במקום במאפיין name בהבדל אחד וחשוב! אסור לקרוא לשתי תגיות באותו id! זהו מזהה ייחודי.

<input type="text" id="MyInput" />


בתגים הבאים: form, map, a, img אסור להשתמש במאפיין name בכלל.

לגבי שאר התגים, על מנת לשמור על תאימות לאחור מומלץ בשלב זה, להשתמש גם במאפיין id וגם במאפיין name עם ערך זהה.

<input type="text" id="MyInput" name="MyInput" />


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

קריאה נוספת