پیوندها

در مقدمه‌ی ویژگی‌ها، مثالی از نحوه‌ی اضافه شدن ویژگی‌ها به تگ آغازین ارائه دادیم. در این مثال از تگ <a> استفاده شده بود، اما نه عنصر و نه ویژگی‌های خاص معرفی‌شده در آن مثال مورد بحث قرار نگرفتند.

تگ لنگر <a> به همراه ویژگی href ، یک هایپرلینک ایجاد می‌کنند. لینک‌ها ستون فقرات اینترنت هستند. اولین صفحه وب شامل ۲۵ لینک بود که عبارت «هر چیزی که در مورد W3 به صورت آنلاین وجود دارد، به طور مستقیم یا غیرمستقیم به این سند لینک شده است» در آن آمده بود. به احتمال زیاد، هر چیزی که در مورد W3 به صورت آنلاین وجود دارد، به طور مستقیم یا غیرمستقیم از این سند نیز لینک شده است.

قدرت وب و تگ <a> از زمانی که تیم برنرز-لی این اولین توضیح را در آگوست ۱۹۹۱ منتشر کرد، به طرز چشمگیری افزایش یافته است. لینک‌ها نشان‌دهنده‌ی ارتباط بین دو منبع هستند که یکی از آنها سند فعلی است. لینک‌ها می‌توانند توسط <a> ، <area> ، <form> و <link> ایجاد شوند. شما در مورد <link> آموخته‌اید و فرم‌ها را در یک بخش جداگانه بررسی خواهید کرد. همچنین یک بخش کامل برای یادگیری فرم وجود دارد. در این جلسه، در مورد تگ تک حرفی و نه چندان ساده‌ی <a> اطلاعات کسب خواهید کرد.

ویژگی href

اگرچه الزامی نیست، اما ویژگی href تقریباً در همه تگ‌های <a> یافت می‌شود. ارائه آدرس هایپرلینک چیزی است که <a> را به یک لینک تبدیل می‌کند. از ویژگی href برای ایجاد هایپرلینک به مکان‌هایی در صفحه فعلی، صفحات دیگر در یک سایت یا کلاً سایت‌های دیگر استفاده می‌شود. همچنین می‌توان آن را برای دانلود فایل‌ها یا ارسال ایمیل به یک آدرس خاص، حتی با گنجاندن موضوع و محتوای پیشنهادی بدنه ایمیل، کدگذاری کرد.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

لینک اول شامل یک URL مطلق است که می‌تواند در هر سایتی در جهان برای پیمایش به صفحه اصلی MLW استفاده شود. URLهای مطلق شامل یک پروتکل، در این مورد https:// ، و یک نام دامنه هستند. وقتی پروتکل به صورت // نوشته می‌شود، یک پروتکل ضمنی است و به معنای "استفاده از همان پروتکلی است که به طور فعال استفاده می‌شود."

URL های نسبی شامل پروتکل یا نام دامنه نیستند. آنها نسبت به فایل فعلی "نسبی" هستند. MLW یک سایت تک صفحه ای است، اما این مجموعه HTML دارای چندین بخش است. برای پیوند دادن از این صفحه به درس ویژگی ها، از یک URL نسبی استفاده می شود <a href="../attributes/">Attributes</a> .

لینک دوم فقط یک شناسه قطعه لینک است و در صورت وجود عنصری با id="teachers", به آن پیوند می‌دهد. مرورگرها همچنین از دو لینک "بالای صفحه" پشتیبانی می‌کنند: کلیک روی <a href="#top">Top</a> (غیرحساس به حروف بزرگ و کوچک) یا حتی فقط <a href="#">Top</a> کاربر را به بالای صفحه برمی‌گرداند، مگر اینکه عنصری با شناسه top با همان اندازه حروف وجود داشته باشد.

MLW یک سند نسبتاً طولانی است. برای صرفه‌جویی در پیمایش، می‌توانید از پایین بخش #teachers یک پیوند به بالا اضافه کنید:

<a href="#top">Go to top.</a>

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

