آموزش برنامه نویسی وب و مهارتهای مرتبط
دوشنبه ۲۶ شهریور ۱۴۰۳
Monday, September 16, 2024 GMT +3:30
Monday, September 16, 2024 GMT +3: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
مطالب بیشتر:لایه بندی در HTML با تگ div و span
آشنایی با مفهوم Semantic در HTML
ایجاد جدول با تگ table در HTML
فرمت بندی و کار با متن و پاراگراف در HTML
کاربرد تگ font و ویژگی های فونت در HTML
دیدگاه
۷۳ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.۱۳:۵۳ ۱۴۰۰/۰۷/۲۵
ممنون از مطالب خوبتون.😊
۱۳:۲۳ ۱۴۰۰/۰۸/۰۳
ممنون از سایت عالیتون.
بابایی
۱۱:۴۴ ۱۴۰۰/۱۰/۱۲
سلام وقت بخیر
اصول%e2%80%8c-آکوستیک-/برای تغییر آدرس باید به دو موضوع توجه کنید، مورد اول مرحله ساخت آدرس URL است که می توانید با نمونه کد زیر کاراکترهای مد نظر را با مقدار خالی جایگزین کنید:
$url = str_replace("%e2%80%8c", "", $url);sobhan
۱۳:۲۸ ۱۴۰۰/۱۱/۲۴
با سلام توی بعضی از وب سایت ها به یک المان قابلیتی میدن که میره یک قسمت دیگه از صفحه، مثلا یک صفحه برای سفارش خدمات داریم که فرم سفارش آخر صفحه هست، ولی بالای صفحه یه دکمه داریم، میخام زمانی که روی دکمه زده میشه صفحه اتوماتیک اسکرول بشه و بیاد پایین تا به فرم برسه این کارو قبلا دیدم با لینک دادن انجام میشه، میشه یه توضیح بدید ؟
در ساده ترین شکل ممکن برای اسکرول به یک عنصر خاص در صفحات وب می توانیم به آن عنصر ID یکتا اختصاص دهیم و آی دی را در انتهای آدرس URL تگ a به صورت نمونه زیر فراخوانی کنیم:
<div id="scroll-to"></div>
<a href="http://example.com/index.html#scroll-to">Click</div>زیبا
۱۲:۳۸ ۱۴۰۰/۱۱/۲۵
سلام لینک که در href مینویسیم از کجا میاد. منظور تو صفحه اول سایت محصولات نوشتیم که روی محصول مورد نظر مثلا لوازم ارایشی کلیک میکنم بره محصولات رو نشون بده . تو تگ href چطور ادرس رو بنویسم . ادرس http از کجا میاد
این آدرس همان متنی است که در نوار بالایی مرورگر (نوار آدرس یا Address Bar) مشاهده می کنید و برای هر صفحه بستگی دارد که برنامه مدیریت وبسایتتان (وردپرس، جوملا و...) به چی شکلی آن را تولید کرده باشد، به طور مثال آدرس URL می تواند به شکل نمونه زیر باشد:
http://example.com/shop/product.htmlhttp://example.com/خرید/محصول۱۲:۵۲ ۱۴۰۱/۰۱/۱۱
یه نوع لینک دیدم که اینطوری گذاشته میشه . این نوع لینک را با انکر تکست چطور باید بذاریم
[url][/url]این نوع درج لینک به BBCode (Bulletin Board Code) معروف هستند، در این ساز و کار لینک را به صورت نمونه زیر در محتوا درج و ذخیره می کنیم:
[url=http://example.com]Link Text[/url]<?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 هستش. حالا نیاز پیدا کردم که متنی که برای کاربرام از طریق وب سرویس پیامک می کنم قسمتی از آن رو لینک دار کنم چطور این کار رو توی کد انجام بدم؟؟
ممنون میشم راهنمایی کنید.
بنده یک وب سرویس ارسال پیامک دارم که از طریق آن برای کابرانم پیامک ارسال می کنم. کد بنده .net هستش. حالا نیاز پیدا کردم که متنی که برای کاربرام از طریق وب سرویس پیامک می کنم قسمتی از آن رو لینک دار کنم چطور این کار رو توی کد انجام بدم؟؟
ممنون میشم راهنمایی کنید.
تا جایی که اطلاع داریم پیامک از پردازش کدهای HTML پشتیبانی نمی کند ااما در رویه متداول اگر آدرس صفحه یا سایت را با درج پروتکل مربوطه (http, https و...) و به صورت کامل قرار دهید در دستگاه های تلفن همراه اغلب به شکل لینک شده نمایش داده می شوند.
۲۰:۰۳ ۱۴۰۲/۰۹/۲۴
من لینک میسازم برای سایتم ولی خودش تغییر میده یه جور دیگه میشه
لینک ساده خوبه ممنون
لینک ساده خوبه ممنون
صفحه 5 از 5آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید۱۴۰۳/۰۶/۲۰
پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...۱۴۰۳/۰۶/۱۵
سیدعباسی
با سلام ببخشید یه سوال دیگه هم دارم من با این تابع فقط یه دونه کانال رو می تونم خروجی بگیرم میخوام توی...۱۴۰۳/۰۵/۰۶
سیدعباسی
با تشکر از شما مشکلم اینکه چطوری عکس پست آخر رو بدست بیارم و بعد با الگوی که اونو نوشتید استخراجش کنم سورس...۱۴۰۳/۰۵/۰۵
سیدعباسی
با سلام من مشکل قبلیم رو که گفتم ارور میده رو حل کردم مشکل بعدیم اینکه با استفاده از این کد با تشکر...۱۴۰۳/۰۵/۰۳
سیدعباسی
با سلام این کد رو چند روز پیش برام فرستادید و کارم رو راه انداخت با این میشه عکس ها رو استخراج کرد...۱۴۰۳/۰۵/۰۱
پرتو
سلام جناب خوبید؟ چیزی شده جواب نمیدین؟ آخه من ایمیل دادمممم ممنون میشم چک کنید لطفا۱۴۰۳/۰۴/۳۱
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.