HTML/טקסט

עד עכשיו למדנו תגים שמיועדים לעיצוב הטקסט כמו b, i, big, small וכו'. תגים אלו אמורים לצאת משימוש בגרסאות הבאות של HTML ולפנות את מקומם לעיצוב בעזרת CSS. יחד עם זאת, HTML מציע תגים רבים שנותנים משמעות לטקסט שהם מכילים, כמו האלמנט abbr שמעיד על הטקסט שבתוכו שהוא קיצור, או האלמנט strong שמצביע על כך שהטקסט שבתוכו צריך להיות חזק. בדפדפנים ויזואליים חזק הוא מודגש, אך במקריאי מסך, ובדפדפנים לעוורים, חזק הוא בקול רם. לא בכל הדפדפנים חזק יהיה מודגש לעתים חזק יהיה נטוי או אדום, וזהו ההבדל העיקרי בין האלמנט b שהוא עיצובי לבין האלמנט strong שהוא משמעותי.

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

abbr

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

abbr אמור להכיל טקסט שהוא קיצור של משהו, או ראשי-תיבות. abbr מכיל קיצור/ראשי-תיבות שיש להקריא את הנוסח המלא שלו בזמן הדיבור. (למשל: ר"ת אומרים 'ראשי תיבות').

ערך המאפיין title צריך להיות הנוסח המלא של הקיצור.

דפדפנים מציגים את ה-title כשהעכבר מרחף מעל הקיצור. יחד עם-זאת אין שום אינדיקציה למשתמש, כמו קו-תחתי מקוקוו למשל, שיש פירוש לקיצור. זאת ניתן לעשות עם css.

<abbr title="World Wide Web">WWW</abbr>

WWW

acronym

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

acronym אמור להכיל טקסט שהוא קיצור של משהו, או ראשי-תיבות. acronym מכיל קיצור/ראשי-תיבות שיש להקריא את הנוסח המקוצר שלו בזמן הדיבור (למשל: מ"כ אומרים 'מכ', ש"ג אומרים 'שין גימל'). תג זה שימושי לקיצורים צבאיים.

ההבדל בין abbr ו- acronym הוא קטן והוא בא לידי ביטוי במקריאי מסך. ב-abbr יוקרא ה-title (הנוסח הארוך) וב-acronym יוקרא התוכן (הנוסח הקצר).

ערך המאפיין title צריך להיות הנוסח המלא של הקיצור.

דפדפנים מציגים את ה-title כשהעכבר מרחף מעל הקיצור. יחד עם-זאת אין שום אינדיקציה למשתמש, כמו קו-תחתי מקוקוו למשל, שיש פירוש לקיצור. זאת ניתן לעשות עם css.

<acronym title="Hyper Text Markup Language">HTML</acronym>

HTML

address

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

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

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

<address>
<b>משכן הכנסת</b><br />
קרית בן-גוריון<br />
ירושלים<br />
<i>מיקוד: 91950</i>
</address>

משכן הכנסת

קרית בן-גוריון
ירושלים

מיקוד: 91950

blockquote

אלמנט מסוג גוש.
מאפיינים כלליים (ליבה, שפה ואירוע).
תוכן מסוג גוש בלבד! (אין להכניס בו טקסט!).
מאפיין cite.

בדומה לאלמנט q גם blockquote משמש לציין שתוכנו הוא ציטוט מאתר אחר. אך בניגוד ל-q:

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

יחד עם זאת אין להשתמש ב-blockquote ליצירת שוליים ולכן אם רוצים את השוליים ואת שורות הרווח יש ליצור אותם בעזרת CSS. ולהשתמש ב-blockquote רק כאשר מצטטים.

במאפיין cite ניתן את הקישור לאתר שממנו נלקח הציטוט.

<p>מתוך פו הדוב עמ' 28</p>
<blockquote cite="http://he.wikiquote.org/wiki/%D7%A4%D7%95_%D7%94%D7%93%D7%91">
  <p>הן שאלתי: </q>האם יש משהו בבית?<q> קרא פו בקול רם.</p>
  <p><q>לא!</q> השיב קול מן המאורה, ואחר הוסיף</p>
  <p><q>מה לך צווח ככה? שמעתיך היטב בפעם הראשונה</q></p>
</blockquote>

מתוך פו הדוב עמ' 28

הן שאלתי: "האם יש משהו בבית?" קרא פו בקול רם.

"לא!" השיב קול מן המאורה, ואחר הוסיף

"מה לך צווח ככה? שמעתיך היטב בפעם הראשונה"

q

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

בדומה לאלמנט blockquote גם q משמש לציין שתוכנו הוא ציטוט מאתר אחר. אך בניגוד ל-blockquote:

אלמנט q הוא אלמנט מסוג שורה.
יש להשתמש בו כאשר הציטוט קצר והוא חלק מהשורה.
מבחינה עיצובית, הדפדפן אמור להקיף את הציטוט בגרשיים, וכאשר שמים q בתוך q, תוכן ה-q הפנימי מוקף בגרש בודד (ציטוט בתוך ציטוט). לא כל הדפדפנים אכן מקיפים את הציטוט בגרשיים - לפרטים על הבעיה, ואיך ניתן לעקוף אותה בעזרת סגנונות, ניתן לקרוא כאן http://diveintomark.org/archives/2002/05/04/the_q_tag

במאפיין cite ניתן את הקישור לאתר שממנו נלקח הציטוט.

<p>
מתוך פו הדוב עמ' 28:
  <q cite = "http://he.wikiquote.org/wiki/%D7%A4%D7%95_%D7%94%D7%93%D7%91">
    הן שאלתי: <q>האם יש משהו בבית?</q> קרא פו בקול רם. 
    <q>לא!</q>השיב קול מן המאורה, ואחר הוסיף
    <q>מה לך צווח ככה? שמעתיך היטב בפעם הראשונה</q>
  </q>.
</p>
</blockquote>

מתוך פו הדוב עמ' 28: "הן שאלתי: 'האם יש משהו בבית?' קרא פו בקול רם. 'לא!' השיב קול מן המאורה, ואחר הוסיף 'מה לך צווח ככה? שמעתיך היטב בפעם הראשונה' ".

cite

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

אלמנט זה מעיד על תוכנו שהוא שם של מקור: ספר, עבודה או אתר אינטרנט. ניתן להשתמש בו כשמציינים רשימת מקורות, ונהוג גם להשתמש בו בתחתית הדף, מתחת לקו מפריד <hr /> כדי לציין בעלות על האתר.

<p>רשימת מקורות:</p>
<ul>
  <li>  <cite>פו הדוב, א.א.מילן</cite>  </li>
  <li>  <cite>ויקיציטוט</cite>  </li>
</ul>
<hr />
<cite>ויקיספר</cite>

רשימת מקורות:

פו הדוב, א.א.מילן
ויקיציטוט

ויקיספר

code

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

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

<code>for (i=0;i<10;i++) printf("%d\n",i);</code>

for (i=0;i<10;i++) printf("%d\n",i);

יש לשים לב שכאשר כותבים קוד HTML בתוך אלמנט code, כדי לכתוב ספר HTML למשל, הדפדפן יפרש את הקוד! להלן דוגמה:

<code><b>כך מדגישים טקסט</b></code>

כך מדגישים טקסט

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

dfn

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

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

<dfn>תפוד</dfn>הוא תפוח אדמה

תפוד הוא תפוח אדמה

em

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

משמש לציין שאת התוכן יש לקרוא בהדגשה (הבלטה). בדרך כלל הביטוי העיצובי הוא הטייה של הטקסט.

אני <em> לא מאמינה</em>!

אני לא מאמינה!

strong

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

משמש לציין שאת התוכן יש לקרוא חזק יותר. בדרך כלל הביטוי העיצובי הוא הדגשה של הטקסט.

אני <strong> לא מאמינה</strong>!

אני לא מאמינה!

ניתן לומר ש-strong הוא הדגשה חזקה יותר מאשר em

pre

מאפיין נחוץ: xml:space עם ערך קבוע preserve! לא לשכוח!
אלמנט מסוג גוש.
מאפיינים כלליים (ליבה, שפה ואירוע).
תוכן מסוג טקסט וסוגי תגים רבים. ראה את מפרט האלמנט.

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

<pre xml:space="preserve">
    שמירה    על    רווחים    ומעברי     שורה
כמו כן <b> תגים מסויימים </b> עדיין פעילים.
</pre>


    שמירה    על    רווחים    ומעברי    שורה

כמו כן תגים מסויימים עדיין פעילים.

kbd

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

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

הקלד את שם המשתמש: <q><kbd>ישראל ישראלי</kbd></q>

הקלד את שם המשתמש: "ישראל ישראלי"

samp

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

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

כדאי לשלב דגנים וקטניות. דוגמה טובה לכך היא <samp>לחם וחומוס</samp>

כדאי לשלב דגנים וקטניות. דוגמה טובה לכך היא לחם וחומוס

var

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

משמש לציין שהתוכן הוא משתנה בתוכנה (variable). ההשפעה העיצובית היא שימוש בגופן רוחב אחיד.

בדוגמה שלפניכם השתמשנו במאפיין השפה dir על מנת לציין לדפדפן שיש להציג את המשתנים משמאל לימין. המאפיין dir הוא חלק מהמאפיינים הכלליים.

ב-PHP המשתנה <var dir="ltr">$_GET</var> הוא מערך שמכיל את כל השדות שנשלחו ב-get 
והמשתנה <var dir="ltr">$_POST</var> הוא מערך שמכיל את כל השדות שנשלחו ב-post.

ב-PHP המשתנה $_GET הוא מערך שמכיל את כל השדות שנשלחו ב-get והמשתנה $_POST הוא מערך שמכיל את כל השדות שנשלחו ב-post.

ins

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

משמש לציין שהתוכן הוכנס בהשוואה לגרסה קודמת של המסמך.

המאפיין cite יכול להכיל קישור למסמך שמסביר מדוע הטקסט הוכנס.
המאפיין datetime יכול להכיל את תאריך ההכנסה בפורמט YYYYMMDD.

על מנת להדגיש טקסט יש להשתמש 
<del datetime="20060514" 
     cite="http://he.wikibooks.org/w/index.php?title=HTML/טקסט#var"> באלמנטים b ו- i </del>
<ins datetime="20060514" 
     cite="http://he.wikibooks.org/w/index.php?title=HTML/טקסט#var"> באלמנטים em ו- strong</ins>.

על מנת להדגיש טקסט יש להשתמש ~~באלמנטים b ו- i~~ באלמנטים em ו- strong.

del

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

משמש לציין שהתוכן נמחק בהשוואה לגרסה קודמת של המסמך.

המאפיין cite יכול להכיל קישור למסמך שמסביר מדוע הטקסט נמחק.
המאפיין datetime יכול להכיל את תאריך המחיקה בפורמט YYYYMMDD.

על מנת להדגיש טקסט יש להשתמש 
<del datetime="20060514" 
     cite="http://he.wikibooks.org/w/index.php?title=HTML/טקסט#var"> באלמנטים b ו- i </del>
<ins datetime="20060514" 
     cite="http://he.wikibooks.org/w/index.php?title=HTML/טקסט#var"> באלמנטים em ו- strong</ins>.

על מנת להדגיש טקסט יש להשתמש ~~באלמנטים b ו- i~~ באלמנטים em ו- strong.

ניווט

הפרק הקודם:
היכרות עם המאפיינים הכלליים

אלמנטים בעלי משמעות של טקסט
תרגילים

הפרק הבא:
יצירת מבניות במסמך