ايجاد پيوند يا لينک يکي از مهمترين بخش های html

ايجاد پيوند يا لينک يکي از مهمترين بخش های html

در این قسمت ما قصد داریم شما را با تگ های پایه ای htmlاشنا کنیم. در html یک سری تگ های ساختاری داشتیم که درباره آنها توضیح دادیم و در ادامه تگ های پایه ای را مورد بررسی قرار خواهیم داد.

در صفحات وب زمانی که بروی یک متن ، عکس ، موسیقی ، ویدیو و یا ... کلیک میکنیم و به یک صفحه جدیدی ارجاع داده میشویم در واقع بر روی یک لینک یا یک پیوند کلیک کرده ایم. لینک ها در html با تگ a ایجاد می شوند.

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

‏a‏ از ابتداي کلمه ‏anchor‏ گرفته شده و به کلمات قابل کلیکی که براي پيوند يک صفحه وب، به صفحه ديگر مورد استفاده قرار میگیرد ، می گویند.‏ انکر تکست ، متن قابل مشاهده و قابل کليک با لينک است و معمولاً با رنگي متفاوت از متن اطراف ظاهر مي شود و غالباً مورد ‏تاکيد قرار مي ‏گيرد.‏

براي ايجاد لينک از تگ a به شکل زير استفاده مي کنيم:‏

‏<‏a href="url‏">متن لينک</‏a‏>‏

تگ <‏a‏> در ‏HTMLنشانه لينک است. شناسه ‏href‏ که مخفف ‏Hypertext Reference است مشخص کننده آدرس لينک مي باشد، <‏a‏/> نشانه بسته شدن تگ است. ‏متني که بين اين دو تگ ابتدايي و پاياني نوشته مي شود متني است که در صفحه شما به عنوان يک لينک ديده مي شود.‏

تگ ‏a‏ داراي 4 ‏attribute‏ پر کاربرد است

برای لینک دار دار کردن یک متن می توانید از دستور زیر استفاده کنید

. کاربران می‌توانند بر روی هر چیزی که بین این تگ <a> Text </a> قرار گرفته کلیک کنند

عنصر HTML <a> (یا عنصر لنگر) با ویژگی href ، پیوندی را به صفحات وب ، پرونده ها ، آدرس های ایمیل ، مکان های موجود در همان صفحه یا هر چیز دیگری که URL می تواند ایجاد کند ایجاد می کند. محتویات موجود در هر <a> باید مقصد لینک را نشان دهد.

تگ a در html دارای یک سری ویژگی هایی است، که در زیر به مهمترین آنها بشرح زیر می پردازیم

href

target

download

alt

rel

این ویژگی در تگ a مشخص می کند که موقع کلیک کاربر روی لینک مورد نظر صفحه مقصد به چه شکلی باز شود که دارای ۵ ویژگی می باشد که در زیر به آنها می پردازیم

_blank

_Parent

self

top

new

در مثال زير فرض بر اين است که هر دو صفحه مبدأ و مقصد لينک در يک پوشه قرار دارند. براي نمونه سرفصل آموزش مقدماتي HTML در همان پوشه اي قرار دارد که اين صفحه قرار دارد. نام اين صفحه index.php است. براي ايجاد يک لينک در اين صفحه مي توانيم به اينگونه عمل کنيم:

<a href="index.php">متن نمونه براي لينک</a>

تگ لينک يا تگ <a> براي ارتباط بين صفحات وب و يا ايجاد لنگر در داخل صفحه، در سايت به کار ميرود.

خصوصيت مقادير و توضيح مختصر

href آدرس صفحه اي که ميخواهيم با کليک بر روي محتوا مرورگر به آن برود.

target طريقه ي باز شدن لينک در مرورگر

name نام لنگرگاه براي پرش به قسمتي از صفحه

خصوصيت Href : اين خصوصيت مهمترين خصوصيت تگ a مي باشد که با مرورگر پس کليک بر روي محتواي لينک به آدرسي که در اين خصوصيت قرار ميگيرد مي رود

<a href="https://webgoo.ir">کليک کنيد</a>

در لينک ساده بالا، عبارتي که براي مقادير href در نظر گرفته مي شود، در واقع همان آدرس URL مقصد است که مي خواهيم کاربر پس از کليک بر روي متن "کليک کنيد" به آن هدايت شود.

ايجاد عنوان براي لينک يا title

تگ a با خاصيت هاي ديگري کامل تر مي شود که از آن جمله مي توان title را نام برد، استفاده از title اجباري نيست، اما مي تواند از نظر بهينه بودن لينک هاي سايت مفيد باشد.

<a href="https://webgoo.ir" title="اين يک لينک است">کليک کنيد</a>

کنترل پنجره لينک يا target

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

<a href="https://webgoo.ir" title="اين يک لينک است" target="_blank">کليک کنيد</a>

پارامتر target مقادير متفاوتي مي پذيرد که به صورت تيتروار در زير ملاحظه مي کنيد.

- blank_ : نمايش محتواي لينک در پنجره جديد.

- parent_ : نمايش محتواي لينک در پنجره والد (معمولا در حالتي استفاده مي شود که لينک از يک frame فراخواني شود).

ايجاد لينک به يک تصوير

