שיעור 3: אלמנטים ותגים

עכשיו אתה מוכן ללימוד המהות של שפת ה-HTML: אלמנטים.

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

"תגים"?

תגים הם תוויות בהן אתה משתמש לסימון ההתחלה והסוף של אלמנט.

לכל התגים יש את אותו מבנה: הם מתחילים עם הסימן קטן מ. ">" ומסתיימים בסימן גדול מ. "<".

באופן כללי, ישנם שני סוגי תגים - תגים פותחים: <html> ותגים סוגרים: <html/>. ההבדל היחיד בין תג פותח לתג סוגר הוא סימן האלכסון "/". אתה מתייג תוכן על ידי הכנסתו בין תג פותח לתג סוגר.

HTML מושתת כולו על אלמנטים. ללמוד HTML זה ללמוד ולהשתמש בתגים שונים.

אתה יכול להראות לי מספר דוגמאות?

בסדר. האלמנט em מדגיש טקסט. כל טקסט בין התג הפותח <em> והתג הסוגר <em/> מודגש בדפדפן. ("em" זה קיצור של "emphasis" - מודגש).

דוגמה 1:

	
	<em>טקסט מודגש.</em>
	
	

בדפדפן זה יראה כך:

טקסט מודגש.

האלמנטים h6, h5, h4, h3, h2, h1 משמשים ליצירת כותרות (h זה קיצור של "heading" - כותרת), כאשר h1 היא הדרגה הראשונה ובאופן טבעי הטקסט הגדול יותר, h2 היא הדרגה השניה ולכן טקסט קטן במעט ו-h6 זו הדרגה השישית והאחרונה בהירארכיית הכותרות ולכן גם הטקסט הקטן ביותר.

דוגמה 2:

	
	<h1>זוהי כותרת</h1>
	<h2>זוהי כותרת משנה</h2>
	
	

בדפדפן זה יראה כך:

זוהי כותרת

זוהי כותרת משנה

אז אני צריך תג פותח ותג סוגר תמיד?

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

האם תגים יכתבו באותיות גדולות או קטנות?

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

היכן אני שם את התגים האלו?

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

אם תמשיך לשיעור הבא, בתוך 10 דקות אתה תיצור את אתר האינטרנט הראשון שלך.



<< שיעור 2: מה זה HTML?

שיעור 4: צור את אתר האינטנרט הראשון שלך >>