Facebook
Twitter
RSSמדריך HTML – קישורים
כמעט בכל דף באינטרנט יש קישורים (links) שמובילים לדפים אחרים, ולפעמים לאיזור אחר באותו עמוד. קישוריות כותבים בעזרת התגית <a> (קיצור של המילה anchor). התג הזה מקבל מאפיין href, שהוא מקבל את הכתובת אליה אנו רוצים לשלוח את הגולש.
<a href="https://www.webmaster.org.il">זהו קישור לאתר וובמאסטר</a>
והתוצאה בדפדפן:
נשים לב שהטקסט “זהו קישור לאתר וובמאסטר” הוא קישור – צבעו שונה מהצבע הרגיל של טקסט, יש לו קו תחתון וכאשר עובדים מעליו עם העכבר משתנה הסמן לסימן של יד וכן בתחתית הדפדפן מופיעה כתובת היעד אליה מוביל הקישור.
כמובן שניתן בתוך הקישור לכתוב לא רק טקסט, אלא לשים תמונה, לדוגמא:
<a href="http://www.webmasters.org.il">
<img src="https://webmaster.org.il/images/logo.gif"
alt="אתר וובמאסטר" />
</a>
והתוצאה:
שימו לב! קישור שלא יכיל את הקידומת http://, יחשב ע"י הדפדפן כקישור פנימי באתר. כלומר, אם האתר שלכם נמצא בכתובת http://www.url.co.il/mysite והקישור מוביל ל www.walla.co.il, הדפדפן ינסה למצוא אתר שכתובתו היא http://www.url.co.il/mysite/www.walla.co.il ותגיעו לכתובת הלא נכונה.
קישורים פנימיים באותו דף
ישנם מצבים בהם נרצה ליצור קישור למיקומים שונים בתוך אותו דף. שימוש נפוץ הוא במאמר ארוך ליצור מעין תוכן עניינים בראש הדף שמפנה לפרקים שבו.
לדוגמא, נתבונן בדף ה- HTML הבא המייצג מאמר טיפוסי:
<!DOCTYPE html>
<html>
<head>
<title>קישורים פנימיים</title>
</head>
<body dir="rtl">
<h1>מאמר מעניין</h1>
<p>למאמר מספר חלקים:</p>
<h2>מבוא</h2>
<p>זהו פרק המבוא בו אני מביא מעט רקע על הנושא</p>
<h2>פרק 1</h2>
<p>זהו גוף המאמר בו אני מספר סיפור מעניין מאד!</p>
<h2>סיכום</h2>
<p>זהו פרק הסיכום בו אני מגיע למסקנות חשובות</p>
</body>
</html>
בהצגתו בדפדפן, יראה הדף כך:
ניתן לראות שלמאמר כותרת (מאמר מעניין) ומספר תתי פרקים (מבוא, פרק 1 וסיכום).
נרצה להוסיף בראש המאמר מעין תוכן עניינים המאפשר לקורא להגיע בקלות לחלקים השונים במאמר מבלי הצורך לגלול ולחפש אותם.
כדי לעשות זאת, נוסיף id לכותרות המשנה במאמר:
<h2 id="intro">מבוא</h2>
<p>זהו פרק המבוא בו אני מביא מעט רקע על הנושא</p>
<h2 id="chapter1">פרק 1</h2>
<p>זהו גוף המאמר בו אני מספר סיפור מעניין מאד!</p>
<h2 id="summary">סיכום</h2>
<p>זהו פרק הסיכום בו אני מגיע למסקנות חשובות</p>
כעת, נוסיף בראש המאמר את ההפניות למיקומים הפנימיים באותו דף:
<h1>מאמר מעניין</h1>
<p>למאמר מספר חלקים:</p>
<a href="#intro">מבוא</a><br />
<a href="#introchapter1">פרק 1</a><br />
<a href="#summary">סיכום</a><br />
נשים לב שהדרך לפנות לקישור פנימי היא ע”י התו # בצירוף ה- id של האלמנט אליו נרצה להגיע בעת לחיצה על הקישור.
בדפדפן זה יראה כך:
בעת הצבעה על הקישור “מבוא” בתוכן העניינים רואים שהקישור מוביל לאותו דף (index2.html) בצירוף # והמזהה intro.
סוגי קישורים נוספים
ראינו שהסימן # אומר לדפדפן שהכתובת הבאה היא בעצם שם של עוגן בדף. ניתן גם להשתמש בטכניקה הזאת כדי להגיע למקום ספציפי בדף אחר, ככה:
<a href="someOtherPage.html#anchor">אל העוגן.</a>
ניתן לכתוב גם קישורים לדואר אלקטרוני, שבלחיצה עליהם יפעילו את תוכנת הדוא"ל של הגולש. הקישור הזה נכתב כך:
<a href="mailto:[email protected]">שלח דוא"ל</a>
מילת המפתח mailto: היא שגורמת לדפדפן לזהות שמדובר בקישור לדוא"ל, ולפתוח את תוכנת הדוא"ל של הגולש.
דוגמאות לקישורים:
תגובות בפייסבוק