Step 01

HTML kya hai?

HTML ka poora naam HyperText Markup Language hai. Yeh koi programming language nahi — yeh ek markup language hai jo browsers ko batati hai ke webpage par kya dikhana hai.

Sochain ke aap ek ghar bana rahe hain. HTML wohi neenv (foundation) aur deewarein hain. CSS ghar ko rangna aur sajana hai. JavaScript ghar mein bijli aur paani chalana hai.

Yaad rakhein: Aaj ke tutorial mein hum sirf HTML aur CSS cover karenge. Yeh do cheezein seekh kar aap koi bhi basic website bana sakte hain!

HTML kaise kaam karta hai?

HTML tags use karta hai — jo angled brackets < > mein likhe jaate hain. Har tag browser ko batata hai ke is content ka role kya hai.

HTML

<!-- Yeh ek heading hai -->
<h1>Mera Pehla Heading</h1>

<!-- Yeh ek paragraph hai -->
<p>Yeh mera pehla paragraph hai. HTML seekhna bahut aasaan hai!</p>

<!-- Yeh ek link hai -->
<a href="https://freetoolshub.online">FreeToolsHub visit karein</a>

Opening & Closing Tags: Zyada tar tags do jagah likhe jaate hain — ek opening tag <p> aur ek closing tag </p> (forward slash ke saath).

2

Step 02

Basic HTML Structure

Har HTML page ki ek standard structure hoti hai. Yeh structure likhna zaroor hai — warna browser sahi se page nahi dikhayega.

<!DOCTYPE html> ← Browser ko batata hai "yeh HTML5 page hai"

<html lang="ur"> ← Poora page is tag mein hota hai

<head> ← Page ki info (user ko nahi dikhti)

<title>Mera Website</title> ← Browser tab mein naam

</head>

<body> ← Yahan sab kuch dikhta hai

<h1>Mera Pehla Website</h1>

<p>Hello Duniya!</p>

</body>

</html>

Complete HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mera Pehla Website</title>
</head>
<body>

    <h1>Assalam o Alaikum!</h1>
    <p>Yeh mera pehla website hai.</p>

</body>
</html>

Practice Tip: Notepad (ya VS Code) kholein, yeh code paste karein, index.html naam se save karein, aur browser mein double-click karke kholein. Aapka pehla webpage taiyar!

3

Step 03

Common HTML Tags

Yeh woh tags hain jo aap har webpage par dekhenge. Inhe yaad karlein!

Important HTML Tags

<!-- Headings: h1 sabse bada, h6 sabse chhota -->
<h1>Main Title</h1>
<h2>Sub-Title</h2>
<h3>Chhota Heading</h3>

<!-- Paragraph -->
<p>Normal text yahan aata hai.</p>

<!-- Link (Hyperlink) -->
<a href="https://google.com" target="_blank">Google kholein</a>

<!-- Image -->
<img src="photo.jpg" alt="Meri Photo" width="300">

<!-- List -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Button -->
<button>Click karein!</button>

<!-- Divider line -->
<hr>

Quick Quiz — Test Yourself!

HTML mein image dikhane ke liye kaunsa tag use hota hai?

A <picture>

B <img>

C <photo>

D <image>

4

Step 04

CSS kya hai?

CSS ka poora naam Cascading Style Sheets hai. Yeh aapke HTML ko khoobsurat banata hai — rango, fonts, sizes, aur layouts ke zariye.

HTML ne structure banaya — CSS ne use design diya. Bina CSS ke website bilkul plain aur boring lagti hai.

color

Text ka rang set karta hai

background

Background color ya image

font-size

Text ka size control karta hai

padding

Element ke andar space

margin

Element ke bahar space

border-radius

Corners ko round banata hai

CSS kaise likha jaata hai?

CSS ka syntax bahut simple hai: selector + property + value.

CSS Syntax

/* Selector { property: value; } */

h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

p {
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

5

Step 05

CSS Styling Apply Karna

CSS apply karne ke teen tarike hain. Hum external CSS recommend karte hain — yeh sabse clean aur professional tarika hai.

HTML + CSS Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mera Styled Page</title>

    <!-- Andar CSS (style tag mein) -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f4ff;
            margin: 0;
            padding: 40px;
        }

        h1 {
            color: #1e3a8a;
            font-size: 2rem;
        }

        p {
            color: #475569;
            max-width: 600px;
        }

        .btn {
            display: inline-block;
            background: #2563eb;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Mera Khoobsurat Website</h1>
    <p>Ab mera page rang-birang lag raha hai!</p>
    <a href="#" class="btn">More Explore Karein</a>
</body>
</html>

Live Preview — Yeh aise dikhega:

Live Preview

Mera Khoobsurat Website

Ab mera page rang-birang lag raha hai! CSS ne ise bilkul naya look de diya.

More Explore Karein

Class aur ID: CSS mein .classname class select karta hai aur #idname ID. Class zyada useful hai kyunki ek class kai elements par lagayi ja sakti hai.

6

Step 06 — Final Project

Complete Portfolio Page Banayein

Ab hum sab kuch mila kar ek simple portfolio page banayenge. Yeh code copy karein, index.html mein save karein aur browser mein kholein!

🎯 Aaj ka Project: Personal Portfolio Page

Is project mein aap seekhenge:

✓ Header Section ✓ About Me ✓ Skills List ✓ Contact Button ✓ CSS Styling ✓ Responsive Design

Complete Portfolio Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mera Portfolio</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: Arial, sans-serif;
            background: #f8fafc;
            color: #334155;
        }

        header {
            background: linear-gradient(135deg, #1e3a8a, #7c3aed);
            color: white;
            text-align: center;
            padding: 60px 20px;
        }

        header h1 { font-size: 2.5rem; margin-bottom: 10px; }
        header p { font-size: 1.1rem; opacity: 0.85; }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .section {
            background: white;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
        }

        .section h2 {
            color: #1e3a8a;
            margin-bottom: 16px;
            font-size: 1.4rem;
        }

        ul li { padding: 6px 0; }

        .btn {
            display: inline-block;
            background: #7c3aed;
            color: white;
            padding: 14px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
        }
    </style>
</head>
<body>

    <header>
        <h1>Ali Khan</h1>
        <p>Web Developer | Pakistan 🇵🇰</p>
    </header>

    <div class="container">

        <div class="section">
            <h2>Mere Baare Mein</h2>
            <p>Main ek beginner web developer hoon jo HTML, CSS
            aur JavaScript seekh raha hoon. Mujhe websites
            banana bahut pasand hai!</p>
        </div>

        <div class="section">
            <h2>Meri Skills</h2>
            <ul>
                <li>✅ HTML — Basic Structure</li>
                <li>✅ CSS — Styling & Layout</li>
                <li>🔄 JavaScript — Seekh raha hoon</li>
            </ul>
        </div>

        <div class="section" style="text-align:center">
            <h2>Mujhse Contact Karein</h2>
            <a href="mailto:ali@example.com" class="btn">
                Email Bhejein
            </a>
        </div>

    </div>
</body>
</html>

Mubarak ho! 🎉 Aapne apna pehla complete HTML + CSS webpage bana liya. Is code mein "Ali Khan" ki jagah apna naam likhin aur email address badlein!

Agle Steps Kya Hain?

Yeh tutorial complete karne ke baad in tutorials ki taraf badhein:

CSS Flexbox & Grid

Modern layouts banana seekhein

JavaScript Basics

Website ko interactive banayein

Master HTML & CSS From Scratch