پیوندها در HTML

سلام
به دنبال آموزش های پیشین ما درباره آموزش زبان HTML ، امروز به سراغ یکی از تگهای مهم HTML می رویم. همه ما با تعریف پیوند یا همان لینک ( link ) آشنایی داریم ; نوشته هایی که ما را از یک صفحه ، به یک صفحه دیگر منتقل می کنند و ما امروز قصد داریم تا به طور مفصل ، آن ها را بررسی کنیم.

کاربران وب ، به طور نا خود اگاه با مفهوم پیوند آشنایی دارند ولی برای سادگی هرچه بیشتر : متون یا عکس هایی که شما با کلیک بر روی آن ها ، وارد یک صفحه دیگر می شوید ، به اصطلاح دارای پیوند هستند ( یا لینک شده اند ). بدین معنا که کاربر با کلیک بر روی آن ها به یک صفحه دیگر منتقل می شوند.

به عنوان یک مثال ساده می توانید بر روی لینک مقابل کلیک کنید. مشاهده خواهید کرد که یه صفحه جدید از وب سایت گویا آی تی برای شما باز خواهد شد.

اینجا کلیک کنید

بیاید با هم ، نحوه پیوند دادن متون و عکس ها را بررسی کنیم. ابتدا به این موضوع اشاره کنم که برای ایجاد یک پیوند ، به تگ <a> نیازمندیم. ( این تگ در زبان HTML به تگ HyperLink نیز شناخته شده است )

ساختار اصلی تگ <a> به صورت زیر است :

<a>Link</a>

عبارتی که بین دو تگ <a> و </a> قرار می گیرد ، همان خواهد بود که کاربر با کلیک بر روی آن به صفحه جدید منتقل می شود.

حال ه ساختار اصلی پیوند ها را شناختیم ، به سراغ عناصر این تگ می رویم. اولین و مهم ترین عنصر این تگ ، عنصر href است. با استفاده از این عنصر می توان صفحه مقصد را تعیین کرد. برای مثال قصد دارید کاربر با کلیک بر روی عبارت Gooya به سایت https://gooyait.com منتقل شود. مانند رو به رو عمل می کنیم :

<a href=”https://gooyait.com”>Gooya</a>

حاصل کد بالا ، به صورت زیر خواهد بود :

Gooya

