صفحات بدون تصاویر، هیچ جذابیتی برای مخاطب ندارند. و این تصاویر و طراحی‌های خلاقانه هستند که صفحات شما را زیبا می‌کنند. پس این بخش یکی از مهمترین بخش‌های آموزش html است که در طراحی نمای ظاهری سایت شما کاربرد بسیاری دارد. با آموزش تصاویر در html  همراه توکاپس باشید.

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

افزودن عکس

مرحله اول: برای قرار دادن تصویر در صفحه، در اولین قدم تگ <img> را در ابتدای کد می نویسیم.

مرحله دوم: اکنون باید به صفحه بگوییم که عکس را از کجا پیدا کند و در مرورگر نشان دهد. به عبارتی باید آدرس دهی عکس را در این مرحله انجام دهیم. برای آدرس دادن از اتریبیوتی به نام src کمک می گیریم. بعد از این اتریبیوت آدرس یا url عکس را می نویسیم. به کد زیر دقت کنید:

<img src=”url”  / >

برای پیدا کردن آدرس عکس کافیست که بر روی عکس راست کلیک کرده و گزینه copy image address را بزنید. سپس به کد خود برگردیم و پس از src کلیک کرده و past را بزنیم.

مرحله سوم: در آخرین مرحله / را در انتهای تگ قرار می دهیم تا تصویر به نمایش در آید.

به نحوه آدرس دادن دقت داشته باشید چرا که اگر آدرس را اشتباه وارد کنید عکس نمایش داده نمی شود.

شاید از این مقاله خوشتون بیاد:  آموزش گام به گام html_قسمت اول

اتریبیوت Alt

یکی دیگر از اتریبیوت‌های تصاویر alt است که در واقع حاوی حرف یا نوشته‌ است. از این نوشته در زمان هایی که عکس لود نمی شود می توانید به خوبی استفاده کنید. در این صورت به جای عکس این نوشته به نمایش در می آید. از این نوشته گوگل در زمانی که در جستجوی عکس ها است بسیار استفاده می کند و در سئوی سایت بسیار تاثیر گذار است.

خیلی از افراد به دلیل این که اهمیت اتریبیوت alt را درک نمی کنند معمولا از آن استفاده نمی کنند و خالی این بخش را رها می کنند. اگر می خواهید بهتر به گوگل شناخته و معرفی شوید و برای کاربران خود ارزش قائل شوید این اتریبیوت را استفاده کنید.

به نمونه کد زیر دقت کنید:

<img src=”url” alt=”عبارت مورد نظر” />

تنظیم ابعاد تصاویر

بهتر است که سعی کنید ابعاد عکس را از ابتدا متناسب انتخاب کنید و در صفحه به کار ببرید. اما این را بدانید که در html می توانید اندازه عکس ها را به دلخواه تغییر دهید و با اندازه بر حسب پیکسل (px) عکس ها را بزرگتر یا کوچکتر کنید. به مثال زیر دقت کنید.

<img src = “url” style=”width:256px ; height:365px; ” />

در اولین قدم باید اتریبیوت Style را بعد از تصویرمان قرار دهیم. سپس یکبار کلمه hieght را نوشته و بعد از علامت : طول تصویر را بر حسب پیکسل وارد می کنیم. در مرحله بعدی نیز یکبار کلمه width را نوشته و عرض مورد نظر را بر حسب پیکسل وارد می‌کنیم.

  • حتما  توجه کنید که در هنگام وارد کردن مشخصات در داخل Style، بین هر دو استایل، یک علامت ; قرار دهید.
  • ابعاد تصاویر بر حسب پیکسل px وارد می شود.
شاید از این مقاله خوشتون بیاد:  آموزش css جلسه سوم :فرمت دهی جداول در css

راه دیگر برای تغییر ابعاد تصاویر این است که آن‌ها را بدون اتریبیوت استایل بنویسید. استفاده از اتریبیوت استایل همیشه ضروری نیست و شما می‌توانید طول و عرض را به صورت مستقیم نیز استفاده کنید. بنابراین تصویر زیر نیز دقیقا همان کاری را انجام می‌دهد که در حین بکاربردن Style نشان داده شد.

<img src = “url” width=”256px” height=”365px” />

کلمه px را همیشه بعد از مقدار اتریبیوت ها به کار ببرید تا مرورگر متوجه شود باید چه کاری انجام دهد و از بروز خطا جلوگیری شود.

یادگیری html واقعا شیرین و لذت بخش است. پس منتظر بخش های بعدی و یادگیری مطالب جدید و تخصصی تر باشید.

دسته‌ها: دنیای وب

غلامرضا بهشتیان

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *