קישורים ב - HTML5

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

דוגמת קוד לקישור טקסטואלי

<body>
   <a href="http://www.codeanan.co.il">my blogs</a>
</body>

   

קישורי תמונה

מתחת לדוגמת הקוד שלמעלה ודאי יכולתם לראות את הכפתור "נסו בעצמכם>>". כפתור זה הוא בעצם תמונה שהיא גם קישור. שפת HTML מאפשרת להפוך כל תמונה לקישור. הדרך לעשות זאת היא על ידי הכנסת התג <img> אל תוך התג <a> כפי שניתן לראות בדוגמת הקוד הבאה:

דוגמת קוד לקישור העושה שימוש בתמונה:

<a href="http://www.devschool.co.il">
  <img src="logo.png" alt="Devschool" width="100" height="32" />
</a>

   

קישורים ממקום אחד בדף למקום אחר באותו דף

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

כדי ליצור קישור ממקום אחד בדף למקום אחר עלינו לבצע שתי פעולות: האחת, לסמן את המקום שאליו נרצה להגיע עם הקישור שלנו ואילו השנייה לכתוב קישור שיביא אותנו בדיוק לנקודה הנדרשת. ב - HTML5 נעשה זאת באמצעות התכונה ID הקיימת בכל אלמנט בשפת HTML. בדוגמת הקוד הבאה נשתמש בתכונה ID כדי ליצור סימניה (bookmark) בדף שלנו שלאחר מכן נרצה "לקפוץ" אליה באמצעות קישור.

דוגמת קוד לסימון אלמנט בדף שאליו נרצה להגיע באמצעות הקישור שלנו:

<h1 id="perek16">Chapter 16</h1>

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

דוגמת קוד לקישור לאלמנט ספציפי בתוך דף שונה מהדף שמכיל את הקישור:

<a href="www.devschool.co.il/home.aspx#perek16">פרק 16</a>

כפי שביכולתכם לראות התכונה href של האלמנט <a> קיבלה את כתובתו המלאה של הדף שאותו רצינו ובסוף הכתובת הוספנו את ה - ID של האלמנט שאותו נרצה להציג ולפניו סולמית.

קישור למשלוח דואר אלקטרוני (Mailto link)

קישורי Mailto הם קישורים שלחיצה עליהם תגרום לפתיחה אוטומטית של חלון שליחת דואר אלקטרוני (במידה ובמחשב הלקוח מותקנת תוכנת דוא"ל). מעבר לפתיחה אוטומטית של טופס הדוא"ל ביכולתנו לגרום לכך שאלמנטים שונים המרכיבים דואר אלקטרוני סטנדרטי יקבלו את הערכים שאנו מעוניינים בהם. למשל, ביכולתנו לשלוט בכל סוגי הכתובות למשלוח (To, Cc, Bcc) כמו גם בנושא (Subject) ואף בתוכן שיוצג בגוף הדוא"ל.

דוגמת קוד לקישור Mailto:

<a href="mailto:support@mail.com?cc=cc@mail.com&bcc=bccw@mail.com&subject=mailto subject&body=this is the body of the mail.">Support</a>

   

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

באינטרנט תוכלו למצוא מחוללי קוד HTML שונים שיכולים לעשות את עבודת כתיבת קוד ה - Mailto במקומכם. המומלץ שבהם נמצא בכתובת הבאה: Best Mailto Code Generator.

האופן שבו ייפתח מסמך מתוך קישור

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

  1. blank_ - יגרום לפתיחת מסמך המטרה בחלון חדש.
  2. parent_ - יגרום לפתיחת מסמך המטרה בתוך ה - frameset שממנו הוא נפתח.
  3. self_ - יגרום לפתיחת מסמך המטרה בתוך אותו חלון או frame שבו הקישור נמצא. זהו ערך ברירת המחדל.
  4. top_ - יגרום לפתיחת המסמך בתוך כל גוף החלון.

דוגמת קוד לקישור העושה שימוש בערך blank_:

<a href="http://www.devschool.co.il" target="_blank">Devschool</a>

   

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

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

NoFollow קישור רגיל עם
<a href="YourPage.html" rel="nofollow">Google won't follow this link</a>
NoFollow מטה תג עם
<meta name="robots" content="nofollow" />

השימוש ב - nofollow מקל מאוד על מנהלי אתרים למנוע מעקב  של מנועי חיפוש אחר קישורים בודדים, וזו הסיבה ליצירת ערך התכונה nofollow של התכונה rel.  השימוש בערך nofollow חשוב במיוחד נגד נסיונות ספאם ופעילות של קידום אתרים במקומות שבהם אתרים מאפשרים לגולשים להוסיף תכנים. למשל בתגובות למאמרים ובלוגים, סוגי wiki שונים, אתרי web 2.0 ועוד.

הערך  nofollow הינו יוזמה של google אולם הוא מוכר ומקובל כיום על מנועי החיפוש הגדולים האחרים כגון: בינג, יאהו ועוד.

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

 

עיצוב קישורים

באמצעות CSS ניתן להרחיב את עיצובם של קישורים בדף HTML. המדריכים הבאים עוסקים בכל הדרכים לעיצוב קישורים:


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש