آموزش زبان HTML (جلسه ۳۷)

آشنایی با لینک دانلود در سندهای اچ تی ام ال (HTML)

گاهی اوقات نیاز داریم تا فایلی را روی سایت خود قرار داده تا کاربران سایتمان بتوانند آن فایل را دانلود نمایند. برای این منظور اولین کاری که می بایست انجام دهیم این است که فولدری در سایت خود ایجاد کنیم تا مسئول ذخیره سازی کلیه فایل هایی باشد که قرار است دانلود شوند. برای این منظور همانند تصویر زیر در دایرکتوری اصلی سایت خود یک فولدر تحت عنوان resources به معنی “منابع” ایجاد می کنیم:

ایجاد_فولدر_دانلود_برای_پروژه_خود_در_اچ_تی_ام_ال

حال یک فایل زیپ داخل این فولدر قرار می دهیم سپس اقدام به ویرایش کد خود می نماییم (نام فایل زیپی که در این آموزش در نظر گرفته ایم file.zip می باشد):

<!DOCTYPE html>
<html>
   
   <head>
       <title>asrefonon</title>
   </head>
   
   <body>
   <a href="resources/file.zip"><p>Link to download</p></a>
   </body>
</html>

همانطور که در کد فوق می بیینم داخل تگ body یک تگ p قرار داده ایم که حاوی متن Link to download می باشد. سپس با استفاده از تگ a این پاراگراف را به یک لینک تبدیل کرده ایم. همانطور که در مقدار در نظر گرفته شده برای Attribute یی تحت عنوان href مشاهده می شود، ابتدا آدرس فولدر resources را نوشته سپس نام فایل زیپ را می نویسیم. اکنون پس از ذخیره کردن فایل خود، مرورگر را به روز رسانی می کنیم:

دانلود_کردن_فایل_زیپ_از_داخل_html

همانطور که در تصویر فوق می بینیم پس از کلیک کردن روی لینک موجود در سایت، پنجره ای نمایان خواهد شد که این امکان را به ما می دهد تا فایل مد نظر را دانلود کنیم.
حال چنانچه بخواهیم یک فایل پی دی اف را داخل سایت خود قرار دهیم که کابران بتوانند آن را در مرورگر خود مشاهده کنند، ابتدا یک فایل پی دی اف تحت عنوان file.pdf داخل فولدر resources قرار می دهیم سپس کد خود را به صورت زیر بازنویسی می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <title>asrefonon</title>
   </head>
   
   <body>
   <a href="resources/file.pdf"><p>Show PDF</p></a>
   </body>
</html>

همانطور که می بینیم صرفاً نام فایل را به file.pdf تغییر داده و متن لینک را نیز به Show PDF تغییر می دهیم و پس از به روز رسانی مرورگر با تصویر زیر مواجه خواهیم شد:

نحوه_نمایش_پی_در_اف_در_اچ_تی_ام_ال

حال با کلیک روی لینک فایل پی دی اف در خود مرورگر نمایش داده خواهد شد:

2نمایش_فایل_پی_دی_اف_داخل_سند_اچ_تی_ام_ال

همانطور که در تصویر فوق مشخص است در بخش title نام فایل به نمایش در می آید.
حال اگر بخواهیم این امکان را به کاربران بدهیم که بتوانند این فایل پی دی اف را دانلود کنند، صرفاً نیاز است تا فایل پی دی اف خود را ابتدا زیپ کرده و سپس لینک فایل زیپ شده را در سایت خود قرار دهیم.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)