Get Adobe Flash player
דף הבית קישורים קישורים - בסיס

היפרטקסט (HyperText) או 'קישוריות', הוא חלק מהותי של HTML.

טקסט מקושר (Linked Text), מאפשר לקורא לעבור לקובץ אחר ע"י לחיצת עכבר על מילה, ביטוי או תמונה, הכלולים במסמך.

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

הקובץ אליו מוליך הקישור יכול להיות מכל סוג שהוא.

אם הדפדפן יודע להציג אותו (למשל קובץ HTML, קובץ תמונה, יישומים שונים כ Office, Acrobat או אחרים) הוא יוצג ישירות על המסך. אם הדפדפן אינו יודע להציגם, למשל קובצי הפעלה (exe), קבצים מכווצים או יישומים מיוחדים, הקובץ יישמר בדיסק הקשיח במתכונת של 'שמור בשם' (Save As) בדרך הידועה יותר בשם 'הורדה' או ‘Download’.

התג לביצוע קישור נקרא <a> ולו ארבע תכונות:

Href – תכונה למתן הכתובת אליה מפנה הקישור.

Target – ערך תכונה זו מצביע על מיקום פתיחת קובץ. Target="_blank" למשל, יפתח את הקובץ בחלון דפדפן חדש.

Title - הפעלת ToolTip.

Name – משמש כסימנייה לקישורים פנימיים. ראו בהמשך הפרק. 

תכונת href 

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

