آموزش html (قسمت پنجم) : کار با لینک ها 1

 

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

اجزا لینک ها:

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

<a href="http://www.mksgraphic.blogsky.com" target="_blank"> Click Me! </a>

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

2- Accesskey : از این صفت می توان برای تعریف کردن یک کاراکتر از صفحه کلید به عنوان میانبر برای دسترسی به یک لینک استفاده کرد. نحوه دسترسی و استفاده از یک لینک بر اساس میانبر آن در مرورگر های مختلف متفاوت است.

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

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

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

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

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

مقادیری که صفت های rel و rev میپذیرند بدین شرح است:

start -  next -  prev -  content -  index -  glossary  - copyright - appendix - help

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

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

1- Blank : این مقدار در حقیقت دستور  open in new tabرا انجام می دهد و لینک را در صفحه ای جدید باز میکند.

2- Self : لینک را در همان صفحه باز میکند.

3- Top : صفحه را در پنجره ای بدون فریم باز میکند

4- Parent : لینک را در frameset پدر تگ frame ( با این تگ در آینده آشنا خوهید شد) باز خواهد کرد.

نام یک فریم( پنجره ) لینک را در پنجره ای با نام مشخص باز میکند.

مهمترین صفات تگ <a>، فقط سه صفت href، target، و name هستند و نیاز به مقداردهی به بقیه صفات نیست ولی چون خواستیم که کاملا با صفات این تگ آشنا شوید ، بقیه صفات را نیز معرفی کردیم.

<a href="http://mksgraphic.blogsky.com" target="_blank" name="mksgraphic" hreflang="fa"> mksgraphic </a>

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

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

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

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

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

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

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

http://www.mksgraphic.blogsky.com

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

../../download/html5.pdf

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

در مورد آدرس های نسبی ذکر چند نکته ضروری است چون نوشتن درست این نوع لینک در ازای آشنایی درست با بخش های مختلف آن است :

1- برای دسترسی به فایلی که در یک مسیر بالاتر از فایل اصلی قرار دارد از /.. استفاده می شود:

<a href="../test.html"> Click Here </a>

2- برای دسترسی به فایل هایی که در دایرکتوری اصلی سایت قرار دارد از / استفاده میشود:

<a href="/home.html"> Go To Home Page </a>

3- برای دسترسی به فایلی که در همان دایرکتوری که فایل اصلی قرار دارد از /. استفاده می شود.

<a href="./logo.gif"> My Logo </a>

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

<base target="_blank">

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

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