امتیاز دهید:

یک ضرب المثل انگلیسی است که می گوید 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 برای تصاویر در اچ تی ام ال


نظرات
نظرات
  • کاربر میهمان :

    با تشکر انجام شد


    1396/04/21 23:12:15
  • 46Golzar :

    سلام من برای وارد کردن جند عکس با فرمت gif از کد

    استفاده کردم ولی یک عکس نشان داده می‌شود. عکسها را با عدد و یکبار نیز با حروف شماره‌گذاری کردم ولی نشان داده نشد لطفا راهنمای کنید.متشکرم.


    1394/11/21 08:55:19
  • مجید :

    سلام ممنون از سایت محشرتون . میخاستم بدونم چطوری میشه یه عکس رو در پایین یا بالا یا چپ راست صفحه قرار داد . مرسی تورو خدا زود جواب بدین


    1394/09/04 08:11:25
  • ali nfc :

    سلام . میتونم بگم ، آموزشتون واقعا عالیه . من صفر صفر صفر اومدم برای آموزش ولی واقعا تا الان رو بسیار عالی یاد گرفتم ! تشکر !


    1394/05/05 06:16:05
  • ali :

    سلام
    میشه بگیید که چطوری میشه عکس رو تو وسط صفحه قرار داد؟


    1394/03/19 15:51:47
  • محمد :

    با سلام میخواستم فرمول اولیه html را برام بگی با تشکر


    1393/12/08 17:25:00
  • یاسینی :

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


    1393/11/06 11:07:13
  • مینا :

    ممنون ولی خیلییییییییییییی سخت بود. من متوجه نشدم:/


    1393/10/05 10:51:06
  • بهزاد مرادی :

    در پاسخ به ali.ask"][quote name="بهزاد مرادی"][quote name="ali.ask

    سلام آقای مرادی
    ببخشید، ویژگی xmlns در تگ html چیست؟ و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    مرسی[/quote]


    سلام،
    این Attribute در نسخه xhtml کار می کند و اصطلاحاً یک namespace است که نسخه xml را مشخص می سازد. در نسخه HTML5 اجباری در استفاده از آن نیست.


    با سپاس فراوان از شما
    بهزاد مرادی
    دپارتمان تولید محتوای نت شهر[/quote]
    ممنون
    میشه یک مثال بزنید؟



    با سلام،


    ممنون از توجه شما
    بهزاد مرادی
    دپارتمان تولید محتوای نت شهر


    1393/06/09 08:22:30
  • ali.ask :

    در پاسخ به بهزاد مرادی"][quote name="ali.ask

    سلام آقای مرادی
    ببخشید، ویژگی xmlns در تگ html چیست؟ و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    مرسی[/quote]


    سلام،
    این Attribute در نسخه xhtml کار می کند و اصطلاحاً یک namespace است که نسخه xml را مشخص می سازد. در نسخه HTML5 اجباری در استفاده از آن نیست.


    با سپاس فراوان از شما
    بهزاد مرادی
    دپارتمان تولید محتوای نت شهر

    ممنون
    میشه یک مثال بزنید؟


    1393/06/08 08:54:04
  • ali.ask :

    در پاسخ به بهزاد مرادی"][quote name="ali.ask

    سلام آقای مرادی
    میشه بگید ویژگی ismap در تگ img چیست و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    سپاس[/quote]


    با سلام،
    در حقیقت ismap یک attribute بولینی است که برای استفاده در وب سایت هایی کاربرد دارد که بخشی از کارها سمت سرور صورت می گیرد. اگر از ismap استفاده نموده باشیم، این بدان معنا است که تصویر مد نظر بخشی از یک نقشه ای است که در سمت سرور قرار گرفته است.


    با سپاس فراوان
    بهزاد مرادی
    دپارتمان تولید محتوای نت شهر

    ممنون که جواب دادی!
    میشه یک مثال بزنید؟


    1393/06/08 08:52:50
  • بهزاد مرادی :

    در پاسخ به ali.ask

    سلام آقای مرادی
    میشه بگید ویژگی ismap در تگ img چیست و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    سپاس



    با سلام،
    در حقیقت ismap یک attribute بولینی است که برای استفاده در وب سایت هایی کاربرد دارد که بخشی از کارها سمت سرور صورت می گیرد. اگر از ismap استفاده نموده باشیم، این بدان معنا است که تصویر مد نظر بخشی از یک نقشه ای است که در سمت سرور قرار گرفته است.


    با سپاس فراوان
    بهزاد مرادی
    دپارتمان تولید محتوای نت شهر


    1393/06/08 08:12:58
  • بهزاد مرادی :

    در پاسخ به ali.ask

    سلام آقای مرادی
    ببخشید، ویژگی xmlns در تگ html چیست؟ و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    مرسی



    سلام،
    این Attribute در نسخه xhtml کار می کند و اصطلاحاً یک namespace است که نسخه xml را مشخص می سازد. در نسخه HTML5 اجباری در استفاده از آن نیست.


    با سپاس فراوان از شما
    بهزاد مرادی
    دپارتمان تولید محتوای نت شهر


    1393/06/08 08:09:22
  • ali.ask :

    سلام آقای مرادی
    ببخشید، ویژگی xmlns در تگ html چیست؟ و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    مرسی


    1393/06/07 13:02:42
  • ali.ask :

    سلام آقای مرادی
    ببخشید، ویژگی xmlns در تگ html چیست؟ و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    سپاس


    1393/06/07 12:59:40
  • ali.ask :

    سلام آقای مرادی
    میشه بگید ویژگی ismap در تگ img چیست و چه کاربردی دارد؟
    ممنون میشم جواب بدید!
    سپاس


    1393/06/07 12:51:17
  • بهزاد مرادی :

    سلام
    این مشکلی است که در موتور Webkit می باشد که گوگل کروم از آن استفاده می کند. برای رفع این مشکل می بایست از Attributeیی تحت عنوان title استفاده کرده و مقابل آن یک علامت مساوی قرار داده سپس یک جفت علامت " " و در نهایت هر آنچه را که تمایل دارید نمایش داده شود را داخل علامت های " " بنویسید.
    امیدوارم که این رویکرد مشکل شما را رفع سازد.

    با سپاس فراوان
    بهزاد مرادی


    1393/05/14 08:26:45
  • مهران سانیا :

    سلام خسته نباشید،من وقتی از کد alt استفاده میکنم و بعد مرورگر کروم رو به روز رسانی میکنم،باز هم متن نشون داده نمیشه.البته توی فایرفاکس نشون داده میشه ولی توی گوگل کروم نشون داده نمیشه.


    1393/05/13 13:38:32