یکشنبه ۰۸ خرداد ۱۴۰۱

Sunday, May 29, 2022 GMT +4:30

نحوه ایجاد لینک در 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 فرم داد و به اصطلاح سفارشی نمود.
دسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
کاربرد تگ font و ویژگی های فونت در HTML
کاربرد تگ img و نمایش تصاویر در HTML
آشنایی با مفهوم Semantic در HTML
کار با تگ های ایجاد کننده لیست در HTML
دیدگاه
more ۶۶ دیدگاه برای این مطلب ارسال شده است.
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 استادمجازی بذارید برای فروش یا رایگان. به هر قیمتی که خودتون خواستید.
منتظرتونیم.
نویسنده: محمد
۱۸:۰۸ ۱۳۹۸/۰۹/۲۹
سلام. از نظر سئو لینک با target باشه خوبه یا بدون اون؟
پاسخ: 
تاثیر عدم استفاده از پارامتر target بر سئو سایت اثبات نشده و بعید است اثر چندانی داشته باشد، اما بهتر است لینک های داخلی بدون این پارامتر در همان صفحه نمایش داده شوند و فقط برای لینک به خارج از سایت از target با مقادیر blank استفاده کنیم، همچنین گوگل توصیه می کند پارامتر rel با مقدار noopener را برای محافظت از خطرات احتمالی (عدم امکان دسترسی به آبجکت window.opener در جاوا اسکریپت) درج کنیم، مثال:
<a href="https://webgoo.ir" title="این یک لینک است" target="_blank" rel="noopener">کلیک کنید</a>
نویسنده: 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>
برای دریافت پاسخ دقیقتر لطفا آدرس نمونه صفحه را جهت بررسی درج کنید.
نویسنده: وبدانه
۱۴:۴۵ ۱۳۹۸/۱۱/۲۰
آموزش هاتون عالیه
همرو دنبال می کنم
فقط ظاهر سایتتون قدیمیه
اگه میشه بروز کنید!
webdane.ir
نویسنده: امیر
۱۶:۳۰ ۱۳۹۸/۱۱/۲۰
یه منبع مقدماتی یعنی شروع در حد الفبا برای کد نویسی معرفی می کنین.
خیلی شوتم تو این داستان
رشته ام مهندسی مکانیک بوده و خیلی علاقمندم
پاسخ: 
آموزش های سایت در حد خیلی مقدماتی و مناسب شروع هستند، البته در وب نیز منابع خیلی زیادی چه به زبان فارسی چه انگلیسی وجود دارد که کافی است جستجو کنید.
نویسنده: Agahi90.iR
۱۶:۲۵ ۱۳۹۸/۱۱/۲۲
هو الرزاق
سلام و احترام
من برای یک تصویر برای لینک دار کردن این 2 کد رو بصورت جداگانه استفاده کردم ولی خطای 500 میده لینک باید بره به پروفایل کاربر
href="/profile.aspx?id=<%=userID %>"

href='<%= string.Format("/profile.aspx?id={0}",UserID) %>' target="_blank"
پاسخ: 
متاسفانه در حال حاضر در خصوص مشکلات زبان ASP.NET فعالیتی نداریم، همچنین مشکل به کدنویسی برنامه مرتبط است و صرفا با داشتن ساختار آدرس های URL قابل بررسی نیست.
نویسنده: محمود
۱۱:۵۵ ۱۳۹۹/۰۱/۰۴
سلام و عرض ادب.
وقتی روی فایل 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) ممکن می شود و در حال حاضر به بحث سفارشی سازی شاید به دلیل کاربرد کمتر خیلی توجه نشده و تا آنجا که اطلاع داریم راه حل های کاربردی مناسب جدای از موارد بالا برای آن وجود ندارد.
نویسنده: محمود
۱۰:۵۹ ۱۳۹۹/۰۱/۰۵
سلام.
ممنون از راهنمایتان و متشکرم. دوباره مزاحم می شوم.
نویسنده: حامد
۱۶:۳۷ ۱۳۹۹/۰۱/۲۴
با سلام،
سوال اول: من از فردی html code دریافت کردم و میخواهم آن را در سایت های کلیکی اضافه کنم. اما سوال من اینجاست که آیا باید html code را در بخشی که نوشته url وارد کنم؟
سوال دوم: آیا url با html code فرق دارد؟
پاسخ: 
کدهای HTML معمولا باید در جایی درج شوند که پردازش و در خروجی نهایی سایت (سورس کد همان صفحه ای که بازدیدکنندگان مشاهده می کنند) قابل چاپ باشند، به طور مثال قسمت اسکریپت های اختصاصی یا در کد قالب سایت، URL یعنی آدرس وب (سایت، وبلاگ و...) به فرض http://example.com و محل درج کد نیست.
نویسنده: محمودی
۱۵:۲۶ ۱۳۹۹/۰۲/۱۲
سلام چطوری میتونم برای سایت ثبت نام کدبورسی و ثبت نام ارز دیجیتال بک لینک بگیرم
پاسخ: 
برای گرفتن بک لینک راه متدوال تبادل لینک با سایت ها و وبلاگ های (ترجیحا مرتبط) دیگر است، سایت هایی هم هستند که بک لینک می فروشند (توصیه نمی شود).
نویسنده: ehsan hoseini sianaki
۲۳:۰۰ ۱۳۹۹/۰۲/۱۷
سلام خیلی عالی و کاربردی بود.
خسته نباشید.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- تمام دیدگاه ها خوانده شده و برای هر کاربر مدت زمان محدودی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.
- در مواردی که امکان رفع مشکل در زمان متداول میسر نباشد ممکن است نیاز به ارجاع و ثبت سفارش در بخش برنامه نویسی باشد که در اینصورت اطلاع رسانی خواهد شد.



 refresh
