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

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


==ערכי מאפיינים במרכאות==
==ערכי מאפיינים במרכאות==
הבהרה: על פי שורת הקוד הבאה נגדיר: img הוא שם התגית. src הוא מאפיין של התגית, test.jpg הוא ערך המאפיין src.
הבהרה: על פי שורת הקוד הבאה נגדיר: img הוא שם התג. src הוא מאפיין של התג, test.jpg הוא ערך המאפיין src.
{{קוד מקור||קוד=<pre> <img src="test.jpg" /> </pre>}}
{{קוד מקור||קוד=<pre> <img src="test.jpg" /> </pre>}}
ערכי המאפיינים חייבים להיות בתוך מרכאות.
ערכי המאפיינים חייבים להיות בתוך מרכאות.

גרסה מ־05:33, 18 במרץ 2006

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

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

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

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

אם אתה מכיר גרסאות קודמות של XHTML או בקיא במונחים טכניים תוכל לקרוא בקיצור על מה ההבדל בין XHTML 1.1 לגרסאות הקודמות שלו?

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

מבנה המסמך

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

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

<b> טקסט </b>


בXHTML חובה להשתמש במבנה אחיד אותו נסביר מיד. להלן אותו מסמך במבנה 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>
    <b> טקסט </b>
  </body>
</html>


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

תג xml

מסמך XHTML הוא סוג של מסמך XML. לכן מומלץ לשים בו את הכותרת הבאה שמזהה אותו בתור מסמך XML.

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


ההמלצה מקבלת משנה תוקף כאשר הקידוד בו המסמך שלכם כתוב אינו utf-8 שהוא ברירת המחדל למסמכי xml. במקרה כזה תחליפו את ערך המאפיין encoding לקידוד המסמך שלכם (למשל: Windows-1255).

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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. זו הכוונה במקונן היטב.

שימוש באותיות קטנות בשמות תגים ובמאפייני תגים

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

<BoDy>
  טקסט 
  <BR>
  <ImG sRc = "...">
</BODY>


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

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


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

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

 <img src="test.jpg" /> 


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

דוגמה: ב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" />


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

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


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