ویژگی href می‌تواند با mailto: یا tel: برای ارسال ایمیل یا برقراری تماس شروع شود و نحوه‌ی مدیریت لینک به دستگاه، سیستم عامل و برنامه‌های نصب شده بستگی دارد.

لینک mailto نیازی به آدرس ایمیل ندارد، اما می‌تواند به همراه cc ، bcc ، subject و متن body ، ایمیل را از قبل پر کند. به طور پیش‌فرض، یک سرویس گیرنده ایمیل باز می‌شود. می‌توانید موضوع و متن ایمیل را بدون آدرس ایمیل پر کنید تا بازدیدکنندگان سایت بتوانند دوستان خود را دعوت کنند. در لینک ما، در پاورقی سند، URL مربوط به ثبت نام را قرار می‌دهیم:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

علامت سوال ( ? ) کاراکتر mailto: و آدرس ایمیل، در صورت وجود، را از عبارت جستجو جدا می‌کند. در داخل جستجو، علامت‌های & ( & ) فیلدها را از هم جدا می‌کنند و علامت‌های مساوی (=) نام هر فیلد را با مقدار آن برابر می‌کنند. کل رشته به صورت درصد کدگذاری شده است، که اگر مقدار href نقل قول نشده باشد یا مقادیر شامل نقل قول باشند، قطعاً ضروری است.

اینکه وقتی کاربر روی یک لینک tel کلیک می‌کند، آن را لمس می‌کند یا دکمه Enter را می‌زند، کدام برنامه باز می‌شود، به سیستم عامل، برنامه‌های نصب شده و تنظیماتی که کاربر روی دستگاه خود دارد بستگی دارد. یک آیفون ممکن است FaceTime، برنامه تلفن یا مخاطبین را باز کند. یک کامپیوتر رومیزی ویندوزی، در صورت نصب بودن، ممکن است Skype را باز کند.

چندین نوع URL دیگر نیز وجود دارد، مانند blobs و data URLs (به مثال‌ها در بحث ویژگی download مراجعه کنید). برای سایت‌های امن (آن‌هایی که از طریق https ارائه می‌شوند)، می‌توان پروتکل‌های خاص برنامه را با registerProtocolHandler() ایجاد و اجرا کرد.

هنگام اضافه کردن لینک‌هایی که احتمالاً برنامه‌های نصب شده‌ی دیگر را باز می‌کنند، خوب است که به کاربر اطلاع دهید. مطمئن شوید که متن بین تگ‌های باز و بسته به کاربر می‌گوید که قرار است چه نوع لینکی را فعال کند. انتخابگرهای ویژگی CSS، مانند [href^="mailto:"] ، [href^="tel:"] و [href$=".pdf"] می‌توانند برای هدف قرار دادن سبک‌ها بر اساس نوع برنامه استفاده شوند.

منابع قابل دانلود

ویژگی download باید زمانی که href به یک منبع قابل دانلود اشاره می‌کند، گنجانده شود. مقدار ویژگی دانلود، نام فایل پیشنهادی برای منبعی است که قرار است در سیستم فایل محلی کاربر ذخیره شود. SVGOMG، بهینه‌ساز SVG، از ویژگی download برای پیشنهاد نام فایل برای حباب قابل دانلودی که بهینه‌ساز ایجاد می‌کند، استفاده می‌کند. هنگامی که hal.svg بهینه‌سازی می‌شود، تگ آغازین لینک دانلود SVGOMG مشابه زیر است:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

همچنین یک نسخه آزمایشی از <canvas> وجود دارد که یک URL داده PNG قابل دانلود ایجاد می‌کند .

برای لینک دادن به یک منبع قابل دانلود، آدرس اینترنتی (URL) فایل را به عنوان مقدار ویژگی href و نام فایل پیشنهادی برای کاربر را به عنوان مقدار ویژگی download وارد کنید.

زمینه مرور

ویژگی target امکان تعریف زمینه مرور برای پیمایش لینک (و ارسال فرم ) را فراهم می‌کند. چهار کلمه کلیدی غیر حساس به حروف بزرگ و کوچک و دارای پیشوند underscore با عنصر <base> مورد بحث قرار گرفتند. این موارد شامل موارد زیر است:

• (پیش‌فرض) _self : باز کردن لینک در پنجره‌ی فعلی.
• _blank : باز کردن لینک در تب جدید.
• _parent : لینک را در شیء والد یا iframe باز می‌کند.
• _top : لینکی را در بالاترین جد باز می‌کند. این مورد به ویژه در صورتی مفید است که لینک عمیقاً تو در تو باشد.

اگر لینک تو در تو نباشد، _top و _parent همانند _self عمل می‌کنند. ویژگی target محدود به این چهار اصطلاح کلیدی نیست: هر اصطلاحی می‌تواند مورد استفاده قرار گیرد.

هر زمینه مرور (یا هر برگه مرورگر) یک نام زمینه مرور دارد. پیوندها می‌توانند پیوندها را در برگه فعلی، یک برگه جدید بدون نام یا یک برگه جدید یا موجود با نام باز کنند. به طور پیش‌فرض، نام، رشته خالی است.

برای باز کردن یک لینک در یک تب جدید، کاربر می‌تواند کلیک راست کرده و گزینه "باز کردن در یک تب جدید" را انتخاب کند. توسعه‌دهندگان می‌توانند با قرار دادن target="_blank" این کار را اجباری کنند.

لینکی با target="_blank" در یک تب جدید با نام تهی باز می‌شود و با هر کلیک روی لینک، یک تب جدید بدون نام باز می‌شود. این می‌تواند تب‌های جدید زیادی ایجاد کند. تب‌های خیلی زیاد. برای مثال، اگر کاربر ۱۵ بار روی <a href="registration.html" target="_blank">Register Now</a> کلیک کند، فرم ثبت نام در ۱۵ تب جداگانه باز می‌شود. این مشکل را می‌توان با ارائه نام زمینه تب حل کرد. با اضافه کردن ویژگی target به همراه یک مقدار حساس به حروف بزرگ و کوچک، مانند <a href="registration.html" target="reg">Register Now</a> ، اولین کلیک فرم ثبت نام را در یک تب reg جدید باز می‌کند. کلیک ۱۵ بار دیگر روی این لینک، ثبت نام را در زمینه مرور reg ، بدون باز کردن هیچ تب اضافی، مجدداً بارگذاری می‌کند.

ویژگی rel نوع پیوندهایی را که پیوند ایجاد می‌کند کنترل می‌کند و رابطه بین سند فعلی و منبعی که در هایپرلینک به آن پیوند داده شده است را تعریف می‌کند. مقدار این ویژگی باید یک لیست جدا شده با فاصله در یک یا چند مورد از مقادیر ویژگی rel پشتیبانی شده توسط برچسب <a> باشد.

اگر نمی‌خواهید ربات‌های جستجوگر لینک را دنبال کنند، می‌توانید از کلمه کلیدی nofollow استفاده کنید. مقدار external را می‌توان اضافه کرد تا نشان دهد که لینک به یک URL خارجی هدایت می‌شود و صفحه‌ای در دامنه فعلی نیست. کلمه کلیدی help نشان می‌دهد که هایپرلینک، راهنمای حساس به متن ارائه می‌دهد. با نگه داشتن موس روی لینکی با این مقدار rel ، به جای نشانگر معمولی، یک نشانگر راهنما نمایش داده می‌شود. از این مقدار فقط برای دریافت نشانگر راهنما استفاده نکنید؛ در عوض از ویژگی cursor CSS استفاده کنید. مقادیر prev و next را می‌توان در لینک‌هایی که به سند قبلی و بعدی در یک سری اشاره می‌کنند، استفاده کرد.

مشابه <link rel="alternative"> ، معنی <a rel="alternative"> به سایر ویژگی‌ها بستگی دارد. جایگزین‌های فید RSS همچنین شامل type="application/rss+xml" یا type="application/atom+xml " خواهند بود، فرمت‌های جایگزین شامل ویژگی type و ترجمه‌ها شامل ویژگی hreflang می‌شوند. اگر محتوای بین تگ‌های باز و بسته به زبانی غیر از زبان سند اصلی باشد، ویژگی lang را اضافه کنید. اگر زبان سند لینک‌شده به زبان دیگری است، ویژگی hreflang را اضافه کنید.

