הוסף קישור לתמונה ב- HTML

מְחַבֵּר: Christy White
תאריך הבריאה: 12 מאי 2021
תאריך עדכון: 1 יולי 2024
Anonim
How To Use An Image As A Link In HTML
וִידֵאוֹ: How To Use An Image As A Link In HTML

תוֹכֶן

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

לדרוך

שיטה 1 מתוך 2: כתוב את קוד ה- HTML

  1. צור קובץ HTML. פתח עורך טקסט ואז צור קובץ חדש. שמור את הקובץ כ- index.html.
      • אתה יכול להשתמש בכל עורך טקסט שאתה רוצה, אפילו בעורכי הטקסט הפשוטים של Windows (Notepad) ו- Mac OS X (TextEdit).
      • אם ברצונך להשתמש בעורך טקסט המיועד לעבודה עם HTML, לחץ כאן להורדת Atom, עורך טקסט עבור Windows, Mac OS X ו- Linux.
      • אם אתה משתמש ב- TextEdit, לחץ על תפריט Format לפני יצירת קובץ ה- HTML, ואז לחץ על Make Text רגיל. הגדרה זו מבטיחה שקובץ ה- HTML נטען כראוי בדפדפן אינטרנט.
      • מעבדי תמלילים כגון Microsoft Word אינם ממש טובים לכתיבת HTML מכיוון שהם מוסיפים תווים ועיצוב בלתי נראים שיכולים להשחית את קובץ ה- HTML ולהפוך אותו לתצוגה שגויה בדפדפן אינטרנט.
  2. העתק והדבק את קוד ה- HTML הסטנדרטי. בחר והעתק את קוד ה- HTML למטה והדבק אותו באינדקס שנפתח. HTML.

    a href = "url target"> img src = "url image" /> / a>

  3. מצא את כתובת האתר של התמונה שלך. מצא תמונה באינטרנט, לחץ עליה באמצעות לחצן העכבר הימני ו (תלוי בדפדפן שלך) לחץ על העתק כתובת אתר של תמונה, העתק כתובת תמונה או העתק מיקום תמונה.
      • Firefox ו- Internet Explorer משתמשים בהעתקת מיקום תמונה. Chrome משתמש בכתובת URL של העתקת תמונה. Safari משתמש בהעתקת כתובת תמונה.
  4. הוסף את כתובת האתר של התמונה. בקובץ index.html לחץ וגרור כדי לבחור את כתובת האתר של התמונה בעזרת העכבר שלך, ואז הקש CTRL + V כדי להדביק את כתובת האתר.
  5. הוסף את כתובת אתר היעד. ב- index.html מחק את כתובת אתר היעד והקלד https://www.startpage.com.
      • ניתן להשתמש בכל כתובת אתר ככתובת היעד.
  6. שמור את קובץ ה- HTML.
  7. פתח את קובץ ה- HTML בדפדפן אינטרנט. לחץ לחיצה ימנית על index.html ואז פתח קובץ זה בדפדפן האינטרנט על פי בחירתך.
      • אם הדפדפן נפתח אך אינך רואה את התמונה, ודא שאייתת נכון את שם קובץ התמונה בקובץ index.html.
      • כאשר הדפדפן נפתח, אך אתה רואה קוד HTML במקום תמונת הרקע, index.html שלך נשמר כקובץ .rtf (קובץ טקסט עשיר). נסה לערוך את קובץ ה- HTML בעורך טקסט אחר.

שיטה 2 מתוך 2: הבנת קוד HTML

  1. הבן את תג העוגן. קוד HTML מורכב מתגי פתיחה וסגירה. התג a href = ""> הוא תג ההתחלה, ו / a> הוא תג הסיום. זה נקרא תג עוגן ומשמש להוספת קישורים לדף אינטרנט.
    • ה א אומר לדפדפן ליצור קישור. ה href הוא קיצור להתייחסות ל- HTML, ה- = אומר לדפדפן לשנות הכל בין ’ ’ ליצור קישור. ניתן להציב כל כתובת אתר בין שני המרכאות.
    • ה / a> אומר לדפדפן שתג העוגן סגור.
    • כשמוסיפים טקסט בין a href = ""> ו / a> הטקסט הופך לקישור שניתן ללחיצה עליו בדף אינטרנט. לדוגמה: a href = "https://www.google.com"> Google / a> יוצר קישור לגוגל.
  2. הבן את תג התמונה. תג img> הוא תג סגור. ניתן לסגור אותו באמצעות img src = "" /> או img src = ""> / img>.
    • ה img תג אומר לדפדפן להציג תמונה. ה src הוא קיצור של מקור, דה = אומר לדפדפן למחוק את כל מה שבין ’ ’ ואחזר את התמונה ממיקום זה.
    • ה /> אומר לדפדפן לסגור את תג התמונה.
    • לדוגמא: {samp [} מקבל את התמונה מאותה כתובת אתר ואז מציג אותה בדפדפן אינטרנט.
  3. השתמש בקוד זה בכל מקום. עכשיו שאתה יודע את הקוד הזה, אתה יכול a href = "url target"> img src = "url image" /> / a> להוספת תמונות שניתן ללחוץ עליהן לכל דף אינטרנט עם קוד HTML.