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

بعد از فایل تصویری شما با فرمت GIF یا JPEG آماده شد، زمان درج آن در وب سایت فرا رسیده است. این کار توسط تگ IMG در html امکان پذیر می باشد. تگ img به صورت زیر نوشته می شود:

<IMG SRC="some_image.gif">

تگimg  تگ پایانی ندارد و لازم نیست که به صورت زیر نوشته شود:

<IMG SRC="some_image.gif"></IMG>

 img از کلمه image و src از کلمه source بر گرفته شده است که محل فایل عکس را معرفی می کند.

نکته: قابل توجه در این قسمت این است که آدرس فایل عکس به درستی وارد شود. بنابراین لازم است که با انواع آدرس دهی مطلق و نسبی آشنا شویم.

آدرس دهی مطلق

به آدرس زیر توجه کنید:

C:\Users\Owner\Documents\HTML\some_image.gif

از قسمت سمت راست آدرس فوق مشخص است که تصویری با نام some-image موجود است که داخل پوشه ای بنام html قرار دارد و پوشه html خود درون پوشه Document و پوشه Document درون پوشه Owner و آن پوشه نیز درون پوشه Users قرار دارد که درون درایو C قرار گرفته است. این نوع آدرس دهی، آدرس دهی مطلق نام دارد که به یک عمل خاص از درایو C اشاره می کند.

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

بنابراین عکسی که در صفحه وب قرار دادیده اید فقط برای خودتان قابل مشاهده خواهد بود و نه شخص دیگر.

مثال دیگری از آدرس دهی مطلق به صورت زیر می باشد:

http://www.yasict.com

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

در حالت کلی آدرس دهی مطلق زمانی که فایل ها در کامپیوتر خودتان قرار دارند، روش کاربردی نمی باشد و بهتر است از روش آدرس دهی نسبی استفاده شود.

آدرس دهی نسبی

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

در آدرس دهی نسبی، مرورگر از سمت راست آدرس شروع به جستجوی مسیر می کند:

سپس در آدرس دهی نسبی مرورگر شروع به جستجوی فایلی به نام "same-image.gif" می کند. اگر شما تنها نام فایل را وارد نمایید:

<"IMG SRC="some_image.gif>

مرورگر در همان پوشه ای که فایل html شما در آن قرار دارد، به دنبال فایل تصویر می گردد. اگر موجود بود که مشکلی نیست و مرورگر تصویر را نمایش خواهد داد و احتیاج به افزودن چیز دیگری نمی باشد، زیرا پس از یافتن فایل مرورگر به جستجوی خود خاتمه می دهد. در حقیقت تنها محلی که مرورگر به جستجوی فایل می پردازد، همان پوشه ای است که فایل صفحه وب (html) خود را در آن ذخیره کرده اید.

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

<"IMG SRC=" C:\Users\Owner\Documents\HTML\some_image.gif>

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

<"IMG SRC="some_image.gif>

اگر چه در یک سطح پیشرفته تر، قرار دادن تمامی فایل ها در یک پوشه روش صحیحی نمی باشد. اگر پوشه ای  " web-site"  ایجاد کرده اید، انتظار می رود که پوشه های دیگری درون آن برای دسته بندی فایل ها ایجاد نمایید. بعنوان مثال پوشه ای به نام  images برا ی ذخیره تصاویر و پوشه ای به نام scripts برای ذخیره فایل های خارجی و پوشه های دیگر به همین ترتیب.  

در حالت فوق آدرس دهی نسبی کمی پیچیده تر می شود. به عنوان مثال فرض کنید که صفحه وبی به نام index.html دارید که درون پوشه ای به نام web-site قرار دارد. همچنین پوشه دیگری به نام images نیز درون پوشه web-site ایجاد کرده اید. بنابراین فایل و پوشه های شما به صورت زیر خواهند بود:

بدیهی است که فایل های تصویری خود را درون پوشه images ذخیره کرده اید.

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

<"IMG SRC="some_image.gif>

در این صورت تصویر نمایش داده نمی شود، به این دلیل که به مرورگر چیزی راجع به وجود پوشه images نگفته اید. آدرس را می بایست به صورت زیر وارد نمایید:

<"IMG SRC="images/some_image.gif>

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

اگر بخواهید تصویری را نمایش دهید که خارج از پوشه web-site قرار دارد، موضوع کمی پیچیده تر می شود که در درسهای آتی به آن خواهیم پرداخت. اما در این مرحله اگر تمام فایل های مورد نیاز را در یک پوشه قرار دهید، آنگاه این روش آدرس دهی نسبی به خوبی کار می کند:

<"IMG SRC="some_image.gif>

اگر فکر می کنید روش های آدرس دهی ذکر شده به خوبی قابل درک نیست، در درس بعدی تمرینات عملی در این موضوع خواهیم داشت.