HTML

לקוח מתוך What is a Markup Language - March 8 , 1999

HTML כפי ששמה מרמז הינה שפת סימון (markup). ככזאת היא נוהגת ל"סמן" טקסט. אך מה זה בדיוק אומר לסמן טקסט?

באופן מופשט, סימון טקסט(marking up) זוהי מתודולוגיה לקידוד מידע עם אינפורמציה עצמית. סימוני-טקסט(markups) נמצאים בכל מקום בעולם האמיתי.

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

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

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

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

ישנן 2 נקודות חשובות שעליך לשים לב אליהן מדוגמא זו.

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

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

כאשר נתונים נשלחים דרך מחשבים "טיפשים" זה חיוני שהנתונים יכילו אינפורמציה אשר תציין את משמעותם ו\או מה על הצד הקולט לעשות עם נתונים אלו.

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

HTML היא אחת מערכות הסימון (markup) היותר מפורסמות. HTML מגדירה סט של תוויות (tags) אשר מקשרות חוקים בעלי תצורה לביטים של טקסט. מסמכים אשר סומנו (מכילים טקסט פשוט וגם תוויות אשר מציינים חוקים מסויימים עם תצורה מסויימת עבור הטקסט) נקראים ע"י אפליקציית עיבוד HTML (למשל ע"י הדפדפן) אשר יודעת כיצד להציג את הטקסט בהתאם לחוקים.

לדוגמא , תווית <B> מציינת את החוק המורה לאפליקציית עיבוד הHTML לסמן ב BOLD (הדגשה) קטע מסויים של טקסט. באופן דומה, התווית <CENTER> מורה לאפליקציית עיבוד ה HTML ליישר את הטקסט למרכז.

לכן השורה : <CENTER><B>BOLD</B></CENTER> תוצג ע"י אפליקציית עיבוד ה HTML כך:

BOLD

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

<UL>
<LI>Gunther Birznieks
<UL>
<LI>Client ID: 001
<LI>Company: Bob's Fish Store
<LI>Email: gunther@bobsfishstore.com
<LI>Phone: 662-9999
<LI>Street Address: 1234 4th St.
<LI>City: New York
<LI>State: New York
<LI>Zip: 10024
</UL>
<LI>Susan Czigany
<UL>
<LI>Client ID: 002
<LI>Company: Netscape
<LI>Email: susan@eudora.org
<LI>Phone: 555-1234
<LI>Street Address: 9876 Hazen Blvd.
<LI>City: San Jose
<LI>State: California
<LI>Zip: 90034
</UL>
</UL>

קטע הקוד הנ"ל יראה בעזרת אפליקציית עיבוד HTML כך:

Gunther Birznieks
- Client ID: 001
- Company: Bob's Fish Store
- Email: gunther@bobsfishstore.com
- Phone: 662-9999
- Street Address: 1234 4th St.
- City: New York
- State: New York
- Zip: 10024
Susan Czigany
- Client ID: 002
- Company: Netscape
- Email: susan@eudora.org
- Phone: 555-1234
- Street Address: 9876 Hazen Blvd.
- City: San Jose
- State: California
- Zip: 90034

האם HTML הינה שפת תכנות?

למעשה למרות ש HTML מכונה שפת תכנות היא לא ממש שפת תכנות.

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

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

השפה עצמה היא פשוטה וברורה וכפופה למספר סטנדרטים חשובים.

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

this text is not bold
<EM>this text is bold</EM>
 this text is not bold

חשוב לציין כי קודי התצורה הנמצאים בתוך תוויות HTML הינם case-insensitive. לכן שתי הגרסאות הבאות של תווית ה bold יובנו ע"י דפדפן ה WEB:

<em>this text is bold</em>
this text is not
<EM>this text is bold</EM>

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

<CENTER><EM>this text is bolded and centered
correctly</EM></CENTER>

<EM><CENTER>this text is bolded and centered
incorrectly</EM></CENTER>

בגירסא השגויה , שים לב שתווית ה bold נסגרה לפני תווית ה center , למרות שתווית ה bold נפתחה לפניה. החוק הכללי אומר כי תוויות פנימיות צריכות להסגר לפני התוויות החיצוניות.

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

<H2 ALIGN = "LEFT">this text has a heading
level two style and is
aligned to the left </H2>

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

ודבר אחרון , עליך לדעת כי לדפדפני ה WEB לא אכפת אם מסמך ה HTML מכיל רווחים לבנים (white spaces). לדוגמא , שתי חתיכות ה HTML הבאות יוצגו בדיוק באותו אופן ע"י הדפדפן:

This is some text that is displayed
as you would expect


This     is  some     text
that is displayed in a way
you
would not expect:
exactly the same as the above

מקורות נוספים:

לראשהדף

Additional Resources:

נתונים גולמיים - Raw Data

חלק 9 - XML: מבוא לנתונים