10 × 10
6 × 7
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
دنیز
در:
یک صفحه html طراحی کنید که در آن از event و effect های jquery استفاده شده باشد
۱۴۰۱/۰۳/۰۷

Zahra
در:
سلام وقت بخیر ببخشید من از روش شی گرا استفاده کردم ولی به کلمه ای که جلوی new مینویسم ارور میده میخوام به...
۱۴۰۱/۰۳/۰۶

سید هدایت محمدی
در:
با سلام از مطالب سایتتون و زحمات شما واقعا قدردانی میکنم که این همه وقت گران بهایتان رو برای کمک به این عزیزان میکنید ...
۱۴۰۱/۰۳/۰۵

پـــرتو
در:
هیچی درست شد ممنونم خیلی ممنونم ازتون من جای بدی گذاشته بودم ممنونم از شما :)
۱۴۰۱/۰۳/۰۴

پـــرتو
در:
سلام خسته نباشید شرمنده مزاحم میشم اون کد درست شد ولی برای این کد که داده بودین: اگر یادتون باشه برای فاصله بین ستون...
۱۴۰۱/۰۳/۰۴

پـــرتو
در:
سلام خسته نباشید ببخشید میشه راجع به این کدی که گذاشتین بیشتر توضیح بدین دقیقا باید همینو بزارم و دقیقا کجا باید بزارم اخه هر...
۱۴۰۱/۰۳/۰۲

محمدرضا
در:
خیلی ممنون که جواب دادید یه سوال دیگه هم داشتم البته شرمنده چطور می شه وقتی کاربری فرمی رو توی سایت پر می کنه...
۱۴۰۱/۰۳/۰۱

پرتو
در:
اوکی ممنونم از جوابتون
۱۴۰۱/۰۳/۰۱

محمدرضا
در:
با سلام و خسته نباشید ببخشید این لینک رو نگاه کنید: چطور میشه با استفاده از توضیحات گفته شده اطلاعات یک کارت رو...
۱۴۰۱/۰۳/۰۱

پـــرتو
در:
سلام خسته نباشید شرمنده مزاحم میشم برای فاصله دادن بین هر پست باید از چه کدی استفاده کرد؟ یعنی می خاستم اگه میشه بین پست...
۱۴۰۱/۰۲/۳۰

بهار
در:
سلام من تازه شروع کردم به یادگیری html مشکلم اینه که وقتی در تگ p متن فارسی می‌نویسم برای ویرایش خطاهای املایی پوینتر...
۱۴۰۱/۰۲/۲۶

مبینا
در:
کد خطای ۱۰۲۶۳۰ چی هست بعضی سایت های انلاین فیلم و سریال برام میاره ؟
۱۴۰۱/۰۲/۲۶

پرتو
در:
چشم حتما در اولین فرصت بهتون ایمیل میکنم
۱۴۰۱/۰۲/۱۹

پرتو
در:
سلام خسته نباشید شرمنده مزاحم میشم عه ببخشید قالبم یکی دو تا ایراد کوچیک داره که اگه میشه لطفا بهم بگید چطوری برطرفش کنم خب...
۱۴۰۱/۰۲/۱۸
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.