HTML

דוגמה של מסמך HTML

HTML (ראשי תיבות של HyperText Markup Language) היא שפת תגיות (markup language) ליצירה ועיצוב דפי אינטרנט המוגדרת כיישום SGML פשוט. HTML היא תקן ברשת האינטרנט, וכלליה מוגדרים על ידי ארגון תקינה בינלאומי, W3C. הגרסה הנוכחית של התקן היא HTML 4.01. גרסת HTML 5 נמצאת תחת פיתוח ונעשה בה שימוש כיום בדפדפנים מתקדמים.

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

קבצי HTML נשמרים בסיומות ".htm" ו-".html".

גרסאות HTML

סמליל HTML5

• נובמבר 1995: גרסה "HTML 2.0"‏
• 14 בינואר 1997: גרסה "HTML 3.2"‏
• 18 בדצמבר 1997: גרסה "HTML 4.0"‏
• 24 בדצמבר 1999: גרסה "HTML 4.01"‏
• עדיין בפיתוח (נכון ליולי 2011): גרסה "HTML 5"‏

XHTML

לאחר יציאת תקן HTML 4.0 התמקדה עבודת הסטנדרטיזציה של ה־W3C בגרסת XML של HTML. זו נקראה XHTML. היא נועדה להיות מוגדרת בצורה יותר ברורה כדי לפשט פענוח אוטומטי של מסמך HTML על ידי תוכנות^{[דרוש מקור]}.

HTML5

בשנת 2004 החליטו מספר כותבי דפדפנים (מוזילה, אופרה ואפל, מפתחת הדפדפן Safari) להקים קבוצת עבודה, בשם WHATWG, שתתאם את פיתוח התקן לכיוונים אשר נדרשים להם. קבוצת העבודה החלה לעבוד על הרחבות לתקן HTML שנודעו בשם הכללי HTML5. בהמשך הצטרפו לקבוצה נציגות מכותבות דפדפנים מובילים אחרים (כגון גוגל ומיקרוסופט). התקן צפוי להגיע לשלב סופי ("המלצת W3C") בשנת 2014. הגישה המנחה תקן זה היא תאימות והגדרה סמנטית של יחידות קוד לתפקידים שונים. לדוגמא - שימוש בתג DIV על מנת לתחום אלמנטים של קוד הורחב לתגים יעודיים שנועדו לעיצוב כותרת עליונה, תחתונה, מאמר, ציטוט ועוד. בנוסף, נוספו תגיות המייצגות וידאו, אודיו, תפריטים וכדומה - לטובת שיפור התאימות של הקוד לדפדפנים שונים והקלה על יכולת הדפדפן להבין את התוכן אותו הוא נדרש להציג.

תגיות HTML

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

חלוקת התגיות

ניתן לחלק את התגיות לחמש קבוצות:

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

  <h1>כלבי ים</h1>
  

  פירושו עבור הדפדפן - הצג את המלל "כלבי ים" ככותרת ראשית.

עוד תגיות דומות:

<h2>מוגדל</h2>

<h3>מוגדל</h3>

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

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

  <b>מודגש</b>
  

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

• קישורים, שתפקידם לקשר את הדף, בלחיצת עכבר, לדפים אחרים. לדוגמה:

  <a href="http://he.wikipedia.org">ויקיפדיה</a>
  

  יצור קישור כזה: ויקיפדיה.

• שיבוץ אובייקטים שונים שאינם מלל כמו תמונות ופקדים. לדוגמה:

  <img src="a.png">
  

  יציג את התמונה a.png בתוך המסמך.

• הוספת טבלאות לשיבוץ נתונים או חומרים מסוג זה ואחר בדף ה-HTML. לדוגמה:

<table>
  <tr>
    <td>טבלה גודל 1*1</td>
  </tr>
</table>

הסבר התגיות:

התגית table נותנת לנו את האפשרות ליצור טבלה. מאפשר לקבוע את צבע הטבלה, גודל הקווים וכולי.

התגית tr מגדירה שורה בטבלה. כל אלמנט מסוג table יכול להכיל מספר תגיות tr.

התגית td מגדירה עמודה בשורה. כל אלמנט מסוג tr יכול להכיל מספר תגיות td. לדוגמה, אם נרצה לעשות טבלה בגודל 2x2, נכתוב את זה עם שני tr ושני td בכל tr. אפשרויות לעיצוב הטבלה באלמנט table: התכונה "align",נותנת לנו לקבוע את מיקום הטבלה בדף. עם התכונה "align" יש לציין ערך center/right/left כדי לקבוע זאת: center-מרכז הדף right-ימין הדף left-שמאל הדף לדוגמה:

