מדריך HTML מספר 2 - אלמנטים (Elements) ומאפיינים (Attributes)

Steps

1. 1

   Step 1

   למה אנחנו מתכוונים באלמנט? אלמנט זהו כל מה שמוצג מתחילת התגית ועד סופה (כולל), לדוגמא:
2. 2

   Step 2

   This is an element.

3. 3

   Step 3

   זהו אלמנט פסקה

   כאשר תוכן האלמנט במקרה הזה הוא הטקסט - דיי פשוט.

4. 4

   Step 4

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

   Step 5

   This is a nested element

6. 6

   Step 6

   בדוגמא ניתן לראות שאלמנט הפסקה (Paragraph) נמצא בתוך אלמנט הגוף (Body) מכיוון שהתגית הסוגרת של אלמנט הBody נמצאת אחרי התגית הסוגרת של אלמנט הParagraph. התגית הסוגרת של אלמנט הBody נמצאת לפני התגית הסוגרת של אלמנט הHTML ומכאן שהוא מוכל בו.
7. 7

   Step 7

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

   Step 8

   This is just text without tags

   This is paragraph without a closing tag

9. 9

   Step 9

   בד"כ לא מומלץ לכתוב אלמנטים ללא תגית סוגרת. אך למרות זאת, קיימים אלמנטים שאינם דורשים תגית פותחת, הם נקראים אלמנטים ריקים, דוגמא לאלמנט מהסוג הזה הוא אלמנט שבירת השורה (Break):
10. 10

    Step 10

    
    This is just text
    some more text
11. 11

    Step 11

    
    כך זה יראה על הדפדפן
12. 12

    Step 12

    אלמנט הBreak, "שבר" את השורה - אלמנט זה הכרחי למעבר שורה כאשר כותבים טקסט ללא תגיות. במקרה ולא היינו מוסיפים את התגית
    , זה היה נראה כך:
13. 13

    Step 13

    
    This is just text some more text
14. 14

    Step 14

    
    ללא אלמנט הBreak, אין מעבר בין השורות.
15. 15

    Step 15

    עכשיו, אנחנו יודעים כיצד נראה אלמנט וקצת על החוקיות שבשימוש של אלמנטים, ניתן להתקדם קצת ולתת טיפה יותר כוח לאלמנט על ידי הוספת מאפיינים (Attributes) דוגמא לשימוש במאפיין:
16. 16

    Step 16

    
    This is a link to bekaloot
17. 17

    Step 17

    
    האלמנט שלנו במקרה זה הוא האלמנט a המייצג קישור. לתגית הפותחת שלו הוספנו את המאפיין href ולו נתנו ערכים על ידי שימוש בסימן `=` ובסימני הגרשיים סביב הערך עצמו, כלומר: "href="XXXXX.com . הטקסט אחרי הסוגר הפותח ייצג את הקישור בדפדפן.
18. 18

    Step 18

    קיימים המון סוגים של אלמנטים ומאפיינים שונים עליהם נעבור בהמשך.