در ادامه سلسله مقالات آموزش HTML،در این مقاله در مورد انواع آدرس دهی ها در صفحات وب صحبت خواهیم کرد.
قطعا در طراحی صفحات وب نیاز خواهید داشت که بین انواع مختلف فایل ها مانند تصاویر، فایلهای صوتی، ویدئویی، جاوااسکریپت.سی اس اس و ... ارتباط برقرار کنید.منظور از برقراری ارتباط بین فایل های مختلف این است که از یک فایل (مثلا فایل html) بتوانید به فایل دیگر دسترسی پیدا کنید. .مثالی از این موضوع را در مقاله قبل مشاهده کردید که با استفاده از همین آدرس دهی ها توانستیم تصویر موردنظر خود را به صفحه وب اضافه کنیم.
بطور کلی دو نوع آدرس دهی مطلق (absolute url) و نسبی (relative url) در صفحات وب وجود دارد.در این مقاله، با مثال های کاربردی شما را با این دو نوع آدرس دهی آشنا خواهیم کرد.
آدرس دهی مطلق (کامل)
در این روش ما بر اساس ریشه اصلی و نام سایت شروع به آدرس دهی می کنیم. در این روش آدرس فایل باید بطور کامل ذکر شود.
به عنوان مثال می خواهیم عکسی را از سایت pzof.ir را به صفحه وب خود اضافه کنیم.برای این منظور مقدار خاصیت src عکس خود را باید بطور کامل همراه با نوع پروتکل و پسوند فایل بنویسیم.
<html>
<head>
<title>پیشگامان صفر و یک فرساد</title>
<meta charset="utf-8"/>
</head>
<body>
<img src="http://pzof.ir/Portals/0/maxresdefault.jpg"/>
</body>
</html>
خروجی کدهایی که نوشتیم را در تصویر بالا مشاهده می کنید.همانطور که مشخص است تصویر با موفقیت به صفحه اضافه شده است.
چنانچه این عکس را در پوشه images خود ذخیره کنیم و بخواهیم آدرس مطلق برای دسترسی به آن بدهیم باید کد عکس خود را به این صورت درج کنیم:
<img src="C:/Users/Pzof5/Desktop/mySite/images/myImage.png"/>
مشکلات آدرس دهی مطلق
- برای استفاده از این روش باید فایل های خود را آپلود کنید.
- در این روش آدرس دهی، آدرس ها طولانی می شود چون باید آدرس کامل دایرکتوری را ثبت کنید.
پس بهتر است برای سیستم های local و … از آدرس دهی نسبی استفاده کنید.
آدرس دهی نسبی
پروژه های طراحی وب هنگام شکل گیری بطور آنلاین پایه گذاری نمی شوند. در این پروژه ها هر طراح سایت، روی کامپیوتر شخصی خود بصورت لوکال این کار را انجام می دهد. به همین دلیل از آدرس دهی نسبی استفاده می کنند.
در این روش برای آدرس دهی باید موقعیت دو فایل نسبت به هم سنجیده شود.در واقع آدرس فایل مقصد را نسبت به فایل مبدا (فایلی که در حال حاضر داخل آن هستیم ) وارد می کنیم.فرض کنید عکسی داریم که در کنار فایل index.html قرار دارد.
وقتی فایل مبدا و تصویر در یک پوشه کنار هم هستند، فقط لازم است برای آدرس دهی نسبی نام فایل نوشته شود.در اینجا هم چون تصویر، در کنار صفحه html است، فقط با نوشتن نام عکس و نوعش،تصویر به صفحه اضافه می شود.
حال پوشه ای به نام images در کنار فایل index.html خود ایجاد کرده و تصویر موردنظر را داخل این پوشه قرار می دهیم.در این حالت برای اضافه کردن عکس خود به صفحه ابتدا باید وارد پوشه images شویم،سپس نام و پسوند عکس خود را وارد کنیم.
به منظور وارد شدن به پوشه ای که در کنار فایل جاری قرار دارد،کافی است ابتدا نام پوشه را وارد کنیم،سپس یک / قرار داده و نام و فایل موردنظر را وارد می کنیم.بنابراین کد ما به صورت زیر تغییر خواهد کرد.
<html>
<head>
<title>پیشگامان صفر و یک فرساد</title>
<meta charset="utf-8"/>
</head>
<body>
<img src="images/myImage.png"/>
</body>
</html>
در تصویر زیر خروجی قطعه کد بالا را در مرورگر مشاهده می کنید.در تصویر زیر با استفاده از ابزار inspect element مرورگر کدهای مربوط به صفحه را نمایش داده ایم، (برای استفاده از این ابزار بر روی صفحه کلیک راست کنید و گزینه inspect element را انتخاب کنید،این گزینه در مرورگرهای chrome,opera به inspect تغییر می کند).
همانطور که در تصویر بالا مشاهده می کنید آدرس عکس را images/myImage.png وارد کرده ایم و مرورگر این فایل را شناخته و به صفحه اضافه کرده است.
حال فرض کنید در پوشه images پوشه دیگری داریم به نام mainImages و تصاویر خود را داخل این پوشه بارگذاری کرده ایم،برای دسترسی به محتوای پوشه mainImages از داخل فایل index.html،ابتدا باید وارد پوشه images شویم،سپس وارد پوشه mainImages شویم و نام و پسوند عکس موردنظر را وارد کنیم.برای این منظور خاصیت src تگ img خود را در فایل index.html به این صورت تغییر می دهیم.
<img src="images/mainImages/myImage.png"/>
همانطور که در تصویر زیر مشاهده می کنید،باز هم تصویر به درستی به صفحه اضافه شده است.
به همین صورت می توانید پوشه های موردنظر خود با هر عمقی دسترسی داشته باشید،کافی است ابتدا نام پوشه را وارد کنید و سپس یک / وارد کرده و نام و پسوند فایل موردنظر خود را وارد کنید.
حال فرض کنید دو پوشه کنار هم داریم،یک پوشه برای فایل های html و یک پوشه برای تصاویر.
فایل index.html در پوشه html و فایل myImage در پوشه images قرار دارد،برای دسترسی به تصویر موردنظر از داخل فایل index.html،آدرس دهی ما باید به گونه باشد که ابتدا یک پوشه به عقب برگردیم و از پوشه html خارج شویم،سپس وارد پوشه images شده و در پوشه images به عکس موردنظر دسترسی داشته باشیم.در آدرس دهی نسبی برای اینکه یک پوشه به عقب برگردیم از /.. باید استفاده کنیم،بنابراین کدهای ما به صورت زیر تغییر خواهد کرد.
<html>
<head>
<title>پیشگامان صفر و یک فرساد</title>
<meta charset="utf-8"/>
</head>
<body>
<img src="../images/myImage.png"/>
</body>
</html>
خروجی قطعه کد بالا را در تصویر زیر مشاهده می کنید.
نتیجه گیری کلی :
- در آدرس دهی مطلق باید آدرس فایل مقصد را از ریشه و به طور کامل وارد کنیم.
- در آدرس دهی نسبی برای دسترسی به فایل هایی که در کنار فایل جاری قرار دارند فقط کافی است نام و پسوند فایل مقصد را وارد کنیم.
- در آدرس دهی نسبی برای وارد شدن به پوشه ای که کنار فایل جاری قرار دارد،ابتدا باید نام پوشه را وارد کنیم و سپس یک / وارد کرده و نام و پسوند فایل موردنظر را وارد کنیم.
- در آدرس دهی نسبی برای اینکه یک پوشه به عقب برگردیم از /.. می توانیم استفاده کنیم.
امیدوارم این مقاله برای شما مفید بوده باشد،با ادامه آموزش های html,css با ما همراه باشید.
نویسنده مقاله کامنت گذاری را غیر فعال کرده است.