در این درس با پیوندها ( Links ) ، تگ های مربوطه مخصوصا تگ Anchor یا A و نحوه به کار گیری آنها آشنا خواهید شد. همچنین شناسه های بسیار مهم href ،target و name تشریح خواهند شد. در محیط وب، صفحات اچتمل با کمک پیوندها به یکدیگر متصل (Link) میشوند. اصطلاح ابرمتن (Hyper Text) در مقابل متن خطی (Linear) قرار دارد. در یک متن معمولی خواندن به شکل خطی و از ابتدا به انتها میباشد و در مقابل در یک متن مختلط (Hyper) با کمک پیوندها میتوان از یک متن به هر صفحه دیگر در وب متصل شد.این کار با کمک عنصری معلوم الحال! به نام A یا Anchor میسر میگردد.
--------------------------------------------------------------------------------
تگ Anchor و شناسه href
برای ایجاد پیوند به صفحات دیگر از تگ <a> استفاده میشود. پیوندها میتوانند به بخش دیگری از همان صفحه، صفحات دیگر وب، تصاویر، فایلهای صوتی یا حتی فیلم ها و ... اشاره کنند.
فرم کلی یک پیوند به قرار زیر است:
<a href="url">Some Text</a>
در مثال بالا تگ <a> برای ایجاد پیوندی به صفحه ای دیگر که آدرس اینترنتی آن url میباشد بکار رفته است. برای تعیین مقصد و یا آدرس صفحه جدید از شناسه ای به نام href که همان hyerlink reference میباشد، استفاده میشود و مقدار این شناسه در واقع همان آدرس اینترنتی صفحه مقصد است. بخش قابل رویت پیوند و در واقع متــنــی (و یا تصویری ) که توسط مرورگر نمایش داده خواهد شد و بازدیدکننده روی آن کلیک خواهد کرد میان تگهای <a> و </a> قرار داده میشود و هر چند که در مثال بالا این بخش متن "Some Text" است ولی میتواند حتی یک تصویر باشد.
برای نمونه کد اچتمل زیر پیوندی به سایت www.tehroon20.com ایجاد خواهد کرد:
<a href="http://www.tehroon20.com">Visit tehroon20.com Site</a>
و مرورگر پیوند بالا را به شکل زیر نمایش داده و در اثر کلیک روی پیوند توسط بازدیدکننده، مرورگر به سایت tehroon20.com خواهد رفت.
شناسه target در پیوندها:
با کمک شناسه target امکان تعیین مقصد پیوند جدید فراهم میشود. در مثال بالا پس از کلیک روی پیوند، مرورگر سایت tehroon20.com را باز کرده و جایگزین سایت فعلی خواهد شد. اگر میخواهید که مرورگر پیوند را در صفحه ای جدید باز کند باید از شناسه target و مقدار "blank_" برای آن استفاده کنید . مثال زیر سبب باز شدن سایت tehroon20.com در پنجره جدیدی خواهد شد:
<a href="http://www.tehroon20.com/" target="_blank">Visit tehroon20.com Site</a>
خوتان آزمایش کنید : Visit tehroon20.com 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.tehroon20.com/index.htm#top"> Goto Top! </a>
در اثر کلیک روی پیوند بالا مرورگر مستقیما به ابتدای بخش top صفحه http://www.tehroon20.com/index.htm خواهد رفت.
لگر مقصد پیوند در همان صفحه قرار دارد نیازی به قید url نیست و فقط نویسه # و سپس نام پیوند کافی است:
<a href="#top"> Goto Top! </a>
--------------------------------------------------------------------------------
چند نکته کاربردی در مورد پیوندها:
* یکی از کاربردهای رایج پیوندهای نام گذاری شده در صفحات و متونی میباشد که فهرست و یا لیستی از اقلام نمایش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و یا ...
Start Tag | Purpose | کاربرد عنصر Anchor |
---|---|---|
<a> | Defines an anchor | تعریف یک پیوند یا Anchor در یک صفحه اچتمل |
Target Attributes | کاربرد حالتهای مختلف شناسه target |
---|---|
target="_blank" | مرورگر پیوند را در یک پنجره جدید باز میکند. |
target="_self" | مرورگر پیوند را همان پنجره باز میکند. (حالت پیش فرض یا default) |
target="_parent" | مرورگر پیوند را فریم parent باز میکند. (کاربرد در مبحث فریمها) |
target="_top" | مرورگر پیوند را در فریم مادر و اصلی باز میکند.(روشی خوب برای نجات از شر فریمها ) |
منبع: Khaterat.com