تگ img در html

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

عکس ها در html

توی html و طراحی سایت عکس ها جایگاه خیلی مهمی دارن. توی اکثر سایت ها از عکس استفاده شده و حتی یکسری سایت ها هستن که کل محتواشون عکسه، مثل pinterest یا free images. عکس ها توی زیبایی سایت هم خیلی تاثیر میزارن و اگر بتونید درست از عکس ها استفاده کنید سایت های خیلی زیباتری میسازید. همچنین گذاشتن عکس در html میتونه روی سئو و رتبه گوگل سایتتون خیلی تاثیر بزاره.

تگ img یا image چیست؟ این تگ کار قرار دادن عکس در وبسایت رو برای ما انجام میده. این تگ یه تگ سادست و شما توی چند دقیقه میتونید یا بگیریدش. تگ img اتریبیوت هایی مثل src و alt داره که در ادامه به اونها میپردازیم. نکته قابل توجه این تگ که تو جلسه های قبل هم بهش اشاره کردیم اینه که تگ img یه تگ self-close هستش و نیاز به تگ بسته نداره. در ادامه این جلسه نحوه نوشتن این تگ هارو می‌بینید.

اتریبیوت src چیست

اتریبیوت src مهم ترین بخش تگ img هستش. این تگ لینک و آدرس عکس رو از ما میگیره تا توی سایتمون نمایش بده. این آدرس رو ما میتونیم به دو صورت مطلق یا نسبی بنویسیم. اگه مفهوم آدرس دهی مطلق و نسبی رو بلد نیستید توی جلسه لینک ها در html کامل توضیحشون دادیم و میتونید از اونجا یاد بگیریدش. در اینجا دو تا مثال از اتریبیوت src با آدرس دهی مطلق و نسبی براتون قرار دادم

آدرس دهی مطلق:

<img src="https://megajs.com/wp-content/uploads/2019/07/megajs-logo-new.png" />

آدرس دهی نسبی:

<img src="./image.jpg" />

اتریبیوت alt چیست

این اتریبیوت هم اهمیت بالایی توی تگ img داره. هر عکس باید یه alt داشته باشه تا بتونه به موتور های جستجوی گوگل بگه که موضوع عکس چیه و رتبه گوگل سایت رو بهتر کنه ( این ها مربوط به سئوی سایت میشه و خیلی لازم نیست خودتون رو درگیرش کنید ). کاربرد دیگه این اتریبیوت برای وقتیه که عکستون به هر دلیلی لود نشده. توی این زمان با استفاده از alt به کاربر میگید که محتوای عکسی که لود نشده چی بوده. حتی اتریبیوت alt به افرادی که نابینا یا کم‌بینا هستن و از دستیار صوتی استفاده میکنن هم کمک میکنه تا موضوع عکس رو متوجه بشن.

در اینجا نحوه استفاده از این اتریبیوت رو میبینید:

<img src="./image.jpg" alt="در اینجا موضوع عکس نوشته میشود" />

ابعاد و سایز عکس در html

بعضی وقتا پیش میاد که بخوایم توی سایتمون از عکس هایی استفاده کنیم که سایز و ابعادشون با چیزی که ما میخوایم فرق میکنه. مثلا ما یه عکس مستطیلی و بزرگ داریم که میخوایم توی ابعاد مربعی و کوچیک ازش استفاده کنیم. راه درست انجام این کار با کدهای css هستش، اما فعلا میتونید این کارو با html هم انجام بدید. برای انجام این کار باید از اتریبیوت های width و height استفاده بشه. width برای تعیین طول و height برای عرض عکسمون استفاده میشه.

برای مثال من اگر بخوام یه عکس مربعی کوچک توی سایتم بزارم میتونم کد زیر رو بنویسم. (طول و عرض رو 150px قرار دادیم)

<img src="./image.jpg" width="150px" height="150px" />

px یه واحد اندازه گیریه که مخفف پیکسله ( pixel ). این واحد هارو توی css کامل یاد میگیرید.

اگر ابعاد عکس‌تون با ابعادی که توی width و height تگ img در html مینویسید متفاوت باشه، عکستون فرم بدی به خودش میگیره. اما نگران نباشید چون بعدا توی css میتونید با object-fit درستش کنید.

نکات مهم برای گذاشتن عکس در html و سایت

عکس ها اگه حجم بالایی داشته باشن سرعت سایتتون رو پایین میارن. پس سعی کنید با استفاده از سایت هایی که توی گوگل هست یا حتی با برنامه فتوشاپ ابعادشون رو به اندازه‌ی استاندارد برسونید. این ابعاد باید جوری باشه که نه خیلی کم و بی کیفیت باشه، نه خیلی بزرگ و سنگین.
حتما با سایت هایی مثل convert io فرمت عکستون رو به webp تغییر بدید. این فرمت برای عکس هایی که توی سایت قرار میگیرن ساخته شده و حجم عکس هارو خیلی پایین میاره.

تمرین این جلسه

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

اتریبیوت ALT رو داشته باشه
طولش 500px و عرضش 300px باشه
فرمت عکس webp باشه

با رسیدن به اینجای مقاله و انجام تمرینات شما به تگ img و گذاشتن عکس در html و همچنین تغییر سایز و ابعاد عکس ها مسلط شدید. هرجایی از ویدیو یا نوشته هارو متوجه نشدید می‌تونید توی کامنت ها مطرح کنید تا پاسخ سوالتون رو بگیرید. برای دیدن جلسه بعدی هم میتونید از لینک زیر استفاده کنید

گذاشتن فیلم در html