پیوندی به یک تصویر در HTML اضافه کنید

نویسنده: Christy White
تاریخ ایجاد: 12 ممکن است 2021
تاریخ به روزرسانی: 1 جولای 2024
Anonim
نحوه استفاده از تصویر به عنوان پیوند در HTML
ویدیو: نحوه استفاده از تصویر به عنوان پیوند در HTML

محتوا

با یک خط کد HTML ، می توانید تقریباً به هر وب سایتی یک تصویر قابل کلیک اضافه کنید. برای ساخت این کار به دو چیز نیاز دارید. شما به یک URL برای تصویر و همچنین URL یک وب سایت نیاز دارید.

گام برداشتن

روش 1 از 2: کد HTML را بنویسید

  1. یک فایل HTML ایجاد کنید. ویرایشگر متن را باز کنید و سپس یک پرونده جدید ایجاد کنید. پرونده را به عنوان index.html ذخیره کنید.
      • می توانید از هر ویرایشگر متنی که می خواهید استفاده کنید ، حتی از ویرایشگرهای متنی ساده Windows (Notepad) و Mac OS X (TextEdit).
      • اگر می خواهید از ویرایشگر متن در نظر گرفته شده برای کار با HTML استفاده کنید ، برای بارگیری Atom ، ویرایشگر متن برای ویندوز ، Mac OS X و Linux اینجا را کلیک کنید.
      • اگر از TextEdit استفاده می کنید ، قبل از ایجاد فایل HTML روی منوی Format کلیک کنید ، سپس روی Make Plain Text کلیک کنید. این تنظیم بارگذاری صحیح فایل HTML در یک مرورگر وب را تضمین می کند.
      • پردازنده های کلمه ای مانند Microsoft Word برای نوشتن HTML در واقع خوب نیستند ، زیرا آنها نویسه ها و قالب بندی های نامرئی را اضافه می کنند که می تواند فایل HTML را خراب کرده و به صورت نادرست در مرورگر وب نمایش داده شود.
  2. کد استاندارد HTML را کپی و جایگذاری کنید. کد HTML را در زیر انتخاب و کپی کرده و در index.html باز شده خود جای گذاری کنید.

    a href = "url target"> img src = "url تصویر" /> / a>

  3. آدرس اینترنتی تصویر خود را پیدا کنید. تصویری را در وب پیدا کنید ، روی آن کلیک راست کرده و (بسته به مرورگر خود) روی گزینه Copy Image URL ، Copy Image Image یا Copy Image Image کلیک کنید.
      • Firefox و Internet Explorer از کپی کردن مکان تصویر استفاده می کنند. Chrome از نشانی اینترنتی تصویر کپی استفاده می کند. سافاری از آدرس تصویر کپی استفاده می کند.
  4. URL تصویر را اضافه کنید. در پرونده index.html ، کلیک کرده و بکشید تا URL تصویر با موس انتخاب شود ، سپس CTRL + V را فشار دهید تا URL چسبیده شود.
  5. URL هدف را اضافه کنید. در index.html آدرس هدف را حذف کرده و تایپ کنید https://www.startpage.com.
      • شما می توانید از هر URL به عنوان URL مورد نظر استفاده کنید.
  6. فایل HTML را ذخیره کنید.
  7. فایل HTML را در یک مرورگر وب باز کنید. بر روی index.html کلیک راست کرده و سپس این پرونده را در مرورگر وب مورد نظر خود باز کنید.
      • اگر مرورگر باز شد اما تصویر را مشاهده نکردید ، مطمئن شوید که نام فایل تصویری را به درستی در پرونده index.html املا کرده اید.
      • هنگامی که مرورگر باز می شود ، اما کد HTML را به جای تصویر پس زمینه مشاهده می کنید ، index.html شما به عنوان یک فایل .rtf (فایل متنی غنی) ذخیره می شود. فایل HTML را در ویرایشگر متن دیگری ویرایش کنید.

روش 2 از 2: کد HTML را درک کنید

  1. برچسب لنگر را بفهمید. کد HTML شامل باز و بسته شدن برچسب ها است. برچسب a href = ""> برچسب شروع است و / a> برچسب پایان است. این یک برچسب لنگر نامیده می شود و برای افزودن پیوند به یک صفحه وب استفاده می شود.
    • آ به یک مرورگر می گوید که یک پیوند ایجاد کند. href مخفف مرجع HTML است = به مرورگر می گوید همه چیز را تغییر دهد ’ ’ ایجاد لینک هر URL را می توان بین دو علامت نقل قول قرار داد.
    • / a> به مرورگر می گوید که برچسب لنگر بسته است.
    • وقتی متن را بین آن اضافه می کنید a href = ""> و / a> این متن به یک لینک قابل کلیک در یک صفحه وب تبدیل می شود. برای مثال: a href = "https://www.google.com"> Google / a> پیوندی به Google ایجاد می کند.
  2. برچسب تصویر را بفهمید. برچسب img> یک برچسب بسته است. می توانید آن را با img src = "" /> یا img src = ""> / img> ببندید.
    • img برچسب به یک مرورگر می گوید برای نشان دادن یک تصویر src مخفف منبع ، de است = به مرورگر می گوید که همه موارد بین ’ ’ و تصویر را از آن مکان بازیابی کنید.
    • /> به یک مرورگر می گوید تا برچسب تصویر را ببندد.
    • به عنوان مثال: {samp [} تصویر را از آن URL دریافت می کند ، سپس آن را در یک مرورگر وب نمایش می دهد.
  3. از این کد در همه جا استفاده کنید. اکنون که این کد را می دانید ، می توانید a href = "url target"> img src = "url تصویر" /> / a> برای افزودن تصاویر قابل کلیک به هر صفحه وب با کد HTML.