מבנה ותחביר הדף

המבנה הבסיסי ביותר של דף HTML נראה כך:

<html>

	<head>
			<title>שלום עולם! - webmasters.co.il</title>
	</head>

	<body>
		תוכן הדף - webmasters.co.il
	</body>
</html>

הקוד הפשוט הזה הוא השלד של כל דף באינטרנט, למשל אם תלחצו על המקש הימני בדף הזה ואז "View page source" (או בעברית "הצג קוד מקור") אז תוכלו לראות את קוד ה-HTML של הדף הנבחר. את הקוד הזה הדפדפן שלכם (פיירפוקסאקספלוררקרום) ממירים מ-HTML לבלוקים ולצבעים שמאפשרים תצוגה ויזואלית נוחה למשתמש.

איך הקוד נראה בדפדפן?

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

חלקי הקוד:

<html> - כל מה שנכנס בין שני התגיות האלו זה הקוד HTML שלנו.

<head> - מכיל לרוב ייבוא קבצים (קריאה לקבצים נוספים) או תגי מטא (נלמד בהמשך) או סקריפטים (למשל של JavaScript).

<title> - התגית הזו מכילה את כותרת הדף (בראש הדפדפן יש לכם טקסט? כאן הוא מוכנס). התגית הזו חייבת להיות בתוך התגית <head>

<body> - כאן יכנס רוב הקוד HTML שלנו, עיצוב הטקסט, חלוקת הדף לחלקים, טבלאות, DIVים ועוד.

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

דגשים לקוד HTML תקין:

כל תג HTML (מלבד תגיות מיוחדות שיצויינו בהמשך) נסגרים בעזרת אותו שם של תג עם סלאש
כל תג צריך להיתחם בעזרת סוגריים משולשים < ו- >
עלינו לפתוח ולסגור תגיות בסדר מתאים, זאת אומרת אם פתחנו תג X ואחריו פתחנו תג Y אז אם אנחנו רוצים לסגור את שניהם עלינו קודם לסגור את התג Y (כי הוא בתוך התג X) ורק אחר כך לסגור את תג ה-X.

יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!