hypertext يا متن حاوي لينک مي تواند به صورت محتواي غير متني نيز باشد، به طور مثال مي توان يک تصوير را با استفاده از تگ img در اين قسمت درج کرد، به مثال زير توجه کنيد.

<a href="https://webgoo.ir" title="اين يک لينک است" target="_blank"><img src="image/your-img.jpg" alt="your-alt" width="100" height="100"></a>

نکته: در برخي مرورگرها تصاوير لينک شده با يک خط در حاشيه مشخص مي شوند، براي محو اين خط حاشيه اي بايد از خاصيت border با مقادير 0 در HTML يا در حالت بهتر و استاندارد تر، در CSS استفاده کنيد.

ساده ترين ساختار تگ <a> به شکل زير مي باشد:

<a href=”http://#”> نوشته اي که کاربر با کليک روي آن به لينک داده شده هدايت مي شود </a>

مثل:

<a href=https://dazhyarco.net >داژيار پردازش ايساتيس </a>

صفت href:

اين صفت آدرس مکاني که مي خواهيم به آن لينک بدهيم را مشخص مي کند، (تگ a در html با اين صفت معنا پيدا مي کند. پس در ساده ترين ساختار هم بايد نوشته شود.)

توجه داشته باشيد آدرس بايد با پروتکل http يا https باشد.(بدون پروتکل هم تست کنيد)

بين تگ <a></a> : متني است که کاربر با کليک روي آن به جايي که لينک داده ايم هدايت مي شود.( مجيور نيستيم حتما متن بنويسيم بلکه مي توانيم هر تگي بين تگ <a></a> بنويسيم. مثلا يک تصوير ايجاد کنيم که کاربر با کليک روي آن به لينک مورد نظر هدايت شود(تگ تصوير را در جلسات بعد خواهيم گفت)

صفت target:

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

اين صفت دو مقدار پرکاربرد مي تواند داشته باشد:

self_ : يعني عبارت لينک شده در همين پنجره باز شود(به صورت پيش فرض اين صفت برابر _self مي باشد پس حتي اگر صفت target را استفاده نکنيم در همين صفحه باز مي شود ) مثال:

<a href=” https://dazhyarco.net ” target=”_self “> داژيار </a>

blank_: يعني عبارت لينک شده در پنجره جديد باز شود.

<a href=” https://dazhyarco.net ” target=”_blank “> داژيار </a>

البته سه مورد ديگه هم وجود داره که فقط نام مي برم چون مربوط به بحث ما نمي شوند(parent، _top، framename_).

اينا رو همينجوري نخونين و رد بشينا! يکي يکي در سند html خودتون بزنيد و نتيجه رو ببينين! ;-)

صفت rel:

اين صفت مقادير مختلفي مي تواند داشته باشد که از مهمترين آن ها مي توانيم به دو مقدار زير اشاره کنيم که به سئو سايت مربوط مي شود:

Follow: با دادن اين مقدار به صفت rel ، به ربات هاي گوگل پيغام مي دهيم که من اين لينک را تاييد مي کنم.

Nofollow: با دادن اين مقدار به صفت rel ، به ربات هاي گوگل پيغام مي دهيم که من اين لينک را تاييد نمي کنم.

1- href : مشخص مي کند در صورت کليک شدن بر روي لينک چه صفحه اي باز شود

2- name : براي ايجاد Bookmark استفاده مي شود . bookmark باعث مي شود که با کليک بر روي آن به جايي از صفحه جاري و يا به محل خاصي در صفحه ديگر برويم (نه فقط به ابتداي صفحه)

3 - title : براي ايجاد توضيحي که مانند hint ظاهر شود به کار مي رود . اين گزينه براي آن به کار مي رود که کاربر قبل از کليک بداند به کجا هدايت خواهد شد

4- target :بيشترين كاربرد target زماني است كه بخواهيد صفحه اي كه به آن لينك مي دهيد در پنجره اي جديد باز شود . بدين ترتيب بايد مقدار خصيصه target را به blank_ تنظيم كنيد

name :

اين خصيصه در html5 کنارگذاشته شده ولي هنوز در html هاي ورژن پايين تر کاربرد مهمي دارد

در اين مقاله قصد داريم تا شما را با تگ a آشنا کنيم. لينک‌ها با استفاده از تگ <a> ايجاد مي?شوند. کاربران مي‌توانند بر روي هر چيزي که بين اين تگ <a> Text </a> قرار گرفته کليک کنند.

متني که در بين تگ <a> قرار مي‌گيرد به عنوان متن لينک شناخته مي‌شود.

همان طور که در ابتدا شرح داده شد از تگ <a> و خاصيت href براي ساخت پيوند استفاده مي‌شود. مقدار خاصيت href در واقع آدرس صفحه‌اي است که مي‌خواهيد مخاطبان به آنجا منتقل شوند.

هنگامي که شما به يک صفحه از وبسايت ديگر لينک مي‌کنيد، مقدار href برابر با آدرس کامل وبسايت خواهد بود که به عنوان آدرس مطلق شناخته مي‌شود.

اگر قصد داريد يک link را در صفحه جديد مرورگر باز کنيد، بايد از خاصيت target موجود در تگ <a> استفاده کنيد. مقدار اين خاصيت بايد برابر با _blank باشد.

در تگ <a> مهم ترين خصوصيت href است که نشان مي دهد مقصد لينک کجاست.