سبد (0)

تصاویر در HTML

مثال (تصاویر در HTML)

Norwegian Mountain TripPulpit Rock

خودتان امتحان کنید »

مثال - خودتان امتحان کنید

Wiki

Insert images
نحوه درج تصویر در سند HTML.

Insert images from different locations
نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.

(شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.)


تگ <img> و خصوصیت Src

Wiki

در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.

تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.

برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود. 

فرم نوشتاری تگ img

<img src="/url" alt="some_text"/>

URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.

مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.


خصوصیت ALT

Wiki

خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.

ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.

<img src="/boat.gif" alt="Big Boat" />

اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.


تنظیم طول و عرض یک عکس

Wiki

خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.

مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.

<img src="/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

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


نکات اساسی و مفید

Wiki

نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.

نکته: هنگامی که یک صفحه وب بارگذاری می شود، این مرورگر است که در آن لحظه، تصویر را از سرور دریافت می کند و آن را در صفحه درج می کند. بنابراین، مطمئن شوید که تصاویر به طور دقیق در همان نقطه نسبت به صفحه وب قرار گرفته باشند، در غیر این صورت کاربر عکس را نمی بیند و به جای آن یک آیکن با علامت ضربدر می بیند که نشان دهنده آن است که عکسی برای نمایش پیدا نشده است.


مثال - خودتان امتحان کنید

Wiki

Aligning images
نحوه تراز کردن تصویر در یک متن.

Let the image float
چگونه اجازه دهیم یک تصویر در سمت چپ یا راست یک پارگراف قرار گیرد.

Make a hyperlink of an image
چگونه از یک تصویر به عنوان لینک استفاده کنیم.

Create an image map
چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.


تگ های تصویر

Tag Description
<img />

تعریف یک تصویر

<map>

تعریف یک image map

<area />

تعریف ناحیه ای به صورت لینک در یک image-map

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه