מבוא לתקנים ברשת האינטרנט

מה הם תקנים ומדוע אנו צריכים אותם?

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

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

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

הגרסאות האחרונות של שני הדפדפנים הפופולריים ביותר כיום - אינטרנט אקספלורר של מיקרוסופט ודפדפן הקוד הפתוח מוזילה, שמהווה את הבסיס לנטסקייפ - תומכות ברוב התקנים הציבוריים הקיימים. בנוסף, בדפדפן אקספלורר של מיקרוסופט תמצאו תמיכה בהרבה תקנים פרטיים של מיקרוסופט, שאינם נתמכים על-ידי הדפדפן מוזילה, וגם לא על-ידי דפדפנים המותקנים במחשבי כף-יד או פלאפונים למשל. לצורך העניין, נגדיר תקנים ציבוריים ככאלה שנוסחו על-ידי גוף כלל-עולמי, כמו W3C, ותקנים פרטיים ככאלה שנוסחו על-ידי חברה או גוף יחיד כמו מיקרוסופט, ומופיעים רק בתוכנות נבחרות. שימוש בתקנים הפרטיים של מיקרוסופט מגביל את הגישה לאתר למשתמשי אקספלורר בלבד, שהם נכון לחודש אוגוסט 2004 כ-80% מכלל המשתמשים בעולם. מספר זה נמצא במגמת ירידה: רק לפני כמה חודשים נתח השוק של אקספלורר היה כ-90% מכלל המשתמשים. הגבלה זו מונעת ממשתמשי דפדפנים אחרים כמוזילה ואופרה, ומערכות הפעלה שאינן של מיקרוסופט כמו לינוקס ופאלם, לראות את האתרים. לרוב, העיצוב לא יוצג כיאות, תמונות וטבלאות לא יופיעו במקום או בסדר הנכון, טקסטים ייעלמו או יעוצבו בצורה שונה וכו'. לעתים האתר כולו או חלקים מסוימים באתר כלל לא יופיעו בדפדפן שאינו אקספלורר. מאחר שהתחזיות האחרונות מנבאות כי בתחילת 2006 נתח השוק של אינטרנט אקספלורר ירד ל-50% או פחות, יש להקדיש חשיבות רבה לעמידה של האתר בתקנים הציבוריים, שנגישים לכלל מערכות ההפעלה והדפדפנים, ובהם בלבד.

אלו תקנים קיימים כיום ברשת הכלל-עולמית?

HTML

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

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

 <h1>This is a heading</h1>
 <p>This is a paragraph, and
  <a href="http://w3c.org/">this</a>
   is a link.</p>

הדוגמה שלמעלה תוצג על-ידי הדפדפן שלכם (בהנחה שאתם גולשים דרך דפדפן אינטרנט רגיל) כך:

This is a heading

This is a paragraph, and this is a link.

לחיצה על המילה this תוביל אתכם לאתר של W3C, וזהו בעצם רעיון ההייפרטקסט.

היתרון של אותן התוויות על-פני עיצוב ב-" וורד", למשל, הוא שכל דפדפן יוכל להציג את הטקסט הנכלל בתווית בצורה שנראית לו רלוונטית.
למשל, בדרך כלל נסמן טקסט שברצוננו להדגיש בתווית strong:

I like mango, but <strong>not</strong> banana.

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

 <title>A Page About Apples </title>

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

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

למידע נוסף על HTML

XML

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

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

<shoppinglist>
	<item>
		<name>Milk</name>
		<quantity>3</quantity>
	</item>
	<item>
		<name>Bread</name>
		<quantity>2</quantity>
	</item>
	<item>
		<name>Biscuits</name>
		<quantity>8</quantity>
	</item>
</shoppinglist>

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

XHTML

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

