HTML Links - Create Bookmarks

HTML இணைப்புகளில் புத்தகக்குறிகள்

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

இந்த பக்கத்தில் செல்லவும்:

புத்தகக்குறி உருவாக்குதல் அதே பக்கத்தில் இணைப்பு வேறு பக்கத்தில் இணைப்பு நடைமுறை டெமோ பயிற்சி

📚 புத்தகக்குறிகள் எப்போது பயனுள்ளது?

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

HTML இல் புத்தகக்குறி உருவாக்குதல்

ஒரு புத்தகக்குறியை உருவாக்க - முதலில் புத்தகக்குறியை உருவாக்கவும், பின்னர் அதற்கு ஒரு இணைப்பைச் சேர்க்கவும்.

இணைப்பைக் கிளிக் செய்யும் போது, பக்கம் புத்தகக்குறி உள்ள இடத்திற்கு கீழே அல்லது மேலே உருளும்.

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

முதலில், id பண்பைப் பயன்படுத்தி ஒரு புத்தகக்குறியை உருவாக்கவும்:

<h2 id="C4">Chapter 4</h2>

id="C4" பகுதி புத்தகக்குறியை வரையறுக்கிறது. "C4" என்பது நீங்கள் தேர்ந்தெடுக்கும் ஏதேனும் பெயராக இருக்கலாம்.

id பண்பு

புத்தகக்குறிக்கான தனிப்பட்ட அடையாளத்தை வரையறுக்கிறது

id="unique-name"

மதிப்பு

எந்த HTML உறுப்புக்கும் புத்தகக்குறியைச் சேர்க்கலாம்

h1, h2, p, div போன்றவை

தனிப்பட்டதாக இருக்க வேண்டும்

ஒரே பக்கத்தில் ஒரே id மதிப்பை மீண்டும் பயன்படுத்தக்கூடாது

ஒவ்வொரு புத்தகக்குறிக்கும் தனிப்பட்ட பெயர்

அதே பக்கத்தில் புத்தகக்குறிக்கு இணைப்பு

பின்னர், அதே பக்கத்திலிருந்து புத்தகக்குறிக்கு ("Jump to Chapter 4") ஒரு இணைப்பைச் சேர்க்கவும்:

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

<a href="#C4">Jump to Chapter 4</a>

href="#C4" பகுதி புத்தகக்குறிக்கு இணைக்கிறது. # சின்னம் அது ஒரு பக்கத்திற்குள் உள்ள இணைப்பு என்பதைக் காட்டுகிறது.

முயற்சிக்கவும்:

இந்த இணைப்புகளைக் கிளிக் செய்யவும்:

அத்தியாயம் 1 க்குச் செல்லவும் அத்தியாயம் 2 க்குச் செல்லவும் அத்தியாயம் 3 க்குச் செல்லவும்

வேறு பக்கத்தில் புத்தகக்குறிக்கு இணைப்பு

நீங்கள் மற்றொரு பக்கத்தில் ஒரு புத்தகக்குறிக்கும் இணைப்பைச் சேர்க்கலாம்:

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

<a href="html_demo.html#C4">Jump to Chapter 4</a>

இந்த இணைப்பு "html_demo.html" என்ற கோப்பைத் திறந்து, அந்தப் பக்கத்தில் "C4" id உடன் உறுப்புக்குச் செல்லும்.

இணைப்பு வகை	எடுத்துக்காட்டு	விளக்கம்
அதே பக்கத்தில்	`<a href="#section1">`	தற்போதைய பக்கத்தில் உள்ள புத்தகக்குறிக்குச் செல்லும்
வேறு பக்கத்தில்	`<a href="page.html#section1">`	மற்றொரு பக்கத்தைத் திறந்து அதில் உள்ள புத்தகக்குறிக்குச் செல்லும்
வேறு தளத்தில்	`<a href="https://site.com/page#section">`	வெளி தளத்தில் உள்ள பக்கத்திற்குச் சென்று புத்தகக்குறிக்குச் செல்லும்

⚠️ முக்கிய குறிப்பு:

புத்தகக்குறியுடன் கூடிய இணைப்பு வேலை செய்ய, இலக்கு பக்கத்தில் அந்த id கொண்ட ஒரு உறுப்பு இருக்க வேண்டும். இல்லையெனில், இணைப்பு பக்கத்தின் மேல்பகுதிக்குச் செல்லும்.

நடைமுறை ஆர்ப்பாட்டம்

நீண்ட ஆவணத்திற்கான புத்தகக்குறிகளின் நடைமுறை பயன்பாட்டைக் கீழே காண்க:

அத்தியாயம் 1: HTML அறிமுகம்

HTML என்பது HyperText Markup Language என்பதன் சுருக்கம். இது வலைப்பக்கங்களை உருவாக்குவதற்கான நிலையான மார்க்அப் மொழியாகும்.