<table align="center">
הטבלה תהיה במרכז הדף
</table>

מבנה התגיות

מבנה תגית ה-HTML מזכיר את מבנה התגית בXML.

המבנה של תגית עם תוכן שכתוב בתגית עצמה הוא:

<tag property="value" method>תוכן</tag>

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

במידה ותגית אינה מצריכה תגית סוגרת, כגון תגיות input,img,br - אז אין צורך להוסיף את הסימן / בסוף התגית. לדוגמה:

<br />

ניתן לחלק את התכונות הנוספות, שחלקן בגדר רשות ואת חלקן חובה לציין בתגיות מסוימות, לשתי קבוצות:

• ה-property שמופיע במבנה, הוא בעל ערך (ה - value).
• ה-method הוא תכונה בוליאנית, שערכה בעצם ציונה או אי-ציונה.

אפשר לציין יותר מתכונה אחת בתגית, בהתאם לתכונות הרלוונטיות לכל תגית.

מבנה של תגית חסרת תוכן שכתוב בתגית עצמה הוא:

<tag properties & methods>

* הערה: ה - "properties & methods" משמש רק כאן לקיצור של המאפיינים והשיטות, שנכתב עליהם לעיל. אין אפשרות להכניס "properties & methods" בדף ה - HTML עצמו.

חפיפה בין תגיות

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

<strong><i>טקסט לדוגמה</i></strong>

אך לא ככה:

<strong><i>עוד טקסט לדוגמה</strong></i>

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

מבנה מסמך ה - HTML

מבנה מסמך HTML בסיסי נראה כך:

<html>
 <head>
 <title>כותרת</title>
 </head>
 <body> (או: <frameset>
 תוכן הדף
 </body> (או: </frameset>)
</html>

תגית ה - html היא התגית הראשית, שבתוכה נכתב מסמך ה - HTML.

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

תגית ה - body היא התגית שמסמלת את גוף המסמך. בתגית זו מכניסים את תוכן המסמך.

במקום תגית ה - body, יכולה להיות התגית frameset, המשמשת להכנסת דפי אתרים אחרים לתוך דף מסוים ומיקומם בדף.

Doctype

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

במרכאות הראשונות שב - Doctype, צריך לכתוב את גרסת ה-HTML של הדף לפי הקוד המתאים, ובמרכאות השניות כותבים את קובץ ה-DTD של הגרסה.

ישויות HTML

ישות HTML ‏(Entity reference) היא סימן טקסטי שלרוב אינו מופיע בא"ב של השפות השונות. מבנה של ישות HTML הוא כזה: ;name& כאשר "name" הוא שם הישות.

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

יצירת דפי HTML

יצירתו של דף אינטרנט מבוסס HTML ניתנת להיעשות באמצעות עורך טקסט פשוט. דרך זו מצריכה בקיאות בתגיות HTML, כדי לשלבן בטקסט המוצג בדף. נפוצים גם כלים ידידותיים יותר, הפוטרים את המשתמש מידיעת HTML, ומאפשרים לו יצירת דף בטכניקת WYSIWYG. כלי בסיסי למטרה זו הוא מעבד התמלילים Word המאפשר גם שמירת מסמך כדף HTML ועריכתו. כלים ייעודיים ליצירת דפי HTML הם Microsoft FrontPage או Macromedia Dreamweaver ואחרים.

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

ראו גם

• גיליונות סגנון מדורגים (CSS)‏
• DOM‏
• Javascript - שפת תכנות שאחד משימושיה העיקריים הוא דפי HTML דינאמיים.

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

מיזמי קרן ויקימדיה
ספר לימוד בוויקיספר: HTML
תמונות ומדיה בוויקישיתוף: HTML

• מפרט תקן HTML 4.01, אתר W3C
• הצעת טיוטה של מפרט תקן HTML 5, אתר W3C
• אתר הבית של W3C
• על תקינה של HTML באתר mozilla.org.il
• מדריך HTML בעברית בוובמאסטר
• תצוגה מקדימה לקוד HTML למנהלי אתרים

מקורות

• תקני HTML באתר ה־W3C‏
• שאלות נפוצות על WHATWG ו־HTML5 מאתר WHATWG