• כל התוויות כתובות באותיות קטנות. (lowercase)
• הפרמטרים הנוספים לתוויות, במידה שהם נחוצים, יהיו בפורמט של name="value" כאשר שם הפרמטר מופיע באותיות קטנות והערך חייב להופיע במרכאות.
• יש לסגור (באמצעות תווית נוספת עם לוכסן) תוויות שב-HTML לא היתה חובה לסגור אותן, כגון <p> ו-<li>.
• יש לסגור תוויות שעומדות בפני עצמן- כמו מעברי שורה, תמונות וכו' - באמצעות לוכסן סוגר בתוך התווית עצמה. לדוגמא: <br> יהפוך ל- </br>. זאת כדי למנוע מצב שבו תווית נפתחת ולא נסגרת, בדומה לכלל הקודם.
• חובה להתחיל את המסמך בתווית html, בצורה זו:
  <html xmlns="http://www.w3.org/1999/xhtml">
  המסמך ימשיך בתווית head שתכיל מידע על המסמך (כולל כותרת ראשית), ולאחר מכן בתווית body שתכיל את גוף המסמך.
• יש להגדיר DTD (Document Type Definition - הגדרת סוג מסמך) עבור המסמך, ולפעול לפי הכללים הכתובים באותה הגדרה. ל-XHTML גרסה 1.0 קיימות מספר הגדרות שונות של סוג המסמך (DTD), והן:
  XHTML 1.0 Strict - ההגדרה המחמירה ביותר, שבה התוויות נכתבות בצורה הנקייה והטהורה ביותר ומשמשות רק להגדרת מבנה המסמך ולא לעיצובו. על מנת לעצב אותו (צבעים, גודל האותיות וכדומה) נשתמש בתקן CSS, שעליו ידובר בהמשך.
  XHTML 1.0 Transitional - הגדרה זו היא למעשה פשרה בין XHTML ל-HTML המקורי. היא פחות מחמירה לגבי השימוש בתוויות, ומאפשרת תוויות עיצוביות על מנת שהמסמך יהיה תואם לדפדפנים ישנים שאינם תומכים ב-CSS.
  XHTML 1.0 Frameset - הגדרה שמשמשת אך ורק עבור יצירת מסגרות (frames), שכל אחת מהן מכילה מסמך XHTML נפרד.

ההגדרה המועדפת מבחינת תאימות לתקן היא כמובן Strict, ואתרים שעוצבו בעזרתה אמנם לא יהיו תואמים אחורה לדפדפנים ישנים, אך יהיו תואמים קדימה לעתיד ולדפדפנים רבים שקיימים כיום בשוק, כולל מחשבי כף יד, דפדפנים מקריאים וכו'.

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

XHTML בגרסה 1.1 החדשה יותר, משלב בין XHTML 1.0 Strict (עם מספר קטן של שינויים) לבין מודולריזציה (XHTML Modularization). מטרת המודולריזציה היא לחלק את השפה ליחידות נפרדות ("מודולים"), כאשר בכל אחת מהן קבוצה נפרדת של תוויות. כך מתאפשר למעצבים להשתמש רק באותן קבוצות שבהן הם חפצים, או להוסיף קבוצות חדשות משלהם. כך ניתן ליצור שפות חדשות לחלוטין שמבוססות על XHTML, כמו למשל MathML המשמשת להצגת משוואות מתמטיות. באותה צורה ניתן גם ליצור שפות מצומצמות יותר, באמצעות ביטול חלק מהמודולים. כך, למשל, נוצרה XHTML Basic, שהיא XHTML מופשטת ובסיסית שנועדה להתקנים אלחוטיים כפלאפונים, מחשבי כף יד, שעונים חכמים וכו'. כדוגמא נוספת אציין כי על בסיס XHTML Basic נוצרה השפה XHTML-MP (Mobile Profile), שבשימוש בפרוטוקול WAP 2.0 לתקשורת אינטרנט אלחוטית.
למידע נוסף על XHTML 1.0
למידע נוסף על XHTML 1.1
למידע נוסף על XHTML Basic
למידע נוסף על XHTML-MP

CSS

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

1. נוחות - באתר שלם, שבו דפי XHTML רבים, יהיה קובץ CSS אחד בלבד שמכיל את העיצוב הכללי של האתר. כך ניתן, ע"י עריכת קובץ ה-CSS הנ"ל, לשנות את עיצובם של כל הדפים בבת אחת.

2. ניידות - הפרדת התוכן מהעיצוב היא הכרחית בתקנים החדשים XHTML 1.0 Strict ו-XHTML 1.1, והיא מאפשרת ניידות של התוכן בין תקנים ודפדפנים מסוגים שונים.

בנוסף, גיליון הסגנונות מקל גם על עיצובו של דף בודד, מאחר שהוא מאפשר להגדיר סיווגים (class) שונים שלהם עיצוב שונה, ולהחיל אותם על חלקים שונים במסמך. כך נוכל, על-ידי שינוי של הסיווג המתאים בקובץ ה-CSS, לשנות את העיצוב של חלקים שונים במסמך בבת אחת. לדוגמא, במסמך המכיל רשימת מוצרים בחנות, נעצב את שמות המוצרים בכחול ובקו תחתון ואת המחירים באדום מודגש. לצורך כך נגדיר במסמך ה-XHTML שלנו את כל המוצרים כסיווג product ואת כל המחירים כסיווג price, ונצרף אליו את גיליון הסגנונות הבא:

.product {
	color: blue;
	text-decoration: underline;
     }
.price {
	color: red;
	font-weight: bold;
}

כעת, אם נרצה לשנות את צבע המוצרים לירוק, למשל, כל שנצטרך לעשות הוא לשנות שורה אחת בקובץ ה-CSS, בסיווג המתאים:

.product {
	color: green;
	text-decoration: underline;
}

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

לתקן CSS גרסאות שונות: גרסה 1 הבסיסית; גרסה 2.1 שמוסיפה תמיכה במיקום אבסולוטי של פריטים, מיספור אוטומטי, טקסט מימין לשמאל ועוד; וגרסה 3 שכרגע עדיין בפיתוח, וצופנת בחובה כמה הפתעות מעניינות. בנוסף קיימים פרופילים עבור התקנים אלחוטיים, דפדפנים שפועלים במקלטי טלוויזיה ובמדפסות (בתכנון).
למידע נוסף על CSS

DOM

"מודל האובייקטים במסמך" - Document Object Model - הינו תקן שמאפשר להפעיל שפות תכנות תסריטיות (scripting language) כמו ECMAScript על דפי ווב תוך ניצול מלוא הפוטנציאל שלהן. ל-DOM יש דמיון מסויים ל-API, שהוא מושג המתאר ממשק לתכנות יישומים במערכת הפעלה או בהתקן כלשהו. ההבדל הוא, ש-DOM מאפשר לתכנת דפי ווב בצורה אחידה, ללא תלות במערכת הפעלה או דפדפן מסויימים.

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

ECMAScript

ECMA היא התאחדות אירופית שמשרדיה ממוקמים בז'נבה, אשר עוסקת בפיתוח תקנים בתחום התקשורת והמחשבים. בין התקנים שפותחו על ידה נמצאת ECMAScript, שהיא שפת תכנות שנועדה לשימוש במסמכי HTML דינמיים, ותואמת באופן מלא לתקן DOM המוזכר למעלה.

שפה זו מבוססת על שילוב בין שתי שפות שהיו בשימוש עד כה ברחבי הרשת:
JavaScript - שפת תכנות תסריטית מונחית-עצמים, שמבוססת על Java ונוצרה ע"י Netscape.
JScript - שפה הדומה מאוד ל-JavaScript, אך שונה ממנה בכמה פונקציות חשובות. היא נוצרה ע"י חברה מיקרוסופט, שהיא כידוע המתחרה של נטסקייפ בתחום הדפדפנים, ותמכה ב-DOM מיוחד (לא תקני) של הדפדפן אקספלורר.

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

סיכום

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

{לראש העמוד}