ا سلام و عرض ادب خدمت خوانندگان گرامی روکسو، حتما هر روز که در دنیای وب گشت و گذار می کنید، با لینک های متعددی روبرو می شوید. بعضی از این لینک ها برای نمایان کردن قسمتی از صفحه هستند، برخی دیگر برای هدایت شما به صفحه ای دیگر و غیره. همه ی ما قبول داریم که لینک ها جزء مهم و جدانشدنی دنیای وب هستند بنابراین باید آنها را بررسی کنیم و بدانیم نحوه ی ایجاد کردنشان چطور است. امروز به مبحث بسیار مهم لینک دادن در html می پردازیم.
لینک دادن در html
در زبان HTML، لینک ها معمولا شما را به صفحات دیگری می فرستند و زمانی که موس خود را روی آن ها ببرید، نشانگر موس تبدیل به «علامت دست» می شود.
ساختار کلی لینک ها در زبان HTML از این قرار است:
همانطور که می بینید برای ایجاد لینک ها از تگی به نام <a>
استفاده می شود. مثال زیر را ببینید:
لینکی که در مثال بالا ساختیم، شما را مستقیما به صفحه ی دوره ی آموزشی HTML در وب سایت روکسو می برد؛ attribute ای به نام href
وجود دارد که آدرس لینک مورد نظرتان را باید در آن قسمت قرار دهید و متنی که بین دو تگ آغازی و پایانی <a>
نوشته می شود قسمتی از متن است که کاربر مشاهده می کند.
/
) و دیگری back slash است (این علامت -> \
). دلیل نام گذاری آن ها به forward (جلو) و back یا backwards (عقب) از این جهت است که سر علامت اول رو به جلو بوده و سر دومی رو به عقب است!مثال بالا از absolute path یا full path استفاده می کند که در فارسی با نام های آدرس مطلق و آدرس کامل شناخته می شوند. در این نوع آدرس دهی ها، آدرس کامل یک لینک به href داده می شود اما اگر لینک های شما به وب سایت خودتان برمی گردد، می توانید قسمت اول آدرس را به آن ندهید. مثال:
آدرس وب سایت (نام دامنه ی اصلی) به صورت خودکار به لینک اضافه خواهد شد.
ظاهر لینک ها
در تمام مرورگرها ظاهر پیش فرض لینک ها از این قرار است:
- لینک هایی که تا به حال باز نشده باشند زیرخط (underline) دارند و به رنگ آبی هستند.
- لینک هایی که حداقل یک بار باز شده باشند زیرخط داشته و بنفش هستند.
- لینک های active (به معنی «فعال») نیز زیرخط داشته و به رنگ قرمز هستند.
لینک های active به معنی لحظه ای است که کلیک چپ را روی لینک نگه داشته اید، اما هنوز رهایش نکرده اید تا به صفحه ی مورد نظر منتقل شوید. می توانید به خروجی مثال قبلی مراجعه کنید و روی لینک مورد نظر کلیک چپ را نگه دارید تا متوجه تغییر رنگ لینک ها بشوید.
شما می توانید این ظاهر را با استفاده از CSS تغییر دهید:
اگر به خروجی این کد مشاهده کنید، متوجه می شوید تمام رفتارهای لینک را تغییر داده ایم. اگر متوجه کدهای CSS نمی شوید جای نگرانی نیست، کافی است دوره ی آموزشی CSS ما را دنبال کنید. این مثال ها تنها برای این آورده شده اند که شما با قدرت CSS و همکاری اش با HTML آشنا شوید.
حالا که بحث از قدرت CSS شد، خوب است بدانید که می توانید لینک ها را به شکل دکمه در بیاورید! به مثال زیر نگاه کنید:
زمانی که به خروجی کد بالا مراجعه کنید، متوجه می شوید که با استفاده از کدهای CSS یک لینک عادی را به شکل یک دکمه در آورده ایم!
نحوه ی باز شدن لینک ها
شما با استفاده از Attribute ای به نام target
می توانید تعیین کنید که لینک مورد نظر چطور باز شود:
- اگر به
target
مقدارblank_
را بدهید، کاربر با کلیک روی لینک به یک tab جدید در مرورگر منتقل شده و لینک در آن tab برایش باز می شود. - اگر به
target
مقدارself_
را بدهید، لینک در صفحه ی فعلی باز می شود که حالت پیش فرض مرورگر ها است. - اگر به
target
مقدارparent_
را بدهید، لینک در frame پدر باز می شود. - اگر به
target
مقدارtop_
را بدهید، کاربر با کلیک روی لینک به یک پنجره ی جداگانه (window و نه tab) منتقل شده و لینک در آنجا برایش باز می شود. - اگر به
target
مقدار framename را بدهید، لینک در یک frame نام گذاری شده باز می شود.
دو مثال از موارد بالا میزنیم. لینک زیر در یک tab جداگانه باز خواهد شد:
اما در مثال بعدی میخواهیم لینک را در همان صفحه باز کنیم:
اگر در این مثال روی لینک کلیک کنید، دیگر به Tab جدیدی منتقل نمی شوید بلکه لینک در همان صفحه برایتان باز می شود.
سوال: frame چیست؟ مقدار top_
که به آن مربوط می شود چه کاری انجام می دهد؟
پاسخ: هنوز به مبحث frame ها در HTML نرسیده ایم اما اگر بخواهم به صورت کوتاه توضیح دهم همان JSBin را برایتان مثال می زنم. اگر به خروجی مثال قبل (یعنی این صفحه) سر زده باشید، متوجه می شوید صفحه ی ما به 2 قسمت تقسیم شده است؛ قسمت سمت چپ حاوی کد ها است و قسمت سمت راست حاوی خروجی آن ها. به هر کدام از این قسمت ها یک frame (به معنی «قاب») می گویند. زمانی که روی لینکِ موجود در سمت راست کلیک کنید می بینید که سایت روکسو در همان frame سمت راست باز می شود. اگر کد قبل را ویرایش کنیم و به target مقدارِ top_
را بدهیم، صفحه ی JSBin کاملا از بین می رود و لینک جدید تمام صفحه را می گیرد.
تصاویر لینک دار
همانطور که گفتیم لینک ها به متن محدود نیستند و می توانند از نوع تصویر باشند. به مثال زیر توجه کنید:
اگر در خروجی، روی لوگوی روکسو پلاس کلیک کنید، به صفحه ی روکسو پلاس منتقل خواهید شد؛ تنها کاری که کردیم قرار دادن تصویر (تگ <img>) درون تگ <a> بود.
مثال:
در این مثال باید موس خود را روی لوگوی روکسو پلاس نگه دارید تا توضیحات title نمایش داده شود.
ایجاد bookmark ها
لینک ها همیشه شما را به صفحات دیگر منتقل نمی کنند. برخی اوقات می توانید از لینک ها استفاده کنید تا کاربر را به قسمت های مختلف یک صفحه منتقل کنند. معمولا این کار را برای صفحات بسیار طولانی انجام می دهند. یک مثال میزنم:
ابتدا به عنصر دلخواه خود attribute ای به نام id
میدهیم:
سپس لینکی در همان صفحه ایجاد می کنیم و به href آن مقدار id
عنصر اولیه را به همراه علامت #
می دهیم:
حالا اگر روی آن لینک کلیک کنیم به قسمت مورد نظر (در این مثال همان chapter 4) منتقل می شویم:
به خروجی این کد بروید و روی لینک اول صفحه کلیک کنید (سمت راست). مشاهده می کنید که شما را مستقیما به chapter 4 می برد و دیگر نیازی به اسکرول کردن های متوالی نیست. این قابلیت باعث می شود کاربر راحت تر به مطالب سایت شما دسترسی پیدا کند (البته اگر مقاله ی شما آنچنان حجیم و طولانی باشد که پیدا کردن قسمت های خاص در آن سخت باشد). همچنین کار رفرنس یا ارجاع دادن دیگر سایت ها به سایت خود را راحت تر می کنید، چرا که دیگر سایت ها می توانند به قسمتی از سایت شما که مد نظر دارند ارجاع دهند نه تمام مقالهتان.
یکی از مثال های عملی آن را در صفحه ی توضیحات تگ <a> از توسعه دهندگان Mozilla می بینید. اگر روی این لینک کلیک کنید شما را مستقیما به صفحه ی تگ <a> می برد اما اگر روی این لینک کلیک کنید شما را به قسمت Accessibility concerns از همان صفحه می برد (اسکرول برای شما انجام شده است و دیگر در ابتدای صفحه نخواهید بود!).
امیدوارم این قسمت برای شما مفید بوده باشد.