קישורים

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

תג העוגן <a>, יחד עם המאפיין href, יוצרים היפר-קישור. קישורים הם הבסיס של האינטרנט. דף האינטרנט הראשון הכיל 25 קישורים, עם הכיתוב "Everything there is online about W3 is linked directly or indirectly to this document". סביר להניח שכל מה שמופיע באינטרנט על W3 מקושר ישירות או בעקיפין גם מהמסמך הזה.

היכולות של האינטרנט והתג <a> התרחבו מאוד מאז שטים ברנרס-לי פרסם את ההסבר הראשון הזה באוגוסט 1991. קישורים מייצגים קשר בין שני מקורות מידע, שאחד מהם הוא המסמך הנוכחי. אפשר ליצור קישורים באמצעות <a>,‏ <area>,‏ <form> ו<link>. במאמר הזה למדתם על <link>, ובקטע נפרד מוסבר על טפסים. יש גם קטע שלם בנושא טפסים. בסשן הזה נסביר על התג <a> שמורכב מאות אחת בלבד, אבל הוא לא כל כך פשוט.

המאפיין href

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

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

הקישור הראשון כולל כתובת URL מוחלטת, שאפשר להשתמש בה בכל אתר בעולם כדי לנווט לדף הבית של MLW. כתובות URL מוחלטות כוללות פרוטוקול, במקרה הזה https://, ושם דומיין. כשכותבים את הפרוטוקול כ-//, זהו פרוטוקול מרומז, והמשמעות היא "שימוש באותו פרוטוקול שנעשה בו שימוש פעיל".

כתובות URL יחסיות לא כוללות פרוטוקול או שם דומיין. הם 'יחסיים' לקובץ הנוכחי. ‫MLW הוא אתר בדף יחיד, אבל בסדרת ה-HTML הזו יש כמה חלקים. כדי ליצור קישור מהדף הזה לשיעור בנושא מאפיינים, נעשה שימוש בכתובת URL יחסית <a href="../attributes/">Attributes</a>.

הקישור השני הוא רק מזהה מקטע של קישור, והוא יקשר לרכיב עם id="teachers", אם יש כזה בדף הנוכחי. בדפדפנים יש גם תמיכה בשני קישורים לראש הדף: לחיצה על <a href="#top">Top</a> (לא תלוי באותיות רישיות) או אפילו רק על <a href="#">Top</a> מחזירה את המשתמש לראש הדף, אלא אם יש רכיב עם המזהה top שמוגדר באותיות רישיות זהות.

MLW הוא מסמך ארוך למדי. כדי לחסוך בגלילה, אפשר להוסיף קישור בחזרה לחלק העליון מהחלק התחתון של הקטע #teachers:

<a href="#top">Go to top.</a>

הקישור השלישי משלב את שני הערכים: הוא מכיל כתובת URL מוחלטת ואחריה פרגמנט של קישור. האפשרות הזו מאפשרת לקשר ישירות לקטע בכתובת ה-URL שהוגדרה, במקרה הזה, לקטע #teachers בדף הבית של MLW. הדף MLW נטען והדפדפן גולל לקטע של המורים, בלי לשלוח את הפרגמנט בבקשת ה-HTTP.

הערך של מאפיין href יכול להתחיל ב-mailto: או ב-tel: כדי לשלוח אימייל או לבצע שיחות. אופן הטיפול בקישור תלוי במכשיר, במערכת ההפעלה ובאפליקציות המותקנות.

הקישור mailto לא חייב לכלול כתובת אימייל, אבל הוא יכול לכלול אותה, יחד עם הטקסטים cc,‏ bcc,‏ subject ו-body כדי לאכלס מראש את האימייל. כברירת מחדל, תיפתח תוכנת אימייל. אפשר לאכלס מראש את שורת הנושא ואת גוף האימייל בלי כתובת אימייל, כדי לאפשר למבקרים באתר להזמין את החברים שלהם. בקישור שלנו, בכותרת התחתונה של המסמך, אנחנו כוללים את כתובת ה-URL לרישום:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

סימן השאלה (?) מפריד בין mailto: לבין כתובת האימייל, אם יש כזו, לבין מונח השאילתה. בתוך השאילתה, סימני אמפרסנד (&) מפרידים בין השדות, וסימני שווה (=) משווים בין כל שם שדה לערך שלו. כל המחרוזת מקודדת בפורמט percent-encoded, וזה בהחלט נחוץ אם הערך של href לא תחום במירכאות או אם הערכים כוללים מירכאות.

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

