کار با لینک ها در HTML

 

معرفی تگ <a>

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

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

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

تگ <a> : از این تگ برای ایجاد لینک ها استفاده می شود. محتوای یک عنصر a می تواند یک متن ساده، یک عکس یا ترکیبی از این دو باشد. در مثال زیر لینکی که با کلیک بر روی آن به سایت سون لرن هدایت خوهید شد را مشاهده می کنید:

1 <a href="http://7learn.com" target="_blank"> Click Me! </a>

در ادامه به بررسی صفت های تگ a برای کنترل جزئیات لینک ها می پردازیم:

accesskey : از این صفت می توان برای تعریف کردن یک کاراکتر از صفحه کلید به عنوان میانبر برای دسترسی به یک لینک استفاده کرد. نحوه دسترسی و استفاده از یک لینک بر اساس میانبر آن در مرورگر های مختلف متفاوت است در IE از کلید ترکیبی  Alt+accesskey در مرورگرهای Firefox و Google Chrome از کلید های ترکیبی Alt+Shift+accesskey و در opera از کلیدهای ترکیبی....اِ......اِ..... راستش اینو نبلدم فکر کنم Shift+accesskey باشه icon biggrin <a  style=آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه اول) 7learn.com" />

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

hreflang : زبان به کار رفته در منبعی که لینک به آن اشاره می کند را مشخص میکند. این صفت یکی از کدهای زبانی مانند en , fa , fr و... را به عنوان مقدار می پذیرد.

name : نامی برای لینک مشخص میکند. این نام باید در صفحه یکتا باشد. نامی که انتخاب می شود نباید با اعداد 0-9، -، _، : یا . (نقطه) شروع شود. بلکه باید نام را با یکی از حروف A-Z یا a-z آغاز کنیم.

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

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

  • مقادیری که صفت های rel و rev میپذیرند بدین شرح است
1 start   next   prev   content   index   glossary  copyright  appendix   help

tabindex : بوسیله این صفت می توان ترتیب پیمایش لینک ها در صفحه که با استفاده از کلید Tab صفحه کلید انجام می شود را مشخص میکند. مقداری که این صفت میگیرد میتواند عددی بین 0 تا 32767 باشد.

target : با این صفت می توان صفحه ای که لینک باید در آن باز شود را مشخص کرد و می تواند یکی از مقادیر زیر را بگیرد :

  • blank_ : لینک را در صفحه ای جدید باز میکند.
  • self_ : لینک را در همان صفحه باز میکند.
  • top_ : صفحه را در پنجره ای بدون فریم باز میکند ( غالبا متل self_ عمل میکند.)
  • parent_ : لینک را در frameset پدر تگ frame ( با این تگ در آینده آشنا خوهید شد) باز خواهد کرد.
  • نام یک فریم( پنجره ) لینک را در پنجره ای با نام مشخص باز میکند.
نکته : مهمترین صفات تگ <a>، فقط سه صفت href، target، و name هستند و نیاز به مقداردهی به بقیه صفات نیست ولی چون خواستیم که کاملا با صفات این تگ آشنا شوید ، بقیه صفات را نیز معرفی کردیم

مثال :

1 <a href="http://7learn.com" target="_blank" name="7learn" hreflang="fa"> 7Learn </a>

نتیجه در مرورگر:

a tag <a  style=آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه اول) 7learn.com" width="324" height="160" />

اجزای تشکیل دهنده آدرس ها

همانطور که تا به اینجا متوجه شدید بعضی از صفت ها مانند href در تگ <a> یا src در تگ </ img> یک URL (آدرس اینترنتی) را به عنوان مقدار می پذیرند. URL شامل اطلاعاتی درمورد محل فایل و اینکه مرورگر باید با آن چه کاری انجام دهد می باشد. هر فایل بر روی اینترنت دارای یک URL منحصر به فرد است.

هر آدرس از اجزای مختلفی تشکیل می شود. در تصویر زیر یک آدرس اینترنتی و اجزای تشکیل دهنده آن را مشاهده میکنید:

URL <a  style=آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه اول) 7learn.com" width="513" height="104" />

بخش اول URL طرح (پروتکل) نامیده میشود. این بخش به مرورگر می گوید چگونه با فایلی که می خواهد آن را باز کند رفتار کند. از متداول ترین طرح هایی که وجود دارند می توان به http ، ftp ، mailto و ... اشاره کرد.

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

آدرس های مطلق و نسبی

آدرس های مطلق : به آدرس هایی که در آن ها تمام اجزای یک آدرس اینترنتی همچون نام پروتکل (طرح)، جداکننده ها، عبارت WWW ، نام سایت و دامنه ذکر می شود. به هنوان مثال آدرس زیر یک آدرس مطلق است:

1 http://www.7learn.com/index.php

آدرس های نسبی : نوع دوم آدرس ها، آدرس های نسبی هستند که معمولا در آن ها از آوردن نام پروتکل، نام سایت و دامنه چشم پوشی می شود. به عنوان مثال آدرس های زیر نمونه هایی از آدرس های نسبی هستند.

1 /images/logo.gif
2  
3 ../../download/html.pdf
نکته : معمولا برای دسترسی به فایلهایی از داخل سرور (سایت) خودمان، از آدرس های نسبی و برای دسترسی به فایل هایی در سرور (سایت) های دیگر از آدرس های مطلق استفاده میشود.

در مورد آدرس های نسبی ذکر چند نکته ضروری است :

  • برای دسترسی به فایلی که در یک مسیر بالاتر از فایل اصلی قرار دارد از /.. استفاده می شود:
1 <a href="../test.html"> Click Here </a>
  • برای دسترسی به فایل هایی که در دایرکتوری اصلی سایت قرار دارد از / استفاده میشود:
1 <a href="/home.html"> Go To Home Page </a>
  • برای دسترسی به فایلی که در همان دایرکتوری که فایل اصلی قرار دارد از /. استفاده می شود.
1 <a href="./logo.gif"> My Logo </a>

تگ <base> : از این تگ، که جزء تگ های تهی است و حتما باید در قسمت Head صفحه هم قرار بگیرد برای تعریف کردن یک آدرس پایه برای تمام لینک های نسبی صفحه استفاده میشود. همچنین با استفاده از این تگ می توان یک هدف مشخص برای باز شدن لینک ها را هم مشخص نمود. اگر تعداد زیادی لینک ها در صفحه به آدرس مشخصی اشاره می کنند استفاده از تگ base برای جلوگیری از کد نویسی اضافه پیشنهاد می شود. این تگ دو صفت href و target را داراست که صفت href آن باید حتما از نوع آدرس های مطلق باشد. به طور مثال :

1 <base target="_blank">

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

تا اینجا با طریقه مقدار دهی به لینک ها آشنا شدیم در جلسه دوم با لینک های ایمیلی، لنگری و دانلود، شما را آشنا خواهیم کرد.

 

 

 

 

نظرات   

 
0 #2 poorkhalil در تاریخ: جمعه 26 خرداد 1396 ، ساعت 02:03 ق ظ
با سلام
برای ریدایرکت کردن یه لینک مادر و بقیه لینکهای آن سایت چکار میشه کرد مثلا من میخوام تمامی لینهای مربوط به سایت http//example.com/ تو ادامه اش هر چی اومده باشه به لینک متناظرش در سایت دیگر انتقال یابد برای نوشتن ادامه لینگ یه کد یا حرف خاصی وجود داره یانه
نقل قول
 
 
0 #1 دنیا در تاریخ: پنج شنبه 04 شهریور 1395 ، ساعت 11:06 ق ظ
سلام عالی بود این مطلب
نقل قول
 

ارسال نظر