שפת HTML בנויה רכיבים אשר בתוכם נרשמים התכנים השונים. כל רכיב בנוי מתגית פתיחה ומתגית סגירה אשר ביניהן נרשם התוכן. תגית הפתיחה ותגית הסגירה נרשמות בשמן בתוך סוגרים משולשים באופן הבא. שימו לב כי תגית הסגירה מופיעה עם לוכסן מלפני השם: /
<תגית> <!-- כאן יופיע התוכן של התגית --> </תגית>
אם לדוגמה נשתמש ברכיב הפיסקה p המציין paragraph באנגלית, נוכל לכתוב פיסקה בדף ה HTML כך:
<p> שלום עולם - זוהי פיסקה </p>
דף HTML תקני יכיל רכיב HTML חיצוני אחד בשם html. כל שאר הרכיבים יבואו בתוך הרכיב הזה:
<html> <!-- כאן יופיעו כל שאר התגיות --> </html>
כל דף HTML מתחלק לשני אזורים: אזור הכותרים head המציין header באנגלית - בו יופיע מידע אודות תוכן הדף, ואזור התוכן body המציין את תוכנו גופא.
<html> <head> <!-- מידע אודות תוכנו של הדף --> </head> <body> <!-- תוכן הדף גופא --> </body> </html>
ודאי הבחנתם בדוגמאות הללו על כתיבה שיטתית של הערות למתכנת בגוף הקוד עצמו: כל טקסט הנכתב בין הסימן <!-- לסימן --> הינו טקסט הערה לכותב ה HTML. דפדפן הפותח דף המכיל טקסט מסוג זה, יודע להתעלם ממנו לחלוטין, כך שלא נוצרת לגולש שגיאה בדף הנצפה.
<!-- זוהי הערה לכותב הדף אשר הדפדפן מתעלם ממנה -->
ודאי גם הבחנתם כי הרכיב html מיושר לתחילת השורה, הרכיבים head ו body מוזחים רמה אחת פנימה, וההערה מוזחת רמה נוספת פנימה. ההזחה תורמת לבהירות הקוד עבור היוצר או העורך, ולרוב אינה מפריעה לפעילות הדפדפן. בגלל התרומה הרבה עבור המתחילים, במקומות בהם אפשרי הדבר, אשתמש בסגנון הזחה זה.
נוסיף בשלב זה לתוך רכיב הכותר head רכיב חיוני ביותר - הרכיב title מציין כותרת עבור הדף. כותרת זו תופיע בסרגל הכותרת של הדפדפן. אם ניצור סימניה לדף זה, שם הסימניה גם הוא יופיע בשם הזה.
<html> <head> <title>חגי ישראל</title> </head> <body> <!-- תוכן הדף גופא --> </body> </html>
נוסיף לרכיב הגוף body רכיב כותרת ראשית h1 המציין header 1, אותה יוכל הגולש לראות בדף. בדוגמה זו אבחר כותרת זהה לתוכן רכיב ה title.
<html> <head> <title>חגי ישראל</title> </head> <body> <h1>חגי ישראל</h1> </body> </html>
נרשום את הקוד כולו בעורך טקסט פשוט כמו פנקס הרשימות של מערכת הפעלה חלונות כלשהי ונשמור בשם index.html . פנקס הרשימות נוטה להוסיף את הסיומת txt לכל קבצי הטקסט, לכן על מנת לעקוף את ברירת המחדל שלו עלינו לבצע שמור בשם..., ותחת שדה השם נרשום "index.html" - כולל הגרשיים העוטפות. בנוסף נקפיד שסוג הקידוד יהיה UTF-8 ונאשר את השינוי. כעת תוחלף גם צלמית הקובץ מצלמית של פנקס הרשימות, לצלמית של הדפדפן המועדף. אני ממליץ להשתמש תמיד בדפדפן החינמי בעל הקוד הפתוח Mozilla Firefox.
נפתח בהקלקה כפולה על צלמית הקובץ והדפדפן יפתח את דף ה HTML שלנו. נראה בדף את הכותרת בסרגל הכותרת ואת הכותרת הראשית בגוף הדף. עוד נבחין כי הדף מיושר אל השמאל שלא כמקובל בשפה העברית.
נסגור את הדפדפן ונפתח שוב את הקובץ בפנקס הרשימות: קליק-תפריט (לרוב קליק-ימני) על צלמית הקובץ ו ב פתח באמצעות... נבחר ב פנקס הרשימות. נתקן את עיצוב הדף באמצעות רכיב הסגנון style אשר יופיע גם הוא בתוך רכיב ה head. בתוך רכיב זה נוכל לכתוב קוד בשפת עיצוב בשם CSS אותה מכיר הדפדפן. בתגית הפתיחה של style נוסיף את המאפיין type אשר יודיע לדפדפן כי עליו לעצב את הדף בשפת ה CSS. כאן אני מוותר על ההזחה וחוזר לישר בתחילת השורה כי קטע קוד זה נכתב בשפה חדשה CSS אשר מטפלת בהיבט ההצגתי בניגוד להיבט המשתמע ב HTML.
<html> <head> <title>חגי ישראל</title> <style type="text/css"> <!-- כאן יופיע קוד עיצוב הדף --> </style> </head> <body> <h1>חגי ישראל</h1> </body> </html>
קוד ה CSS יטפל כעת בכיווניות הדף. אנו רוצים שכל הטקסט הגלוי לגולש - הנמצא תחת רכיב ה body יתכוון (במשמעות) ויתיישר (בהצגה) לימין. נבחר ב בורר בעל שם זהה לשם רכיב ה HTML הרצוי כלומר body, ועליו נעבוד. בין סלסל פתיחה { לבין סלסל סגירה }, נוסיף את מאפיין הכיווניות direction עם הערך rtl שמשמעו מימין לשמאל או באנגלית right to left. בין מאפיין לבין ערך ישנן נקודותיים : , ולאחר הערך ישנן נקודה ופסיק ; .
body {
direction:rtl;
}
לאחר שנשלב את קוד ה CSS במקומו ונשמור שוב את הקובץ, נוכל לפתוח אותו שוב בדפדפן (או לרענן את הדף אם לא סגרנו את הדפדפן) ולראות שהכיווניות הסתדרה.
<html>
<head>
<title>חגי ישראל</title>
<style type="text/css">
body {
direction:rtl;
}
</style>
</head>
<body>
<h1>חגי ישראל</h1>
</body>
</html>
כעת נוכל להוסיף לתוכן הדף עוד כמה פסקאות p וכותרות משניות על פי סולם החשיבות המשתמעת: h2, h3, h4, h5, h6 .
<html>
<head>
<title>חגי ישראל</title>
<style type="text/css">
body {
direction:rtl;
}
</style>
</head>
<body>
<h1>חגי ישראל</h1>
<p>חגי ישראל להלן מסודרים על פי חודשי השנה:</p>
<h2>תשרי</h2>
<p>
חודש תשרי הוא החודש השביעי למניין החודשים.
חודש זה בן 30 ימים.
</p>
<h2>חשוון</h2>
<p>
חודש חשוון הוא החודש השמיני למניין החודשים.
חודש זה בן 29 ימים בשנה חסירה ובשנה כסידרה ובן 30 ימים בשנה שלימה.
</p>
<h2>כסליו</h2>
<p>
חודש כסליו הוא החודש התשיעי למניין החודשים.
חודש זה בן 30 ימים בשנה כסידרה ובשנה שלימה ובן 29 ימים בשנה חסירה.
</p>
<h2>טבת</h2>
<p>
חודש טבת הוא החודש העשירי למניין החודשים.
חודש זה בן 29 ימים.
</p>
<h2>שבט</h2>
<p>
חודש שבט הוא החודש האחד עשר למניין החודשים.
חודש זה בן 30 ימים.
</p>
<h2>אדר</h2>
<p>
חודש אדר הוא החודש השנים עשר למניין החודשים.
חודש זה בן 29 ימים בשנה פשוטה.
</p>
<p>
בשנה מעוברת נקרא החודש השנים עשר אדר ראשון,
וישנו גם החודש השלושה עשר אדר שני.
</p>
<h3>אדר ראשון</h3>
<p>
חודש אדר ראשון נקרא גם אדר א' הוא החודש השנים עשר למניין החודשים.
חודש זה בן 30 ימים.
</p>
<h3>אדר שני</h3>
<p>
חודש אדר שני נקרא גם אדר ב' הוא החודש השלושה עשר למניין החודשים.
חודש זה בן 29 ימים.
חגי אדר נחוגים בשנה מעוברת באדר ב'.
</p>
<h2>ניסן</h2>
<p>
חודש ניסן הוא החודש הראשון למניין החודשים.
חודש זה בן 30 ימים.
</p>
<h2>אייר</h2>
<p>
חודש אייר הוא החודש השני למניין החודשים.
חודש זה בן 29 ימים.
</p>
<h2>סיוון</h2>
<p>
חודש סיוון הוא החודש השלישי למניין החודשים.
חודש זה בן 30 ימים.
</p>
<h2>תמוז</h2>
<p>
חודש תמוז הוא החודש הרביעי למניין החודשים.
חודש זה בן 29 ימים.
</p>
<h2>אב</h2>
<p>
חודש אב הוא החודש החמישי למניין החודשים.
חודש זה בן 30 ימים.
</p>
<h2>אלול</h2>
<p>
חודש אלול הוא החודש השישי למניין החודשים.
חודש זה בן 29 ימים.
</p>
</body>
</html>