מדריך HTML – מבנה דף וכללי תחביר

גיא בורשטיין

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

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

מבנה מסמך HTML

דף בסיסי של HTML יראה כך:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World Page</title>
</head>
<body>
    <h1>Hello World Page</h1>
    <p>Hello World!</p>
</body>
</html>

לכל מסמך HTML יש מבנה קבוע המורכב מהרכיבים הבאים:

הצהרת סוג מסמך (DOCTYPE)

השורה הראשונה בכל מסמך HTML מציינת את סוג וגרסת ה HTML בה כתוב המסמך. שורה זו נקראת DOCTYPE ועוזרת לדפדפן להבין באיזה "אוצר מילים" של שפת HTML כתוב המסמך.

תגית ה- HTML

לאחר הצהרת סוג המסמך תגיע תגית <html> העוטפת למעשה את כל המסמך שלנו ומציינת לדפדפן שמדובר במסמך HTML. בתוך תגית <html> נוכל להזין את תוכן המסמך לפי הכללים שנלמד מיד.

כותר המסמך

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

<head>
    <meta charset="utf-8" />
    <title>Hello World Page</title>
</head>

הדוגמה הנ"ל מכילה שני רכיבים חשובים:

תגית <title> מציינת את כותרת המסמך כפי שהיא מוצגת בראש חלון הדפדפן
תגית <meta> המובאת בדוגמה מציינת את סוג קידוד התווים במסמך

התגיות הללו עטופות בתגית <head> המציינת את כותר המסמך.

גוף המסמך

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

גוף המסמך מצוין באמצעות תגית <body>:

<body>
    <h1>Hello World Page</h1>
    <p>Hello World!</p>
</body>

תוצאת הרצת עמוד ה- HTML הזה בדפדפן תהיה:

תחביר HTML

שימו לב לכותרת הטאב בדפדפן (שמתאימה לתגית title) ולתוכן המוצג בחלון הדפדפן (שמתאים לתוכן תגית ה- body).

כללי תחביר של שפת HTML

כמו לכל שפה, ל- HTML יש מספר כללי תחביר בסיסיים המגדירים את האופן הנכון בו יש לכתוב את המסמך.

תגיות HTML נכתבות באנגלית באותיות קטנות בלבד
יש לסגור כל תגית שנפתחה עם תגית סגירה תואמת
סגירת תגיות תעשה בסדר בו הן נפתחו
תגיות ללא תגית סגירה יסגרו ע"י צירוף של תו רווח ותו לוכסן קדמי באופן הבא: </ br>
תגיות רמת שורה (רכיבי inline) יוכלו להכיל רק תגיות רמת שורה אחרות *
תגיות רמת בלוק יוכלו להכיל הן תגיות רמת בלוק והן תגיות רמת שורה *

* נעמוד על המהות וההבדלים בין תגיות רמת בלוק ותגיות רמת שורה בפרק הבא

תגיות: HTML, בניית אתרים, מדריך

מדריך HTML

מדריך HTML – מבנה דף וכללי תחביר

מבנה מסמך HTML

כללי תחביר של שפת HTML

עוד בנושא זה

תגובות בפייסבוק

תגיות