ایجاد لینک HTML -درس نهم – بخش دوم
اتصال دو صفحه HTML به یکدیگر
- ابتدا یک صفحه جدید برای تمرین ایجاد لینک html بین دو صفحه ایجاد نمایید.
- برای انجام این کار، در کنار فایل index.html یک فایل html جدید با نام page.html ایجاد نمایید.
- برای ایجاد فایل html جدید می توانید مثال موجود در درس چهارم را در فایل html جدید کپی کنید.(در اینجا نیازی به تگ های description و keywords نداریم.)
- توجه نمایید که نام page.html صرفا برای هماهنگ بودن با مثال ها می باشد و برای ایجاد صفحه جدید می توانید از هر نام دیگری استفاده کنید.
- در صفحه index.html تگ زیر را بنویسید:
|
1 |
<a href="page.html" target="_blank">صفحه جدید</a> |
- حال اگه صفحه index.html را باز کنید و روی کلمه صفحه جدید کلیک کنید، صفحه page.html در یک تب جدید از مرورگر باز می شود.
اتصال دو متن در یک صفحه HTML
برای ایجاد فهرست در یک صفحه یا بازگشت به ابتدای صفحه از چنین لینکی استفاده می شود.
به عبارت دیگر با ایجاد لینک html ، که آدرسش درون خود صفحه است، صفحه را اسکرول می نماییم.
به عنوان مثال با کلیک در اینجا، به ابتدای صفحه منتقل می شوید.
توجه داشته باشید که این نوع اتصال، فقط در صفحاتی کاربرد دارد که به دلیل طولانی بودن محتوا، در صفحه اسکرول عمودی وجود داشته باشد.
- برای ایجاد چنین اتصالی کافیست کلمه یا عبارتی که می خواهید صفحه به آن بخش منتقل شود را درون تگ a قرار دهید و با استفاده از صفت name یک نام به آن بخش بدهید.
- سپس کلمه ای که می خواهید با کلیک روی آن به بخش شماره یک (که به آن نام دادیم) منتقل شوید را درون تگ a قرار داده و در بخش href نام موجود در صفت نام در بخش شماره 1 را به همراه # قرار دهید.
|
1 2 |
<a name="here">بخش شماره 1</a> <a href="#here">بخش شماره 2</a> |
خلاصه درس
- برای اتصال دو صفحه html به یکدیگر که در یک فولدر قرار دارند، کافیست نام صفحه مقصد را در صفت href تگ a بنویسید.
- برای اتصال دو متن به یکدیگر در یک صفحه، متن مقصد را درون تگ a قرار دهید و با استفاده از صفت name به آن نام دهید و سپس متن مبدا را درون تگ a قرار دهید و در صفت href، نام متن مقصد را بعد از علامت # قرار دهید.
محتوای دو صفحه html که با تگ a به هم متصل شده اند:
فایل index.html:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>سایت من</title> </head> <body> <a href="page.html">صفحه</a> </body> </html> |
فایل page.html:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>صفحه من</title> </head> <body> <a href="index.html">بازگشت به خانه</a> </body> </html> |
محتوای یک صفحه html که در آن دو بخش به یکدیگر متصل شده اند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>سایت من</title> </head> <body> <a name="ebteda">ابتدای صفحه</a> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <a href="#ebteda">بازگشت به ابتدای صفحه</a> </body> </html> |
- در مثال بالا، از تعداد زیادی تگ br استفاده شده است. هربار نوشتن این تگ، باعث ایجاد یک خط خالی می شود که در این مثال برای طولانی نمودن صفحه و ایجاد اسکرول از آن استفاده شده است.
تمرین
- چند فایل HTML ایجاد کنید و با استفاده از تگ a، فایل ها را به هم متصل کنید.
- در یک صفحه چند متن را به یکدیگر متصل کنید.