در این مثال، ما آدرس اینترنتی صفحه ترجمه شده را به عنوان مقدار href و rel="alternate" قرار می‌دهیم تا نشان دهیم که این یک نسخه جایگزین از یک سایت است؛ ویژگی hreflang زبان ترجمه‌ها را ارائه می‌دهد:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

اگر ترجمه فرانسوی یک PDF است، می‌توانید ویژگی type را با نوع MIME PDF منبع لینک‌شده ارائه دهید. اگرچه نوع MIME صرفاً توصیه‌ای است، اما اطلاع‌رسانی به کاربر مبنی بر اینکه یک لینک، سندی با فرمت متفاوت را باز می‌کند، همیشه ایده خوبی است.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

پیگیری کلیک‌های لینک

یکی از راه‌های ردیابی تعاملات کاربر، پینگ کردن یک URL هنگام کلیک روی یک لینک است. ویژگی ping ، در صورت وجود، شامل لیستی از URLهای امن (که با https شروع می‌شوند) است که با فاصله از هم جدا شده‌اند و در صورت فعال شدن لینک توسط کاربر، باید به آنها اطلاع داده شود یا پینگ شوند. مرورگر درخواست‌های POST را با بدنه PING به URLهایی که به عنوان مقدار ویژگی ping ذکر شده‌اند، ارسال می‌کند.

نکات تجربه کاربری

• همیشه هنگام نوشتن HTML، تجربه کاربری را در نظر بگیرید. لینک‌ها باید اطلاعات کافی در مورد منبع لینک‌شده ارائه دهند تا کاربر بداند روی چه چیزی کلیک می‌کند.
• در یک بلوک متن، ظاهر لینک‌های شما باید به اندازه کافی با متن اطراف متفاوت باشد، تا کاربران بتوانند راحت‌تر لینک‌ها را از سایر محتواها تشخیص دهند. از چندین شاخص بصری مانند رنگ و زیرخط استفاده کنید. رنگ به تنهایی کافی نیست.
• همیشه استایل‌های فوکوس را لحاظ کنید. این به کاربران کیبورد کمک می‌کند تا هنگام پیمایش محتوا در صفحه کلید، بدانند در کجا قرار دارند.
• محتوای بین <a> باز و </a> بسته، نام قابل دسترس پیش‌فرض لینک است و باید کاربر را از مقصد یا هدف لینک مطلع کند. اگر محتوای یک لینک یک تصویر است، توضیحات alt نام قابل دسترس است. متن لینک و متن alt باید توصیفی‌تر از "اینجا کلیک کنید" یا "اطلاعات بیشتر" باشند. در عوض، باید اطلاعاتی در مورد اینکه کاربر پس از فعال شدن لینک به کجا می‌رود، ارائه دهد. این برای کاربران صفحه‌خوان و نتایج موتورهای جستجو بسیار مهم است.
• محتوای تعاملی مانند <button> یا <input> را درون یک لینک قرار ندهید. همچنین لینک را درون <button> یا <label> نیز قرار ندهید. در حالی که صفحه HTML همچنان رندر می‌شود، قرار دادن عناصر قابل فوکوس و قابل کلیک درون عناصر تعاملی، تجربه کاربری بدی ایجاد می‌کند.
• اگر ویژگی href وجود داشته باشد، فشردن کلید Enter در حالی که فوکوس روی عنصر <a> قرار دارد، آن را فعال می‌کند.
• لینک‌ها محدود به HTML نیستند. عنصر a را می‌توان در یک SVG نیز استفاده کرد و با استفاده از ویژگی‌های 'href' یا 'xlink:href' یک لینک تشکیل داد.

لینک‌ها و جاوا اسکریپت

ویژگی links یک HTMLCollection را برمی‌گرداند که با عناصر a و area که دارای ویژگی href هستند، مطابقت دارد.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

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

درک خود را بررسی کنید

دانش خود را در مورد لینک‌ها آزمایش کنید.