قبل تر در فصل دوم در این رابطه تغییر کوچکی در سایت خود دادیم تا زیاد ساده و خالی به نظر نیاید: تصویر مربوط به غواصان را به سایت خود اضافه کردیم(با استفاده از تگِ img). این کار حقیقتا باید انجام داده می شد تا ظاهر کار به شکل قبلی خود باقی نماند. به خاطر داشته باشید که وب به طور کلی از نظر ظاهری نیز باید دلچسب و زیبا باشد، گفته شده: یک عکس به اندازه هزاران کلمه سخن در بر دارد، و این بیانی درست است.
در این فصل ادامه مبحث ناتمام استفاده از تصاویر را دنبال خواهیم کرد. از استفاده به عنوان بخشی از محتوا گرفته تا قرار دادن به عنوان پس زمینه را با هم مرور کرده و یاد می گیریم. علاوه بر موارد ذکر شده نگاهی نیز به بحث ویرایش تصاویر با استفاده از نرم افزارهای معرفی شده در فصل اول خواهیم داشت.
بیایید با استفاده از یک inline image کار را آغاز کنیم.
Inline Images
نگاهی دوباره به کدِ مربوط به Inline Image درون HTML میاندازیم:
<img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/>
به احتمال زیاد این کد را از فصل دوم به خاطر دارید اما بهتر است از نو آن را به یاد آوریم.
آناتومی ساختار تگِ Image
1. نام این تگ img است. توجه کنید که این تگ یک تگ خالی بوده و تگِ بسته ای ندارد. علامت اسلش رو به جلو(/) در آخر قرار داده شده تا XHTML را راضی نگاه دارد و علاوه بر آن نشان دهنده آن است که تگ استفاده شده self-closing می باشد. در HTML5 doctype(همان چیزی که در سایت خود استفاده کرده ایم)، می توانید از این اسلش صرف نظر کنید، این کار در ظاهر تصویر تاثیری نداشته و همچنین Markup ما را نیز دچار مشکل نمی کند.
2. خصوصیت src سورس تصویر ما را برای مرورگر تعریف می کند: مکان و نام فایل تصویری که مرورگر باید آن را فراخوانی کند. در مثال ما نام تصویر استفاده شده divers-circle.jpg می باشد.
3. خصوصیت alt خصوصیت مهمی است که به طور مفصل در ادامه کار توضیح داده خواهد شد.
4. خصوصیت های height(ارتفاع) و width(عرض) اندازه تصویر استفاده شده ما را برای مرورگر تعریف می کنند تا در صورت پایین بودن سرعت اینترنت کاربر محتوای متنی ابتدا بارگذاری شده و جای خالی عکس ها با اندازه مشخص پیش تر در نظر گرفته شود. توجه داشته باشید که در صورتی که این خصوصیت ها نادیده گرفته شوند صفحه سایت ما زمانی که مرورگر مشغول بارگذاری آن است شکل مشخصی نداشته و با بارگذاری هر عکس محتوا در صفحه جابه جا می شود، شاید با این مورد روبه رو شده باشید، حتما می دانید که برای بازدید کننده چقدر آزاردهنده است.
هر دوی خصوصیت های عرض و ارتفاع دلبخواهی بوده و مثل src و alt مجبور به تعریف آن ها نیستیم، اما از آن جا که بسیار کاربردی و مهم هستند اکثر طراحان وب از آن ها چشم پوشی نمی کنند.
خصوصیت alt: تصویر قرار داده شده را برای همگان مفید می کند
در سایت غواصی خود تصویر استفاده شده خصوصیت alt دارد و مقدارش "A circle of divers practice their skills." می باشد. اما این برای چیست؟ خصوصیت alt متن جایگذینی را برای تصویر در نظر می گیرد. متنی که در پاره ای از موارد برای برخی از کاربران بسیار مفید خواهد بود، به نمونه های زیر توجه کنید:
1. بیننده سایت شما فردی نابینا باشد.
2. کاربر سایت شما از اینترنت پر سرعت برخوردار نبوده و بارگذاری عکس ها را برای سرعت بیشتر غیر فعال کرده است.
3. کاربر از سرویس اینترنتی بسیار بسیار ضعیف استفاده می کند به طوری که مدت خیلی زیادی برای بارگذاری تصاویر باید منتظر باشد.
در تمامی این نمونه ها خصوصیت alt راه جایگزینی را برای در اختیار گذاشتن محتوای درون تصویر به افراد ذکر شده در نظر گرفته است. عکس 5.1 نمونه سایت نشان داده شده درون سیستم کاربر 2 و 3 را به شما نشان می دهد.
عکس 5.1: زمانی که سرعت پایین اینترنت مانع از بارگذاری تصویر می شود
اگر کاربر سایت از سرویس بسیار کم سرعتی استفاده می کند در صورت مواجه شدن با متن جایگذین می تواند مهم بودن آن را برآورد کند و تصمیم گیرد که بماند تا تصویر لود شود یا اینکه با یکی از لینک ها به بخش دیگری از سایت برود. در مورد دیگر که کاربر به صورت عمدی تصاویر را غیر فعال کرده نیز همین داستان صادق است، او می تواند برای یکی از عکس های مهم استثنا قائل شود.
برای یک فرد نابینا نیز تنها ابزار درک محتوای درون تصویر همین مقدار مشخص شده برای خصوصیت alt می باشد.
در قسمت بعدی به طور کامل با مزایای خصوصیت alt ِ تصاویر آشنا خواهیم شد.
