تصاویر در زبان HTML

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

تصاویر و عنصر <img>

برای نمایش تصاویر در زبان HTML از تگ معروف <img> استفاده می شود:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="http://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="Girl blowing snow" width="500" height="333">

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که مشاهده می کنید نکاتی در مورد تگ <img> وجود دارد:

این تگ از دسته تگ های خالی است بنابراین هیچ محتوای متنی نمی گیرد.
این تگ، تگ های آغازین و پایانی ندارد.
این تگ تنها شامل attribute های مختلف می شود که مهم ترین آن ها src (مخفف source و به معنی «منبع») می باشد.

با این توضیحات متوجه می شویم که ساختار حداقلی تگ img به این شکل است:

<img src="url">

بیایید تک تک attribute های این تگ را بررسی کنیم:

ویژگی alt

در تصاویری که در دنیای وب هستند، attribute ای به نام alt وجود دارد. کار این attribute ارائه ی متنی جایگزین برای تصویر ما است تا اگر زمانی تصویر ما به کاربر نمایش داده نشود (به طور مثال تصویر به صورت اتفاقی از سرور ما حذف یا فیلتر شده باشد، آدرس دهی ما به src اشتباه باشد و ...) به جای آن متنی نمایش داده شود که به کاربر بگوید این تصویر در مورد چه چیزی بوده است.

استفاده ی دیگر این تگ نیز برای افراد نابینا یا کم بینا است که از دستگاه های screen reader استفاده می کنند. screen reader ها می توانند alt را بخوانند تا فرد متوجه تصویر شود.

بر اساس چیزی که گفته شد همیشه سعی کنید alt را طوری بنویسید که تصویر را توصیف کند و از موارد دیگر پرهیز کنید.

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="http://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" width="500" height="333">

</body>
</html>

مشاهده ی خروجی در JSBin

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

ویژگی های Width و Height

قبلا به صورت کوتاه اشاره کرده بودیم که می توانید از style استفاده کنید تا width (عرض یا پهنا) و height (طول یا ارتفاع) یک تصویر را مشخص کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="http://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" style="width:500px;height:350px;>

</body>
</html>

خروجی این کد در JSBin

اما این روش آنچنان چنگی به دل نمی زند. چرا که باز هم inline (درون‌خطی) است. اگر نمی دانید استایل های inline چه هستند به دوره ی CSS ما سری بزنید.

بنابراین راه بهتر چیست؟ راه بهتر این است که اصلا از CSS استفاده نکنیم چرا که خود زبان HTML برای ما attribute هایی را به همین اسم فراهم کرده است:

<img src="http://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" width="500" height="350">

واحد کار با تصاویر در زبان HTML پیکسل است بنابراین 'width = '500 یعنی عرض تصویر 500 پیکسل باشد.

سوال: اگر کد های CSS را به صورت inline ننویسیم چطور؟

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

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

آدرس دهی src

حتما متوجه شده اید که تا به حال برای src از آدرس کامل (full path) استفاده کرده ام، دلیل آن هم این است که تصویر مورد نظر خود را از سرور دیگری برداشته ام. اگر تصویر شما روی سرور خودتان وجود دارد می توانید از آدرس دهی نسبی (relative path) استفاده کنید. مثال:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

تصاویر متحرک

شما مجاز هستید در زبان HTML از تصاویر متحرک GIF نیز استفاده کنید. به طور مثال میخواهیم GIF زیر را به کد هایمان اضافه کنیم:

وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی!

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

<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>
<p>The GIF standard allows moving images.</p>

<img src="https://undo.io/media/uploads/files/Frustrated_programmer.gif" alt="وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی!" width="500" height="350">

</body>
</html>

خروجی این کد در JSBin

همچنین به یاد داشته باشید که تصاویر GIF از دیگر تصاویر جدا نیستند، بنابراین می توانید به راحتی آن ها را نیز به لینک تبدیل کنید! اگر از قسمت های قبلی به یاد داشته باشید برای این کار تنها کافی است تگ img را بین تگ های a قرار دهید:

<a href="roxo.ir">
  <img src="Programmer.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

ویژگی float

attribute ای به نام float (به معنی «شناور» یا «شناور شدن») وجود دارد که به تصویر اجازه می دهد با متن تعامل داشته و در کنار آن قرار بگیرد. در حالت عادی تصاویر نمی توانند هم سطح و کنار یک متن یا عناصر دیگر قرار بگیرند اما با استفاده از float این کار انجام شدنی است. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p align ='center'><strong>کردن تصاویر به سمت راست نوشته float</strong></p>

<p>
<img src="https://www.w3schools.com/html/smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p align ='center'><strong>کردن تصاویر به سمت چپ نوشته float</strong></p>
<p>
<img src="https://www.w3schools.com/html/smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
</p>

</body>
</html>

خروجی این کد در JSBin

البته این نکته پیچیده تر و به مبحث CSS مربوط می شود بنابراین توضیحات بیشتر آن را به دوره ی CSS واگذار می کنیم.

عنصر <picture>

در HTML5 عنصر جدیدی به نام <picture> معرفی شده است تا به صفحات وب انعطاف پذیری بیشتری بدهد. تگ <picture> شامل چند تگ <source> می باشد که هر کدام از آن ها دارای attribute هایی هستند که به مرورگر می گویند در دستگاه های مختلف (با سایز صفحات مختلف) کدام تصویر بهتر نمایش داده می شود. به مثال زیر دقت کنید تا بهتر متوجه این موضوع شوید.

در مثال زیر میبینید که با تغییر سایز پنجره ی مرورگر و یا تغییر سایز قسمت راست (قسمت مشاهده ی خروجی در JSBin) تصاویری که برای شما نمایش داده می شوند متفاوت هستند:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="https://www.w3schools.com/html/img_white_flower.jpg">
  <img src="https://www.w3schools.com/html/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

مشاهده ی خروجی در JSBin

صفحه ی نتایج (سمت راست) و یا پنجره ی مرورگر خود را کوچک و بزرگ کنید تا متوجه تغییر تصاویر بشوید! مرورگر با استفاده از media query ها سعی می کند بهترین تصویر را برای سایز صفحه ی شما پیدا کند. اگر دقت کنید می بینید که تگ آخر به جای آنکه از نوع <source> باشد، از نوع img است. باید بدانید که قرار دادن آخرین تصویر با تگ img الزامی است و حتما باید انجام شود؛ دلیل آن این است که اگر مرورگری بسیار قدیمی بود و از تگ <picture> پشتیبانی نمی کرد، وب سایت شما بدون تصویر نماند و همان تصویر img بارگذاری شود.

نکته: این قابلیت در مرورگر IE12 و نسخه های قبل تر و همچنین در Safari 9.0 و نسخه های قبل تر پشتیبانی نمی شود.

امیدوارم از این قسمت لذت برده باشید!