آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

نحوه ایجاد لینک در HTML

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

ایجاد لینک با تگ a و href

تگی که در HTML و در واقع در صفحات وب برای ایجاد لینک به سایر صفحات استفاده می شود تگ a است که در کنار href کامل می شود، عبارت a مخفف anchore یا لنگر است و href مخفف Hypertext Reference یا ابر متنی است که حاوی لینک (hyperlink) به صفحه دیگری است، به مثال زیر توجه کنید.

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

در لینک ساده بالا، عبارتی که برای مقادیر href در نظر گرفته می شود، در واقع همان آدرس URL مقصد است که می خواهیم کاربر پس از کلیک بر روی متن "کلیک کنید" به آن هدایت شود.
نکته: محتوای لینک ها در حالت پیش فرض در همان صفحه فعلی نمایش داده می شوند، به عبارتی جایگزین صفحه فعلی می شوند، اما با تنظیم پارامتر target که در ادامه خواهیم دید، می توان رفتار آنها را تغییر داد.

ایجاد عنوان برای لینک یا 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 فراخوانی شود).
- self_ : نمایش محتوای لینک در پنجره فعلی (حالت پیش فرض).
- top_ : نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).
- نام frame : برای پارامتر terget می توان نام یک 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 استفاده کنید.
در پایان این آموزش، شاید این پرسش به ذهنتان رسیده باشد که چگونه است بیشتر لینک های وب با رنگ ها و حالت های مختلف هستند، به طور مثال فونت و اندازه لینک ها متفاوت است یا با بردن ماوس روی لینک، رنگ آنها تغییر می کند و...، برای یافتن پاسخ این سوالات باید کمی صبر کنید و آموزش های مقدماتی HTML را به پایان برسانید، در گام بعدی یعنی فراگیری CSS، خواهیم دید که می توان لینک های وب را با استایل CSS فرم داد و به اصطلاح سفارشی نمود.

دسته بندی: آموزش مقدماتی » HTML

برچسب ها: HTML

قبلی »

« بعدی

مطالب بیشتر:
ایجاد جدول با تگ table در HTML
کار با تگ فرم (form) در HTML
لایه بندی در HTML با تگ div و span
کار با تگ های ایجاد کننده لیست در HTML
کاربرد تگ img و نمایش تصاویر در HTML

دیدگاه

۷۳ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

حامد

۱۶:۳۷ ۱۳۹۹/۰۱/۲۴

با سلام،
سوال اول: من از فردی html code دریافت کردم و میخواهم آن را در سایت های کلیکی اضافه کنم. اما سوال من اینجاست که آیا باید html code را در بخشی که نوشته url وارد کنم؟
سوال دوم: آیا url با html code فرق دارد؟

کدهای HTML معمولا باید در جایی درج شوند که پردازش و در خروجی نهایی سایت (سورس کد همان صفحه ای که بازدیدکنندگان مشاهده می کنند) قابل چاپ باشند، به طور مثال قسمت اسکریپت های اختصاصی یا در کد قالب سایت، URL یعنی آدرس وب (سایت، وبلاگ و...) به فرض http://example.com و محل درج کد نیست.

محمود

۱۰:۵۹ ۱۳۹۹/۰۱/۰۵

سلام.
ممنون از راهنمایتان و متشکرم. دوباره مزاحم می شوم.

محمود

۱۱:۵۵ ۱۳۹۹/۰۱/۰۴

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

برای باز شدن فایل PDF در صفحه جدید ساده ترین روش در نظر گرفتن پارامتر target برای تگ a با مقادیر blank است:

<a href="http//example.com/file/test.pdf" target="_blank">فایل PDF</a>

در صورتی که این روش کافی نبود می توانید از صفحات Pop-up استفاده کنید که آموزش آن در سایت وجود دارد، لطفا در گوگل عبارت "کار با پنجره Pop-up در جاوا اسکریپت + وبگو" را جستجو کنید.
دقت کنید نمایش دلخواه فایل PDF در صفحات وب عمدتا با امکانات مرورگر (فراخوانی مستقیم، استفاده از تگ embed و استفاده از تگ iframe) ممکن می شود و در حال حاضر به بحث سفارشی سازی شاید به دلیل کاربرد کمتر خیلی توجه نشده و تا آنجا که اطلاع داریم راه حل های کاربردی مناسب جدای از موارد بالا برای آن وجود ندارد.

Agahi90.iR

۱۶:۲۵ ۱۳۹۸/۱۱/۲۲

هو الرزاق
سلام و احترام
من برای یک تصویر برای لینک دار کردن این 2 کد رو بصورت جداگانه استفاده کردم ولی خطای 500 میده لینک باید بره به پروفایل کاربر

href="/profile.aspx?id=<%=userID %>"

href='<%= string.Format("/profile.aspx?id={0}",UserID) %>' target="_blank"

متاسفانه در حال حاضر در خصوص مشکلات زبان ASP.NET فعالیتی نداریم، همچنین مشکل به کدنویسی برنامه مرتبط است و صرفا با داشتن ساختار آدرس های URL قابل بررسی نیست.

امیر

۱۶:۳۰ ۱۳۹۸/۱۱/۲۰

یه منبع مقدماتی یعنی شروع در حد الفبا برای کد نویسی معرفی می کنین.
خیلی شوتم تو این داستان
رشته ام مهندسی مکانیک بوده و خیلی علاقمندم

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

وبدانه

۱۴:۴۵ ۱۳۹۸/۱۱/۲۰

آموزش هاتون عالیه
همرو دنبال می کنم
فقط ظاهر سایتتون قدیمیه
اگه میشه بروز کنید!
webdane.ir

PewDiePie

۲۳:۳۶ ۱۳۹۸/۱۱/۰۶

سلام چطور می تونم این کد رو

<h5 class="title">متن</h5>

یه لینک هم بهش اضافه کنم یعنی این که وقتی عکس رو می بینی طرف بتونه روی عکس کلیک کنه بره تو لینک آدرس جدید
ممنون

تگ h5 مربوط به سرتیترها در صفحه است و معمولا برای نمایش عکس کاربرد ندارد، به هر صورت اگر صرفا لینک به صورت HTML مد نظر باشد نمونه کد زیر کاربرد دارد:

<h5 class="title"><a href="#">متن</a></h5>

اما اگر به تگ h5 استایل CSS داده شده است شاید نیاز باشد از جاوا اسکریپت استفاده کنید (برای سئو این روش توصیه نمی شود):

<h5 class="title" onclick="goToURL('#');">متن</h5>
<script>
function goToURL(url){
    window.location.href = url;
}
</script>

برای دریافت پاسخ دقیقتر لطفا آدرس نمونه صفحه را جهت بررسی درج کنید.

محمد

۱۸:۰۸ ۱۳۹۸/۰۹/۲۹

سلام. از نظر سئو لینک با target باشه خوبه یا بدون اون؟

تاثیر عدم استفاده از پارامتر target بر سئو سایت اثبات نشده و بعید است اثر چندانی داشته باشد، اما بهتر است لینک های داخلی بدون این پارامتر در همان صفحه نمایش داده شوند و فقط برای لینک به خارج از سایت از target با مقادیر blank استفاده کنیم، همچنین گوگل توصیه می کند پارامتر rel با مقدار noopener را برای محافظت از خطرات احتمالی (عدم امکان دسترسی به آبجکت window.opener در جاوا اسکریپت) درج کنیم، مثال:

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

استادمجازی

۲۲:۱۲ ۱۳۹۸/۰۸/۱۳

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

دکتر منصوریان

۱۶:۵۰ ۱۳۹۷/۱۱/۱۱

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

می توانید با استفاده از CSS این کار را انجام دهید، مثال:

<style>
a {
	font-size: 18px;
}
</style>

کافی است اندازه مد نظر را در کد تغییر داده و آن را در قسمت ویرایش کدهای قالب سایت درج نمائید.

مهری

۱۲:۴۶ ۱۳۹۷/۱۱/۰۲

<a href="https://rakhshankala.com" title="این یک لینک است">کلیک کنید</a>

سلام
الانی این لینکی که من نوشتم درسته ؟
بعد این لینک رو باید در قسمت نظر دهی تو سایت های مختلف بزاریم ؟

در صورتی که سایتتان از گواهی SSL استفاده نمی کند به جای https از http استفاده کنید!، در قسمت نظردهی نیازی به درج کد HTML نیست، صرفا در فیلد مربوط به وب، آدرس URL را وارد کنید (همین کاری که الان در این یادداشت انجام داده اید و آدرس URL سایتتان را در فیلد وب وارد کرده اید!).

فرزاد

۰۷:۳۸ ۱۳۹۷/۰۷/۲۸

سلام و عرض ادب
ببخشید من یک سوال دارم میخواستم بپرسم از خدمتتون چجور میشه به طور مثال این لینک را :

https://tx3.travian.ir/hero.php?t=4&action=sell&abort=1539844878

تبدیل به این لینک کرد :

https://tx3.travian.ir/hero.php?t=4&action=bids&page=1&a=24157&z=d71

خیلی ممنون میشم اگر منو راهنمایی کنید تا بفهمم چجوری میتونم پیدا کنم تبدیل لینک اول به لینک دوم چگونه و با چه زبانی صورت میگرد
اگر برای اموزشش باید مبلغی هم پرداخت کنم مشکلی نیست پرداخت میکنم .
با تشکر و احترام

با استفاده از دستورات htaccess و URL Rewrite می توانید اینگونه موارد را انجام دهید، آموزش جداگانه ای در این خصوص در سایت وجود دارد، لطفا در وب عبارت "نحوه دوباره نویسی لینک + وبگو" را جستجو نمائید.

3sotweb

۱۵:۱۱ ۱۳۹۷/۰۶/۱۹

کارم راه افتاد دستتون درد ننکه

محمد

۰۱:۰۰ ۱۳۹۷/۰۴/۲۳

مطالب بسیار کاربردی بود .... خیلی استفاده نمودم برای چندمین بار البته ... بر خودم واجب دونستم یه تشکری کنم...
موفق باشید

queen

۱۴:۱۴ ۱۳۹۷/۰۳/۰۴

سلام ببخشید اگه بخواهیم لینک کنیم پایین صفحه بعدی چه کدی داره

منظورتان از "پایین صفحه بعدی" دقیقا مشخص نیست؟!، اگر منظور هدایت کاربر به قسمت خاصی از صفحه در هنگام ارجاع است، در این صورت ساده ترین روش این است که برای تگ آن قسمت یک id در نظر بگیرید و id را در انتهای آدرس URL به شکل نمونه زیر استفاده کنید.

<div id="footer"></div>

<a href="http://yoursite.com/page-2.php?#footer">Link</a>

صفحه 3 از 5

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