# HTML, CSS, and JavaScript: what does each one do?

> The three building blocks of every website, explained with a simple analogy.

*Source: https://velstech.net/html-css-js.ta (Tamil translation of https://velstech.net/html-css-js) · Updated: 2026-08-24*

*Markdown version. [Read the interactive guide](https://velstech.net/html-css-js.ta). English Markdown: https://velstech.net/html-css-js.md.*

---

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

## வீட்டு ஒப்பீடு

இணையதளத்தை ஒரு வீடாக நினையுங்கள்:

- HTML கட்டமைப்பு – அறைகள், சுவர்கள், கதவுகள். "இதோ ஒரு தலைப்பு, இதோ ஒரு பத்தி, இதோ ஒரு பட்டன்."

- CSS அலங்காரம் – வண்ணம், வால்பேப்பர், தளபாடங்கள், விளக்குகள். "தலைப்பு நீலமாகவும் பெரியதாகவும் உள்ளது, பட்டன் வட்டமானது, பக்கத்தில் ஓரங்கள் உள்ளன."

- JavaScript மின்சாரம் – விஷயங்களை நடக்க வைக்கும் வயரிங். "நீங்கள் பட்டனைக் கிளிக் செய்யும்போது, ஒரு மெனுவைத் திறக்கவும்."

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

## HTML: எலும்புக்கூடு

HTML (HyperText Markup Language) பக்கத்தில் *என்ன இருக்கிறது* என்பதை
வரையறுக்கிறது. இது உண்மையில் ஒரு நிரலாக்க மொழி அல்ல – இது ஒரு மார்க்அப் மொழி.
அது உள்ளடக்கத்தை டேக்குகளில் சுற்றுகிறது:

```
Welcome to VelsTech

This is a paragraph of text.

Click me
```

ஒவ்வொரு டேக்கும் அதன் உள்ளடக்கத்தை விவரிக்கிறது: `` முக்கிய
தலைப்பு, `

` ஒரு பத்தி, `` ஒரு படம்,
`` ஒரு இணைப்பு. உலாவி இந்த கட்டமைப்பைப் படித்து பக்கத்தை எவ்வாறு
அமைப்பது என்று அறியும்.

## CSS: தோற்றம்

CSS (Cascading Style Sheets) *அது எப்படி இருக்கிறது* என்பதைக் கட்டுப்படுத்துகிறது.
அது உறுப்புகளைத் தேர்ந்தெடுத்து பாணிகளைப் பயன்படுத்துகிறது:

```
h1 {
  color: #4cc2ff;
  font-size: 3rem;
}

button {
  background: #4cc2ff;
  border-radius: 8px;
  padding: 12px 24px;
}
```

"cascading" என்ற பெயர் பாணிகள் அடுக்குகளில் பயன்படுத்தப்படுவதையும், பெறக்கூடியதாகவும்
இருப்பதைக் குறிக்கிறது. ஒரு CSS விதி தளத்தின் அனைத்து தலைப்புகளையும் ஒரே நேரத்தில்
மறுசீரமைக்க முடியும் – அதனால்தான் CSS மறுவடிவமைப்பை ஒரு கோப்பு வேலையாக
ஆக்குகிறது.

## JavaScript: நடத்தை

JavaScript பக்கத்தை *விஷயங்களைச் செய்ய* வைக்கிறது. மூன்றில் ஒரே உண்மையான
நிரலாக்க மொழி இது தான், லாஜிக் உடன்:

```
const button = document.querySelector("button");

button.addEventListener("click", () => {
  alert("You clicked me!");
});
```

JS ஏற்றப்பட்ட பிறகு பக்கத்தைப் படிக்கவும் மாற்றவும், கிளிக்குகள் மற்றும் கீஸ்ட்ரோக்குகளுக்கு
பதிலளிக்கவும், சர்வர்களிடமிருந்து தரவைப் பெறவும், முழு ஆப்களையும் உருவாக்கவும்
முடியும். இந்த பக்கத்தின் தீம் மாற்றி மற்றும் வண்ண தட்டு? அது JavaScript வேலை.

## ஒரு கோப்பில் அவை எவ்வாறு இணைகின்றன

```

    body { background: #0b0f14; }

  Hello!

    alert("Hi");

```

உண்மையான தளங்களில் இவை தனி கோப்புகளில் (`index.html`,
`styles.css`, `script.js`) வாழ்ந்து ஒன்றாக இணைக்கப்படுகின்றன –
இந்த தளம் ஒழுங்கமைக்கப்பட்ட விதம் அப்படியே இது.

## ஒவ்வொன்றும் ஏன் முக்கியம்

```
Layer          Job                 Who touches it
──────────────────────────────────────────────
HTML           Structure/content   Everyone (even non-coders can read it)
CSS            Look and feel       Design-minded people love this
JavaScript     Behavior/logic      Programmers
```

## எப்படி தொடங்குவது

ஒரு டெக்ஸ்ட் எடிட்டர் மற்றும் உலாவி மட்டுமே இருந்தால் இப்போதே தொடங்கலாம்:

- Notepad/VS Code ஐத் திறந்து சில HTML டேக்குகளை எழுதுங்கள்.

- index.html என்று சேமித்து உங்கள் உலாவியில் திறக்கவும்.

- ஒரு  பிளாக்கைச் சேர்த்து சில வண்ணங்களை மாற்றவும்.

- ஒரு  பிளாக்கைச் சேர்த்து, ஒரு பட்டன் செய்தியைக் காட்ட வைக்கவும்.

அது தான் கிளாசிக் வெப்பின் முழு அடுக்கு, சுமார் இருபது நிமிடங்களில். HTML என்ன
என்பதைச் சொல்கிறது, CSS எப்படி இருக்கிறது என்பதைச் சொல்கிறது, JavaScript என்ன
செய்கிறது என்பதைச் சொல்கிறது. அந்த மூன்றையும் தேர்ச்சி பெற்றால், இணையதளங்களை
உருவாக்குகிறீர்கள் – இப்போது நீங்கள் படித்துக் கொண்டிருக்கும் இது போன்றது.

🧾 VelsTech டெவலப்பர் கருவிகளை முயற்சிக்கவும்

[JSON ஃபார்மேட்டர் & வாலிடேட்டர்](https://velstech.net/json-formatter) – API பதில்களை
வடிவமைத்து சரிபார்க்கவும்.

[Regex டெஸ்டர்](https://velstech.net/regex-tester) – குறியீட்டில் எழுதுவதற்கு முன்
பேட்டர்ன்களைச் சோதிக்கவும்.

[அனைத்து கருவிகளையும் பார்க்கவும் →](https://velstech.net/tools)

---

*VelsTech – https://velstech.net/html-css-js.ta.md*