دسته بندی

نحوه ایجاد لینک در 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 فرم داد و به اصطلاح سفارشی نمود.


» ایجاد جدول با تگ table در HTML
» آشنایی با مفهوم Semantic در HTML
» کار با تگ های ایجاد کننده لیست در HTML
» کاربرد تگ font و ویژگی های فونت در HTML
» کار با تگ فرم (form) در HTML


نویسنده: محمد سجاد
۱۰:۲۶ ۱۳۹۹/۰۳/۱۴
سلام . بنده مشغول طراحی یک سایت ام و یک مشکلی دارم. قصد دارم در صفحه اول ورود ۳ عدد تصویر به شکل:
یک عدد تصویر لوگو و نام یوتیوب همراه با لینک پیجم
یک عدد تصویر لوگو و نام اینستاگرام همراه با لینک پیجم
یک عدد تصویر لوگو و نام تلگرام همراه با لینک پیجم
به نمایش در بیاد و با کلیک مخاطب بر روی لوگو یا نام هر کدام در tap جداگانه لینک شده و وارد آن بخش شود
اگر راهنمایی ام کنید ممنون میشم
با تشکر از سایت خوبتون
یک عدد تصویر لوگو و نام یوتیوب همراه با لینک پیجم
یک عدد تصویر لوگو و نام اینستاگرام همراه با لینک پیجم
یک عدد تصویر لوگو و نام تلگرام همراه با لینک پیجم
به نمایش در بیاد و با کلیک مخاطب بر روی لوگو یا نام هر کدام در tap جداگانه لینک شده و وارد آن بخش شود
اگر راهنمایی ام کنید ممنون میشم
با تشکر از سایت خوبتون
دقیقا متوجه نشدیم در بخش طراحی صفحه اول مشکل دارید یا پیاده سازی کل ساختار سایت؟ در هر صورت برای انجام این کار می توانید یک صفحه ایندکس (صفحه اصلی سایت) اختصاصی معمولا با نام index.php در ریشه (فولدر www یا public_html) طراحی و سه بلاک div را در یک راستا کنار هم یا به نحو دلخواه چینش کنید (نیازمند آشنایی با HTML و CSS)، یک CMS (به فرض وردپرس) هم برای مدیریت سایت بر روی هاستتان نصب داشته باشید و قسمت های مختلف را در آن آماده سازی و نهایتا لینک هر قسمت را به صفحه اصلی مرتبط نمائید، سوالتان از این نظر کلی است و باید مشخص کنید کدام قسمت دارای ابهام است که بهتر راهنمایی کنیم.
نویسنده: علی
۰۹:۳۰ ۱۳۹۹/۰۴/۱۴
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه
خیلی ممنون میشم اگه جواب بدید
خیلی ممنون میشم اگه جواب بدید
<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 ساختار زیر برای ایجاد لیست لینک شده به کار می رود:
<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 یک نام برای میانبر انتخاب و آن را ذخیره می کنیم.
نویسنده: حسین
۰۱:۱۵ ۱۳۹۹/۰۹/۲۹
سلام. مرسی از سایت خوبتون. برا ما مدرسه ای ها که تازه داریم یاد میگیریم عالیه مطالبتون.

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


در:
درود. وقت بخیر. من یک سوالی از خدمتتون داشتم؟ من می خوام وقتی کاربر بنویسه بدون اینکه URL تغییر کنه. و اینکه چطوری بعد...۱۳۹۹/۱۱/۰۷

در:
سلام تشکر میکنم از شما و سایت فوق العاده عالی تون مشکلم حل شد تشکر میکنم موفق باشید۱۳۹۹/۱۱/۰۵

در:
سلام خسته نباشید خیلی ممنونم از مطالب خوبتون.. ببخشید علامتی که در سمت راست همین سایت هستش چجوری تغییر جهت میده با اسکرول کردن...۱۳۹۹/۱۱/۰۵

در:
با سلام تشکر از سایت خوبتون و اموزشای خوبی که قرار میدین یک سوال داشتم من میخوام از یک فایل رشته ای همانند :...۱۳۹۹/۱۱/۰۵

در:
با سلام سایت هایی من میخوام اطلاعاتی از سایتی بگیرم اما این سایت پس از چند ثانیه این اطلاعات رو به من نشون میده و...۱۳۹۹/۱۱/۰۴

در:
سلام برای اینکه بتونم جدول ضرب 1 در 5 رو بنویسم چه کدهایی باید بنویسم؟۱۳۹۹/۱۱/۰۳

در:
چرا استاد خیلی فرق داره الان کد زیر را شما در نظر بگیرید بین 0 تا 1 ثانیه طول میکشه اجرا شدنش خب شما...۱۳۹۹/۱۱/۰۲

در:
سلام استاد حالتون چطوره، من یه سوال داشتم: تو پروژه های بزرگ که یک ارایه معمولا 20 عنصری یا نهایت 100 عنصری داشته باشیم...۱۳۹۹/۱۱/۰۲

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

در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...۱۳۹۹/۱۰/۲۷

در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...۱۳۹۹/۱۰/۲۷

در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...۱۳۹۹/۱۰/۲۷

در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...۱۳۹۹/۱۰/۲۶

در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره۱۳۹۹/۱۰/۲۶

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

در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...۱۳۹۹/۱۰/۲۵

در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...۱۳۹۹/۱۰/۲۴

در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...۱۳۹۹/۱۰/۲۴

در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...۱۳۹۹/۱۰/۲۴

در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...۱۳۹۹/۱۰/۲۳

در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...۱۳۹۹/۱۰/۲۱

در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...۱۳۹۹/۱۰/۲۱

در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....۱۳۹۹/۱۰/۲۱

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

در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...۱۳۹۹/۱۰/۲۰

در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...۱۳۹۹/۱۰/۱۹

در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...۱۳۹۹/۱۰/۱۹

در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...۱۳۹۹/۱۰/۱۹

در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...۱۳۹۹/۱۰/۱۹

در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...۱۳۹۹/۱۰/۱۸

در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...۱۳۹۹/۱۰/۱۸

در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...۱۳۹۹/۱۰/۱۷

در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟۱۳۹۹/۱۰/۱۶

در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...۱۳۹۹/۱۰/۱۴

در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟۱۳۹۹/۱۰/۱۳
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.