سه شنبه ۲۸ دی ۱۴۰۰

Tuesday, January 18, 2022 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 مطالب بیشتر:
آشنایی با HTML، زبان پایه کدنویسی وب
تگ های اصلی و کلیدی HTML
ایجاد جدول با تگ table در HTML
آشنایی با مفهوم Semantic در HTML
کاربرد تگ font و ویژگی های فونت در HTML
دیدگاه
more ۶۳ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: saeed
۱۳:۵۳ ۱۴۰۰/۰۷/۲۵
ممنون از مطالب خوبتون.😊
نویسنده: saeed
۱۳:۲۳ ۱۴۰۰/۰۸/۰۳
ممنون از سایت عالیتون.
نویسنده: بابایی
۱۱:۴۴ ۱۴۰۰/۱۰/۱۲
سلام وقت بخیر
اصول%e2%80%8c-آکوستیک-/
این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه آدرس فقط به صورت نوشته نمایش داده بشه. میشه راهنمایی کنید چیکار باید انجام بدم ؟
پاسخ: 
برای تغییر آدرس باید به دو موضوع توجه کنید، مورد اول مرحله ساخت آدرس URL است که می توانید با نمونه کد زیر کاراکترهای مد نظر را با مقدار خالی جایگزین کنید:
$url = str_replace("%e2%80%8c", "", $url);
اما مورد اصلی بخش دریافت و درک آدرس URL است که باید فاصله حذف شده را در این قسمت هم برای سیستم قابل درک کنیم که بتواند مطلب متناظر با آدرس درخواستی را از دیتابیس به درستی استخراج کند و خطای 404 نداشته باشیم، اعمال تغییر در این قسمت نیازمند بررسی دقیق سورس کدها است.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده می شود.
- کدها و اسکریپت های طولانی را در یک صفحه وب آنلاین قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- ممکن است پاسخ سوالتان نیاز به کدنویسی داشته باشد، در این موارد مدت زمان بیشتری برای پاسخگویی مورد نیاز است.
- تمام دیدگاه ها خوانده شده و زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا تا هنگام انتشار دیدگاه شکیبا باشید.



 refresh
10 × 10
1 × 5
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Bahar
در:
سلام ،کدام لیست ترتیب قرارگیری انها اهمیت نداره؟ ازبین اینها؟
۱۴۰۰/۱۰/۲۷

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

Fatemeh
در:
سلام چه طوری داخل این کادرهای که ایجاد میشه با این کد متن txt1, txt2 ,... نوشته شود؟
۱۴۰۰/۱۰/۲۵

Fatemeh
در:
سلام وقت بخیر چطوری میتونم موارد زیر رو انجام بدم؟! میشه کمک کنید ممنون! پوسته تارنمای فروشگاه آنالین لوازم خانگی را به صورت زیر...
۱۴۰۰/۱۰/۲۵

سپیده
در:
سلام مجدد لینک صفحه خدمت شما ممنون میشم راهنمایی کنید کدی که توی پیام قبلی ارسال کردین رو کجا باید بگذارم؟
۱۴۰۰/۱۰/۲۳

سپیده
در:
سلام و درود سایتم وردپرس هست و با المنتور طراحی کردم توی صفحه ویرایش حساب کاربران، میخوام فیلد تغییر آدرس ایمیل رو حذف کنم....
۱۴۰۰/۱۰/۲۲

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

سپهر
در:
سلام استاد ضمن تشکر از آموزش خوب شما عرض شود بنده دارم یک ربات چت ساده می‌سازم که در بانک اطلاعات خود دو ستون...
۱۴۰۰/۱۰/۲۱

Fatemeh
در:
سلام روز بخیر این کد مشکلش چیه؟!
۱۴۰۰/۱۰/۱۹

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

مهلا
در:
من یه تکه کدی نوشتم با زبان php که 9 عکس دادم با سه سطر و ستون می‌خوام در خروجی این عکسها بطور تصادفی...
۱۴۰۰/۱۰/۱۵

امیرحسین
در:
سلام وقت بخیر بنده یه سوال خیلی مهمی داشتم که اگر کمک کنید و راهکاری به من بدید سوالم اینه که من دارم یه ربات...
۱۴۰۰/۱۰/۱۴

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

Fatemeh
در:
وقت بخیر متاسفانه من هر کدی مینویسم یه اشکالی داره این کد مشکلش چیه؟🤦🏻‍♀️
۱۴۰۰/۱۰/۱۲

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

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

Fatemeh
در:
سلام وقت بخیر خسته نباشید این تیکه کد با دستور if چه مشکلی داره!؟
۱۴۰۰/۱۰/۱۲

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

elahe
در:
سلام وقتتون بخیر من در جدول پایگاه داده کتابخانه 4 تا ستون دارم که میخوام هر فیلد رو در یک لیبل بریزم در واقعه یک...
۱۴۰۰/۱۰/۱۲

m.b
در:
سلام مجدد تشکر بابت راهنمایی من یک مشکل دیگه برام بوجود آمد و اون اینکه بعد از ارسال اطلاعت به صفحه questions.php بر...
۱۴۰۰/۱۰/۱۱

m.b
در:
سلام من یک فرم طراحی کردم جهت ارسال سوال با صفحه questions.php با متد post به صفحه dbquestions.php ارسال میشود. این نمونه کد های...
۱۴۰۰/۱۰/۱۱

m.b
در:
با سلام ضمن تشکر از وب سایت خوبتان من مطابق کدهای شما عمل کردم و تمامی کدها رو کپی کردم و...
۱۴۰۰/۱۰/۱۱

fateme
در:
سلام ممنون از سایت خوبتون من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
۱۴۰۰/۱۰/۱۱

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

Fatemeh
در:
ممنون از پاسخگویی مشکل این یکی کد چیه ؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر مشکل این کد چیه اجرا نمیشه؟
۱۴۰۰/۱۰/۱۱

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

zahra
در:
سلام وقتتون بخیر باشه من میخام از 1 تا 30 روز و برام چاپ کنه یعنی اگر ماه 31 روز بود 1 تا 31 را...
۱۴۰۰/۱۰/۰۸

پوریا
در:
سلام url سایت که گفتم بعد از نصب پلاگین دچار مشکل شد:
۱۴۰۰/۱۰/۰۵

پوریا
در:
سلام وقتتون بخیر اساتید محترم من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش...
۱۴۰۰/۱۰/۰۴

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