יש עוד כמה סוגים של כתובות URL, כמו blobs וכתובות URL של נתונים (דוגמאות מופיעות בהסבר על מאפיין download). באתרים מאובטחים (שמוצגים באמצעות https), אפשר ליצור ולהפעיל פרוטוקולים ספציפיים לאפליקציות באמצעות registerProtocolHandler().

כשמוסיפים קישורים שסביר להניח שיפתחו אפליקציות מותקנות אחרות, מומלץ ליידע את המשתמשים. חשוב לוודא שהטקסט שבין תגי הפתיחה והסגירה מסביר למשתמש איזה סוג קישור הוא עומד להפעיל. אפשר להשתמש בסלקטורים של מאפיינים ב-CSS, כמו [href^="mailto:"], ‏ [href^="tel:"] ו-[href$=".pdf"], כדי לטרגט סגנונות לפי סוג האפליקציה.

משאבים שניתנים להורדה

צריך לכלול את מאפיין download כשמאפיין href מצביע על משאב שאפשר להוריד. הערך של מאפיין ההורדה הוא שם הקובץ המוצע של המשאב שיישלח למערכת הקבצים המקומית של המשתמש. ‫SVGOMG, הכלי לאופטימיזציה של SVG, משתמש במאפיין download כדי להציע שם קובץ ל-blob שאפשר להוריד ושנוצר על ידי הכלי לאופטימיזציה. כשמבצעים אופטימיזציה של hal.svg, תג הפתיחה של קישור ההורדה של SVGOMG דומה ל:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

יש גם הדגמה של <canvas> שיוצרת כתובת URL של נתונים בפורמט PNG שאפשר להוריד.

כדי לקשר למשאב שאפשר להוריד, צריך לכלול את כתובת ה-URL של הנכס כערך של מאפיין href ואת שם הקובץ המוצע למשתמש כערך של מאפיין download.

הקשר גלישה

המאפיין target מאפשר להגדיר את הקשר של הגלישה לניווט בקישור (ולשליחת טופס). ארבע מילות המפתח שמתחילות בקו תחתון, לא תלויות באותיות רישיות וקטנות, הוזכרו בהקשר של רכיב <base>. למשל:

• (ברירת מחדל) _self: פתיחת הקישור בחלון הנוכחי.
• ‫_blank: פתיחת הקישור בכרטיסייה חדשה.
• ‫_parent: פתיחת הקישור באובייקט ההורה או ב-iframe.
• ‫_top: פתיחת הקישור ברכיב העליון ביותר בהיררכיה. האפשרות הזו שימושית במיוחד אם הקישור מוטמע עמוק.

אם הקישור לא מוטמע, הפעולות של _top ו-_parent זהות לפעולה של _self. המאפיין target לא מוגבל לארבעת מונחי המפתח האלה: אפשר להשתמש בכל מונח.

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

כדי לפתוח קישור בכרטיסייה חדשה, המשתמש יכול ללחוץ לחיצה ימנית ולבחור באפשרות 'פתיחה בכרטיסייה חדשה'. מפתחים יכולים לכפות את הפעולה הזו על ידי הוספת target="_blank".

קישור עם target="_blank" נפתח בכרטיסייה חדשה ללא שם, וכל קליק על קישור פותח כרטיסייה חדשה ללא שם. יכול להיות שייווצרו הרבה כרטיסיות חדשות. יותר מדי כרטיסיות. לדוגמה, אם המשתמש לוחץ על <a href="registration.html" target="_blank">Register Now</a> 15 פעמים, טופס ההרשמה ייפתח ב-15 כרטיסיות נפרדות. כדי לפתור את הבעיה הזו, צריך לספק שם של הקשר לכרטיסייה. אם כוללים את targetהמאפיין עם ערך שרגיש לאותיות רישיות, כמו <a href="registration.html" target="reg">Register Now</a>, הקליק הראשון יפתח את טופס ההרשמה בכרטיסייה חדשה reg. אם תלחצו על הקישור הזה עוד 15 פעמים, ההרשמה תיטען מחדש בהקשר הגלישה reg בלי לפתוח כרטיסיות נוספות.

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

