در قسمت های قبلی آموزش html با لینک ها و عکس ها در اچ تی ام ال به صورت جداگانه آشنا شده ایم. در این قسمت از آموزش به ترکیب لینک با عکس در html می پردازیم. روزانه با آیتم های زیادی در صفحات وب برخورد می کنیم که ترکیب لینک ها با عکس هستند.
اضافه کردن لینک به تصاویر
تا این جای کار نحوه اضافه کردن لینک و عکس به صفحات html را یاد گرفته ایم. حال می خواهیم یک عکس را لینک کنیم.
ابتدا یک تگ لینک باز می کنیم و برای مثال آن را به پردیس وردپرس لینک می کنیم.
<a href = “http://pardiswp.com”>
این بار به جای نوشتن متن بین تگ های لینک یک تگ تصویر قرار می دهیم.
<a href = “http://pardiswp.com”> <img src = “http://www.pardiswp.com/wp-content/uploads/2016/05/learning-html.png”/>
و در آخر تگ لینک را می بندیم و کار تمام است، عکس مورد نظر لینک شده است.
<a href = “http://pardiswp.com”> <img src = “http://www.pardiswp.com/wp-content/uploads/2016/05/learning-html.png”/> </a>
نتیجه کد فوق نمایش عکس مورد نظر در مرورگر می باشد که با کلیک بر روی عکس به لینک درج شده در کد منتقل می