چهارشنبه ۰۹ اسفند ۱۴۰۲

Wednesday, February 28, 2024 GMT +3: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 مطالب بیشتر:
کاربرد تگ font و ویژگی های فونت در HTML
لایه بندی در HTML با تگ div و span
کار با تگ فرم (form) در HTML
فرمت بندی و کار با متن و پاراگراف در HTML
کار با تگ های ایجاد کننده لیست در HTML
دیدگاه
more ۷۳ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
۱۳:۵۳ ۱۴۰۰/۰۷/۲۵
ممنون از مطالب خوبتون.😊
۱۳:۲۳ ۱۴۰۰/۰۸/۰۳
ممنون از سایت عالیتون.
بابایی
۱۱:۴۴ ۱۴۰۰/۱۰/۱۲
سلام وقت بخیر
اصول%e2%80%8c-آکوستیک-/
این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه آدرس فقط به صورت نوشته نمایش داده بشه. میشه راهنمایی کنید چیکار باید انجام بدم ؟
برای تغییر آدرس باید به دو موضوع توجه کنید، مورد اول مرحله ساخت آدرس URL است که می توانید با نمونه کد زیر کاراکترهای مد نظر را با مقدار خالی جایگزین کنید:
$url = str_replace("%e2%80%8c", "", $url);
اما مورد اصلی بخش دریافت و درک آدرس URL است که باید فاصله حذف شده را در این قسمت هم برای سیستم قابل درک کنیم که بتواند مطلب متناظر با آدرس درخواستی را از دیتابیس به درستی استخراج کند و خطای 404 نداشته باشیم، اعمال تغییر در این قسمت نیازمند بررسی دقیق سورس کدها است.
sobhan
۱۳:۲۸ ۱۴۰۰/۱۱/۲۴
با سلام توی بعضی از وب سایت ها به یک المان قابلیتی میدن که میره یک قسمت دیگه از صفحه، مثلا یک صفحه برای سفارش خدمات داریم که فرم سفارش آخر صفحه هست، ولی بالای صفحه یه دکمه داریم، میخام زمانی که روی دکمه زده میشه صفحه اتوماتیک اسکرول بشه و بیاد پایین تا به فرم برسه این کارو قبلا دیدم با لینک دادن انجام میشه، میشه یه توضیح بدید ؟
در ساده ترین شکل ممکن برای اسکرول به یک عنصر خاص در صفحات وب می توانیم به آن عنصر ID یکتا اختصاص دهیم و آی دی را در انتهای آدرس URL تگ a به صورت نمونه زیر فراخوانی کنیم:
<div id="scroll-to"></div>
<a href="http://example.com/index.html#scroll-to">Click</div>
این حالت اسکرول ساده (بدون افکت) ایجاد می کند، برای ایجاد حالت اسکرول نرم آموزش جداگانه ای در سایت مرتبط با این موضوع (اسکرول به بالای صفحه) منتشر شده که مبنای آن یکسان و قابل الگوبرداری است، این سبک اسکرول مبتنی بر JavaScript و jQuery است که برای دسترسی به این مطلب می توانید عبارت "scroll to" را در قسمت جستجوی سایت وارد کنید.
زیبا
۱۲:۳۸ ۱۴۰۰/۱۱/۲۵
سلام لینک که در href مینویسیم از کجا میاد. منظور تو صفحه اول سایت محصولات نوشتیم که روی محصول مورد نظر مثلا لوازم ارایشی کلیک میکنم بره محصولات رو نشون بده . تو تگ href چطور ادرس رو بنویسم . ادرس http از کجا میاد
این آدرس همان متنی است که در نوار بالایی مرورگر (نوار آدرس یا Address Bar) مشاهده می کنید و برای هر صفحه بستگی دارد که برنامه مدیریت وبسایتتان (وردپرس، جوملا و...) به چی شکلی آن را تولید کرده باشد، به طور مثال آدرس URL می تواند به شکل نمونه زیر باشد:
http://example.com/shop/product.html
یا به صورت به فرض:
http://example.com/خرید/محصول
در صورتی که با نحوه ساخت یا استفاده از آدرس های URL ایجاد شده توسط برنامه وبسایتتان آشنا نیستید می توانید به راهنما یا انجمن های مرتبط با آن برنامه مراجعه کنید.
۱۲:۵۲ ۱۴۰۱/۰۱/۱۱
یه نوع لینک دیدم که اینطوری گذاشته میشه . این نوع لینک را با انکر تکست چطور باید بذاریم
[url][/url]
این نوع درج لینک به BBCode (Bulletin Board Code) معروف هستند، در این ساز و کار لینک را به صورت نمونه زیر در محتوا درج و ذخیره می کنیم:
[url=http://example.com]Link Text[/url]
اما زمان چاپ خروجی و نمایش محتوا الگوی بالا را به صورت تگ a تجزیه می کنیم:
<?php
$str = '[url=http://example.com]Link Text[/url]';
$pattern = '/\[url=([^\]]*)\]([^\[]*)\[\/url\]/mui';
while(preg_match($pattern, $str)){
$str = preg_replace($pattern, '<a href="$1">$2</a>', $str);
}
echo $str;
?>
امید سلمانی
۱۴:۰۰ ۱۴۰۱/۰۵/۰۲
برای لینک دار کردن عکس از چه خروجی در html استفاده کنیم برای ذخیره سازی من ذخیره می کنم ولی عکس html است من می خوام خوده عکس باشه
انتهای این آموزش در خصوص نحوه لینک دار کردن تصویر است، در مورد قسمت آخر سوال اگر کمی بیشتر منظورتان را توضیح دهید بهتر می شود راهنمایی کرد.
۱۵:۱۷ ۱۴۰۱/۰۵/۰۲
سلام ممنون از آموزشتون
اگر بخوایم درون کامنت سایت های خارجی هم لغت لینک دار وارد کنیم با این کدها میشه؟
بله تفاوتی نمی کند، منتها اغلب سایت ها به دلیل جنبه تبلیغاتی امکان درج لینک به صورت HTML را ندارند و احتمالا آدرس صرفا به صورت متن ساده قابل نمایش خواهد بود.
نور
۱۳:۵۰ ۱۴۰۱/۰۶/۱۳
سلام.
ممنون از آموزش خوبتون
چطور میتونم متن لینکی که قرار دادم رو رنگی کنم؟ کد رنگ رو کجا باید بذارم؟
لطفا عبارت "استایل لینک" را در قسمت جستجوی سایت وارد کنید، آموزش جداگانه ای در خصوص نحوه تعیین رنگ متن لینک منتشر کرده ایم.
پـــرتو
۱۶:۱۳ ۱۴۰۱/۰۷/۱۳
سلام خسته نباشید من بهتون یه ایمیل زدم لطفا چک کنید جواب سوال دومم رو گرفتم که گفتم اگر میشه قالب رو در وبلاگی ثبت کنید جواب این سوالم رو گرفتم فقط جواب سوال اولمو نگرفتم هنوز ممنون میشم جواب بدین
پیام شما برای بررسی ارجاع داده شد و طی روزهای جاری پاسخ به ایمیلتان ارسال می شود.
mahdi
۲۱:۵۱ ۱۴۰۲/۰۵/۰۲
سلام یه سوال داشتم اگه خواستیم توی همون صفحه مثلا بالای صفحه عنوان رو بنویسیم و وقتی روش بزنیم مستقیم اسکرول شه رو توضیحات در مورد اون عنوان چطور باید کد رو بنویسیم؟
برای اسکرول به یک قسمت خاص در حالت ساده می توانیم از آی دی استفاده کنیم:
<div id="block"></div>
<a href="#block">رفتن به بلاک</a>
در حالت پیشرفته و اسکرول نرم باید از جاوا اسکریپت یا جی کوئری استفاده کنیم، مثال:
https://www.lucaspaganini.com/academy/native-smooth-scroll-with-pure-css-and-js
علی
۰۹:۵۷ ۱۴۰۲/۰۶/۰۷
سلام و با تشکر از راهنمایی شما
بنده یک وب سرویس ارسال پیامک دارم که از طریق آن برای کابرانم پیامک ارسال می کنم. کد بنده .net هستش. حالا نیاز پیدا کردم که متنی که برای کاربرام از طریق وب سرویس پیامک می کنم قسمتی از آن رو لینک دار کنم چطور این کار رو توی کد انجام بدم؟؟
ممنون میشم راهنمایی کنید.
تا جایی که اطلاع داریم پیامک از پردازش کدهای HTML پشتیبانی نمی کند ااما در رویه متداول اگر آدرس صفحه یا سایت را با درج پروتکل مربوطه (http, https و...) و به صورت کامل قرار دهید در دستگاه های تلفن همراه اغلب به شکل لینک شده نمایش داده می شوند.
۲۰:۰۳ ۱۴۰۲/۰۹/۲۴
من لینک میسازم برای سایتم ولی خودش تغییر میده یه جور دیگه میشه
لینک ساده خوبه ممنون
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
9 × 5
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پـــرتو
سلام خوبید؟ ببخشید مزاحم میشم یه سوال کامپیوتری داشتم اونم اینکه این خطای dll یعنی چی و چطوری رفع میشه ؟ بیشتر توی نرم افزارها...
۱۴۰۲/۱۲/۰۵

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

سعید
با تشکر از شما درست شد فقط یه مشکلی دارم میخوام شناسه اون مطلب رو اینطوری براش فراخوانی کنم ولی شناسه رو دریافت...
۱۴۰۲/۱۲/۰۲

سعید
با تشکر از شما خیلی خوب بود. فقط یه مشکلی داره، اگه لینک دانلود داخل عکس باشه کار نمی کنه و بازم لینک رو...
۱۴۰۲/۱۲/۰۲

سعید
با سلام و خسته نباشید من یه تابع با php میخوام که لینک های موجود در یک متن رو برام شناسایی کنه بعد به...
۱۴۰۲/۱۲/۰۱

روح اله
سلام چرا وبلاگ من در نتایج یاهو میاید ولی در نتایج گوگل نمیاید؟
۱۴۰۲/۱۱/۲۶

جواد
سلام خسته نباشید. من میخواستم تعداد نامحدودی عدد رو با هم جمع و تفریق کنم از کدوم حلقه باید در public function کلاسم استفاذه...
۱۴۰۲/۱۱/۲۵

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

پـــرتو
سلام خوبید؟ ممنون از راهنماییتون من ادرس وبلاگ رو براتون ایمیل کردم واقعا ممنونم مچکرم مرسی
۱۴۰۲/۱۱/۱۸

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

فاطمه
سلام وقت بخیر وب بازدید کننده داره ولی گویا آدرس وب برای برخی از افراد باز نمیشه چه کاری میتونم انجام بدم تا...
۱۴۰۲/۱۱/۰۹

سیاوش آهی
سلام وقت بخیر استاد، من در سایتم ویدیوهای اموزشی دارم و میخوام با دستورات htaccess امکان دانلود آن را غیرفعال کنم ولی در مرورگر (سایت)...
۱۴۰۲/۱۱/۰۷

پـــرتو
خب الان این تگ رو کجا بزارم؟ و تاثیر سراسری یعنی چی؟؟ در مورد هارد هم منظورتون از چندنمونه فایل در دسترس باشد یعنی چی؟؟؟...
۱۴۰۲/۱۱/۰۵

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

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

مریم
سلام. من از قالب های سایت پیچک که استفاده میکنم مطالب رو نشون نمیده و به جاش مینویسه archive title. اما از قالب های پیش...
۱۴۰۲/۱۰/۲۶

بهاره هوشمندی
توی اکشن callback فقط کوئری ها هستند و من دستور die رو جای مناسب گذاشتم چون جای دیگه نمیشه گذاشت! این کوئری ها هستند که...
۱۴۰۲/۱۰/۲۳

بهاره هوشمندی
با تشکر از شما استاد بزرگوار اینو تست کردم لینک رو به درستی شناسایی نمی کنه و ارور میده! وگرنه همون مسیر خودش رو...
۱۴۰۲/۱۰/۲۳

بهاره هوشمندی
با سلام استاد با sleep نمیشه متن به کاربر نشون داد فقط میشه تاخیر ایجاد کرد واسه همین die بهتره ولی من نمی دونم...
۱۴۰۲/۱۰/۲۳

بهاره هوشمندی
با سلام و خسته نباشید واسه ترجمه از این تابع استفاده میکنم
۱۴۰۲/۱۰/۲۲

بهاره هوشمندی
با سلام متاسفانه هرکاری کردم نشد! یه هفته ست درگیرش هستم انگار هیچ راهی نداره البته احتمالا به دستور die باشه ولی اون...
۱۴۰۲/۱۰/۲۱

بهاره هوشمندی
با سلام و خسته نباشید وقتی میخوام با گوگل ترانسلیت متنی رو با php ترجمه کنم عکس ها رو خراب می کنه چون توی...
۱۴۰۲/۱۰/۲۱

بهاره هوشمندی
من تونستم یه جوری کدها رو توی قالب بذارم ولی چون کال بک اصلا فایل ویو نداره و یک چک کنه است هیچ جوری پیام...
۱۴۰۲/۱۰/۱۹

بهاره هوشمندی
با تشکر از شما من فقط اکشنش رو دارم که اکشن به تنهایی کار نمی کنه! :( الان این کد رو توی قالب...
۱۴۰۲/۱۰/۱۹

بهاره هوشمندی
با سلام و با تشکر از شما استاد خیلی خوب بود من توی فریمورک yii صفحه callback ندارم کاربر زمان زیادی برای اکشن...
۱۴۰۲/۱۰/۱۸

بهاره هوشمندی
با سلام لینک رو نگاه کردم خوب بود ولی من میخوام برای کاربر بنویسم که تا ۱۰ ثانیه صبر کنه که کاربر صفحه رو...
۱۴۰۲/۱۰/۱۸

بهاره هوشمندی
با سلام و خسته نباشید استاد لود کردن کوئری های سایت من واسه یه صفحه زیاده و ۱۰ تا ۱۵ ثانیه طول میکشه که...
۱۴۰۲/۱۰/۱۷

سجاد مهدوی
با سلام ببخشید می تونید توی سایت نوبیتکس ثبت نام کنید و با api هایی که دادن یه کد بنویسید که اعلام موجودی رو...
۱۴۰۲/۱۰/۱۰
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.