عکس ها در html

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

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

تگ img

برای نمایش تصاویر از تگ img در html استفاده می شود.

تگ img دارای تگ بسته نمی باشد.

تگ img دارای یک ویژگی بنام src می باشد که آدرس و نام عکس را در آن قرار می دهیم.

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

مثلا زمانی که نام فایل را اشتباه تایپ کنید یا چنین فایلی وجود نداشته باشد پیغامی که در alt قرار داده اید نمایش داده می شود.

تغییر اندازه عکس در html

در این بخش با تغییر اندازه عکس در html آشنا می شوید.

در حالت عادی عرض و ارتفاع عکس یا تصویر ، در صفحات html ، همان حالت پیش فرض تصویر میباشد.

یعنی اگر عرض عکس 200 پیکسل باشد همان اندازه خواهد بود.

اما می توانیم عرض و ارتفاع را تغییر دهیم.

با ویژگی width می توانیم اندازه عرض عکس را تغییر دهیم و با ویژگی height می توانیم ارتفاع تصویر را تغییر دهیم.

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

در این حالت ارتفاع بصورت خودکار تغییر می کند و تصویر صدمه نمی بیند.

در مثال زیر عرض عکس 200 پیکسل و ارتفاع آن 220 پیکسل خواهد بود.

همچنین ما می توانیم عرض و ارتفاع را با استفاده از css تغییر دهیم که در قسمت زیر توضیح خواهیم داد.

لینک دادن به تصویر در html

برای لینک دادن به تصویر در html می بایست تگ img را در بین تگ باز و بسته a قرار داد.

در زیر یک لینک ایجاد کردیم و سپس تصویر را در میان آن قرار دادیم.

چناچه تصویر a.jpg وجود داشته باشد نمایش داده می شود و با کلیک روی ان به وبسایت topsite98 می روید.

در href هر آدرسی را قرار دهید تصویر به آن صفحه لینک می شود.

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

تغییر مکان عکس در html

تصویر را می توانید در هر قسمت از صفحه html قرار دهید.

برای تغییر مکان عکس در html می توانید از css و دستور text-align نیز استفاده کنید.

با این دستور می توانید عکس را در سمت راست ، چپ یا وسط قرار دهید.

باید یک نکته را در نظر بگیرید که تغییر مکان عکس به قالب سایت و کدنویسی آن نیز بستگی دارد.

قرار دادن عکس پس زمینه در html

برای قرار دادن عکس پس زمینه در html و صفحات html بایستی از css و دستور background استفاده کرد.

در زیر برای body از دستور background-image استفاده کرده ایم.

در بین url بایستی آدرس فایل یا نام فایل را قرار دهید.

برای قرار دادن عکس پس زمینه کافی است نام عکس را با h.png عوض کنید.

اگر تصویر بزرگ باشد کل صفحه را می گیرد در غیر این صورت عکس تکرار می شود تا کل صفحه را بپوشاند.

قرار دادن چند عکس کنار هم در html

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

یکی از بهترین روش ها این است که به css تسلط داشته باشید و از آن استفاده کنید.

یکی دیگر از روش های این است که در یک جدول قرار دهید تا نظم بهتری پیدا کند.

اما باز باید با استفاده از css تغییراتی روی عکس ها دهید.

حرکت دادن عکس در html

با استفاده از دستور animation می توانیم عکس یا عناصر html را حرکت دهیم.

در مثال زیر یک عکس بنام c2.jpg وجود دارد که در کنار فایل html قرار داده ام.

دستور animation باعث حرکت دادن عکس می شود.

ابتدا به عکس ویژگی relative می دهیم سپس آن را با دستور animation حرکت می دهیم.

با keyFrames موقعیت left و top را مشخص می کنیم و جهت حرکت را تعیین می کنیم.  ویژگی infinite باعث می شود حرکت عکس دائمی باشد.

مثال

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.