לימוד HTML חלק 15: הדרכה כיצד ליצור קישורים ב- HTML

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

הקישור משמש כקשר בין אחדדף עם עמוד אחר. באופן ברור יותר, השימוש בקישורים ב- HTML הוא לקשר את מסמך ה- HTML לעמוד אחר שהוא כתובת היעד. קישור הוא טקסט או תמונה המשויכים לכתובת מסוימת. כדי שתבינו טוב יותר את החומר "קישור", שקול את ההסבר שלהלן:

א. שימוש בתג <a>

השימוש בקישורים במסמכי HTML מצוין על ידיהשימוש באלמנטים של עוגן, כלומר תגיות מזוודות <( …… </a>. בדפדפנים, בדרך כלל קישורים מסומנים בטקסט כחול עם קו תחתון. אם תלחץ על טקסט או תמונה המכילים קישור, נתיב הקישור ייפתח בכרטיסייה עצמה או בלשונית חדשה. התכונות הכלולות בתג <a> הן כדלקמן:

תכונה	פונקציה
href	מציין את מיקום מסמך היעד
מזהה	קשר גיליונות סגנון (CSS) או סמן מיקומים בעמוד
hreflang	מציין את השפה המשמשת
סוג	רשמו הערות לגבי סוג התוכן של מסמך היעד
מסילות	תאר את הקשר של המסמך הנוכחי עם מסמך היעד
עורכת דין	תאר את הקשר בין מסמך היעד למסמך המקורי
ערכת חרס	מציין את אופי קידוד מסמך האינטרנט
כותרת	מספק כותרת של קישור בסמל הכלים

להלן דוגמה פשוטה לשימוש בקישורים ב- HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Anda sedang belajar HTML di blog <a href="https://www.nesabamedia.com">Nesaba Media</a></p>
</body>
</html>

לאחר שתריץ את קוד ה- HTML למעלה בדפדפן הוא יופיע כמוצג להלן:

ב. תכונה מזהה

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

כדי להקל על ההבנה, נסה לכתוב "#about" על התכונה href בקישור וכתוב את התכונה id = "about" בתג <p>. לדוגמאות לכתיבת קוד תוכלו לראות להלן:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Klik <a href="#tentang">Tentang</a> untuk mengetahui informasi mengenai Nesaba Media</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="tentang">Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.</p>
</body>
</html>

התוצאות בדפדפן יהיו כאלה:

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

ג. תכונת כותרת

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

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<a href="https://id.wikipedia.org/wiki/Soekarno">Biografi</a>
</body>
</html>

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

ד. הבדלים בקישורים חיצוניים ובקישורים מקומיים

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

<!DOCTYPE html>
<html>
<head>
<title>External Link</title>
</head>
<body>
<p>Untuk mengetahui informasi lengkap mengenai Bill Gates, klik <a href="https://en.wikipedia.org/wiki/Bill_Gates">Biografi</a></p>
</body>
</html>

לאחר הפעלת קוד ה- HTML בדפדפן, הוא ייראה להלן:

בניגוד לקישור המקומי המשמש לפתיחת דף אינטרנט באותו אתר או שורש מסמך. לדוגמא כתובת האתר שלך www.nesabamedia.com ובאתר יש דף בשם belajarpiano.html. אם אתה רוצה ליצור קישור לדף זה, אינך צריך לכתוב את כתובת האתר המלאה כמו www.nesabamedia.com/belajarpiano.html במאפיין href, פשוט כתוב belajarpiano.html רק. דוגמאות לכתיבה כמפורט להלן:

<!DOCTYPE html>
<html>
<head>
<title>Local Link</title>
</head>
<body>
<p>Klik <a href="belajarpiano.html">link ini</a> untuk membaca tutorial belajar piano yang benar</p>
</body>
</html>

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

אז הנה, בואו נגיד שאני כרגעערוך את הקובץ שנקרא webku.html ואני רוצה ליצור קישור שמצביע על דף הסיפור שלי.html, אז אני רק צריך לכתוב את קוד ה- HTML כך:

<a href="cinta/kisahku.html">

בהנחה שאני עדיין עורכת את קובץ ה- web.html שלי, אך הפעם אני רוצה ליצור קישור שמצביע על דף הקריירה שלי, html, אז קוד ה- HTML יהיה כך:

<a href="bisnis/karirku.html">

עדיין עורך את קובץ ה- web.html שלי. אם אני רוצה ליצור קישור שמצביע לדף post.html, קוד ה- HTML הוא כזה:

<a href="posting.html">

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

יצירת תמונות כקישורים

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

<!DOCTYPE html>
<html>
<head>
<title>Gambar sebagai Link</title>
</head>
<body>
<p>Klik tombol dibawah ini jika anda ingin membaca halaman posting.<br>
<a href="posting.html"><img src="/images/tombol.jpg" alt="halaman posting"></a>
</p>
</body>
</html>

לאחר שתריץ את קוד ה- HTML בדפדפן, הוא נראה להלן:

כשתלחץ על תמונת הכפתור, תעשה זאתהופנה לדף post.html. אה כן, לכתיבת <img scr = "כתובת תמונה" ... וודא שהיא נכונה, אם זה לא נכון התמונה לא תופיע. בקוד ה- HTML למעלה, הקובץ tombol.jpg הכנסתי אותו לתיקיה אחת עם קובץ ה- html, אז פשוט כתבתי <img src = "button.jpg" ... אין צורך לכתוב את הכתובת המלאה של קובץ התמונה. ולגבי קובץ ה- HTML כיניתי אותו gambar.html ואילו קובץ התמונה ששמתי הכפתור.

אם אתה מבין את מושג הקישורים המקומיים עליהם דיברתי בעבר, לא תתבלבל בשלב זה.

ד. תכונת יעד בקישור

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

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

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

להלן דוגמה לקוד הכתיבה ושימוש בתכונה target = "_ blank" ב- HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Target _blank</title>
</head>
<body>
Baca selengkapnya mengenai tutorial HTML hanya di <a href="https://www.nesabamedia.com" target="_blank">Nesaba Media</a>
</body>
</html>

לאחר הרצת הקוד הקוד בדפדפן הוא יופיע כמוצג להלן: