آموزش کار با لینک ها یا 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">اینجا کلیک نمایید</a> <a href="https://free-learn.ir" target="_blank">اینجا کلیک نمایید</a> <a href="https://free-learn.ir" target="_parent">اینجا کلیک نمایید</a> <a href="https://free-learn.ir" target="_top">اینجا کلیک نمایید</a> </body> |
Free-Learn
نحوه ساخت تصاویر لینک دار در HTML
تا به الان همانطور که مشاهده نمودید ما به راحتی با استفاده از تگ <a> توانستیم یک لینک را با یک متن که کاربر بتواند بروی آن کلیک کند را ایجاد نماییم، حال میخواهیم یاد بگیریم که چگونه میتوان یک تصویر لینک دار یا تصویری که کاربر بتونه با کلیک بروی آن به مکانی دیگر منتقل شود را ایجاد کرد.
برای ایجاد یک تصویر لینک دار یا تصویری که بتوان با کلیک بروی آن به مکانی دیگر منتقل شویم باید از تگ <img> درون تگ <a> استفاده نماییم. لطفا به مثال زیر توجه نمایید.
|
1 2 3 4 5 6 7 |
<body> <a href="https://free-learn.ir"> <img src="images/logo-1.png"> </a> </body> |
Free-Learn
لینک های داخلی و نحوه ایجاد آنها
نمونه دیگری از لینک هارو داریم که بهشون میگیم لینک های داخلی یا لینک های درون صفحه ای , یعنی لینکی که مبدا و مقصد اون در یک صفحه باشه.
برای ایجاد یک لینک درون صفحه ای یا لینک داخلی باید ۲ کار انجام بدیم :
- تعریف یک ID یا (آی دی) درون محل مقصد. (محلی که قرار است کاربر به آنجا منتقل شود)
- قرار دادن ID مقصد در درون لینک مبدا
برای مشاهده آموزش نحوه ایجاد ID در تگ های HTML لطفا اینجا کلیک نمایید.
که در ادامه میتوانید یک مثال از نحوه ایجاد لینک داخلی را مشاهده نمایید. لطفا برای مشاهده مثال زیر بصورت آنلاین بروی دکمه امتحان کنید کلیک نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <a href="#test1">Test1</a> <a href="#test2">Test2</a> <a href="#test3">Test3</a> <a href="#test4">Test4</a> <h3 id="test1">Test1</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> <h3 id="test2">Test2</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> <h3 id="test3">Test3</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> <h3 id="test4">Test4</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> </body> |
مثال شماره ۲ : ( انتقال کاربر از پایین صفحه به بالای صفحه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body id="top"> <h3>Test1</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> <h3>Test2</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> <h3>Test2</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> <h3>Test2</h3> <p>Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.Salam Khobi? Man Sadegh Hastam.</p> <a href="#top">برو بالای صفحه</a> </body> |
خب دوستان خسته نباشید اینم از بخش آموزش کار با لینک ها یا Links در HTML که به پایان رسید – لطفا در بخش های بعدی نیز همچنان با بنده همراه باشید.
Free-Learn
- خلاصه ی این بخش
- لینک یا پیوند به یک متن یا تصویر و.. گفته می شود که قابلیت انتقال کاربر از یک صفحه به یک صفحه ی دیگر را دارد.
- برای ایجاد یک لینک در یک صفحه باید از تگ <a> استفاده کرد.
- وجود صفت href در درون تگ <a> ضروری می باشد، یعنی اگر این صفت نباشد لینکی هم در کار نیست.
- با استفاده از صفت target در درون تگ <a> میتوان نحوه ی بازشدن صفحه ی مقصد را مشخص کرد.
- برای ایجاد یک تصویر لینک دار، یعنی تصویری که بتوان بروی آن کلیک کرد، باید تگ <img> را در درون تگ <a> قرار دهیم.
- دانلود PDF این آموزش
- برای دانلود فایل PDF این آموزش کلیک نمایید
