HTML TUTORIAL

=>small project based on html(Only using table no CSS)

create three page website where three menu available- Home | About | Contact
Write some paragraph in Home Page
Say about yourself on About page
in Contact page write down your address and mobile number and email id (only simple text)

Design The following Page

source code are following…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ad{
            font-size: 22px;
    </style>
</head>

<body>
    <table border="1" cellpadding="10">
        <tr>
            <td><img src="#"></td>

            <td>
                <table border="0" cellpadding="10" style="background-color: khaki;">
                    <tr>
                        <th colspan="2" style="background-color: bisque;" class="ad">Admission Enquiry</th>
                    </tr>
                    <tr>
                        <td><input type="text" placeholder="Enter First Name"></td>
                        <td> <input type="text" placeholder="Enter Second Name"> </td>
                    </tr>
                    <tr>
                        <td><input type="email" placeholder="Email Address"></td>
                        <td><input type="number" placeholder="Mobile numbe"> </td>
                    </tr>
                    <tr>
                        <td> <select name="country">
                                <option>Select Country</option>
                                <option>India</option>
                                <option>USA</option>
                                <option>Other</option>
                            </select>
                        </td>
                        <td> <select name="city">
                                <option>Select Country</option>
                                <option>Kakdwip</option>
                                <option>Patharpratima</option>
                                <option>Namkhana</option>
                                <option>Sagar</option>
                                <option>kolkata</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="date" name="date" placeholder="Enter date"></td>
                        <td>Male:<input type="radio" name="male">&nbsp; Female:<input type="radio" name="female"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="Submit"></td>
                    </tr>
                </table>

            </td>

        </tr>

    </table>
</body>

</html>

CSS Tutorial in Bengali

Here’s a beginner-level CSS tutorial in Bengali, including a small project that you can do to practice what you’ve learned.

🎓 বিষয়: CSS টিউটোরিয়াল (বাংলায়)

লেভেল: যারা নতুন Wen Development শিখছে

প্রজেক্ট: একটি পার্সোনাল প্রোফাইল ওয়েবপেজ

🔹 ১ম অধ্যায়: CSS কি?

CSS এর পূর্ণ নাম Cascading Style Sheets।
এটি HTML ডকুমেন্টের স্টাইল তৈরি করতে ব্যবহৃত হয়।
অর্থাৎ, এটি আপনার ওয়েবসাইটকে চেহারা দেয়(Structure) — ফন্ট(Font), রং(Color), লেআউট(Layout), মার্জিন(Margin),প্যাডিং(Padding) ইত্যাদি।

উদাহরণ:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: darkblue;
        }
    </style>
</head>
<body>
    <h1>Hello friend ! this is heading tag</h1>
    <p>This is Paragraph Tag</p>
</body>
</html>

🔹 ২য় অধ্যায়: CSS কিভাবে কাজ করে?

CSS তিন ধরনের জায়গায় লেখা যায়:

Inline CSS – ট্যাগের ভিতর style অ্যাট্রিবিউটে
Internal CSS – <style> ট্যাগের মধ্যে
External CSS – আলাদা .css ফাইলে

External CSS উদাহরণ:

HTML File (index.html):

<link rel="stylesheet" href="style.css">
<h1>আমার প্রোফাইল(My Profile)</h1>
<p>আমি একজন ওয়েব ডেভেলপার!(I am a developer)</p>

CSS File (style.css):

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

🔹 ৩য় অধ্যায়: কিছু গুরুত্বপূর্ণ CSS প্রোপার্টি

প্রোপার্টি(Property)	ব্যবহার(Uses)
`color`	টেক্সটের রং
`background-color`	ব্যাকগ্রাউন্ডের রং
`font-size`	টেক্সটের আকার
`margin`, `padding`	স্পেস ঠিক করা
`border`	বর্ডার দেওয়া
`text-align`	টেক্সট সাজানো

🔹 ৪র্থ অধ্যায়: প্রজেক্ট – পার্সোনাল প্রোফাইল পেজ

Purpose:

Simple Website:

আপনার নাম(Your Name)
ছবি(Your Image)
সংক্ষিপ্ত বিবরণ(Short description
কিছু লিঙ্ক(important link)

📁 ফাইল স্ট্রাকচার[File Structure]:

project-folder/
├── index.html
└── style.css

✅ 1. index.html

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>My Profile</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <img src="image.jpg" alt="pic" class="profile-pic">
        <h1>Manas Halder</h1>
        <p>I am a web Developer। I know HTML, CSS and  JavaScript </p>

        <div class="links">
            <a href="#">linkedin</a> |
            <a href="#">youtube</a> |
            <a href="#">facebook</a>
        </div>
    </div>

</body>
</html>

✅ 2. style.css

body {
    background-color: #eef2f3;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

.container {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    display: inline-block;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #007BFF;
}

h1 {
    color: #007BFF;
}

p {
    color: #555;
}

.links a {
    text-decoration: none;
    color: #007BFF;
    margin: 0 10px;
}

.links a:hover {
    text-decoration: underline;
}