כדי ליצור קישור בתמונה באמצעות HTML עליך קודם כל לפתוח את דף סטדרטי של html. אפשר לעשות זאת באמצעות עורך דפי html מקצועי או דרך תוכנה פשוטה שקייםמת בכל מערכת הפעלה חלונאית NotePad. כדי להכניס תמונה לדף עם קישור לא דורש ידע תכני רב, אלה זו היא פעולה שניתן ללמוד אותה וליישם אותה בתוך שניות או דקות ספורות. תלמידים שעוברים את קורס בניית אתרים, כבר בשיעורים הראשונים מתנסים בטכניקות כאלה. קישורים בתמונות משתמשים במצבים כאשר מעוניינים שבאתר ילחצו על תמונה והוא יעביר את הגולש לעמוד אחר באתר או אתר אינטרנט שונה. זה רק חלק מהדברים שניתן לעשות באמצעות יצירת קישור בתמונה באמצעות html. לפני שנתחיל עם מדריך קצר ל- איך יוצרים קישור בתמונה באמצעות html ברצוני להבהיר ששימוש בתמונה כקישור להפניה לעמוד אחר משתמשת לא רק עבור תמונות אלה במקרים רבים גם לצורך נווט באתר. קיימים אתרים רבים כאשר תפריטי נווט שלהם הם תמונה, וכאשר לוחצים עליה מעוברים לעמוד אחר באתר. השיטה הזאת אינה מומלצת ממבט של מקדם אתרים, אבל כמובן יש לזה גם פיתרום גם עבור תחום שנקרא קידום אתרים אבל כמובן זה נושא בפני עצמו ונתיחס לנושאים כאלה במאמרים אחרים.
[adsense]
אז איך יוצרים קישור בתמונה באמצעות html ?
כפי שציינתי קודם כל אנחנו חייבים עמוד html בסיסי סטנדרטי כדי להתחיל לעבוד בצורה מקצועית ומסודרת. כאן תמצא את קוד של דף html. עתק אותו לתוכנת עריכה שבה אתה משתמש או ל-NotePad.
- <html>
- <head>
- <title>Demo Webist</title>
- </head>
- body>
- <p>
- <img src="http://webist.co.il/banners/125×125-webist/webist-banner.jpg"/>
- </p>
- </body>
- </html>
כעת נא לשמור את קובץ הנ"ל שיצרנו בשם – Index.html במחשב.
גש לאותו קובץ ונמשיך לערוך אותו.
בין תגית פתיחה וסגירה של אנחנו נכניס את התמונה בצורה הבא:
- <img src="http://www.google.co.il/logos/2010/thailandday10-hp.jpg" width="80px" height="100px" />
הסבר: תגית img מסמן את אובייקט התמונה בדף שיוצג בדפדפן שלך. Src מסמן את נתיב לתמונה. Width ו- Height מסמנים את גודל התמונה. כמובן ניתן להסיר אותם. בדוגמה הנ"ל גודל התמונה מוצגת בפיקסלים. ניתן להגדיר אותו גם באמצעות אחוזים. ז"א אם תמונה גדולה מדי, אנחנו יכולים להגדיר את גודל המדויק שהיא תופיע באתר.
יצירת קישור לתמונה : כדי ליצור קישור ניגש שוב לאלמנט התמונה בעמוד ונוסיף לפניו אתבסוף אלנט התמונה נוסיף תגית סגירה של הקישור:
- </a>
תוצאה סופית צריכה להיראות כאן:
- <title>Demo Webist</title>
- <a href="http://webist.co.il"><img src="http://www.google.co.il/logos/2010/thailandday10-hp.jpg" width="80" height="100" /></a>
שלב אחרון:
כעת נא לשמור את הקובץ עם כל ההגדרות בקובץ בשם index.html. פתח את קובץ בדפדפן וצפה בתוצאה הסופית.
היום לא קיים אתר (כימט ולא) שאינה משתמש בקישורים בתוך התמונות לכל מני מטרות באם זה לנווט באתר או הפניות לאתרים אחרים. התמונה יכולה לשמש כאלמט גרפי באתר אינטרנט או כבנר פרסומי. בוני אתרים שעוסקים בתחום בניית אתרים משתמשים בזה כל הזמן בדפי נחיתה, באתרים פרסומיים או שילוב בין קישור המופיע בתמונה לבין שפת תכנות Javascript הנותן תוצאות אחרות שלא נכנס לדוגמאות בנושא זה כרגע. בכל מקרה מקווה שקיבלת כאן את התשובה שחיפשת בנוגעה ליצירת קשירו בתמונה בתוך דף html.
למרות הכל, כמובן חלקכם מי שרק נכנס לתחום ואינו מכיר את כל העולם המורכב הזה שנקרא אינטרנט, אתרים אינם בנוים רק מדפי html. זה אכן מה שאתם מקבלים בסופו של דבר לדפדפן שלכם כתוצאה מבבקשה דפדפן שלך שולח לשרת שבו מאוחסן האתר ומשם הדפדפן שלך מקבל תשובה בצורת דף html כאשר הוא יודע לפענח את הקוד הכתוב ולהציג אותו במסך. כיום במיוחד שאנחנו בעידן הווב 2.0, אתרי אינטרנט מפותחים בשפות אחרות שאינם html. אני מדבר על סביבות פיתוח כמו ASP.net או שפת PHP עם מסדי נתונים MySQL וכו'. העידן האינטרנטי שלנו מאוד דינמי, וכל הזמן הדברים משתנים. הטכנולוגיה ה-HTML-ית היא סטטית. זאת אומרת, מה שאתה רואה זה מה שאתה מקבל, כל עוד לא תשנה אותו ידנית. היא אינה כוללת פנל ניהול לניהול האתר באמצעות ממשק ניהול מאובטח. לדוגמה במידה וברצונך להחליף תמונה או קישור בתמונה באתר עליך להיכנס לקוד ה-html של אותו הדף ולשנות את נתיב של התמונה או קישור של אותה התמונה בצורה ידנית. זה אינו קורה באתרים שנכתבו לדוגמה בשפת Php. זהו שפה שבאמצעותו מפתחים מערכות ניהול תוכן ואפליקציות ווב בעיקר. אבל כמובן פיתוח מערכות ניהול תוכן לצורך בניית אתרים מתחילה משפת html בסיסית וכמובן שבהתחלה אתה חייב להבין את הדברים הבסיסיים שבשפה כמו איך יוצרים קישור בתמונה בדף html.
אבל בטח אתה שואל, מה הקשר בין מה שנאמר כאן לתמונה שמופיע בצד ?
תשובה: אחרי מספר שורות של קוד, במיוחד לבוני אתרים מתחילים שרוצים לעסוק בתחום של בניית אתרים זה קצת מבהיל, לכן אני מאמין שתמונה הנ"ל מוריד את הפחד מהקוד בשלב זה.
לשאלות, אזור התגובות פתוח למטה.