این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش کار با لینک ها یا Links در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لینک ها یا Links در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با لینک ها یا Links در HTML
لینک یا پیوند یا hyperlink در HTML به متن یا عنصری گفته می شود که قابلیت کلیک شدن و انتقال کاربر از مکانی به مکانی دیگر در یک صفحه وب و بطور کلی در تمامی بخش های سایت و همچنین در کل دنیای اینترنت را داشته باشد.
امروزه لینک ها یا Links یکی از عوامل بسیار مهم در صفحات وب یا سایت های اینترنتی می باشد، به گونه ای که در حال حاضر در هر وبسایت بیش از ده ها و صدها لینک وجود دارد که میتوانند کاربر را به بخش های مختلف یک وبسایت انتقال دهند.
وقتی ماوس بروی یک لینک قرار میگیرد معمولا علامت آن به شکل
تبدیل می شود، ولی خب بازم بستگی به سیستم عامل و تِم سیستمتون داره و ممکنه شکلش کمی متفاوتتر باشه.
نه فقط یک متن بلکه هر عنصر دیگری همانند تصاویر و.. در HTML میتواند یک لینک باشد.
Free-Learn
لینک ها یا Links در HTML
برای ایجاد یک لینک در HTML ما باید از تگ <a> استفاده نماییم، شکل کلی برای ایجاد یک لینک در HTML بصورت زیر می باشد :
|
1 |
<a href="URL">Text In Here</a> |
در دستور بالا کافیست در صفت href بجای URL آدرس مقصد را نوشته و بجای متن Text In Here نیز یک متن دلخواه برای اینکه به کاربر نمایش داده شود و کاربر بتواند بروی آن کلیک نماید.
مثال شماره ۱ : ایجاد یک لینک به سایت آموزشی فری لرن
|
1 2 3 4 5 |
<body> <a href="https://free-learn.ir">برو به سایت فری لرن</a> </body> |
Free-Learn
صفت Target در لینک ها
ما با استفاده از صفت target در تگ <a> میتوانیم مشخص نماییم که وقتی بروی لینک کلیک شد، صفحه مقصد در چه حالتی باز بشه ( مثلا در تب جدید مرورگر باز بشه یا هم نه در همون صفحه فعلی )
بصورت پیش فرض در HTML مقصد تمامی لینک ها در حالت self_ می باشد، این یعنی وقتی بروی لینکی کلیک میشه تو خوده همون صفحه هم باز میشه.
صفت Target میتواند یکی از مقادیر زیر را بپذیرد :
- _blank مقصد در تب جدید باز میشود
- _self مقصد در همان صفحه فعلی باز میشود
- _parent در فریم یا قاب والد یا پدر باز میشود
- _top بروی تمامی فریم های موجود در یک صفحه باز میشود
مثال شماره ۱ : برای مشاهده عملکرد و تفاوت های بین این صفت ها لطفا اینجا کلیک نمایید.
مثال شماره ۲ : باز شدن یک لینک در حالت های مختلف
|
1 2 3 4 5 6 7 8 |
<body> <a href="https://free-learn.ir" target="_self">Self</a> <a href="https://free-learn.ir" target="_blank">Blank</a> <a href="https://free-learn.ir" target="_parent">Parent</a> <a href="https://free-learn.ir" target="_top">Top</a> </body> |
Free-Learn
نحوه ساخت تصاویر لینک دار در HTML
کلا هرچیزی رو که بزاریم داخل تگ a میشه لینک، مثلا اگه تگ img رو بزاریم داخل تگ a میشه یه عکس که لینک دار هستش، یا مثلا اگه یه تگ P رو بزاریم داخل تگ a اون تگ P میشه لینک و…
مثال شماره ۱ : ایجاد تصویر لینک دار
|
1 2 3 4 5 6 7 8 9 |
<body> <p>بروی تصویر زیر کلیک کنید</p> <a href="https://free-learn.ir"> <img src="images/logo-1.png"> </a> </body> |
Free-Learn
لینک های داخلی و نحوه ایجاد آنها
نمونه دیگری از لینک هارو داریم که بهشون میگیم لینک های داخلی یا لینک های درون صفحه ای ، یعنی لینکی که مبدا و مقصد اون در یک صفحه باشه ، یا حتی بهش بوکمارک ( BookMark ) هم میگن .
برای ایجاد یک لینک درون صفحه ای یا لینک داخلی باید ۲ کار انجام بدیم :
- تعریف یک ID درون محل مقصد ( محلی که قرار است کاربر به آنجا منتقل شود )
- قرار دادن ID مقصد در درون لینک مبدا
مثال شماره ۱ : ایجاد لینک داخلی ( انتقال کاربر به بخش های مختلف یک مطلب )
|
1 2 3 4 5 6 7 8 9 10 |
<body> <ul> <li><a href="#section_1">عنوان اول</a></li> <li><a href="#section_2">عنوان دوم</a></li> <li><a href="#section_3">عنوان سوم</a></li> <li><a href="#section_4">عنوان چهارم</a></li> </ul> </body> |
مثال شماره ۲ : ایجاد دکمه برو به بالای صفحه از طریق لینک داخلی
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html id="Top"> <body> <a href="#Top">برو بالای صفحه</a> </body> </html> |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : لینک به آدرس ایمیل
|
1 2 3 4 5 |
<body> <a href="mailto:FreeLearn20181@gmail.com?subject=test&body=test" target="_top">ارسال ایمیل</a> </body> |
مثال شماره ۲ : لینک به شماره تماس ( تلفن )
|
1 2 3 4 5 |
<body> <a href="tel:+989121234567">تماس تلفنی با ما</a> </body> |
مثال شماره ۳ : لینک به اس ام اس ( پیامک )
طبق تست انجام شده بروی گوشی های اندروید بدون مشکل عمل میکنه ولی روی IOS تست نشده، دوستان محترم اگه کسی بروی IOS یا دیگر سیستم عامل های گوشی های موبایل تست کرده لطفا از طریق این ایمیل FreeLearn20181@gmail.com اطلاع رسانی نمایید.
وقتی مثال زیر رو اجرا میکنید و بروی اون لینک کلیک میکنید، باید شمارو مستقیما به قسمت پیامک گوشیتون منتقل کنه ( با شماره و متن پیام مشخص شده )
|
1 2 3 4 5 |
<body> <a href="sms:+98123456789?body=Salam Khobi?">کلیک کنید</a> </body> |
Free-Learn
خب دوستان خسته نباشید اینم از بخش آموزش کار با لینک ها یا Links در HTML که به پایان رسید – لطفا در بخش های بعدی نیز همچنان با بنده همراه باشید.
