پیوند در HTML (راهنمای جامع html)

10685 تعداد بازدید | شنبه 13 تیر ماه 1394

با استفاده از URL می‌توانید محل بسیاری از انواع منابع اطلاعات را، چه در اینترنت و چه در شبکه محلی، بیابید. اما در HTML چگونه می‌توان پیوندی را مشخص کرد که سندی را به سند دیگر اتصال دهد؟

متاولترین روش انجام این کار، استفاده از دستورات <A> و </A> است. در شکل ساده آن، به دو بش از اطلاعات نیاز است: URL منبع مورد نظر و محتویاتی از سند که پیوند را فعال کند. برای پیوند URL در دستور <A> از صفت HREF این دستور استفاده می‌شود. به عبارت دیگر، صفت HREF منبع مورد نظر را مشخص می‌کند. تصویر، متن یا ترکیبی از آنها می‌تواند به عنوان پیوند منظور شود. آنچه که در بین دستورات <A> و </A> قرار می‌گیرد، یک پیوند تلقی خواهد شد. شکل ساده‌ای از دستور <A> بصورت زیر است:

<A HREF = "URL" > Linked content </A>

به جای "URL" باید URL منبع مورد نظر ذکر شود. عبارت Linked content مشخص می‌کند که هر وقت ماوس بر روی این متن قرار گرفت، علامت ماوس به شکل دست درآید و با کلیک کردن بر روی آن، مرورگر به منبعی منتقل شود که URL آن مشخص شده است. توجه کنید که دستورات <A> نباید متداخل باشند، به عنوان مثال، دستور زیر جالب نیست:

<A HERF = "URL1> Linked <A HREF = "URL2"> More Linked </A> </A>

ساده‌ترین پیوند، ترکیبی از دستور <A> و یک URL است که فقط شامل آدرس کارگزار وب است . در واقع، سندی که به آن مراجعه می‌شود، صفحه اصلی کارگزار است و سند پیش‌فرضی است که از دایرکتوری ریشه کارگزار وب انتخاب می‌شود. شکلهای پیچیده‌تری از پیوند نیز امکان‌پذیر است. چند نمونه از دستورات <A> و </A> در ادامه آمده است:

<A HREF = "http:/www.amazon.com/"> Visit the Books </A>

<A HREF = "http://www.pint.com/staff/ahmad.htm> Ahmad </A>

<A HREF = ftp://ftp.cdrom.com> Access FTP Archive </A>

<A HREF = "mailto:info@pint.com"> More Information? </A>

شناسایی پیوند در متن

در اغلب مرورگرها، پیوندهای متنی آنهایی هستند که زیر آنها خط کشیده شده است. یعنی متنی که نشان‌دهنده پیوند است، زیر آن خط کشیده می‌شود. یک روش متداول دیگر این است که پیوندهای ملاقات‌نشده به رنگ آبی و پیوندهای ملاقات‌شده به رنگ ارغوانی‌اند. اگر پیوند شامل تصویر باشد، حاشیه تصویر نیز آبی یا ارغوانی خواهد بود، مگر اینکه صفت حاشیه آن، صفر تعیین شود (روش انجام این کار را در ادامه می‌آموزید). رنگ پیوندها را با استفاده از دستور <BODY> و با صفات LINK، ALINK و VLINK می‌توان تغییر داد. این صفات در فصل سوم مورد بررسی قرار گرفتند. یادآوری می‌شود که صفت LINK رنگ تمام پیوندهای ملاقات‌نشده را تعیین می‌کند، صفت VLINK رنگ تمام پیوندهای ملاقات‌شده و صفت ALINK یک پیوند فعال را نشان می‌دهد (در زمانی که پیوند انتخاب می‌شود، این رنگ ظاهر می‌گردد). با استفاده از شیوه‌نامه‌ها (فصل بعدی) در HTML نیز می‌توان شیوه نمایش پیوندها را مشخص کرد. در ادامه، مثالهایی را در این خصوص خواهید دید. به هر حال، پیوند به هر صورت که باشد، وقتی علامت ماوس بر روی آن قرار گرفت، به شکل دست () درمی‌آید که با کلیک کردن، به مقصد پیوند خواهید رفت.

تعیین صفات پیوند