HTML உறுப்புகள் HTML பக்கங்களின் கட்டுமானத் தொகுதிகளைக் குறிக்கின்றன.

அடுத்த அத்தியாயத்திற்குச் செல்லவும்

அத்தியாயம் 2: அடிப்படை HTML குறிச்சொற்கள்

அனைத்து HTML ஆவணங்களும் சில அடிப்படை குறிச்சொற்களுடன் தொடங்க வேண்டும்:

<!DOCTYPE html> - ஆவண வகையை வரையறுக்கிறது
<html> - HTML ஆவணத்தின் மூல உறுப்பு
<head> - மெட்டாதரவைக் கொண்டுள்ளது
<body> - பக்க உள்ளடக்கத்தைக் கொண்டுள்ளது

அடுத்த அத்தியாயத்திற்குச் செல்லவும்

அத்தியாயம் 3: HTML உறுப்புகள் மற்றும் பண்புகள்

HTML உறுப்புகள் தொடக்க குறிச்சொல், உள்ளடக்கம் மற்றும் முடிக்கும் குறிச்சொல்லால் ஆனவை.

HTML பண்புகள் உறுப்புகள் பற்றிய கூடுதல் தகவலை வழங்குகின்றன.

எடுத்துக்காட்டு: <a href="https://jassifteam.com">Jassif Team</a>

இங்கு href ஒரு பண்பு மற்றும் அதன் மதிப்பு "https://jassifteam.com".

அடுத்த அத்தியாயத்திற்குச் செல்லவும்

அத்தியாயம் 4: HTML இணைப்புகள்

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

இணைப்பு தொடரியல்: <a href="url">link text</a>

புத்தகக்குறிகள் நீண்ட பக்கங்களுக்குள் குறிப்பிட்ட பகுதிகளுக்குச் செல்ல உதவுகின்றன.

முதல் அத்தியாயத்திற்குத் திரும்பவும்

💡 உண்மையான உலக பயன்பாடுகள்:

புத்தகக்குறிகள் பொதுவாகப் பயன்படுத்தப்படுகின்றன:

ஆவணங்களில் உள்ளடக்க அட்டவணைகளுக்கு
நீண்ட கட்டுரைகளில் பிரிவு செல்லுதலுக்கு
FAQ பக்கங்களில் கேள்விகளுக்கு
தயாரிப்பு ஆவணங்களில் பிரிவுகளுக்கு
ஒரே பக்கத்தில் பல தொகுதிகள் கொண்ட தளங்களில்

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

id பண்பைப் பயன்படுத்தவும் (id="மதிப்பு") ஒரு பக்கத்தில் புத்தகக்குறிகளை வரையறுக்க

href பண்பைப் பயன்படுத்தவும் (href="#மதிப்பு") புத்தகக்குறிக்கு இணைக்க

பக்கத்தின் பெயர் சேர்க்கவும் வெவ்வேறு பக்கத்தில் உள்ள புத்தகக்குறிக்கு இணைக்க (page.html#section)

முக்கிய புள்ளிகள்:

புத்தகக்குறி id கள் ஒரு பக்கத்தில் தனிப்பட்டதாக இருக்க வேண்டும்
# சின்னம் இணைப்பு அதே பக்கத்திற்குள் உள்ளது என்பதைக் குறிக்கிறது
புத்தகக்குறிகளை எந்த HTML உறுப்புக்கும் சேர்க்கலாம்
புத்தகக்குறிகளை உள்ளூர் மற்றும் வெளி பக்கங்களுக்குப் பயன்படுத்தலாம்

பயிற்சி

புத்தகக்குறியை உருவாக்க எந்த HTML பண்பு பயன்படுத்தப்படுகிறது?

The bookmark attribute (புத்தகக்குறி பண்பு)

✗ தவறு! HTML இல் "bookmark" என்ற பண்பு இல்லை

The anchor attribute (நங்கூரம் பண்பு)

✗ தவறு! "anchor" என்பது <a> குறிச்சொல்லைக் குறிக்கும், ஆனால் புத்தகக்குறியை உருவாக்க id பண்பு பயன்படுத்தப்படுகிறது

The id attribute (id பண்பு)

✓ சரி! id பண்பு HTML இல் புத்தகக்குறிகளை உருவாக்கப் பயன்படுகிறது

சரி பார்க்கவும்:

இந்த HTML குறியீடு புத்தகக்குறியை எவ்வாறு உருவாக்குகிறது:

<h2 id="chapter5">அத்தியாயம் 5</h2>

இந்த புத்தகக்குறிக்கு இணைக்க:

                    <a href="#chapter5">அத்தியாயம் 5 க்குச் செல்லவும்</a>
                

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

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

📖 குறிப்பு:

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