Ad Code

HTML, CSS এবং JavaScript কীভাবে কাজ করে?

Khubayb Hossain January 13, 2025

সূচিপত্র

    বর্তমান যুগে ওয়েব ডেভেলপমেন্ট অত্যন্ত গুরুত্বপূর্ণ। বিশ্ববিদ্যালয়ের ভর্তি পরীক্ষার প্রস্তুতি নিতে হলে যেমন ঢাকা বিশ্ববিদ্যালয়ের (DU) মতো বিশ্ববিদ্যালয়ে, আপনাদেরকে ওয়েব ডেভেলপমেন্ট সম্পর্কে জানতে হবে। এই জন্য HTML, CSS, এবং JavaScript হল তিনটি মূল প্রযুক্তি যা ব্যবহার হয় ওয়েব পেজ তৈরি করতে। এই তিনটি টেকনোলজি মিলে আপনার ওয়েব পেজকে শুধু তথ্য প্রদানের জায়গা নয়, সুন্দর এবং ব্যবহারবান্ধব করে তোলে। চলুন বিস্তারিতভাবে এই তিনটি সম্পর্কে জানি এবং তাদের কার্যকারিতা দেখি।

    1. HTML (HyperText Markup Language):

    HTML হলো ওয়েব পেজ তৈরির ভিত্তি। এটি একটি ভাষা যা দিয়ে বিভিন্ন ধরনের কন্টেন্ট তৈরি করা হয়, যেমন: টেক্সট, ছবি, লিংক, ফর্ম ইত্যাদি। HTML কিভাবে ওয়েব পেজ তৈরি করে, তা সহজ ভাষায় বুঝলে ভালো হবে।

    HTML উদাহরণ:

    html

    <!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ঢাকা বিশ্ববিদ্যালয় ভর্তি পরীক্ষা</title>
</head>
<body>
    <header>
        <h1>ঢাকা বিশ্ববিদ্যালয়ের ভর্তি তথ্য</h1>
    </header>
    <main>
        <section>
            <h2: গুরুত্বপূর্ন তারিখ</h2>
            <p>২০২৫ সালে ভর্তি পরীক্ষা শুরু হবে <strong>১ মার্চ, ২০২৫</strong>.</p>
        </section>
        <footer>
            <p>যোগাযোগ করুন: info@du.edu.bd</p>
        </footer>
    </main>
</body>
</html>

    ব্যাখ্যা:

    • <html>: এটি একটি HTML ডকুমেন্ট শুরু করে।
    • <head>: এই ট্যাগে ওয়েব পেজের শিরোনাম (title), পেজের বিষয়বস্তু সম্পর্কিত তথ্য থাকে।
    • <body>: এখানে পেজের আসল কন্টেন্ট থাকে যা ইউজার দেখতে পায়—শিরোনাম (<h1>), প্যারাগ্রাফ (<p>), ছবি ইত্যাদি।
    • <header> এবং <footer>: এই ট্যাগগুলি পেজের শীর্ষ এবং তলদেশে অবস্থিত তথ্য বা লেখার জন্য ব্যবহার করা হয়।

    2. CSS (Cascading Style Sheets):

    CSS হলো ওয়েব পেজের চেহারা সুন্দর এবং আকর্ষণীয় করার জন্য ব্যবহৃত হয়। এটি দিয়ে আপনি HTML কন্টেন্টকে কিভাবে উপস্থাপন করতে চান, তা নিয়ন্ত্রণ করেন। যেমন: রঙ, ফন্ট, আয়তন, স্পেসিং ইত্যাদি।

    CSS উদাহরণ:

    css

    body {
        font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #0044cc;
    color: white;
    padding: 10px;
    text-align: center;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

h1 {
    font-size: 2em;
}

h2 {
    color: #0044cc;
}

    ব্যাখ্যা:

    • body {}: ওয়েব পেজের মূল কাঠামো নিয়ন্ত্রণ করে। এখানে আপনি ফন্ট, ব্যাকগ্রাউন্ড রঙ এবং টেক্সটের রঙ নির্ধারণ করতে পারেন।
    • header {}: এটি হেডার অংশের জন্য ব্যবহার করা হয়। হেডার অংশে রঙ পরিবর্তন, প্যাডিং ঠিক করা হয়।
    • footer {}: পেজের নিচের অংশকে সুন্দর এবং ব্যবহারবান্ধব করার জন্য ব্যবহার করা হয়।

    3. JavaScript (জাভাস্ক্রিপ্ট):

    JavaScript একটি প্রোগ্রামিং ভাষা যা ওয়েব পেজে ইন্টারঅ্যাকশন যোগ করে। এটি দিয়ে আপনি পেজের কন্টেন্ট পরিবর্তন করতে পারেন, ফর্ম ভ্যালিডেশন যোগ করতে পারেন, ব্যবহারকারীকে সতর্ক বার্তা দেখাতে পারেন, এবং পেজে অ্যানিমেশন যোগ করতে পারেন।

    JavaScript উদাহরণ:

    html

    <!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ফর্ম ভ্যালিডেশন</title>
    <script>
        function validateForm() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            if (name == "" || email == "") {
                alert("অনুগ্রহ করে সব ক্ষেত্র পূরণ করুন!");
                return false;
            }
            alert("ফর্ম সফলভাবে সাবমিট হয়েছে!");
            return true;
        }
    </script>
