هنوز سایت ما زیاد هیجان انگیز نشده است نه؟ به آنجا هم می رسیم عجله نکنید. مهمترین چیزی که در این لحظه باید بر روی آن تمرکز کنیم محتوای درست و مناسب برای سایتمان است. هنوز به طور دقیق وارد جزئیات طراحی سایت نشده ایم اما به مرور در همین فصل به مسائل کامل تر هم می پردازیم، تنها موردی که به طور دقیق به بحث و بررسی گذاشتیم انتخاب عنوان ها و سرتیتر های گوناگون در طراحی هایمان بود. در فصل بعد هم با یکدیگر می آموزیم که چگونه استایل و ظاهری مناسب برای محتوای در نظر گرفته شده خود طراحی کنیم—مثل: تغییر فونتِ استفاده شده، رنگ، فاصله بین مطالب و ... .—اما در حال حاضر تمرکز ما بر روی زیربناهای سایت و محتوای مناسب برای آن است.
تا این لحظه سایت اندکی خسته کننده طراحی شده است، نه؟! خوب بیایید اندکی شرایط را هیجان انگیزتر کنیم. البته حالاحالاها باید با این صفحه سیاه و سفید سر و کله بزنیم اما می توانیم یک تصویر مناسب در راستای محتوای در نظر گرفته شده سایتمان قرار دهیم.
فایل img خود را اینگونه به وبسایت اضافه می کنیم:
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" width="200" height="162" alt="A circle of divers practice their skills" /></p>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our home
page.</p>
اوه، اندکی تند رفتیم، نه؟! خوب کد بالا را مورد بررسی بیشتر قرار دهیم:
تگِ img برای اضافه کردن تصویر به سایت ما استفاده می شود و متغییرهایی که در آن استفاده می شوند هم عبارتند از: src، alt، ارتفاع و عرض، که اطلاعاتی در باره عکس قرار داده شده به سایت ما می دهند. متغییر src نام عکس ما را در خود جای داده است که در اینجا divers-circle.jpg می باشد و در ضمیمه به آن دسترسی خواهید داشت. متغییر alt در واقع متنی است که در صورت بارگذاری نشدن تصویر برای کاربر نشان داده می شود و برای افراد نابینا، کسانی که سرعت اینترنت پایین دارند و البته موتورهای جست و جوگر به کار میاید. عرض و ارتفاع عکس هم معلوم است برای چه کاری استفاده می شود، این مقادیر را با واحد پیکسل وارد می کنیم اگر هم دقیق نمی دانید پیکسل چیست نگران نباشید در این باره بعدها بیشتر صحبت می کنیم.
تصویر نشان داده شده در عکس 2.16 را از فایل ضمیمه دریافت کنید و در پوشه در نظر گرفته برای سایت خود قرار دهید.
فایل سایت را در برنامه ویرایش متن خود باز کنید و کد زیر را بعد از عنوان نوع دوم (h2) داخل سایت وارد کنید.
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" /></p>
بعد از این کار فایل را ذخیره کرده و در مرورگر خود تغییرات را مشاهده کنید، چیزی که میبینید باید مشابه عکس 2.17 باشد.
عکس2.17: نمایی از سایتمان تا به این لحظه.
