آموزش برنامه نویسی و مهارتهای وب
سه شنبه ۰۱ تیر ۱۴۰۰
Tuesday, June 22, 2021 GMT +4:30
Tuesday, June 22, 2021 GMT +4:30
» نحوه ایجاد لینک در HTML
همان طور که اطلاع داریم، ایجاد لینک یا پیوند در صفحات وب امری عادی و مرسوم است، بدین معنی که مدیران وبلاگ ها و وبسایت های مختلف معمولا آدرس صفحات همکاران یا دوستان خود را در قسمتی خاص به نحوی درج می کنند که اگر بر روی آنها کلیک کنیم، وارد آدرس مورد نظر خواهیم شد، این حالت اغلب به صورت سیستماتیک (بدون کدنویسی) انجام می شود، یعنی کافی است آدرس صفحه (سایت، وبلاگ و...) را در قسمت درج لینک به همراه سایر مشخصات وارد کنیم تا آن لینک به لیست پیوندهای ما اضافه شود، اما باید بدانیم هنگامی که صفحه وب خود را مشاهده می کنیم، خروجی نهایی به صورت کدهای HTML به مرورگر ارسال شده است، لذا آشنایی با این مبحث می تواند تا حدود زیادی به درک ما از چگونگی کارکرد لینک ها کمک کند.
ایجاد لینک با تگ a و href
تگی که در HTML و در واقع در صفحات وب برای ایجاد لینک به سایر صفحات استفاده می شود تگ a است که در کنار href کامل می شود، عبارت a مخفف anchore یا لنگر است و href مخفف Hypertext Reference یا ابر متنی است که حاوی لینک (hyperlink) به صفحه دیگری است، به مثال زیر توجه کنید.
<a href="https://webgoo.ir">کلیک کنید</a>نکته: محتوای لینک ها در حالت پیش فرض در همان صفحه فعلی نمایش داده می شوند، به عبارتی جایگزین صفحه فعلی می شوند، اما با تنظیم پارامتر target که در ادامه خواهیم دید، می توان رفتار آنها را تغییر داد.
ایجاد عنوان برای لینک یا title
تگ a با خاصیت های دیگری کامل تر می شود که از آن جمله می توان title را نام برد، استفاده از title اجباری نیست، اما می تواند از نظر بهینه بودن لینک های سایت مفید باشد.
<a href="https://webgoo.ir" title="این یک لینک است">کلیک کنید</a>کنترل پنجره لینک یا target
همان طور که در نکته بالا گفتیم، لینک ها به صورت پیش فرض در همان پنجره نمایش داده می شوند، اما ممکن است بخواهیم پس از کلیک کاربر، پنجره فعلی حفظ شده و به جای آن، محتوای لینک در پنجره جدیدی نمایش داده شود، بدین منظور از پارامتر دیگری به نام target استفاده می کنیم، به مثال زیر توجه کنید.
<a href="https://webgoo.ir" title="این یک لینک است" target="_blank">کلیک کنید</a>- 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>در پایان این آموزش، شاید این پرسش به ذهنتان رسیده باشد که چگونه است بیشتر لینک های وب با رنگ ها و حالت های مختلف هستند، به طور مثال فونت و اندازه لینک ها متفاوت است یا با بردن ماوس روی لینک، رنگ آنها تغییر می کند و...، برای یافتن پاسخ این سوالات باید کمی صبر کنید و آموزش های مقدماتی HTML را به پایان برسانید، در گام بعدی یعنی فراگیری CSS، خواهیم دید که می توان لینک های وب را با استایل CSS فرم داد و به اصطلاح سفارشی نمود.
دسته بندی: آموزش مقدماتی » HTML
برچسب ها: HTML
مطالب بیشتر:» آشنایی با مفهوم Semantic در HTML
» لایه بندی در HTML با تگ div و span
» کاربرد تگ img و نمایش تصاویر در HTML
» آشنایی با HTML، زبان پایه کدنویسی وب
» ایجاد جدول با تگ table در HTML
نظرات (۶۰ یادداشت برای این مطلب ارسال شده است)
یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.نویسنده: محمد سجاد
۱۰:۲۶ ۱۳۹۹/۰۳/۱۴
سلام . بنده مشغول طراحی یک سایت ام و یک مشکلی دارم. قصد دارم در صفحه اول ورود ۳ عدد تصویر به شکل:
یک عدد تصویر لوگو و نام یوتیوب همراه با لینک پیجم
یک عدد تصویر لوگو و نام اینستاگرام همراه با لینک پیجم
یک عدد تصویر لوگو و نام تلگرام همراه با لینک پیجم
به نمایش در بیاد و با کلیک مخاطب بر روی لوگو یا نام هر کدام در tap جداگانه لینک شده و وارد آن بخش شود
اگر راهنمایی ام کنید ممنون میشم
با تشکر از سایت خوبتون
یک عدد تصویر لوگو و نام یوتیوب همراه با لینک پیجم
یک عدد تصویر لوگو و نام اینستاگرام همراه با لینک پیجم
یک عدد تصویر لوگو و نام تلگرام همراه با لینک پیجم
به نمایش در بیاد و با کلیک مخاطب بر روی لوگو یا نام هر کدام در 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 ساختار زیر برای ایجاد لیست لینک شده به کار می رود:
در حالت 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 در
خواهشا استفاده از pm در
<a href=”register.php?pm=ok>Home</a>این پارامتر به صورت متد HTTP GET به سرور سایت مربوطه ارسال و در سرور با برنامه نویسی زبان هایی مانند PHP به صورت نمونه زیر قابل دریافت است:
<?php
@$pm = $_GET['pm'];
echo $pm;
?>نویسنده: امید
۱۷:۳۰ ۱۴۰۰/۰۲/۱۸
سلام ببخشید چجوری میشه مثلا یه نوشته که پایین صفحه وجود داره ما بهش لینک بدیم و وقتی روش زدیم توی همون صفحه مارو ببره به نوشته مثلا درباره ما.
ساده ترین راه برای این کار اختصاص 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 از 4 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
محموددر:
سلام مهندس وقت بخیر دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به...۱۴۰۰/۰۳/۳۰
پرتودر:
سلام استاد خسته نباشید قالبم درست شد خیلی ممنون یه خواهش دیگه هم ازتون داشتم اینکه یه بوردر برای تک به تک پست ها جداگانه...۱۴۰۰/۰۳/۲۴
بهنیادر:
سلام خسته نباشید ببخشید چطوری میتونم برای خود وبسایتم یه لینک بسازم؟ کد خاصی داره؟۱۴۰۰/۰۳/۲۴
Rahaدر:
سلام وقت بخیر چه جوری می تونم از دو تا function باهم استفاده کنم. مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم...۱۴۰۰/۰۳/۲۴
رهادر:
سلام ممنون میشم اگه راهنماییم کنید من میخوام تو جاوا اسکریپت توی مسیج باکس بصورت اختیاری عدد بدم و جمع و تفریق انجام بشه. ...۱۴۰۰/۰۳/۲۴
محمددر:
با عرض سلام و احترام مجدد پیرو کامنت قبلی که لطف کرده و توجه فرمودید آدرس سایت این هست: از توجه و راهنمایی‌های همیشگی...۱۴۰۰/۰۳/۲۳
محمددر:
سلام وقت بخیر با سپاس از تیم محترم وبگو یک سوال داشتم از خدمتتون در عکسی که در آدرس با...۱۴۰۰/۰۳/۲۲
پرتودر:
با سلام استاد من براتون ایمیل فرستادم لطفا ایمیل خود را چک کنید با تشکر۱۴۰۰/۰۳/۲۱
پرتودر:
سلام خوبید خسته نباشید من یه کد قالبی دارم که میشه براتون بفرستم و شما تغییرش بدین من قالبم رو می خاستم اگه...۱۴۰۰/۰۳/۲۰
سید ارمیا حسینیدر:
سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد...۱۴۰۰/۰۳/۲۰
الیدر:
سلام وقت بخیر من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده...۱۴۰۰/۰۳/۱۸
علیرضا حسینیدر:
دمتون گرم خسته نباشید خیلی عالی بود۱۴۰۰/۰۳/۱۸
حامدترابیدر:
سلام چند وقته که وبلاگ شهیدحسن ترابی گودرزی باز نمیشه ولی با vpn باز میشه. میشه راهنماییم کنید. ممنون میشم۱۴۰۰/۰۳/۱۶
mahdiدر:
سلام استاد این تابع در لوکال هم ایمیل ارسال میکنه هم فایل ضمیمه ، البته زمپ رو یه سری تغییرات باید داد و حساب ایمیل...۱۴۰۰/۰۳/۱۲
mahdiدر:
سلام وقت بخیر ، استاد عزیز اگر ما با تابع mail یه تابعی بنویسیم که در لوکال قابلیت ارسال هر نوع ایمیلی رو داشته باشه...۱۴۰۰/۰۳/۱۲
masoodدر:
سلام وقتتون بخیر ببخشید من یک سوالی دارم اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه...۱۴۰۰/۰۳/۱۱
mahdiدر:
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟۱۴۰۰/۰۳/۱۰
mahdiدر:
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر...۱۴۰۰/۰۳/۱۰
پرتودر:
وای من نمی تونم توی زمینه طراحی قالب های دیگ فعالیت کنم چون خیلی سختن فک نکنم بتونم اگر جایی می شناسید که قالب های...۱۴۰۰/۰۳/۰۹
پرتودر:
سلام خسته نباشید شرمنده مزاحم شدم دوباره، می خاستم بپرسم می ارزه کسی وبلاگ در مورد قالب سازی بزنه یا اینکه نه نمی ارزه آخه...۱۴۰۰/۰۳/۰۹
یاسدر:
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند...۱۴۰۰/۰۳/۰۸
sattarدر:
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا...۱۴۰۰/۰۳/۰۸
mahdiدر:
سلام استاد ckeditor بهتره یا TinyMCE؟ من اینو ckeditor دیدم که راست چین چپ چین نداشت بعد استاد عزیز من یه چیزی رو...۱۴۰۰/۰۳/۰۶
پرتودر:
ممنونم از شما که کدش رو دادید فقط یه سوال داشتم و اونم اینکه این کد رو در کدوم قسمت قالب قرار بدم و ایا...۱۴۰۰/۰۳/۰۴
mahdiدر:
سلام نه استاد عزیز نیازی نیست چون خودمم فکر میکنم لوگو رو باید از قبل مثلا با فتوشاپ آماده داشت و فقط میخواستم این امکانم...۱۴۰۰/۰۳/۰۳
پرتودر:
سلام خواستم تشکر کنم از کدی که قبلا بهم داده بودید درست شد قالبم واقعا ممنونم ازتون یه چیز دیگه می خاستم بگم اینکه یه...۱۴۰۰/۰۳/۰۳
دانیالدر:
باسلام خیلی ممنون بابت مطالب عالیه سایتتون این مطلب هم مثل بقیه مطالب عالی بود۱۴۰۰/۰۳/۰۳
mahdiدر:
سلام استاد عزیز ، بله استاد اونطوری قرار میگیره وقتی تصویر از قبل مثلا با فتوشاپ شفاف شده باشه ، ولی اگر بخوایم یک عکس...۱۴۰۰/۰۳/۰۳
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
محتوا در «وبگو» به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.