استفاده از تصاویر یا عکس ها در HTML + ویدئو

چگونه از تصاویر در html استفاده کنیم ؟

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

ایجاد تصویر در HTML

همون طور که میدونین تو HTML برای درج هر چیزی در وب سایتمون از تگ مخصوص خودش استفاده میکنیم.

به عنوان مثال برای درج لینک از تگ a، برای درج دکمه از تگ button و … برای درج عکس هم از تگ img استفاده میکنم.

بعضی از تگ ها جفت و بعضی از تگ ها سینگل تگ هستن. به عنوان مثال تگ a تگ دوتایی هست، یک بار ایجاد شده و یک بار بسته می شود.

اما تگ هایی مثل input, meta, و … img سینگل تگ هستن. به کد های زیر توجه کنین:

<img>
<a>Link</a>

تا اینجا یاد گرفتیم که برای ایجاد عکس در وب سایت از تگ img استفاده می کنیم.

آدرس دهی تصویر

هر تگ تنظیمات مربوط به خودش رو داره که در HTML به این تنظیمات صفت گفته میشه. پس هر تگ صفات مخصوص خودش رو داره.

صفات هر تگ قبل از بسته شدن اون تگ (داخل تگ) نوشته میشن. به عنوان مثال برای آدرس دهی از صفت src استفاده می شود. شاید بگین آدرس دهی یعنی چی؟!
تو هارد سیستم شما یا یک هاست که سایت روی اون قرار داره، ممکنه عکس های زیادی وجود داشته باشه.

برای این که آدرس دقیق عکس مدنظرمون رو به تگ img بگیم، از صفت src که مخفف source هست استفاده می کنیم.

به کد زیر توجه کنین:

<img src="img.png">
<img src="images/img.png">
<img src="..//img.png">

آدرس دهی اول:

اگر عکس مدنظر شما کنار فایل Html شما قرار داشته باشد کافی است اسم عکس رو بنویسین.

آدرس دهی دوم:

اگر عکس شما داخل پوشه ای کنار فایل Html شما قرار داشته باشد، ابتدا اسم پوشه را نوشته و سپس اسم عکس داخل پوشه را می نویسیم.

آدرس دهی سوم:

اگر عکس مدنظر شما خارج از پوشه جاری فایل Html قرار داشته باشد، برای خارج شدن از پوشه جاری کافی است دوتا نقطه (..) بذارید تا از پوشه جاری خارج شده و پس از آن آدرس دهی شبیه آدرس دهی های نوا اول و دوم می شود.

نکته: عکس شما می تواند در فضای اینترنت آپلود شده باشد و شما در src تگ img به جای آدرس دهی داخلی از لینک دانلود عکس استفاده کنید. به استفاده از لینک در آدرس دهی ها CDN گفته می شود.

آموزش HTML پیشرفته

تغییر اندازه تصاویر

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

<img src="sabzLearn.png" width="200" height="300">

همان طور که در کد بالا می بینید، ارتفاع عکس مورد نظر 300 و عرض آن 200 می باشد.

شاید براتون سوال باشه که این اندازه ها با چه واحدی حساب میشن! اعدادی که در صفت های width و height نوشته می شوند با واحد پیکسل اعمال می شوند،

پس ارتفاع تصویر در کد بالا 300 پیکسل و عرض آن 200 پیکسل می باشد.

نکته: برای تغییر اندازه تصاویر از این روش هم استفاده می شود ولی روش بهتر و بهینه تر این است که تغییر اندازه عناصر Html را با Css انجام دهید.

صفت alt یا متن جایگزین تصاویر

صفت alt مخفف alternative بوده و برای ارائه توضیحاتی در مورد تصویر استفاده می شود.

ممکن است تصویر شما به دلایل مختلفی در سایت شما لود نشود! ممکن است عکس از هاست شما حذف شده باشد، یا سرور شما مشکل داشته باشد، یا اینترنت کاربر مشکل داشته باشه و … . صفت alt همچین مواقعی استفاده می شود.

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

<img src="sabzlearnnnn.png" alt="عکس سایت سبزلرن">

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

نکته: در استفاده از تعداد صفت در تگ های Html محدودیتی وجود ندارد.

صفت title در تصاویر html

همان طور که از اسم این صفت معلوم است برای اضافه کردن توضیحاتی در مورد عکس استفاده می شود اما یک تفاوت اساسی با صفت alt دارد.

متن موجود در صفت title بر خلاف صفت alt زمانی نمایش داده می شود که کاربر روی تصویر Hover کرده باشد.(به وجود اشاره گر موس بر روی عنصر Html عمل Hover گفته می شود.) به کد و خروجی زیر دقت کنید:

<img src="sabzlearn.png" title="بک گراند سایت سبزلرن">

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

سخنان پایانی

در این مقاله قصد داشتم در مورد استفاده از تصاویر در HTML بهتون بگم. امیدوارم این مقاله براتون مفید بوده باشه.
ویدیوی مربوط به مقاله رو هم حتما ببینین و اگه انتقاد، پیشنهاد یا سوالی داشتین تو بخش کامنت های همین مقاله بنویسین، بهتون پاسخ میدیم.
تا یه مقاله ای دیگه شما ره به خدا میسپرم.