نحوه استفاده از تصویر با تگ در HTML

در ابتدا، وب فقط متن بود و واقعاً خسته کننده بود. خوشبختانه، زمان زیادی نگذشت که قابلیت جاسازی تصویر (و دیگر انواع محتوای جالب تر) در صفحات وب با استفاده از تگ <img> در سند html اضافه شد. انواع دیگری از چند رسانه ای وجود دارد که باید در نظر گرفت، اما منطقی است که با تگ <img> عنصر فروتن شروع کنیم، که برای جاسازی یک تصویر ساده در یک صفحه وب استفاده می شود.

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

چگونه یک تصویر را در یک صفحه وب با استفاده از تگ <img> در سند html قرار دهیم؟

برای قرار دادن یک تصویر ساده در یک صفحه وب، از تگ <img> استفاده می کنیم. این یک تگ خالی است (به این معنی که نمی تواند محتوای فرزند داشته باشد و نمی تواند برچسب پایانی داشته باشد) که برای مفید بودن به دو ویژگی نیاز دارد: src و alt.

src ، حاوی یک URL است که به تصویری که می خواهید در صفحه جاسازی کنید اشاره می کند. همانند href در تگ <a>.

src  می تواند یک URL نسبی یا یک URL مطلق باشد. بدون src ، یک تگ img تصویری برای بارگذاری ندارد. به عنوان مثال، اگر تصویر شما dinosaur.jpg نامیده می شود و در همان دایرکتوری صفحه  html شما قرار دارد، می توانید تصویر را به این صورت جاسازی کنید:

<img src="dinosaur.jpg" alt="Dinosaur" />

اگر تصویر در یک پوشه images زیر شاخه بود که در همان دایرکتوری صفحه html قرار داشت، آن را به این صورت جاسازی می کنید:

<img src="images/dinosaur.jpg" alt="Dinosaur" />

و …

توجه: موتورهای جستجو نیز نام فایل های تصویر را می خوانند و آنها را در سئو حساب می کنند. بنابراین، باید به تصویر خود یک نام فایل توصیفی بدهید. dinosaur.jpg بهتر از img835.png است.

می توانید تصویر را با استفاده از URL مطلق آن جاسازی کنید، به عنوان مثال:

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

اما این توصیه نمی شود. شما باید تصاویر خود را میزبانی کنید، که در تنظیمات ساده به این معنی است که تصویر های وب سایت خود را در همان سروری که html خود دارید نگه دارید. در تنظیمات پیشرفته تر، ممکن است از CDN (شبکه تحویل محتوا) برای ارائه تصاویر خود استفاده کنید.

اخطار:

هرگز ویژگی src خود را به سمت تصویری که بدون اجازه در وب سایت شخص دیگری میزبانی شده است، قرار ندهید . به این می گویند “hotlinking”. به طور کلی غیراخلاقی در نظر گرفته می شود، زیرا زمانی که شخصی از صفحه شما بازدید می کند، شخص دیگری هزینه های پهنای باند را برای تحویل تصویر پرداخت می کند. همچنین هیچ کنترلی در مورد حذف یا جایگزینی تصویر با چیزی شرم آور برای شما باقی نمی گذارد.

به طور کلی، شما باید تصاویری را که می خواهید در سایت خود استفاده کنید، میزبانی کنید. به خاطر داشته باشید که بسیاری از تصاویری که ممکن است در وب پیدا کنید دارای حق چاپ هستند. قبل از میزبانی یک تصویر، باید مطمئن شوید که یکی از این موارد اعمال می شود:

• شما صاحب تصویر هستید.
• شما اجازه صریح و کتبی از مالک تصویر دریافت کرده اید.
• 7شما شواهد زیادی دارید که تصویر در واقع در مالکیت عمومی است.

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

متن جایگزین تصویر در صفحات وب با ویژگی alt در سند html

ویژگی بعدی که به آن نگاه خواهیم کرد ، ویژگی alt است. مقدار آن یک توصیف متنی از تصویر است، برای استفاده در موقعیت‌هایی که تصویر قابل مشاهده/نمایش نیست یا به دلیل اتصال اینترنت کند، زمان زیادی طول می‌کشد تا رندر شود. به عنوان مثال، کد بالا ما می تواند به این صورت اصلاح شود:

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

