HTML உடல் குறிச்சொல்லின் அடிப்படைகள்

உடல் குறிச்சொல் (<body>) HTML ஆவணத்தின் முக்கிய பகுதியாகும். இது <html> குறிச்சொல்லுக்குள் அமைந்துள்ளது மற்றும் <head> குறிச்சொல்லைத் தொடர்ந்து வருகிறது. உடல் பகுதியில் உள்ள அனைத்தும் வலை உலாவியில் காட்டப்படும்.

ஒரு அடிப்படை HTML ஆவணத்தின் அமைப்பு:

<!DOCTYPE html> <html> <head> <title>பக்கத்தின் தலைப்பு</title> </head> <body> <h1>வணக்கம், உலகம்!</h1> <p>இது ஒரு பத்தி.</p> </body> </html>

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

உடல் குறிச்சொல்லுக்கான பண்புகள்

உடல் குறிச்சொல்லுக்கு பல பயனுள்ள பண்புகள் உள்ளன, அவை உங்கள் வலைப்பக்கத்தின் தோற்றத்தை மேம்படுத்த உதவுகின்றன:

  • style - உடல் பகுதிக்கு நேரடியாக CSS பாணிகளை விண்ணப்பிக்க
  • bgcolor - பின்னணி நிறத்தை அமைக்க (பழையது, CSS ஐப் பயன்படுத்துவது விரும்பத்தக்கது)
  • text - உரை நிறத்தை அமைக்க (பழையது, CSS ஐப் பயன்படுத்துவது விரும்பத்தக்கது)
  • background - பின்னணி படத்தை அமைக்க (பழையது, CSS ஐப் பயன்படுத்துவது விரும்பத்தக்கது)
  • onload - பக்கம் ஏற்றப்படும்போது JavaScript ஐ இயக்க
  • onunload - பயனர் பக்கத்தை விட்டு வெளியேறும்போது JavaScript ஐ இயக்க

இருப்பினும், நவீன வலை உருவாக்கத்தில், இந்த பண்புகளில் பெரும்பாலானவை CSS மூலம் கையாளப்படுகின்றன. எடுத்துக்காட்டாக:

<body style="background-color: #f0f0f0; color: #333; font-family: Arial, sans-serif;"> <!-- உள்ளடக்கம் இங்கே --> </body>

தனிப்பட்ட CSS கோப்புகளைப் பயன்படுத்துவது இன்னும் நல்ல நடைமுறையாகும், ஏனெனில் இது உங்கள் வடிவமைப்பு குறியீட்டை உங்கள் HTML இலிருந்து பிரிக்கிறது, மேலும் பராமரிப்பை எளிதாக்குகிறது.

வலைப்பக்கத்தில் உடல் குறிச்சொல்லின் முக்கியத்துவம்

உடல் குறிச்சொல் வலைப்பக்கத்தின் உள்ளடக்கத்தை உள்ளடக்கியதால், அதன் முக்கியத்துவத்தை மிகைப்படுத்த முடியாது. இங்கே உடல் குறிச்சொல் ஏன் முக்கியம் என்பதற்கான சில காரணங்கள்:

  • உள்ளடக்க கொள்கலன் - இது பயனர் பார்க்கும் அனைத்து உள்ளடக்கத்தையும் கொண்டுள்ளது
  • DOM கட்டமைப்பு - உடல் குறிச்சொல் ஆவணத்தின் ஒட்டுமொத்த DOM கட்டமைப்பின் ஒரு முக்கிய பகுதியாகும்
  • நிகழ்வு கையாளுதல் - பல JavaScript நிகழ்வுகள் (onload, onclick, போன்றவை) உடல் குறிச்சொல்லுடன் தொடர்புடையவை
  • CSS அணிகலன் - பல CSS பாணிகள் உடல் குறிச்சொல்லில் இருந்து தொடங்கி பரம்பரையாக கடத்தப்படுகின்றன

அனைத்து வலைப்பக்கங்களும் ஒரு உடல் குறிச்சொல் தேவைப்படுகிறது. இது இல்லாமல், உலாவிகள் எந்த உள்ளடக்கத்தையும் காட்ட முடியாது. HTML5 இல், <body> குறிச்சொல் தேவைப்படுகிறது, மற்றும் அதை விட்டுவிட்டால், உலாவி அதை தானாகவே சேர்க்கும்.

உடல் குறிச்சொல்லின் முக்கியத்துவத்தை காட்டும் ஒரு எடுத்துக்காட்டு:

<!DOCTYPE html> <html lang="ta"> <head> <meta charset="UTF-8"> <title>எனது வலைப்பக்கம்</title> <link rel="stylesheet" href="styles.css"> </head> <body class="homepage" id="top"> <header> <h1>என்னுடைய அற்புதமான வலைத்தளம்</h1> </header> <main> <article> <p>என் வலைத்தளத்திற்கு வரவேற்கிறேன்!</p> </article> </main> <footer> <p>பதிப்புரிமை © 2023</p> </footer> </body> </html>

உடல் குறிச்சொல்லுடன் DOM ஊடாடல்

JavaScript மூலம் உடல் குறிச்சொல்லுடன் ஊடாடுவது வலை மேம்பாட்டில் ஒரு பொதுவான நடைமுறையாகும். DOM (Document Object Model) ஐப் பயன்படுத்தி, நீங்கள் உடல் குறிச்சொல்லை அணுகி அதன் பண்புகளை மாற்றலாம்.

JavaScript இல் உடல் குறிச்சொல்லை அணுகுவதற்கான சில வழிகள்:

// உடல் குறிச்சொல்லை அணுகுதல் const body = document.body; // பண்புகளை மாற்றுதல் body.style.backgroundColor = '#f0f0f0'; body.style.color = '#333'; // உடல் குறிச்சொல்லில் உள்ளடக்கத்தைச் சேர்த்தல் const newParagraph = document.createElement('p'); newParagraph.textContent = 'இது JavaScript மூலம் சேர்க்கப்பட்டது!'; body.appendChild(newParagraph); // நிகழ்வு கையாளிகளைச் சேர்த்தல் body.onload = function() { console.log('பக்கம் முழுமையாக ஏற்றப்பட்டது!'); }; body.addEventListener('click', function(event) { console.log('நீங்கள் பக்கத்தில் கிளிக் செய்தீர்கள்!', event); });

DOM ஊடாடல் மூலம், நீங்கள் பயனர் செயல்களுக்கு பதிலளிக்கும் ஊடாடும் வலைப்பக்கங்களை உருவாக்கலாம். நவீன வலை மேம்பாட்டில், JavaScript கட்டமைப்புகள் மற்றும் நூலகங்கள் இந்த செயல்முறையை எளிதாக்குகின்றன, ஆனால் அடிப்படை DOM கருத்துக்களைப் புரிந்துகொள்வது இன்னும் முக்கியமானது.

உடல் குறிச்சொல்லில் தளவமைப்பு மற்றும் CSS

CSS (Cascading Style Sheets) மூலம் உடல் குறிச்சொல்லை வடிவமைப்பது உங்கள் வலைப்பக்கத்தின் ஒட்டுமொத்த தோற்றத்தை நிர்வகிக்க ஒரு சிறந்த வழியாகும். உடல் குறிச்சொல்லை இலக்காகக் கொண்ட CSS விதிகள் முழு வலைப்பக்கத்திற்கும் பொருந்தும்.

உடல் குறிச்சொல்லை வடிவமைக்க CSS ஐப் பயன்படுத்தும் எடுத்துக்காட்டுகள்:

/* தனி CSS கோப்பில் */ body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; } /* உடல் குறிச்சொல்லில் உள்ள அனைத்து பத்திகளுக்கும் பாணிகள் */ body p { margin-bottom: 15px; } /* குறிப்பிட்ட வகுப்புகளைக் கொண்ட உடல் குறிச்சொல்லுக்கான பாணிகள் */ body.homepage { background-image: url('background.jpg'); background-size: cover; } /* அச்சிடும்போது உடல் குறிச்சொல்லுக்கான பாணிகள் */ @media print { body { background-color: white; color: black; font-size: 12pt; } }

உடல் குறிச்சொல்லுக்கான தளவமைப்பு தொடர்பான சில முக்கிய கருத்துக்கள்:

  • வளைந்த தளவமைப்பு - பல சாதனங்களில் சரியாகக் காட்ட CSS மீடியா விசாரணைகளைப் பயன்படுத்துதல்
  • வலைப்பக்க ஓட்டம் - உள்ளடக்கத்தை எவ்வாறு வெளிப்படுத்துவது என்பதை நிர்வகிக்க overflow, height, width பண்புகளைப் பயன்படுத்துதல்
  • அடிப்படை பாணிகள் - உடல் குறிச்சொல்லில் அமைக்கப்பட்ட அடிப்படை பாணிகள் பெரும்பாலும் இறங்கும் வரிசையில் குழந்தை கூறுகளுக்கு கடத்தப்படுகின்றன

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