لینک ها در HTML (جلسه پنچم)

سلام خدمت دوستان عزیز و همراهان گرامی مِستر آموز.

 

در این جلسه از آموزش زبان HTML میخواهیم به بررسی لینک ها بپردازیم. با ما همراه باشید.

از لینک ها برای پیوند به یک صفحه دیگر در هر جای وب، پیوند به نقطه یا مکانی در داخل همان صفحه یا سفحه دیگر ، یک عکس ، فیلم و یا هر چیز دیگری استفاده می شود.

تگ <a>:

حرف a مخفف کلمهanchor به معنی لنگر می باشد. شکلی کلی ایجاد یک پیوند در (HyperLink) در HTML به صورت زیر است.

<a href=”URL” > متن عنوان پیوند </a>

 

خاصیت href که از نوع URL است برای تعیین مقصد لینک به کار می رود. این خاصیت شامل آدرس صفحه یا فایلی است که با کلیک بر روی آن پیوند باز خواهد شد. و نوشته وسط بین تگ ابتدایی و انتهایی، متنی است آبی رنگ و زیر خط دار که نشان دهنده پیوند است.

مثال:

<a href="https://mramooz.com"> مِستر آموز </a>

مشخصه  target:

توسط مشخصه target می توانیم مشخص کنیم که فایل مقصد به چه صورت باز شود.

مثال: کد زیر سایت مِستر آموز را در یک پنجره جدید نشان میدهد.

<a href="https://mramooz.com" target="_blank"> مِستر آموز </a>

این مشخصه 5 حالت کلی دارد:

blank_: یک فایل یا آدرس جدید را در یک پنجره جدید باز می کند

self_: یک فایل یا آدرس جدید را در پنجره فعلی باز خواهد کرد.

parent_: یک فایل یا آدرس جدید را در قالب اصلی (parent frame) باز خواهد کرد. (درباره قابها در مباحث بعدی صحبت خواهیم کرد.)

top_: یک فایل یا آدرس جدید را در کل پنجره فعلی باز خواهد کرد

New: مانند _blank عمل می کند و در یک پنجره جدید باز میکند.

 

 

مشخصه name:

مشخصه nameبرای ساختن یک لینک دارای نام استفاده می شود. توسط لینک دارای نام شما می توانید لینکی بسازید که به قسمت خاصی از صفحه مستقیما جهش داشته باشد به جای این که کاربر را مجبور به پیمودن کل سفحه کنید تا به قسمت مورد نظر برسد. یک لینک دارای نام به صورت زیر می سازیم.

<a name=”label”> Text to be displayed </a>

 

هنگامی که می خواهید به یک لینک دارای نام متصل شوید باید به انتهای نام فایل علامت # را اضاف کرده  سپس نام لینک موردنظر را بنویسید. مثلا اگر دستورات زیر را در فایلی به نام test1.html ذخیره کنید.

<p>This is a text. This is a text. This is a text.</p>
<p>This is a text. This is a text. This is a text.</p>
<a name="tips">Read the Useful Tips section</a>
<p>This is a text. This is a text. This is a text.</p>
<p>This is a text. This is a text. This is a text.</p>

و دستورات زیر را در فایلی به نام test2.html ذخیره کنید

<a href="test1.htm#tips">
Read the Useful Tips section
</a>

 

و فایل test2.html  را باز کنید و روی لینک موجود کلیک کنید فایل test1.html باز خواهد شد و به بخش tips خواهد رفت. همچنین شما می توانید از طریق پیوند دارای نام به بخشی از صفحه فعلی که توسط مرورگر در حال نمایش است بروید. مثلا اگر کل دستورات فوق را در یک فایل بنویسید و آن را ذخیره کنید و توسط مرورگر باز کنید و روی Useful tips کلیک کنید صفحه به سوی بخش tips جهش می کند.

فقط در نظر داشته باشید که در قسمت آدرس دهی دیگر نیاز به نوشته نام فایل نیست و فقط اسم قسمت مورد نظر را می نویسیم:

<a href=" #tips">

 

لینک به یک آدرس E-Mail:

بعضی وقت ها نیاز است که در صفحه وب آدرس E-Mail خود را در اختیار کاربران و ببینندگان سایت خود قرار دهیم، این کار را به راحتی می توان در یک پاراگراف نوشت مانند مثال زیر:

<p>My E-Mail adress is : [email protected] </p>

اما اگر بخواهیم یک لینک به آدرس E-Mail خود ایجاد کنیم که به طور خودکار یکی از برنامه های مخصوص E-Mail را در کامپیوتر کاربر باز کند و بعضی از موارد مورد نیاز مانند آدرس و موضوع و … را به طور خودکار در قسمت های مخصوص خود بنویسد و بدین ترتیب کار کاربر را راحتتر کنیم ، باید از شیوه زیر استفاده کنیم.

<a href="mailto: [email protected]?Subject=Hello%20again">
	Send Mail
</a>

 

دستورات فوق را در یک فایل ذخیره کنید و آن را باز کنید و بر روی کلمه Send Mail  کلیک کنید. و شاهد باز شدن یکی از برنامه های پیش فرض ایمیل در ویندوز می شوید و تعدادی از موارد به طور پیش فرض توسط شما هم مشخص شده اند.

نکته: در قسمت href اگر میخواهید از فاصله استفاده کنید از %20 استفاده کنید چون مرورگر این کاراکتر را به عنوان فاصله می شناسد.

 

موفق و پیروز باشید.