026-32601

وارد کردن تصویر در یک صفحه اچ تی ام ال (html)

1 1 1 1 1 (8 Votes)

یک ضرب المثل انگلیسی است که می گوید A picture is worth a thousand words . چنانچه بخواهیم این ضرب المثل را به طور تحت الفظی ترجمه کنیم با معادلی همچون "یک تصویر ارزشش از هزار کلمه بیشتر است" مواجه خواهیم شد.
در واقع استفاده از تصاویر موجب می گردد صفحات وب ما داری رنگ و بوی خاصی گردند. بنابراین فراگیری وارد کردن تصاویر در صفحات وب از اهمیت ویژه ای برخوردار است. در حقیقت برای آنکه بتوانیم یک تصویر را وارد صفحه وب کنیم دو راه کار پیش روی ما خواهد بود. اول اینکه عکس مد نظر را در کنار دیگر فایل های سایت خود از قبیل فایل index.html قرار داده سپس لینکی مابین صفحه و آن عکس ایجاد کنیم. راه کار دوم این است که اگر عکس مد نظر ما روی وب قرار داشته باشد می توان لینک آن عکس را در صفحه مد نظر قرار دارد. در این آموزش هر دو راه کار را مورد بررسی قرار خواهیم داد.
به خاطر داشته باشیم که در فایل های اچ تی ام ال می توان از سه فرمت تصویر زیر استفاده کرد:
1.    تصاویر با فرمت gif
2.    تصاویر با فرمت jpg یا jpeg
3.    تصاویر با فرمت png
توضیح در مورد خصوصیات هر یک از این فرمت های خارج از سرفصل های آموزشی این دوره است اما همین قدر بدانیم که تعداد رنگ های به کار رفته در تصاویر gif تعداد 256 رنگ است اما این در حالی است که فرمت jpg در برگیرنده میلیون ها رنگ می باشد. از سوی دیگر فرمت gif در فشرده سازی تصاویر ساده مثل آیکان ها مورد استفاده قرار می گیرد اما این در حالی است که تصاویر jpg برای تصاویر پیچیده تر مورد استفاده قرار می گیرد.
فرمت png علاوه بر اینکه از قابلیت فشرده سازی قابل توجهی برخوردار است، میلیون ها رنگ را نیز در تصاویر پشتیبانی می کند. شاید بتوان گفت که در این فرمت از نقاط قوت دو فرمت پیش استفاده شده است. از سوی دیگر این فرمت از قابلیت Transparency یا "شفافیت تصویر" نیز پشتیبانی می کند.
اولین کاری که می بایست انجام دهیم این است که روی سیستم خود یک فولدر ایجاد کرده و نام دلخواهی برای آن در نظر بگیریم. سپس فایل index.html را به داخل آن فولدر انتقال دهیم. سپس عکسی دلخواه را داخل فولدر وب سایت خود قرار می دهیم:

فولدر بندی سایت خود

همانطور که در تصویر فوق مشخص است فولدری تحت عنوان my site ایجاد کرده و داخل آن دو فایل مد نظر خود را قرار داده ایم که یکی فایل index.html است و دیگر عکسی است تحت عنوان image.jpg. برای نشان دادن تصویر کد زیر را وارد نرم افزار ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body>
        <img src="image.jpg"/>
    </body>
</html>

همانطور که در کد فوق می بینیم، تگی تحت عنوان <img/> را مورد استفاده قرار داده ایم. این تگ جزو تگ هایی است که نیاز به تگ پایانی ندارد. همانطور که در کد فوق می بینیم پس از img که مخفف واژه image به معنی "تصویر" است کلید واژه src را نوشته که مخفف واژه source به معنی "منبع" است. سپس یک علامت مساوی قرار داده و داخل علامت های "   " نام عکس مد نظر به همراه پسوند آن که jpg است نوشته ایم. حال پس از ذخیره کردن فایل خود می توانیم خروجی کد را در مرورگر مشاهده کنیم:

نمایش تصویر در یک سند اچ تی ام ال

می بینیم که عکس وارد صفحه شده است.
نکته قابل توجهی در ارتباط با مدیریت فایل های یک وب سایت وجود دارد که در ادامه آن را به تفصیل مورد بررسی قرار خواهیم داد.
همانطور که در فولدر my site که فایل های مرتبط با سایت ما در آن قرار دارد مشاهده کردیم، هر دو فایل در کنار یکدیگر قرار گرفته اند، به عبارت دیگر یک فایل html و یک فایل jpg. این قضیه در مورد سایت های کوچک خیلی مشکل زا نیست اما این در حالی است که اگر فرض کنیم در سایت خود 20 عکس داریم و 10 فایل اچ تی ام ال و همه آنها در کنار یکدیگر در یک فولدر قرار دارند، فایل ها موجب سر در گمی ما خواهند شد.
برای رفع این مشکل می توان یک فولدر مجزا برای تصاویر سایت خود در نظر گرفته و کلیه تصاویر را داخل آن قرار دهیم.

به طور مثال فولدر سایت خود را می توان به صورت زیر بهینه کرد:

فولدر بندی سایت خودهمانطور که در تصویر فوق مشخص است، فولدری تحت عنوان images ایجاد کرده و فایل image.jpg را داخل آن قرار داده ایم. حال اگر مرورگر را به روز رسانی کنیم با تصویر زیر مواجه خواهیم شد:

عدم نمایش تصویر در مرورگر

می بینیم که تصویر در مرورگر به نمایش در نمی آید. در واقع علت آن است که مسیر عکس ما تغییر پیدا کرده است. برای رفع این مشکل کد خود را به صورت زیر بازنویسی می کنیم:

    <body>
        <img src="images/image.jpg"/>
    </body>

همانطور که در کد فوق می بینیم، داخل دو علامت " " ابتدا نام فولدر images را نوشته سپس یک علامت / قرار داده و در نهایت نام فایل خود را می نویسیم. حال اگر پس از ذخیره کردن تغییرات مرورگر را به روز رسانی کنیم خواهیم دید که تصویر مجدد نمایش داده می شود:

نمایش تصویر در یک سند اچ تی ام ال

از مزایای فولدربندی سایت خود این است که به راحتی می توان فایل ها را مدیریت نمود. حال فرض کنیم که عکس های ما به چند دسته تقسیم بندی می شوند: عکس های شخصی، عکس های عمومی و ... که در این صورت به هر تعداد که بخواهیم می توانیم داخل فولدر images فولدر زیرشاخه ایجاد کرده و عکس های مرتبط را داخل آنها قرار دهیم. به طور مثال اگر بخواهیم عکس های شخصی خود را در یک فولدر مجزا قرار دهیم می توانیم فولدری تحت عنوان personal-images در فولدر images ایجاد کرده و عکس های شخصی خود را داخل آن قرار دهیم. حال اگر بخواهیم از داخل صفحه اچ تی ام ال (html) به آن عکس لینک دهیم می توان آدرس images/personal-images/image1.jpg را وارد صفحه اچ تی ام ال (html) کرد.

گاهی اوقات نیاز داریم تا روی ابعاد تصویر خود تسلط بیشتری داشته باشیم. به عبارت دیگر می خواهیم روی ارتفاع وعرض تصویر نظر خود را اعمال کنیم که در این مواقع می بایست از دستورات width به معنی "عرض" و height به معنی "ارتفاع" استفاده کرد. لازم به ذکر است که اگر از این دستورات عرض و ارتفاع استفاده نکنیم، مرورگر تصویر را در ابعاد واقعی به نمایش در خواهد آورد. برای روش شدن این مطلب کد خود را به صورت زیر تکمیل می کنیم:

    <body>
        <img src="images/image.jpg" width="100" height="100"/>
    </body>

همانطور که در تصویر فوق مشاهده می شود، پس از src کدی تحت عنوان width نوشته ایم که مقدار مرتبط با آن هم برابر با 100 قرار داده شده است (منظور 100 پیکسل است) سپس کد height را نوشته ایم که مقدار آن هم برابر با 100 است. فایل خود را در این مرحله ذخیره کرده و مرورگر فایرفاکس را به روز رسانی می کنیم:

ابعاد جدید در نظرگفته شده برای عکس در html

 می بینیم که ابعداد تصویر به ابعدادی که تعریف کردیم تغییر می یابد. همواره به خاطر داشته باشیم که مثلا اگر حجم تصویر ما یکصد کیلوبیت باشد و با استفاده از دستورات طول و عرض ابعداد تصویر را کاهش می دهیم، این حجم به هیچ وجه کاهش نخواهد یافت و به همان میزان که پیش از کوچک کردن زمان می برد تا اصطلاحاً Load شود باز هم پس از کوچک شدن به همان میزان زمان خواهد برد.
