HTML கோப்புகளை எழுத மற்றும் இயக்க ஒரு Text Editor மற்றும் ஒரு வெப்பிரவுசர் (Chrome, Firefox, Edge) தேவையாகும்.
—
1. தேவையான கருவிகள்
Text Editor – VS Code, Sublime Text, Notepad++ போன்றவை.
Web Browser – Google Chrome, Mozilla Firefox, Microsoft Edge.
—
2. Text Editor நிறுவல் மற்றும் அமைத்தல்
A) VS Code (Visual Studio Code) – (மிகப்பெரிய வசதி கொண்டது)
VS Code Install & Setup:
1. VS Code Download – அதிகாரப்பூர்வ இணையத்தளத்தில் சென்று VS Code பதிவிறக்கம் செய்யவும்.
2. Install செய்யும் போது Additional Options அனைத்தையும் தேர்வு செய்யவும்.
3. Extensions (பயனுள்ள பயன்பாடுகள்):
Live Server – HTML கோப்புகளை நேரடியாக பிரவுசரில் இயங்க செய்ய.
HTML Snippets – HTML குறியீடுகளை விரைவாக உருவாக்க.
Prettier – குறியீட்டை அழகாக வடிவமைக்க.
4. HTML கோப்பு உருவாக்க:
VS Code-ல் File → New File சென்று index.html என சேமிக்கவும்.
HTML குறியீடு எழுதவும்.
—
B) Sublime Text – (இலகுவான மற்றும் வேகமான Text Editor)
Sublime Text Install & Setup:
1. Sublime Text Download – அதிகாரப்பூர்வ இணையத்தளத்தில் சென்று பதிவிறக்கம் செய்யவும்.
2. Package Control Install – இதன் மூலம் HTML Auto-Completion போன்ற வசதிகளை பெறலாம்.
View → Show Console சென்று கீழே உள்ள குறியீட்டை உட்பதிவுசெய்க:
import urllib.request,os; pf=’Package Control.sublime-package’;
ipp = sublime.installed_packages_path(); urllib.request.install_opener(
urllib.request.build_opener(urllib.request.ProxyHandler({})));
open(os.path.join(ipp, pf), ‘wb’).write(urllib.request.urlopen(
‘https://packagecontrol.io/Package%20Control.sublime-package’).read())
3. HTML கோப்பு உருவாக்க:
File → New File சென்று index.html என சேமிக்கவும்.
HTML குறியீடு எழுதவும்.
—
C) Notepad++ – (எளிமையான மற்றும் மென்மையான Editor)
Notepad++ Install & Setup:
1. Notepad++ Download – அதிகாரப்பூர்வ இணையத்தளத்தில் இருந்து பதிவிறக்கம் செய்யவும்.
2. Install செய்து திறந்து File → New சென்று index.html என சேமிக்கவும்.
3. HTML கோப்பு உருவாக்கி உள்ளே குறியீடு எழுதவும்.
—
3. முதல் HTML கோப்பு எழுதுதல்
<!DOCTYPE html>
<html lang=”ta”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>என் முதல் HTML பக்கம்</title>
</head>
<body>
<h1>வணக்கம், தமிழ் உலகம்!</h1>
<p>இது என் முதல் HTML பக்கம்.</p>
</body>
</html>
HTML கோப்பை இயக்குவது எப்படி?
1. கோப்பை (.html) சேமிக்கவும்.
2. உங்கள் இணைய உலாவியில் (Chrome, Firefox) Open செய்யவும்.
3. VS Code-ல் “Live Server” extension ஐ பயன்படுத்தி நேரடி பார்வை (Live Preview) பெறலாம்.
—
எந்த Text Editor சிறந்தது?
சிறந்த தேர்வு:
புதியவர்கள் → Notepad++
தொழில்முறை (Advanced Users) → VS Code
வேகமான, லைட் வெயிட் தேவைப்பட்டால் → Sublime Text
Setting Up an HTML Development Environment
To start coding in HTML, you need two things:
1. A Text Editor – Such as VS Code, Sublime Text, or Notepad++.
2. A Web Browser – Like Google Chrome, Mozilla Firefox, or Microsoft Edge.
—
1. Choosing a Text Editor
A) VS Code (Visual Studio Code) – Best for Advanced Users
Installation & Setup:
1. Download VS Code and install it.
2. During installation, select all Additional Options for better functionality.
3. Useful Extensions:
Live Server – To preview HTML files instantly in the browser.
HTML Snippets – For faster HTML coding.
Prettier – To format the code neatly.
4. Create an HTML File:
Open VS Code, click File → New File, and save it as index.html.
Start writing HTML code.
—
B) Sublime Text – Fast & Lightweight Editor
Installation & Setup:
1. Download Sublime Text and install it.
2. Install Package Control for extra features:
Open View → Show Console, then paste the following code and press Enter:
import urllib.request,os; pf=’Package Control.sublime-package’;
ipp = sublime.installed_packages_path(); urllib.request.install_opener(
urllib.request.build_opener(urllib.request.ProxyHandler({})));
open(os.path.join(ipp, pf), ‘wb’).write(urllib.request.urlopen(
‘https://packagecontrol.io/Package%20Control.sublime-package’).read())
3. Create an HTML File:
Click File → New File, save it as index.html, and start coding.
—
C) Notepad++ – Simple & Lightweight
Installation & Setup:
1. Download Notepad++ and install it.
2. Open Notepad++, click File → New, and save it as index.html.
3. Start writing your HTML code.
—
2. Writing Your First HTML File
Create an index.html file and add the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
How to Run Your HTML File?
1. Save the file with a .html extension.
2. Open it in any web browser (Chrome, Firefox, Edge).
3. If using VS Code, install the Live Server extension and click “Go Live” to preview changes instantly.
—
3. Best Text Editor for HTML?
Best Choice Based on Needs:
For Beginners → Notepad++
For Professionals → VS Code
For Speed & Lightweight Use → Sublime Text
Which text editor are you planning to use?