همانطور که گفته شد، برای ایجاد پیوند از دستورات <A> و </A> استفاده می‌شود. اکنون می‌خواهیم صفات این دستور را بررسی کنیم. یکی از صفات این دستور را که HREF بود، قبلاً دیدید. اکنون صفات دیگر را مطالعه خواهیم کرد.

صفت NAME
. دستور <A> دو چیز را مشخص می‌کند: پیوند، شما را به کجا می‌برد و چه چیزی را باید کلیک کنید تا به آنجا بروید. یکی از مقصدهای پیوند می‌تواند محلی از سند HTML باشد که دارای نام است. این نام توسط صفت NAME تعیین می‌شود. مقداری که در صفت NAME مشخص می‌شود، یک نام معتبر (ترکیبی از حروف الفبا) است. دقت داشته باشید که برای مراجعه به آن نام، باید قبل از آن علامت # را قرار داد. دستور زیر را ببینید:

<A NAME = "marker"> This is a marker </A>

این دستور، #marker را به عنوان نام متن "This is a marker" انتخاب می‌کند.

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

وقتی دستور <A> برای تعیین موقعیتی بکار می‌رود، معمولاً فاقد هرگونه متنی است و نیاز به دستور </A> نیز ندارد. به عنوان مثال، هر دو دستور زیر معتبر است:

در دستور <A> همزمان با تعیین پیوند مقصد، می‌توان نامی برای آن انتخاب کرد، بطوری که پیوندهای دیگر از آن استفاده کنند:

<A NAME = "yahoo_link" HREF= http://www.yahoo.com/> yahoo! </A>

در حالت کلی، موقعیت تعیین شده در یک سند HTML می‌تواند به این صورت دستیابی شود که، بعد از URL کامل آن، یک علامت # و سپس نام آن موقعیت قرار گیرد. دستور زیر را ببینید:

<A HREF = http://www.rayaneh.com/books.htm#spec"> Specification section </A>

این دستور، به بخشی از فایل book.htm به نام "spec" پیوند برقرار می‌کند.

صفت TITLE
. در فصل 3 گفته شد که صفت TITLE در یک دستور، متنی را مشخص می‌کند که وقتی علامت ماوس در مرورگر بر روی نتیجه آن دستور قرار گرفت، آن متن ظاهر می‌شود. امتیاز این متن این است که می‌تواند توضیحی را مطرح کند. بنابراین، در مورد پیوندها می‌تواند بسیار مفید واقع شود. دستور زیر را ببینید:

اگر این دستور را در مرورگر اجرا کنید، وقتی علامت ماوس به پیوند BOOK INFO برود، پیام "for more information click here" ظاهر می‌گردد که راهنمای پیوند است. توجه داشته باشید که بین دستور <TITLE> و صفت TITLE اشتباه نکنید.

صفت ACCESSKEY
. با استفاده از این صفت می‌توان کلیدهایی را برای اجرای پیوندها معرفی کرد، بطوریکه برای اجرای پیوند لازم نیست علامت ماوس به آن منتقل و بر روی آن کلیک شود. این کلیدها را شتاب‌دهنده گویند که معمولاً در ترکیب با کلیدی مثل Alt عمل می‌کنند. دستور زیر را ببینید:

<A HREF = "http://www.yahoo.com/" ACCESSKEY = "Y"> yahoo! </A>

این دستور، پیوندی به سایت یاهو ایجاد می‌کند که با کلید ALT + Y فعال خواهد شد. یکی از مشکلات کلیدهای شتاب‌دهنده این است که همه
مرورگرها از این امکان پشتیبانی نمی‌کنند. بعضی از کلیدهای شتاب‌دهنده که در مرورگرها استفاده می‌شوند در جدول 6-4 آمده است.

مشکل بعدی کلیدهای شتاب‌دهنده، چگونگی نمایش کلیدهای شتاب‌دهنده در صفحه است. یعنی چگونه باید مشخص کنیم که کلیدی مثل "Y" به عنوان کلید شتاب‌دهنده است. در حالت عادی، زیرپیوندها خط کشیده می‌‌شود، بنابراین، از این روش نمی‌توان برای معرفی کلیدهای شتاب‌دهنده استفاده کرد. شیوه‌نامه‌ها (فصل بعدی) می‌توانند برای تغییر صفت پیوندها استفاده شوند. بنابراین، می‌توان کاری کرد که زیر حرف اول پیوند خط کشیده شود. ولی این کار ممکن است کاربر را شگفت‌زده کند، زیرا انتظار دارد که زیر کل پیوند خط کشیده شود. روش دیگر برای نمایش کلیدهای شتاب‌دهنده این است که آنها را بزرگتر از حد معمول یا بصورت پررنگ نمایش داد.

صفت TABINDEX
. این صفت، در مرورگری که از صفحه کلید استفاده می‌کند، ترتیبی را مشخص می‌کند که با فشردن کلید TAB، مکان‌نما باید به آن ترتیب به پیوندها منتقل شود. مقدار این صفت، معمولاً یک عدد مثبت است. به عنوان مثال، دستور زیر مشخص می‌کند که با فشردن اولین کلید TAB، مکان‌نما به این پیوند منتقل شود:

<A HREF = "book.htm" TABINDEX="1"> Books </A>

اگر مرورگری از این صفت پشتیبانی نکند، ترتیب آنها، ترتیب قرار گرفتن در صفحه است.

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

این دستور موجب می‌شود تا آنچه که توسط آدرس http://www.yahoo.com برداشت می‌شود، در فریمی به نام display-frame قرار گیرد. اگر مرورگری از این صفت پشتیبانی نکند، پنجره‌ای که آن سند در آن وجود دارد، منظور خواهد شد. مقادیر ویژه‌ای نیز برای این صفت وجود دارد که عبارتند از: _blank که پنجره جدیدی را مشخص می‌کند، _parent فریم بعدی را مشخص می‌کند که حاوی پیوند منبع است، _self فریم حاوی پیوند منبع را مشخص می‌کند و _top که کل پنجره مرورگر را مشخص می‌کند.

صفات REL و REV
. معنای این دو صفت، اغلب به درستی درک نمی‌شود. صفت REL رابطه بین یک سند و سند مقصد را تعیین می‌کند که توسط صفت HREF مشخص می‌شود. به عنوان مثال، اگر مقصد پیوند، خلاصه‌ای را به سند مرتبط کند، پیوند بصورت زیر خواهد بود:

صفت REV، معکوس رابطه‌ای را تعریف می‌کند که توسط REL تعریف شده‌است. مثالی از این صفت، مجموعه خطی از اسنادی است که در آنها،صفت REL
با "next" و صفت REV با "prev" مشخص شده است:

گرچه صفات REL و REV مفید به نظر می‌رسند، ولی بعضی از مرورگرها از آنها پشتیبانی نمی‌کنند این صفات مشابه دستور <LINK> عمل می‌کنند، که در ادامه بحث می‌شود. نکته قابل توجه این است که صفت REL فقط وقتی استفاده می‌شود که صفت HREF در دستور <A> بکار رفته باشد.

اسکریپ و پیوند. یکی از فناوریهای مورد استفاده در طراحی صفحات وب، اسکریپت است. زبانهای اسکریپتی مثل جاوااسکریپت و وی‌بی‌اسکریپت، در طراحی صفحات وب بکار گرفته می‌شوند. چگونگی بکارگیری آنها را به فصل جداگانه‌ای موکول می‌کنیم. اما در اینجا می‌خواهیم مشخص کنیم که پیوندها چگونه با زبانهای اسکریپتی ارتباط برقرار می‌کنند. صفاتی مثل onclick، onmouseover، onmouseout و غیره به دستور <A> اضافه شدند تا بتوان از اسکریپتها استفاده کرد. این صفات را رویداد نیز می‌گویند. رویداد onclick وقتی اتفاق می‌افتد که بر روی پیوند کلیک شود، رویداد onmouseover وقتی اتفاق می‌افتد که علامت ماوس بر روی آن قرار گیرد و رویداد onmouseout وقتی اتفاق می‌افتد که علامت ماوس آن پیوند را ترک کند. کاربردهای این صفات را در فصل مربوط به اسکریپتها می‌آموزید.

مقالات مرتبط به طراحی سایت :

پیوند در HTML (راهنمای جامع html)

پیوند در HTML (راهنمای جامع html)

هایبــــــــرد

دنیای تجارت بدون مرز