علاوه بر این برای تصاویری که در سایت خود قرار می دهیم می توانیم یک متن جایگزین نیز انتخاب کنیم. کاربرد این متن برای نابینایان است. در واقع  سیستم هایی که برای این گروه از افراد طراحی شده است این امکان را به ایشان می دهند که در هر کجای صفحه ای که یک عکس قرار داشت، به جای عکس که فرد نابینا قادر به دیدن آن نیست متن جایگزین را بخواند.
علاوه بر این تصور کنید مشکلی برای عکس پیش می آید که مرورگر قادر با Load کردن آن نخواهد بود، در چنین مواقعی مرورگر، متن مرتبط با عکس را نمایش می دهد. در ضمن متون مرتبط با تصاویر از دید موتورهای جستجو هم مهم هستند چرا که این موتورهای جستجو قادر به درک تصاویر نیستند بنابراین اگر تصویری داری این متن جایگزین باشد، موتور جستجو آن متن را مد نظر قرار خواهد داد.
برای روشن شدن مطالب فوق می بایست کدی تحت عنوان alt به تگ مربوط به img اضافه کرد:

     <body>
        <img src="images/image.jpg" alt="This is an image"/>
    </body>

همانطور که در کد فوق می بینیم، دستور alt را نوشته و یک علامت مساوی مقابل آن قرار می دهیم سپس داخل علامت های "   " متنی مرتبط با تصویر می نویسیم که در این مثال متن This is an image به معنی "این یک تصویر است" نوشته شده است. حال پس از ذخیره کردن فایل مجدد مرورگر را به روز رسانی می کنیم:

نمایش تصویر در یک سند اچ تی ام ال

 می بینیم که هیچ تغییری صورت نگرفته است. حال از عمد به فولدر سایت مراجعه کرده و فایل image.jpg را Delete می کنیم:

پاک کردن یک عکس از داخل وب سایت

اکنون مجدد مرورگر را به روز رسانی می کنیم:

نمایش متن alt

در حقیقت از آنجا که مرورگر نمی تواند فایل عکس مد نظر را بیابد، به جای آن متن مرتبط با دستور alt را نمایش می دهد (لازم به ذکر است که alt مخفف واژه alternative به معنی "جایگزین" است).
حال زمان هایی ممکن است برای ما پیش آید که قصد داریم تا عکسی را از روی وب داخل وب سایت خود قرار دهیم. برای این منظور کافی آدرس کامل عکس را داخل علامت های "  " قرار دهیم. به طور مثال عکسی با آدرس http://www.w3schools.com/images/w3schoolslogoNEW310113.gif در وب وجود دارد. حال برای آنکه بتوانیم در سایت خود از این عکس استفاده کنیم به سادگی می توان کد فوق را به صورت زیر بازنویسی کرد:

    <body>
        <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
    </body>

حال پس از ذخیره کردن فایل، مرورگر را به روز رسانی می کنیم:

لینک دادن به تصاویر از طریق url

می بینیم که عکس از آدرس URL مد نظر فراخوانی شده و در سایت ما قرار می گیرد. از مزایای این کار این است که بدون اختصاص فضای سایت خود می توان از منابع سایت های دیگر در سایت خود استفاده کرد. البته این نکته را همواره مد نظر داشته باشیم که اینکار نیازمند کسب اجازه از سایت صاحب منبع است. لازم به ذکر است برای تصاویری که از طریق URL در سایت خود استفاده می کنیم نیز می توان از دستور های width و height استفاده کنیم.
گاهی اوقات نیاز داریم تا زمانیکه کاربر نشانگر موس خود را روی عکس قرار می دهد جمله ای دلخواه به وی نمایش داده شود. برای روشن شدن این موضوع کد خود را به صورت زیر بازنویسی می کنیم:

    <body>
        <img src="images/image.jpg" title="This is an image" />
    </body>

همانطور که در تصویر فوق می بینیم، دستوری یی تحت عنوان title در کد خود اضافه نموده ایم و مقدار آن را برابر با عبارت This is an image! قرار داده ایم. حال از این پس هر وقت که نشانگر موس خود را روی تصویر قرار دهیم عبارت فوق الذکر نمایش داده می شود:

استفاده از دستور title برای تصاویر در اچ تی ام ال



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

نظراتی که به تعمیق بحث کمک می کند، در معرض ملاحظه و قضاوت دیگران قرار می گیرند. نظراتی که حاوی توهین، افترا و تهمت به دیگران باشد، منتشر نخواهد شد. لطفاً از نوشتن نظرات خود به صورت حروف لاتین (فینگلیش) خودداری نمایید.


تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب