کار با هایپرلینک در صفحات html

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

تگ مربوط به هایپرلینک در html

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

برای لینک دادن به صفحه دیگر html که ممکن است داخلی یا خارجی باشد از تگ <a></a> استفاده می‌شود؛ این تک دو بخشی است که کلماتی که به لینک اشاره می‌کنند در بین آنها قرار می‌گیرند. با توجه به اینکه می‌خواهیم به صورت عملی با لینک کار کنیم، در ادامه مطالب آموزشی قبلی یک فولدر جدید به نام 005 ایجاد کنید و با باز کردن visual studio code و انتخاب آن به عنوان فولدر پروژه، یک فایل جدید html به نام Index.html در آنایجاد کنید. حال کدهای ابتدایی لازم برای یک صفحه html را همانطور که نحوه تولید سریع آنها را در مقالات قبلی گفتیم، ایجاد کنید. یک فایل دیگر هم در همان فولدر با کلیک روی new file در ویژوال استودیو کد ایجاد کنید و نام آن را example.html بگذارید. حال در داخل صفحه دوم، یعنی example.html کدهای زیر را بنویسید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsunweb Teaching</title>
</head>
<body>
    <p>Hello, this is the exmaple page...</p>
</body>
</html>

روی فایل اول یعنی فایل Index.html از روی پنل explorer در ویژوال استودیو کد کلیک کنید تا انتخاب شود و کدهای داخل آن را در داخل تگ body به این شکل بنویسید:

<body>
    <p>
        This is the first page. Please <a href="example.html"> Click here </a> to see the result.
    </p>
</body>

حال توسط یک مرورگر فایل Index.html را باز کنید، در این حالت مشاهده می‌کنید که عبارت Click here که بین تگ ابتدایی و نهایی قرار گرفته است، به صورت آبی رنگ و به شکل یک لینک قابل کلیک ایجاد شده است. حالا اگر روی آن کلیک کنید، به صفحه دوم یعنی example.html هدایت می‌شوید.

در مثال بالا در حقیقت برای لینک دادن به صفحه دوم از یک صفت یا attribute تگ <a> استفاده کردیم که href نام دارد. در واقع در این تگ از یک ویژگی جدید تگ‌ها یعنی attribute یا صفت نام بردیم. از صفت‌ها برای افزودن ویژگی‌های خاصی به هر تگ استفاده می‌کنیم. همیشه پس از هر صفت باید یک تساوی و سپس مقدار متناظر آنها را در دابل کوتیشن یا “” قرار دهیم. دقت کنید که اگر در داخل همین فولدر مثال ما بخواهید، یک فولدر دیگر (مثلا فولدر links) قرار داده و سپس فایل example.html را در داخل آن قرار داهید و بخواهید به آن لینک بدهید باید آدرس دهی در href به صورت “links/example.html” باشد؛ حال هر چقدر فولدرهای زیرمجموعه بیشتر باشند باید از یک اسلش دیگر و سپس نام آن فولدر استفاده کنید.

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

<body>
    <p>
        Please click on <a href="https://newsunweb.com/"> Newsunweb web page </a> to see the result.
    </p>
</body>

همانطور که مشاهده می‌کنید، در لینک دادن خارجی، باید آدرس هر لینک را به صورت کامل بنویسید (استفاده از http، https، www)، اما در لینک‌دادن به صفحات داخلی نیازی نیست. در واقع به آدرس دادن href به صورت لینک خارجی، آدرس‌دهی کامل یا absolute URL و به آدرس دادن آن به صورت لینک داخلی، relative URL یا آدرس‌دهی نسبی گفته می‌شود.

برخی صفت‌های یا خاصیت‌های هایپرلینک

بعضی صفت‌ها یا attributeهای خاص در تگ‌های html وجود دارند که برخی از آنها اجباری و تعدادی از آنها اختیاری هستند اما بکارگیری صحیح و ماهرانه همین تگ‌های اختیاری می‌توانند اهمیت زیادی داشته باشند و یا در سئوی سایت بسیار اهمیت داشته باشند. همانطور که ممکن است حدس زده باشید، تگ href که در بالا دیدید که معرف آدرس صفحه‌ای است که قرار است به آن هدایت شویم، اجباری است چرا که بدون وجود آن، هایپرلینک مفهوم خاصی ندارد و ما را به صفحه‌ای دیگر هدایت نخواهد کرد.برای مثال فرض کنید در تگ‌های خارجی که ما کاربر را به صفحه‌ای از یک سایت دیگر هدایت کردیم و کاربر شاید به بخش دیگری هم از سایت دوم وارد شده باشد، آنوقت کلا فراموش هم کند که از چه سایتی به آنجا هدایت شده است و کلا مطالب شما را از دست بدهد. راهکار چیست؟ در جواب باید گفت استفاده از یکی از صفت‌های این تگ به نام target که در ادامه در خصوص آن و سایر صفت‌ها توضیحاتی را خواهیم داد.

صفت target

اینجاست که پای صفت‌های دیگری از هایپرلینک <a> به مقاله ما باز می‌شود و آن صفت چیزی نیست جز target. در واقع target به یک لینک می‌گوید که در صورت کلیک کاربر بر روی آن به چه طریقی رفتار کند. این صفت مقادیر مشخصی می‌پذیرد که عبارتند از: _blank، _self، _top و _parent.

برای مثال کدهای زیر را بنویسید و با کلیک روی آنها تست کنید:

<body>
    <p>
        Please click on <a href="https://newsunweb.com/" target="_blanlK"> Newsunweb web page (blank) </a> to see the result.
    </p>
    <p>
        Please click on <a href="https://newsunweb.com/" target="_self"> Newsunweb web page (self) </a> to see the result.
    </p>
    <p>
        Please click on <a href="https://newsunweb.com/"> Newsunweb web page </a> to see the result.
    </p>
</body>

_blank برای باز کردن لینک در یک صفحه جدید به کار می‌رود و _self همان مقدار پیشفرض است که در همان تب کنونی، لینک را باز می‌کند. طبق این توضیحات، بین لینک دوم و سوم فرقی وجود ندارد و هر دو یک چیز هستند.

صفت title

صفت title که نباید آن را با تگ title که در head به کار گرفته می‌شود، اشتباه بگیرید، اگر در یک هایپرلینگ به کار گرفته شود، متن اختصاص یافته به آن به صورت یک متن در هنگامی که نشانگر ماوس روی آن برده می‌شود، ظاهر می‌شود و به نوعی یک راهنما یا توضیح اضافه (tooltip) در خصوص آن لینک است. کد زیر را در ویرایشگر کد ویژوال استودیو کد بنویسید و با باز کردن صفحه توسط مرورگر، ماوس را روی لینک آن قرار دهید تا نتیجه را ببینید.

<body>
    <p>
        Please click on <a href="#" title= "This is an additional information" >This link</a>.
    </p>
</body>

دقت کنید که در مثال بالا با توجه به اینکه این یک مثال آموزشی است و نخواستیم به جایی لینک بدهیم از یک # در صفت href استفاده کردیم که شما ممکن است هر آدرسی را در آن قرار دهید.

سوال: ممکن است بخواهید لینکی بسازید که کاربر را بر یک بخش از همین صفحه جاری هدایت کنید، آیا این امکان با استفاده از تگ <a> امکان پذیر است؟

در پاسخ به این سوال باید گفت بله، کافی است به آن تگ یا المان، یک صفت id با هر نام دلخواهی بدهید و سپس در href آن نام را پس از علامت # پیوند بدهید. برای مثال کدهای زیر را ببینید:

<body>
    <p>
        Please click to see the<a id="firstLink" href="#secondLink">second link</a>.
    </p>
    <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>
    <p>
        Please click to see the<a id= "secondLink" href= "#firstLink" >first link</a>.
    </p>
    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
</body>

در مثال بالا به شکل آماتوری از تعدادی br استفاده کردیم تا با با همین اطلاعاتی که تاکنون آموخته‌ایم بتوانیم نتیجه‌گیری لازم را بکنیم. همانطور که می‌بینید، اگر در مرورگر روی لینک اول کلیک کنید، به لینک دوم هدایت می‌شوید و برعکس.

صفت download

از صفت download وقتی استفاده می‌شود که بخواهیم آدرسی که به آن داده‌ایم با کلیک کاربر دانلود شود. برای مثال یک فایل pdf به نام file.pdf در همان فولدر 005 قرار دهید. کدهای زیر را نوشته و روی هر یک کلیک کنید؛ نتایج را ببینید و مقایسه کنید. البته دقت کنید که ممکن است این خاصیت یا صفت برای برخی مرورگرها عمل نکند.

<body>
    <p>
        See <a href="file.pdf">here</a>.
    </p>
    <p>
        Download from <a href= "file.pdf" download>here</a>.
    </p>
</body>

توجه کنید که اگر بخواهید فایل موردنظر شما با نام ترجیحی دیگری توسط کاربر ذخیره شود، کافی است که نام موردنظر را در صفت download قرار دهید مثلا: download=”prefered-name.pdf”.

لینک به ایمیل، شماره تلفن، واتساپ، تلگرام و … در html

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

لینک شماره تماس تلفنی و ارسال پیامک

برای ایجاد کردن لینک تماس تلفنی و ارسال پیامک به ترتیب می‌توانید از کدهای زیر استفاده کنید:

<body>
    <p>
       Call Newsunweb <a href= "tel:09124640064" >0912-4640064</a>
    </p>
    <p>
        Send sms to Newsunweb <a href= "sms:09124640064" >0912-4640064</a>
     </p>
</body>

در این حالت، چنانچه با استفاده از گوشی خود روی لینک کلیک کند، بخش تماس تلفنی یا پیامک از تلفن همراه وی باز می‌شود.

ساخت لینک ارسال ایمیل

برای ساخت ارسال ایمیل به ایمیلی خاص می‌توانید از کد زیر استفاده کنید:

<body>
    <p>
       Email someone by <p><a href= "mailto:someone@example.com" >Clicking here</a>.
    </p>
</body>

بدین منظور کافی است در خاصیت href، پس از mailto و دو نقطه، نام ایمیل موردنظر را بنویسید. در این حالت کاربر باید با برنامه ارسال ایمیل خودش، این لینک را باز کنید (مثلا Outlook) و اقدام به نوشتن ایمیل و ارسال آن کند.

لینک ارسال پیام به واتساپ

برای لینک دادن به واتساپ اگر از واتساپ شخصی یا معمولی استفاده می‌کنید، با استفاده از شماره تلفن باید لینک بدهید. در نوع تجاری یا business لینک دادن از دو طریق با استفاده از شماره و همچنین لینک کوتاهی که واتساپ به شما اختصاص داده است و در بخش Business Tools، بخش Short Links موجود است می‌توانید این امکان را فراهم کنید. اگر بخواهید یک متن پیش فرض در واتساپ برای ارسال توسط انتخاب شود هم می‌توانید از لینک سوم استفاده کنید:

<body>
    <p>
       Send me a message on whatsapp by <p> <a href="https://wa.me/+989124640064"> Clicking here </a>.
    </p>
    <p>
        Send me a message on whatsapp by <p> <a href="Your short link">Clicking here</a>.
     </p>
     <p>
        Send me a message on whatsapp by <p> <a href= "https://wa.me/+989124640064?text=Hello Newsunweb" > Clicking here </a>.
     </p>
</body>

همانطور که می‌بینید، در متن سوم، عبارت Hello Newsunweb به شماره موردنظر ارسال می‌شود.

لینک به آیدی تلگرام در html

برای لینک دادن به آیدی مشخصی از تلگرام در html از کد زیر استفاده کنید:

<body>
    <p>
      See our  <a href="https://www.t.me/your channel id"> telegram Channel </a> here.
    </p>
</body>

در کد بالا کافی است به جای your-channel_id، آیدی شخصی، کانال یا گروه را بنویسید تا کاربر با کلیک روی آن، به آیدی تلگرام مورد نظر شما هدایت شود.

لینک به اینستاگرام در html

برای لینک دادن به کانال اینستاگرام از کدهای html زیر استفاده کنید:

<body>
    <p>
      Click to follow <a href= "https://www.instagram.com/your instagram id/" >Your instagram</a> here.
    </p>
</body>

لینک به توییتر در html

برای لینک دادن به توییتر خود می‌توانید پس از ساخت آیدی در آن، به این شکل عمل کنید:

<body>
    <p>
      Click to see <a href= "http://twitter.com/your twitter id" >Your twitter</a> here.
    </p>
</body>

لینک به فیسبوک در html

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

<body>
    <p>
      Please like and follow us at <a href= "https://www.facebook .com/profile.php?id=xxx" > our facebook </a>.
    </p>
</body>

لینک به کانال آپارات در html

اگر بخواهید به کانال آپارات خود در آپارات لینک دهید، به این شکل عمل کنید:

<body>
    <p>
       Please visit our  <a href= "https://www.aparat.com/your aparat username" ></a>
    </p>
</body>

همانطور که می‌دانید به جای بخش آخر لینک باید نام کانال خود در آپارات را جایگزین کنید.

جمع‌بندی

اگر یک جمع‌بندی بخواهیم انجام دهیم، باید بگوییم که در این مقاله در خصوص هایپرلینک‌ها و صفات آن در html توضیحات و نکات لازم را با توضیحات مختلف ذکر کردیم. همچنین روش لینک دادن به برخی از شبکه ها‌ی اجتماعی، لینک ایمیل، تماس تلفنی، پیامک و … را نیز با مثال توضیح دهیم. در پایان اگر سوال خاصی وجود داشت، آن را مطرح کنید و چنانچه مطلبی جا مانده باشد، به همین پست اضافه خواهد شد. در بخش‌های مرتبط دیگر، مانند Styleها، CSS و سئو هم نکاتی برای این تگ وجود دارد که اگر با ما همراه باشید، نکات ضروری در همان بخش‌ها ذکر خواهد شد. در پایان لازم به یاد آوری است که استفاده بدون منبع از مطالب سایت شرعا و قانونا مشکل دارد.

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.