درج تصویر در صفحات وب بخش دوم

در جلسه قبلی با نحوه آدرس دهی نسبی آشنا شدید. در این جلسه تمرینات عملی راجع به این موضوع خواهیم داشت.

در کاوشگر ویندوز به مسیری که فایل های html خود را ذخیره کرده اید بروید. فایل پوشه ای به نام html ایجاد کرده بودیم. درون پوشه html، دو پوشه جدید ایجاد کنید. یکی از آن ها را images  و دیگری را pages نام گذاری کنید. اگر سیستم عامل شما ویندوز باشد، کاوشگر ویندوز به شکل زیر خواهد بود: (ویندوز 7).

فایل html را باز کرده و کد html درج تصویر زیر را به فایل خود اضافه نمایید:

فایل html را از طریق منوی File>Save As مجددا در پوشه ای که جدیدا به نام Pages ایجاد کرده ایم ذخیره کنید و نام آن را images.html بگذارید. فراموش نکنید که در قسمت Save As Type گزینه

 All File  را انتخاب کنید. در محیط ویندوز نتیجه به صورت زیر خواهد بود:

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

و چنانچه از مرورگر اینترنت اکسپلورر استفاده می کنید، صفحه به شکل زیر خواهد بود:

در هر دو حالت، تصویری نمایش داده نمی شود. فایر فاکس آیکون فایل شکسته و اینترنت اکسپلورر آیکون x قرمز را نمایش می دهد و علت اینست که مرورگر قادر به پیدا کردن فایل تصویر نمی باشد.

بنابراین هر گاه در آینده به آیکون فوق برخوردید، به خاطر داشته باشیدکه مرورگر می گوید: "قادر به پیدا کردن فایل تصویر نیستیم". برای حل این مشکل، تعدادی فایل برای شما فراهم کرده ایم. فایلهای مورد نیاز در پوشه extra_files  قرار دارند که در این جلسه به آن خواهیم پرداخت. فایل های ذکر شده از این قسمت  Download the Extra Files needed for this course  قابل دریافت هستند.

بر روی پوشه extra_files دوبار کلیک کنید و سپس بر روی پوشه york_images دوبار کلیک کنید. فایل york_minster.jpg را کپی کرده و داخل پوشه html خود و داخل پوشه page آنرا پیست نمایید. در این لحظه پوشه page به شکل زیر خواهد بود:

فایل تصویر و فایل html هر دو در یک پوشه قرار دارند، (پوشه page). به اندازه فایل تصویر توجه نمایید. -747 کیلو بایت می باشد که برای استفاده در اینترنت کمی سنگین است.

بعد از اینکه تصویر کپی شد، مرورگر را به روزرسانی کنید و ملاحظه خواهید کرد که فایل تصویر نمایان می شود:

نکته: اگر تصویری نمایش داده نمی شود و همچنان آیکون عدم یافتن فایل بر روی صفحه مشاهده می شود، به کد html  بازگشته و قسمت src تصویر را چک نمایید.

SRC="york_minster.jpg"

به وضعیت بزرگ و کوچک بودن حروف و همچنین دو علامت "" دقت نمایید. همچنین اطمینان حاصل کنید که فایل تصویر و صفحه وب هر دو در یک پوشه قرار گرفته اند.

زمانی که عکس برروی صفحه نمایان شد، پوشه دیگری داخل پوشه pages ایجاد نمایید. این پوشه را  york_images بنامید. کاوشگر ویندوز به شکل زیر خواهد بود:

حال فایل york_minster.jpg را به پوشه  york_images منقل کنید. حال کاوشگر ویندوز به شکل زیر خواهد بود:

صفحه وب را در مرورگر مجددا بارگذاری نمایید. آیکون عدم یافتن فایل مجددا نمایان خواهد شد. اکنون به کدهای html بازگشته و تگ img را به صورت زیر تغییر دهید:

                                                                                                                                          <"IMG SRC="york_images/york_minster.jpg>

همانطور که ملاحضه می کنید، نام پوشه اضافه کرده ایم و بعد از آن یک / قرار داده ایم. این روش وجود پوشه ای داخل همان پوشه فایل html را نشان می دهد. نام فایل تصویر بعد از علامت / قرار داده می شود. آدرس فوق به این معنی می باشد که " در همان پوشه ای که فایل صفحه  images.html  قرار دارد، پوشه ای بنام york_images را پیدا کن و داخل آن تصویری به نام york_minster.jpg وجود دارد."

کار خود را ذخیره کرده و صفحه images.html را در مرورگرمجددا بارگذاری نمایید. ملاحظه خواهید کرد، که تصویر مجددا نمایان می شود.

آدرس دهی پیشرفته

در بخش قبلی، پوشه های images و pager را ایجاد کردیم.

به صورت زیر:

برای مرتب سازی فایل ها می توانیم بیشتر فایل های html را در پوشه pages و تمام فایل های تصویری را در پوشه images قرار دهیم. (گفتیم بیشتر فایل های html به این دلیل که یک استثنا برای فایل index.html وجود دارد که در قسمت های بعدی به آن خواهیم پرداخت).

یکی از مشکلات پیش رو اینست که آدرس دهی کمی پیچیده تر می شود. فرض کنید که پوشه york_images را به داخل پوشه images منتقل کرده ایم. با این کار کد قبلی دیگر کار نمی کند:

<IMG SRC="york_images/york_minster.jpg">

و دلیل آن اینست که پوشه york_images دیگر داخل همان پوشه ایی که فایل images.html در آن قرار دارد، وجود ندارد.

تصاویر اکنون داخل پوشه ای بالاتر از پوشه pages هستند کد صحیح به صورت زیر می باشد:

<IMG SRC="../images/york_images/york_minster.jpg">

در اینجا بعد از src، دو نقطه داریم و بعد از آن یک علامت /، دو نقطه و یک / به این معناست که "یک مرحله از پوشه فعلی بالاتر برو". (فراموش نکنید که تمام این مسیرها به نسبت صفحه ی images.html سنجیده می شوند، محلی که کدها در آن قرار دارند). سپس مرورگر پوشه ای به نام images را جستجو می کند، سپس پوشه  york_images و بعد از آن فایل مشخص شده را جستجو می کند.

در درس بعدی، راجع به ویژگی های تصویر بحث خواهیم کرد.