نکته : ذکر پروتکل اساسی است ! ( http:// ) چرا که عدم استفاده از ان ، نشانه باز کردن یک آدرس جدید نیست. به تدریج به توضیحات مفصل تری خواهیم پرداخت.

تا به اینجا ، توانسته ایم یک لینک را بسازیم که کاربر را به صفحه ای که در عنصر href تعریف می کنیم انتقال می دهد. حال بیایید به سراغ عنصر target برویم.

همانطور که مشاهده کردید در مثال اول این آموزش ، با کلیک بر روی لینک ، یک صفحه جدید باز می شد و صفحه مقصد به نمایش در می آمد. اما در مثال آخر ، اگر بر روی لینک کلیک کنید ، یک صفحه  جدید از مرورگر باز نمی شود و آدرس مقصد در همین صفحه باز خواهد شد. تعین اینکه آدرس مقصد در صفحه جدید ، در همین صفحه یا … باز شود ، با استفاده از عنصر target امکان پذیر است.

برای مثال ، کد زیر را بررسی کنیم :

<a href=”https://gooyait.com” target=”_blank”>Gooya</a>

حاصل کد بالا به صورت زیر خواهد بود :

Gooya

کلیک بر روی لینک بالا ، یک صفحه جدید از مرورگر شما باز کرده و آدرس مقصد را برای شما به نمایش در خواهد آورد. اما عنصر target چه مقادیری را پذیرا خواهد بود ؟ لیست زیر را با هم ببینیم :

target=”_blank”  – آدرس مقصد شما را در یک صفحه جدید باز خواهد کرد

target=”_new” – آدرس مقصد شما را در یک صفحه جدید باز خواهد کرد

تفاوت new و blank در این است ه در حالت blank آدرس مقصد در Tab جدید (  زبانه جدید در مرورگر ) و new آدرس شما را در یک پنجره جدید از مرورگر ( New Window ) باز خواهد کرد.

target=”_self” – آدرس مقصد را در همان صفحه فعلی شما باز خواهد کرد

target=”_parent”

target=”_top”

توضیحات در مورد مقادیر عنصر target داده شد. اما درباره مقادیر parent و top باید با مفاهیم frame آشنا باشید. فرض کنید صفحه ای که در آن قرار داریم به نام x1 شناخته شده است. در صفحه x1 یک فریم داریم که نام آن ها x2 می گذاریم. در صفحه x2 نیز یک فریم دیگر وجود دارد که آن را x3 می نامیم. حال ، وقتی در صفحه x3 یک لینک را با مقدار parent برای عنصر target تعریف می کنیم ، وقتی کاربر بر روی آن لینک کلیک می کند ، صفحه x1 کاربر را به مقصد خواهد رساند. و هنگامی که مقدار target را  روی top قرار دهید ، کاربر با کلیک بر روی لینک مورد نظر ( که در صفحه x3 قرار دارد ) ، توسط صفحه x2  ( که یک فریم در صفحه x1 است ) به صفحه مقصد هدایت می شود.

نکته : در حالت عادی ، مقدار عنصر target روی self تنظیم شده است و لینک را در همان صفحه باز خواهد کرد.

حال به سراغ یک عنصر مهم دیگر می رویم. عنصر title که نمایش گر توضیحات یک لینک است از لحاظ سئو بسیار حائز اهمیت است. title به طور عادی ، همان متنی خواهد بود که کاربر با قرار دادن موس ( نشانگر ) و نگهداشتن بر روی آن ، آن را مشاهده خواهد کرد. مثال زیر را بررسی کنیم :

<a href=”https://gooyait.com” title=”گویا آی تی” > Gooya </a>

حاصل کد  بالا ، پیوند زیر خواهد بود :

Gooya

اگر موس خود را روی لینکبالا قرار دهید ، عبارت “گویا آی تی” را مشاهده خواهید کرد.

تا اینجا عناصر اصلی یک لینک را با هم بررسی کرده ایم. حال کمی حرفه ای تر ، به جزئیات برخی عناصر دیگر می پردازیم.

یکی دیگر از عناصر تگ <a> ، عنصر rel است. این عنصر 2 مقدار follow و nofollow را پذیرا است. این عنصر دارای اهمیت زیادی در خصوص سئو است. اگر شما لینکی داشته باشید که دارای عنصر rel با مقدار nofollow باشد ، عنکبوت های جستجوگر ها ، وارد صفحه مقصد نخواهند شد ! در حالی که در حالت عادی مقدار عنصر rel روی follow بوده و جستجوگر ها صفحه مقصد را مشاهده و ذخیره می کنند.

اگر تا بحال با مفهوم لینک آشنا شده و کاربرد آن را دیده اید ، شما را دعوت می کنم تا یکی از کاربردهای استثنایی تگ <a> را در این قسمت ببینید.

آیا تابحال پیش آمده است وارد صفحه ای شوید که در انتهای آدرس آن کاراکتر # وجود داشته باشد ؟ برای مثال :

https://gooyait.com/index.php#html

و پس از بارگذاری این صفحه ، شما به طور خودکار به وسط صفحه منتقل شوید ؟ ( از طریق اسکرول بار ) … درست حدس زدید. یکی از ویژگی های لینک ها ، آدرس دهی به صفحه فعلی ، برای هدایت آسان کاربر به بخش های مختلف سایت ، یک متن طولانی یا … است. حال فرض کنید متنی بلند بالا دارید که در در ابتدای آن فهرستی از عناوین آن متن وجود دارد.

برای اینکه بتوانید به کاربر کمک کنید تا با کلیکبر روی عناوین موجود در فهرست ، به متون موجود در آن عنوان در متن بلند هدایت شود ، باید عناوین آن متن را لینک دهید . به آن لینک ها عنصر id دهید. برای مثال یکی از عناوین موجود در متن ، “آموزش برنامه نویسی” است. باید این عنوان را به صورت زیر لینک دهید :

<a id=”Amoozesh”> آموزش برنامه نویسی </a>

نکته : با توجه به اینکه برای این تگ ، عنصر href تعیین نشده است ، کارب با کلک بر روی این لینک به هیچ صفحه ای منتقل نخواهد شد.

حال در قسمت فهرست ، لینکی می سازیم و مقدار عنصر href را در آن به صورت #Amoozesh قرار می دهیم. مثل کد زیر :

<a href=”#Amoozesh”> پرش به قسمت آموزش برنامه نویسی </a>

کاربر با کلیک بر روی لینک بالا ، به قسمتی از صفحه پرش خواهد کرد که ما تگ <a> با عنصر id با مقدار Amoozesh قرار داده ایم.

برای اینکه یک مثال آماده داشته باشید ، کد زیر را در یک نت پد کپی ، با فرمت html ذخیره و امتحان کنید.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>GooyaIT Tutorial</title>
</head>

<body>
<div id=”mehrdad”>
<a href=”#tips”>View Tips</a>
<a href=”#gooya”>View Gooya</a>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h2><a id=”tips” target=”” >Tips</a></h2>
Tips Are Mentioned Here !
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h2><a id=”gooya”>Gooya </a></h2><br />
Gooya is Mentioned Here !
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

امیدوارم تگ <a> به طور کامل برای شما جا افتاده باشه. اگر سوالی در این باره دارید ، در قسمت نظرات بفرمایید.