לדלג לתוכן

מ-HTML ל-XHTML

הוספת קישורים
מתוך ויקיספר, אוסף הספרים והמדריכים החופשי

XHTML - מה זה?

[עריכה]

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

למי מיועד המדריך?

[עריכה]

פורמט 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" dir="rtl">
  <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 שאין להשתמש בו החל מגרסה 1.1. בינתיים, על מנת לקבל תאימות מקסימלית, מומלץ להשתמש בשני המאפיינים עם ערך זהה.

כמו כן מומלץ מאוד להשתמש במאפיין dir - כיוון הטקסט עם הערך rtl למסמכים שנכתבים מימין לשמאל (למשל עברית וערבית) ועם הערך ltr למסמכים שנכתבים משמאל לימין.

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

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


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

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


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

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

<!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" lang="he" xml:lang="he" dir="rtl">
  <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

דפדפנים שאינם תומכים ב-HTML 4 יתקשו לפרש את הצורה המלאה של מאפיינים בולאניים. יחד עם זאת, דפדפנים כאלה כבר אינם נפוצים.

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

[עריכה]

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

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


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

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


בתגים הבאים: a, applet, form, frame, iframe, img, map לא מומלץ להשתמש במאפיין name.

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

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


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

שימוש ב-xml:lang במקום lang

[עריכה]

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

כך עשו זאת פעם: 

<div lang = "en">English Text</div>


כך יש לעשות היום: 

<div xml:lang = "en" lang = "en">English Text</div>


script ו- style

[עריכה]

בתוך תגים אלו ניתן להגדיר סגנונות וסקריפטים. הבעיה היא, שאלו אינם מוגדרים ב-xhtml אלא, למשל, ב-javascript וב-css. בעיה שיכולה להיווצר היא שימוש בתווים &, <. תווים אלו הם תווים מיוחדים ב-xhtml. על מנת למנוע מהדפדפן לפרשם באופן שגוי, יש לתחום את הסגנונות והסקריפטים כך:

בתחילת הסגנון/סקריפט: <![CDATA[

בסופו: ]]>


להלן דוגמה: 

<script type="text/javascript">
<![CDATA[
... סקריפט ...
]]>
</script>


אם הסגנון/סקריפט מכיל ]]> יש לקרוא לסגנון/סקריפט מקובץ חיצוני שהוא כולו סגנון/סקריפט.

בנוסף לכך, לתג script חייבת להיות תכונה type שמגדירה את השפה (ע' בדוגמה למעלה).

ראו גם

[עריכה]

קישורים חיצוניים

[עריכה]
ויקיפדיה ערך בוויקיפדיה: HTML, XHTML

מסמך זה מבוסס על http://www.w3.org/TR/xhtml1/ - המסמך הרשמי מאת w3c שמפרט על XHTML 1.0 המסמך מפורט מאוד.

  • http://www.w3.org/TR/xhtml11/ - המסמך הרשמי מאת w3c שמפרט על XHTML 1.1. המסמך לא מכיל מספיק מידע ספציפי ל-XHTML 1.1 ויותר מידע כללי על XHTML.
  • http://www.w3schools.com/xhtml/ - זהו מדריך לא רע למי שמכיר HTML וכלל לא מכיר את XHTML.
אוחזר מתוך "https://he.wikibooks.org/w/index.php?title=מ-HTML_ל-XHTML&oldid=144178"