הקובץ הזה יכול להיות במחשב של המשתמש - ואז הכתובת תהיה בהתאם, או שהוא נמצא באיזה שהוא מקום ברחבי הרשת - ואז הכתובת תכלול את ההודעה שיש לפנות אל התקשורת (http://) ולאחריה את שם הדומיין, התיקייה (לפעמים) ושם הקובץ - גם כן לפי הצורך.

דוגמאות לקישורים: 

<a href=”http://www.cnn.com”> הפניה אל אתר

<a href=”my_site/index.htm”> הפנייה אל קובץ במחשב

<a href=”#”> קישור "מדומה". כתיבת # במקום ה URL, יוצרת אלמנט שמגיב כאילו היה קישור, אך ללא הפנייה כלשהי

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

הסבר התג

התג הוא תג מכולה. והוא עובד בדרך הבאה:

תוצאהביטול התגהאלמנט ללחיצהתג הקישור
שמוליקלופדיה </a> שמוליקלופדיה <a href="http://calltuv.co.il">
  </a> <img src="flag.gif" /> <a href="http://knesset.gov.il">

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

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

קישור אל קובץ אחר

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

 

תרגיל:

  • צור קובץ וקרא לו first.html. תן לו כותרת (h1) שנושאה: "הקובץ הראשון". תן לדף צבע רקע כלשהו.
  • הוסף לקובץ קישור באמצעות טקסט "עבור אל הקובץ השני". הקישור יוביל אל קובץ שנקרא second.html
  • שמור את הקובץ תחת שם אחר - שמו של הקובץ אליו יצרת את הקישור בסעיף הקודם - second.html.
  • שנה את הכותרת ל"הקובץ השני", שנה את צבע הרקע ותקן את הקישור כך שהוא יוביל אל הקובץ הראשון
  • בדוק שלחיצה על הקישור בקובץ הראשון מעלה את הקובץ השני, ולהיפך.

 עיצוב הקישור

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

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

הגדרות אלה ניתנות לשינוי אולם הן חלות על הדף כולו.

הגדרת הצבע נעשית באופן אוטומטי ע"י הדפדפן (בדפדפן אינטרנט אקספלורר: tools, Internet options, General, colors) אך ניתן לשנותם סאופן ספציפי לדף שלך.

את צבע הקישורים, ותכונות נוספות (שינוי גודל, הופעת או העלמת קו תחתי וכו') עדיף לבצע באמצעות CSS. שפת HTML הגדירה 3 תכונות השייכות לתג <body>, אך הן עומדות להתבטל, ובעתיד הן תעלמנה. להלן רשימת תכונות זו:

  • תכונת link מגדירה צבע לקישור חדש.
  • תכונת alink מגדירה צבע לקישור הפעיל ברגע זה (Active Link).
  • תכונת vlink מגדירה צבע לקישור שכבר ביקרו בו <Visited Link)

 <Body Link=”green” alink=”Yellow” vlink=”red”>

קישור באמצעות תמונה

כאשר האלמנט עליו לוחצים הינו תמונה, צריך לקחת בחשבון את תכונת שינוי הצבעים (מכחול לסגול). תמונה המשמשת קישור תקבל מסגרת כחולה (המקבילה לקו התחתי של הקישור) שיהפוך סגול אחרי שהקישור כבר הופעל. למניעת תופעה זו ישצורך להגדיר בצורה מפורשת: border="0"

תמונות אצבע (Thumbnail)

תמונות אצבע או "תמונות כפתור" ובאנגלית Thumbnail, הוא כינוי לתמונה ממוזערת המשמשת כ"כפתור" לצורך קישור.

הקטנת התמונה מעשית ע"י שינוי בהתאמה של מידות התמונה.

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

הפקודה לתמונה כזו תהיה:

<a href=”scorpio.gif”><img src=”scorpio.if” width=”50” height=”50”></a>

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

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

קישור אל אתר FTP

שרת FTP (File Transfer Protocol), מיועד לאחסון קבצים גדולים המיועדים להורדה ע"י הגולשים. היתרון בשרת זה היא שמהירות ההורדה ואבטחת תקינות המידע העובר גבוהים יותר מאלה של אתר רגיל.

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

  • הבדל בפרוטוקול התקשורת אותו מפעיל המחשב.
    הפעלת התקשורת נעשית בחלקו הראשון של ה-URL. בתקשורת לאתר רגיל אנו כותבים http:// קיצור של (Hyper Text Transfer Protocol). להפעלת פרוטוקול FTP אנו כותבים ftp://.
  • הבדל באותיות שבתחילת ה URL.
    אתרי הרשת מתחילים ב WWW (למרות שכיום ניתן ברוב המקרים לוותר על תחילית זו). הגישה לשרתי FTP מאופיינת בתחילית ftp.

בדוגמא שלפניכם, יש קישור אל מסמך להורדה משרת ה-FTP של מיקרוסופט

<a href=ftp://ftp.microsoft.com/MISC/NBFCP.TXT>לחץ להורדת המסמך</a>

קישור אל דואר אלקטרוני

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

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

<a href=”mailto: כתובת דוא"ל זו מוגנת מפני spambots, יש לאפשר JavaScript על-מנת לראות את הכתובת >שלח לי דואר </a>

הערה: ההפניה, הנקודתיים  והכתובת המצורפת, ירשמו ברציפות וללא רווחים!

 

הרחבת המידע שבמייל:

הוספת תו '?' מאפשרת פתיחת אזור חדש בהוראה. לאחריו אפשר להוסיף subject (נושא), cc (עותק) ו-bcc (עותק נסתר). בין האלמנטים השונים יש להכניס את התו &. 

בדוגמא הבאה נשלח מייל אל כתובת דוא"ל זו מוגנת מפני spambots, יש לאפשר JavaScript על-מנת לראות את הכתובת , נכתוב בנושא: דואר שנשלח מהאתר", ונוסיף גם כתובות בעותק ובעותק הנסתר.

<a href=”mailto: כתובת דוא"ל זו מוגנת מפני spambots, יש לאפשר JavaScript על-מנת לראות את הכתובת ?subject=תגובה מהאתר&cc= כתובת דוא"ל זו מוגנת מפני spambots, יש לאפשר JavaScript על-מנת לראות את הכתובת &bcc= כתובת דוא"ל זו מוגנת מפני spambots, יש לאפשר JavaScript על-מנת לראות את הכתובת >שלח לי דואר </a>

הערה חשובה: כל הכיתוב שבתוך ה href חייב להיות באותיות קטנות, ברצף וללא כל רווח.

 

אל השיעור הבא