آموزش طراحی سایت

4 نکته در معرفی تگ img در HTML

تگ img در HTML چیست؟

تگ img در HTML |از سری آموزش های طراحی سایت در این مقاله به اموزش تگ img در HTML می پردازیم.

علاوه بر متن ساده ، تصاویر یکی از متداول ترین متریال ها برای نمایش در صفحات وب هستند و HTML یک برچسب img را برای این منظور فراهم کرده است ،

یک برچسب نمایش تصویر یا img اجازه می دهد تا یک تصویر در صفحات وب (وب سایت ها ، وبلاگ ها و غیره) نمایش داده شود. و غیره.).

عملکردهای دیگری مانند alt ، عنوان ، نقشه ، مساحت ، مرز و غیره را شامل می شود و می تواند کنترل بیشتری در مورد ظاهر ، کنترل و کنترل رفتارهای مبتنی بر رویداد داشته باشد ،

مانند تعیین مکان کلیک کاربر. استفاده صحیح از برچسب img علاوه بر اینکه از نظر استانداردهای برنامه نویسی مهم است ،

یک عامل مؤثر در دانش سئو (SEO یا بهینه سازی موتور جستجوگر صفحه وب) است. ما به تصاویر و نمایش تصاویر در صفحات وب اختصاص داده ایم.

معرفی تگ img در HTML
معرفی تگ img در HTML

تگ img در HTML

تگ img در HTML  |دلایل زیادی وجود دارد که ممکن است بخواهید یک عکس به صفحه وبسایتتان اضافه کنید مانند اضافه کردن لوگو، نمودار یا دیاگرام.

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

اگر در حال ساخت یک وبسایت از صفر هستید، بهتر است پوشه‌های تصاویر را جدا کنید. همانطور که وبسایت رشد می‌کند، جدا نگه‌داشتن تصاویر در فولدر‌های جداگانه به شما کمک می کند تا سازمان‌دهی بهتر برروی وبسایت خود اعمال کنید.

معرفی تگ img در HTML
معرفی تگ img در HTML

اضافه کردن تصویر به سند HTML با استفاده از تگ img

برای اضافه کردن یک تصویر در سند HTML با استفاده از تگ img  می‌بایست مانند زیر عمل کنیم:

Image%20Address

در بالا به جای Image Address می‌بایست آدرس تصویر را جایگزین کنید.

نکته: تگ img نیازی به تگ img بستن ندارد. (بنابراین نیازی به تگ  نداریم.)

نمونه‌ای از قرارگیری تصویر در سند HTML را در زیر برایتان قرار داده‌ایم:

Smiley face



خاصیت‌های تگ 

تگ img در HTML  |در جدول زیر خاصیت‌های تگ  را معرفی می‌کنیم.

خاصیت ها مقدار‌ها توضیحات
خاصیت align top

bottom

middle

left

right

این خاصیت معمولا برای تعیین نحوه رفتار سایر بخش های صفحه وب نسبت به موقعیت تصویر است. خاصیت align از html نسخه 5 به بالا حذف شده است که وبسایت‌های جدید باید از کد‌های css برای کنترل این خاصیت استفاده کنند.
خاصیت alt متن این خاصیت یک توضیح از تصویر ارائه می‌دهد که تصویر معین شده را توصیف می‌کند.
خاصیت border pixels این خاصیت در HTML5 پشتیبانی نمی شود.

پهنای حاشیه عکس را برحسب پیکسل تعیین می کند.

خاصیت crossorigin anonymous

use-credentials

به وبسایت‌های ثالث اجازه می‌دهد تا به صورت منشا متقابل به همراه canvas استفاده شوند.
خاصیت height pixels برای تعریف ارتفاع عکس استفاده می‌شود.
خاصیت hspace pixels این خاصیت برروی HTML5 پشتیبانی نمی شود.

فاصله خالی از چپ و راست تصویر را تعیین می کند.

