תגיות נוספות ותכונות | שפת HTML

מוטי אורן

תגיות נוספות ותכונות ב - HTML

--
בואו נכיר עוד כמה תגיות חשובות ב HTML.

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

הדוגמה הפשוטה לתגית כזאת היא התגית <img>, שמגדירה תמונה. וכך המסמך שלנו בתוספת התגית img ייראה:

<!DOCTYPE html>
<html>
  <head>
    <title>html document</title>
  </head>
  <body>
    <h1>html document</h1>
    <p>this is my first html document</p>
    <img>
  </body>
</html>

כעת בטח תשאלו, אוקיי, אבל איך מגדירים איזו תמונה המסמך שלנו יציג? ובדיוק בשביל זה יש לנו עוד מושג חדש שנקרא באנגלית – Attributes, ובעברית – תכונות.

התחביר של תכונה לתגית HTML הוא כזה:

<"img attribute="value>

ובנוגע אלינו, התכונה שמעניינת אותנו היא src, בעברית "מקור", מקור לתמונה, שהדפדפן יטען אותה משם. ולמעשה:

<"img src="path/to/the/image.jpg>

שימו לב מה היה פה. הגדרנו את התגית img, לאחר מכן נתנו לו תכונה src, את הערך של התכונה כתבנו בתוך המרכאות. הערך במקרה הזה הוא הנתיב לתמונה. זה יכול להיות קישור אינטרנטי לתמונה, וזה יכול להיות נתיב מקומי לתמונה במחשב שלנו.

בואו נתקדם. התגים ב – HTML מתחלקים ל2 קבוצות נוספות.

1: תגיות inline – תגיות שלא תופסות שורה שלמה,

2: תגיות Block – תגיות שתופסות את השורה.

תגית <p> לשם הדוגמה, היא תגית מסוג block. נסו לשים שתי תגיות p, ותראו לבד שהם מופרדות אחת מהשנייה עם ריווח. מהסיבה הפשוטה שתגית p היא תגית block שתופסת את השורה של עצמה.

אם תשימו שתי תגיות img אחת אחרי השנייה, תראו שזו תגית מסוג inline, שניהם יישארו באותה שורה.

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

תפקידה של התגית הזאת הוא קישורים בדף האינטרנט.

התחביר שלה הוא כזה:

<a href="www.google.com">go to google</a>

בואו נעבור על זה. פתחנו עם הגדרת התגית a, לאחר מכן נתנו לו תכונה שנקראת href שאומרת לאיפה היעד של הקישור (כמו שאתם בטח רואים היעד הוא www.google.com), ובין התגית הפותחת והסוגרת מופיע המשפט שאנחנו רוצים שלחיצה עליו תוביל לקישור המוגדר.

טוב, לסיכום:

למדנו על תכונות לתגיות HTML,

למדנו על שתי סוגים בתגיות, 1: תגית פותחת ותגית סוגרת 2: תגית שאינה נסגרת.

למדנו על עוד שתי סוגים של תגיות,

1: inline tag

2: block tag

ובקיצור, נתראה במדריך הבא. ושיהיה בהצלחה!
נ.ב. אשמח להערות והארות.

יהושע זופניק

@מוטי-אורן יופי של מדריך! תודה רבה רבה אין עליך רק לא ממש הבנתי :

@מוטי-אורן אמר בתגיות נוספות ותכונות | שפת HTML:

2: תגית שאינה נסגרת.

איפה יש תגית שאינה נסגרת?

מוטי אורן

@יהושע-זופניק שים לב לתגית <img> אין לה תג סוגר.