ساده ترین راه برای آزمایش ویژگی alt ، غلط املایی عمدی نام فایل است. اگر به عنوان مثال نام تصویر ما نوشته شده بود dinosooooor.jpg، مرورگر تصویر را نمایش نمی‌دهد و در عوض متن جایگزین را نمایش می‌دهد:

بنابراین، چرا متن جایگزین را می بینید یا نیاز دارید؟ به دلایل مختلفی ویزگی alt می تواند مفید واقع شود:

• کاربر دچار اختلال بینایی است و از یک صفحه خوان برای خواندن وب برای آنها استفاده می کند. در واقع، داشتن متن جایگزین برای توصیف تصاویر برای اکثر کاربران مفید است.
• همانطور که در بالا توضیح داده شد، املای نام فایل یا مسیر ممکن است اشتباه باشد.
• مرورگر از نوع تصویر پشتیبانی نمی کند. برخی از افراد همچنان از مرورگرهای متنی مانند Lynx استفاده می کنند که متن جایگزین تصاویر را نمایش می دهد.
• ممکن است بخواهید متنی را برای استفاده موتورهای جستجو ارائه دهید. به عنوان مثال، موتورهای جستجو می توانند متن جایگزین را با عبارت های جستجو مطابقت دهند.
• کاربران برای کاهش حجم انتقال داده و حواس پرتی، تصاویر را خاموش کرده اند. این امر به ویژه در تلفن های همراه و در کشورهایی که پهنای باند محدود یا گران است رایج است.

دقیقاً چه چیزی باید در داخل ویژگی alt خود بنویسید؟ این بستگی به این دارد که چرا تصویر در وهله اول وجود دارد. به عبارت دیگر، اگر تصویر شما نمایش داده نشود، چه چیزی از دست می دهید:

• تزیین. شما باید از تصاویر پس زمینه CSS برای تصاویر تزئینی استفاده کنید، اما اگر باید از HTML استفاده کنید، یک جای خالی اضافه کنید alt=”” . اگر تصویر بخشی از محتوا نیست، یک صفحه‌خوان نباید وقت خود را برای خواندن آن تلف کند.
• محتوا. اگر تصویر شما اطلاعات قابل توجهی ارائه می دهد، همان اطلاعات را در یک متن کوتاه alt ارائه دهید – یا حتی بهتر، در متن اصلی که همه می توانند ببینند. altمتن زائد ننویسید اگر همه پاراگراف ها دو بار در محتوای اصلی نوشته شوند، چقدر برای یک کاربر بینا آزاردهنده خواهد بود؟ اگر تصویر به اندازه کافی توسط متن اصلی توصیف شده است، فقط می توانید از alt=”” .
• ارتباط دادن. اگر تصویری را در داخل <a>تگ ها قرار می دهید، برای تبدیل تصویر به پیوند، همچنان باید متن پیوند قابل دسترسی را ارائه دهید . در چنین مواردی، می‌توانید آن را در همان <a>عنصر بنویسید، یا داخل altویژگی تصویر – هر کدام که در مورد شما بهترین کار را دارد.
• متن .شما نباید متن خود را در تصاویر قرار دهید. برای مثال، اگر عنوان اصلی شما نیاز به سایه انداختن دارد، به جای قرار دادن متن در یک تصویر ، از CSS برای آن استفاده کنید. با این حال، اگر واقعاً نمی‌توانید از انجام این کار اجتناب کنید ، باید متن را در داخل ویژگی alt قرار دهید.

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

تعیین عرض و ارتفاع برای تصویر ها در html

می توانید از ویژگی های width و height برای تعیین عرض و ارتفاع تصویر خود استفاده کنید. شما می توانید عرض و ارتفاع تصویر خود را به روش های مختلفی پیدا کنید. برای مثال در مک می توانید از Cmd+ I برای نمایش اطلاعات فایل تصویر استفاده کنید. با بازگشت به مثال خود، می توانیم این کار را انجام دهیم:

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

این در شرایط عادی تفاوت چندانی با نمایشگر ندارد. اما اگر تصویر نمایش داده نمی شود، به عنوان مثال، کاربر به تازگی به صفحه پیمایش کرده است، و تصویر هنوز بارگذاری نشده است، متوجه خواهید شد که مرورگر فضایی را برای نمایش تصویر باقی می گذارد:

این کار خوبی است که باعث می شود صفحه سریعتر و روانتر بارگذاری شود.

با این حال، شما نباید اندازه تصاویر خود را با استفاده از ویژگی های HTML تغییر دهید. اگر اندازه تصویر را خیلی بزرگ تنظیم کنید، در نهایت به تصاویری خواهید رسید که دانه دانه، مبهم یا خیلی کوچک به نظر می رسند و پهنای باند را برای دانلود تصویری که مطابق با نیازهای کاربر نیست، تلف می کنید. اگر نسبت تصویر صحیح را حفظ نکنید، ممکن است در نهایت تصویر نیز تحریف شده به نظر برسد . شما باید از یک ویرایشگر تصویر استفاده کنید تا تصویر خود را قبل از قرار دادن آن در صفحه وب خود در اندازه مناسب قرار دهید.

توجه: اگر نیاز به تغییر اندازه تصویر دارید، باید به جای آن از CSS استفاده کنید.

درباره HTML بیشتر بخوانید و حرفه ای شوید:

• ایجاد اولین سند html و آشنایی با ساختار صفحات آن
• آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت
• آموزش تگ p یا پاراگراف در html و کاربردهای آن
• آموزش تگ تاکیدی strong و em در HTML
• آموزش تگ های br و hr در HTML و نکات آن ها
• تمام نکات در مورد کامنت گذاری در HTML

عناوین تصاویر

همانند پیوندها ، همچنین می‌توانید ویژگی‌ title را به تصاویر اضافه کنید تا در صورت نیاز اطلاعات پشتیبانی بیشتری ارائه دهید. در مثال ما می توانیم این کار را انجام دهیم:

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

این به ما یک راهنمای ابزار در مورد شناور ماوس می دهد، درست مانند عنوان پیوند:

با این حال، این توصیه نمی‌شود .ویژگی title دارای تعدادی مشکلات دسترسی است که عمدتاً بر اساس این واقعیت است که پشتیبانی از صفحه‌خوان بسیار غیرقابل پیش‌بینی است و اکثر مرورگرها آن را نشان نمی‌دهند مگر اینکه با ماوس در حالت شناور قرار داشته باشید (به عنوان مثال، دسترسی به کاربران صفحه کلید وجود ندارد) .

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

حاشیه نویسی تصاویر با شکل و شرح تصاویر

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

<div class="figure">
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

این مشکلی ندارد. این شامل محتوای مورد نیاز شما است و با استفاده از CSS به خوبی قابل استایل است. اما در اینجا یک مشکل وجود دارد: چیزی که از نظر معنایی تصویر را به عنوان آن پیوند دهد، وجود ندارد که می تواند برای صفحه خوان ها مشکل ایجاد کند. به عنوان مثال، وقتی شما 50 تصویر و زیرنویس دارید، کدام عنوان با کدام تصویر می آید؟

راه حل بهتر، استفاده از تگ <figure>و <figcaption> در html است. اینها دقیقاً برای این منظور ایجاد شده‌اند: ارائه یک ظرف معنایی برای شکل‌ها، و پیوند واضح شکل با عنوان. مثال بالا ما می تواند به این صورت بازنویسی شود:

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

این <figcaption>عنصر به مرورگرها و فناوری کمکی می گوید که عنوان محتوای دیگر <figure>عنصر را توصیف می کند.

توجه: از دیدگاه دسترسی، زیرنویس‌ها و  متن alt نقش‌های متمایزی دارند. زیرنویس‌ها حتی برای افرادی که می‌توانند تصویر را ببینند نیز مفید است، در حالی که متن alt عملکردی مشابه یک تصویر غایب را ارائه می‌کند. بنابراین، زیرنویس‌ها و متن alt نباید فقط یک چیز را بیان کنند، زیرا هر دو وقتی تصویر از بین می‌رود ظاهر می‌شوند. سعی کنید تصاویر را در مرورگر خود خاموش کنید و ببینید چگونه به نظر می رسد.

یک figure نباید یک تصویر باشد. این یک واحد مستقل از محتوا است که:

• معنای شما را به روشی فشرده و قابل درک بیان می کند.
• می تواند در چندین مکان در جریان خطی صفحه برود.
• اطلاعات ضروری را برای پشتیبانی از متن اصلی ارائه می دهد.

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

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