افزودن اولین عکس به گالری
خوب، حالا آماده ایم اولین عکس را به گالری خود اضافه نماییم، عکسی از یک لاک‌پشت سرسخت! به نظر می رسد کوسه‌ای یکی از پاهای او را جدا کرده باشد.
عکس 5.8: تصویری از یک لاک‌پشت سرسخت و قوی!
قصد ما از توضیح این عکس این بود که ببینیم تنها با یک عکس ساده از یک لاک‌پشت طرف نیستیم. پس بهتر است این توضیح را به خصوصیت alt عکس اضافه کنیم. این هم یک توصیف دیداری است، نه؟
<p><img src="gallery/turtle-bite.jpg" width="400" height="258"
alt="A turtle swims comfortably among the coral, despite its
old injury - a large shark bite on one side"/></p>
دسترسی به عکس‌ها
شما می‌توانید این عکس و باقی عکس‌هایی را که در ادامه اضافه می کنیم در بخش code archive پیدا کنید.
توجه داشته باشید که مقدار خصوصیت src در اینجا اندکی با آنچه پیشتر دیده بودیم تفاوت دارد. خط اِسلش استفاده شده به مرورگر می‌فهماند که این عکس درون یک فولدر جای گرفته است. در اینجا از gallery/turtle-bite.jpg بر میاید که فایل turtle-bite.jpg درون پوشه gallery قرار گرفته است. پس پیش از آنکه این تصویر را به گالری خود اضافه کنید درون فولدر سایت خود یک پوشه به نام gallery بسازید و سپس عکس را درون آن قرار دهید.
زمانی که تصویر را درون فولدر جای دادید مارک-آپ بالا را به gallery.html اضافه کنید:
<div id="bodycontent">
<h2>Image Gallery</h2>
<p>Below are some of the great views that club members have
captured on film (or digital memory) on various dive
trips.</p>
<p>Please do drop me (that's Bob) a line if you would like to
<a href="mailto:bob@bubbleunder.com">submit an image</a> to
this gallery.</p>
<p><img src="gallery/turtle-bite.jpg" width="400" height="258"
alt="A turtle swims comfortably among the coral, despite its
old injury - a large shark bite on one side"/></p>
</div><!-- end of bodycontent div -->
صفحه را ذخیره کرده و در مرورگر نتیجه کار را مشاهده نمایید، باید مشابه عکس 5.9 باشد.
عرض عکس حدودا 400 پیکسل به نظر می رسد که البته به خوبی در قالب سایت جای گرفته است. به زودی خواهیم آموخت که چگونه یک در سایز عکس تغییراتی ایجاد کنیم، چراکه تصاویری که با دوربین دیجیتال گرفته شده اند برای سایت بسیار بزرگ هستند.
عکس 5.9: ساماندهی صفحه گالری سایت
