تگ base در HTML

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

فهرست مطالب

معمولا در هر صفحه وبسایت، چند لینک، عکس و ... وجود دارد. برای ساخت لینک از تگ a و صفت href استفاده می کنیم و برای نمایش عکس از تگ img و صفت src بهره می بریم. گاهی اوقات شاید لازم باشد آدرس پایه ای برای تمامی لینک های درون صفحه تعیین کنیم. منظور از آدرس پایه چیست؟ در ادامه با آن آشنا خواهید شد.

تگ base چیست؟

تگ base برای ساخت آدرس پایه برای لینک های صفحه HTML به کار می رود.

این تگ حتما باید درون تگ head قرار گیرد.

<head>
  <base href="https://codeuni.ir/">
</head>

کاربرد تگ base چیست؟

فرض کنید صفحه ای را ساخته اید:

https://codeuni.ir/html

چطور لینک آن را در سایت نمایش می دهید؟

کد:

<a href="https://codeuni.ir/html">لینک</a>

همان طور که مشاهده می فرمایید لینک را به صورت کامل درون صفت href قرار دادیم.

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

در کد بالا آدرس سایت همراه با پروتکل https://codeuni.ir و اسم مسیر صفحه html است.

<head>
  <base href="https://codeuni.ir/">
</head>

<a href="html">لینک</a>

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

صفات تگ base

در این بخش با صفات تگ base آشنا خواهید شد.

صفت href

این صفت آدرس پایه را مشخص می کند.

<base href="URL">

صفت target

این صفت نحوه باز شدن لینک در مرورگر را مشخص می کند.

<base target="_blank|_parent|_self|_top">

اگر مقدار _blank انتخاب شود لینک ها در پنجره یا تب جدید باز خواهند شد.

مثال تگ base

به کد پایین توجه کنید.

<img src="/images/logo.jpg">

عکسی به نام logo در پوشه images قرار دارد.

می خواهیم پوشه images را به تمامی لینک های صفحه اضافه کنیم.

کد ما چه شکلی می شود؟

<head>
  <base href="/images/">
</head>

<img src="image.jpg">

سازگاری با مرورگرها

تگ base با مرورگرهای زیر سازگار است:

  • گوگل کروم
  • فایرفاکس
  • اج نسخه 12 و بالاتر
  • اپرا
  • سافاری
  • گوگل کروم اندروید
  • فایرفاکس اندروید نسخه 4 و بالاتر
  • اپرا اندروید
  • سافاری iOS

معرفی مطالب در این زمینه