HTML Links

ஹைப்பர்லிங்குகள் மற்றும் வலை இணைப்புகளை உருவாக்குங்கள்

HTML Links - ஹைப்பர்லிங்குகள்

கிட்டத்தட்ட அனைத்து வலைப்பக்கங்களிலும் இணைப்புகள் காணப்படுகின்றன. பயனர்கள் ஒரு பக்கத்திலிருந்து மற்றொரு பக்கத்திற்கு கிளிக் செய்து செல்ல இணைப்புகள் அனுமதிக்கின்றன.

HTML இணைப்புகள் ஹைப்பர்லிங்குகள் ஆகும்.

நீங்கள் ஒரு இணைப்பைக் கிளிக் செய்து மற்றொரு ஆவணத்திற்குச் செல்லலாம்.

நீங்கள் சுட்டியை ஒரு இணைப்பின் மேல் நகர்த்தும்போது, சுட்டி அம்பு ஒரு சிறிய கையாக மாறும்.

💡 குறிப்பு:

ஒரு இணைப்பு உரையாக இருக்க வேண்டிய அவசியமில்லை. ஒரு இணைப்பு ஒரு படமாகவோ அல்லது வேறு எந்த HTML உறுப்பாகவோ இருக்கலாம்!

ஒரு இணைப்பு எடுத்துக்காட்டு (முயற்சிக்கவும்!)

HTML Links - தொடரியல்

HTML <a> குறிச்சொல் ஒரு ஹைப்பர்லிங்கை வரையறுக்கிறது. இது பின்வரும் தொடரியலைக் கொண்டுள்ளது:

<a href="url">link text</a>

<a> உறுப்பின் மிக முக்கியமான பண்பு href பண்பாகும், இது இணைப்பின் இலக்கைக் குறிக்கிறது.

இணைப்பு உரை என்பது வாசகருக்குப் புலப்படும் பகுதியாகும்.

இணைப்பு உரையைக் கிளிக் செய்வது, வாசகரைக் குறிப்பிடப்பட்ட URL முகவரிக்கு அனுப்பும்.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டு JassifTeam.com க்கு ஒரு இணைப்பை எவ்வாறு உருவாக்குவது என்பதைக் காட்டுகிறது:

<a href="https://www.jassifteam.com/">Visit JassifTeam.com!</a>

இயல்பாக, இணைப்புகள் அனைத்து உலாவிகளிலும் பின்வருமாறு தோன்றும்:

பார்வையிடாத இணைப்பு

அடிக்கோடிட்டு மற்றும் நீல நிறத்தில் இருக்கும்

பார்வையிட்ட இணைப்பு

அடிக்கோடிட்டு மற்றும் ஊதா நிறத்தில் இருக்கும்

செயலில் உள்ள இணைப்பு

அடிக்கோடிட்டு மற்றும் சிவப்பு நிறத்தில் இருக்கும்

🎨 உதவிக்குறிப்பு:

இணைப்புகளை CSS உடன் வடிவமைக்கலாம், வேறு தோற்றத்தைப் பெற!

HTML Links - target பண்பு

இயல்பாக, இணைக்கப்பட்ட பக்கம் தற்போதைய உலாவி சாளரத்தில் காட்சிப்படுத்தப்படும். இதை மாற்ற, நீங்கள் இணைப்புக்கு மற்றொரு இலக்கைக் குறிப்பிட வேண்டும்.

target பண்பு இணைக்கப்பட்ட ஆவணத்தை எங்கு திறக்க வேண்டும் என்பதைக் குறிக்கிறது.

target பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

மதிப்பு விளக்கம்
_self இயல்புநிலை. கிளிக் செய்யப்பட்ட அதே சாளரம்/தத்தலில் ஆவணத்தைத் திறக்கிறது
_blank ஒரு புதிய சாளரம் அல்லது தத்தலில் ஆவணத்தைத் திறக்கிறது
_parent பெற்றோர் பிரேமில் ஆவணத்தைத் திறக்கிறது
_top சாளரத்தின் முழு உடலில் ஆவணத்தைத் திறக்கிறது

எடுத்துக்காட்டு

இணைக்கப்பட்ட ஆவணத்தை ஒரு புதிய உலாவி சாளரம் அல்லது தத்தலில் திறக்க target="_blank" ஐப் பயன்படுத்தவும்:

<a href="https://www.jassifteam.com/" target="_blank">Visit Jassif Team!</a>

முயற்சிக்கவும்: Jassif Team இணையதளம் (புதிய தத்தலில்)

Absolute URLs vs Relative URLs

மேலே உள்ள இரண்டு எடுத்துக்காட்டுகளும் href பண்பில் ஒரு முழுமையான URL (ஒரு முழு வலை முகவரி) பயன்படுத்துகின்றன.

ஒரு உள்ளூர் இணைப்பு (அதே வலைத்தளத்திற்குள் ஒரு பக்கத்திற்கான இணைப்பு) ஒரு சார்பு URL உடன் குறிப்பிடப்படுகிறது ("https://www" பகுதி இல்லாமல்):

எடுத்துக்காட்டு

<h2>Absolute URLs</h2>
<p><a href="https://www.jassifteam.org/">Jassif Team Foundation</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

Absolute URLs