אפשר לכלול את מילת המפתח nofollow אם לא רוצים שסורקים יעקבו אחרי הקישור. אפשר להוסיף את הערך external כדי לציין שהקישור מפנה לכתובת URL חיצונית ולא לדף בדומיין הנוכחי. מילת המפתח help מציינת שההיפר-קישור יספק עזרה בהתאם להקשר. כשמעבירים את העכבר מעל קישור עם הערך rel, הסמן משתנה לסמן עזרה במקום לסמן הרגיל. אל תשתמשו בערך הזה רק כדי להציג את סמן העזרה. במקום זאת, השתמשו במאפיין cursor ב-CSS. אפשר להשתמש בערכים prev ו-next בקישורים שמפנים למסמך הקודם ולמסמך הבא בסדרה.

בדומה ל-<link rel="alternative">, המשמעות של <a rel="alternative"> תלויה במאפיינים אחרים. פידים חלופיים של RSS יכללו גם את type="application/rss+xml" או את type="application/atom+xml, פורמטים חלופיים יכללו את המאפיין type, ותוכן מתורגם יכלול את המאפיין hreflang. אם התוכן שבין תגי הפתיחה והסגירה הוא בשפה שונה מהשפה הראשית של המסמך, צריך לכלול את המאפיין lang. אם השפה של המסמך שמקושר באמצעות היפר-קישור שונה מהשפה של המוצר, צריך לכלול את מאפיין hreflang.

בדוגמה הזו, אנחנו כוללים את כתובת ה-URL של הדף המתורגם כערך של href, rel="alternate" כדי לציין שזו גרסה חלופית של אתר. המאפיין hreflang מציין את שפת התרגומים:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

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

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

מעקב אחרי קליקים על קישורים

אחת הדרכים לעקוב אחרי אינטראקציות של משתמשים היא לשלוח פינג לכתובת URL כשלוחצים על קישור. המאפיין ping, אם הוא קיים, כולל רשימה של כתובות URL מאובטחות (שמתחילות ב-https) שמופרדות ברווחים. המערכת שולחת להן התראה או פינג אם המשתמש מפעיל את ההיפר-קישור. הדפדפן שולח בקשות POST עם גוף הבקשה PING לכתובות ה-URL שמופיעות כערך של מאפיין ping.

טיפים לשיפור חוויית המשתמש

• תמיד צריך להביא בחשבון את חוויית המשתמש כשכותבים HTML. הקישורים צריכים לספק מספיק מידע על המשאב המקושר כדי שהמשתמש ידע על מה הוא לוחץ.
• בתוך בלוק טקסט, המראה של הקישורים צריך להיות שונה מספיק מהטקסט שמסביב, כדי שהמשתמשים יוכלו לזהות בקלות את הקישורים מתוך התוכן. משתמשים בכמה אינדיקטורים חזותיים, כמו צבע וקו תחתון. הצבע לבדו לא מספיק.
• תמיד כוללים סגנונות של הדגשה. כך משתמשים שמנווטים באמצעות המקלדת יכולים לדעת איפה הם נמצאים כשהם עוברים בין רכיבי התוכן באמצעות מקש Tab.
• התוכן שבין התג הפותח <a> לתג הסוגר </a> הוא שם הקישור שמוגדר כברירת מחדל ונגיש, והוא אמור ליידע את המשתמש לגבי היעד או המטרה של הקישור. אם התוכן של הקישור הוא תמונה, התיאור alt הוא השם שקל לגשת אליו. הטקסט של הקישור והטקסט של alt צריכים להיות תיאוריים יותר מאשר "לחצו כאן" או "מידע נוסף". במקום זאת, צריך להציג למשתמש מידע על המקום שאליו הוא יגיע כשהקישור יופעל. היא חשובה במיוחד למשתמשים בקורא מסך ולתוצאות של מנועי חיפוש.
• אל תכללו תוכן אינטראקטיבי, כמו <button> או <input>, בתוך קישור. בנוסף, אסור להוסיף קישור בתוך תג <button> או <label>. הדף ב-HTML יוצג, אבל הטמעה של רכיבים שניתן להתמקד בהם ורכיבים שאפשר ללחוץ עליהם בתוך רכיבים אינטראקטיביים יוצרת חוויית משתמש לא טובה.
• אם המאפיין href קיים, לחיצה על מקש Enter בזמן שהמיקוד נמצא על הרכיב <a> תפעיל אותו.
• הקישורים לא מוגבלים ל-HTML. אפשר להשתמש באלמנט a גם בתוך SVG, כדי ליצור קישור באמצעות המאפיינים href או xlink:href.

קישורים ו-JavaScript

המאפיין links מחזיר רכיב HTMLCollection שתואם לרכיבים a ו-area שיש להם מאפיין href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

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

בדיקת ההבנה

בודקים את הידע שלכם בנושא קישורים.