HTML היא שפת התגיות אשר מהווה את הבסיס לרשת האינטרנט. במאמר זה ניצור את מסמך ה-HTML הראשון שלנו ונלמד את בסיס השפה.
HTML היא שפת צד לקוח אשר משתמשת בתגיות ומאפיינים על מנת להציג דף אינטרנט על גבי הדפדפן בצד הלקוח.
HTML – כללי התחביר הבסיסי
כמו לכל שפה אחרת, יש מספר כללי תחביר בסיסיים המגדירים את האופן הנכון אשר בו יש לכתוב את הקוד:
- תגיות HTML נכתבות באנגלית באותיות קטנות בלבד – (lowercase)
- יש לסגור כל תגית שנפתחה עם תגית סגירה – </>
- סגירת תגיות תעשה בסדר בו הן נפתחו – <H1> <H1/>
- תגיות ללא תגית סגירה יסגרו ע"י צירוף של תו רווח לפני הקו הנטוי – </ br>
מסמך HTML בצורתו הבסיסית מורכב מהאזורים- Head, Body:
אזור ה-<Head>
אזור ה-Head יכיל תגיות אשר מסייעות בהגדרת המסמך וטעינת משאבים:
- הגדרות שפה
- כותרת המסמך
- מחבר המסמך
- תיאור המסמך ומילות מפתח
- הגדרות תאימות למסמכים
- קישור למשאבי עיצוב וטעינת סקריפט למסמך
תגיות ומאפיינים
בתגיות הפסקה וגודל הכותרת, מנועי חיפוש נעזרים על מנת להבדיל ולחפש טקסט בקלות.
בין תגיות אלו יהיה ניתן למצוא את תגית הפסקה – <p>, תגיות גודל הכותרת <h4>, <h3>, <h2>, <h1>, תגית הכותרת <title> ועוד.
שימו לב למסמך הבא:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1>this is example of basic HTML Document</h1>
<h2>this is example of basic HTML Document</h2>
<h3>this is example of basic HTML Document</h3>
<h4>this is example of basic HTML Document</h4>
<h5>this is example of basic HTML Document</h5>
<p>Hello World! this is paragraph</p>
</head>
<body>
</body>
</html>
אם ניצור מסמך טקסט חדש, ניתן לו את הסיומת-HTML, נזין לתוכו את הקוד ונפעיל אותו בדפדפן, נוכל לקבל את התוצאה הבאה:
שימו לב לתגית <!DOCTYPE html> בשורה 1. תגית זו מגדירה את סוג הקוד שבעמוד (הכרחי ב-HTML תיקני), כאשר ב-XHTML יש לו 3 סוגים מוגדרים:
- Strict
- Transitional
- Frameset
כל אחד משלושת הסוגים האלה הוא DTD – Document Type Definition. DTD הוא אוסף חוקים שעל-פיהם רץ העמוד. בתוכו מוגדר חוקי ה-XHTML (אוסף חוקים שהקוד צריך להיות כתוב לפיהם):
XHTML 1.0 Strict
נשתמש ב-strict רק כשנרצה קוד נקי לחלוטין המשתמש ב-CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
השימוש ב-Transitional נעשה בעיקר במעבר בין HTML ל-XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
במצב זה אנו לא מחויבים להשתמש ב-CSS, ובכך האתר שלנו יכול לתמוך גם בדפדפנים שלא תומכים ב- CSS.
XHTML 1.0 Frameset
בעמוד בו אנחנו רק מחלקים את הדפדפן לכמה חלקים באמצעות frameset ואין לנו קוד מעבר לכך, נשתמש ב-"Frameset":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
לתגית meta מאפיין בשם charset אשר מכיל את הערך UTF-8.
UTF-8 היא שיטת קידוד תווים גלובלית אשר ארגון התקנים IETF מחייב כל פרוטוקול אינטרנט לתמוך בו,
כמו כן קונסורציום הדואר האלקטרוני ממליץ שכל תוכנת מייל תוכל להציג וליצור דואר באמצעות UTF-8.
אזור ה-<Body>
אזור ה-Body יכיל תוכן אשר יוצג למשתמש בדפדפן:
- כותרת המסמך
- פסקאות
- תמונות
- קישורים
- רשימות
- טבלאות
- טפסים
תגיות ומאפיינים
גוף המסמך יכיל את התוכן שברצוננו להציג למשתמש. בניגוד לכותר המסמך, כל מה שגוף המסמך יכיל, יוצג למשתמש ע"י הדפדפן.
גוף המסמך מצוין באמצעות תגית <body>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
</head>
<body>
<h1>כותרת</h1>
<p>Hello World! this is paragraph.
everything that we want the user to expirience we can put in here:
</p>
<ul>
<li>כותרת המסמך</li>
<li>פסקאות</li>
<li>תמונות</li>
<li>קישורים</li>
<li>רשימות</li>
<li>טבלאות</li>
<li>טפסים</li>
</ul>
</body>
</html>
לסיכום ניתן לומר כי כעת אנו מבינים את המבנה של מסמכי HTML והאזורים השונים במסמך.
בפרק הבא של המדריך נלמד על עברית וכיוון כתיבה.
