কল্পনা করুন যে আপনি একটি মজার LEGO বাড়ি তৈরি করছেন। HTML হল ইটের মতো, CSS হল রং এবং সাজসজ্জা, এবং JavaScript যোগ করে মজার জিনিস, যেমন চলমান অংশ এবং আলো!
 |
| Learn HTML, CSS, Javascript as a Child or beginners |
HTML কি?
HTML এর পুরো নাম হল HyperText Markup Language। এটি ওয়েবসাইটের মূল বিল্ডিং ব্লক। HTML কে আপনার LEGO বাড়ির গঠন হিসেবে ভাবুন।
এটি কম্পিউটারকে বলে দেয় ওয়েবসাইটের প্রতিটি অংশ কী।
HTML এর কিছু গুরুত্বপূর্ণ বিষয়
- TAG : ট্যাগ হল লেবেলের মতো যা কম্পিউটারকে কি করতে হবে তা বলে। এগুলি কোণ ব্র্যাকেট </> এর ভিতরে লেখা হয়।
- Elements : একটি ট্যাগ জোড়ার মধ্যে থাকা সমস্ত কিছুই এলিমেন্টস বলা হয়। উদাহরণস্বরূপ,
< p> Hello!</p >
< html>
< head >
< title> আমার প্রথম ওয়েবসাইট < /title >
< /head>
< body>
< h1 > আমার ওয়েবসাইটে স্বাগতম < /h1 >
< p > এটি আমার সম্পর্কে একটি প্যারাগ্রাফ। < /p >
< / body >
< / html >
এই উদাহরণে:
- '< h1>'একটি হেডিং ট্যাগ, এবং আমার ওয়েবসাইটে স্বাগতম হল এর বিষয়বস্তু।
- '<p>' একটি প্যারাগ্রাফ ট্যাগ, এবং এটি আমার সম্পর্কে একটি প্যারাগ্রাফ। হল এর বিষয়বস্তু।
CSS কি?
CSS এর পুরো নাম হল Cascading Style Sheets। এটি আপনার LEGO বাড়ির রং এবং সাজসজ্জার মতো। CSS আপনার ওয়েবসাইটকে সুন্দর এবং আকর্ষণীয় করে তোলে রং, ফন্ট, সাইজ ইত্যাদি পরিবর্তন করে।
CSS কিভাবে কাজ করে
- সিলেক্টরস: সিলেক্টরস CSS-কে বলে কোন HTML এলিমেন্টটি স্টাইল করতে হবে। উদাহরণস্বরূপ, h1 সমস্ত ট্যাগ বেছে নেয়।
- প্রোপার্টিজ এবং ভ্যালুজ: এগুলি কম্পিউটারকে বলে কিভাবে এলিমেন্টগুলো স্টাইল করতে হবে। উদাহরণস্বরূপ, color হল একটি প্রোপার্টি, এবং blue হল এর ভ্যালু।
একটি সাধারণ CSS উদাহরণ এখানে দেওয়া হল:
h1 { color: blue; font-family: Arial, sans-serif; } p { color: green; font-size: 16px; }
এই উদাহরণে:
- h1 ট্যাগটি স্টাইল করা হয়েছে নীল রঙের এবং Arial ফন্ট ব্যবহার করতে।
- p ট্যাগটি স্টাইল করা হয়েছে সবুজ রঙের এবং 16 পিক্সেলের ফন্ট সাইজে।
JavaScript কি?
JavaScript হল আপনার LEGO বাড়ির চলমান অংশ এবং আলোর মতো। এটি আপনার ওয়েবসাইটকে ইন্টারঅ্যাকটিভ এবং মজার করে তোলে। JavaScript এর সাহায্যে, আপনি গেম তৈরি করতে পারেন, ব্যবহারকারীর ক্রিয়াকলাপের উত্তর দিতে পারেন, এবং পৃষ্ঠাটি পুনরায় লোড না করে বিষয়বস্তু আপডেট করতে পারেন।
JavaScript কিভাবে কাজ করে
- ফাংশনস: ফাংশনস হল নির্দেশাবলী সেট যা কম্পিউটারকে কি করতে হবে তা বলে।
- ইভেন্টস: ইভেন্টস হল কাজ যা আপনার ওয়েবসাইটে ঘটে, যেমন একটি বোতামে ক্লিক করা বা একটি ইমেজের উপর মাউস রাখা।
একটি সাধারণ JavaScript উদাহরণ এখানে দেওয়া হল:
<!DOCTYPE html> <html> <head> <title>আমার প্রথম ওয়েবসাইট JavaScript সহ</title> <style> h1 { color: blue; } </style> </head> <body> <h1>আমার রং পরিবর্তন করতে বোতামটি ক্লিক করুন</h1> <button onclick="changeColor()">ক্লিক করুন!</button> <script> function changeColor() { document.querySelector('h1').style.color = 'red'; } </script> </body> </html>
এই উদাহরণে:
- যখন আপনি বোতামটি ক্লিক করবেন, 'changeColor' ফাংশনটি কল করা হবে।
- changeColor ফাংশনটি < h1 > এলিমেন্টটির রং লাল করে দেবে।
সবকিছু একত্রে রাখা
এখন, চলুন দেখি কিভাবে HTML, CSS, এবং JavaScript একসাথে কাজ করে একটি সাধারণ ওয়েবসাইট তৈরি করতে।
<!DOCTYPE html> <html> <head> <title>আমার অসাধারণ ওয়েবসাইট</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; text-align: center; margin-top: 50px; } h1 { color: blue; } p { color: green; } button { padding: 10px 20px; font-size: 16px; } </style> </head> <body> <h1>আমার অসাধারণ ওয়েবসাইটে স্বাগতম</h1> <p>এটি CSS দিয়ে স্টাইল করা একটি প্যারাগ্রাফ।</p> <button onclick="changeText()">ক্লিক করুন!</button> <script> function changeText() { document.querySelector('p').innerText = 'আপনি বোতামটি ক্লিক করেছেন!'; } </script> </body> </html>
এই সম্পূর্ণ উদাহরণে:
- HTML একটি হেডিং, একটি প্যারাগ্রাফ এবং একটি বোতাম দিয়ে গঠন তৈরি করেছে।
- CSS পৃষ্ঠাটিকে সুন্দর করেছে রং, ফন্ট, এবং লেআউট দিয়ে।
- JavaScript ইন্টারঅ্যাকটিভিটি যোগ করেছে বোতামটি ক্লিক করলে প্যারাগ্রাফের টেক্সট পরিবর্তন করে।
আপনি এখন HTML, CSS, এবং JavaScript এর মৌলিক বিষয়গুলি শিখে নিয়েছেন। এই তিনটি টুল হল জাদুর কাঠির মতো যা আপনাকে আশ্চর্যজনক ওয়েবসাইট তৈরি করতে দেয়। মনে রাখবেন, HTML গঠন তৈরি করে, CSS এটিকে সুন্দর করে এবং JavaScript মজা যোগ করে। অনুশীলন চালিয়ে যান, এবং শীঘ্রই আপনি নিজের অসাধারণ ওয়েবসাইট তৈরি করবেন!