html notes

HTML TUTORIAL

html Notes

=>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 āĻ¤āĻŋāĻ¨ āĻ§āĻ°āĻ¨ā§‡āĻ° āĻœāĻžāĻ¯āĻŧāĻ—āĻžāĻ¯āĻŧ āĻ˛ā§‡āĻ–āĻž āĻ¯āĻžāĻ¯āĻŧ:

  1. Inline CSS – āĻŸā§āĻ¯āĻžāĻ—ā§‡āĻ° āĻ­āĻŋāĻ¤āĻ° style āĻ…ā§āĻ¯āĻžāĻŸā§āĻ°āĻŋāĻŦāĻŋāĻ‰āĻŸā§‡
  2. Internal CSS – <style> āĻŸā§āĻ¯āĻžāĻ—ā§‡āĻ° āĻŽāĻ§ā§āĻ¯ā§‡
  3. 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;
}

āĻ¨āĻŋāĻšā§‡āĻ° āĻĄāĻŋāĻœāĻžāĻ‡āĻ¨ āĻŸāĻŋ āĻ¤ā§ˆāĻ°āĻŋ āĻ•āĻ° [Make this Design using HTML and CSS] “Do not Use Table tag“

Table of Contents

→ Index