HTML5 اینٹٹیز ! علامات اور ویب سائٹ ۔ لیکچر 5

اردو میں جدید کوڈنگ زبان ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا یہ پانچواں لیچکچر ہے ۔ یہ لیکچر انتہائی آسان زبان اور آسانی سے سمجھ میں آنے والی کوڈنگ میں لکھا گیا ہے ۔ اس زبان کو ایک نو دس سال کا بچہ بھی آسانی سے سمجھ سکتا ہے ۔۔ تو آئیے شروع کرتے ہیں آج کا پانچواں لیکچر ۔HTML5 اینٹٹیز ! علامات اور ویب سائٹ کا بنانا

Table of Contents

HTML اینٹٹیز

HTML میں کچھ حروف مخصوص ہوتے ہیں، جیسے کہ < (کم سے) کا نشان جو ٹیگ شروع کرتا ہے۔ اگر آپ چاہتے ہیں کہ براؤزر ان حروف کو دکھائے، تو آپ کو اینٹٹی کا استعمال کرنا ہوگا۔

عام اینٹٹیز

نتیجہ	تفصیل	اینٹٹی کا نام	اینٹٹی نمبر
	نان-بریکنگ اسپیس	`&nbsp;`	` `
<	کم سے	`&lt;`	`<`
>	زیادہ سے	`&gt;`	`>`
&	ایمپرسینڈ	`&amp;`	`&`
©	کاپی رائٹ	`&copy;`	`©`
®	رجسٹرڈ ٹریڈ مارک	`&reg;`	`®`

HTML کا جائزہ

اب تک ہم نے کیا سیکھا؟

HTML کا تعارف اور بنیادی ساخت
عناصر اور ٹیگز (ہیڈنگز، پیراگراف، لنکس، تصاویر)
فہرستیں (ترتیب شدہ اور غیر ترتیب شدہ)
جدول
فارمز (ان پٹ کی مختلف اقسام)
سیمنٹک HTML (header, footer, nav, section, article)
ملٹی میڈیا (آڈیو اور ویڈیو)
Iframes
ہیڈ عنصر (meta, title, link)
اینٹٹیز اور علامات

مشق: ایک سادہ ذاتی پورٹ فولیو پیج بنائیں

ان تمام تصورات کو استعمال کرتے ہوئے، ایک سادہ ویب پیج بنائیں جس میں آپ کا نام، ایک تصویر، آپ کی مہارتوں کی فہرست، اور آپ کے پسندیدہ گانوں کی ایک یوٹیوب ویڈیو شامل ہو۔

اردو میں ویب سائٹ بنانے کے لئے ویب پیج کی زبان ur کرتے ہیں اور اس کی لکھائی کی ڈائرکشن کو دائیں جانب کرنے کے لئے dir="rtl" لکھا جاتا ہے

<html lang="ur" dir="rtl">

سادہ ویب پیج

<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
    <title>میرا پورٹ فولیو</title>
</head>
<body>

    <header>
        <h1>میرا نام</h1>
        <img src="https://via.placeholder.com/150" alt="میری تصویر">
    </header>

    <section>
        <h2>میری مہارتیں</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </section>

    <section>
        <h2>میرا پسندیدہ گانا</h2>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
    </section>

    <footer>
        <p>کاپی رائٹ © 2025</p>
    </footer>

</body>
</html>

جدید طریقہ

ایچ ٹی ایم ایل اور سی ایس ایس کے ملاپ سے ویب پیج کی مثال ۔۔۔ یہ ہم آنے والے لیکچرز میں دیکھیں گے

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>My Portfolio</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --text-color: #333;
            --bg-color: #f4f4f4;
            --card-bg: white;
            --spacing-sm: 10px;
            --spacing-md: 20px;
            --spacing-lg: 40px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            padding: var(--spacing-lg);
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: center;
            gap: var(--spacing-md);
            background-color: #2c3e50;
            padding: var(--spacing-sm);
        }

        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        nav a:hover {
            text-decoration: underline;
        }

        main {
            padding: var(--spacing-lg);
            max-width: 1000px;
            margin: auto;
        }

        section {
            margin-bottom: var(--spacing-lg);
        }

        .about {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-md);
            align-items: center;
        }

        .about img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 50%;
        }

        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-sm);
        }

        .skill-tag {
            background-color: var(--card-bg);
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid #ddd;
            transition: background-color 0.3s ease;
        }

        .skill-tag:hover {
            background-color: var(--primary-color);
            color: white;
        }

        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: var(--spacing-md);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .about {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>

    <!-- Header -->
    <header>
        <h1>Nadia Akram</h1>
        <p>Web Developer & Learner</p>
    </header>

    <!-- Navigation -->
    <nav>
        <a href="#about">About Me</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
    </nav>

    <!-- Main Content -->
    <main>
        <!-- About Section -->
        <section id="about" class="about">
            <img src="https://picsum.photos/id/1027/150/150 " alt="My Photo">
            <div>
                <h2>About Me</h2>
                <p>Hello! I'm Nadia, a young web developer learning HTML, CSS, and JavaScript. I love building websites and making them look beautiful and work well on all devices.</p>
                <p>I enjoy coding, playing games, and reading about space exploration!</p>
            </div>
        </section>

        <!-- Skills Section -->
        <section id="skills">
            <h2>Skills</h2>
            <div class="skills">
                <div class="skill-tag">HTML</div>
                <div class="skill-tag">CSS</div>
                <div class="skill-tag">JavaScript</div>
                <div class="skill-tag">Problem Solving</div>
                <div class="skill-tag">Creativity</div>
            </div>
        </section>

        <!-- Contact Section -->
        <section id="contact">
            <h2>Contact Me</h2>
            <p>Email: nadia@example.com</p>
            <p><a href="contact-form.html" class="btn">Send Me a Message</a></p>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2025 Nadia Akram. All rights reserved.</p>
    </footer>

</body>
</html>

اردو میں تمام لیکچرز کی فہرست

انگلش زبان میں لیکچر پی کے بلاگ پر دیکھیں