תגיות HTML בסיסיות

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

תגית סוגרת הינה פשוט </tag-identifier> .

הנה דוגמה להמחשה באמצעות התגית <p> המייצגת פיסקה (Paragraph):


<p>
First paragraph - for real this time.
</p>

<p>
Second paragraph - La la la la la.
</p>


ואנו מקבלים את:

שתי פסקאות ללא תגיות P

כפי שניתן לראות הפעם קיבלנו שתי פיסקאות נפרדות. זאת משום שהדפדפן זיהה את התגית <p> כתוחמת של פיסקה. כל מה שבין התגית הפותחת לסוגרת נחשב כתוכן של הפסקה.

עכשיו בו נכיר תגית נוספת המאפשרת לנו לסמן טקסט כקישור. לתגית קוראים "a" (קיצור של "Anchor") והיא מקבלת תכונה בשם href כפרמטר. הבא נראה אותה בפעולה:


<p>
Here is a link: <a href="http://www.w3.org/">The World-Wide-Web Consortium</a>.
</p>

<p>
And here is another link - <a href="http://en.wikipedia.org/wiki/HTML">the
    English Wikipedia Article about HTML</a>.
</p>


דוגמה לתגית "a"

כפי שניתן לראות מה שבתוך תגיות ה-"a" סומן כקישור, כאשר הקישור מצביע למה שבתוך תכונת ה-"href". ראוי לציין שכאשר יש לסגור מספר תגים יש לסגור אותם בסדר הפוך מהסדר בו הם נפתחו, באופן כזה שיהיה לנו עץ מקונן.

לסיום החלק הזה, אנו נשחק במספר תגיות נוספות לשם עיצוב הדף:

  1. <b> - לשם הפיכת טקסט למעובה. ("bold")

  2. <i> - לשם הפיכת טקסט למוטה. ("italics")

הנה הדוגמה:


<p>
<i>Alice</i> was beginning to get very tired of sitting by her sister
on the bank, and of having nothing to do: once or twice she had peeped
into the book her sister was reading, but it had no pictures or
conversations in it, "and what is the use of a book," thought Alice,
"without <b>pictures</b> or <b>conversation?</b>"
</p>

<p>
From <a href="http://www.gutenberg.org/etext/11">Alice's
    Adventures in Wonderland - Chapter 1</a>.
</p>



דוגמה לגופן מעובה ונטוי

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

בפרק הבא נראה כיצד לכתוב מסמך HTML מלא באופן כזה שיהיה מסמך תקין העובר ולידציה.