HTML/הוספת קישורים

הוספת קישור

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

נעשה זאת על ידי שימוש באלמנט a.

נשתמש במאפיין href כשערכו הוא כתובת הדף אליו אנחנו מקשרים.

תוכן האלמנט הוא הכיתוב המקושר שלנו.

בדוגמה הבאה נקשר לאתר ויקיספר העברי שכתובתו היא: http://he.wikibooks.org.

דוגמה:

<a href="http://he.wikibooks.org">קישור לאתר ויקיספר
</a>

פלט:

קישור לאתר ויקיספר

• גם אלמנט a כמו האלמנטים img, br ו- b הוא אלמנט מסוג שורה ואסור לו להופיע ישירות בתוך body.

קישור מתמונה

בעזרת שני האלמנטים שלמדנו, a ו- img ניתן ליצור קישור מתמונה. לחיצה על התמונה תוביל אותנו לדף החדש.

נעשה זאת באמצעות קינון תג img בתוך אלמנט a - תוכן האלמנט a לא יהיה טקסט אלא תג תמונה.

דוגמה

<a href="http://he.wikibooks.org">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/70/Wikibooks-logo-he.png" alt="ויקיספר העברי" />
</a>

פלט:

___

הרחבה - איך לקרוא מפרטים

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

זאת נלמד בחלק זה, בעזרת המפרטים של האלמנטים a ו- img אותם תוכלו למצוא כאן: XHTML10STRICT/a וכאן XHTML10STRICT/img.

שמו של ספר המפרט הוא XHTML10STRICT והוא אינו ידידותי למשתמש, אך הוא מכיל מידע מעניין מאוד למתכנת, על כל תג ותג.

חלק ראשון במפרט - מאפיינים נחוצים

לא לכל האלמנטים יש מאפיינים נחוצים, אך לאלו שיש להם מאפיינים כאלה, חובה להשתמש בהם. לאלמנט a אין כאלה, אך ניזכר בפרק הקודם ונראה כיצד כתובים המאפיינים הנחוצים של האלמנט img.

דוגמה מתוך המאפיין img:

• alt סוג: טקסט (מחרוזת). ערך המאפיין הוא תיאור התמונה והוא יוצג בעת טעינת התמונה, ובדפדפנים שאינם תומכים בהצגת תמונות. כמו כן תיאור התמונה שימושי למנועי חיפוש, ולעזרים של מוגבלי ראיה.
• src סוג: קישור (מחרוזת). ערך המאפיין הוא קישור לקובץ התמונה.

סוג המאפיין מורכב משני חלקים. הראשון הוא משמעות סוג המאפיין. במאפיין alt מדובר בטקסט פשוט. במאפיין src מדובר בקישור לקובץ תמונה. בתוך הסוגריים מצויין סוג המשתנה האמיתי, במקרה הזה 'מחרוזת' בשני המאפיינים. 'מחרוזת' היא פשוט טקסט.

לעתים נראה במקום סוג, משהו כמו 'מאפיין חובה עם ערך קבוע:"..."' המשמעות היא, שחובה להשתמש במאפיין עם הערך הקבוע המצויין במרכאות, כמו למשל באלמנט הבסיס, XHTML10STRICT/html.

חלק שני במפרט - מאפיינים

דוגמה מתוך המאפיין a:

• מאפיינים כלליים:
  • מאפייני ליבה: id, class, style, title.
  • מאפייני שפה: lang, xml:lang, dir.
  • מאפייני אירוע: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
• מאפייני מיקוד: accesskey, tabindex, onfocus, onblur.
• charset - סוג: קידוד (מחרוזת).
• coords - סוג: קורדינטות (מחרוזת).
• href - סוג: קישור (מחרוזת).
• hreflang - סוג: מזהה שפה (אסימון).
• name - סוג: אסימון.
• rel - סוג: סוגי קישורים (מחרוזת).
• rev - סוג: סוגי קישורים (מחרוזת).
• shape - ערך ברירת מחדל: "rect" סוג: צורה (רשימת ערכים: rect : circle : poly : default).
• type - סוג: סוג תוכן (מחרוזת).

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

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

חלק שלישי במפרט - תוכן

דוגמה מתוך המאפיין a:

אפס או יותר צאצאים מתוך הרשימה הבאה (תוכן רשות):

• טקסט (#PCDATA).
• אלמנטים מסוג מיוחד:

br, span, bdo, map, object, img.

• אלמנטים מסוג סגנון:

tt, i, b, big, small.

• אלמנטים מסוג ביטויים:

em, strong, dfn, code, q, samp, kbd, var, cite, abbr, acronym, sub, sup.

• אלמנטים מסוג רכיבי טופס:

input, select, textarea, label, button.

• אלמנטים מסוג שונות שורה:

ins, del, script.

ליתר דיוק - ביטוי רגלורי: ...

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

כפי שלמדנו, נזהה בחלק זה שמותר לטקסט (PCDATA), ולתמונה (אלמנט img) להיות צאצאים של a.

שימו לב לשורה הראשונה: PCDATA. הכוונה היא ל-Parsed Character DATA - או טקסט מפוענח. כך נקרא טקסט פשוט ברוב המקרים, והכוונה היא כי מוחלפים בו התגים שאנו רושמים בעיצוב המתאים, והוא מפוענח על ידי הדפדפן. כאשר שורה זו מופיעה, המשמעות היא שמותר לתת לתג תוכן טקסטואלי. (לתג body, למשל, אסור).

סוג נוסף של טקסט הוא CDATA ובמקרה הזה הכוונה היא לטקסט לא מפוענח. בשלב זה לא תתקלו בו ברשימת התוכן המותר.

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

החלק הרביעי - רשימת האבות

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

דוגמה מתוך a:

קבוצת אבות 1: abbr, acronym, address, b, bdo, big, caption, cite, code, dfn, dt, em, h1, h2, h3, h4, h5, h6, i, kbd, label, legend, p, q, samp, small, span, strong, sub, sup, tt, var
, קבוצת אבות 3: dd, del, div, ins, li, td, th
, fieldset, object, pre.

ניווט

הפרק הקודם: הוספת תמונות

הוספת קישורים תרגילים

הפרק הבא: עיצוב - המשך