آموزش برنامه نویسی و مهارتهای وب

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

Sunday, May 29, 2022 GMT +4:30

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

همان طور که اطلاع داریم، ایجاد لینک یا پیوند در صفحات وب امری عادی و مرسوم است، بدین معنی که مدیران وبلاگ ها و وبسایت های مختلف معمولا آدرس صفحات همکاران یا دوستان خود را در قسمتی خاص به نحوی درج می کنند که اگر بر روی آنها کلیک کنیم، وارد آدرس مورد نظر خواهیم شد، این حالت اغلب به صورت سیستماتیک (بدون کدنویسی) انجام می شود، یعنی کافی است آدرس صفحه (سایت، وبلاگ و...) را در قسمت درج لینک به همراه سایر مشخصات وارد کنیم تا آن لینک به لیست پیوندهای ما اضافه شود، اما باید بدانیم هنگامی که صفحه وب خود را مشاهده می کنیم، خروجی نهایی به صورت کدهای 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

برچسب ها: HTML

قبلی »

« بعدی

مطالب بیشتر:
فرمت بندی و کار با متن و پاراگراف در HTML
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
تگ های اصلی و کلیدی HTML
کار با تگ فرم (form) در HTML
ایجاد جدول با تگ table در HTML

دیدگاه

۶۶ دیدگاه برای این مطلب ارسال شده است.

دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.

نویسنده: محمد سجاد

۱۰:۲۶ ۱۳۹۹/۰۳/۱۴

سلام . بنده مشغول طراحی یک سایت ام و یک مشکلی دارم. قصد دارم در صفحه اول ورود ۳ عدد تصویر به شکل:
یک عدد تصویر لوگو و نام یوتیوب همراه با لینک پیجم
یک عدد تصویر لوگو و نام اینستاگرام همراه با لینک پیجم
یک عدد تصویر لوگو و نام تلگرام همراه با لینک پیجم
به نمایش در بیاد و با کلیک مخاطب بر روی لوگو یا نام هر کدام در 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 هم از طریق شرکت های نمایندگی و هم خود نیک ممکن است اما معمولا از طریق نمایندگی ها هزینه کمتری خواهد داشت.

نویسنده: مریم

۱۶:۴۰ ۱۴۰۰/۰۲/۱۷

با سلام و عرض ادب
خواهشا استفاده از pm در

<a href=”register.php?pm=ok>Home</a>

را توضیح می دهید

پاسخ:

این پارامتر به صورت متد HTTP GET به سرور سایت مربوطه ارسال و در سرور با برنامه نویسی زبان هایی مانند PHP به صورت نمونه زیر قابل دریافت است:

<?php
@$pm = $_GET['pm'];
echo $pm;
?>

خروجی نمونه کد بالا عبارت ok خواهد بود، اگر شکل دیگری از استفاده مد نظرتان است لطفا سوال را با جزئیات دقیقتری مطرح کنید تا امکان راهنمایی وجود داشته باشد.

نویسنده: امید

۱۷:۳۰ ۱۴۰۰/۰۲/۱۸

سلام ببخشید چجوری میشه مثلا یه نوشته که پایین صفحه وجود داره ما بهش لینک بدیم و وقتی روش زدیم توی همون صفحه مارو ببره به نوشته مثلا درباره ما.

پاسخ:

ساده ترین راه برای این کار اختصاص ID به تگ مورد نظر در صفحه و در نظر گرفتن آن ID در قسمت href تگ a است، مثال:

<div id="about"></div>
<a href="#about">About</a>

روش های دیگری همراه افکت اسکرول وجود دارد که برای دسترسی به آموزش آن می توانید عبارت "رفتن به بالای صفحه با جاوا اسکریپت + وبگو" را در گوگل جستجو کنید.

نویسنده: پرتو

۱۵:۵۳ ۱۴۰۰/۰۲/۱۹

سلام خسته نباشید شرمنده مزاحم شدم این ادرس وبلاگه منه دوست داشتین سر بزنید

www.parto-afshar1372.blogfa.com

نویسنده: سید ارمیا حسینی

۱۴:۲۲ ۱۴۰۰/۰۳/۲۰

سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد یک لینک دیگه بشه.

پاسخ:

برای انتقال به صفحه دیگر بعد از چند ثانیه باید از جاوا اسکریپت یا متاتگ refresh استفاده کنیم، به طور مثال:

<script>
setTimeout(function () {
   window.location.href = "http://example.com";
}, 5000);
</script>

<meta http-equiv="refresh" content="5; url=http://example.com/">

نویسنده: بهنیا

۱۳:۰۵ ۱۴۰۰/۰۳/۲۴

سلام خسته نباشید
ببخشید چطوری میتونم برای خود وبسایتم یه لینک بسازم؟
کد خاصی داره؟

پاسخ:

منظورتان از خود وبسایت مشخص نیست؟ لینک را برای چه کاری می خواهید ایجاد کنید؟ در کل با تگ a و درج آدرس URL سایت در قسمت href می توانیم لینک به سایت ایجاد کنیم، اگر مشکلی در ایجاد لینک وجود دارد لطفا با جزئیات بیشتری توضیح دهید تا امکان راهنمایی وجود داشته باشد.

صفحه 4 از 5

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- تمام دیدگاه ها خوانده شده و برای هر کاربر مدت زمان محدودی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.
- در مواردی که امکان رفع مشکل در زمان متداول میسر نباشد ممکن است نیاز به ارجاع و ثبت سفارش در بخش برنامه نویسی باشد که در اینصورت اطلاع رسانی خواهد شد.