Web Development Notes

Complete HTML & CSS Guide with Live Editor

HTML Kya Hai?

HTML (HyperText Markup Language) web pages banane ke liye standard language hai. Ye web page ka structure define karti hai.

🔹 Basic Structure

<!DOCTYPE html> – Browser ko batata hai ki ye HTML5 document hai.
<html> – Root element, saara content iske andar hota hai.
<head> – Meta info like charset (encoding) description aur title.
<body> – Visible content (text, images, links) yahan likha jata hai.
<meta name="viewport" ...> – Website ko mobile-responsive banane ke liye.

🔹 Common Tags

🔹 Basic Tags

<h1> to <h6> – Headings (h1 sabse bada, h6 sabse chhota).
<p> – Paragraph likhne ke liye.
<br> – Line break (nayi line) ke liye.
<hr> – Horizontal rule (line) kheechne ke liye.
<b>, <strong> – Text ko bold karne ke liye.
<i>, <em> – Text ko italic karne ke liye.
<u> – Text ko underline karne ke liye.

🔹 Multimedia & Links

<a href="url"> – Links banane ke liye (Anchor tag).
<img src="image.jpg" alt="text"> – Image lagane ke liye.
<video controls> – Video player add karne ke liye.
<audio controls> – Audio player add karne ke liye.

🔹 Lists & Tables

<ul> & <li> – Unordered List (Bullet points).
<ol> & <li> – Ordered List (Numbers 1, 2, 3...).
<table> – Table banane ke liye parent tag.
<tr> – Table Row.
<th> – Table Header (Bold text).
<td> – Table Data (Normal cell).

🔹 HTML5 Semantic Elements (Modern Structure)

<header> – Website ka header area (Logo, Menu).
<nav> – Navigation links ka section.
<section> – Page ka ek alag hissa (Section).
<article> – Independent content (Blog post, News).
<footer> – Website ka sabse nichla bhag (Copyright, Links).
<aside> – Sidebar content (Ads, Recent posts).

🔹 Forms & Inputs

<form> – User input lene ke liye form area.
<input type="text"> – Text box.
<input type="password"> – Password box (dots dikhenge).
<input type="email"> – Email validation ke liye box.
<input type="date"> – Date picker calendar ke liye.
<input type="color"> – Color picker ke liye.
<input type="file"> – File upload karne ke liye.
<input type="radio"> – Radio button (Select only one).
<input type="checkbox"> – Checkbox (Select multiple).
<textarea> – Bade text area ke liye.
<button> – Clickable button.

HTML Practical Lab

Neeche diye gaye editor me code likhein aur "Result" box me output dekhein.

HTML Code

Output

CSS Kya Hai?

CSS (Cascading Style Sheets) webpage ko design aur style dene ke liye use hoti hai.

🔹 CSS Types

Inline CSS – HTML tag ke andar style attribute me likhi jati hai.
Internal CSS – <style> tag ke andar likhi jati hai.
External CSS – Alag .css file me likhi jati hai.

🔹 Selectors & Properties

🔹 Text & Color Properties

color – Text ka color change karein (#hex, rgb, name).
background-color – Element ka background color.
font-size – Text ka size (px, rem, em).
font-family – Font style (Arial, Roboto, etc.).
font-weight – Text ki motai (bold, normal, 100-900).
text-align – Text alignment (left, center, right, justify).
text-decoration – Underline hatane ya lagane ke liye (none, underline).

🔹 Box Model (Spacing & Borders)

width / height – Element ki chaudai aur lambai.
padding – Border ke andar ka space.
margin – Border ke bahar ka space.
border – Border style (e.g., 1px solid black).
border-radius – Corners ko gol karne ke liye.

🔹 Layout & Positioning

display – Element kaise dikhega (block, inline, inline-block, none, flex).
position – Positioning set karein (static, relative, absolute, fixed).
float – Element ko left ya right shift karein.
z-index – Elements ki layering (kaun kiske upar aayega).

🔹 Flexbox (Modern Layout)

display: flex; – Flex container banayein.
justify-content – Horizontal alignment (center, space-between).
align-items – Vertical alignment (center, stretch).
flex-direction – Items ki disha (row, column).

🔹 CSS Animations & Transitions (Cool Effects) 🔥

transition – Smooth changes ke liye (e.g., hover effect).
transform – Element ko ghumana, bada karna (rotate, scale).
animation – Keyframes key madayam se animation banana.
@keyframes – Animation ke steps define karna.
box-shadow – Element ke peeche parchhai (shadow) lagana.

🔹 CSS Grid Layout (2D Layout)

display: grid; – Container ko grid banata hai.
grid-template-columns – Columns ki sankhya aur size set karein (e.g., 1fr 1fr).
grid-template-rows – Rows ki height set karein.
gap – Rows aur columns ke beech space.

🔹 Responsive Design (Mobile Friendly) 📱

@media (max-width: 600px) {...} – Mobile screens ke liye styles.
max-width: 100%; – Images ko responsive banata hai.
flex-wrap: wrap; – Flex items ko nayi line me lata hai agar jagah kam ho.

CSS Practical Lab

Explore styling by modifying the CSS below.

HTML & CSS Code

Live Preview

Full Web Page Project

Complete project with Header, Navbar, Content, Table, Form, and Footer.

Project Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
        }

        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav {
            background-color: #34495e;
            padding: 10px;
            text-align: center;
        }

        nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
        }

        nav a:hover {
            color: #f1c40f;
        }

        .container {
            padding: 20px;
        }

        h2 {
            color: #2c3e50;
        }

        p {
            color: #555;
            line-height: 1.6;
        }

        img {
            width: 100%;
            max-width: 400px;
            border-radius: 10px;
            margin: 10px 0;
        }

        button {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
        }

        button:hover {
            background-color: #1e8449;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table, th, td {
            border: 1px solid #ccc;
        }

        th {
            background-color: #2980b9;
            color: white;
            padding: 10px;
        }

        td {
            padding: 10px;
            text-align: center;
        }

        form {
            margin-top: 20px;
            background: white;
            padding: 15px;
            border-radius: 8px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
        }

        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 10px;
            margin-top: 30px;
        }
    </style>
</head>

<body>

    <header>
        <h1>Welcome to My Website</h1>
        <p>HTML & CSS Basic Demo</p>
    </header>

    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>

    <div class="container">
        <h2>About This Page</h2>
        <p>
            This is a simple and clean web page created using basic HTML and CSS.
            It includes text, image, button, table, and form.
        </p>

        <img src="https://via.placeholder.com/400" alt="Sample Image">

        <br><br>
        <button>Click Me</button>

        <h2>Student Table</h2>
        <table>
            <tr>
                <th>Name</th>
                <th>Course</th>
                <th>Year</th>
            </tr>
            <tr>
                <td>Rahul</td>
                <td>ADCA</td>
                <td>2024</td>
            </tr>
            <tr>
                <td>Sita</td>
                <td>DCA</td>
                <td>2024</td>
            </tr>
        </table>

        <h2>Contact Form</h2>
        <form>
            <input type="text" placeholder="Enter Name">
            <input type="email" placeholder="Enter Email">
            <input type="submit" value="Submit">
        </form>
    </div>

    <footer>
        <p>© 2026 My Website | Designed with HTML & CSS</p>
    </footer>

</body>
</html>

Live Preview