இன்றைய டிஜிட்டல் உலகில் இணையதளங்கள் (Websites) மிகவும் முக்கியமானவை. நாம் தினமும் பயன்படுத்தும் இணையதளங்கள் அனைத்தும் HTML மற்றும் CSS போன்ற தொழில்நுட்பங்களின் மூலம் உருவாக்கப்படுகின்றன. Web Development கற்றுக்கொள்ள விரும்பும் அனைவருக்கும் HTML மற்றும் CSS என்பது அடிப்படை படியாகும்.
HTML என்றால் என்ன?
HTML என்பது HyperText Markup Language என்பதன் சுருக்கமாகும். இது ஒரு Web Page-இன் அமைப்பை (Structure) உருவாக்க பயன்படுகிறது.
ஒரு இணையதளத்தில் உள்ள:
- தலைப்பு (Heading)
- பத்தி (Paragraph)
- படம் (Image)
- லிங்க் (Link)
- பட்டியல் (List)
- அட்டவணை (Table)
போன்ற அனைத்தையும் HTML மூலம் உருவாக்கலாம்.
HTML உதாரணம்
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>வணக்கம் உலகம்!</h1>
<p>இது என் முதல் HTML பக்கம்.</p>
</body>
</html>இந்த code browser-ல் ஒரு எளிய webpage-ஐ காட்டும்.
CSS என்றால் என்ன?
CSS என்பது Cascading Style Sheets என்பதன் சுருக்கமாகும். இது Web Page-ஐ அழகாக வடிவமைக்க (Design & Styling) பயன்படுகிறது.
CSS மூலம்:
- நிறங்கள் (Colors)
- எழுத்துரு (Fonts)
- Layout
- Animation
- Responsive Design
போன்றவற்றை உருவாக்கலாம்.
CSS உதாரணம்
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}இந்த CSS code webpage-இன் தோற்றத்தை மாற்றும்.
HTML மற்றும் CSS எப்படி இணைந்து செயல்படுகின்றன?
HTML என்பது வீட்டின் கட்டுமானம் போல.
CSS என்பது அந்த வீட்டின் அலங்காரம் போல.
உதாரணமாக:
- HTML → சுவர், கதவு, ஜன்னல்
- CSS → Paint, Design, Decoration
இரண்டும் சேர்ந்து தான் ஒரு Professional Website உருவாகிறது.
HTML-இன் முக்கிய கூறுகள்
1. Heading Tags
<h1> பெரிய தலைப்பு </h1>2. Paragraph Tag
<p> இது ஒரு paragraph </p>3. Image Tag
<img src="image.jpg" alt="sample image">4. Link Tag
<a href="https://example.com">Visit Website</a>5. List Tags
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>CSS வகைகள்
Inline CSS
<p style="color:red;">Hello</p>Internal CSS
<style>
p {
color: blue;
}
</style>External CSS
<link rel="stylesheet" href="style.css">Professional websites-ல் பொதுவாக External CSS பயன்படுத்தப்படுகிறது.
HTML Editor என்றால் என்ன?
HTML மற்றும் CSS code எழுத பயன்படும் software-ஐ HTML Editor என்று அழைக்கப்படுகிறது. ஆரம்ப நிலை பயிலர்களுக்கு கீழ்கண்ட editors மிகவும் உதவியாக இருக்கும்:
- Visual Studio Code
- Sublime Text
- Notepad++
இந்த editors-ல் code எழுதுவதும், errors கண்டுபிடிப்பதும் மிகவும் எளிதாக இருக்கும்.
Browser எப்படி HTML & CSS-ஐ வேலை செய்கிறது?
நாம் எழுதும் HTML மற்றும் CSS code-ஐ browser படித்து webpage-ஆக மாற்றுகிறது.
பொதுவாக பயன்படுத்தப்படும் browsers:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
இந்த browsers-ல் Developer Tools என்ற வசதி இருக்கும். இது webpage structure மற்றும் CSS styling-ஐ live-ஆக inspect செய்ய உதவும்.
HTML & CSS கற்றுக்கொள்ள வேண்டிய காரணங்கள்
Web Development Career
Frontend Developer ஆக விரும்பினால் HTML & CSS அவசியம்.
Easy to Learn
Programming background இல்லாதவர்களும் எளிதாக கற்றுக்கொள்ளலாம்.
Website Creation
Personal Website, Business Website, Portfolio போன்றவற்றை உருவாக்கலாம்.
Freelancing Opportunities
Freelance Web Designer ஆக பணம் சம்பாதிக்கலாம்.
Responsive Web Design என்றால் என்ன?
இன்றைய காலத்தில் மக்கள் Mobile, Tablet, Laptop போன்ற பல சாதனங்களில் websites பயன்படுத்துகின்றனர்.
அனைத்து சாதனங்களிலும் சரியாக தோன்றும் வகையில் website உருவாக்குவது Responsive Design ஆகும்.
CSS Media Queries மூலம் இதை உருவாக்கலாம்.
@media screen and (max-width:600px) {
body {
background-color: lightblue;
}
}HTML & CSS பயன்படுத்தப்படும் துறைகள்
- Business Websites
- E-Commerce Sites
- Blogs
- Educational Platforms
- Portfolio Websites
- News Websites
- Landing Pages
HTML & CSS கற்றுக்கொள்ள பிறகு என்ன கற்கலாம்?
HTML & CSS முடித்த பிறகு கீழ்கண்டவற்றை கற்கலாம்:
- JavaScript
- Bootstrap
- React JS
- UI/UX Design
- Full Stack Development
HTML & CSS கற்றுக்கொள்ள உதவும் குறிப்புகள்
- தினமும் Practice செய்யுங்கள்
- சிறிய Projects உருவாக்குங்கள்
- Existing websites clone செய்ய முயற்சி செய்யுங்கள்
- Browser Developer Tools பயன்படுத்துங்கள்
- YouTube மற்றும் Online Courses மூலம் கற்றுக்கொள்ளுங்கள்
முடிவுரை
Web Development உலகில் முதல் படியாக HTML மற்றும் CSS மிகவும் முக்கியமானவை. Website உருவாக்க கற்றுக்கொள்ள விரும்பும் அனைவரும் முதலில் HTML & CSS-ஐ நன்றாக புரிந்துகொள்ள வேண்டும்.
இவை எளிமையானவை மட்டுமல்லாமல், எதிர்கால IT Career-க்கு வலுவான அடித்தளமாகவும் இருக்கும். தொடர்ந்து பயிற்சி செய்தால் Professional Web Developer ஆக வளர முடியும்.
About the Author
