در این قسمت فیلم آمورش html با تگ img آشنا خواهید شد ، عنصر img برای نشان دادن عکس مورد نظر ما در صفحه وب به کار می رود .
تگ img یک تگ بدون فرزند هستش و مهم ترین شناسه آن Src ( مخخف سورس ) هستش ، این شناسه مسیر عکس مارو مشخص می کنه ، حالا نحوه ی آدرس دهی این مسیر هم مهم هستش ، یعنی آدرس دهی عکس زمانی که در کنار فایل HTML هست با زمانی که عکس در یه پوشه یا در یک دایرکتوری دیگر هست فرق میکنه .
تگ img و شناسه Src به صورت زیر استفاده میشه ، زمانی که عکس در کنار فایل html قرار داشته باشه :
<img src="picture.jpg" />
در کد بالا به جای picture اسم عکس خودتون رو بنویسید و اگه پسوندش فرق داشت به جای jpg پسوند عکستون رو بنویسید .
آدرس دهی مطلق در تگ img
<img src="C:\Users\Reza\Pictures\1.jpg" />
زمانی از این آدرس دهی استفاده می کنیم که فایل در یک پوشه و عکس مورد نظر ما در یک پوشه دیگر قرار داشنه باشه .
عکس در پوشه و کنار فایل HTML
<img src="img/picture.jpg" />
زمانی که یه عکس ها رو در یک پوشه ایی کنار فایل html قرار داده ایم به این صورت آدرس دهی می کنیم . یعنی اول اسم پوشه رو می نویسیم و بعد اسم و پسوند عکس رو می نویسیم .
عکس یه مسیر عقب تر از فایل html
<img src="../picture.jpg" />
با قرار دادن دو تا نقطه میاد یه مسیر عقب تر رو می خونه و عکس رو لود می کنه .
شناسه Width در تگ img
این شناسه طول عکس رو مشخص میکنه ، که مقادیر اون رو به صورت پیکسل و درصد می نویسیم :
<img src="picture.jpg" width="600px" /> <img src="picture_2.jpg" width="70%" />
شناسه Height در تگ img
این شناسه ارتفاع عکس رو مشخص می کنه ، و مقادیر اون به صورت پیکسل و درصد هستش :
<img src="picture_2.jpg" width="70%" height="650px" />
شناسه alt در تگ img
این شناسه به img این کمک رو می کنه که اگه عکس لود نشه به کاربر بفهمونه که این عکس در مورد چه چیزی بوده است ، یعنی داخل این تگ در مورد عکس یه چیزی می نویسیم .
<img src="picture_2.jpg" width="70%" height="50%" alt="عکس تصویر زمینه " />
این شناسه هم این طور به خزندگان یا ربات های موتور های جستجو هم کمک میکنه در شناسایی عکس شما .
شناسه Title در تگ img
<img src="picture_2.jpg" width="70%" height="50%" alt="وب سیتی " title="این عکس لوگوی وب سیتی است" />
مقدار این شناسه رو هم باید خوتون بنویسید مثلاً اگر خواستید در مورد عکسی یکم اطلاعات به کاربر بدید می تونید از این شناسه استفاده کنید ، زمانی که از این شناسه استفاده کردید و کاربر نشانگر موس رو روی عکس نگه داشت اون توضیحات به کاربر نشون داده می شود .
شناسه Border
<img src="picture_2.jpg" width="70%" height="650px" border="3px" />
مقدار این شناسه به صورت px ( پیکسل ) هستش و حاشیه ایی دور عکس به وجود میاره . در قسمت های آتی با این شناسه بیش تر آشنا می شید .
دستتون درد نکنه واقعا . چیز مفیدی بود .من همیشه تو آدرس دهی عکس همیشه گیر میکردم. بعد دیدن این ویدیو من آدرس دهی عکس رو یاد گرفتم