امروز پنجشنبه ۱۴۰۰/۰۱/۲۶

2021/04/15 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 مطالب بیشتر:
» کار با تگ های ایجاد کننده لیست در HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» لایه بندی در HTML با تگ div و span
» فرمت بندی و کار با متن و پاراگراف در HTML
» آشنایی با HTML، زبان پایه کدنویسی وب
commentنظرات (۵۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محمد سجاد
۱۰:۲۶ ۱۳۹۹/۰۳/۱۴
سلام . بنده مشغول طراحی یک سایت ام و یک مشکلی دارم. قصد دارم در صفحه اول ورود ۳ عدد تصویر به شکل:
یک عدد تصویر لوگو و نام یوتیوب همراه با لینک پیجم
یک عدد تصویر لوگو و نام اینستاگرام همراه با لینک پیجم
یک عدد تصویر لوگو و نام تلگرام همراه با لینک پیجم
به نمایش در بیاد و با کلیک مخاطب بر روی لوگو یا نام هر کدام در tap جداگانه لینک شده و وارد آن بخش شود
اگر راهنمایی ام کنید ممنون میشم
با تشکر از سایت خوبتون
پاسخ: 
دقیقا متوجه نشدیم در بخش طراحی صفحه اول مشکل دارید یا پیاده سازی کل ساختار سایت؟ در هر صورت برای انجام این کار می توانید یک صفحه ایندکس (صفحه اصلی سایت) اختصاصی معمولا با نام index.php در ریشه (فولدر www یا public_html) طراحی و سه بلاک div را در یک راستا کنار هم یا به نحو دلخواه چینش کنید (نیازمند آشنایی با HTML و CSS)، یک CMS (به فرض وردپرس) هم برای مدیریت سایت بر روی هاستتان نصب داشته باشید و قسمت های مختلف را در آن آماده سازی و نهایتا لینک هر قسمت را به صفحه اصلی مرتبط نمائید، سوالتان از این نظر کلی است و باید مشخص کنید کدام قسمت دارای ابهام است که بهتر راهنمایی کنیم.
نویسنده: علی
۰۹:۳۰ ۱۳۹۹/۰۴/۱۴
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه
خیلی ممنون میشم اگه جواب بدید
پاسخ: 
در وب نمی توانیم صد در صد از دانلود تصاویر جلوگیری کنیم، در واقع هر چیزی که به صورت عمومی در فضای وب منتشر می شود قابل ذخیره سازی است، منتها با استفاده از CSS می توانیم این کار را حداقل برای اغلب کاربران دشوار کنیم، مثال:
<div style="width:100px; height:50px; background:url(image/your-img.jpg) no-repeat; border:1px dotted #666;">
<a href="https://webgoo.ir" style="display:block; width:100px; height:50px;" title="Webgoo"></a>
</div>
نویسنده: محمد معین محب
۱۲:۴۰ ۱۳۹۹/۰۵/۰۸
سلام
میشه برای من یک اچ تی ام ال با
https://www.skyroom.online/ch/ahahzid/shahzid
بسازید . ممنون میشم
پاسخ: 
منظور سوالتان مشخص نیست! لطفا دقیق و با جزئیات مشکل را توضیح دهید تا در صورت امکان راهنمایی انجام شود.
نویسنده: elias
۱۲:۳۴ ۱۳۹۹/۰۵/۱۴
خسته نباشید کاری که گفته بودید انجام دادم ولی رفرش می کنم همه لینک ها بر می گرده مثل اول می شه
پاسخ: 
لطفا سوالتان را در پستی که قبلا در آن یادداشت ارسال کرده اید مطرح کنید، یادداشت قبلی به نام شما پیدا نشد؟!
نویسنده: Saeid Azari
۱۹:۳۸ ۱۳۹۹/۰۷/۱۳
سلام ببخشید اگه امکانش هست سوال منو جواب بدید یکم گیج شدم...من یک کد html دارم که باید یک سایت درست کنم و ان را در سایتم قرار بدم من وبلاگ درست کردم تا کدمو توش بزارم اما نشد میخواستم بدونم که تو سایتا میشه کد HTML رو قرار داد؟؟
پاسخ: 
صفحات وب (وبلاگ، سایت و...) مبتنی بر کدهای HTML هستند، لذا هم در وبلاگ و هم در سایت می توانید این کار را انجام دهید، در وبلاگ ها معمولا نباید به صورت مستقیم کد را در قسمت ارسال مطلب وارد کنید چون به صورت متن ساده پردازش می شود، کد HTML یا باید در قسمت ویرایش قالب وبلاگ درج شود یا در حالت نمایش به صورت سورس HTML در قسمت ارسال مطلب، در مورد سایت ها کار ساده است کافی است فایلتان را به فولدر www یا public_html پنل سایت منتقل کنید.
نویسنده: Mori
۱۸:۵۵ ۱۳۹۹/۰۸/۰۷
سلام. چگونه باید در لیست برای هر کدام از اعضا به صورت جداگانه لینک بگذاریم؟؟
پاسخ: 
سوال مبهم است، لیست اعضا از چه منبعی (کدهای HTML، برنامه نویسی PHP یا اطلاعات دیتابیس) دریافت می شود؟ خروجی مد نظر باید به چه شکلی باشد؟
در حالت HTML ساختار زیر برای ایجاد لیست لینک شده به کار می رود:
<ul>
<li><a href='#'>User1</a></li>
<li><a href='#'>User2</a></li>
<li><a href='#'>User3</a></li>
</ul>
برای حالت های دیگر بستگی دارد چه ورودی و خروجی مد نظرتان باشد.
نویسنده: دوست خوب
۱۳:۱۵ ۱۳۹۹/۰۹/۰۱
اگر بخواهیم برای رفتن به مرورگر و باز کردن یک صفحه لینک دهیم؟
پاسخ: 
اگر منظورتان ایجاد Shortcut در ویندوز است کافی است در Desktop کلیک راست کرده از منوی New گزینه Shortcut را انتخاب کنیم، در این مرحله پنجره ای برای انتخاب یا درج مقصد با متن "Type the location of the item" نمایش داده می شود که باید آدرس URL صفحه مد نظرمان را (شروع آدرس با http یا https) درج کنیم، در نهایت با زدن دکمه Next یک نام برای میانبر انتخاب و آن را ذخیره می کنیم.
نویسنده: حسین
۰۱:۱۵ ۱۳۹۹/۰۹/۲۹
سلام. مرسی از سایت خوبتون. برا ما مدرسه ای ها که تازه داریم یاد میگیریم عالیه مطالبتون.
نویسنده: Mohamad
۱۶:۰۱ ۱۳۹۹/۱۱/۱۷
سلام من میخام برای سایت خودم لینک بسازم که با کلیک کردن روی ان وارد سایت من شوند چه طوری این کار را کنم
پاسخ: 
آموزش دقیقا در همین رابطه است، اگر فرم دیگری مد نظرتان است لطفا با جزئیات بیشتری سوالتان را مطرح کنید تا امکان راهنمایی وجود داشته باشد.
نویسنده: متین
۱۵:۴۲ ۱۴۰۰/۰۱/۱۶
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
پاسخ: 
برای دسترسی آنلاین به صفحات وب باید آنها را بر روی سرور قرار دهیم و با داشتن آدرس اینترنتی (دامنه یا Domain) می توانیم سایت را در مرورگر مشاهده کنیم، سرور را می توانیم از شرکت های ارائه دهنده خدمات میزبانی وب (در اصطلاح هاستینگ) خریداری کنیم، آدرس دامنه را (به فرض example.com) هم بهتر است از طریق این شرکت ها ثبت کنیم، برای دامنه های با پسوند ir ابتدا باید در سایت nic.ir به عنوان مرکز رسمی دامنه های کشوری عضو شده باشیم، ثبت و تمدید دامنه های ir هم از طریق شرکت های نمایندگی و هم خود نیک ممکن است اما معمولا از طریق نمایندگی ها هزینه کمتری خواهد داشت.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





9 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

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

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز سال نو رو تبریک میگم بهتون ، امیدوارم که خودتون و خانوادتون همیشه سالم و سلامت باشید و امسال پر از...
۱۳۹۹/۱۲/۳۰

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

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

form احمد
در:
با سلام خسته نباشید ببخشید قبلا یه سری دستورات جی کوری رو از خودتون گرفتم وقتی فیلدهای فرمم تکمیل شده است توسط هدر بره به...
۱۳۹۹/۱۲/۲۸

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.