عکس ها HTML


کوهنوردی در نروژ



مشاهده نتیجه


درج تصاویر
چگونگی وارد کردن تصاویر در یک سند HTML

درج تصاویر از مکان های مختلف
چگونگی قرار دادن یک تصویر از یک پوشه دیگر و یا سرور دیگر

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

برچسب img و ویژگی src


تصاویر در HTML، با برچسب img تعریف می شوند.
برچسب img برچسب پایانی ندارد و  فقط حاوی صفات می باشد.
برای نمایش یک تصویر در یک صفحه، شما نیاز به استفاده از صفت src دارید. src مخفف (source)  یا منبع است.  مقداری که در صفت src قرار می گیرد، آدرس تصویری است که می خواهید به نمایش درآید.

نحوه تعریف یک تصویر :


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

url اشاره به آدرس محلی دارد که تصویر در آن ذخیره شده است. یک تصویر به نام "norweg.gif"، واقع در پوشه "images" در "w3.webmehraz.ir"این آدرس را دارد:

< http:/w3.webmehraz.ir/images/norweg.jpg

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

صفت alt

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

<img src="Norweg.jpg" alt="کوهنوردی در نروژ">


خصوصیت alt در صورتی که یک کاربر به هر دلیلی از جمله اتصال کند و آهسته و یا یک خطا در صفت SRC نتواند عکس را مشاهده کند، اطلاعات جایگزینی برای یک تصویر فراهم می کند.

تنظیم ارتفاع و عرض یک تصویر

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

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


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

نکات اساسی - اطلاعات مفید


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

نمونه های بیشتر

هماهنگی با تصاویر
چگونگی چیدمان یک تصویر در میان متن.

قراردادن تصویر در سمت چپ و سمت راست
قراردادن تصویر در سمت چپ یا راست یک پاراگراف.

ساختن یک لینک از یک تصویر
چگونگی استفاده از یک عکس به عنوان یک لینک.

ایجاد یک نقشه تصویری
چگونگی ایجاد یک نقشه تصویری ، با مناطق قابل کلیک. هر کدام از این مناطق یک لینک است.


برچسب های تصویر

برچسب توضیحات
<img> یک تصویر را تعریف می کند
<map> یک نقشه تصویری را تعریف می کند
<area> یک منطقه قابل کلیک را داخل یک نقشه تصویری تعریف می کند