لینک های HTML

لینک های HTML


در این جلسه درمورد ایجاد لینک (پیوند) یک صفحه به صفحه دیگر توضیح می دهیم. همچنین انواع مختلف لینک ها را مشخص می کنیم.

لینک ها، با نام ابرلینک «hyperlink» شناخته می شوند و با استفاده از تگ <a> تعریف می شوند و همچنین نام عنصر آن نیز لنگر (انکر «anchor») می باشد.

برای ایجاد یک ابرلینک، از تگ <a> و ویژگی href استفاده می کنیم. مقدار ویژگی href آدرس وب سایت (URL)، صفحه وب یا فایل مورد نظر در اینترنت است.

مثال:

<p>برای رفتن به آموزش اچ تی ام ال<a href="http://www.computerquestion.ir/cat/90/HTML.html">اینجا</a>کلیک کنید</p>

برای مشاهده نتیجه اینجا کلیک کنید.

منبع ابرمتن ها می تواند URL مطلق، URL نسبی یا URLهای مربوط به ریشه باشد.

URL مطلق

آدرس های مطلق همان نشانی های اینترنتی هستند که به صورت کامل نوشته می شوند. مثلا:

<a href="http://www.computerquestion.ir">آموزش رایگان کامپیوتر</a>

URL نسبی

آدرس های نسبی به نشانی های اینترنتی اشاره دارد که مسیر آن نسبت به مکان فعلی نوشته می شود.

به عنوان مثال مرجع آدرس فعلی ماhttp://www.computerquestion.ir/cat/90/HTML.html است، و می خواهیم یک لینک به آدرس http://www.computerquestion.ir/cat/90 بدهیم.

<a href="cat/90/>آموزش اچ تی ام ال</a>

URL مربوط به ریشه

آدرس های مرتبط با روت «root» یا ریشه، نشانی نسبت به ریشه دامنه نوشته می شود:

برای مثال، اگر بخواهیم http://example.com/html/amoozesh را به محل http://example.com/html/ پیوند دهیم می توانیم از کد زیر استفاده کنیم.

<a href="/html">آموزش اچ تی ام ال</a>

فوروارد اسلش (/) نشانه ریشه دامنه است. مهم نیست که فایل شما در آن واقع شده باشد یا خیر، شما همیشه می توانید از این روش برای مشخص کردن مسیر استفاده کنید، حتی اگر نام دامنه نداشته باشید (تا زمانی که مسیر کامل از ریشه را بدانید).

اهداف لینک

شما می توانید URL خود را در یک پنجره جدید یا پنجره فعلی باز کنید. اینکار را می توان با ویژگی هدف «target» انجام داد.  به عنوان مثال URL را با ویژگی target=”_blank” آدرس را در یک پنجره ی جدید در مرورگر باز می کند.

ویژگی target می تواند مقادیر زیر را داشته باشد:

_blank: آدرس را در یک پنجره ی جدید مرورگر باز می کند.

_self: آدرس را در پنجره ی جاری یا فعلی مرورگر باز می کند.

_parent: آدرس را در پنجره والد باز می کند (همچنان در پنجره فعلی مرورگر). این مورد فقط در هنگام استفاده از فریم ها «frames» قابل استفاده می باشد.

_top: آدرس را در آدرس را در پنجره فعلی مرورگر باز می کند، امّا اثر فریم ها را خنثی می کند. بنابراین، اگر از فریم ها استفاده کنید، دیگر لینک ها درون آن باز نمی شوند.

مثال:

<a href="http://www.computerquestion.ir" target="_blank">کامپیوتر پرسش</a>

برای مشاهده نتیجه اینجا کلیک کنید.

لینک های پرش یا جهشی

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

در اینجا نحوه لینک کردن به بخش های یک صفحه را مشاهده می کنید:

اضافه کردن ID برای هدف لینک

یک عدد یا کلمه دلخواه را به بخشی از صفحه که می خواهید کاربر با استفاده از لینک به آنجا برسد اضافه کنید. برای انجام اینکار از ویژگی id استفاده کنید. ارزش یا مقدار ویژگی id معمولا خیلی کوتاه یا توصیف یک کلمه ای از بخش صفحه است.

مثال:

<h2 id="example">این یک مثال است</h2>

ساخت ابرلینک

در حال حاضر باید لینکی را به عنصر <h2> بالا بدهیم تا کاربر در هرکجای صفحه که قرار دارد، با کلیک بر روی لینک به این عنصر برسد. برای اینکار شما باید در قسمت URL لینک سازی از نماد هش (#) و مقدار ویژگی id استفاده کنید.

<a href="#example">پرش به مثال</a>

بنابراین این دو قطعه کد بالا در بخش دلخواه صفحه ی وبمان قرار می دهیم و کاربر هرگاه که روی لینک "پرش به مثال" کلیک کنید به عنصر <h2> می رسد. برای درک بهتر می توانید از مثال زیر استفاده کنید:

<!DOCTYPE html>

<html>

<head>

<title>ایجاد لینک در صفحه داخلی</title>

</head>

<body>

<h1>سلام! دنیا</h1>

<a href="#example">پرش به مثال</a>

<h2>به آموزش زبان اچ تی ام ال خوش آمدید</h2>

<p>زبان اچ تی ام ال یک زبان نشانه گذاری است که برای ایجاد یا طراحی صفحات وب مورد استفاده قرار می گیرد</p>

<h2>طراحان ایرانی</h2>

<p>در ایران طراحان وب به طور مداوم در حال تلاش برای بهبود صفحات وب هستند</p>

<h3>صفحات وب</h3>

<p>صفحات وب صفحه هایی هستند که در اینترنت و با یک آدرس منحصر به فرد قابل دسترسی می باشند</p>

<h2 id="example">این یک مثال است</h2>

<p>مثال های تمرینی کار شما در یادگیری بسیار راحت تر می کنند. این صفحه نیز برای تمرین زبان اچ تی ام ال آماده شده است</p>

</body>

</html>

نکته ی قابل توجه این است که حتما لازم نیست شما بخشی از همان صفحه فعلی را لینک کنید. بلکه می توانید اینکار را در صفحات دیگر نیز انجام دهید. به عنوان مثال ما می خواهیم در صفحه فعلی خودمان لینکی به قسمتی از صفحه تعریف رایانه در ویکی پدیا بدهیم امّا نه از ابتدای صفحه بلکه از قسمت معنای واژه فارسی رایانه که در بخشی از صفحه رایانه ویکی پدیا موجود است. برای توضیح بیشتر در ادامه بخوانید:

در صفحه تعریف رایانه در وب سایت ویکی پدیا، چندین تیتر وجود دارد از جمله: نام، معنای واژه فارسی رایانهف تاریخچه، سیستم های عامل کامپیوتری، داده و اطلاعات، رایانه ها چگونه کار می کنند و غیره. هرکدام از این تیترها (عنصر <h>) که قبلا در مورد آن بحث شد دارای یک ویژگی id هستند. که همانطور که در صفحه خود ویکی پدیا نیز قابل مشاهده است از لینک های پرش استفاده شده است (در جدول اول صفحه قسمت محتویات). حال ما می خواهیم کاربر را به صفحه رایانه ویکی پدیا بخش معنای واژه فارسی رایانه لینک دهیم. در این صورت باید id عنصر را شناسایی و سپس با استفاده از # و آدرس کامل لینک سازی کنیم. به مثال زیر توجه کنید:

<a href="https://fa.wikipedia.org/wiki/رایانه#معنای_واژهٔ_فارسی_رایانه>this link</a>

البته به طور معمول شما id یک عنصر را در صفحه وب مشاهده نمی کنید بلکه این ویژگی یعنی همان ویژگی id در صفحه وب نمایش داده نمی شود، که در آینده آموزش مشاهده آن را (در صورت موجود بودن id) ارائه خواهیم داد.

لینک های ایمیل

شما می توانید ایمیل را نیز لینک کنید. به صورت معمول لینک کردن آدرس ایمیل در صفحات وب امکان پذیر نیست، امّا برای انجام اینکار می توان از ویژگی mailto در تگ لنگر استفاده کرد.

مثال:

<a href="mailto:computerquestion@iran.ir">ایمیل کامپیوتر پرسش</a>

هنگامی که کاربر روی لینک کلیک می کند، ایمیل پیشفرض او باز می شود و ایمیل وارد شده شما در قسمت ارسال برای... به صورت خودکار می شود.

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

<a href="mailto:computerquestion@iran.ir?subject=پرسش&body=سلام سوالی داشتم می توانید راهنمایی کنید">this email</a>

آدرس اصلی

شما می توانید URL پیشفرض را برای تمام لینک ها در صفحه مشخص کنید تا از آن شروع شود. شما اینکار را با قرار دادن تگ base (همراه با ویژگی href) در بخش <head> سند انجام دهید.

مثال کد HTML:

<!DOCTYPE html>

<html>

<head>

<title>این یک مثال است</title>

<base url="http://www.computerquestion.ir">

</head>

<body>

<a href="html">آموزش اچ تی ام ال</a>

</body>

</html>

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی