آموزش HTML : ایجاد لینکها
لینکها (که با نام هایپرلینک نیز شناخته میشوند) واقعاً مهم هستند - آنها چیزی هستند که وب را به یک وب تبدیل میکنند. این مقاله نحو مورد نیاز برای ایجاد یک لینک را نشان میدهد و بهترین شیوههای لینکسازی را مورد بحث قرار میدهد.
هایپرلینکها ویژگیهایی از یک سند HTML هستند که با کلیک یا فعال شدن، باعث میشوند مرورگر به اسناد یا منابع دیگر، گاهی اوقات بخشهای خاصی از اسناد، هدایت شود. هایپرلینکها یکی از هیجانانگیزترین نوآوریهایی هستند که وب ارائه میدهد. آنها از ابتدا یکی از ویژگیهای وب بودهاند و چیزی هستند که وب را به یک وب تبدیل میکنند. هر منبع در وب دارای یک آدرس است که به عنوان URL (مخفف Uniform Resource Locator) شناخته میشود و هایپرلینکها به آن اشاره میکنند.
یک URL میتواند به فایلهای HTML، فایلهای متنی، تصاویر، اسناد متنی، فایلهای ویدیویی و صوتی یا هر چیز دیگری که در وب وجود دارد، اشاره کند. اگر مرورگر وب نداند چگونه فایل را نمایش دهد یا با آن کار کند، از شما میپرسد که آیا میخواهید فایل را باز کنید (که در این صورت وظیفه باز کردن یا کار با فایل به یک برنامه بومی مناسب در دستگاه واگذار میشود) یا فایل را دانلود کنید (که در این صورت میتوانید بعداً با آن کار کنید).
یک لینک ساده با قرار دادن متن یا محتوای دیگر درون یک عنصر و استفاده از ویژگی که به عنوان مرجع ابرمتن یا هدف نیز شناخته میشود و حاوی آدرس وب است، ایجاد میشود.
همانطور که قبلاً ذکر شد، تقریباً هر محتوایی را میتوان به یک لینک تبدیل کرد، حتی عناصر سطح بلوک. اگر میخواهید یک عنصر عنوان را به یک لینک تبدیل کنید، آن را همانطور که در قطعه کد زیر نشان داده شده است، در یک عنصر (anchor) قرار دهید:
برای تبدیل یک تصویر به لینک، عنصر را درون یک عنصر قرار دهید. مثال زیر از یک مسیر نسبی برای ارجاع به یک فایل تصویری SVG ذخیره شده محلی استفاده میکند.
افزودن اطلاعات پشتیبانی با ویژگی عنوان
همچنین میتوانید یک ویژگی عنوان به لینکهای خود اضافه کنید. عنوان شامل اطلاعات اضافی در مورد لینک است، مانند نوع اطلاعاتی که صفحه شامل میشود یا مواردی که باید در وبسایت از آنها آگاه باشید.
این نتیجهی زیر را به ما میدهد و با نگه داشتن ماوس روی لینک، عنوان آن به صورت یک راهنما نمایش داده میشود:
عنوان (title) یک لینک فقط با نگه داشتن ماوس روی آن نمایش داده میشود، به این معنی که افرادی که برای پیمایش صفحات وب به کنترلهای صفحه کلید یا صفحات لمسی متکی هستند، در دسترسی به اطلاعات عنوان با مشکل مواجه خواهند شد. اگر اطلاعات عنوان واقعاً برای کاربردپذیری صفحه مهم است، باید آن را به گونهای ارائه دهید که برای همه کاربران قابل دسترسی باشد، مثلاً با قرار دادن آن در متن معمولی.
مقدمهای سریع بر URLها و مسیرها
اهداف لینک، URLها هستند. یک URL یا Uniform Resource Locator، رشتهای از متن است که محل قرارگیری چیزی را در وب مشخص میکند. به عنوان مثال، صفحه اصلی PDN در آدرس قرار دارد.
یک وب سرور درخواستهای مربوط به URLها را دریافت میکند و با منبع مناسب پاسخ میدهد. اکثر منابع به صورت فایل در سیستم فایل سرور ذخیره میشوند، بنابراین URLهای این منابع اغلب شبیه مسیرهای فایل هستند.
مسیرهای فایل و URLها یکسان نیستند، اما فعلاً برای تسهیل درک، این تمایز را نادیده میگیریم. در بخش «چگونه URLها به مسیرهای فایل تبدیل میشوند؟» بیشتر در مورد تفاوتها بحث خواهیم کرد.
ریشه این ساختار دایرکتوری، creating-hyperlinks نام دارد. هنگام کار محلی با یک وبسایت، یک دایرکتوری خواهید داشت که شامل کل سایت است. در داخل ریشه، ما یک فایل index.html و یک فایل contacts.html داریم. در یک وبسایت واقعی، index.html صفحه اصلی یا صفحه فرود ما خواهد بود (یک صفحه وب که به عنوان نقطه ورود به یک وبسایت یا بخش خاصی از یک وبسایت عمل میکند).
همچنین دو دایرکتوری در root ما وجود دارد - pdfs و projects. هر کدام از این دایرکتوریها یک فایل واحد در داخل خود دارند - به ترتیب یک فایل PDF (project-brief.pdf) و یک فایل index.html. توجه داشته باشید که میتوانید چندین فایل index.html در یک پروژه داشته باشید، مادامی که در مکانهای مختلف سیستم فایل باشند. index.html دوم شاید صفحه فرود اصلی برای اطلاعات مربوط به پروژه باشد.
بیایید به چند نمونه از لینکهای بین فایلهای مختلف در این ساختار دایرکتوری نگاهی بیندازیم تا انواع مختلف مسیر را نشان دهیم.
اگر میخواهید یک هایپرلینک درون فایل index.html سطح بالا قرار دهید که به contacts.html اشاره میکند، میتوانید مسیر را فقط به عنوان نام فایلی که میخواهید به آن لینک دهید مشخص کنید، زیرا در همان دایرکتوری فایل فعلی قرار دارد. URL مورد استفاده contacts.html خواهد بود:
همچنین میتوانید با استفاده از یک نقطه و به دنبال آن یک اسلش، مسیر یک فایل را در همان دایرکتوری شروع کنید: مثال زیر معادل مثال قبلی است، اما برخی افراد دوست دارند را نیز اضافه کنند زیرا احساس میکنند وضوح بیشتری ارائه میدهد:
حرکت به سمت پایین و زیرشاخهها
اگر میخواهید یک هایپرلینک در index.html سطح بالا قرار دهید که به projects/index.html اشاره کند، باید قبل از مشخص کردن فایلی که میخواهید به آن لینک دهید، به دایرکتوری projects بروید. این کار با مشخص کردن نام دایرکتوری، سپس یک اسلش (/) و در نهایت نام فایل انجام میشود. URL ای که میتوانید استفاده کنید projects/index.html است:
بازگشت به دایرکتوریهای والد
اگر میخواهید یک لینک درون projects/index.html قرار دهید که به pdfs/project-brief.pdf اشاره کند، باید به یک سطح دایرکتوری بالا بروید، سپس به دایرکتوری pdfs برگردید. برای رفتن به یک دایرکتوری بالا، از دو نقطه استفاده میکنید - .. - بنابراین URL به صورت خواهد بود:
در صورت نیاز میتوانید چندین نمونه از این ویژگیها را در مسیرهای پیچیده ترکیب کنید، برای مثال:
پیوند دادن نسبت به دایرکتوری ریشه
آدرسهای اینترنتی بالا کار میکنند، اما به خاطر داشته باشید که اگر فایل پیوند دهنده یا فایل پیوند شده را به مکان دیگری منتقل کنید، پیوند را از بین خواهید برد.
اگر میخواهید پیوندی به مکان خاصی ایجاد کنید که در صورت جابجایی فایل پیوند دهنده از بین نرود، میتوانید این کار را با قرار دادن یک اسلش در ابتدای مسیر انجام دهید - این نشان میدهد که مسیر از فهرست اصلی سایت شروع میشود. به عنوان مثال، پیوند قبلی در داخل projects/index.html میتواند به صورت زیر بازنویسی شود:
اکنون مسیر همیشه از دایرکتوری ریشه (creating-hyperlinks) شروع میشود، به دایرکتوری pdfs میرود و فایل project-brief.pdf را پیدا میکند. اگر فایل لینکدهنده را به مکان دیگری، مثلاً a/b/c/d/e/index.html، منتقل کنید، این روش همچنان کار خواهد کرد.
اگر فایل لینکشده project-brief.pdf را به مکان دیگری منتقل کنید، باز هم لینک قطع میشود.
دو اصطلاحی که در وب با آنها مواجه خواهید شد، مسیر مطلق و مسیر نسبی هستند.
مسیر مطلق: به مکانی اشاره میکند که با مکان مطلق آن در سایت شما (یا هر جای دیگری در وب) تعریف میشود. به عنوان مثال، میتوانید همانطور که قبلاً دیدیم، با استفاده از یک اسلش در ابتدای مسیر، یک لینک مطلق ایجاد کنید که همیشه به همان مکان نسبت به دایرکتوری ریشه سایت اشاره میکند: /pdfs/project-brief.pdf.
مسیر نسبی: به مکانی اشاره میکند که نسبت به فایلی که از آن لینک میدهید، نسبی است. در مثال قبلیمان، از projects/index.html برای ایجاد یک پیوند نسبی بین فایل فعلی و فایلی به نام index.html که درون یک زیرشاخه projects قرار دارد، استفاده کردیم. اگر قرار باشد فایل فعلی را به مکان دیگری منتقل کنید، مسیر همچنان نسبت به آن فایل نسبی خواهد بود، اما به یک مکان مطلق متفاوت اشاره خواهد کرد.
این اصطلاحات همیشه به طور مداوم استفاده نمیشوند. به عنوان مثال، /pdfs/project-brief.pdf نسبت به مکان فایل فعلی مطلق است، اما نسبت به نام دامنه. یک URL که شامل نام کامل دامنه است، مانند https://example.com/pdfs/project-brief.pdf، نسبت به کل وب مطلق است.
لینک دادن با URL های کامل
شما میتوانید یک URL کامل را به عنوان مسیر خود مشخص کنید، که همیشه به همان مکان در وب اشاره میکند، صرف نظر از اینکه کجا استفاده شود. به عنوان مثال:
این لینک همیشه به لینک خواهد شد، حتی اگر سایت شما به دامنه دیگری منتقل شود.
وقتی یک لینک به منبعی در سایت شما اشاره میکند، به آن لینک داخلی میگویند. وقتی لینکی به منبعی در سایت دیگری اشاره میکند، به آن لینک خارجی میگویند.
هنگام مشخص کردن یک لینک خارجی، همیشه باید آدرس کامل URL را به عنوان مسیر وارد کنید، برای مثال:
شما نمیتوانید با مسیری مانند /pdfs/project-brief.pdf یا projects/index.html به مکانی در سایت دیگری ارجاع دهید، زیرا هر دوی آنها نسبت به مکانی در سایت شما نسبی هستند و مرورگر برای یافتن آن به نام دامنه وبسایت نیاز دارد.
هنگام مشخص کردن یک لینک داخلی، میتوانید از یک مسیر نسبی یا مطلق یا یک URL کامل استفاده کنید. در مثال ما، این لینکها معادل هستند:
ما به دلیل قابلیت حمل، مورد دوم را بدون نام کامل دامنه توصیه میکنیم. همانطور که قبلاً گفتیم، اگر را مشخص کنید، همیشه به لینک میشود. اگر سپس وبسایت خود را به دامنه دیگری، مثلاً another-example.com، منتقل کنید، تمام لینکهای URL کامل شما باید تغییر کنند. اگر مسیرهایی مانند /projects را مشخص کنید، آنها همچنان کار خواهند کرد، زیرا هنوز نسبت به ساختار دایرکتوری نسبی هستند.
میتوان به جای فقط بالای سند، به بخش خاصی از یک سند HTML، که به عنوان قطعه سند شناخته میشود، لینک داد. عناصری که در سند دارای ویژگی id هستند، به طور خودکار یک قطعه سند ایجاد میکنند که میتوان به آن لینک داد.
معمولترین مورد استفاده، لینک دادن به یک عنوان خاص است که به این شکل است:
برای لینک دادن به آن شناسه خاص، آن را در انتهای مسیر قرار میدهید و قبل از آن یک نماد هش (#) قرار میدهید، برای مثال:
شما حتی میتوانید از ارجاع قطعه سند به تنهایی برای پیوند دادن به بخش دیگری از سند فعلی استفاده کنید:
چگونه URL ها به مسیرهای فایل تبدیل می شوند؟
تمام اهداف لینکی که تاکنون دیدهایم، URLهایی هستند که توسط یک وب سرور پردازش میشوند تا منبع مربوطه را پیدا کنند. هیچ محتوای وبی نمیتواند مستقیماً سیستم فایل سرور را ببیند.
مثال سروری که تاکنون بررسی کردهایم، یک وبسایت استاتیک ایجاد میکند. سرور فقط بخش نام مسیر URL را میگیرد و مستقیماً به دنبال فایل مربوطه در سیستم فایل خود میگردد.
بسیاری از سرورها به جای بازیابی محتوا از یک فایل استاتیک، آن را به صورت آنی برای یک URL تولید میکنند. اگر از یک framework وب استفاده میکنید، دایرکتوری کد منبع شما نیز ممکن است با آنچه در سرور مستقر میشود بسیار متفاوت باشد. هنگام کار با وبسایت خود، باید ابزارهای ساخت و تنظیمات سرور خود را بشناسید تا بدانید که چگونه URLها به فایلهای منبع شما نگاشت میشوند.
اگر یک سرور وب راهاندازی کنیم (به بخش «چگونه یک سرور آزمایشی محلی راهاندازی کنیم؟» مراجعه کنید) که از دایرکتوری سایت نمونه ما به عنوان ریشه استفاده میکند و نام دامنه وبسایت روی example.com تنظیم شده است، فایل pdfs/project-brief.pdf ما در آدرس در دسترس خواهد بود.
همه لینکها نسبت به آدرس اینترنتی سند فعلی تفکیک میشوند، بنابراین:
برای همه صفحات در دامنه https://example.com، یک لینک به همیشه یک لینک به ایجاد میکند که نام مسیر آن است.
سرور به دنبال دایرکتوری pdfs در دایرکتوری ریشه میگردد، سپس به دنبال فایل project-brief.pdf در داخل آن دایرکتوری میگردد. یک لینک به projects/index.html لینکی به ایجاد میکند، اما فقط زمانی که در فایلی درون دایرکتوری ریشه، مانند فایل سطح بالای index.html یا contacts.html قرار گیرد. اگر آن را مثلاً درون یک فایل HTML در pdfs/index.html قرار دهید، به لینک میشود که نام مسیر آن است که وجود ندارد، بنابراین در نهایت با یک لینک خراب مواجه خواهید شد.
هنگام ارجاع به یک فایل index.html، معمولاً نیازی به قرار دادن index.html در URL/مسیر ندارید، زیرا سرورهای وب وقتی نام فایل مشخص نشده باشد، به دنبال یک صفحه فرود پیشفرض به نام index.html میگردند.
با نگاهی دوباره به مثال مسیر projects/index.html، میتوانیم مسیر را به صورت projects بنویسیم و این باعث ایجاد لینکی به میشود. هنگام پیمایش به صفحه، میتوانیم URL را به صورت بنویسیم و همچنان به جای درست خود برسیم.
علامت اسلش (/) در انتهای URL مهم است. با استفاده از آن، یک لینک نسبی به contacts.html در داخل projects/index.html به آدرس (که در همان دایرکتوری است) ارجاع داده میشود. بدون آن، URL به عنوان یک فایل در نظر گرفته میشود و لینک نسبی به آدرس (که یک دایرکتوری بالاتر است) ارجاع داده میشود.
هنگام نوشتن لینکها، چند نکتهی کلیدی وجود دارد که باید رعایت کنید. اکنون به بررسی آنها میپردازیم.
از متن لینک واضح استفاده کنید
قرار دادن لینکها در صفحه آسان است. این کافی نیست. ما باید لینکهای خود را برای همه خوانندگان، صرف نظر از زمینه فعلی و ابزارهایی که ترجیح میدهند، قابل دسترسی کنیم. به عنوان مثال:
کاربران صفحهخوان دوست دارند در صفحه از لینکی به لینک دیگر بپرند و لینکها را خارج از زمینه بخوانند.
موتورهای جستجو از متن لینک برای فهرست کردن فایلهای هدف استفاده میکنند، بنابراین ایده خوبی است که کلمات کلیدی را در متن لینک خود بگنجانید تا به طور موثر آنچه به آن لینک داده شده است را توصیف کنید.
خوانندگان بصری به جای خواندن هر کلمه، صفحه را به طور اجمالی مرور میکنند و چشمان آنها به ویژگیهای برجسته صفحه، مانند لینکها، جلب میشود. آنها متن لینک توصیفی را مفید خواهند یافت.
بیایید به یک مثال خاص نگاه کنیم:
متن لینک ضعیف به این شکل است:
نکات دیگر:
آدرس اینترنتی (URL) را به عنوان بخشی از متن لینک تکرار نکنید - آدرسهای اینترنتی (URL) زشت به نظر میرسند و وقتی یک صفحهخوان آنها را حرف به حرف میخواند، زشتتر هم به نظر میرسند.
در متن لینک از کلمات "لینک" یا "لینک به" استفاده نکنید - این فقط نویز است. صفحهخوانها به افراد میگویند که یک لینک وجود دارد. کاربران بصری نیز متوجه وجود لینک میشوند، زیرا لینکها معمولاً با رنگ متفاوتی طراحی و زیرخطدار میشوند (این قرارداد معمولاً نباید شکسته شود، زیرا کاربران به آن عادت دارند).
متن لینک خود را تا حد امکان کوتاه نگه دارید - این مفید است زیرا صفحهخوانها باید کل متن لینک را تفسیر کنند.
مواردی را که چندین نسخه از یک متن به مکانهای مختلف لینک شدهاند، به حداقل برسانید. اگر لیستی از لینکهای خارج از متن وجود داشته باشد که با برچسبهای "اینجا کلیک کنید"، "اینجا کلیک کنید"، "اینجا کلیک کنید" مشخص شدهاند، این میتواند برای کاربران صفحهخوان مشکل ایجاد کند.
لینک دادن به منابع غیر HTML - علائم راهنمایی واضح بگذارید
هنگام پیوند دادن به منبعی که در صفحه فعلی به عنوان "پیمایش عادی" باز نمیشود، باید متن پیوند را به طور واضح در مورد آنچه قرار است اتفاق بیفتد، توضیح دهید. به عنوان مثال، اگر در حال دانلود یا پخش یک منبع هستید، یا اگر قرار است پیوند یک پنجره بازشو باز کند یا اثر غیرمنتظره دیگری داشته باشد، این موضوع باید در متن ذکر شود. این موضوع برای کاربرانی که از پهنای باند کم استفاده میکنند و ممکن است بخواهند از دانلود فایلهای چند مگابایتی خودداری کنند، مهم است. همچنین به ایجاد انتظارات برای کاربران صفحهخوان که ممکن است از آنچه در غیر این صورت اتفاق میافتد آگاه نباشند، کمک میکند.
بیایید به چند مثال نگاه کنیم تا ببینیم چه نوع متنی را میتوان در اینجا استفاده کرد:
هنگام پیوند به یک فایل دانلود، از ویژگی دانلود استفاده کنید
وقتی به منبعی لینک میدهید که قرار است دانلود شود نه اینکه در مرورگر باز شود، میتوانید از ویژگی دانلود برای ارائه نام فایل ذخیره پیشفرض استفاده کنید. در اینجا مثالی از لینک دانلود آخرین نسخه ویندوز فایرفاکس آورده شده است:
چه زمانی لینکها را در تب جدید باز کنیم؟
لینکها به طور پیشفرض در همان تب صفحهای که در آن هستند باز میشوند، که به کاربر اجازه میدهد با استفاده از دکمه برگشت مرورگر به صفحه قبل برگردد. با این حال، بسیاری از سایتها (از جمله MDN) تصمیم میگیرند لینکهای خاصی، به ویژه لینکهای خارجی، را در یک تب جدید باز کنند. این کار با تنظیم ویژگی target به "_blank" انجام میشود.
اینکه آیا لینکها را در یک تب جدید باز کنیم یا نه، باید یک تصمیم آگاهانه و بر اساس ملاحظات طراحی تجربه کاربری باشد. در اینجا چند نکته برای فکر کردن وجود دارد:
باز کردن لینکها در یک تب جدید، دو سند را به طور همزمان ارائه میدهد که برای یک تجربه ناوبری "موازی" مفید است. از سوی دیگر، لینکهایی که در یک تب باز میشوند، بیشتر شبیه ادامه صفحه فعلی هستند.
باز کردن لینکها در یک تب جدید میتواند برای کاربرانی که به استفاده از دکمه بازگشت عادت دارند، گیجکننده باشد.
حتی زمانی که لینکها به طور پیشفرض در یک تب باز میشوند، کاربران همچنان میتوانند با استفاده از میانبرهای صفحه کلید یا گزینههای منوی زمینه، آنها را در یک تب جدید باز کنند. از سوی دیگر، لینکهایی که در یک تب جدید باز میشوند، به سختی در همان تب باز میشوند.
کاربران صفحه خوان ممکن است با لینکهایی که در یک تب جدید باز میشوند، گیج شوند، زیرا ممکن است متوجه نشوند که تب جدید باز شده است و ممکن است اطلاعات مربوط به موقعیت آنها در صفحه را از دست بدهند.
یک رویکرد رایج، باز کردن لینکهای خارجی در تبهای جدید و لینکهای داخلی در همان تب است. برخی از طراحان ترجیح میدهند همه لینکها را در همان تب باز کنند. اگر لینکها را در تبهای جدید باز میکنید، توصیه میشود برای این لینکها، مانند یک آیکون در کنار متن لینک، نشانههایی ارائه دهید.
برای این تمرین، از شما میخواهیم که چند صفحه را با یک منوی ناوبری به هم پیوند دهید تا یک وبسایت چندصفحهای ایجاد کنید. این یکی از روشهای رایج ایجاد وبسایت است - در هر صفحه از ساختار صفحه یکسانی استفاده میشود، از جمله منوی ناوبری یکسان، بنابراین وقتی روی لینکها کلیک میشود، این تصور ایجاد میشود که شما در همان مکان هستید و محتوای متفاوتی نمایش داده میشود.
شما باید از چهار صفحه زیر، که همگی در یک دایرکتوری هستند، کپیهای محلی تهیه کنید.
index.html
projects.html
pictures.html
social.html
شما باید:
یک لیست نامرتب در محل مشخص شده در یک صفحه اضافه کنید که شامل نام صفحاتی باشد که باید به آنها لینک دهید. یک منوی ناوبری معمولاً فقط لیستی از لینکها است، بنابراین از نظر معنایی مشکلی ندارد.
نام هر صفحه را به یک لینک به آن صفحه تغییر دهید.
منوی ناوبری را در هر صفحه کپی کنید.
در هر صفحه، فقط لینک به همان صفحه را حذف کنید - اینکه یک صفحه شامل لینکی به خودش باشد، گیجکننده و غیرضروری است. و نبود لینک، یادآوری بصری خوبی از صفحهای که در حال حاضر در آن هستید، ارائه میدهد.
مثال نهایی باید شبیه صفحه زیر باشد:
میتوان لینکها یا دکمههایی ایجاد کرد که با کلیک روی آنها، به جای لینک دادن به یک منبع یا صفحه، یک پیام ایمیل خروجی جدید باز شود. این کار با استفاده از عنصر و طرح URL انجام میشود.
در ابتداییترین و رایجترین شکل خود، یک لینک آدرس ایمیل گیرنده مورد نظر را نشان میدهد. به عنوان مثال:
در واقع، آدرس ایمیل اختیاری است. اگر آن را حذف کنید و href شما باشد، یک پنجره ایمیل خروجی جدید توسط سرویس ایمیل کاربر بدون آدرس مقصد باز میشود. این اغلب به عنوان پیوندهای "اشتراکگذاری" مفید است که کاربران میتوانند برای ارسال ایمیل به آدرس دلخواه خود روی آن کلیک کنند.
علاوه بر آدرس ایمیل، میتوانید اطلاعات دیگری نیز ارائه دهید. در واقع، هر فیلد استاندارد هدر ایمیل را میتوان به آدرس اینترنتی mailto که ارائه میدهید اضافه کرد. رایجترین این فیلدها عبارتند از "subject"، "cc" و "body" (که یک فیلد هدر واقعی نیست، اما به شما امکان میدهد یک پیام کوتاه با محتوای مشخص برای ایمیل جدید تعیین کنید). هر فیلد و مقدار آن به عنوان یک عبارت پرسوجو مشخص میشود.
در اینجا مثالی آورده شده است که شامل cc، bcc، subject و body است:
