מהו קובץ HTML?
HTML (Hyper Text Markup Language) היא התוסף לדפי אינטרנט שנוצרו לתצוגה בדפדפנים. HTML, הידועה כשפת האינטרנט, התפתחה עם דרישות מידע חדשות שיוצגו כחלק מדפי אינטרנט. הגרסה האחרונה ידועה בשם HTML 5 המעניקה גמישות רבה לעבודה עם השפה. דפי HTML מתקבלים מהשרת, שבו הם מתארחים, או שניתן לטעון אותם גם מהמערכת המקומית. כל עמוד HTML מורכב מאלמנטים של HTML כגון טפסים, טקסט, תמונות, אנימציות, קישורים וכו’. אלמנטים אלו מיוצגים על ידי תגיות ועוד כמה אחרים כאשר לכל תג יש התחלה וסוף. זה יכול גם להטמיע יישומים שנכתבו בשפות סקריפטים כגון JavaScript ו- Style Sheets (CSS) לייצוג פריסה כולל.
היסטוריה קצרה
מאז הקמתו ותפקידו הראשון, מפרטי ה-HTML נשמרים על ידי World Wide Web Consortium (W3C) מאז 1996. בשנת 2000, הוא גם הפך לתקן בינלאומי (ISO/IEC 15445:2000). בשנת 1999 פורסם HTML 4.01. בשנת 2004, קבוצת העבודה של Web Hypertext Application Technology (WHATWG) החלה לעבוד על גרסת HTML5 שהפכה למסירה משותפת עם ה-W3C בשנת 2008. היא הושלמה ותוקנה ב-28 באוקטובר 2014.
מבנה פורמט קובץ HTML
מסמך HTML 4 מורכב משלושה חלקים:
- שורה המכילה מידע על גרסת HTML
- סעיף כותרת הצהרתית
- גוף, המכיל את תוכנו בפועל של המסמך. הגוף עשוי להיות מיושם על ידי רכיב BODY או אלמנט FRAMESET כדי להכיל את הגוף במסגרות
כל חלק יכול להיות מוביל או אחריו רווחים לבנים, שורות חדשות, כרטיסיות והערות. דוגמה למסמך HTML פשוט היא כפי שמוצג להלן:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Understanding HTML File Format</TITLE>
</HEAD>
<BODY>
<P>Hello World!
</BODY>
</HTML>
מידע על הגרסה
שורת הקוד הראשונה, <!DOCTYPE html> , נקראת הצהרת doctype והיא אומרת לדפדפן באיזו גרסה של HTML הדף כתוב. בהתאם לגרסת ה-HTML, ישנן מספר הצהרות doctype שונות הנותנות שמות להגדרת סוג המסמך (DTD) הנמצאת בשימוש עבור המסמך. כל DTD שונה מהאחר באלמנטים שבהם הוא תומך ונבדלים כדלקמן:
- HTML 4.01 Strict - כולל את כל הרכיבים והמאפיינים שלא הוצא משימוש או שאינם מופיעים במסמכים של ערכת מסגרות
- HTML 4.01 Transitional - כולל הכל ב-DTD המחמיר בתוספת אלמנטים ותכונות שהוצאו משימוש (רובם נוגעים להצגה חזותית
- HTML 4.01 Frameset - כולל גם הכל במסגרות המעבר DTD פלוס
עבור HTML5, מידע הגרסה הוא פשוט כפי שהוזכר להלן.
<!DOCTYPE html>
מידע כותרת HTML
כותרת של מסמך HTML יכולה לכלול מספר רכיבי HTML שאינם מעובדים על ידי הדפדפן. אלמנטים כאלה הם מטא נתונים המתארים מידע על הדף או כוללים קטעים המשמשים לאחזר מידע ממשאבים חיצוניים כמו גיליונות סגנונות CSS או קובצי JavaScript. כותרת עליונה של עמוד מיוצגת על ידי תג head.
להגדרת כותרת העמוד, האלמנט title הוא היחיד שנדרש בתוך תגים. אותו הדבר משמש על ידי מנועי חיפוש כדי לזהות את הכותרת של דף.
מידע גוף HTML
זהו החלק הראשי בקובץ המכיל את כל תוכן הקובץ שמעובד על ידי דפדפנים. גוף HTML יכול להכיל סימונים שיכולים להתייחס לאבני בניין שונות בצורת תגים. זה יכול להכיל כמה סוגים שונים של מידע כמו טקסט, תמונות, צבעים, גרפיקה וכו’. בנוסף, ניתן להטמיע רכיבי אודיו ווידאו בגוף ה-html לעיבוד על ידי דפדפנים. בנוכחות יישום גיליונות סגנון מודרניים לייצוג חזותי, תכונות המצגת של BODY כגון צבע רקע, צבע קישור, צבע טקסט וכו’ הוצאו משימוש. לפיכך, ניתן להשיג את אותם אפקטים באמצעות גיליונות סגנונות כפי שמוצג להלן:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Inline Style Sheets referencing</TITLE>
<STYLE type#"text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>
גיליונות סגנונות מוטבעים קלים להטמעה ועבור יישומים מהירים לאפקטים החזותיים, גיליונות סגנונות חיצוניים הופכים את זה לנוח יותר לפריסה פעם אחת ולגישה במקומות רבים.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Linking to External style sheets</TITLE>
<LINK rel#"stylesheet" type#"text/css" href#"smartstyle.css">
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>
רכיבי HTML
כפי שהוזכר קודם לכן, תוכן בתוך HTML Body מיוצג על ידי תגים, הידועים גם כ-Html Elements. לכל תג יכול להיות מידע נוסף בצורה של תכונות שנכתבות כ<tag attribute1#“value1” attribute2#“value2”> , אם כי אין צורך לכלול תכונות עם כל תג. אם תכונות אינן מוזכרות, ערכי ברירת מחדל משמשים בכל מקרה. להלן כמה דוגמאות מהאלמנטים:
כותרת
<head>
<title>The Title</title>
</head>
כותרות
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
פסקאות
<p>Paragraph 1</p> <p>Paragraph 2</p>