خاصیت ismap ismap مشخص می کند تصویر مورد نظر یک تصویر از سمت سرور به صورت مپ است یا خیر
خاصیت longdesc URL لینک صفحه ای که در آن توضیحات کامل عکس وجود دارد یا مشخص می کند.
خاصیت sizes اندازه تصویر را برای طرح بندی های متفاوت تعیین می کند.
خاصیت src URL این خاصیت به مرورگر اعلام می‌کند که آدرس فایل تصویر در کجا قرار دارد. معمولا برای آدرس دهی به صفحات داخل وبسایت از آدرس‌دهی وابسته استفاده می‌شود.
خاصیت srcset URL لینک تصویر را برای استفاده در موقعیت های متفاوت تعیین می کند.
خاصیت title متن خاصیت عنوان برای افزودن اطلاعات بیشتر به تصویر استفاده می‌شود. اکثر مرورگر‌های وب متن این خاصیت را در یک tooltip قرار می‌دهند که با قرار گرفتن پوینتر موس بر روی تصویر به نمایش در می‌آید.
خاصیت usemap #mapname تصویر را به عنوان یک مپ از سمت کلاینت تعیین می کند.
خاصیت vspace pixels این خاصیت در نسخه HTML5 پشتیبانی نمی شود.

فاصله بالا و پایین تصویر را معین می کند.

خاصیت width pixels برای تعیین عرض عکس استفاده می‌شود.

معرفی تگ img در HTML
معرفی تگ img در HTML

تصاویر را در کجا قرار دهیم؟

تگ img در HTML  |محل قرارگیری تگ تصویر در کد ها بر نحوه نمایش تصویر تاثیر دارد در اینجا به عنوان نمونه سه محل را در نظر می گیریم:

  1. قبل از پاراگراف: پاراگراف در خط جدید بعد از تصویر به نمایش در می‌آید.
  1. در شروع پاراگراف: پاراگراف دقیقا در همان خط بعد از تصویر نمایش داده می‌شود.
  1. در وسط پاراگراف: تصویر در بین پاراگراف قرار می‌گیرد.

در زیر ۳ نمونه بالا را به صورت کامل مشاهده می‌کنید. همچنین شما می‌توانید با استفاده از استایل‌دهی‌های css نمونه‌های بهتری را برای قرارگیری تصاویرتان ایجاد کنید.

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

برای اینکه تصویری که در سند HTML خود بارگذاری می‌کنیم را لینک‌دهی کنیم، می‌بایست ما بین تگ img از تگ img  استفاده کنیم. برای درک بهتر نمونه زیر را یک‌بار در ویرایشگر کد خودتان آزمایش کنید. همچنین برای درک بهتر لینک‌دهی و لینک‌سازی مقالات ما در این خصوص را بخوانید.

Smiley face


نتیجه‌گیری 

تگ img در HTML  |در این آموزش با نحوه قرار دادن تصاویر در سند اچ تی ام ال با استفاده از تگ img آشنا شدیم و خاصیت‌های آن را شناختیم.

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

آموزش‌های دیگر HTML سئو شو  را دنبال کنید و همچنین می‌توانید از طریق برچسب‌ها مقالات مربوط به تگ‌های مربوط به تصاویر را دنبال کنید.

۵ روش برای سریع تر کردن پرداخت های مشتریان - وبلاگ حسابیت

 

نمایش بیشتر

امیرحسین شمس

امیر حسین شمس | هم اکنون در زمینه های مختلفی چون طراحی سایت ، بهینه سازی سایت ، سئو (SEO) ، امنیت سایت ، آموزش طراحی سایت ، دیجیتال مارکتینگ ، سئو و مشاوره‌ کسب و کارهای اینترنتی فعالیت دارم. از سال 1385 تحصیلات خود را در زمینه ی علوم کامپیوتر شروع کرده و دوره های هوش مصنوعی ، شبکه های عصبی ، منطق فازی ، برنامه نویسی دات نت، طراحی سایت ، دیتابیس ، امنیت دیتابیس ، دیجیتال مارکتینگ، ایمیل مارکتینگ و سئو سایت را بصورت تخصصی گذرانده ام.

نوشته های مشابه

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

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

دکمه بازگشت به بالا
× چگونه می‌توانم به شما کمک کنم؟