🚀 HTML/CSS Tamil

The World's First HTML & CSS Programming Language completely in Tamil.

THTML bridges the digital divide by enabling millions of Tamil speakers to build modern, responsive, and professional websites using their native language. It is not just a translation map; it is a full-featured development environment with syntax highlighting, auto-completion, live preview, and embedded CSS support.

✨ Key Features

HTML in Tamil (.thtml): Use <தலை>, <உடல்>, <பிரிவு> instead of <head>, <body>, <div.
CSS in Tamil (.tcss): Style your app with வகுப்பு (class), நிறம் (color), பின்னணி (background).
Full Flexbox & Grid Support: Build complex layouts using native terms like கூட்டம் (flex) and கட்டம் (grid).
Embedded CSS: Write Tamil CSS directly inside your HTML using <பாணி>.
Attributes in Tamil: Use வகுப்பு="..." instead of class="...".
Live Preview: See your changes instantly with a built-in split-screen browser (Click the Play or Preview button).
IntelliSense: Smart auto-completion for all tags and properties.
Zero-Dependency Output: Compiles to standard, optimized HTML5 & CSS3 that runs on any browser.

🛠️ Installation

Open VS Code.
Go to Extensions (Ctrl+Shift+X).
Search for "THTML" or "Tamil HTML".
Click Install.

🚀 Usage Guide

1. Creating a Page (`.thtml`)

Create a new file ending in .thtml. Start typing < and see the magic of Tamil IntelliSense.

<பக்கம்>
  <தலை>
    <தலைப்பு>My Website</தலைப்பு>
    <பாணி>
       /* Embedded Tamil CSS */
       வகுப்பு_box {
          நிறம்: சிவப்பு;
       }
    </பாணி>
  </தலை>
  <உடல்>
    <தலைப்பாகம்>
       <தலைப்பு1>வணக்கம் உலகம்! (Hello World)</தலைப்பு1>
    </தலைப்பாகம்>

    <களம் வகுப்பு="box">
       <பத்தி>இது ஒரு தமிழ் இணையதளம்.</பத்தி>
    </களம்>
  </உடல்>
</பக்கம்>

2. Styling (`.tcss`)

Create a styling file ending in .tcss.

/* Universal Selector */
எல்லாம் {
  விளிம்பு: 0;
}

/* Class Selector (Matches class="ப்பெட்டி") */
வகுப்பு_ப்பெட்டி {
  அகலம்: 100px;
  உயரம்: 100px;
  பின்னணி: நீளம்;
}

/* Flexbox */
அடையாளம்_main {
  காட்சி: கூட்டம்; /* display: flex */
  திசை: நெடுவரிசை; /* flex-direction: column */
}

3. Running & Compiling

Compiling: Just save your file! (Note: Current version auto-compiles in memory for cleaner workspaces).
Preview: Click the Run button (▶️) or the Preview icon in the editor title bar to see your website live!

📚 Quick Reference (அகராதி)

HTML Tags

Tamil	English	Description
`<பக்கம்>`	`<html>`	Root element
`<உடல்>`	`<body>`	Visible content
`<களம்>`	`<div>`	Division
`<படம்>`	`<img>`	Image
`<இணைப்பு>`	`<a>`	Link/Anchor

CSS Properties

Tamil	English
`நிறம்`	`color`
`பின்னணி`	`background`
`எழுத்து_அளவு`	`font-size`
`விளிம்பு`	`margin`
`உள்வெளி`	`padding`

Attributes

Tamil	English
`வகுப்பு`	`class`
`அடையாளம்`	`id`
`பாதை`	`src`
`இணைப்பு`	`href`

❤️ Contributions

This project is open-source! We welcome contributions from the community to expand the vocabulary and improve the compiler.

Repository: [GitHub Link] License: MIT

Made with ❤️ for the Tamil Tech Community.

HTML/CSS Tamil

Mehanth