HTML Attributes

HTML பண்புக்கூறுகள்

HTML பண்புக்கூறுகள்

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

HTML பண்புக்கூறுகள்

💡 அடிப்படை வடிவம்:

<tagname attribute="value">உள்ளடக்கம்</tagname>

href பண்புக்கூறு

<a> குறிச்சொல் ஒரு ஹைப்பர்லிங்கை வரையறுக்கிறது. href பண்புக்கூறு இணைப்பு செல்லும் பக்கத்தின் URL ஐக் குறிப்பிடுகிறது:

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

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

இணைப்புகள் பற்றி மேலும் எங்கள் HTML இணைப்புகள் அத்தியாயத்தில் கற்றுக்கொள்வீர்கள்.

href பண்புக்கூறு

இணைப்பின் இலக்கைக் குறிப்பிடுகிறது

முழு URL

href="https://www.example.com"

src பண்புக்கூறு

<img> குறிச்சொல் ஒரு படத்தை HTML பக்கத்தில் உட்பொதிக்கப் பயன்படுகிறது. src பண்புக்கூறு காட்சிப்படுத்தப்பட வேண்டிய படத்தின் பாதையைக் குறிப்பிடுகிறது:

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

<img src="girl_image.jpg">

src பண்புக்கூறில் URL ஐக் குறிப்பிட இரண்டு வழிகள் உள்ளன:

1. முழுமையான URL

மற்றொரு வலைத்தளத்தில் ஹோஸ்ட் செய்யப்பட்ட வெளிப்புற படத்திற்கான இணைப்புகள்.

எடுத்துக்காட்டு: src="https://www.jassifteam.com/images/girl_image.jpg"

⚠️ குறிப்புகள்:

வெளிப்புற படங்கள் பதிப்புரிமையின் கீழ் இருக்கலாம். அதைப் பயன்படுத்த அனுமதி பெறவில்லை என்றால், நீங்கள் பதிப்புரிமைச் சட்டங்களை மீறலாம். கூடுதலாக, நீங்கள் வெளிப்புற படங்களைக் கட்டுப்படுத்த முடியாது; அது திடீரென நீக்கப்படலாம் அல்லது மாற்றப்படலாம்.

2. தொடர்புடைய URL

வலைத்தளத்திற்குள் ஹோஸ்ட் செய்யப்பட்ட ஒரு படத்திற்கான இணைப்புகள்.

இங்கே, URL இல் டொமைன் பெயர் சேர்க்கப்படவில்லை. URL ஒரு சாய்வு இல்லாமல் தொடங்கினால், அது தற்போதைய பக்கத்துடன் தொடர்புடையதாக இருக்கும்.

எடுத்துக்காட்டு: src="images/girl_image.jpg"

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

தொடர்புடைய URLகளைப் பயன்படுத்துவது கிட்டத்தட்ட எப்போதும் சிறந்தது. நீங்கள் டொமைனை மாற்றினால் அவை உடைக்காது.

width மற்றும் height பண்புக்கூறுகள்

<img> குறிச்சொல் width மற்றும் height பண்புக்கூறுகளையும் கொண்டிருக்க வேண்டும், அவை படத்தின் அகலம் மற்றும் உயரத்தை (பிக்சல்களில்) குறிப்பிடுகின்றன:

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

<img src="girl_image.jpg" width="500" height="600">

📐 சிறந்த நடைமுறை:

பக்க லேஅவுட்டை முன்கூட்டியே ஒதுக்குவதற்கும் பக்க ஏற்றுதல் வேகத்தை மேம்படுத்துவதற்கும் எப்போதும் படங்களுக்கு width மற்றும் height பண்புக்கூறுகளைச் சேர்க்கவும்.

alt பண்புக்கூறு

<img> குறிச்சொல்லின் தேவையான alt பண்புக்கூறு ஒரு படத்திற்கு மாற்று உரையைக் குறிப்பிடுகிறது, படம் ஏதோ காரணத்திற்காக காட்சிப்படுத்த முடியாவிட்டால். இது மெதுவான இணைப்பு, அல்லது src பண்புக்கூறில் பிழை, அல்லது பயனர் திரை வாசிப்பான் பயன்படுத்தினால் காரணமாக இருக்கலாம்.

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

<img src="girl_image.jpg" alt="Girl with a jacket">

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

இல்லாத ஒரு படத்தைக் காட்சிப்படுத்த முயற்சித்தால் என்ன நடக்கும் என்று பாருங்கள்:

<img src="image_typo.jpg" alt="Girl with a jacket">

படங்கள் பற்றி மேலும் எங்கள் HTML படங்கள் அத்தியாயத்தில் கற்றுக்கொள்வீர்கள்.

♿ அணுகல்தன்மை:

alt பண்புக்கூறு பார்வையற்ற பயனர்கள் மற்றும் திரை வாசிப்பாளர்கள் பயன்படுத்துபவர்களுக்கு அவசியமானது. எப்போதும் உங்கள் படங்களுக்கு அர்த்தமுள்ள alt உரையை வழங்கவும்.

style பண்புக்கூறு

style பண்புக்கூறு ஒரு உறுப்பிற்கு நிறங்கள், எழுத்துரு, அளவு மற்றும் பலவற்றைச் சேர்ப்பதற்குப் பயன்படுகிறது.

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

<p style="color:red;">This is a red paragraph.</p>

எங்கள் HTML ஸ்டைல்கள் அத்தியாயத்தில் ஸ்டைல்கள் பற்றி மேலும் கற்றுக்கொள்வீர்கள்.

நிறம்

style="color:red;"

எழுத்துரு அளவு

style="font-size:20px;"

பின்னணி நிறம்

style="background-color:yellow;"

lang பண்புக்கூறு

வலைப்பக்கத்தின் மொழியை அறிவிக்க, <html> குறிச்சொல்லின் உள்ளே lang பண்புக்கூறை எப்போதும் சேர்க்க வேண்டும். இது தேடுபொறிகள் மற்றும் உலாவிகளுக்கு உதவுவதற்காக உள்ளது.

பின்வரும் எடுத்துக்காட்டு ஆங்கிலத்தை மொழியாகக் குறிப்பிடுகிறது:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

நாட்டுக் குறியீடுகளையும் lang பண்புக்கூறில் மொழிக் குறியீட்டுடன் சேர்க்கலாம். எனவே, முதல் இரண்டு எழுத்துக்கள் HTML பக்கத்தின் மொழியை வரையறுக்கின்றன, மற்றும் கடைசி இரண்டு எழுத்துக்கள் நாட்டை வரையறுக்கின்றன.

பின்வரும் எடுத்துக்காட்டு ஆங்கிலத்தை மொழியாகவும் ஐக்கிய அமெரிக்காவை நாடாகவும் குறிப்பிடுகிறது:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

எங்கள் HTML மொழிக் குறியீட்டுக் குறிப்பில் அனைத்து மொழிக் குறியீடுகளையும் பார்க்கலாம்.

title பண்புக்கூறு

title பண்புக்கூறு ஒரு உறுப்பைப் பற்றிய சில கூடுதல் தகவல்களை வரையறுக்கிறது.

title பண்புக்கூறின் மதிப்பு நீங்கள் உறுப்பின் மீது சுட்டியை நகர்த்தும் போது ஒரு கருவி உதவியாகக் காட்சிப்படுத்தப்படும்:

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

<p title="I'm a tooltip">This is a paragraph.</p>

ℹ️ கருவி உதவி:

title பண்புக்கூறு மறைக்கப்பட்ட தகவல்களை வழங்குவதற்கு அல்லது கூடுதல் விளக்கத்திற்கு சிறந்தது, ஆனால் அத்தியாவசிய தகவல்களுக்குப் பயன்படுத்தக்கூடாது.

சிறிய எழுத்துப் பண்புக்கூறுகளைப் பயன்படுத்த பரிந்துரைக்கிறோம்

HTML தரநிலை சிறிய எழுத்துப் பண்புக்கூறு பெயர்களைத் தேவைப்படுத்தாது.

title பண்புக்கூறு (மற்றும் அனைத்து பிற பண்புக்கூறுகளும்) title அல்லது TITLE போன்ற பெரிய எழுத்து அல்லது சிறிய எழுத்தில் எழுதப்படலாம்.

இருப்பினும், W3C HTML இல் சிறிய எழுத்துப் பண்புக்கூறுகளைப் பரிந்துரைக்கிறது, மேலும் XHTML போன்ற கடுமையான ஆவண வகைகளுக்கு சிறிய எழுத்துப் பண்புக்கூறுகளைக் கோருகிறது.

📝 Jassif Team பரிந்துரை:

Jassif Team இல் நாங்கள் எப்போதும் சிறிய எழுத்துப் பண்புக்கூறு பெயர்களைப் பயன்படுத்துகிறோம்.

பண்புக்கூறு மதிப்புகளை மேற்கோள் குறிகளில் எழுத பரிந்துரைக்கிறோம்

HTML தரநிலை பண்புக்கூறு மதிப்புகளைச் சுற்றி மேற்கோள் குறிகளைத் தேவைப்படுத்தாது.

இருப்பினும், W3C HTML இல் மேற்கோள் குறிகளைப் பரிந்துரைக்கிறது, மேலும் XHTML போன்ற கடுமையான ஆவண வகைகளுக்கு மேற்கோள் குறிகளைக் கோருகிறது.

நல்லது:

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

மோசமானது:

<a href=https://www.jassifteam.com/html/>Visit our HTML tutorial</a>

சில நேரங்களில் நீங்கள் மேற்கோள் குறிகளைப் பயன்படுத்த வேண்டும். இந்த எடுத்துக்காட்டு title பண்புக்கூறை சரியாகக் காட்சிப்படுத்தாது, ஏனெனில் அதில் ஒரு இடைவெளி உள்ளது:

<p title=Description of Jassif Team>

💡 Jassif Team பரிந்துரை:

Jassif Team இல் நாங்கள் எப்போதும் பண்புக்கூறு மதிப்புகளைச் சுற்றி மேற்கோள் குறிகளைப் பயன்படுத்துகிறோம்.

ஒற்றை அல்லது இரட்டை மேற்கோள் குறிகள்?

பண்புக்கூறு மதிப்புகளைச் சுற்றி இரட்டை மேற்கோள் குறிகள் HTML இல் மிகவும் பொதுவானவை, ஆனால் ஒற்றை மேற்கோள் குறிகளையும் பயன்படுத்தலாம்.

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

<p title='John "ShotGun" Nelson'>

அல்லது நேர்மாறாக:

<p title="John 'ShotGun' Nelson">

🔤 நிலைத்தன்மை:

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

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

பயிற்சிகள் மூலம் கற்றல்

❓ பின்வருவனவற்றில் எது HTML பண்புக்கூறைப் பயன்படுத்துவதற்கான சரியான தொடரியல்?

<img src='girl_image.jpg'>
✓ சரி! இது HTML பண்புக்கூறுக்கான சரியான தொடரியல்
<img src('girl_image.jpg')>
✗ தவறு! HTML பண்புக்கூறுகள் அடைப்புக்குறிகளைப் பயன்படுத்தாது
<img src:'girl_image.jpg'>
✗ தவறு! HTML பண்புக்கூறுகள் பெருங்குடலைப் பயன்படுத்தாது