با سلام و عرض احترام خدمت خوانندگان گرامی روکسو، در این جلسه می خواهیم در رابطه با تصاویر در زبان HTML صحبت کنیم. در دنیای امروزی نمی توان وب سایتی ساخت که بدون تصویر باشد و همه معترف هستند که تصاویر باعث بهبود چهره ی سایت شما و در نهایت رضایت کاربران می شوند. بنابراین باید آن ها را مفصلا بررسی کنیم.
تصاویر و عنصر <img>
برای نمایش تصاویر در زبان HTML از تگ معروف <img>
استفاده می شود:
همانطور که مشاهده می کنید نکاتی در مورد تگ <img>
وجود دارد:
- این تگ از دسته تگ های خالی است بنابراین هیچ محتوای متنی نمی گیرد.
- این تگ، تگ های آغازین و پایانی ندارد.
- این تگ تنها شامل attribute های مختلف می شود که مهم ترین آن ها src (مخفف source و به معنی «منبع») می باشد.
با این توضیحات متوجه می شویم که ساختار حداقلی تگ img به این شکل است:
بیایید تک تک attribute های این تگ را بررسی کنیم:
ویژگی alt
در تصاویری که در دنیای وب هستند، attribute ای به نام alt
وجود دارد. کار این attribute ارائه ی متنی جایگزین برای تصویر ما است تا اگر زمانی تصویر ما به کاربر نمایش داده نشود (به طور مثال تصویر به صورت اتفاقی از سرور ما حذف یا فیلتر شده باشد، آدرس دهی ما به src اشتباه باشد و …) به جای آن متنی نمایش داده شود که به کاربر بگوید این تصویر در مورد چه چیزی بوده است.
استفاده ی دیگر این تگ نیز برای افراد نابینا یا کم بینا است که از دستگاه های screen reader استفاده می کنند. screen reader ها می توانند alt
را بخوانند تا فرد متوجه تصویر شود.
بر اساس چیزی که گفته شد همیشه سعی کنید alt
را طوری بنویسید که تصویر را توصیف کند و از موارد دیگر پرهیز کنید.
مثال:
alt
اجباری است و اگر صفحه ی شما تصاویر بدون alt
داشته باشد، از نظر HTML غیر معتبر تلقی شده و می تواند به رتبه بندی و سئوی شما ضربه بزند.ویژگی های Width و Height
قبلا به صورت کوتاه اشاره کرده بودیم که می توانید از style
استفاده کنید تا width (عرض یا پهنا) و height (طول یا ارتفاع) یک تصویر را مشخص کنید:
اما این روش آنچنان چنگی به دل نمی زند. چرا که باز هم inline (درونخطی) است. اگر نمی دانید استایل های inline چه هستند به دوره ی CSS ما سری بزنید.
بنابراین راه بهتر چیست؟ راه بهتر این است که اصلا از CSS استفاده نکنیم چرا که خود زبان HTML برای ما attribute هایی را به همین اسم فراهم کرده است:
واحد کار با تصاویر در زبان HTML پیکسل است بنابراین ‘width = ‘500 یعنی عرض تصویر 500 پیکسل باشد.
سوال: اگر کد های CSS را به صورت inline ننویسیم چطور؟
پاسخ: تفاوت زیادی ایجاد نمی کند و بستگی به سلیقه ی شما دارد.
آدرس دهی src
حتما متوجه شده اید که تا به حال برای src از آدرس کامل (full path) استفاده کرده ام، دلیل آن هم این است که تصویر مورد نظر خود را از سرور دیگری برداشته ام. اگر تصویر شما روی سرور خودتان وجود دارد می توانید از آدرس دهی نسبی (relative path) استفاده کنید. مثال:
تصاویر متحرک
شما مجاز هستید در زبان HTML از تصاویر متحرک GIF نیز استفاده کنید. به طور مثال میخواهیم GIF زیر را به کد هایمان اضافه کنیم:
وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی!
اضافه کردن این تصویر به یک صفحه ی HTML به سادگی کد زیر است:
همچنین به یاد داشته باشید که تصاویر GIF از دیگر تصاویر جدا نیستند، بنابراین می توانید به راحتی آن ها را نیز به لینک تبدیل کنید! اگر از قسمت های قبلی به یاد داشته باشید برای این کار تنها کافی است تگ img را بین تگ های a قرار دهید:
ویژگی float
attribute ای به نام float
(به معنی «شناور» یا «شناور شدن») وجود دارد که به تصویر اجازه می دهد با متن تعامل داشته و در کنار آن قرار بگیرد. در حالت عادی تصاویر نمی توانند هم سطح و کنار یک متن یا عناصر دیگر قرار بگیرند اما با استفاده از float
این کار انجام شدنی است. مثال:
البته این نکته پیچیده تر و به مبحث CSS مربوط می شود بنابراین توضیحات بیشتر آن را به دوره ی CSS واگذار می کنیم.
عنصر <picture>
در HTML5 عنصر جدیدی به نام <picture>
معرفی شده است تا به صفحات وب انعطاف پذیری بیشتری بدهد. تگ <picture>
شامل چند تگ <source>
می باشد که هر کدام از آن ها دارای attribute هایی هستند که به مرورگر می گویند در دستگاه های مختلف (با سایز صفحات مختلف) کدام تصویر بهتر نمایش داده می شود. به مثال زیر دقت کنید تا بهتر متوجه این موضوع شوید.
در مثال زیر میبینید که با تغییر سایز پنجره ی مرورگر و یا تغییر سایز قسمت راست (قسمت مشاهده ی خروجی در JSBin) تصاویری که برای شما نمایش داده می شوند متفاوت هستند:
صفحه ی نتایج (سمت راست) و یا پنجره ی مرورگر خود را کوچک و بزرگ کنید تا متوجه تغییر تصاویر بشوید! مرورگر با استفاده از media query ها سعی می کند بهترین تصویر را برای سایز صفحه ی شما پیدا کند. اگر دقت کنید می بینید کهتگ آخر به جای آنکه از نوع <source>
باشد، از نوع img
است. باید بدانید که قرار دادن آخرین تصویر با تگ img الزامی است و حتما باید انجام شود؛ دلیل آن این است که اگر مرورگری بسیار قدیمی بود و از تگ <picture>
پشتیبانی نمی کرد، وب سایت شما بدون تصویر نماند و همان تصویر img بارگذاری شود.
امیدوارم از این قسمت لذت برده باشید!