تگ img و نحوه نمایش تصاویر در صفحات HTML به همراه فیلم آموزشی

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

تگ img

در صفحات HTML ما به راحتی می توانیم عکسهای مورد نظرمان را بارگذاری کنیم برای این کار ما از تگ img که مخفف image می باشد استفاده میکنیم.

به این نکته توجه کنید تگ img دارای تگ پایانی نمی باشد.

ما در جلسات گذشته با attribute آشنا شدیم و در داخل تگ image از یک attribute به نام src که مخفف source میباشد استفاده میکنیم.

در src ما آدرس عکسی که در دایرکتوری مورد نظرمان قرار دارد را مانند کد زیر قرار می دهیم فقط به این نکته توجه کنید که اسم عکس همراه با پسوند آن وارد شود

در مثال زیر ما در پوشه ایمیل عکسی به نام html با پسوند jpg را در دایرکتوری (پوشه) image نمایش می دهیم.

تغییر سایز تصاویر

برای تغییر سایز عکس ها در HTML ما به راحتی می توانیم از دو attribute به نام‎های height و width استفاده کنیم.

هویت دهی به تصاویر در سئو (alt image)

استفاده از اتربیوت alt که مخفف alternate است هیچ تغییری را در عکس مورد نظرتان که در صفحه بارگذاری کرده اید ایجاد نمی کند.

اما استفاده از این attribute برای موتورهای جستجوگر بسیار حائز اهمیت است.

شما با استفاده از این تگ یک هویت و یا شناسه به عکس مورد نظرتان اختصاص می دهید.

تغییر موقعیت (position) عکس در صفحات HTML

برای اینکه بتوانید  تصاویر را در صفحات اچ تی ام ال جا به جا کنید بهتر است که از کدهای CSS استفاده کنید

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

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

همانطور که در جلسه لینک ها در HTML یاد گرفتیم که به هر داکیومنتی می توانیم آدرس دهی کنیم.

شما نیز میتوانید با استفاده از تگ a تصاویر خود را به راحتی لینک دهی کنید، یعنی وقتی کاربر بر روی تصویر لینک دهی شده کلیک کرد به آدرس مورد نظر ارجاع داده شود.

 

شما میتوانید فیلم آموزشی این قسمت را با لینک مستقیم دانلود کنید.