برترین مقالات کامپیوتر

HTML

در این درس با پیوندها ( 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.khaterat.com/www/index.cgi#top"> Goto Top! </a>

در اثر کلیک روی پیوند بالا مرورگر مستقیما به ابتدای بخش top صفحه http://www.khaterat.com/www/index.cgi خواهد رفت.

لگر مقصد پیوند در همان صفحه قرار دارد نیازی به قید url نیست و فقط نویسه # و سپس نام پیوند کافی است:

<a href="#top"> Goto Top! </a>

چند نکته کاربردی در مورد پیوندها:

* یکی از کاربردهای رایج پیوندهای نام گذاری شده در صفحات و متونی میباشد که فهرست و یا لیستی از اقلام نمایش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و یا ... در همین صفحه در دو مورد از پیوندهای نامگذاری شده استفاده شده است، آیا میتوانید آنها را بیابید؟!

* اگر مرورگر نتواند یک پیوند نامگذاری شده را بیابد ابتدای صفحه مقصد را نمایش خواهد داد.

مثالهای بیشتر

باز کردن پیوند در پنجره ای جدید
این مثال نحوه ایجاد پیوندهائی که در پنجره ای جدید باز میشوند را نشان میدهد. در این حالت بازدیدکنندگان سایتتان را از دست نخواهید داد.

ارجاع به قسمت دیگری از صفحه
با کمک این مثال نحوه تعریف پیوندهای نام گذاری شده را فراگرفته و چگونگی ارجاع به قسمتهای مختلف یک صفحه اچتمل را فرا خواهید گرفت.

رهائی از شر فریم ها
این مثال کاربرد شناسه target و مقدار top_ و نحوه رهائی از فریم ها را شرح خواهد داد.

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

مثالی کاملتر در مورد mailto
مثال از ارسال ایمیل با امکان تعیین مقادیر cc ، bcc، subject و body

Start Tag	Purpose	کاربرد عنصر Anchor
<a>	Defines an anchor	تعریف یک پیوند یا Anchor در یک صفحه اچتمل

Target Attributes	کاربرد حالتهای مختلف شناسه target

target="_blank"	مرورگر پیوند را در یک پنجره جدید باز میکند.

target="_self"	مرورگر پیوند را همان پنجره باز میکند. (حالت پیش فرض یا default)

target="_parent"	مرورگر پیوند را فریم parent باز میکند. (کاربرد در مبحث فریمها)

target="_top"	مرورگر پیوند را در فریم مادر و اصلی باز میکند.(روشی خوب برای نجات از شر فریمها )