در اين درس با پيوندها ( Links ) ،
تگ های مربوطه مخصوصا تگ Anchor يا A و نحوه به کار گيری
آنها آشنا خواهيد شد. همچنين شناسه های بسيار مهم href
،target و name تشريح خواهند شد.
در محيط وب، صفحات اچتمل با کمک پيوندها به
يکديگر متصل (Link) ميشوند. اصطلاح ابرمتن (Hyper Text) در
مقابل متن خطی (Linear) قرار دارد. در يک متن معمولی
خواندن به شکل خطی و از ابتدا به انتها ميباشد و در مقابل
در يک متن مختلط (Hyper) با کمک پيوندها ميتوان از يک متن
به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصری معلوم
الحال! به نام A يا Anchor ميسر ميگردد.
مثالها
ايجاد پيوندها با کمک متن
اين مثال
چگونگی ايجاد يک پيوند، لينک يا Link را در يک متن اچتمل
نشان ميدهد.
ايجاد پيوندها با کمک تصاوير
اين
مثال چگونگی ايجاد يک پيوند، لينک يا Link را با کمک يک
تصوير (image) نشان ميدهد.
تگ Anchor و شناسه href
برای ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها
ميتوانند به بخش ديگری از همان صفحه، صفحات ديگر وب،
تصاوير، فايلهای صوتی يا حتی فيلم ها و ... اشاره کنند.
فرم کلی يک پيوند به قرار زير است:
| <a href="url">Some Text</a>
|
در مثال بالا تگ <a>
برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن
url ميباشد بکار رفته است. برای تعيين مقصد و يا آدرس صفحه
جديد از شناسه ای به نام href که همان hyerlink
reference ميباشد، استفاده ميشود و مقدار اين شناسه
در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت
پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر
نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد
ميان تگهای <a> و </a> قرار داده ميشود و هر
چند که در مثال بالا اين بخش متن "Some Text" است ولی
ميتواند حتی يک تصوير باشد.
برای نمونه کد اچتمل زير پيوندی به سايت google.com
ايجاد خواهد کرد:
| <a
href="http://www.google.com/">Visit Google
Site</a> |
و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر
کليک روی پيوند توسط بازديدکننده، مرورگر به سايت Google
خواهد رفت.
Visit Google Site
شناسه target در پيوندها:
با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم
ميشود. در مثال بالا پس از کليک روی پيوند، مرورگر سايت
google.com را باز کرده و جايگزين سایت فعلی خواهد شد. اگر
ميخواهيد که مرورگر پيوند را در صفحه ای جديد باز کند بايد
از شناسه target و مقدار "_blank" برای آن استفاده کنيد . مثال
زير سبب باز شدن سايت google.com در پنجره جديدی خواهد شد:
| <a href="http://www.google.com/"
target="_blank">Visit Google Site</a>
|
خوتان آزمايش کنيد : Visit Google Site
شناسه Name :
با کمک شناسه name ميتوانيد پيوندها را نام گذاری
کنيد.پيوندهای نامگذاری شده امکان حرکت ميان قسمتهای مختلف
يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا برای
رفتن به آخر يک متن ديگر نيازی به Scrool down کردن تمامی
صفحه نيست و کافی است که بازديدکننده روی پيوندی که به آخر
صفحه اشاره ميکند کليک کند.
استفاده از پيوندهای
نامگذاری شده شامل دو مرحله است:
1- ايجاد يک پيوند
نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :
فرم کلی يک پيوند نام گذاری شده به قرار زير است:
| <a name="label">Text to be
displayed</a> |
وظيفه شناسه name تعيين نام برای پيوند است و مقدارآن
همان نام پيوند ميباشد. نام پيوند هم هر نام لاتينی
ميتواند باشد. در فرم کلی بالا، نام پيوند label و متنی که
بعنوان پيوند نمايش داده ميشود عبارت "Text to be
displayed" خواهد بود. مثال زير به ايجاد يک پيوند
نامگذاری شده با نام top ميپردازد:
| <a name="top">Here is top of my
page!</a> |
2- ايجاد يک پيوند به پيوند نامگذاری شده ديگر:
برای دادن لينک به پيوندی نام گذاری شده، کافی است که
پيوندی معمولی ايجاد کرده و در قسمت href آن ابتدا url
مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاری شده را
درج کنيد. مثال زير ايجاد پيوندی است که به لينک نامگذاری
شده ای به نام top اشاره ميکند:
| <a
href="http://www.ABBAS BEHRADFAR/www/index.cgi#top">
Goto Top! </a>
|
در اثر کليک روی پيوند بالا مرورگر مستقيما به ابتدای
بخش top صفحه http://www.ABBAS BEHRADFAR/www/index.cgi خواهد
رفت.
لگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد
url نيست و فقط نويسه # و سپس نام پيوند کافی است:
| <a href="#top"> Goto Top!
</a> |
چند نکته کاربردی در مورد پيوندها:
* يکی از کاربردهای رايج پيوندهای نام گذاری شده در
صفحات و متونی ميباشد که فهرست و يا ليستی از اقلام نمايش
داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و يا ...
در همين صفحه در دو مورد از پيوندهای نامگذاری شده استفاده
شده است، آيا ميتوانيد آنها را بيابيد؟!
* اگر مرورگر نتواند يک پيوند نامگذاری شده را بيابد
ابتدای صفحه مقصد را نمايش خواهد داد.
مثالهای بيشتر
باز کردن پيوند در پنجره ای جديد
اين
مثال نحوه ايجاد پيوندهائی که در پنجره ای جديد باز ميشوند
را نشان ميدهد. در اين حالت بازديدکنندگان سايتتان را از
دست نخواهيد داد.
ارجاع به قسمت ديگری از صفحه
با کمک
اين مثال نحوه تعريف پيوندهای نام گذاری شده را فراگرفته و
چگونگی ارجاع به قسمتهای مختلف يک صفحه اچتمل را فرا
خواهيد گرفت.
رهائی از شر فريم ها
اين مثال کاربرد
شناسه target و مقدار top_ و نحوه رهائی از فريم ها را شرح
خواهد داد.
نحوه ايجاد يک پيوند mailto
اين مثال
نحوه ايجاد يک پيوند از نوع mailto برای باز کردن برنامه
مديريت ايميل ها را نشان ميدهد. در اين حالت اگر
بازديدکننده سايت برنامه های مربوط به ارسال و مديريت
ايميل ها را نصب کرده باشد ميتواند به ارسال ايميل
بپردازد.
مثالی کاملتر در مورد mailto
مثال از
ارسال ايميل با امکان تعيين مقادير cc ، bcc، subject و
body