آموزش کامل HTML و HTML5: کار با تصاویر

آموزش کامل HTML و HTML5: کار با تصاویرReviewed by محمدرضا on Jan 19Rating: 5.0

با سلام

تصاویر در HTML:

امروز با تگ img و کار با آن و صفت های آن آشنا خواهیم شد.

تگ <img>: این تگ جزو آن دسته از تگ هایی است که نیاز به تگ پایانی ندارد و برای قرار دادن تصاویر در صفحه ی وب از آن استفاده می شود.

با مثال زیر متوجه خواهید شد که از این تگ چگونه باید استفاده کنید.در این مثال قصد داریم تا لوگوی سایت فاب تم را در مرورگر نمایش دهیم:

<img src="http://fabtheme.ir/wp-content/uploads/2016/11/logo.png" alt="لوگوی سایت فاب تم" border="2" width="150" height="150" >

نتیجه در مرورگر:

آموزش کامل HTML و HTML5: کار با تصاویر

صفت های مهم این تگ:

  • صفت src : لینک عکس مربوطه است که می خواهیم در مرورگر نمایش داده شود.
  • صفت border : ضخامت دور عکس است که مقدار پیکسلی می گیرد و با افزایش آن ضخامت زیاد می شود(رنگ سیاه دور لوگوی فاب تم در تصویر).
  • صفت width : عرض تصویر در خروجی را نمایش می دهد.
  • صفت height : ارتفاع تصویر را در خروجی نمایش می دهد.

نکته: صفت src لازمه ی این تگ است چرا که لینک عکس مربوطه را تعیین می کنیم و بدون آن این تگ معنایی ندارد و همچنین صفت alt که یک متن جایگزین را تعیین میکند و در هنگامی که تصاویر سایت ما لود نشودند این متن بجای تصویر نمایش داده می شود.

نکته: صفت alt را هیچ وقت برای یک تصویر در صفحهی وب فاموش نکنید چرا که در سئو حائز اهمیت بوده و باعث بهینه شدن سایت شما می شود.

اگر به خاطر داشته باشید گفته بودیم که تگ <a> برای لینک دادن به یک متن استفاده می شود. بصورت زیر:

<a href="http://www.fabtheme.ir" target="_blank"> فاب تم </a>

حال به نظر شما اگر بخواهیم یک تصویر را بصورت لینک ایجاد کنیم باید چه کاری انجام دهیم؟؟؟

همان طور که مطمئنا به ذهن شما هم رسیده است باید تگ img را در بین تگ باز و بسته ی a قرار دهیم چرا که تگ a تگ لینک است و با قرار گرفتن هر تگی در آن بصورت لینک خواهد شد. برای درک بهتر به کد زیر دقت کنید:

<a href="http://fabtheme.ir" title="کلیک کنید" target="_blank" >
    <img src="http://fabtheme.ir/wp-content/uploads/2016/11/logo.png" alt="لوگوی سایت فاب تم" border="2" width="150" height="150" >
</a>

نتیجه در مرورگر:

آموزش کامل HTML و HTML5: کار با تصاویر

توضیحات در کدهای HTML:

زمانی که شما کد نویسی هایتان زیاد شود و امکان خوانایی آن ها وجود نداشته باشد و یا بسیار سخت باشد نیاز توضیحات در این زبان و خیلی از زبان های دیگر برنامه نویسی پیدا می شود.

بهتر است همیشه در هنگام کد نویسی هایمان از کامنت ها و یا توضیحات در کدهای خود استفاده کنید چرا که از همان اول باعث خوانایی و درک راحت کد هایمان خواهد شد.

نکته: توضیحات فقط در کد نویسی برای برنامه نویس قابل نمایش هستند و به هیچ وجه در خروجی برای کاربر نمایش داده نمی شود.

شکل کلی توضیحات در HTML:

<!-- this is a comment -->

همانطور که مشاهده می کنید ابتدا > و بعد از آن ! و — برای شروع یک کامنت و — و > برای پایان آن است. در میان — خط توضیحات ما قرار میگیرد.

این شکل کامنت گذاری به مرورگر میفهماند که این محتوا را در مرورگر نمایش ندهد و فقط در کد نویسی باشد.

به مثال زیر دقت کنید:

<p> This is a Pragraph 1 </p>
<!-- این متن در مرورگر نمایش داده نمیش شود -->
<p> This is a Pragraph 2 </p>

نتیجه در مرورگر:

آموزش کامل HTML و HTML5: کار با تصاویر

همان طور که مشاهده میکنید کامنتی که بین دو تگ پاراگراف قرار دادیم در خروجی نمایش داده نشده است.

کار با تصاویر در HTML هم به پایان رسید لطفا خودتا به سایت wp3schools رفته و در مورد این تگ اطلاعات بیشتری را کسب کرده.

تمرین این تگ را هم مثل همیشه فراموش نکنید مقادیر صفت ها را خودتان تغیر دهید تا بهتر با این تگ و عملکردش آشنا شوید.

موفق باشید…

Html Html5 آموزش طراحی رابط کاربری

دیدگاه خود را بیان کنید