</head>
<body>
    <h1>ভর্তি ফর্ম</h1>
    <form onsubmit="return validateForm()">
        <label for="name">নাম:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">ইমেইল:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="সাবমিট করুন">
    </form>
</body>
</html>

    ব্যাখ্যা:

    • <script>: এখানে আপনি JavaScript কোড লিখতে পারেন। এটি ওয়েব পেজে ইন্টারঅ্যাকশন যোগ করে।
    • validateForm(): এই ফাংশন ব্যবহারকারীর পূরণ করা ফর্ম যাচাই করে—যদি নাম বা ইমেইল ফিল্ড ফাঁকা থাকে, তাহলে সতর্ক বার্তা দেখাবে। ফর্ম পূরণ করা হয়নি এমন হলে বার্তা দেখাবে।
    • onsubmit: ফর্ম সাবমিট করার আগে ভ্যালিডেশন ফাংশন চালু হবে।

    HTML, CSS এবং JavaScript কিভাবে একসাথে কাজ করে?

    • HTML একটি পেজের কাঠামো তৈরি করে—টেক্সট, ছবি, লিংক ইত্যাদি।
    • CSS দিয়ে এই কাঠামোর চেহারা সুন্দর এবং আকর্ষণীয় করা হয়। যেমন: রঙ পরিবর্তন, ফন্ট, স্পেসিং ইত্যাদি।
    • JavaScript ওয়েব পেজে ইন্টারঅ্যাকশন যোগ করে—ব্যবহারকারীকে সতর্ক বার্তা দেখানো, ফর্ম ভ্যালিডেশন বা ডাইনামিক কন্টেন্ট পরিবর্তন করার জন্য।

    উদাহরণ: ঢাকা বিশ্ববিদ্যালয়ের ভর্তি পেজ

    ধরা যাক, আপনি ঢাকা বিশ্ববিদ্যালয়ের একটি ভর্তি পেজ তৈরি করতে চান:

    1. HTML: এই পেজে ভর্তি তারিখ, যোগাযোগের তথ্য, ফর্ম ইত্যাদি তৈরি করবেন।
    2. CSS: সুন্দর ডিজাইন দেবেন—রঙ, ফন্ট, বর্ডার স্থাপন করবেন।
    3. JavaScript: ফর্ম ভ্যালিডেশন যোগ করবেন—যদি ব্যবহারকারী ভুল তথ্য দেয়, সতর্ক বার্তা দেখাবেন।

    সুন্দর ডিজাইন এবং কার্যকারিতা নিশ্চিত করতে কীভাবে শিখবেন?

    যখন আপনি এই প্রযুক্তিগুলো শিখবেন:

    • প্রথমে HTML শিখুন। বুঝুন কীভাবে বিভিন্ন উপাদান যেমন টেক্সট, লিংক, ছবি তৈরি করতে হয়।
    • তারপর CSS শিখুন। ফন্টের আকার, রঙ এবং পেজের স্টাইলিং কীভাবে করা যায় তা বুঝুন।
    • JavaScript শিখুন। কীভাবে একটি ওয়েব পেজকে ইন্টারেক্টিভ এবং ডায়নামিক করা যায় সেটি বুঝুন।

    এই তিনটি টেকনোলজি ব্যবহার করে আপনি ওয়েব পেজ তৈরি করতে পারবেন যা ব্যবহারকারী বান্ধব এবং কার্যকরী হবে।

    এই ভাবে আপনি সহজেই একটি সুন্দর এবং কার্যকরী ওয়েব পেজ তৈরি করতে পারবেন। তা হলে আপনি ঢাকা বিশ্ববিদ্যালয়ের ভর্তি পেজ কিংবা অন্য যেকোনো প্রোজেক্ট তৈরির জন্য ব্যবহার করতে পারবেন।


    এখানে ক্লিক করে উপরের পাঠটি পরীক্ষা করুন।

    Khubayb Hossain

    Posted by Khubayb Hossain

    Close Menu