تگ لینک در HTML، آشنایی با تگ a
خوش اومدین به سومین جلسه از دوره آموزش HTML . امروز قرار هست با تگی آشنا بشیم که ما رو به آدرس دیگه ای منتقل میکنه. این آدرس میتونه یه آدرس توی سایت خود ما باشه یا یه آدرس توی وبسایت دیگه باشه. همچنین این تگ به ما این امکان رو میده که به قسمت خاصی از یک صفحه هم لینک بدیم. در این پست به طور مفصل در مورد این تگ صحبت میکنیم. تگ a یکی از پراستفاده ترین تگ ها در HTML است.
آشنایی با تگ a
همونطور که بالاتر گفتیم با استفاده از تگ a میتونیم به صفحه دیگری لینک بدیم. زمانی که کاربر روی لینک تولید شده ما کلیک کنه به آدرس جدیدی که ما مشخص کردیم هدایت میشه.
تگ a دارای یک صفت (attribute) است که به ما این امکان رو میده، مشخص کنیم که لینک مورد نظرمون کدوم سایت یا صفحه است. این صفت href نام داره و زمان استفاده از تگ a با استفاده از این صفت مشخص میکنیم که آدرس موردنظر مقصد ما چیه. به تصویر زیر نگاه کنید:
همانطور که توی تصویر بالا میبینید من در خط هشتم از تگ a استفاده کردم. این تگ دو قسمتی هست و همانطور که گفتم یه صفت اختصاصی داره به اسم href که با اون میتونم آدرس مقصد رو مشخص کنم. اگه در پیش نمایش سمت راست صفحه ببینید عبارت “سایت من” که در همون خط هشتم بین دو تگ باز و بسته قرار گرفته بود، روی صفحه خروجی چاپ شده و به صورت خودکار هم رنگ متفاوتی گرفته(بصورت پیشفرض آبی رنگ میشه لینک) و هم یه خط زیر عبارت من هست. اگه با ماوس روی این عبارت کلیک کنید آدرسی که در href تگ a استفاده کردیم توی مرورگر باز میشه.
اگه از صفت href برای تگ a استفاده نکنیم، بود و نبود تگ a بی اهمیت میشه و انگار که اصلا از این تگ استفاده نکردیم. تصویر زیر رو ببینید:
من در خط هشتم از href استفاده نکردم ولی در خط دهم از href استفاده کردم. تفاوت این دو رو در خروجی ببینید. مرورگر من حتی کد خط هشتم رو به عنوان یه لینک هم حساب نکرده و ظاهر متن داخل تگ a رو هم شبیه متن لینک دار نکرده. طبیعتا امکان کلیک روی این عبارت هم نیست و این دقیقا عین یه متن معمولی هست. بنابراین استفاده از صفت href در تگ a ضروری هست.
انواع URL در صفت href
برای نوشتن آدرس در href ما دو نوع URL داریم:
- Absolute URLs آدرس های مطلق
- Relative URLs آدرس های نسبی
روش اول همون روشی است که من در مثال بالا استفاده کردم. من آدرس صفحه اصلی وبسایت خودم رو درون href قرار دادم. این آدرس یه آدرس مطلق هست و روی هر کامپیوتری و هر مرورگری که این آدرس رو تایپ کنیم سایت من باز میشه. اما یه سری آدرس ها نسبت به محل قرارگرفتن فایل مبدأ ساخهت میشه که بهشون آدرس های نسبی میگیم. این آدرس فقط و فقط داخل همون فایل اعتبار داره. تصویر زیر رو ببینید:
به کادر قسمت رنگ سمت چپ تصویر بالا نگاه کنید. ما در حال حاضر روی فایل index.html هستیم. در کنار این فایل یه فایل دیگه به اسم index2.html داریم. حالا اگه به قسمت سورس فایل index.html در وسط تصویر نگاه کنید میبینید که در خط هشتم من در قسمت href تگ a فقط اسم و پسوند فایل دوم رو قرار دادم. این آدرس، نسبت به محل قرارگیری آدرس فایل مبدأ که تگ a رو در اون ساختیم، ایجاد میشه. مثلا اگر در کنار فایل index.html یه پوشه به src بود و بعد داخل اون فایل index.html بود من برای آدرس دهی باید مثل تصویر زیر عمل میکردم:
همینطور که میبینید فایل مقصد یعنی index2.html داخل یک پوشه به نام src هست، بنابراین من هم در href آدرس رو به شکل جدید نوشتم تا آدرس دقیق مقصد رو نسبت به فایل مبدأ نوشته باشم.
طبیعتا اگه به خروجی بریم و روی لینکی که ایجاد کردیم کلیک کنیم مرورگر صفحه مقصد رو برامون نمایش میده.
لینک به قسمت خاصی از صفحه
تا اینجا ما موفق شدیم که به صفحاتی خاصی از وب و یا صفحه خاصی از پروژه خودمون لینک بدیم. ولی گاهی لازم میشه که ما میخوایم نه تنها میخایم کاربر رو به یه صفحه خاص هدایت کنیم بلکه میخایم به یه قسمت مشخصی از اون صفحه بره کاربرمون. برای این کار باید ابتدا یه بوکمارک یا نشانه توی اون بخش خاص مدنظرمون(توی مقصد) قرار بدیم و سپس با استفاده از تگ a میتونیم که به اون بوکمارک لینک بدیم. به تصویر زیر نگاه کنید:
همونطور که گفتم باید ابتدا بخش موردنظرمون (مقصد) رو بوکمارک کنیم این کار رو ما با استفاده از صفت id که یه صفت عمومی توی HTML هست (تمامی تگ های بخش body میتونن از این صفت استفاده کنن) یه مقدار مشخصی رو به صفت id اختصاصی میدیم. این مقدار در حقیقت یک نام است و میتونیم به سلیقه خودمون انتخاب کنیم من تو مثال بالا برای تگ h2 که مقصد من هست و قصد دارم بهشم لینک بیدم یه صفت id تعریف کردم و مقدار titr2 رو بهش اختصاص دادم. (در مورد صفت id در یک درس بصورت مفصل صحبت میکنیم)
حالا کافیه موقع لینک دادن به این بوکمارک که با id ایجاد کردم لینک بدم.. به خط 8 نگاه کنید. من در مقدار href از علامت شارپ استفاده کردم و بعدش اسم id مقصد رو نوشتم. یعنی اینکه برو به بوکمارک title2. زمانی که کاربر روی این لینک کلیک بکنه صفحه اسکرول میخوره و h2 مورد نظر من نمایش داده میشه.
اگه به خط دهم نگاه کنید من باز هم از همین تکنیک استفاده کردم با این تفاوت که آدرس نهایی من در یک فایل دیگه است. این آدرس میتونه یه آدرس مطلق (بالا باهاش آشنا شدیم) باشه، به شرط اینکه قبلا اون id برای بخش موردنظر ما تعریف شده باشه.
