HTML היא שפת התגיות אשר מהווה את הבסיס לרשת האינטרנט. במאמר זה ניצור את מסמך ה-HTML הראשון שלנו ונלמד את בסיס השפה.
HTML היא שפת צד לקוח אשר משתמשת בתגיות ומאפיינים על מנת להציג דף אינטרנט על גבי הדפדפן בצד הלקוח.
HTML – כללי התחביר הבסיסי
כמו לכל שפה אחרת, יש מספר כללי תחביר בסיסיים המגדירים את האופן הנכון אשר בו יש לכתוב את הקוד:
- תגיות HTML נכתבות באנגלית באותיות קטנות בלבד – (lowercase)
- יש לסגור כל תגית שנפתחה עם תגית סגירה – </>
- סגירת תגיות תעשה בסדר בו הן נפתחו – <H1> <H1/>
- תגיות ללא תגית סגירה יסגרו ע"י צירוף של תו רווח לפני הקו הנטוי – </ br>
מסמך HTML בצורתו הבסיסית מורכב מהאזורים- Head, Body:
אזור ה-<Head>
אזור ה-Head יכיל תגיות אשר מסייעות בהגדרת המסמך וטעינת משאבים:
- הגדרות שפה
- כותרת המסמך
- מחבר המסמך
- תיאור המסמך ומילות מפתח
- הגדרות תאימות למסמכים
- קישור למשאבי עיצוב וטעינת סקריפט למסמך
תגיות ומאפיינים
בתגיות הפסקה וגודל הכותרת, מנועי חיפוש נעזרים על מנת להבדיל ולחפש טקסט בקלות.
בין תגיות אלו יהיה ניתן למצוא את תגית הפסקה – <p>, תגיות גודל הכותרת <h4>, <h3>, <h2>, <h1>, תגית הכותרת <title> ועוד.
שימו לב למסמך הבא:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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:
1 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
XHTML 1.0 Transitional
השימוש ב-Transitional נעשה בעיקר במעבר בין HTML ל-XHTML:
1 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
במצב זה אנו לא מחויבים להשתמש ב-CSS, ובכך האתר שלנו יכול לתמוך גם בדפדפנים שלא תומכים ב- CSS.
XHTML 1.0 Frameset
בעמוד בו אנחנו רק מחלקים את הדפדפן לכמה חלקים באמצעות frameset ואין לנו קוד מעבר לכך, נשתמש ב-"Frameset":
1 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" |
לתגית meta מאפיין בשם charset אשר מכיל את הערך UTF-8.
UTF-8 היא שיטת קידוד תווים גלובלית אשר ארגון התקנים IETF מחייב כל פרוטוקול אינטרנט לתמוך בו,
כמו כן קונסורציום הדואר האלקטרוני ממליץ שכל תוכנת מייל תוכל להציג וליצור דואר באמצעות UTF-8.
אזור ה-<Body>
אזור ה-Body יכיל תוכן אשר יוצג למשתמש בדפדפן:
- כותרת המסמך
- פסקאות
- תמונות
- קישורים
- רשימות
- טבלאות
- טפסים
תגיות ומאפיינים
גוף המסמך יכיל את התוכן שברצוננו להציג למשתמש. בניגוד לכותר המסמך, כל מה שגוף המסמך יכיל, יוצג למשתמש ע"י הדפדפן.
גוף המסמך מצוין באמצעות תגית <body>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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 והאזורים השונים במסמך.
בפרק הבא של המדריך נלמד על עברית וכיוון כתיבה.
