جلسه ی بیستم: تگ IMG

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

 

عکس چیست؟

عکس ها عناصر بسیار مهمی در زیبا سازی وب سایت ها می باشند که معمولا در زبان HTML به وسیله ی تگ img فراخوانی می شوند البته ناگفته نماند توسط زبان CSS قابل فراخوانی می باشد که در برخی موارد خاص از آن ها استفاده می کنیم.

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

 

تگ  IMG

از تگ img برای فراخوانی یک عکس درون سایت خود استفاده می کنیم. نحوه ادرس دهی را در جلسه دهم که برای لینک ها بود توضیح داده ایم.(برای دیدن آموزش کلیک کنید) به مثال زیر توجه کنید:


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

خروجی کد بالا:

تگ img

 

چگونه یک عکس را در فایل HTML کوچک کنیم؟؟

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

جواب: دوراه برای انجام این کار وجود دارد که اولین راه ، راهه افراد ساده می باشد و راه دوم برای افراد خاشخاشی 🙂 (منظورم حرفه ایه).

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

راه دوم: کافیست برای تگ img خود عرض و ارتفاع تعین کنیم تا همیشه عکس های ما در یک اندازه ی ثابت نشان داده شوند.

Height: برای تعیین ارتفاع عنصر مورد نظر خود از عنصر height استفاده می کنیم.

Width: برای تعیین عرص عنصر خود از عنصر width استفاده می نماییم. برای فهم بیشتر این موضوع به مثال زیر توجه کنید:


<img src="image/img.jpg" height="258" width="512">

خروجی کد بالا:

چگونه ارتفاع یک عکس را در html تعیین کنیم

همانطور که در مثال بالا میبینید عکس مورد نظر ما به انداز ی دلخواه ما رسیده است. اما سوال این است که اگر عکس ما کوچکتر باشد بزرگتر می شود و به اندازه ی دلخواه ما می رشد یا خیر؟؟

جواب: بله بزرگتر می شود چون مقداری که ما تعیین می کنیم به تمامی دستورات اولویت داشته و اگه عکس کوچکترهم باشد بزرگتر خواهد شد.

نکته: در تعیین اندازه ها در وبسایت خود توجه کنید زیرا اگر اندازه های نا مناسبی انتخاب کنید کیفیت عکس ها در وب سایت شما از بین می رود و باعث زشت شدن آن می شود برای فهم این نکته به مثال زیر توجه کنید:


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

خروجی کد بالا:

تگ img

حال که با ویژگی های بالا ونحوه ی کار با آن ها آشنا شده اید می خواهیم ویژگی دیگری در مورد عکس ها را به شما نشان دهیم که بشدت مهم می باشد.

 

ALT تصویر

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


<img src="image/img.jpg" alt="لوگوی کمیابی ها" height="100" width="800" >

خروجی کد بالا:

خاصیت alt تصویر

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

اما ویژگی alt تصویر به همین جا ختم نمی شود و در سئو (بهینه سازی وب سایت) نیز کاربرد فراوانی دارد برای مثال ما برای عکس خود در خاصیت alt از کلمه ی لوگوی کمیابی ها استفاده کرده ایم که باعث می شود پس از سرچ این کلمه تصویر و همچنین مطلب یا سایت ما در نتیجه ها وجود داشته باشد.(اصلا این ویژگی رو دست کم نگیرید 🙂 )

 

ویژگی title

کلمه ی title در معنی لغت به معنای عنوان می باشد. از ویژگی title در تگ img برای نشان دادن یک توضیح در مورد آن عکس به استفاده می شود به گونه ای که وقتی ماوس (اشاره گر) بر روی عکس مورد نظر ما قرار می گیرد توضیح مورد نظر ما در یک باکس کوچک در کنار ماوس نشان داده می شود. برای فهم بیشتر این مطلب به نمونه کد زیر توجه کنید:


<img src="image/img.jpg" alt="لوگوی کمیابی ها" height="400" width="650" title="در این ویژگی توضیحی برای عکس قرار می گیرد" >

خروجی کد بالا:

خاصیت title

 

خلاصه مطلب:

  1. عکس ها عناصر بسیار مهمی در زیبا سازی وب سایت ها می باشند که معمولا توسط زبان HTML فراخوانی می شوند.
  2. از تگ img برای فراخوانی یک عکس درون سایت خود استفاده می کنیم.
  3. برای تنظیم اندازه ی یک عکس کافیست کافیست برای تگ img خود عرض و ارتفاع تعین کنیم.
  4. برای تعیین ارتفاع عنصر مورد نظر خود از عنصر height استفاده می کنیم.
  5. برای تعیین عرص عنصر خود از عنصر width استفاده می نماییم.
  6. در تعیین اندازه ها در وبسایت خود توجه کنید زیرا اگر اندازه های نا مناسبی انتخاب کنید کیفیت عکس ها در وب سایت شما از بین می رود.
  7. از ویژگی alt تصویر برای قرار دادن یک متن جایگزین برای یک عکس استفاده می شود.
  8. ویژگی alt تصویر در سئو(بهینه سازی وب سایت) نیز کاربرد فراوانی دارد.
  9. از ویژگی title در تگ img برای نشان دادن یک توضیح در مورد آن عکس به استفاده می شود.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها