آموزش HTML5 - جلسه شانزدهم

 

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

سینتکس تصویر

تصاویر در زبان برنامه نویسی HTML با تکی با نام <img> کدنویسی می شود. تگ <img> تگ پایان ندارد و فقط تگ شروع دارد. هم چنین تگ <img> دارای دو خصوصیت با نام های src و alt هست که خاصیت src برای منبع تصویر و یا همون آدرس تصویر مورد نظر بر روی یه سرور هست و خاصیت alt متن جایگزین تصاویر هست که در صورتی که تصویر لود نشه و یا تا زمانی که لود بشه مقدار این خصوصیت نمایش داده می شو.

اینم فرمول کلی کدنویسی تصاویر در زبان برنامه نویسی HTML5:

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

 عرض و ارتفاع تصاویر

در کدنویسی زبان برنامه نویسی HTML و در نسخه پنجم که نسخه استاندارد فعلی نیز هست از خاصیت style استفاده می شود. واحد پیشفرض اندازه ها پیکسل px می باشد. برای مثال:

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

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

اینم یه مثال برای کدنویسی تصاویر با خاصیت های height و width:

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

 آدرس تصاویر

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

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

دومین راه بر روی سرور سایت دیگه ای هست که به صورت زیر کدنویسی میشه:

<img src="https://www.w3schools.com/images/w3schools_green.jpg">

خب این کلیات مبحث تصاویر در زبان برنامه نویسی HTML هست. البته مباحث پیشرفته تری وجود داره که فعلا در این حد برای این دوره آموزش ما کافی و وافی هست. در صورت هرگونه سوال در بخش نظرات اعلام فرمائید.

در پناه حق – آی وحید