آموزش طراحی سایت(جلسه ۱۰): تگ img

تگ imgیکی از مهمترین عناصر در صفحات وب عنصر عکس است. طراحی سایت  برای قرار دادن عکس در فایلهای htmlاز تگ< >imgاستفاده میشود. این تگ یک تگ تهی بوده و نیازی به تگ پایانی ندارد. برای مشخص کردن تصویریکه باید در صفحه قرار بگیرد باید از ویژگی src1۵استفاده کرد که توسط این ویژگی آدرس و نام فایل مشخصمیشود.

صفت :alt

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

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

مثال:

>”متن توصیفی”=” altآدرس تصویر”=<img src

نکته: برای استفاده از تصویر در وب قبل از هر کاری یک پوشه با نام imgبسازید و هر تصویری که قصداستفاده از آن را دارید در این پوشه قرار دهید.
توجه داشته باشید تصویر در مکانی قرار خواهد گرفت که تگ imgدر آنجا نوشته شده باشد.: width وheight صفاتامکان دیگری که شما می توانید در تگ < >imgداشته باشید صفات heightو widthهست. طراحی سایتبا استفادهاین دو صفت میتوانید ابعاد یک تصویر را مشخص کنید.۱۵source
۲۳مثال:

<img src=” “آدرس عکسwidth=”۳۰۰px” height=”۲۰۰px” >

لغت widthبه معنای عرض و لغت heightبه معنای ارتفاع است. به وسیله این صفات میتوانیدابعاد تصویر مورد نظر را تعیین کنید. به جای px16میتوانید از ٪ نیز استفاده کنید. برای فهمیدن ابعاد تصویرشما میتوانید از برنامههای گرافیکی سودمند برای اینکه این اعداد را تخمین بزنید استفاده کنید. روش دیگربرای پیدا کردن ابعاد عکس این است که شما میتوانید آیکون مورد نظر را با drag and drapبه پنجره
مرورگر بکشید و طول و عرض تصویر در titlebarمرورگر نشان داده میشود.

برای ایجاد گالری و چینش تصاویر کنار هم هیچگاه تصاویر بزرگ را کوچک نمایش ندهید. طراحی وب سایتچون حجم عکستغییری نمیکند و در این صورت صفحه شما دیر loadمیشود و کاربر همان عکس بزرگ را در نمای کوچک
میبیند. بنابراین بهتر است تصویر را resizeکرده و تصویر کوچک را به کاربر نشان دهید و تصاویر بزرگتر رابه آن لینک دهید. (برای لینک دادن آن را با تگ < >aاحاطه کنید).
نکته: برای ساخت گالری عکس، تصاویر کوچک را در پوشه smallو تصاویر بزرگ را در پوشه largeو درپوشه imgذخیره کنید.
مثال:

<a href=”../img/large/ ”نام عکسtarget=”_blank”> <img src=”../img/small/></”نام عکسa>

صفت :titleاین صفت برای عکس نیز سِت میشود که مقداری که میگیرد طراحی وب سایتبا قرار گرفتن موس روی عکس
دیده میشود.