הרשם

התחבר

התחבר בעזרת פייסבוק:

שם משתמש סיסמא
זכור אותי

אוריגמי - קטגורית האוריגמי הגדולה בישראל

יצירה לילדים ולמבוגרים - באתר מדריכי יצירה שידהימו אתכם מחדש כל פעם

אוהבים מתוקים? לחצו בשביל עשרות מדריכי עוגות ועוגיות

‹ ›

יכול לעניין אתכם

מדריך HTML מספר 1 - הכרות

מאת: בקלות טכני

מדריך HTML מספר 3 - כותרות (title and headings)
מאת: בקלות טכני

מדריך HTML מספר 4 - עיצוב טקסט

מאת: בקלות טכני

מדריך HTML מספר 5 - תמונות (Img and src)

מאת: בקלות טכני

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.
מאת: בקלות טכני

איך לבחור ולקנות שם לאתר שלך (Domain name)
מאת: בקלות טכני

איך לבחור לוגו

מאת: בקלות טכני

איך לשמור על אבטחת מידע בכתיבת אתר PHP

מאת: גיא חלפון

מדריך HTML מספר 1 - הכרות

מאת: בקלות טכני

מדריך HTML מספר 8 - רשימות (lists)

מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> בניית אתרים >> מדריך HTML מספר 2 - אלמנטים (Elements) ומאפיינים (Attributes)

מחשבים

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

עקוב

29/05/2011 13:07:28
מאת: בקלות טכני
כתב מתחיל

דירוג:

(1מדרגים)

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

רמת קושי: מתחילים

הוראות:

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

This is an element.

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

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

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

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

This is just text without tags
This is paragraph without a closing tag

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

<p> <html> </p>
<p> <body> </p>
<p> This is just text </br> some more text </p>
<p> </body> </p>
<p> </html></p>

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

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

<p> <html> </p>
<p> <body> </p>
<p> This is just text </p>
<p> some more text </p>
<p> </body> </p>
<p> </html></p>

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

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

<p> <html> </p>
<p> <body></p>
<p> <a href='http://www.bekaloot.co.il'>This is a link to bekaloot</a> </p>
<p> </body> </p>
<p> </html> </p>

<html>
<body>
<a href='http://www.bekaloot.co.il'>This is a link to bekaloot</a>
</body>
</html>

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

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

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

הוסף למועדפים שלחו לחבר הדפיסו את המדריך

ראיתם משהו שאהבתם? יש לכם שאלה? כתבו תגובה

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.

איך לבחור ולקנות שם לאתר שלך (Domain name)

איך לבחור לוגו

איך לבחור את האיחסון (Hosting) שמתאים לך.

עוד מדריכים בנושא זה