முழு வலை முகவரி (https://...)

வெளி வலைத்தளங்களுக்குப் பயன்படுத்தப்படுகிறது

Relative URLs

சார்பு பாதை (html_images.asp, /css/default.asp)

அதே வலைத்தளத்திற்குள் உள்ள பக்கங்களுக்குப் பயன்படுத்தப்படுகிறது

HTML Links - படத்தை இணைப்பாகப் பயன்படுத்துதல்

ஒரு படத்தை இணைப்பாகப் பயன்படுத்த, <img> குறிச்சொல்லை <a> குறிச்சொல்லுக்குள் வைக்கவும்:

எடுத்துக்காட்டு

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

முயற்சிக்கவும்: Jassif Team Tutorial ← இந்த படத்தைக் கிளிக் செய்யவும்

மின்னஞ்சல் முகவரிக்கு இணைப்பு

பயனரின் மின்னஞ்சல் நிரலைத் திறக்கும் ஒரு இணைப்பை உருவாக்க href பண்புக்குள் mailto: ஐப் பயன்படுத்தவும் (அவர்கள் புதிய மின்னஞ்சலை அனுப்ப அனுமதிக்க):

எடுத்துக்காட்டு

<a href="mailto:someone@example.com">Send email</a>

📧 உதவிக்குறிப்பு:

நீங்கள் மின்னஞ்சல் பாடப்பொருள், தலைப்பு மற்றும் உரையையும் சேர்க்கலாம்:

<a href="mailto:someone@example.com?subject=Hello&body=Message">Send email</a>

பட்டனை இணைப்பாகப் பயன்படுத்துதல்

ஒரு HTML பட்டனை இணைப்பாகப் பயன்படுத்த, நீங்கள் சில JavaScript குறியீட்டைச் சேர்க்க வேண்டும்.

JavaScript ஒரு குறிப்பிட்ட நிகழ்வுகளில் என்ன நடக்க வேண்டும் என்பதைக் குறிப்பிட அனுமதிக்கிறது, எடுத்துக்காட்டாக ஒரு பட்டனைக் கிளிக் செய்யும் போது:

எடுத்துக்காட்டு

<button onclick="document.location='default.asp'">HTML Tutorial</button>

📚 உதவிக்குறிப்பு:

எங்கள் JavaScript டுடோரியலில் JavaScript பற்றி மேலும் அறியலாம்.

இணைப்பு தலைப்புகள்

title பண்பு ஒரு உறுப்பைப் பற்றிய கூடுதல் தகவலைக் குறிக்கிறது. இந்த தகவல் பெரும்பாலும் சுட்டி உறுப்பின் மேல் நகரும் போது ஒரு கருவி உரையாகக் காட்டப்படும்.

எடுத்துக்காட்டு

<a href="https://www.jassifteam.com/html/" title="Go to Jassif Team HTML section">
  Visit our HTML Tutorial
</a>

முயற்சிக்கவும்: எங்கள் HTML டுடோரியலைப் பார்வையிடவும் (title உடன்)

Absolute URLs மற்றும் Relative URLs பற்றி மேலும்

எடுத்துக்காட்டு 1

ஒரு வலைப்பக்கத்துடன் இணைக்க முழு URL ஐப் பயன்படுத்தவும்:

<a href="https://www.jassifteam.com/html/default.asp">
  HTML tutorial
</a>

எடுத்துக்காட்டு 2

தற்போதைய வலைத்தளத்தில் html கோப்புறையில் அமைந்துள்ள ஒரு பக்கத்துடன் இணைக்கவும்:

<a href="/html/default.asp">
  HTML tutorial
</a>

எடுத்துக்காட்டு 3

தற்போதைய பக்கத்தின் அதே கோப்புறையில் அமைந்துள்ள ஒரு பக்கத்துடன் இணைக்கவும்:

<a href="default.asp">
  HTML tutorial
</a>

நீங்கள் HTML File Paths அத்தியாயத்தில் கோப்புப் பாதைகளைப் பற்றி மேலும் அறியலாம்.

அத்தியாய சுருக்கம்

<a> உறுப்பை இணைப்பை வரையறுக்கப் பயன்படுத்தவும்
href பண்பை இணைப்பு முகவரியை வரையறுக்கப் பயன்படுத்தவும்
target பண்பை இணைக்கப்பட்ட ஆவணத்தை எங்கு திறக்க வேண்டும் என வரையறுக்கப் பயன்படுத்தவும்
<img> உறுப்பை (<a> உள்ளே) படத்தை இணைப்பாகப் பயன்படுத்தப் பயன்படுத்தவும்
mailto: திட்டத்தை href பண்புக்குள் பயனரின் மின்னஞ்சல் நிரலைத் திறக்கும் இணைப்பை உருவாக்கப் பயன்படுத்தவும்

பயிற்சி

HTML ஹைப்பர்லிங்கிற்கான சரியான தொடரியல் எது?

<a href='/home.htm'>Visit Jassif Team!</a>
✓ சரி! <a> குறிச்சொல் ஹைப்பர்லிங்குகளுக்குப் பயன்படுத்தப்படுகிறது
<link href='/home.htm'>Visit Jassif Team!</link>
✗ தவறு! <link> குறிச்சொல் வெளி வளங்களை இணைக்கப் பயன்படுகிறது (CSS போன்றவை)
<alink href='/home.htm'>Visit Jassif Team!</alink>
✗ தவறு! <alink> என்பது செல்லுபடியாகும் HTML குறிச்சொல் அல்ல

HTML Link குறிச்சொற்கள்

குறிச்சொல் விளக்கம்
<a> ஒரு ஹைப்பர்லிங்கை வரையறுக்கிறது

📖 குறிப்பு:

அனைத்து கிடைக்கக்கூடிய HTML குறிச்சொற்களின் முழுமையான பட்டியலுக்கு, எங்கள் HTML Tag Reference ஐப் பார்வையிடவும்.