article

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

html-link

همان طور که اطلاع داریم، ایجاد لینک یا پیوند در صفحات وب امری عادی و مرسوم است، بدین معنی که مدیران وبلاگ ها و وبسایت های مختلف معمولا آدرس صفحات همکاران یا دوستان خود را در قسمتی خاص به نحوی درج می کنند که اگر بر روی آنها کلیک کنیم، وارد آدرس مورد نظر خواهیم شد، این حالت اغلب به صورت سیستماتیک (بدون کدنویسی) انجام می شود، یعنی کافی است آدرس صفحه (سایت، وبلاگ و...) را در قسمت درج لینک به همراه سایر مشخصات وارد کنیم تا آن لینک به لیست پیوندهای ما اضافه شود، اما باید بدانیم هنگامی که صفحه وب خود را مشاهده می کنیم، خروجی نهایی به صورت کدهای 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 فرم داد و به اصطلاح سفارشی نمود.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کاربرد تگ img و نمایش تصاویر در HTML
» آشنایی با HTML، زبان پایه کدنویسی وب
» لایه بندی در HTML با تگ div و span
» فرمت بندی و کار با متن و پاراگراف در HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
commentنظرات (۳۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 3sotweb
زمان: ۱۵:۱۱:۱۹ - تاریخ: ۱۳۹۷/۰۶/۱۹
کارم راه افتاد دستتون درد ننکه
نویسنده: فرزاد
زمان: ۰۷:۳۸:۰۵ - تاریخ: ۱۳۹۷/۰۷/۲۸
سلام و عرض ادب
ببخشید من یک سوال دارم میخواستم بپرسم از خدمتتون چجور میشه به طور مثال این لینک را :
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 می توانید اینگونه موارد را انجام دهید، آموزش جداگانه ای در این خصوص در سایت وجود دارد، لطفا در وب عبارت "نحوه دوباره نویسی لینک + وبگو" را جستجو نمائید.
نویسنده: مهری
زمان: ۱۲:۴۶:۰۹ - تاریخ: ۱۳۹۷/۱۱/۰۲
<a href="https://rakhshankala.com" title="این یک لینک است">کلیک کنید</a>
سلام
الانی این لینکی که من نوشتم درسته ؟
بعد این لینک رو باید در قسمت نظر دهی تو سایت های مختلف بزاریم ؟
پاسخ: 
در صورتی که سایتتان از گواهی SSL استفاده نمی کند به جای https از http استفاده کنید!، در قسمت نظردهی نیازی به درج کد HTML نیست، صرفا در فیلد مربوط به وب، آدرس URL را وارد کنید (همین کاری که الان در این یادداشت انجام داده اید و آدرس URL سایتتان را در فیلد وب وارد کرده اید!).
نویسنده: دکتر منصوریان
زمان: ۱۶:۵۰:۳۳ - تاریخ: ۱۳۹۷/۱۱/۱۱
سلام عزیز خسته نباشید..
اگر بخوام سایز لینکمو بزرگتر کنم کدش چیه؟؟؟؟
پاسخ: 
می توانید با استفاده از CSS این کار را انجام دهید، مثال:
<style>
a {
font-size: 18px;
}
</style>
کافی است اندازه مد نظر را در کد تغییر داده و آن را در قسمت ویرایش کدهای قالب سایت درج نمائید.
نویسنده: استادمجازی
زمان: ۲۲:۱۲:۲۳ - تاریخ: ۱۳۹۸/۰۸/۱۳
سلام.
از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی بذارید برای فروش یا رایگان. به هر قیمتی که خودتون خواستید.
منتظرتونیم.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




5 × 3
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form adel
در:
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این...
۲۱:۲۵:۴۰ ۱۳۹۸/۰۸/۲۴

form یه سوال کننده
در:
سلام. ببخشید چطور میشه ایمیل هایی رو میفرستن که ریپلای زدن رو ایمیلی که از طرف ما نبوده بیشتر تو تبلیغات دیدم امیدوارم منظورم و...
۰۳:۲۳:۰۸ ۱۳۹۸/۰۸/۲۴

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

form استادمجازی
در:
سلام. از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی ...
۲۲:۱۲:۲۳ ۱۳۹۸/۰۸/۱۳

form mohamad
در:
سلام و خسته نباشید ، توی فرمی که ساختم چند تا drop down دارم که میخوام با php براشون شرط بذارم به طوری...
۱۳:۵۱:۳۴ ۱۳۹۸/۰۸/۱۰

form رضا
در:
خسته نباشید این جلسه آخر html بود؟؟؟؟
۰۱:۱۵:۰۷ ۱۳۹۸/۰۸/۱۰

form امیرمحمد
در:
سلام و خسته نباشید استاد بنده میخوام بین دو کد زیر که مشخص کردم رو به دست بیارم
// ---------------------set سلام...
۱۹:۳۰:۵۳ ۱۳۹۸/۰۸/۰۸

form حجت
در:
خیلی ممنونم از لطف شما. اوکی شد.
۱۰:۲۸:۳۵ ۱۳۹۸/۰۸/۰۶

form میلاد
در:
آشنایی نسبی با css, php و ajax دارم و نمیخام از library های موجود در نت استفاده کنم. خواستم با همین متد که انصافا روان...
۲۳:۲۲:۵۵ ۱۳۹۸/۰۸/۰۵

form عرفان
در:
با سلام. مدتی بود که بدلایل مشکلات زیاد نتونستم به وبلاگم رسیدگی کنم ولی وقتی برگشتم میبینم که هزاران بازدید داشتم و همشونم به زبان...
۲۲:۴۹:۴۴ ۱۳۹۸/۰۸/۰۵

form raha
در:
سلام وقتتون بخیر ببخشید علامت @ در کل به چه معناست ممنون میشم پاسخ دهید
۲۰:۱۲:۵۹ ۱۳۹۸/۰۸/۰۵

form میلاد
در:
باسلام تشکر از مطالب روان و پرکاربردتان. در خصوص آموزش مذکور، نحوه و ترفند نمایش محور عمودی در سمت چپ نمودار (مشابه...
۰۲:۳۸:۴۰ ۱۳۹۸/۰۸/۰۵